扁平化設(shè)計(jì)在旅游產(chǎn)品ui中的應(yīng)用

楊秀 張曉悅

摘 要：隨著新時(shí)代的到來，智能設(shè)備的普及以及旅游業(yè)迅速的發(fā)展，旅游產(chǎn)品ui設(shè)計(jì)風(fēng)格的迥異引起了越來越多人的關(guān)注與討論。在旅游產(chǎn)品用戶界面設(shè)計(jì)中，設(shè)計(jì)師們?yōu)榱俗非蟾嗟囊曈X效果而導(dǎo)致過量的裝飾，設(shè)計(jì)出的界面也越來越復(fù)雜，從而使用戶產(chǎn)生視覺疲勞，喪失了產(chǎn)品本身的實(shí)用性與功能性特征。為了解決這一現(xiàn)狀，扁平化設(shè)計(jì)風(fēng)格的使用使設(shè)計(jì)更具有簡(jiǎn)潔、概括、簡(jiǎn)練與樸素的特征，使其變得功能化與實(shí)用化，同時(shí)提高了設(shè)計(jì)師們的工作效率。優(yōu)秀的扁平化設(shè)計(jì)需要設(shè)計(jì)師認(rèn)真推敲，學(xué)習(xí)不當(dāng)傳達(dá)的感情會(huì)產(chǎn)生一定的局限性。本篇文章主要研究扁平化風(fēng)格在旅游產(chǎn)品ui中的應(yīng)用，以金陵游ui界面設(shè)計(jì)為例詳細(xì)研究。（南京工業(yè)大學(xué)浦江學(xué)院大學(xué)生創(chuàng)新創(chuàng)業(yè)訓(xùn)練計(jì)劃項(xiàng)目資金資助，項(xiàng)目編號(hào)PJ20211390533）

關(guān)鍵詞：扁平化設(shè)計(jì);旅游產(chǎn)品ui設(shè)計(jì);擬物化設(shè)計(jì)

一、扁平化設(shè)計(jì)

1.1 扁平化設(shè)計(jì)的特點(diǎn)

扁平化設(shè)計(jì)是存在于二維世界并且不加繁瑣裝飾的一種設(shè)計(jì)手法。其減少了3D立體中如紋理、漸變、高光、立體、陰影、透視等圖形裝飾方法，打造一種純二維空間的、純“平”的視覺效果。扁平化設(shè)計(jì)的樸素、簡(jiǎn)潔、功能性與實(shí)用性等特點(diǎn)對(duì)平面設(shè)計(jì)師們及平面設(shè)計(jì)領(lǐng)域都產(chǎn)生了很大的影響。

扁平化設(shè)計(jì)去除了繁瑣的裝飾效果，具有簡(jiǎn)潔和抽象的圖形、無襯線字體、高明度的色彩對(duì)比，極具視覺沖擊力的畫面效果等特點(diǎn)，把扁平化設(shè)計(jì)風(fēng)格推上了時(shí)尚浪尖。2013年蘋果公司發(fā)布了iso7操作系統(tǒng)的手機(jī)設(shè)備，如圖1， iOS7系統(tǒng)操作界面采用扁平化設(shè)計(jì)，其中標(biāo)志、icon、主屏幕、插圖、通知界面等設(shè)計(jì)都采用高明度配色方法，字體也采用簡(jiǎn)潔的不加裝飾的無襯線字體，并且增加適當(dāng)?shù)牧舭?，使整體界面更具有通透性，變得簡(jiǎn)潔明了干凈了。在此之后，扁平化風(fēng)格的ui界面設(shè)計(jì)逐漸成熟。

1.2 扁平化設(shè)計(jì)的應(yīng)用

