（1）為什么選格式塔原(yuan)理

格式塔原(yuan)理是(shi)設計(ji)心(xin)理學(xue)里具備綱領性和(he)指導性的設計(ji)法則，我們(men)非(fei)常(chang)熟悉的設計(ji) 4 原(yuan)則“對齊、重復、對比、親密”其實就是(shi)格式塔原(yuan)理的另一(yi)種(zhong)總結。從某種(zhong)程度(du)上(shang)說，自從圖形用(yong)(yong)戶界(jie)面的計(ji)算機問世以來，格式塔原(yuan)理一(yi)直被廣泛運用(yong)(yong)在設計(ji)領域，并且已經深(shen)入(ru)人心(xin)。

所以，筆者有必要在系列文章里分享一(yi)下格式塔原(yuan)理。

（2）為什么選Apple Music

有朋友問(wen)我為什么你的(de)交(jiao)互(hu)設(she)計基礎法則系列文章找的(de)案例都是國(guo)外的(de)產(chan)品？

我想(xiang)說，答案很(hen)(hen)簡單，因為這些產(chan)品“很(hen)(hen)設計(ji)”，說白了它們都流露出(chu)一股很(hen)(hen)濃的(de)簡約設計(ji)風格，并且(qie)對(dui)各家的(de)設計(ji)語言執行的(de)比較(jiao)到位(wei)。坦(tan)白講，國內很(hen)(hen)多(duo)產(chan)品做的(de)也很(hen)(hen)Nice，但相對(dui)來說那種很(hen)(hen)“純粹”的(de)產(chan)品設計(ji)，可以更好(hao)的(de)幫助我們理解(jie)和認知設計(ji)法則。

本(ben)文(wen)，為(wei)你推薦的(de)(de)是Apple Music，一個(ge)可以滿足“我只想好(hao)好(hao)聽音樂”的(de)(de)產品(pin)。一、什么是格(ge)式(shi)(shi)塔心(xin)理(li)(li)學(xue)格(ge)式(shi)(shi)塔心(xin)理(li)(li)學(xue)誕生于(yu) 1912 年，是由(you)德國心(xin)理(li)(li)學(xue)家組成的(de)(de)研究(jiu)小組試圖解釋人(ren)類視(shi)覺的(de)(de)工(gong)作(zuo)原理(li)(li)，他(ta)們(men)觀察(cha)了許多重要(yao)的(de)(de)視(shi)覺現象并對它們(men)編訂(ding)了目錄(lu)。

其中最基(ji)礎的(de)(de)(de)發現是(shi)人類(lei)視(shi)覺是(shi)整(zheng)體的(de)(de)(de)：我們的(de)(de)(de)視(shi)覺系統(tong)自動對(dui)視(shi)覺輸入構建結構，并在神經系統(tong)層面上(shang)感知整(zheng)體和(he)統(tong)一(yi)的(de)(de)(de)形狀、圖形和(he)物體，而不是(shi)只看到互不相連的(de)(de)(de)邊、線和(he)區域。

“形(xing)狀”和(he)“圖形(xing)”在德語中(zhong)是(shi)Gestalt，因此這(zhe)些理論也稱做視覺感知的(de)格式塔原理。

（PS：互聯網上(shang)有很多解(jie)讀格式塔心理學的圖例，感興(xing)趣的朋友可(ke)以(yi)自行搜索(suo)，筆者在這里不再過(guo)多描述）二、格式塔

7 大法則在Apple Music的(de)應用1.

相(xiang)似(si)性(xing)相(xiang)似(si)性(xing)：如果元(yuan)(yuan)(yuan)素彼此相(xiang)似(si)，則(ze)(ze)元(yuan)(yuan)(yuan)素傾(qing)(qing)向于被(bei)感知為(wei)一組(zu)。這也(ye)意(yi)味(wei)著如果具有相(xiang)同(tong)(tong)功(gong)能、含(han)義和(he)層次結(jie)構級別的(de)元(yuan)(yuan)(yuan)素，則(ze)(ze)應(ying)在視覺上應(ying)保持統一匹配(pei)。我們(men)(men)傾(qing)(qing)向于將(jiang)彼此相(xiang)似(si)的(de)元(yuan)(yuan)(yuan)素視為(wei)同(tong)(tong)一個分組(zu)，相(xiang)似(si)性(xing)可以(yi)幫助我們(men)(men)組(zu)織和(he)分類頁面(mian)里的(de)元(yuan)(yuan)(yuan)素對象，并(bing)將(jiang)它們(men)(men)與特定的(de)含(han)義或功(gong)能相(xiang)關(guan)聯。有不同(tong)(tong)的(de)方法(fa)可以(yi)使元(yuan)(yuan)(yuan)素被(bei)認為(wei)是相(xiang)似(si)的(de)，這些方法(fa)包括(kuo)顏色、大(da)小、形狀、紋(wen)理、尺(chi)寸和(he)方向的(de)相(xiang)似(si)性(xing)。

