蘭 珂 （廣西師范大學(xué) 541000）

?

對(duì)當(dāng)下移動(dòng)應(yīng)用界面扁平化設(shè)計(jì)風(fēng)格的淺析

蘭 珂 （廣西師范大學(xué) 541000）

摘要：扁平化設(shè)計(jì)作為現(xiàn)下在移動(dòng)應(yīng)用端口上流行的設(shè)計(jì)風(fēng)格被越來(lái)越多的設(shè)計(jì)者所借鑒。扁平化有其獨(dú)特的優(yōu)勢(shì)與美感，但作為一種興新的設(shè)計(jì)風(fēng)格，仍存在著一些不足之處。在此，本文對(duì)手機(jī)界面設(shè)計(jì)中扁平化設(shè)計(jì)的優(yōu)勢(shì)做了部分總結(jié)，就擬物化設(shè)計(jì)和扁平化設(shè)計(jì)的優(yōu)缺點(diǎn)做了大致歸納。

關(guān)鍵詞：扁平化；界面設(shè)計(jì)；擬物化

UI即User Interface（用戶界面）的簡(jiǎn)稱，是人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)。現(xiàn)下流行的移動(dòng)應(yīng)用用戶界面風(fēng)格可以大致分為扁平化界面風(fēng)格和擬物化界面風(fēng)格兩種。2008年Google提出扁平化這個(gè)概念，概念的核心是放棄一切裝飾，使所有元素的邊界都達(dá)到干凈利落的效果。在移動(dòng)應(yīng)用軟件端口上，扁平化風(fēng)格的設(shè)計(jì)表現(xiàn)得尤為突出。它降低了界面中對(duì)按鈕和選項(xiàng)的使用頻率，保持界面的干凈與整齊，把信息的內(nèi)容和事物的工作方式以最直觀的方式呈現(xiàn)給用戶。不論是界面的樣式還是使用的步驟都更加簡(jiǎn)潔，方便用戶去理解和操作。而擬物化設(shè)計(jì)風(fēng)格的界面特征則是通過(guò)還原真實(shí)物體的質(zhì)感，模擬物體的外形、材質(zhì)、高光等用戶所熟悉的特征，讓用戶更快捷地辨識(shí)按鈕所傳遞的信息。在交互方面人機(jī)交互也同樣擬物化，模擬現(xiàn)實(shí)中的交互方式以此減少用戶學(xué)習(xí)使用應(yīng)用的時(shí)間。

一、扁平化設(shè)計(jì)風(fēng)格的優(yōu)勢(shì)

自從蘋(píng)果公司推出IOS7和微軟推出的Windows Phone8開(kāi)始走向扁平化設(shè)計(jì)的風(fēng)格后，扁平化設(shè)計(jì)風(fēng)格的移動(dòng)端操作系統(tǒng)得到推廣。越來(lái)越多的設(shè)計(jì)者意識(shí)到扁平化已經(jīng)成為一種主流的界面設(shè)計(jì)風(fēng)格，引領(lǐng)著當(dāng)下設(shè)計(jì)的潮流。而扁平化追求極簡(jiǎn)的設(shè)計(jì)風(fēng)格作為當(dāng)下設(shè)計(jì)的一種趨勢(shì)，其設(shè)計(jì)主要具有以下三個(gè)優(yōu)勢(shì)：

（一）將注意力放在色彩上

