筆者前幾篇的文章分別用Airbnb、Youtube兩個產(chǎn)品，為大家解讀了尼爾森十大可用性原則以及交互7大定律，往期回顧見文末鏈接，本文將是交互設(shè)計基本法則系列文章的最后一篇。

下面簡單說一下本文的選題理由：

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

格式塔原理是設(shè)計心理學里具備綱領(lǐng)性和指導(dǎo)性的設(shè)計法則，我們非常熟悉的設(shè)計4原則“對齊、重復(fù)、對比、親密”其實就是格式塔原理的另一種總結(jié)。從某種程度上說，自從圖形用戶界面的計算機問世以來，格式塔原理一直被廣泛運用在設(shè)計領(lǐng)域，并且已經(jīng)深入人心。

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

（2）為什么選Apple Music

有朋友問我為什么你的交互設(shè)計基礎(chǔ)法則系列文章找的案例都是國外的產(chǎn)品？

我想說，答案很簡單，因為這些產(chǎn)品“很設(shè)計”，說白了它們都流露出一股很濃的簡約設(shè)計風格，并且對各家的設(shè)計語言執(zhí)行的比較到位。坦白講，國內(nèi)很多產(chǎn)品做的也很Nice，但相對來說那種很“純粹”的產(chǎn)品設(shè)計，可以更好的幫助我們理解和認知設(shè)計法則。

本文，為你推薦的是Apple Music，一個可以滿足“我只想好好聽音樂”的產(chǎn)品。

一、什么是格式塔心理學

格式塔心理學誕生于1912年，是由德國心理學家組成的研究小組試圖解釋人類視覺的工作原理，他們觀察了許多重要的視覺現(xiàn)象并對它們編訂了目錄。

其中最基礎(chǔ)的發(fā)現(xiàn)是人類視覺是整體的：我們的視覺系統(tǒng)自動對視覺輸入構(gòu)建結(jié)構(gòu)，并在神經(jīng)系統(tǒng)層面上感知整體和統(tǒng)一的形狀、圖形和物體，而不是只看到互不相連的邊、線和區(qū)域。

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

（PS：互聯(lián)網(wǎng)上有很多解讀格式塔心理學的圖例，感興趣的朋友可以自行搜索，筆者在這里不再過多描述）

二、格式塔7大法則在Apple Music的應(yīng)用

1. 相似性

相似性：如果元素彼此相似，則元素傾向于被感知為一組。這也意味著如果具有相同功能、含義和層次結(jié)構(gòu)級別的元素，則應(yīng)在視覺上應(yīng)保持統(tǒng)一匹配。

我們傾向于將彼此相似的元素視為同一個分組，相似性可以幫助我們組織和分類頁面里的元素對象，并將它們與特定的含義或功能相關(guān)聯(lián)。有不同的方法可以使元素被認為是相似的，這些方法包括顏色、大小、形狀、紋理、尺寸和方向的相似性。

——Interaction Design Foundation

Apple Music：歌曲列表、播放列表內(nèi)的元素，擁有相同的功能、含義和邏輯層次結(jié)構(gòu)，所以視覺形式上滿足相似性法則并高度統(tǒng)一。

2. 接近性

當物體彼此靠近時，它們傾向于被默認感知在同一個組織中。 具體來說，物體之間的相對距離會影響我們感知它們是否或者以何種規(guī)則組織在一起?；ハ嗫拷ㄏ鄬τ谄渌矬w）的物體看起來屬于一組，而那些距離較遠的則自動被劃分到組外。

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

3. 連續(xù)性

視覺傾向于感知連續(xù)的形式而不是分散的碎片。

我們的思想更喜歡阻力最小的道路，連續(xù)性幫助我們通過構(gòu)圖來解釋方向和運動。它在對齊元素時發(fā)生，它可以幫助我們的眼睛順利地穿過頁面，有助于提高易讀性。連續(xù)性原則加強了對分組信息的感知，創(chuàng)建了秩序并引導(dǎo)用戶通過不同的內(nèi)容細分。

