淺談扁平化設(shè)計(jì)在移動(dòng)終端界面設(shè)計(jì)中的優(yōu)勢

廖騰峰，陳靜

（廣西工業(yè)職業(yè)技術(shù)學(xué)院，廣西 南寧 530001）

淺談扁平化設(shè)計(jì)在移動(dòng)終端界面設(shè)計(jì)中的優(yōu)勢

廖騰峰，陳靜

（廣西工業(yè)職業(yè)技術(shù)學(xué)院，廣西 南寧 530001）

目前移動(dòng)終端設(shè)備界面設(shè)計(jì)主要有擬物化設(shè)計(jì)和扁平化設(shè)計(jì)兩種設(shè)計(jì)風(fēng)格，而扁平化設(shè)計(jì)之所以成為主要的設(shè)計(jì)趨勢，除了在設(shè)計(jì)風(fēng)格上崇尚極簡帶來清新的感覺外，在使用體驗(yàn)上也具有自身的優(yōu)勢。

擬物化設(shè)計(jì)；扁平化設(shè)計(jì)；移動(dòng)終端設(shè)備；界面設(shè)計(jì)

隨著通信網(wǎng)絡(luò)科技的創(chuàng)新發(fā)展，手機(jī)、平板電腦、智能穿戴等移動(dòng)終端設(shè)備已經(jīng)成為人們?nèi)粘Ｉ钪胁豢扇鄙俚囊环N工具。移動(dòng)終端設(shè)備的界面設(shè)計(jì)至關(guān)重要，它能從視覺傳達(dá)和操作體驗(yàn)上滿足用戶訴求，決定著一款產(chǎn)品的成敗。[1]近年來，Google、Microsoft、iPhone,三大廠商越來越多產(chǎn)品的GUI（用戶圖形界面）更“扁平化”了，之所以從原來的擬物化設(shè)計(jì)轉(zhuǎn)而運(yùn)用扁平化設(shè)計(jì)風(fēng)格，并不是因?yàn)榇蟊妼徝榔诤蜑榱嗣つ康挠显O(shè)計(jì)流行趨勢，而主要是因?yàn)槿藗儗?duì)智能化的生活訴求變化所導(dǎo)致的。隨著智能化生活的發(fā)展變化，擬物化設(shè)計(jì)在產(chǎn)品運(yùn)用上的問題越來越凸顯，而扁平化設(shè)計(jì)卻更適應(yīng)新時(shí)代的需求而獲得推廣發(fā)展。

1　擬物化設(shè)計(jì)風(fēng)格

1.1擬物化設(shè)計(jì)的發(fā)展

擬物化設(shè)計(jì)是將界面中的可視化對(duì)象和操作對(duì)照現(xiàn)實(shí)世界中的對(duì)象與操作進(jìn)行模擬，使用戶能快速領(lǐng)會(huì)如何使用它。[2]在移動(dòng)終端設(shè)備發(fā)展初期，界面設(shè)計(jì)的理念是讓不同年齡、不同經(jīng)歷的人拿到設(shè)備后能快速輕松地掌握其使用方法，設(shè)計(jì)師根據(jù)人們對(duì)事物的認(rèn)知習(xí)慣，在界面設(shè)計(jì)中利用擬物化設(shè)計(jì)，達(dá)到使人們快速理解和掌握其操作的目的。一個(gè)經(jīng)典的案例就是按鈕效果的設(shè)計(jì)，用手按下按鈕，按鈕就會(huì)伴隨著凹陷和突起動(dòng)態(tài)效果，這樣的擬物化設(shè)計(jì)通俗易懂，十分受人們歡迎。擬物化設(shè)計(jì)在藝術(shù)審美性，直觀性，引導(dǎo)性方面的優(yōu)勢非常明顯，因此在移動(dòng)終端界面設(shè)計(jì)中獲得廣泛應(yīng)用。

1.2擬物化設(shè)計(jì)的缺陷

隨著普適計(jì)算的發(fā)展，人們對(duì)移動(dòng)終端設(shè)備的使用訴求從“視覺享受”已經(jīng)轉(zhuǎn)變到“隨心使用”,人們使用移動(dòng)終端設(shè)備變得越來越純粹，就是執(zhí)行所需的任務(wù)，獲取信息，因此界面設(shè)計(jì)也隨著人們的使用習(xí)慣發(fā)生改變，開始放棄絢麗多彩的界面特效，更專注于信息和任務(wù)本身。在數(shù)字化的信息時(shí)代，用戶更希望快速獲取經(jīng)過加工處理的，更有意義的數(shù)據(jù)信息，比如一個(gè)獲取氣溫APP應(yīng)用，其界面更傾向于信息展示，使用戶更高效的獲取信息，而不是將界面刻意設(shè)計(jì)成實(shí)體溫度計(jì)的樣子，這樣反而會(huì)降低使用效率。同時(shí)，在移動(dòng)終端的屏幕上，存在著物理反饋的先天不足，比如現(xiàn)實(shí)中按下一個(gè)按鈕，人們能感受到它的彈性和彈力，但在手機(jī)界面中無法實(shí)現(xiàn)，因此擬物化設(shè)計(jì)事實(shí)上沒有達(dá)到預(yù)期效果。隨著智能化生活時(shí)代的發(fā)展，人們對(duì)移動(dòng)終端設(shè)備訴求的轉(zhuǎn)變要求在產(chǎn)品界面設(shè)計(jì)上更注重用戶體驗(yàn)，而擬物化設(shè)計(jì)存在的缺陷，使得人們用它的理由越來越少。