因?yàn)闆](méi)有其他過(guò)多修飾，所以僅選定一種主題色調(diào)就能展現(xiàn)出良好的視覺(jué)效果或者通過(guò)多色彩撞色設(shè)計(jì)風(fēng)格就可以將界面設(shè)計(jì)得簡(jiǎn)潔、干凈、大方。在這個(gè)信息量爆炸的時(shí)代，移動(dòng)端口作為人們每天獲取不同信息的主要途徑，會(huì)為人們提供大量的未經(jīng)篩選的信息，想要找出自己所需的信息往往得付出大量的時(shí)間和精力。試想在小尺寸的移動(dòng)設(shè)備上滿屏鮮艷的色彩和大量的信息，將會(huì)給人帶來(lái)極大的壓迫感，過(guò)于繁復(fù)的界面設(shè)計(jì)不僅會(huì)浪費(fèi)用戶篩選信息的時(shí)間，更會(huì)讓用戶有無(wú)所適從的感覺(jué)。而現(xiàn)下流行的扁平化設(shè)計(jì)，放棄掉多余的裝飾，減少UI界面的元素，則可以緩解這種負(fù)荷感。單色調(diào)的使用會(huì)為應(yīng)用軟件帶來(lái)一個(gè)系統(tǒng)的視覺(jué)主題，統(tǒng)一協(xié)調(diào)的色彩使得整個(gè)操作界面干凈簡(jiǎn)潔。合理地運(yùn)用色彩能夠清晰的表達(dá)出界面的層次，凸顯界面中重要的文字信息，從而為用戶構(gòu)建出一個(gè)干凈的閱讀環(huán)境。近年來(lái)，越來(lái)越多的移動(dòng)應(yīng)用軟件都采取減少色彩運(yùn)用，確定單一主題色，甚至放棄所有的顏色的設(shè)計(jì)方式就是為了緩解UI界面中元素的負(fù)荷感。同時(shí)，扁平化設(shè)計(jì)中的配色還意味著更多的色調(diào)，這體現(xiàn)在純色塊之間的撞色上。不同顏色的純色塊互相配比，只需要考慮顏色間的搭配方式，對(duì)照關(guān)系，與運(yùn)用比例，僅用簡(jiǎn)單的純色就能營(yíng)造出良好的視覺(jué)效果（如圖1，圖2）。

（二）圖標(biāo)的簡(jiǎn)化

移動(dòng)應(yīng)用客戶端上的每一個(gè)圖標(biāo)最主要的功能是識(shí)別，其次才是美觀。擬物風(fēng)格會(huì)延續(xù)真實(shí)世界的認(rèn)知，盡可能的去還原現(xiàn)實(shí)生活的實(shí)物，模擬真實(shí)物體的材質(zhì)、質(zhì)感、細(xì)節(jié)，以此確保所有的圖標(biāo)都可以很好的被用戶所識(shí)別。例如，一個(gè)相機(jī)應(yīng)用軟件，用戶會(huì)根據(jù)設(shè)計(jì)師設(shè)計(jì)的圖標(biāo)去聯(lián)想應(yīng)用軟件的功能。相機(jī)的圖標(biāo)設(shè)計(jì)得與現(xiàn)實(shí)實(shí)物中相機(jī)的造型越相似，用戶便越容易聯(lián)想與識(shí)別。擬物式設(shè)計(jì)的表當(dāng)方式是運(yùn)用模擬真實(shí)的物體的形式去呈現(xiàn)現(xiàn)實(shí)世界中的實(shí)物，這種方法不僅方便記憶而且還能降低學(xué)習(xí)成本，不會(huì)增加額外的認(rèn)識(shí)負(fù)擔(dān)。不同造型的圖標(biāo)是為了讓用戶區(qū)分不同的應(yīng)用軟件，而美觀的造型則會(huì)使得初次接觸應(yīng)用軟件的用戶對(duì)它產(chǎn)生好感。如果設(shè)計(jì)師設(shè)計(jì)的圖標(biāo)達(dá)不到用戶的審美，用戶對(duì)應(yīng)用軟件的好感度也會(huì)隨之降低。這時(shí)，扁平化的優(yōu)勢(shì)便得以體現(xiàn)了，扁平化設(shè)計(jì)相較于擬物化設(shè)計(jì)難度系數(shù)低，所以簡(jiǎn)潔的圖標(biāo)備受設(shè)計(jì)師們的青睞。簡(jiǎn)化的圖標(biāo)，不僅可以讓用戶將注意力放在應(yīng)用軟件本身的功能上，排除復(fù)雜圖標(biāo)外觀的干擾應(yīng)，而且能夠優(yōu)化界面。扁平化的設(shè)計(jì)就是放棄一切多余的裝飾，是一種直接、快捷的理念，把用戶想要的東西高效地展示在操作界面上。所以，用扁平化的設(shè)計(jì)風(fēng)格來(lái)表達(dá)相機(jī)應(yīng)用軟件時(shí)，只要圖標(biāo)的識(shí)別性足夠?qū)⑾鄼C(jī)的外形完美呈現(xiàn)，讓用戶一眼就能夠辨別出相機(jī)應(yīng)用軟件，大眾用戶便能夠快速的接受扁平化風(fēng)格的設(shè)計(jì)（如圖3，圖4）。

