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

格式(shi)塔(ta)原理(li)(li)(li)(li)是設(she)計(ji)(ji)(ji)心理(li)(li)(li)(li)學里具(ju)備綱領性和指導性的(de)設(she)計(ji)(ji)(ji)法則，我們非常熟悉的(de)設(she)計(ji)(ji)(ji) 4 原則“對齊、重復、對比、親(qin)密”其實(shi)就是格式(shi)塔(ta)原理(li)(li)(li)(li)的(de)另(ling)一種總結。從(cong)某種程(cheng)度上說，自從(cong)圖形用戶界面的(de)計(ji)(ji)(ji)算機問世以來，格式(shi)塔(ta)原理(li)(li)(li)(li)一直被廣(guang)泛運用在(zai)設(she)計(ji)(ji)(ji)領域，并且已(yi)經深入人心。

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

（2）為什么選Apple Music

有(you)朋友問我為什么你的交互設計(ji)基(ji)礎法則系列(lie)文章(zhang)找的案(an)例(li)都(dou)是(shi)國外的產品？

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

本文，為你推薦的(de)(de)(de)(de)是(shi)Apple Music，一(yi)個可以滿足“我只想好好聽音(yin)樂”的(de)(de)(de)(de)產(chan)品。一(yi)、什么是(shi)格式(shi)塔(ta)心(xin)(xin)理學格式(shi)塔(ta)心(xin)(xin)理學誕(dan)生于 1912 年，是(shi)由德國心(xin)(xin)理學家組成的(de)(de)(de)(de)研究(jiu)小組試圖解釋人類視(shi)覺(jue)的(de)(de)(de)(de)工作原理，他們觀(guan)察了許多重(zhong)要(yao)的(de)(de)(de)(de)視(shi)覺(jue)現象并對它們編訂了目錄(lu)。

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

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

（PS：互聯網上有很(hen)多(duo)解讀(du)格(ge)式(shi)塔(ta)(ta)心理學(xue)的圖例，感興趣的朋友可以自行(xing)搜索，筆者在這里不再過多(duo)描述(shu)）二、格(ge)式(shi)塔(ta)(ta)

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

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

——Interaction Design FoundationApple Music：歌曲(qu)列表(biao)、播(bo)放列表(biao)內的元素(su)，擁有相同的功(gong)能、含義(yi)和邏(luo)輯層次結構，所以(yi)視(shi)覺形式上(shang)滿足相似性法則并(bing)高度統一。

2. 接近(jin)性當物體(ti)彼此靠(kao)近(jin)時(shi)，它(ta)們(men)傾向(xiang)于被默認感知在同一(yi)個組(zu)織中(zhong)。 具(ju)體(ti)來說，物體(ti)之間的相對距(ju)離(li)(li)會影(ying)響我們(men)感知它(ta)們(men)是否或者以何種(zhong)規(gui)則組(zu)織在一(yi)起。互相靠(kao)近(jin)（相對于其它(ta)物體(ti)）的物體(ti)看起來屬于一(yi)組(zu)，而那(nei)些距(ju)離(li)(li)較遠的則自(zi)動被劃分到(dao)組(zu)外(wai)。

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

3.連續性(xing)視(shi)覺傾向于感(gan)知連續的形(xing)式而不是分(fen)散(san)的碎(sui)片。我們的思(si)想更喜歡阻(zu)力最小的道路，連續性(xing)幫助我們通過(guo)構(gou)圖來解(jie)釋方向和運動。它(ta)在對(dui)齊元素時(shi)發生，它(ta)可(ke)以幫助我們的眼睛順利地穿(chuan)過(guo)頁(ye)面，有助于提高易讀(du)性(xing)。連續性(xing)原則加(jia)強了(le)對(dui)分(fen)組信息的感(gan)知，創建了(le)秩(zhi)序并引(yin)導用戶通過(guo)不同的內容細(xi)分(fen)。

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

簡單(dan)點說，當圖形是一(yi)個殘缺圖形，但(dan)主體(ti)有一(yi)種(zhong)使其閉合(he)的(de)傾向，即主體(ti)能(neng)自(zi)行(xing)填補缺口從而將其感知為(wei)一(yi)個整體(ti)。

Apple Music：在為你推薦、瀏(liu)覽、廣播頁(ye)面水(shui)平(ping)(ping)方向的第一(yi)屏，用殘(can)缺(que)的元(yuan)素形狀(zhuang)內容表示頁(ye)面的水(shui)平(ping)(ping)空間仍有(you)元(yuan)素信(xin)息(xi)未(wei)完全顯(xian)示，用戶看到“殘(can)缺(que)”的形狀(zhuang)后，會自(zi)動腦補剩下的形狀(zhuang)。

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

——Interaction

Design

Foundation主體(ti)(ti)指的(de)是在(zai)界面當中占據我(wo)們主要注意(yi)力的(de)所(suo)有(you)元素(su)(su)，其余的(de)元素(su)(su)在(zai)此(ci)時(shi)均成為背(bei)景。當主體(ti)(ti)與背(bei)景重疊(die)時(shi)，人的(de)視(shi)覺更加傾向于將(jiang)小的(de)物(wu)(wu)體(ti)(ti)視(shi)為主體(ti)(ti)，大的(de)物(wu)(wu)體(ti)(ti)視(shi)為背(bei)景，所(suo)以我(wo)們可以通過(guo)大小與圖地關(guan)系，將(jiang)我(wo)們希望傳遞(di)的(de)不同層次(ci)的(de)內容進行展示。

Apple Music：在(zai)音樂(le)播(bo)放(fang)頁面，在(zai)白色背景(jing)上，有(you)非常突出的(de)主(zhu)體：專輯封(feng)面、進(jin)(jin)度(du)條、播(bo)放(fang)控制按鈕等，此外當用戶(hu)進(jin)(jin)行播(bo)放(fang)控制時(shi)，專輯和進(jin)(jin)度(du)條的(de)大小會隨(sui)之(zhi)變化，這種(zhong)主(zhu)體與背景(jing)的(de)層次對比很鮮明(ming)，非常符合(he)iOS設計語言(yan)。

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

is More

簡單的(de)東西往(wang)往(wang)帶給(gei)人(ren)們的(de)是更多的(de)享受

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

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

Apple Music：在完成選擇(ze)喜愛(ai)的(de)音(yin)樂類別和藝(yi)人時(shi)，選中的(de)對(dui)象會一同被“裝進”下方的(de)按鈕。