2　扁平化設(shè)計(jì)風(fēng)格

扁平化設(shè)計(jì)最早出現(xiàn)在20世紀(jì)40年代瑞士風(fēng)格的設(shè)計(jì)中，主要是因?yàn)轫憫?yīng)在不同屏幕尺寸的設(shè)備上的設(shè)計(jì)需要，最近幾年，特別是2013年蘋果公司推出IOS7系統(tǒng)后才逐漸成為流行，它的設(shè)計(jì)理念主要是圍繞消除盡可能多的視覺噪聲，為用戶提供一個(gè)專注和快速加載的體驗(yàn)。扁平化設(shè)計(jì)是一種極簡主義美學(xué)，目的是使人們的注意力從過分聚焦在界面元素的狀態(tài)，回歸為重視內(nèi)容本身，這種設(shè)計(jì)迎合了當(dāng)前用戶對(duì)信息快速獲取的訴求，因而獲得大眾認(rèn)可并發(fā)展成為移動(dòng)終端界面設(shè)計(jì)的主流風(fēng)格。

3　扁平化設(shè)計(jì)的優(yōu)勢

扁平化設(shè)計(jì)在移動(dòng)終端界面設(shè)計(jì)中之所以受大眾歡迎，并不是因?yàn)樗狭艘曈X上的新奇，而是它能為移動(dòng)終端設(shè)備中遇到的問題提供最合適的設(shè)計(jì)解決方案。相比擬物化設(shè)計(jì)，扁平化設(shè)計(jì)具有以下優(yōu)勢：

3.1響應(yīng)性

隨著移動(dòng)終端設(shè)備屏幕分辨率的提高，在特定尺寸下，擬物化設(shè)計(jì)需要大量視覺細(xì)節(jié)，必然會(huì)使用到更多的顏色，從而使GUI的數(shù)據(jù)量成倍增加，占用更多的系統(tǒng)資源，再加上隨著屏幕尺寸的不斷增大圖標(biāo)的尺寸也隨之增加，這樣勢必會(huì)占用更多的系統(tǒng)空間，極為影響用戶快速流暢的體驗(yàn)訴求。而扁平化的設(shè)計(jì)對(duì)細(xì)節(jié)元素的使用極為克制，其設(shè)計(jì)的核心便是簡約，使界面“減負(fù)”，不需要耗費(fèi)太多的系統(tǒng)資源，因此扁平化設(shè)計(jì)具有快速響應(yīng)的優(yōu)勢。

3.2交互性

良好的交互界面和交互功能給與客戶良好的體驗(yàn)，目前主流手機(jī)的屏幕在5~6英寸之間，而平板電腦的屏幕比這更大，移動(dòng)終端設(shè)備屏幕尺寸的增加，使得手指完成任務(wù)操作的路徑增長，擬物化設(shè)計(jì)風(fēng)格在按鈕設(shè)計(jì)上，實(shí)際的點(diǎn)觸響應(yīng)區(qū)域要大于視覺限定的區(qū)域，手指即使未精確點(diǎn)擊到視覺上的按鈕區(qū)域，也會(huì)觸發(fā)返回的動(dòng)作，容易造成誤操作。[3]而扁平化設(shè)計(jì)對(duì)點(diǎn)擊區(qū)域邊緣模糊化的處理在一定程度上釋放了用戶的操作壓力。如圖1所示。同時(shí)，采用這樣的扁平化處理，弱化了按鈕的視覺形象，同時(shí)增強(qiáng)了整個(gè)界面的整體感和一體化的方向感的視覺效果,有更好的用戶體驗(yàn)。

圖1　 視覺響應(yīng)區(qū)與實(shí)際響應(yīng)區(qū)示意圖

3.3效率性