圖1　

圖2　

圖3　

圖4　

（三）信息框架扁平化

扁平化的設(shè)計(jì)同樣體現(xiàn)在信息的表達(dá)方式上。構(gòu)建出完整的信息框架，采用化繁為簡(jiǎn)的方式減少信息層級(jí)的數(shù)量，能提高操作效率，為用戶創(chuàng)建出一個(gè)簡(jiǎn)單、直觀的操作環(huán)境。在移動(dòng)設(shè)備上，過(guò)多的層級(jí)容易使用戶迷失自己的方向，在不同的層級(jí)中構(gòu)建清晰的引導(dǎo)標(biāo)志，用戶根據(jù)標(biāo)志判斷出自己的位置，通過(guò)這種清晰的層次結(jié)構(gòu)，補(bǔ)償移動(dòng)端虛擬設(shè)備中缺失的空間感。減少操作步驟，縮短用戶判斷思考的時(shí)間，讓用戶覺(jué)得簡(jiǎn)單好用就能增加用戶對(duì)應(yīng)用軟件的好感，從根本上解決界面設(shè)計(jì)風(fēng)格與操作難易程度不協(xié)調(diào)的問(wèn)題。

二、現(xiàn)下風(fēng)靡的扁平化界面出現(xiàn)的問(wèn)題

扁平化的設(shè)計(jì)風(fēng)格有綜上所訴的幾個(gè)優(yōu)勢(shì)：簡(jiǎn)單純色的界面為用戶提供一個(gè)輕松的虛擬空間，緩解海量信息篩選的擁擠感；界面和交互簡(jiǎn)約，信息更直觀，扁平化的界面和交互方式可以更直接的完成任務(wù)。當(dāng)扁平化風(fēng)格的設(shè)計(jì)帶來(lái)如此便利的同時(shí)不可否認(rèn)它仍舊存在一些不足。

首先，對(duì)于較少接觸移動(dòng)智能設(shè)備的用戶需要一定的學(xué)習(xí)成本，他們也許并不能快速的了解這些經(jīng)過(guò)簡(jiǎn)化的圖標(biāo)的含義，容易造成視覺(jué)元素的誤讀與認(rèn)知屏障。而會(huì)花費(fèi)過(guò)長(zhǎng)時(shí)間去理解和思考圖標(biāo)含義的用戶則會(huì)產(chǎn)生失去耐心而放棄對(duì)使用產(chǎn)品的風(fēng)險(xiǎn)。喬布斯認(rèn)為：界面設(shè)計(jì)的理想境界應(yīng)該是不論任何年齡、任何經(jīng)歷的人，都可以在拿到應(yīng)用軟件后的幾分鐘內(nèi)便能輕松的掌握它的用法。界面不該成為用戶瀏覽內(nèi)容或達(dá)成目的障礙?；谕饨绲母兄约吧罱?jīng)驗(yàn)的積累，擬物化的設(shè)計(jì)風(fēng)格能夠讓用戶聯(lián)想到現(xiàn)實(shí)生活中真實(shí)存在的物體，從而方便用戶對(duì)應(yīng)用或操作步驟做出快速的理解和反應(yīng)，加快對(duì)信息的理解。模擬實(shí)物的視覺(jué)設(shè)計(jì)和交互體驗(yàn)，讓用戶完全不用去思考就可以直觀的認(rèn)知和使用。鮮少使用移動(dòng)設(shè)備的用戶也可以在較短的時(shí)間內(nèi)流暢的使用那些他們沒(méi)有接觸過(guò)的應(yīng)用。

