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

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

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

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

相鄰性——簡單的說，就是距離越近的物體看起來屬于一組

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

相鄰性用戶界面案例

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

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

如圖所示，每方塊的距離相同，但我們習(xí)慣將橙色方塊看做一組，因為他們看起來更相似

相似性用戶界面案例

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

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

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

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

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

如

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

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

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

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

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

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

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

對稱性用戶界面案例

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

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

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

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

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

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

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

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

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

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

最后

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