李怡

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

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

中圖分類(lèi)號(hào)：G20 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1672-8122（2016）04-0115-02

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

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

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

1.藝術(shù)審美性

界面設(shè)計(jì)的發(fā)展離不開(kāi)藝術(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)性?！皵M物化”設(shè)計(jì)追求高度的還原現(xiàn)實(shí)物象，模擬現(xiàn)實(shí)物品的造型、質(zhì)感，通過(guò)疊加高光、紋理、材質(zhì)等各種效果對(duì)實(shí)物進(jìn)行再現(xiàn)。但這種設(shè)計(jì)并不是單一的寫(xiě)實(shí)，而是在現(xiàn)實(shí)事物基礎(chǔ)上，對(duì)其功能和產(chǎn)品準(zhǔn)確定位后的具有主觀能動(dòng)性的設(shè)計(jì)思考后的產(chǎn)物，使其在視覺(jué)上具有一定的藝術(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ì)要以用戶(hù)的接受程度為限度，否則難以在市場(chǎng)中受到人們的青睞。

擬物化設(shè)計(jì)正是在考慮到以上理論后，產(chǎn)生的順應(yīng)市場(chǎng)的設(shè)計(jì)風(fēng)格。在智能手機(jī)剛剛開(kāi)始普及，用戶(hù)對(duì)于界面的交互、信息的傳達(dá)不是很熟悉和明確，但是他們熟悉現(xiàn)實(shí)的事物，擬物化設(shè)計(jì)通俗易懂的特征正好符合用戶(hù)群體的這種需求。其對(duì)現(xiàn)實(shí)物象的再現(xiàn)正好具有功能相近產(chǎn)品的類(lèi)型化特征，使其指代功能與現(xiàn)實(shí)對(duì)象之間具有空間聯(lián)系或是因果聯(lián)系，引發(fā)用戶(hù)的聯(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í)世界中找到一種映射，然后把這種映射通過(guò)設(shè)計(jì)語(yǔ)言歸納成為擬物化的視覺(jué)符號(hào)，從而使產(chǎn)品體驗(yàn)本身更加具有真實(shí)度和情感化，并符合用戶(hù)心智。而如果找不到符合該產(chǎn)品體驗(yàn)中某一特性的實(shí)物的話，其映射就無(wú)法成立。例如，網(wǎng)頁(yè)瀏覽器這一icon設(shè)計(jì)，其本身在現(xiàn)實(shí)中生活中沒(méi)有實(shí)物，那么在擬物化設(shè)計(jì)中就無(wú)法達(dá)成這種映射。大多數(shù)的網(wǎng)頁(yè)瀏覽器icon設(shè)計(jì)就是使用了PC電腦中IE瀏覽器的LOGO進(jìn)行的，或者是參照了地球、羅盤(pán)。這是一種約定俗成的符號(hào)語(yǔ)義，只有熟知這種語(yǔ)義的人才會(huì)理解其傳達(dá)的信息，而不了解的人就難以知曉其寓意。最終的體驗(yàn)難以符合用戶(hù)心智模型，反而增加了用戶(hù)的認(rèn)知負(fù)擔(dān)。

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

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

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

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

首先，iOS7的系統(tǒng)界面弱化控件視覺(jué)效果，以避免過(guò)于復(fù)雜的視覺(jué)效果干擾信息的傳達(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)鍵色。整體視覺(jué)效果上的變化，日歷的例子最為明顯，可以看到iOS7與iOS6兩種截然不同風(fēng)格的日歷表達(dá)方式（如圖1所示），iOS7的日歷內(nèi)容更加突出，操作元素被弱化；而iOS6的日歷，極具操控感，讓用戶(hù)獲得的信息是屏幕上每個(gè)內(nèi)容元素和操作元素都是可交互的，這樣的界面反而影響了主要信息的獲取。

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

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

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

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

扁平化設(shè)計(jì)風(fēng)格的理念是對(duì)界面的視覺(jué)設(shè)計(jì)和功能進(jìn)行一種抽象化表達(dá)，其不再只關(guān)注視覺(jué)上的實(shí)物再現(xiàn)，更重視功能重構(gòu)與用戶(hù)體驗(yàn)設(shè)計(jì)，這一理念并非橫空出世。包豪斯所奠基的以觀念和以解決問(wèn)題為中心的的現(xiàn)代主義設(shè)計(jì)體系，提倡功能化的設(shè)計(jì)原則、重視工業(yè)設(shè)計(jì)與人的關(guān)系，這些正與扁平化設(shè)計(jì)的理念不謀而合?；仡櫄v史，這樣的發(fā)展規(guī)律也可以從西方繪畫(huà)發(fā)展中找到映射。西方繪畫(huà)在攝影發(fā)明以前，一直追求寫(xiě)實(shí)風(fēng)格的繪畫(huà)，以現(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ì)也沒(méi)有摒棄一切裝飾效果，漸變、高光在扁平化界面中依舊可以看到。所謂“擬物化的衰落”，歸根結(jié)底，是設(shè)計(jì)師在跟隨這種時(shí)代趨勢(shì)的前提下，理性的回歸到產(chǎn)品初衷和用戶(hù)體驗(yàn)中去，重新審視界面元素與整體視圖效果，消除冗余的元素，省略繁復(fù)的特效，使其功能可見(jiàn)性被最大化。

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

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

參考文獻(xiàn)：

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

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

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

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