（1）爲什(shén)麽選格式塔原理(lǐ)

格式塔原理(lǐ)是設計心理(lǐ)學裏具備綱領性和(hé)指導性的(de)設計法則，我們非常熟悉的(de)設計 4 原則“對(duì)齊、重複、對(duì)比、親密”其實就是格式塔原理(lǐ)的(de)另一種總結。從某種程度上說，自從圖形用(yòng)戶界面的(de)計算(suàn)機問世以來(lái)，格式塔原理(lǐ)一直被廣泛運用(yòng)在設計領域，并且已經深入人(rén)心。

所以，筆者有必要在系列文章(zhāng)裏分(fēn)享一下(xià)格式塔原理(lǐ)。

（2）爲什(shén)麽選Apple Music

有朋友問我爲什(shén)麽你的(de)交互設計基礎法則系列文章(zhāng)找的(de)案例都是國外的(de)産品？

我想說，答(dá)案很簡單，因爲這(zhè)些産品“很設計”，說白了(le)它們都流露出一股很濃的(de)簡約設計風格，并且對(duì)各家的(de)設計語言執行的(de)比較到位。坦白講，國内很多(duō)産品做(zuò)的(de)也(yě)很Nice，但相對(duì)來(lái)說那種很“純粹”的(de)産品設計，可(kě)以更好的(de)幫助我們理(lǐ)解和(hé)認知設計法則。

本文，爲你推薦的(de)是Apple Music，一個(gè)可(kě)以滿足“我隻想好好聽(tīng)音(yīn)樂(yuè)”的(de)産品。一、什(shén)麽是格式塔心理(lǐ)學格式塔心理(lǐ)學誕生于 1912 年，是由德國心理(lǐ)學家組成的(de)研究小組試圖解釋人(rén)類視覺的(de)工作原理(lǐ)，他(tā)們觀察了(le)許多(duō)重要的(de)視覺現象并對(duì)它們編訂了(le)目錄。

其中最基礎的(de)發現是人(rén)類視覺是整體的(de)：我們的(de)視覺系統自動對(duì)視覺輸入構建結構，并在神經系統層面上感知整體和(hé)統一的(de)形狀、圖形和(hé)物(wù)體，而不是隻看到互不相連的(de)邊、線和(hé)區(qū)域。

“形狀”和(hé)“圖形”在德語中是Gestalt，因此這(zhè)些理(lǐ)論也(yě)稱做(zuò)視覺感知的(de)格式塔原理(lǐ)。

（PS：互聯網上有很多(duō)解讀格式塔心理(lǐ)學的(de)圖例，感興趣的(de)朋友可(kě)以自行搜索，筆者在這(zhè)裏不再過多(duō)描述）二、格式塔

7 大(dà)法則在Apple Music的(de)應用(yòng)1.

相似性相似性：如果元素彼此相似，則元素傾向于被感知爲一組。這(zhè)也(yě)意味著(zhe)如果具有相同功能、含義和(hé)層次結構級别的(de)元素，則應在視覺上應保持統一匹配。我們傾向于将彼此相似的(de)元素視爲同一個(gè)分(fēn)組，相似性可(kě)以幫助我們組織和(hé)分(fēn)類頁面裏的(de)元素對(duì)象，并将它們與特定的(de)含義或功能相關聯。有不同的(de)方法可(kě)以使元素被認爲是相似的(de)，這(zhè)些方法包括顔色、大(dà)小、形狀、紋理(lǐ)、尺寸和(hé)方向的(de)相似性。

——Interaction Design FoundationApple Music：歌(gē)曲列表、播放列表内的(de)元素，擁有相同的(de)功能、含義和(hé)邏輯層次結構，所以視覺形式上滿足相似性法則并高(gāo)度統一。

2. 接近性當物(wù)體彼此靠近時(shí)，它們傾向于被默認感知在同一個(gè)組織中。 具體來(lái)說，物(wù)體之間的(de)相對(duì)距離會影(yǐng)響我們感知它們是否或者以何種規則組織在一起。互相靠近（相對(duì)于其它物(wù)體）的(de)物(wù)體看起來(lái)屬于一組，而那些距離較遠(yuǎn)的(de)則自動被劃分(fēn)到組外。

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

3.連續性視覺傾向于感知連續的(de)形式而不是分(fēn)散的(de)碎片。我們的(de)思想更喜歡阻力最小的(de)道路，連續性幫助我們通(tōng)過構圖來(lái)解釋方向和(hé)運動。它在對(duì)齊元素時(shí)發生，它可(kě)以幫助我們的(de)眼睛順利地穿過頁面，有助于提高(gāo)易讀性。連續性原則加強了(le)對(duì)分(fēn)組信息的(de)感知，創建了(le)秩序并引導用(yòng)戶通(tōng)過不同的(de)内容細分(fēn)。

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

