基于認知心理學的扁平化風格的界面設計研究

聶茜

摘 要：微軟Windows？8的Metro界面設計以及Apple手機iOS7操作系統的界面設計，都采用了扁平化簡約的設計風格，在當前互聯網和移動互聯網的高速發展的信息社會下，由于apple和Microsoft兩大公司在全球的廣泛影響，扁平化設計風格迅速成為界面設計視覺風格的主流趨勢。文章從認知心理學的角度，尤其是運用視覺認知心理學的一些原理，對扁平化簡約設計風格進行了美學因素的分析，并對扁平化設計風格發展的趨向做了一定的闡述。

關鍵詞：認知心理學；扁平化設計；界面設計；設計風格

檢 索：www.artdesign.org.cn

中圖分類號：TB47；B842 文獻標志碼：A 文章編號：1008-2832（2016）11-0057-03

Research on the Interface Design of the Flat Style Based on Cognitive Psychology

NIE Qian（ Beijing Institute of Fashion Technology， Beijing 100029， China ）

Abstract ：Both Metro UI design of Microsoft and iOS7 UI design of Apple adopt concise flat design style， in current informational society which internet and mobile internet is developing with high speed， due to Apple and Microsofts worldwide influence， the flat design style rapidly becomes main trend of UI design visual style. From cognitive psychology point of view， especially utilizing its some principles， this article makes some aesthetic analysis on flat design style， and elaborate the development trend of flat design style.

Key words ：cognitive psychology； flat design； UI design； design style

Internet ：www.artdesign.org.cn

一、引言

擬物化風格和扁平化風格是目前視覺類界面設計最明顯的兩大設計風格，而Apple公司和Microsoft公司正好成為這兩大風格的代表。扁平化設計風格中最有力的典范就是微軟的Windows 8以及Windows phone和Windows RT平臺下的Metro界面。以擬物化設計風格見長的apple公司也隨著2013年6月發布的ios7蘋果手機操作系統中顛覆性地采用了扁平化設計風格這樣更簡潔的視覺設計語言，全新設計的iOS7界面讓扁平化風格成為了流行設計（圖1）。由于Apple公司和Microsoft公司兩大公司在全球的廣泛影響，扁平化設計風格迅速成為界面設計視覺風格的主流趨勢。

維基百科（https：//en.wikipedia.org/wiki/Flat_design）將Flat design定義為，扁平化設計是一種界面設計的風格，它去除了容易造成三維空間錯覺的元素（如：陰影、漸變或紋理）。扁平化設計是通過簡單的圖形、字體和顏色的組合，來達到直觀、簡潔的設計目的一種極簡主義的設計風格。扁平化設計的核心在于極簡，放棄一切裝飾效果，比如陰影、透視、紋理、漸變等，所有在二維設計中能體現三維效果的元素一律擯棄。通過運用簡潔的色塊，抽象和符號化的圖形，無襯線裝飾的字體，將一切干擾信息弱化，只突出最需要表達的核心內容。

任何事物的產生和發展都是在歷史的演變進化而來的，扁平化設計風格也不例外，其發生發展受到歷史上諸多設計理念和設計風格的影響。理性的現代主義風格，嚴謹、工整、理性、實用的瑞士設計風格Swiss Style，以及去除所有無用的元素，只留下必需的元素的極簡主義風格，都或多或少地影響了扁平化設計的形成。

二、扁平化設計風格的認知心理學應用

（一）認知心理學概述

認知心理學（cognitive psychology）是20世紀50年代中期源于西方的一種心理學思潮，主要研究人的高級心理過程，包括人類如何獲取外部世界的信息，然后人腦如何將所獲取的信息轉換成知識，知識儲存后又如何對人的行為產生影響。認知心理學涵蓋了人們從感覺到知覺、識別、注意、學習和記憶、思維、語言、情緒等幾乎全部心理活動的過程。針對人機界面設計的諸多要素，雖然可以從圖形、文字、色彩和版式等的美學要素去進行分析，但是更多地要結合人的視覺認知心理學的原理，對界面進行更科學地優化設計。

（二）扁平化設計風格的認知心理學應用研究

1.注意廣度的范圍的有限性理論

注意廣度是指在同一時間內一個人能夠清楚地覺察或認識客體的數量。研究表明在0.1秒的時間內，成人一般能把握8～9個黑色圓點，把握4～6個不相聯系的外文字母，以及4～5個沒有聯系的漢字，這證明注意廣度是有一定限度的。