扁平化設(shè)計(jì)最先被應(yīng)用在界面設(shè)計(jì)、交互設(shè)計(jì)，并隨后逐漸擴(kuò)展到更廣泛的領(lǐng)域中。例如視覺導(dǎo)視系統(tǒng)、信息圖表設(shè)計(jì)、海報(bào)設(shè)計(jì)、網(wǎng)站設(shè)計(jì)、包裝設(shè)計(jì)、插畫設(shè)計(jì)等。其實(shí)用性和功能性優(yōu)勢(shì)被最大化應(yīng)用在各個(gè)設(shè)計(jì)領(lǐng)域，讓用戶對(duì)信息更具辨識(shí)性。例如將信息可視化的信息圖表設(shè)計(jì)，如圖2，整體畫面采用扁平化風(fēng)格，運(yùn)用常規(guī)簡(jiǎn)潔的無襯線字體，更具高級(jí)感和精致感，扁平化小插畫將信息可視化，一方面節(jié)省了設(shè)計(jì)師的工作時(shí)間，另一方面大大增加了觀者的興趣。扁平化風(fēng)格截然不同于真實(shí)的擬物化風(fēng)格，反其道而行之，摒棄了一切多余復(fù)雜的透視、紋理、漸變、陰影等效果，以及任何能做出3D效果的裝飾性元素，完全只凸顯最主要的核心信息，同時(shí)在設(shè)計(jì)元素上，去除厚重、冗雜和繁瑣的裝飾，強(qiáng)調(diào)極簡(jiǎn)風(fēng)，更強(qiáng)的功能性和符號(hào)化[2]。

扁平化設(shè)計(jì)將核心信息可視化，讓用戶更快獲取信息，提高了用戶閱讀的效率，界面整體排版簡(jiǎn)約有序。因此不論是年齡大或是小，又或者是沒有過相關(guān)操作經(jīng)驗(yàn)的人來說在拿到設(shè)備后都能夠在短時(shí)間內(nèi)輕松愉快地學(xué)會(huì)并且掌握它的使用方法，大大提高了用戶的使用效率，使用戶在使用的過程中減少了阻力獲得了成就。

但隨著扁平化設(shè)計(jì)席卷設(shè)計(jì)界，成為設(shè)計(jì)界的一股時(shí)尚浪潮，相對(duì)應(yīng)的也出現(xiàn)了一系列問題，如界面整體風(fēng)格較為單調(diào)冷峻，對(duì)信息的描述也只是簡(jiǎn)單的平鋪直敘，缺少人情味，顏色的明度亮度與飽和度的使用不當(dāng)，使主題信息無法突出。另外界面的設(shè)計(jì)語(yǔ)言與功能性出現(xiàn)了同質(zhì)化現(xiàn)象，越來越多的界面設(shè)計(jì)出現(xiàn)更新滯后性，缺乏人為情感與創(chuàng)新性，并且行業(yè)之間缺乏核心競(jìng)爭(zhēng)力，從而有些UI設(shè)計(jì)已經(jīng)不再滿足用戶需求，甚至開始出現(xiàn)了審美疲勞。

目前來看，扁平化設(shè)計(jì)準(zhǔn)確、有效、積極的應(yīng)用在界面上才是正道。

二、扁平化設(shè)計(jì)在金陵旅游產(chǎn)品ui中的應(yīng)用

2.1 標(biāo)志的極簡(jiǎn)化

隨著扁平化設(shè)計(jì)的深入人心，金陵旅游產(chǎn)品標(biāo)志設(shè)計(jì)也更新迭代。

“擬物化設(shè)計(jì)”的初衷是為了降低學(xué)習(xí)成本，對(duì)于標(biāo)準(zhǔn)化規(guī)范制作的要求很低，同時(shí)又有著仿真寫實(shí)的效果。但對(duì)于現(xiàn)代人來說，“擬物化設(shè)計(jì)”已不再滿足用戶需求。近些年，金陵旅游產(chǎn)品ui設(shè)計(jì)為了更好的吸引用戶的關(guān)注，逐漸由擬物化設(shè)計(jì)轉(zhuǎn)換為扁平化設(shè)計(jì)，增加了界面的層次感以及趣味性，在標(biāo)志的細(xì)節(jié)把控上也僅僅采用微漸變和微投影，使標(biāo)志呈現(xiàn)出一種簡(jiǎn)潔輕快的立體感，既避免了標(biāo)志由于過多的視覺裝飾而產(chǎn)生的沉重感，又減少了標(biāo)志樣式的相似性。

