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

李怡

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

關鍵詞：界面設計；擬物化；扁平化

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

一、擬物化設計的起源

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

二、擬物化設計的優勢

1.藝術審美性

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

2.直觀性

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

3.邏輯性

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

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

三、擬物化設計的不足

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

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

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

四、扁平化界面設計的發展——以蘋果iOS7系統為例

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

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

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

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

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

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

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

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

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

參考文獻：

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

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

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

[責任編輯：艾涓]