簡單點說，當圖形是一個(gè)殘缺圖形，但主體有一種使其閉合的(de)傾向，即主體能自行填補缺口從而将其感知爲一個(gè)整體。

Apple Music：在爲你推薦、浏覽、廣播頁面水(shuǐ)平方向的(de)第一屏，用(yòng)殘缺的(de)元素形狀内容表示頁面的(de)水(shuǐ)平空間仍有元素信息未完全顯示，用(yòng)戶看到“殘缺”的(de)形狀後，會自動腦(nǎo)補剩下(xià)的(de)形狀。

5.圖/地法則（主體與背景法則）圖/地法則表明(míng)用(yòng)戶界面需要将主體對(duì)象與背景區(qū)分(fēn)開來(lái)。這(zhè)個(gè)原理(lǐ)指出：我們在感知事物(wù)的(de)時(shí)候，總是自動的(de)将視覺區(qū)域分(fēn)爲主體和(hé)背景。一旦圖像中的(de)某個(gè)部分(fēn)符合作爲背景特征的(de)話(huà)，我們的(de)視覺感知就不會把它們作爲主體焦點。根據這(zhè)樣的(de)原理(lǐ)在用(yòng)戶界面設計當中，我們就可(kě)以通(tōng)過一些處理(lǐ)将圖像中的(de)某些部分(fēn)變成背景，這(zhè)樣可(kě)以顯示更多(duō)的(de)信息或者将用(yòng)戶的(de)焦點轉移。

——Interaction

Design

Foundation主體指的(de)是在界面當中占據我們主要注意力的(de)所有元素，其餘的(de)元素在此時(shí)均成爲背景。當主體與背景重疊時(shí)，人(rén)的(de)視覺更加傾向于将小的(de)物(wù)體視爲主體，大(dà)的(de)物(wù)體視爲背景，所以我們可(kě)以通(tōng)過大(dà)小與圖地關系，将我們希望傳遞的(de)不同層次的(de)内容進行展示。

Apple Music：在音(yīn)樂(yuè)播放頁面，在白色背景上，有非常突出的(de)主體：專輯封面、進度條、播放控制按鈕等，此外當用(yòng)戶進行播放控制時(shí)，專輯和(hé)進度條的(de)大(dà)小會随之變化(huà)，這(zhè)種主體與背景的(de)層次對(duì)比很鮮明(míng)，非常符合iOS設計語言。

6.Prägnanz（或簡單法則）Prägnanz是一個(gè)德語單詞，意思是“簡潔”。人(rén)的(de)眼睛喜歡在複雜(zá)的(de)形狀中找到簡單而有序的(de)對(duì)象，當我們在一個(gè)設計中看到複雜(zá)的(de)物(wù)體時(shí)，眼睛更願意将它們轉換爲單一統一形狀，并嘗試從這(zhè)些形狀中移除無關的(de)細節來(lái)簡化(huà)這(zhè)些物(wù)體。說到這(zhè)裏，不得(de)不提一下(xià)設計領域裏的(de)金句：Less

is More

簡單的(de)東西往往帶給人(rén)們的(de)是更多(duō)的(de)享受

—— 20 世紀 30 年代著名建築師 路德維希·密斯·凡德羅Apple Music：如果頁面需要引導用(yòng)戶進行某種操作，Apple Music會突出那些用(yòng)戶目标非常明(míng)确的(de)功能按鈕；此外，大(dà)多(duō)數藝人(rén)照(zhào)片的(de)背景幾乎是純色，旨在突出藝人(rén)形象。

7. 共同命運法則前面的(de)幾個(gè)格式塔原理(lǐ)都是針對(duì)靜态的(de)圖形，這(zhè)裏的(de)共同命運是針對(duì)的(de)是運動的(de)物(wù)體。共同命運和(hé)前面的(de)相似性和(hé)接近性相關，都影(yǐng)響著(zhe)我們感知的(de)物(wù)體是否在同一個(gè)組裏。共同命運指出具有共同運動形式的(de)物(wù)體被感知爲彼此相關的(de)一組。

Apple Music：在完成選擇喜愛(ài)的(de)音(yīn)樂(yuè)類别和(hé)藝人(rén)時(shí)，選中的(de)對(duì)象會一同被“裝進”下(xià)方的(de)按鈕。