扁平化設(shè)計(jì)去掉了復(fù)雜的裝飾效果，使標(biāo)志變得更加簡(jiǎn)潔明快直接，從而突出主題，迅速抓住用戶的注意力。標(biāo)志回歸其最本身的作用，實(shí)用性功能性是標(biāo)志最重要的標(biāo)準(zhǔn)，標(biāo)志設(shè)計(jì)的扁平化，拋棄其不必要的裝飾效果，學(xué)習(xí)時(shí)間和成本也大大減少，達(dá)到了事半功倍的作用。游客們?cè)谛量嘤瓮鏁r(shí)，清爽簡(jiǎn)潔明快的標(biāo)志設(shè)計(jì)更能抓住人眼球。

2.2 色彩的靚麗化

不同的色彩賦有不同的情感特征，色彩是一種無聲但是強(qiáng)有力的表達(dá)方式，人的思維將色彩和情緒進(jìn)行關(guān)聯(lián)，在界面設(shè)計(jì)中適當(dāng)?shù)纳庶c(diǎn)綴可以影響人的情緒，喚醒人的記憶。扁平化設(shè)計(jì)采用較為鮮亮的大膽配色，極大地吸引了用戶的注意力。

扁平化設(shè)計(jì)的色彩特征被大量運(yùn)用在南京旅游產(chǎn)品ui設(shè)計(jì)界面中，高明度的色彩不僅具有一定的裝飾效果，還具有一定的功能性，起到了先聲奪人的作用。對(duì)于去除了裝飾效果的界面來說，色彩是視覺表達(dá)最重要的因素，通過旅游景點(diǎn)的特征以及用戶的屬性來確定界面的主色調(diào)和色彩的層級(jí)，其中為了幫助游客們了解金陵文化的歷史及人文內(nèi)涵，在ui設(shè)計(jì)色彩上結(jié)合了當(dāng)?shù)刈匀痪坝^。南京歷史悠久，擁有著濃厚的文化底蘊(yùn)和歷史內(nèi)涵，因此在界面顏色的選取上以明黃色主色調(diào)，象征著陽(yáng)光、光明，給用戶一種輝煌燦爛，仿佛回歸歷史的感覺，喚醒人們的記憶。綠色和藍(lán)色為點(diǎn)綴色，賦予一種活潑、生機(jī)勃勃的感覺，讓用戶在旅游時(shí)能夠身臨其境、身心愉悅，給用戶更好的體驗(yàn)感。

作為全國(guó)首批旅游試點(diǎn)城市之一，南京市于2011年啟動(dòng)智慧旅游建設(shè)[1]，下載“南京游客助手”手機(jī)客戶端便可看到景區(qū)的實(shí)時(shí)狀況。南京擁有大面積的的古建筑旅游景區(qū)，如老門東、中山陵和夫子廟等。如圖2，其旅游產(chǎn)品ui界面設(shè)計(jì)采用統(tǒng)一的色調(diào)，以明黃色為主色調(diào)以符合當(dāng)?shù)氐臍v史文化韻味與氣質(zhì)。主題畫面采用扁平化設(shè)計(jì)將核心信息可視化，讓用戶更快獲取信息，提高了用戶閱讀信息的效率，界面整體排版簡(jiǎn)約有序，增加適當(dāng)?shù)牧舭?，營(yíng)造了一種輕松愉快的氛圍。

扁平化設(shè)計(jì)通過高飽和度的色彩，不同明度之間的對(duì)比，凸顯了核心信息，使界面中的設(shè)計(jì)元素更具秩序感和層次感，符合一定的視覺流程，吸引用戶眼球，幫助用戶快速獲取信息。扁平化設(shè)計(jì)ui界面中，正因?yàn)轭伾暮侠磉\(yùn)用，才呈現(xiàn)出豐富而不失簡(jiǎn)潔、鮮艷而不趨于雜亂的畫面視覺效果。

