筆者前幾篇的文章分別用 Airbnb、Youtube 兩個產品，為大家解讀了尼爾森十大可用性原則以及交互7大定律，本文將是交互設計基本法則系列文章的最后一篇。
往期回顧：
簡單說一下本文的選題理由：
為什么選格式塔原理
格式塔原理是設計心理學里具備綱領性和指導性的設計法則，我們非常熟悉的設計4原則「對齊、重復、對比、親密」其實就是格式塔原理的另一種總結。從某種程度上說，自從圖形用戶界面的計算機問世以來，格式塔原理一直被廣泛運用在設計領域，并且已經深入人心。所以，筆者有必要在系列文章里分享一下格式塔原理。
為什么選Apple Music
有朋友問我為什么你的交互設計基礎法則系列文章找的案例都是國外的產品？我想說，答案很簡單，因為這些產品「很設計」，說白了它們都流露出一股很濃的簡約設計風格，并且對各家的設計語言執行的比較到位。坦白講，國內很多產品做的也很 Nice，但相對來說那種很「純粹」的產品設計，可以更好的幫助我們理解和認知設計法則。本文，為你推薦的是 Apple Music，一個可以滿足「我只想好好聽音樂」的產品。
一、什么是格式塔心理學
格式塔心理學誕生于1912年，是由德國心理學家組成的研究小組試圖解釋人類視覺的工作原理。他們觀察了許多重要的視覺現象并對它們編訂了目錄。其中最基礎的發現是人類視覺是整體的：我們的視覺系統自動對視覺輸入構建結構，并在神經系統層面上感知整體和統一的形狀、圖形和物體，而不是只看到互不相連的邊、線和區域。「形狀」和「圖形」在德語中是 Gestalt，因此這些理論也稱做視覺感知的格式塔原理。
（PS：互聯網上有很多解讀格式塔心理學的圖例，感興趣的朋友可以DIY，筆者在這里不再過多描述）
二、格式塔7大法則在Apple Music的應用
1. 相似性
相似性：如果元素彼此相似，則元素傾向于被感知為一組。這也意味著如果具有相同功能、含義和層次結構級別的元素，則應在視覺上保持統一匹配。
我們傾向于將彼此相似的元素視為同一個分組。相似性可以幫助我們組織和分類頁面里的元素對象，并將它們與特定的含義或功能相關聯。有不同的方法可以使元素被認為是相似的，這些方法包括顏色，大小，形狀，紋理，尺寸和方向的相似性。——Interaction Design Foundation
Apple Music：歌曲列表、播放列表內的元素擁有相同的功能、含義和邏輯層次結構，所以視覺形式上滿足相似性法則并高度統一。
2. 接近性
當物體彼此靠近時，它們傾向于被默認感知在同一個組織中。 具體來說，物體之間的相對距離會影響我們感知它們是否或者以何種規則組織在一起。互相靠近（相對于其它物體）的物體看起來屬于一組，而那些距離較遠的則自動被劃分到組外。
Apple Music（iPad端）：在專輯頁面，專輯基本信息、播放按鈕、添加及更多按鈕在內部空間上保持接近，方便用戶熟悉同類功能并完成交互動作。
3. 連續性
視覺傾向于感知連續的形式而不是分散的碎片。
我們的思想更喜歡阻力最小的道路。連續性幫助我們通過構圖來解釋方向和運動。它在對齊元素時發生，它可以幫助我們的眼睛順利地穿過頁面，有助于提高易讀性。連續性原則加強了對分組信息的感知，創建了秩序并引導用戶通過不同的內容細分。——Interaction Design Foundation
Apple Music：在排行榜頁面，與榜單歌曲或專輯相關的操作按鈕統一出現在屏幕右側，自上而下排列，不僅視覺上保持連續性，在點擊熱區上也保持了連續。
4. 閉合性
視覺會自動嘗試將空出/殘缺的圖形閉合（或腦補）起來，從而將其感知為完整的物體而不是破碎的物體。
簡單點說，當圖形是一個殘缺圖形，但主體有一種使其閉合的傾向，即主體能自行填補缺口從而將其感知為一個整體。
Apple Music：在為你推薦、瀏覽、廣播頁面水平方向的第一屏，用殘缺的元素形狀內容表示頁面的水平空間仍有元素信息未完全顯示，用戶看到「殘缺」的形狀后，會自動腦補剩下的形狀。
5. 圖/地法則（主體與背景法則）
圖/地法則表明用戶界面需要將主體對象與背景區分開來。
這個原理指出：我們在感知事物的時候，總是自動的將視覺區域分為主體和背景。一旦圖像中的某個部分符合作為背景特征的話，我們的視覺感知就不會把它們作為主體焦點。根據這樣的原理在用戶界面設計當中，我們就可以通過一些處理將圖像中的某些部分變成背景，這樣可以顯示更多的信息或者將用戶的焦點轉移。——Interaction Design Foundation
主體指的是在界面當中占據我們主要注意力的所有元素，其余的元素在此時，均成為背景。當主體與背景重疊時，人的視覺更加傾向于將小的物體視為主體，大的物體視為背景，所以我們可以通過大小與圖地關系，將我們希望傳遞的不同層次的內容進行展示。
Apple Music：在音樂播放頁面，在白色背景上，有非常突出的主體：專輯封面、進度條、播放控制按鈕等，此外當用戶進行播放控制時，專輯和進度條的大小會隨之變化，這種主體與背景的層次對比很鮮明，非常符合 iOS 設計語言。
6. Pr?gnanz（或簡單法則）
Pr?gnanz 是一個德語單詞，意思是「簡潔」。人的眼睛喜歡在復雜的形狀中找到簡單而有序的對象，當我們在一個設計中看到復雜的物體時，眼睛更愿意將它們轉換為單一統一形狀，并嘗試從這些形狀中移除無關的細節來簡化這些物體。說到這里，不得不提一下設計領域里的金句：
Less is More
簡單的東西往往帶給人們的是更多的享受。——20世紀30年代著名建筑師 路德維希·密斯·凡德羅
Apple Music：如果頁面需要引導用戶進行某種操作，Apple Music 會突出那些用戶目標非常明確的功能按鈕；此外，大多數藝人照片的背景幾乎是純色，旨在突出藝人形象。
7. 共同命運法則
前面的幾個格式塔原理都是針對靜態的圖形，這里的共同命運是針對的是運動的物體。共同命運和前面的相似性和接近性相關，都影響著我們感知的物體是否在同一個組里。共同命運指出具有共同運動形式的物體被感知為彼此相關的一組。
Apple Music：在完成選擇喜愛的音樂類別和藝人時，選中的對象會一同被「裝進」下方的按鈕。
總結
不論是格式塔原理還是尼爾森系列還是交互7大定律，其實這些基本法則的應用并不是相互獨立的，相反它們之間具有高度的關聯性，是相輔相成的關系，我們需要根據不同的需求類型和用戶場景，運用這些基本法則打出組合拳。
（說明：本文圖片版權歸Apple Music所有）
歡迎關注作者的微信公眾號：「設計意志」
「格式塔原理在設計中的影響」
復制本文鏈接 文章為作者獨立觀點不代表優設網立場，未經允許不得轉載。
發評論！每天贏獎品
點擊 登錄 后，在評論區留言，系統會隨機派送獎品
2012年成立至今，是國內備受歡迎的設計師平臺，提供獎品贊助 聯系我們
標志設計標準教程
已累計誕生 729 位幸運星
發表評論 為下方 6 條評論點贊，解鎖好運彩蛋
↓ 下方為您推薦了一些精彩有趣的文章熱評 ↓