基于認(rèn)知心理學(xué)的扁平化風(fēng)格的界面設(shè)計(jì)研究

聶茜

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

關(guān)鍵詞：認(rèn)知心理學(xué)；扁平化設(shè)計(jì)；界面設(shè)計(jì)；設(shè)計(jì)風(fēng)格

檢 索：www.artdesign.org.cn

中圖分類號(hào)：TB47；B842 文獻(xiàn)標(biāo)志碼：A 文章編號(hào)：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

一、引言

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

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

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

二、扁平化設(shè)計(jì)風(fēng)格的認(rèn)知心理學(xué)應(yīng)用

（一）認(rèn)知心理學(xué)概述

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

（二）扁平化設(shè)計(jì)風(fēng)格的認(rèn)知心理學(xué)應(yīng)用研究

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

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

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

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

格式塔理論是現(xiàn)代認(rèn)知主義學(xué)習(xí)理論的先驅(qū)，其原理幾乎適用于所有與視覺有關(guān)的領(lǐng)域。根據(jù)格式塔理論中的接近原則（圖2），當(dāng)對象離得非常接近的時(shí)候，意識(shí)會(huì)認(rèn)為他們是相關(guān)的。在界面設(shè)計(jì)中，一般為一個(gè)提交按鈕會(huì)緊挨著一個(gè)文本框，二者是相關(guān)的，對應(yīng)著一個(gè)統(tǒng)一的功能或用戶操作指令，所以在進(jìn)行設(shè)計(jì)時(shí)，相鄰近的模塊功能確是相關(guān)的，如圖3將圖標(biāo)設(shè)計(jì)和文字說明臨近放置，組成一個(gè)信息組快。

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

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

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

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

三、 扁平化設(shè)計(jì)風(fēng)格的美學(xué)分析

（一）界面設(shè)計(jì)的核心是功能

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

（二）易用性的設(shè)計(jì)

界面設(shè)計(jì)是為人機(jī)交互行為服務(wù)的，其視覺設(shè)計(jì)應(yīng)使整個(gè)界面呈現(xiàn)出盡可能的簡潔易用的風(fēng)格。當(dāng)用戶對界面的信息反饋是簡潔明了，對界面所傳達(dá)的信息是容易感知的，是沒有壓力感的，界面的表象（比如美觀度）判斷易用程度 ，美即好用。反之，如果界面?zhèn)鬟f給用戶的感受是繁雜的，就會(huì)產(chǎn)生一些不友好的情緒，對用戶就會(huì)產(chǎn)生某種壓力，復(fù)雜和陌生感是壓力感產(chǎn)生的主要來源。

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

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

（三）情感化的設(shè)計(jì)

情感化設(shè)計(jì)是一種在設(shè)計(jì)過程中以潛在的情感需求為主要設(shè)計(jì)原則的設(shè)計(jì)方式。今天，我們更傾向于把情感化作為一種設(shè)計(jì)理論和方法應(yīng)用于產(chǎn)品設(shè)計(jì)。

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

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

四、扁平化設(shè)計(jì)風(fēng)格發(fā)展的新趨向

正如歷史上各種設(shè)計(jì)風(fēng)格的發(fā)展演變一樣，扁平化設(shè)計(jì)風(fēng)格和擬物化設(shè)計(jì)風(fēng)格都是信息社會(huì)發(fā)展到不同階段的產(chǎn)物。扁平化設(shè)計(jì)風(fēng)格現(xiàn)在正以絕對的優(yōu)勢成為界面設(shè)計(jì)的寵兒，并不代表擬物化風(fēng)格就會(huì)退出歷史的舞臺(tái)。相反地，簡久必繁，繁久必簡，創(chuàng)新是永恒的趨勢，扁平化設(shè)計(jì)最終將進(jìn)化為更新的風(fēng)格，目前，界面設(shè)計(jì)風(fēng)格也在扁平化風(fēng)格發(fā)展的基礎(chǔ)上呈現(xiàn)出以下的一些傾向。

（一）扁平化設(shè)計(jì)風(fēng)格融合擬物化風(fēng)格

由于扁平化設(shè)計(jì)風(fēng)格缺乏直觀性和具象性，需要一定的學(xué)習(xí)成本，其傳達(dá)的感情不豐富，甚至嚴(yán)謹(jǐn)?shù)赜行┍?，這些都使得用戶體驗(yàn)的滿意度會(huì)有所下降。目前，在界面設(shè)計(jì)領(lǐng)域，出現(xiàn)了扁平化設(shè)計(jì)與擬物化設(shè)計(jì)風(fēng)格的融合等趨勢。（圖8）

（二）扁平化設(shè)計(jì)的延伸：45°長投影設(shè)計(jì)風(fēng)格

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

（三）多邊形處理

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

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

五、總結(jié)

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

參考文獻(xiàn)：

[1] 王林，宮穎.基于認(rèn)知心理學(xué)的網(wǎng)頁交互設(shè)計(jì)研究[J].藝術(shù)科技

[2] 周黎鈴.基于用戶體驗(yàn)的扁平化互聯(lián)辦公網(wǎng)產(chǎn)品界面設(shè)計(jì)研究[D]. 杭州：浙江工商大學(xué).

[3] 方心怡.扁平化設(shè)計(jì)風(fēng)格下平面視覺元素的應(yīng)用研究[D].蘇州：蘇州大學(xué).

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

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

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

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