移動(dòng)端界面設(shè)計(jì)從擬物化到扁平化風(fēng)格的演變

李 怡

（陜西師范大學(xué) 美術(shù)學(xué)院，陜西 西安 710062）

?

移動(dòng)端界面設(shè)計(jì)從擬物化到扁平化風(fēng)格的演變

李 怡

（陜西師范大學(xué) 美術(shù)學(xué)院，陜西 西安 710062）

摘 要：隨著智能設(shè)備的迅猛發(fā)展，界面設(shè)計(jì)的清晰層級(jí)、便捷交互、視覺風(fēng)格成為了設(shè)計(jì)師的首要課題。與此同時(shí)，基于用戶體驗(yàn)為主導(dǎo)的移動(dòng)終端界面設(shè)計(jì)經(jīng)歷了從擬物化風(fēng)格向扁平化風(fēng)格的巨大轉(zhuǎn)變過程。本文研究即是分析在移動(dòng)端界面設(shè)計(jì)中從擬物化到扁平化的演變?cè)颍纳顚釉虺霭l(fā)總結(jié)界面設(shè)計(jì)發(fā)展規(guī)律。筆者通過對(duì)用戶體驗(yàn)進(jìn)行分析，以典型的界面設(shè)計(jì)案例為研究對(duì)象，從交互設(shè)計(jì)、視覺元素等方面總結(jié)出移動(dòng)終端界面設(shè)計(jì)從擬物化向扁平化發(fā)展的原因。

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

一、擬物化設(shè)計(jì)的起源

在計(jì)算機(jī)界面設(shè)計(jì)領(lǐng)域，擬物化設(shè)計(jì)起源于圖形界面（GUI）的視覺隱喻，它是一種GUI設(shè)計(jì)外觀風(fēng)格，常見在軟件界面上模擬現(xiàn)實(shí)物品的紋理、質(zhì)感等。其目標(biāo)是使用戶在視覺上更加熟悉親和，用直觀的物象再現(xiàn)計(jì)算機(jī)領(lǐng)域中的抽象概念，降低用戶使用的學(xué)習(xí)成本。在蘋果公司的人機(jī)界面指南中曾經(jīng)寫到：“當(dāng)應(yīng)用中的可視化對(duì)象和操作按照現(xiàn)實(shí)世界中的對(duì)象與操作模仿，用戶就能快速領(lǐng)會(huì)如何使用它。”

二、擬物化設(shè)計(jì)的優(yōu)勢(shì)

1.藝術(shù)審美性

界面設(shè)計(jì)的發(fā)展離不開藝術(shù)創(chuàng)造，而設(shè)計(jì)的審美創(chuàng)造正是實(shí)現(xiàn)設(shè)計(jì)活動(dòng)中科學(xué)技術(shù)與藝術(shù)的結(jié)合，使設(shè)計(jì)產(chǎn)品實(shí)現(xiàn)科技內(nèi)涵的統(tǒng)一，既有技術(shù)效能又有對(duì)人的感性適應(yīng)性。“擬物化”設(shè)計(jì)追求高度的還原現(xiàn)實(shí)物象，模擬現(xiàn)實(shí)物品的造型、質(zhì)感，通過疊加高光、紋理、材質(zhì)等各種效果對(duì)實(shí)物進(jìn)行再現(xiàn)。但這種設(shè)計(jì)并不是單一的寫實(shí)，而是在現(xiàn)實(shí)事物基礎(chǔ)上，對(duì)其功能和產(chǎn)品準(zhǔn)確定位后的具有主觀能動(dòng)性的設(shè)計(jì)思考后的產(chǎn)物，使其在視覺上具有一定的藝術(shù)審美性。

2.直觀性

界面設(shè)計(jì)作為一種語(yǔ)言手段，發(fā)揮著傳達(dá)信息的符號(hào)作用。任何符號(hào)都是一種約定俗成，它利用一定形式、色彩或圖案來(lái)表達(dá)一定的意義。這種傳達(dá)可以是圖像的、標(biāo)示的或象征的，它關(guān)注的是語(yǔ)義信息的傳達(dá)。擬物化設(shè)計(jì)符號(hào)在設(shè)計(jì)領(lǐng)域中廣泛使用，是由于其比文字更簡(jiǎn)練，使信息傳達(dá)更加直觀、高效，具有標(biāo)識(shí)性，使人們?cè)谛蜗蟮闹庇^中獲得某種意義的領(lǐng)悟。