在界面設計領域被廣泛應用的7±2原則來自哈佛大學G·A·Miller的理論《神奇的數字7±2：人類信息加工能力的某些局限》。根據George A. Miller的研究，年輕人的記憶廣度大約為7個單位（阿拉伯數字、字母、單詞或其他單位），稱為組塊。后來的研究顯示廣度與組塊的類別有關，例如阿拉伯數字為7個，字母為6個，單詞為5個，而較長詞匯的記憶廣度低于較短詞匯的記憶廣度。也即是說，人類短期記憶一般一次只能記住5-9個事物，在界面設計中，由于信息的多變性，人們的短時記憶較多，為了準確地將信息傳遞給用戶，對其產生一定的印象，在界面設計中運用7±2原則是十分必要的。但是，許多門戶型網站的首頁面會運用大量的信息量的設計，以表達蘊含著豐富的資訊的涵義。所以7±2原則一般僅適用于內頁的設計。但是，Cowan （2001）認為年輕人的工作記憶能力為4個組塊（兒童和老人較低），在同層的頁面中，信息模塊的設置數量應更為精簡。這也就是為什么很多的菜單的選項都設定為4，如圖1為蘋果手機界面底端的菜單選項設計。

2.格式塔理論中的接近原則

格式塔理論是現代認知主義學習理論的先驅，其原理幾乎適用于所有與視覺有關的領域。根據格式塔理論中的接近原則（圖2），當對象離得非常接近的時候，意識會認為他們是相關的。在界面設計中，一般為一個提交按鈕會緊挨著一個文本框，二者是相關的，對應著一個統一的功能或用戶操作指令，所以在進行設計時，相鄰近的模塊功能確是相關的，如圖3將圖標設計和文字說明臨近放置，組成一個信息組快。

圖4為Windows 8平臺下的Metro界面，采用高純度的鮮艷的色彩平涂色塊，將不同色相的色塊并置于同一個頁面中，在每一個色塊中襯托面積大的圖標設計，加上配置在圖標左下角的，與圖標臨近的面積相對較小的文字，二者統一在平涂的色塊中，形成了視覺沖擊力清晰而明確，功能相關的功能模塊。所以用戶認知是注意的順序依次為色塊—圖標—文字。色彩的認知速度大于圖形的認知，圖形的認知大于文字的認知。

3.格式塔理論中的相似法則

格式塔理論的另一個重要原則是相似原則，是指在某一方面相似的各部分趨于組成整體。在界面設計中，我們傾向于把外觀相似的物體歸為一類。

圖5是世界排名前50位的銀行、地域性、資產狀況等信息。同樣顏色的圓形組團可以被理解為總體特征，而同色圓形組團中的單個的圓形可以被理解為局部特征。每個圓形代表一家銀行，圓形的面積大小與銀行的資產呈現對應關系。用戶在獲取信息時，首先看到的不是獨立的一個個的圓形，而是一組一組的圓。在這個圖表的信息傳遞中，使用到了格式塔的“接近性”原則，使距離互相靠近（相對于其他物體）的物體看起來屬于一組，還運用了格式塔的“相似性”原則，即相似的物體（形狀、大小、顏色）看起來是一類。圖中將同一個國家的銀行用同一種色彩進行編碼，并且位置上組織在一起。所以我們很快就能看出哪個國家的頂尖銀行最多——德國，哪個國家所占的銀行資產多——英國、法國，用戶可以更加直觀有效地獲取準確的信息。

三、 扁平化設計風格的美學分析

（一）界面設計的核心是功能

功能是指產品所具有的效用，并被接受的能力。人們在使用產品時，是經由功能獲得需求的滿足。界面的功能要使用戶明確接受信息，明白操作功能，使得每一個操作是符合人的認知心理和用戶行為而來的。界面設計，作為交互體驗中與用戶交流的最前沿，大量的信息是通過大小各異的屏幕進行傳遞，通過扁平化設計的界面，用戶可以專注于信息本身，其產品核心的功能性大大提高。

（二）易用性的設計

界面設計是為人機交互行為服務的，其視覺設計應使整個界面呈現出盡可能的簡潔易用的風格。當用戶對界面的信息反饋是簡潔明了，對界面所傳達的信息是容易感知的，是沒有壓力感的，界面的表象（比如美觀度）判斷易用程度 ，美即好用。反之，如果界面傳遞給用戶的感受是繁雜的，就會產生一些不友好的情緒，對用戶就會產生某種壓力，復雜和陌生感是壓力感產生的主要來源。

在認知心理學領域，記憶代表著一個人對過去活動、感受、經驗的印象積累。記憶又分為短時記憶和長時記憶兩種，在界面設計中，產生的短時記憶往往較多，頁面信息量大且迅速變化，隨著刺激的逐步消退，短時記憶也很快衰退或受到外部的干擾刺激而遺忘。人們對新信息的理解是基于對已有的知識經驗對新信息進行取樣（sampling）、預期（predicting） 、驗證、確定或修正（confirming or revising）的思維過程。認知心理學認為，理解的主要機制是，當閱讀材料中的某些線索激活了人腦中的圖式之后，圖式中的變量就會被閱讀材料中的信息具體化，使他們會用圖式去同化新知識，改變舊知識。