——Interaction Design FoundationApple Music：歌曲列(lie)表、播放列(lie)表內的元(yuan)素(su)，擁(yong)有相(xiang)同(tong)的功能、含義和邏(luo)輯(ji)層次結構，所以視覺(jue)形(xing)式上滿足相(xiang)似性法則并高度統一。

2. 接近(jin)性當(dang)物(wu)體(ti)(ti)彼此靠(kao)近(jin)時，它們(men)(men)傾向于(yu)(yu)被(bei)默認感(gan)知在同一個(ge)組織中(zhong)。 具體(ti)(ti)來說，物(wu)體(ti)(ti)之(zhi)間的(de)(de)相對(dui)距(ju)離會影響我們(men)(men)感(gan)知它們(men)(men)是否或者以(yi)何種規則(ze)組織在一起(qi)(qi)。互相靠(kao)近(jin)（相對(dui)于(yu)(yu)其它物(wu)體(ti)(ti)）的(de)(de)物(wu)體(ti)(ti)看(kan)起(qi)(qi)來屬(shu)于(yu)(yu)一組，而那些距(ju)離較遠的(de)(de)則(ze)自動被(bei)劃分到組外。

Apple Music（iPad端）：在(zai)專輯頁面，專輯基本信息、播放按鈕、添加劑更多按鈕在(zai)內部空間(jian)上保持(chi)接近，方便用戶熟(shu)悉同類功(gong)能并完成交互動(dong)作。

3.連(lian)續性視(shi)覺(jue)傾向于(yu)感(gan)知連(lian)續的(de)(de)形式而不是分(fen)散的(de)(de)碎(sui)片。我(wo)(wo)們(men)的(de)(de)思想更喜歡阻力(li)最小(xiao)的(de)(de)道路，連(lian)續性幫助我(wo)(wo)們(men)通過構圖來解釋(shi)方向和(he)運動。它(ta)(ta)在(zai)對齊元(yuan)素時發生，它(ta)(ta)可以幫助我(wo)(wo)們(men)的(de)(de)眼(yan)睛順利地穿過頁面，有助于(yu)提高易讀性。連(lian)續性原則加強了(le)對分(fen)組信息(xi)的(de)(de)感(gan)知，創建(jian)了(le)秩序(xu)并(bing)引導(dao)用戶通過不同的(de)(de)內容細分(fen)。

——Interaction Design FoundationApple Music：在排(pai)行榜頁面，與榜單歌曲或專輯相關(guan)的(de)操作按鈕統一出現在屏幕右側，自上而下排(pai)列，不僅視覺上保(bao)持(chi)(chi)連續性，在點擊熱區上也保(bao)持(chi)(chi)了(le)連續。

簡單點說(shuo)，當圖形是一個(ge)(ge)殘缺圖形，但主體(ti)有一種使其閉合的傾(qing)向，即主體(ti)能自行填補(bu)缺口從而將其感知為(wei)一個(ge)(ge)整體(ti)。

Apple Music：在為你推薦(jian)、瀏(liu)覽、廣播(bo)頁面(mian)水平方(fang)向(xiang)的(de)第一(yi)屏，用(yong)殘缺的(de)元(yuan)素(su)形狀(zhuang)內(nei)容表示頁面(mian)的(de)水平空間仍(reng)有元(yuan)素(su)信息未完全顯示，用(yong)戶(hu)看到“殘缺”的(de)形狀(zhuang)后，會自動腦(nao)補剩下(xia)的(de)形狀(zhuang)。