3.邏輯性

產(chǎn)品設(shè)計(jì)是以市場(chǎng)為導(dǎo)向的，社會(huì)需求決定了要設(shè)計(jì)什么樣的產(chǎn)品。如何使產(chǎn)品語(yǔ)言具有良好的理解性，如何使產(chǎn)品語(yǔ)言適用于不同性別、年齡段、受教育程度的人群，以便于他們能夠快速的學(xué)習(xí)和使用。對(duì)此，勒維提出了一種“MAYA”閥限，即Most Advanced Yet Acceptable（最先進(jìn)而又可接受）。這一概念對(duì)于產(chǎn)品語(yǔ)言設(shè)計(jì)提出了創(chuàng)新規(guī)范，也就是說(shuō)產(chǎn)品設(shè)計(jì)要以用戶的接受程度為限度，否則難以在市場(chǎng)中受到人們的青睞。

擬物化設(shè)計(jì)正是在考慮到以上理論后，產(chǎn)生的順應(yīng)市場(chǎng)的設(shè)計(jì)風(fēng)格。在智能手機(jī)剛剛開始普及，用戶對(duì)于界面的交互、信息的傳達(dá)不是很熟悉和明確，但是他們熟悉現(xiàn)實(shí)的事物，擬物化設(shè)計(jì)通俗易懂的特征正好符合用戶群體的這種需求。其對(duì)現(xiàn)實(shí)物象的再現(xiàn)正好具有功能相近產(chǎn)品的類型化特征，使其指代功能與現(xiàn)實(shí)對(duì)象之間具有空間聯(lián)系或是因果聯(lián)系，引發(fā)用戶的聯(lián)想。

三、擬物化設(shè)計(jì)的不足

首先，由于手機(jī)界面設(shè)計(jì)元素與現(xiàn)實(shí)生活中的實(shí)物有著本質(zhì)的不同，即使再參照模仿也不是所有符號(hào)都能夠完全找到合適的實(shí)物進(jìn)行參照。擬物化設(shè)計(jì)的本質(zhì)就是把虛擬環(huán)境下產(chǎn)品體驗(yàn)中的某一特性在真實(shí)世界中找到一種映射，然后把這種映射通過設(shè)計(jì)語(yǔ)言歸納成為擬物化的視覺符號(hào)，從而使產(chǎn)品體驗(yàn)本身更加具有真實(shí)度和情感化，并符合用戶心智。而如果找不到符合該產(chǎn)品體驗(yàn)中某一特性的實(shí)物的話，其映射就無(wú)法成立。例如，網(wǎng)頁(yè)瀏覽器這一icon設(shè)計(jì)，其本身在現(xiàn)實(shí)中生活中沒有實(shí)物，那么在擬物化設(shè)計(jì)中就無(wú)法達(dá)成這種映射。大多數(shù)的網(wǎng)頁(yè)瀏覽器icon設(shè)計(jì)就是使用了PC電腦中IE瀏覽器的LOGO進(jìn)行的，或者是參照了地球、羅盤。這是一種約定俗成的符號(hào)語(yǔ)義，只有熟知這種語(yǔ)義的人才會(huì)理解其傳達(dá)的信息，而不了解的人就難以知曉其寓意。最終的體驗(yàn)難以符合用戶心智模型，反而增加了用戶的認(rèn)知負(fù)擔(dān)。

其次，擬物化設(shè)計(jì)還受到時(shí)間的局限性。例如在擬物化設(shè)計(jì)下的收音機(jī)或者羅盤的icon，往往是依照其現(xiàn)實(shí)形態(tài)為參考的，而隨著時(shí)代的進(jìn)步，這些實(shí)物已經(jīng)逐漸退出了歷史舞臺(tái)，那么擬物化的映射也不再成立。

另外，由于擬物化的成熟，設(shè)計(jì)師們開始過于追求擬物設(shè)計(jì)的逼真效果，以及特效的添加使用。簡(jiǎn)而言之就是不顧具體的設(shè)計(jì)情境為擬物而擬物，毫無(wú)助益的擬物則給用戶帶來(lái)了認(rèn)知障礙和視覺疲勞，而模糊了其本身的意義，即信息傳達(dá)。

