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

李 怡

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

?

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

李 怡

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

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

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

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

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

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

1.藝術(shù)審美性

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

2.直觀性

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

3.邏輯性

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

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

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

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

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

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

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

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

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

圖1　iOS7和iOS6日歷界面

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

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

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

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

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

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

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

參考文獻(xiàn)：

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

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

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

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

收稿日期：2016-03-23

中圖分類號：G20

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

文章編號：1672-8122（2016）04-0115-02