心理學(xué)在設(shè)計(jì)上的應(yīng)用（1）

最近在讀關(guān)于心理認(rèn)知與設(shè)計(jì)方面的書籍，作為一個(gè)設(shè)計(jì)師懂得一些基本的設(shè)計(jì)準(zhǔn)則很有必要。多看幾本這類書籍，就會(huì)發(fā)現(xiàn)其實(shí)書中闡述的觀點(diǎn)基本大同小異，均是從人的感知、注意、記憶、思維、動(dòng)機(jī)等方面出發(fā)，直接剖析認(rèn)知心理，全面了解用戶，但是抽象的觀點(diǎn)好讀但不好用。于是，我想著結(jié)合現(xiàn)有的理論觀點(diǎn)，配上一些實(shí)際的設(shè)計(jì)案例來(lái)輔助自己學(xué)習(xí)和理解，算是鞏固知識(shí)吧，后期會(huì)持續(xù)更新系列文章，以此激勵(lì)，共勉之。

1、眼見非腦見——格式塔原理

當(dāng)我們觀察周圍的一切時(shí)，人的大腦會(huì)自動(dòng)解析眼睛看到的所有信息，讓我們感受真實(shí)的世界，而非眼睛單純看到的點(diǎn)、線、面，這在圖形設(shè)計(jì)和用戶界面設(shè)計(jì)中尤其重要。

相鄰性——簡(jiǎn)單的說(shuō)，就是距離越近的物體看起來(lái)屬于一組

（如上圖所示，左側(cè)的圖是成行的正方形，右側(cè)的圖是成列的正方形。）

相鄰性用戶界面案例

此圖為win8界面截圖，不論圖形的大小、顏色以及所占頁(yè)面的比例如何，我們?nèi)匀灰谎劭闯?左邊是一組、右邊是一組，由于中間間隔較大，甚至不需要標(biāo)題、分割線之類，用戶的視覺流會(huì)從左到右然后停頓，再?gòu)淖蟮接?.. 設(shè)計(jì)師在設(shè)計(jì)界面時(shí)，其實(shí)可以盡量減少分割線，線框之類的視覺干擾，僅通過(guò)拉開距離就能區(qū)分的同時(shí)，又能保持界面清爽。

相似性——如果其他因素相同，那么相似的看起來(lái)歸屬一組

如圖所示，每方塊的距離相同，但我們習(xí)慣將橙色方塊看做一組，因?yàn)樗麄兛雌饋?lái)更相似

相似性用戶界面案例

如上圖，每個(gè)單元的形狀一致，距離相同，但是中間的“立即抽獎(jiǎng)”顏色和樣式與其他有明顯的差別，故在視覺上單獨(dú)為一組，用戶一眼看上去就能區(qū)分其功能不同，目標(biāo)清晰明確。

此圖為360導(dǎo)航的一部分，雖然設(shè)計(jì)師在處理手法上相同，但很明顯這是兩組不同的標(biāo)題導(dǎo)航，每組中我們會(huì)習(xí)慣將藍(lán)色字體歸為一組，黑色字體歸為一組，藍(lán)色字體為主導(dǎo)航，黑色字體為子導(dǎo)航，用戶瀏覽順序先從上到下看大分類，再?gòu)淖蟮接疫x子分類。

連續(xù)性——相鄰性與相似性原理更強(qiáng)調(diào)我們給對(duì)象的分組，而連續(xù)性傾向于我們感知對(duì)象的連形式而不是零散的碎片

如圖示，左圖我們自動(dòng)看到一紅一綠兩條交叉的線，而不是兩段紅色線和兩段綠色線；右圖我們看到的是一只海豚，而不是一只海豚的多段身體，這說(shuō)明人類的視覺傾向于看到連續(xù)的形式，必要時(shí)甚至?xí)钛a(bǔ)遺漏。

連續(xù)性用戶界面案例

如