其次，扁平化的設(shè)計(jì)傳達(dá)的感情不夠豐富。不久之前的應(yīng)用軟件大部分都被定義為一種工具，偏重于功能的實(shí)用性。隨著社會(huì)的發(fā)展，人們開(kāi)始使用帶有現(xiàn)實(shí)質(zhì)感的圖形來(lái)設(shè)計(jì)軟件界面，融入了一定的感情色彩，應(yīng)用軟件再也不是單純的功能性軟件。而簡(jiǎn)化過(guò)的扁平化圖標(biāo)設(shè)計(jì)為了使得界面更加簡(jiǎn)潔會(huì)適當(dāng)?shù)膶?duì)設(shè)計(jì)做“減法”，舍棄掉美感的一些因素，去保證它的識(shí)別性，如此一來(lái)扁平化設(shè)計(jì)表達(dá)感情的空間就會(huì)受到限制，感情的表達(dá)沒(méi)有擬物化設(shè)計(jì)那么豐富。

三、扁平化設(shè)計(jì)未來(lái)的趨勢(shì)

擬物化設(shè)計(jì)是一種帶入感的設(shè)計(jì)，引導(dǎo)式的設(shè)計(jì)。它通過(guò)用戶對(duì)生活經(jīng)驗(yàn)的積累與對(duì)事物感知引導(dǎo)人們?nèi)绾稳ゲ僮鲬?yīng)用軟件，它的設(shè)計(jì)初衷是讓所有的人都感受到產(chǎn)品帶給人的便利。擬物化最大的好處就是降低用戶的學(xué)習(xí)成本，讓更多的人能輕易地使用產(chǎn)品的設(shè)計(jì)，通過(guò)不斷的設(shè)計(jì)去引導(dǎo)，去改變?nèi)藗兊纳罘绞剑祟惪梢愿檬芤婕夹g(shù)所帶來(lái)的進(jìn)步。而扁平設(shè)計(jì)，是一種工具性質(zhì)的設(shè)計(jì)，它更多的偏重于應(yīng)用軟件的功能性，是一種帶出感的設(shè)計(jì)。元素較少的扁平化圖標(biāo)與擬物化設(shè)計(jì)相比較為隱喻，會(huì)使不常接觸智能電子軟件的用戶大大增加學(xué)習(xí)成本。它更注重軟件內(nèi)容的實(shí)用性與操作方式的簡(jiǎn)便性，讓界面的設(shè)計(jì)適應(yīng)觸摸操作。未來(lái)的趨勢(shì)無(wú)疑是擬物和扁平共存。扁平化設(shè)計(jì)會(huì)越來(lái)越普及、越來(lái)越被大眾所接受，而擬物化設(shè)計(jì)則更趨向于精英小眾化。扁平化的設(shè)計(jì)風(fēng)格對(duì)于極少使用移動(dòng)設(shè)備的用戶來(lái)說(shuō)會(huì)存在一定的認(rèn)知屏障，但是隨著移動(dòng)設(shè)備的普及，這已經(jīng)不再是主要的問(wèn)題。越來(lái)越多的用戶都有學(xué)會(huì)了使用移動(dòng)設(shè)備點(diǎn)擊、拖拽等基礎(chǔ)的交互手勢(shì)，如此一來(lái)，不論是認(rèn)知障礙還是操作障礙都將漸漸消失。

四、結(jié)語(yǔ)

當(dāng)然，我們不能因?yàn)楫?dāng)下的流行趨勢(shì)或者個(gè)人喜好而去強(qiáng)行推崇某一種風(fēng)格的設(shè)計(jì)，我們要做的永遠(yuǎn)都是更適合用戶，更加服務(wù)于用戶的設(shè)計(jì)。根據(jù)不同應(yīng)用軟件的需求，采用不同的設(shè)計(jì)方式，才能使設(shè)計(jì)風(fēng)格更加多元化。

參考文獻(xiàn)：

[1]胡飛.基于網(wǎng)絡(luò)媒介的交互設(shè)計(jì)研究[J].華僑大學(xué)學(xué)報(bào)，2003.

[2]周賀來(lái).旅游信息化簡(jiǎn)明教程[M].中國(guó)水利水電出版社，2005.

[3]周陟.UI進(jìn)化論：移動(dòng)設(shè)備人機(jī)交互界面設(shè)計(jì)[M].清華大學(xué)出版社，2010.

[4]（美）泰德維爾.界面設(shè)計(jì)模式[M].電子工業(yè)出版社，2013.