四、扁平化界面設(shè)計(jì)的發(fā)展——以蘋果iOS7系統(tǒng)為例

2013年WWDC大會(huì)上，蘋果公布了其最新的基于扁平化界面設(shè)計(jì)的操作系統(tǒng)iOS7，其中采用了全新設(shè)計(jì)的用戶界面。iOS7進(jìn)行了徹底重構(gòu)，新的設(shè)計(jì)去除了之前擬物化設(shè)計(jì)的紋理和質(zhì)感表現(xiàn)，從用戶體驗(yàn)入手，將細(xì)致微妙的動(dòng)態(tài)效果、優(yōu)雅的色彩搭配和獨(dú)特不凡的功能圖層融為一體，使操作更加生動(dòng)高效，界面設(shè)計(jì)更加干凈簡(jiǎn)潔。

首先，iOS7的系統(tǒng)界面弱化控件視覺效果，以避免過于復(fù)雜的視覺效果干擾信息的傳達(dá)。iOS6的按鈕被指示箭頭和文字所取代，而為了表達(dá)元素的可操作性，iOS7定義了關(guān)鍵色這一概念。在同一個(gè)APP中，使用區(qū)別于內(nèi)容的一致的統(tǒng)一用色來(lái)表達(dá)可操作元素。在備忘錄中，使用的是黃色；而在系統(tǒng)設(shè)置中，則統(tǒng)一使用了藍(lán)色作為關(guān)鍵色。整體視覺效果上的變化，日歷的例子最為明顯，可以看到iOS7與iOS6兩種截然不同風(fēng)格的日歷表達(dá)方式（如圖1所示），iOS7的日歷內(nèi)容更加突出，操作元素被弱化；而iOS6的日歷，極具操控感，讓用戶獲得的信息是屏幕上每個(gè)內(nèi)容元素和操作元素都是可交互的，這樣的界面反而影響了主要信息的獲取。

圖1　iOS7和iOS6日歷界面

其次，iOS7系統(tǒng)界面優(yōu)化了內(nèi)容元素，使其清晰可見。在設(shè)計(jì)中運(yùn)用留白將表現(xiàn)的主體內(nèi)容和功能更加突出，空白可以向用戶傳遞寧?kù)o和安寧的感覺，讓用戶使用更專注，有效率。iOS7的日歷是一個(gè)留白運(yùn)用的經(jīng)典例子（如圖1所示），空白空間的使用讓內(nèi)容更加突出，并不再有之前的擁擠和緊迫感。

而在信息結(jié)構(gòu)上，iOS7更鼓勵(lì)采用深度層次來(lái)與用戶交流，并要求隱喻更加符合物理世界。iOS7的文件夾摒棄了iOS6的屏幕裂開效果，而是采用了置于主屏之上的毛玻璃效果。這與系統(tǒng)整體的層次關(guān)系是相呼應(yīng)的，在iOS7的層級(jí)秩序里，背景層始終是處于最底層的，其他表現(xiàn)層則置于其上。那么文件夾的打開則理應(yīng)是懸浮于主屏之上，并采用毛玻璃的效果表達(dá)其層次關(guān)系。

另外，在新的iOS7系統(tǒng)中還大量使用半透明UI元素。半透明效果能夠幫助用戶盡可能多的了解到被遮擋的內(nèi)容，并使用戶理解層與層之間的物理關(guān)系。相對(duì)于安卓采用下拉式的控制中心界面，iOS7半透明的設(shè)計(jì)能夠讓用戶了解到控制面板和后面界面的層次關(guān)系，表達(dá)更加清晰。

五、移動(dòng)端界面設(shè)計(jì)從擬物化向扁平化演變的原因