圖所示，三張圖有沒有什么共同特點(diǎn)呢？那就是只顯示事物的一部分，是不是設(shè)計(jì)師擺錯(cuò)了？其實(shí)這是設(shè)計(jì)師有意為之，這樣的構(gòu)圖不但不影響視覺效果，反而使畫面更有張力，我們似乎能看到畫面以外的部分，人類的視覺能有意識(shí)的組織離散的畫面，形成連續(xù)的效果，想要界面設(shè)計(jì)想要大氣、美觀沖擊力強(qiáng)，還需要傻傻的同比縮小百分百顯示么，不妨嘗試一下這種效果。

封閉性——視覺系統(tǒng)會(huì)自動(dòng)嘗試將敞開的圖形關(guān)閉起來(lái)，從而感知完整的物體而不是分散的碎片

如圖所示，我們會(huì)由左圖分散的線段感知為一個(gè)正方形，右圖我們看到的是兩個(gè)三角形和三個(gè)圓疊加在一起，即使畫面上只有3個(gè)V型和3個(gè)吃豆人，人類的視覺傾向于看到整個(gè)物體，即使他們不是完整的。

封閉性界面設(shè)計(jì)案例

如圖示，表現(xiàn)的事放在盒子里的一疊信封，僅僅顯示一個(gè)完整的對(duì)象和其“背后”對(duì)象的一角，部分可見的對(duì)象被感知一個(gè)整體。

對(duì)稱性——人類視覺系統(tǒng)試圖講復(fù)雜的場(chǎng)景解析為簡(jiǎn)單和對(duì)稱形狀的組合

如圖所示，第一張圖我們習(xí)慣將它看成兩個(gè)疊加的菱形，而不是其他較為復(fù)雜的圖形，因?yàn)檫@樣解釋更簡(jiǎn)單，第二張圖，我們習(xí)慣將較為復(fù)雜的二維圖像解析成三維場(chǎng)景.

對(duì)稱性用戶界面案例

如圖所示，上圖咋看上去是一個(gè)較為復(fù)雜的圖形，但經(jīng)過(guò)視覺系統(tǒng)的解析就成了簡(jiǎn)單的三維場(chǎng)景：在大廳中央劃分出了六個(gè)舞臺(tái)，舞臺(tái)上方是活動(dòng)主題 .

如圖所示，對(duì)稱性的另一個(gè)較為廣泛的應(yīng)用就是在頁(yè)面結(jié)構(gòu)上，就如上圖的左右對(duì)稱，在保持頁(yè)面平衡飽滿的同時(shí)，讓用戶更快的解讀界面。

主體/背景——主體包括一個(gè)場(chǎng)景中占據(jù)我們主要注意力的所有元素，其余的則是背景

 如圖所示，當(dāng)物體重疊時(shí)，占用面積小的是背景上的主體

主體/背景界面設(shè)計(jì)案例

在用戶界面設(shè)計(jì)和網(wǎng)頁(yè)設(shè)計(jì)中，主體/背景原理經(jīng)常用來(lái)在主要顯示內(nèi)容“之后”放置印象誘導(dǎo)背景，背景可以用來(lái)傳遞信息，或者暗示一個(gè)主題、品牌或者內(nèi)容所表達(dá)的情緒。如圖示第一張,主題是空炸來(lái)襲，背景就配上昏暗的天空加槍林彈雨，從而烘托戰(zhàn)事來(lái)臨前的緊張、壓抑。圖示第二張，主題為學(xué)校教育，背景就配上一群在校園歡聲笑語(yǔ)的學(xué)生，且此處背景做了變暗處理，以此突出主題。

共同命運(yùn)——一起運(yùn)動(dòng)的物體被感知為屬于一組或彼此相關(guān)

如圖所示，如果其中的4個(gè)方塊同步的前后搖擺，人們將把他們看成相關(guān)的一組

共同命運(yùn)用戶界面案例  

在mac桌面，當(dāng)用戶拖拽選中的文件夾時(shí)，共同的運(yùn)動(dòng)和高亮使得所有選中的文件夾看起來(lái)是一組。

最后

在真實(shí)的視覺場(chǎng)景中，各種原理不是孤立的，而是共同作用的，所以在設(shè)計(jì)完成后，使用每個(gè)格式塔原理來(lái)考量各個(gè)設(shè)計(jì)元素之間的關(guān)系是否符合設(shè)計(jì)的初衷，是考量設(shè)計(jì)的優(yōu)良方法。