——Interaction Design Foundation

Apple Music：在排行榜頁面，與榜單歌曲或?qū)］嬒嚓P(guān)的操作按鈕統(tǒng)一出現(xiàn)在屏幕右側(cè)，自上而下排列，不僅視覺上保持連續(xù)性，在點擊熱區(qū)上也保持了連續(xù)。

4. 閉合性

視覺會自動嘗試將空出/殘缺的圖形閉合（或腦補）起來，從而將其感知為完整的物體而不是破碎的物體。
簡單點說，當圖形是一個殘缺圖形，但主體有一種使其閉合的傾向，即主體能自行填補缺口從而將其感知為一個整體。

Apple Music：在為你推薦、瀏覽、廣播頁面水平方向的第一屏，用殘缺的元素形狀內(nèi)容表示頁面的水平空間仍有元素信息未完全顯示，用戶看到“殘缺”的形狀后，會自動腦補剩下的形狀。

5. 圖/地法則（主體與背景法則）

圖/地法則表明用戶界面需要將主體對象與背景區(qū)分開來。

這個原理指出：我們在感知事物的時候，總是自動的將視覺區(qū)域分為主體和背景。一旦圖像中的某個部分符合作為背景特征的話，我們的視覺感知就不會把它們作為主體焦點。根據(jù)這樣的原理在用戶界面設(shè)計當中，我們就可以通過一些處理將圖像中的某些部分變成背景，這樣可以顯示更多的信息或者將用戶的焦點轉(zhuǎn)移。
——Interaction Design Foundation

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

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

6. Pr?gnanz（或簡單法則）

Pr?gnanz是一個德語單詞，意思是“簡潔”。人的眼睛喜歡在復(fù)雜的形狀中找到簡單而有序的對象，當我們在一個設(shè)計中看到復(fù)雜的物體時，眼睛更愿意將它們轉(zhuǎn)換為單一統(tǒng)一形狀，并嘗試從這些形狀中移除無關(guān)的細節(jié)來簡化這些物體。說到這里，不得不提一下設(shè)計領(lǐng)域里的金句：

Less is More

簡單的東西往往帶給人們的是更多的享受

——20世紀30年代著名建筑師 路德維?！っ芩埂し驳铝_

Apple Music：如果頁面需要引導(dǎo)用戶進行某種操作，Apple Music會突出那些用戶目標非常明確的功能按鈕；此外，大多數(shù)藝人照片的背景幾乎是純色，旨在突出藝人形象。

?7. 共同命運法則

前面的幾個格式塔原理都是針對靜態(tài)的圖形，這里的共同命運是針對的是運動的物體。共同命運和前面的相似性和接近性相關(guān)，都影響著我們感知的物體是否在同一個組里。共同命運指出具有共同運動形式的物體被感知為彼此相關(guān)的一組。

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

總結(jié)

不論是格式塔原理還是尼爾森系列還是交互7大定律，其實這些基本法則的應(yīng)用并不是相互獨立的，相反它們之間具有高度的關(guān)聯(lián)性，是相輔相成的關(guān)系，我們需要跟進不同的需求類型和用戶場景，運用這些基本法則打出組合拳。
（說明：本文圖片版權(quán)歸Apple Music所有）

到這里，我的交互設(shè)計基本法則系列文章已經(jīng)分享完結(jié)了，下一個系列的主題還在思考和規(guī)劃中，當然還是聚焦設(shè)計。如果你有特別想了解的一些主題，可以留言給我。

相關(guān)閱讀

《以Airbnb為例，為你解讀尼爾森10大可用性原則》

《以YouTube為例，為你解讀交互7大定律》

作者：王晗陵，微信公眾號：從你的視界路過（ID：wanghlnj1）

本文由 @王晗陵 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Pexels，基于 CC0 協(xié)議