從設(shè)計(jì)開發(fā)角度來看，采用擬物化設(shè)計(jì)一款圖標(biāo)，需要制作十幾款不同大小的圖標(biāo)以兼容不同屏幕分辨率下的正常呈現(xiàn)，設(shè)計(jì)師不得不投入大量時(shí)間與精力用規(guī)范的形態(tài)來控制圖標(biāo)或界面設(shè)計(jì)在紋理、陰影、縱深以及色彩上的統(tǒng)一，而且擬物化設(shè)計(jì)要將現(xiàn)實(shí)生活中的事物在二維環(huán)境下完美重現(xiàn)本身就會(huì)增加開發(fā)時(shí)間和難度。扁平化設(shè)計(jì)采用的是矢量元素，具有快速執(zhí)行和修正的特性，這也是目前扁平化設(shè)計(jì)流行的一大因素之一。扁平化設(shè)計(jì)無論開發(fā)效率還是成本上都優(yōu)于擬物化設(shè)計(jì)。

3.4呈現(xiàn)性

首先，人們需要在不同的場合，使用不同的移動(dòng)終端設(shè)備使生活更加信息化，智能化。因此移動(dòng)終端設(shè)備中的界面設(shè)計(jì)需要在多個(gè)平臺(tái)具備一致性的呈現(xiàn)。擬物化設(shè)計(jì)在智能穿戴設(shè)備上將一個(gè)細(xì)節(jié)豐富的圖標(biāo)縮小到小屏幕上呈現(xiàn)會(huì)造成細(xì)節(jié)的全部丟失，識(shí)別性也幾乎很難保證。扁平化設(shè)計(jì)的設(shè)計(jì)語言主要是線條和色塊的應(yīng)用，線條和色塊的可延展性保證了其在不同設(shè)備，不同屏幕尺寸，不同分辨率可的自適應(yīng)，以及更強(qiáng)的識(shí)別性。其次，扁平化設(shè)計(jì)利用簡單元素、幾何圖形與鮮艷色彩的搭配表達(dá)信息，強(qiáng)調(diào)方案的簡單與清晰特性，更少的界面元素使得界面更加簡潔明了，可以更加簡單直接的將信息和事物的工作方式呈現(xiàn)出來。[4]因此，扁平化設(shè)計(jì)具有更好的呈現(xiàn)性。

3.5傳達(dá)性

一方面，擬物化的缺點(diǎn)在于對(duì)所擬實(shí)物的斷代認(rèn)知，造成功能傳達(dá)的不清晰，比如計(jì)時(shí)器的設(shè)計(jì)，相對(duì)于沒有使用過秒表的人來說，扁平化設(shè)計(jì)更具有功能傳達(dá)準(zhǔn)確的優(yōu)勢。如圖2所示。另一方面，移動(dòng)終端設(shè)備的擬物化設(shè)計(jì)難以表達(dá)復(fù)雜的功能和抽象的概念。比如常用的復(fù)制粘貼圖標(biāo)，就難以使用擬物化的圖標(biāo)進(jìn)行表達(dá)，而利用扁平化設(shè)計(jì)，依靠文字最直白的表述和最扁平的圖形來傳達(dá)給用戶，是最直觀的表達(dá)方式。

4　結(jié)語

移動(dòng)終端界面設(shè)計(jì)風(fēng)格的選取，并不是看它是否符合當(dāng)前的流行風(fēng)格，而是取決于具體的實(shí)際使用情況。扁平化設(shè)計(jì)并不是簡單的將圖標(biāo)壓扁，使界面扁平，視覺上的扁平化只是外在的表現(xiàn)，其深層次的含義是信息架構(gòu)的扁平化，交互體驗(yàn)的扁平化，建立一整套完整的視覺傳達(dá)方案，設(shè)計(jì)統(tǒng)一的標(biāo)準(zhǔn)化的符號(hào)標(biāo)識(shí)和操作邏輯幫助用戶快速識(shí)別出信息和功能的層級(jí)關(guān)系，為用戶帶來最佳的體驗(yàn)。扁平化設(shè)計(jì)與擬物設(shè)計(jì)并不是對(duì)立，扁平化設(shè)計(jì)與擬物化設(shè)計(jì)風(fēng)格的互補(bǔ)，會(huì)是未來移動(dòng)終端界面設(shè)計(jì)的發(fā)展趨勢。

[1] 李亭.基于用戶體驗(yàn)的智能手機(jī)APP界面設(shè)計(jì)研究[D].太原理工大學(xué)，2015.

[2] 李佳.界面設(shè)計(jì)中的扁平化設(shè)計(jì)與擬物化設(shè)計(jì)之探議[J].藝術(shù)與設(shè)計(jì)(理論)，2014(03).

[3] 邱燁.淺析手機(jī)界面從擬物化到扁平化的衍變[D].西北大學(xué)，2015.

[4] 宋方.析“扁平化”手機(jī)界面設(shè)計(jì)[J].包裝工程，2012,33(014):60~63.

圖2　 計(jì)時(shí)器扁平化設(shè)計(jì)和秒表設(shè)計(jì)的對(duì)比

TN929.5

A

1671-0711（2016）09（上）-0112-02