2.3 文字的簡(jiǎn)潔性

在極簡(jiǎn)主義大環(huán)境下，扁平化版面設(shè)計(jì)中字體大多使用簡(jiǎn)約不加裝飾的無襯線字體，具有很好的條理性和適應(yīng)性，并且可以兼容不同尺寸的手機(jī)和電腦，通過字體大小、文字的編排來劃分信息的層級(jí)關(guān)系。

金陵旅游產(chǎn)品界面設(shè)計(jì)大多選用無襯線字體。少數(shù)選用襯線字體，裝飾性也都保持適度，字體的字間距、行間距、粗細(xì)等也都控制在合理內(nèi)。字體的大小則根據(jù)畫面的需求來設(shè)置，不為了畫面的精致感和高級(jí)感而特意縮小字體，適當(dāng)?shù)姆糯笞煮w，突出主題，提高用戶閱讀效率，在旅游的同時(shí)減少視覺疲勞。

無襯線字體所具備的易讀性和高適應(yīng)性大大提高了設(shè)計(jì)師的工作效率，讓用戶在旅游的同時(shí)不僅僅關(guān)注于界面表面的裝飾效果，而是更關(guān)注于內(nèi)容的本身，簡(jiǎn)潔大方清爽，讓用感到戶煥然一新。

三、展望未來

在大數(shù)據(jù)互聯(lián)網(wǎng)時(shí)代，傳統(tǒng)的擬物化設(shè)計(jì)風(fēng)格已經(jīng)不再適應(yīng)新的社會(huì)和審美需求。扁平化設(shè)計(jì)摒棄了設(shè)計(jì)元素的各種陰影、漸變、紋理、羽化等裝飾效果和寫實(shí)效果，改為一種微漸變、微羽化的扁平化設(shè)計(jì)形式，把信息內(nèi)容以一種簡(jiǎn)潔而不簡(jiǎn)單、干凈、清爽的方式呈現(xiàn)出來，并注重色彩搭配與文字間距等。有效的提高了用戶的體驗(yàn)感，扁平化設(shè)計(jì)體現(xiàn)了設(shè)計(jì)美學(xué)的形式美、功能美和技術(shù)美以及其所具備的優(yōu)勢(shì)在未來數(shù)十年將會(huì)一直被受用。并且會(huì)應(yīng)用到更廣泛的領(lǐng)域。最先被應(yīng)用在界面設(shè)計(jì)、交互設(shè)計(jì)，再到導(dǎo)視系統(tǒng)、包裝設(shè)計(jì)、vi設(shè)計(jì)、插畫設(shè)計(jì)等，在未來將會(huì)有更多機(jī)會(huì)與多種媒介、平臺(tái)，結(jié)合不同的元素，發(fā)揮出不同的魅力，最大化使其具有實(shí)用功能。

扁平化設(shè)計(jì)風(fēng)格已經(jīng)流行了很多年，它的熱度有增無減，但隨著技術(shù)的不斷發(fā)展，例如手機(jī)屏幕顯示的更新迭代、信息的智能感知等，都會(huì)影響到設(shè)計(jì)風(fēng)格的改變。人們的審美是與時(shí)俱進(jìn)的，設(shè)計(jì)的發(fā)展是與科技的發(fā)展相匹配的。因此在未來數(shù)十年后設(shè)計(jì)風(fēng)格又會(huì)是一次轉(zhuǎn)變。

參考文獻(xiàn)：

[1]沈楊.我國(guó)智慧旅游建設(shè)的現(xiàn)狀與思考[J].甘肅農(nóng)業(yè)，2013（03）. 第 3 章 南京智慧旅游 APP 的發(fā)展

[2]李琨，胡婧琪.扁平化風(fēng)格替代擬物化風(fēng)格初探-----以手游UI設(shè)計(jì)為例[J].美術(shù)大觀，2018（2）：126-127.