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

李怡

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

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

中圖分類號：G20 文獻標識碼：A 文章編號：1672-8122（2016）04-0115-02

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

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

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

1.藝術(shù)審美性

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

2.直觀性

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

3.邏輯性

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

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

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

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

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

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

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

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

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

其次，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)系是相呼應的，在iOS7的層級秩序里，背景層始終是處于最底層的，其他表現(xiàn)層則置于其上。那么文件夾的打開則理應是懸浮于主屏之上，并采用毛玻璃的效果表達其層次關(guān)系。

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

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

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

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

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

參考文獻：

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

[2] （英）大衛(wèi)·科羅.視覺符號[M].沈陽：遼寧科學技術(shù)出版社，2010.

[3] （加）馬歇爾·麥克盧漢.理解媒介[M].北京：譯林出版社，2011.

[責任編輯：艾涓]