扁平化設(shè)計(jì)風(fēng)格的理念是對(duì)界面的視覺設(shè)計(jì)和功能進(jìn)行一種抽象化表達(dá)，其不再只關(guān)注視覺上的實(shí)物再現(xiàn)，更重視功能重構(gòu)與用戶體驗(yàn)設(shè)計(jì)，這一理念并非橫空出世。包豪斯所奠基的以觀念和以解決問題為中心的的現(xiàn)代主義設(shè)計(jì)體系，提倡功能化的設(shè)計(jì)原則、重視工業(yè)設(shè)計(jì)與人的關(guān)系，這些正與扁平化設(shè)計(jì)的理念不謀而合。回顧歷史，這樣的發(fā)展規(guī)律也可以從西方繪畫發(fā)展中找到映射。西方繪畫在攝影發(fā)明以前，一直追求寫實(shí)風(fēng)格的繪畫，以現(xiàn)實(shí)世界為摹本。而攝影發(fā)明之后，無(wú)論是荷蘭風(fēng)格派，還是俄國(guó)構(gòu)成主義，或者是法國(guó)立體主義，都逐漸走向抽象化的風(fēng)格，擺脫了現(xiàn)實(shí)世界的束縛，更加注重人的心靈體驗(yàn)的描繪。扁平化設(shè)計(jì)的出現(xiàn)和流行正是反映了繁久必簡(jiǎn)這一藝術(shù)發(fā)展規(guī)律。而擬物化設(shè)計(jì)并非是完全被扁平化設(shè)計(jì)所取代，扁平化設(shè)計(jì)也沒有摒棄一切裝飾效果，漸變、高光在扁平化界面中依舊可以看到。所謂“擬物化的衰落”，歸根結(jié)底，是設(shè)計(jì)師在跟隨這種時(shí)代趨勢(shì)的前提下，理性的回歸到產(chǎn)品初衷和用戶體驗(yàn)中去，重新審視界面元素與整體視圖效果，消除冗余的元素，省略繁復(fù)的特效，使其功能可見性被最大化。

總體而言，移動(dòng)端界面設(shè)計(jì)從擬人化到扁平化風(fēng)格的轉(zhuǎn)變，是離不開以下幾個(gè)因素的：1.扁平化設(shè)計(jì)通過“扁平化”的信息結(jié)構(gòu)和圖形化的視覺語(yǔ)言等優(yōu)勢(shì)，使移動(dòng)端界面設(shè)計(jì)更具有實(shí)用價(jià)值和使用價(jià)值；2.擬物化風(fēng)格過分的“華而不實(shí)”，導(dǎo)致了信息傳達(dá)效率的降低，容易對(duì)用戶產(chǎn)生視覺負(fù)擔(dān)；3.產(chǎn)品界面是人與信息交流的媒介載體，扁平化的界面設(shè)計(jì)正式建立在用戶認(rèn)知心理的基礎(chǔ)上，為用戶提供與用戶心理模型相吻合的界面系統(tǒng)，減少用戶的認(rèn)知負(fù)擔(dān)。

移動(dòng)端界面從擬物化到扁平化設(shè)計(jì)的變遷符合事物發(fā)展的規(guī)律，具有必然性的同時(shí)，也少不了用戶的主觀選擇。界面設(shè)計(jì)是一個(gè)不斷迭代更新發(fā)展的過程，因?yàn)橛脩趔w驗(yàn)也是不斷變換的，用戶在操作體驗(yàn)、視覺感受等方面會(huì)有越來(lái)越高的要求。這種擬物化設(shè)計(jì)的興衰存在于漫長(zhǎng)的界面設(shè)計(jì)歷史演變過程中，通過對(duì)這一興衰的研究可以一窺今后的界面設(shè)計(jì)發(fā)展軌跡。

參考文獻(xiàn)：

[1] 徐恒醇.設(shè)計(jì)美學(xué)[M].北京:清華大學(xué)出版社,2006.

[2] (英)大衛(wèi)·科羅.視覺符號(hào)[M].沈陽(yáng):遼寧科學(xué)技術(shù)出版社,2010. [3] (加)馬歇爾·麥克盧漢.理解媒介[M].北京:譯林出版社,2011.

[責(zé)任編輯：艾涓]

作者簡(jiǎn)介：李怡，女，陜西師范大學(xué)美術(shù)學(xué)院平面設(shè)計(jì)專業(yè)碩士研究生，主要從事平面設(shè)計(jì)研究。

收稿日期：2016-03-23

中圖分類號(hào)：G20

文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1672-8122（2016）04-0115-02