根據這樣的認知心理學的理論，擬物化的設計與具象的事物聯系，讓人們與自己以往的知識經驗產生聯系，并很自然地進行知識的同化。所以在交互設計發展之初，用擬物化設計取代最初的指令是非常合適的，而當越來越多的用戶熟悉這種操作方式的時候，扁平化設計就能更好地指向信息的功能，簡潔明了。在界面設計中，設計元素應盡量提取用戶已經存儲的行為經驗或者記憶元素，并形成長期記憶的元素，圖6、7為節拍器的icon設計。

（三）情感化的設計

情感化設計是一種在設計過程中以潛在的情感需求為主要設計原則的設計方式。今天，我們更傾向于把情感化作為一種設計理論和方法應用于產品設計。

在情感化設計中，比較重要的是由美國的認知心理學家唐納德·A·諾曼教授提出并逐步形成的理論體系，將人類的情感認知與設計思維從理性的角度進行聯系分析。諾曼教授將體驗歸為人的情感，他把情感化設計分為：本能層次、行為層次、反思層次。

高性能負載分為認知和體能兩種：高認知負載要求用戶輸入較多命令或換算，挑戰用戶的記憶力，用戶在挑戰中易產生挫敗感；高體能負載是指與生理習慣不匹配的操作，如步驟之間點擊的距離較大），同樣會給用戶帶來負面情緒。

四、扁平化設計風格發展的新趨向

正如歷史上各種設計風格的發展演變一樣，扁平化設計風格和擬物化設計風格都是信息社會發展到不同階段的產物。扁平化設計風格現在正以絕對的優勢成為界面設計的寵兒，并不代表擬物化風格就會退出歷史的舞臺。相反地，簡久必繁，繁久必簡，創新是永恒的趨勢，扁平化設計最終將進化為更新的風格，目前，界面設計風格也在扁平化風格發展的基礎上呈現出以下的一些傾向。

（一）扁平化設計風格融合擬物化風格

由于扁平化設計風格缺乏直觀性和具象性，需要一定的學習成本，其傳達的感情不豐富，甚至嚴謹地有些冰冷，這些都使得用戶體驗的滿意度會有所下降。目前，在界面設計領域，出現了扁平化設計與擬物化設計風格的融合等趨勢。（圖8）

（二）扁平化設計的延伸：45°長投影設計風格

長投影是扁平化設計風格在極簡之后的進一步演變和豐富。比較常見的如45°長投影的使用。由完全扁平的圖標，以45度角，向右下角延伸出一塊明度更低的色塊，形成一道光線投射下的陰影的效果，物體長長的投影一樣，額外引人注目。這種效果在保持扁平化的同時還增加了設計的深度。這樣，可以用最簡單的設計，達到提高畫面深度的立體效果，長投影常用于圖標的設計。（圖9）

（三）多邊形處理

為了給完全平面的畫面增添一些立體的感覺，還時常會使用不規則多邊形的色塊，通

過不同色塊的色彩明暗的對比，形成類似立體的視覺效果。圖10為網站 Human Hubris 人類的狂妄自大中對動物的圖形使用扁平化的多邊形繪制。

五、總結

誕生于新的信息交互界面的扁平化設計風格，作為一種審美的流行風格，由于其傳播和流行的廣度和深度，已經不斷地延伸并影響到傳統的招貼設計、包裝設計、產品設計等領域。圖11為無印良品2003年的招貼設計“地平線”，空的畫面帶給用戶更多的潛在信息以及更多的讓用戶可以去想象和填充的空間。而且在平面設計中留白越多，就越突出主題。在扁平化的設計中，留白意味著信息功能區域的劃分，可以使用戶更方便地找到自己想要找到的信息。圖12的鼠標產品造型的扁平設計，抱枕上圖案（圖13）采用不規整的多邊形色塊，都是扁平化設計風格在其他傳統設計領域的應用。

參考文獻：

[1] 王林，宮穎.基于認知心理學的網頁交互設計研究[J].藝術科技

[2] 周黎鈴.基于用戶體驗的扁平化互聯辦公網產品界面設計研究[D]. 杭州：浙江工商大學.

[3] 方心怡.扁平化設計風格下平面視覺元素的應用研究[D].蘇州：蘇州大學.

[4] 吳俊，莫雷.智能手機交互模式的分層視覺模型[J] 包裝工程，2013（6）：14-17

[5] 王津.學前兒童科學知識圖畫書閱讀理解研究[D].上海：華東師范大學.

[6]（美）唐納德·A·諾曼.情感化設計[M]. 北京：電子工業出版社，2005.5.

[7] 蔡濤.情緒腦與交互界面的情感化設計[J].藝術與設計（理論），2015（10）.