5.圖(tu)(tu)/地(di)法則(ze)（主(zhu)體(ti)與背(bei)(bei)景(jing)法則(ze)）圖(tu)(tu)/地(di)法則(ze)表明用戶界面需要將主(zhu)體(ti)對象(xiang)與背(bei)(bei)景(jing)區分(fen)開來。這個原理(li)指出(chu)：我們在感知(zhi)事物(wu)的(de)(de)時候，總是自(zi)動的(de)(de)將視(shi)覺區域分(fen)為(wei)主(zhu)體(ti)和背(bei)(bei)景(jing)。一旦(dan)圖(tu)(tu)像中的(de)(de)某個部分(fen)符(fu)合作為(wei)背(bei)(bei)景(jing)特征的(de)(de)話，我們的(de)(de)視(shi)覺感知(zhi)就不(bu)會把它(ta)們作為(wei)主(zhu)體(ti)焦(jiao)點。根據這樣的(de)(de)原理(li)在用戶界面設計當中，我們就可以通過(guo)一些(xie)處理(li)將圖(tu)(tu)像中的(de)(de)某些(xie)部分(fen)變成背(bei)(bei)景(jing)，這樣可以顯示(shi)更多的(de)(de)信息(xi)或者將用戶的(de)(de)焦(jiao)點轉(zhuan)移。

——Interaction

Design

Foundation主(zhu)(zhu)體指的(de)是在(zai)界面當中占據我們(men)(men)主(zhu)(zhu)要注(zhu)意力的(de)所有元素，其余的(de)元素在(zai)此時(shi)均成為背景。當主(zhu)(zhu)體與背景重疊時(shi)，人(ren)的(de)視(shi)(shi)(shi)覺更加傾向于將小(xiao)的(de)物體視(shi)(shi)(shi)為主(zhu)(zhu)體，大的(de)物體視(shi)(shi)(shi)為背景，所以我們(men)(men)可以通過大小(xiao)與圖地關系，將我們(men)(men)希(xi)望傳遞的(de)不同(tong)層次的(de)內(nei)容進行展示(shi)。

Apple Music：在音樂播放頁(ye)面(mian)，在白(bai)色背景上，有(you)非常突出(chu)的主體(ti)：專輯(ji)(ji)封面(mian)、進(jin)度條、播放控制按鈕等，此外當用戶進(jin)行播放控制時，專輯(ji)(ji)和(he)進(jin)度條的大小(xiao)會隨之變化，這種主體(ti)與背景的層次(ci)對比(bi)很(hen)鮮明，非常符合iOS設計(ji)語言。

6.Pr?gnanz（或簡單法則）Pr?gnanz是一(yi)個德語單詞，意思是“簡潔”。人的眼(yan)睛喜歡在復雜(za)的形(xing)(xing)狀中(zhong)找到(dao)簡單而有序的對象(xiang)，當我們在一(yi)個設(she)(she)計中(zhong)看到(dao)復雜(za)的物體(ti)時，眼(yan)睛更愿意將(jiang)它們轉換為單一(yi)統一(yi)形(xing)(xing)狀，并嘗試(shi)從這些形(xing)(xing)狀中(zhong)移除無(wu)關的細節來簡化這些物體(ti)。說到(dao)這里，不(bu)得不(bu)提一(yi)下設(she)(she)計領域里的金句：Less

is More

簡單的東(dong)西往往帶給人們的是(shi)更多(duo)的享(xiang)受

—— 20 世紀(ji) 30 年代著名建筑師 路德(de)維希·密斯·凡德(de)羅Apple Music：如果頁(ye)面需要引導用(yong)戶進行某種操(cao)作，Apple Music會突出那些用(yong)戶目標非常明確的功能按鈕；此外，大多(duo)數(shu)藝人照(zhao)片(pian)的背景幾乎(hu)是(shi)純(chun)色，旨在突出藝人形(xing)象。

7. 共(gong)同(tong)命(ming)運(yun)法則前(qian)面(mian)的(de)(de)幾個格式塔原理都是針對靜態的(de)(de)圖形，這(zhe)里的(de)(de)共(gong)同(tong)命(ming)運(yun)是針對的(de)(de)是運(yun)動的(de)(de)物(wu)體(ti)(ti)。共(gong)同(tong)命(ming)運(yun)和前(qian)面(mian)的(de)(de)相似性和接(jie)近性相關，都影響著我(wo)們感知的(de)(de)物(wu)體(ti)(ti)是否在(zai)同(tong)一(yi)個組里。共(gong)同(tong)命(ming)運(yun)指出(chu)具有共(gong)同(tong)運(yun)動形式的(de)(de)物(wu)體(ti)(ti)被感知為彼(bi)此相關的(de)(de)一(yi)組。

Apple Music：在完成(cheng)選擇(ze)喜愛的音樂類別(bie)和(he)藝人時，選中(zhong)的對象會一同被“裝進”下方的按鈕(niu)。