好的設計不僅能解決問題，還能為用戶帶來積極的情感，并通過三個層面產生情感：

• 本能層：用戶想要的感受；
• 行為層：用戶想要做什么；
• 反思層：用戶想要成為誰。

作為設計師除了要掌握基本的設計原則外，還需要對每個層面的情感以及創(chuàng)造情感的心理學原理有更深入的了解。

格式塔原則

1. 相似原則

人的眼睛會把具有相似特征的元素當成一個整體，認為這些元素具有相同的作用。

界面中的綠色圖標具有相同的功能，方便用戶快速認知和操作。因此在設計具有相同功能或內容的界面元素時，應該保持一致性。

應用位置：導航、鏈接、按鈕、內容頁。

2. 連續(xù)原則

用戶傾向于把連續(xù)排列的元素視為一個整體。這條原則與對稱性和相似性密切相關。通過在序列上創(chuàng)建相似且重復的元素，引導用戶的視線方向，使操作更加連貫和清晰。

只露出一部分的卡片會向用戶發(fā)出信號，表示滑動可以查看更多的書。

應用位置：菜單和子菜單、列表、產品頁、輪播頁。

3. 封閉原則

當看到不完整的圖像時，我們會依據已有的經驗把不完全封閉的圖像當成一個統(tǒng)一的整體，這是在平面或 logo 設計中常用到的原則。

盡管頁面右上方的餅圖只顯示了一部分，我們仍然能夠輕松地識別出來。

應用位置：圖標、加載、數(shù)據可視化。

4. 鄰近原則

人們會將彼此相鄰的元素視為一組。在設計時要注意使用間距將元素組合在一起。使用較大的間距來分隔大的內容組，再使用較小的間距來分隔大內容組中的小內容組。

頁面上的每個卡片中都含有4組信息，很難快速識別具體的內容。通過調整間距，可以將這些信息清楚地分為2組。

應用位置：導航、卡片、橫幅、列表頁、分頁。

5. 對稱原則

我們喜歡看到對稱且平衡的事物。它是所設計領域中最常用和最安全的原則，有助于營造一種穩(wěn)定感和秩序感。

對稱的布局不僅增強了用戶的印象，還強調了中間的視頻播放按鈕。

應用位置：產品展示頁、列表、導航以及任何內容豐富的頁面。

6. 共同區(qū)域原則

通過信息分組和內容組織，實現(xiàn)內容的組合，有助于提升內容的層次結構和可掃描性。

卡片式UI有助于將信息分組并創(chuàng)建內容的層級深度。

應用位置：卡片、內容、服務、摘要。

7. 共同命運原則

向同一方向移動的元素被認為比靜止或向另一個方向上移動的元素更相關。這個原則有利于建立不同分組或狀態(tài)之間的關系。

頁面右側的3個圖形方向相同，有利于展示信息并讓用戶了解它們的功能。

應用位置：導航/下拉、折疊條目、工具提示、產品滑塊、滾動條。

焦點

看東西時，我們的視線往往會首先關注最突出的元素。理解這種行為有助于我們在設計中創(chuàng)建一個“錨點”，從而引導用戶按照我們設計的場景查看內容。

通過人物插畫將用戶的注意力引導到賬單和人數(shù)等主要信息上。

應用位置：內容、登錄頁、產品頁。

馮·雷斯托夫效應

又稱隔離效應，相對于普通事件或物體，獨特、有特色的事件或物體更容易被人記住。應用此原則的元素通常獨立存在，不需要向用戶導航額外的信息。

中間的升級插畫部分在整個頁面上是獨立存在的。

應用位置：價格表、促銷頁、圖標入口。

更詳細的介紹：

本能反應

根據現(xiàn)實中的用戶行為創(chuàng)建視覺上引人入勝的體驗。例如看幽默類視頻的時候，如果在視頻的高潮伴有笑聲音效，我們也會更容易跟著笑起來。

如果能讓用戶感覺良好和舒適，他們也會更喜歡我們的設計。

應用位置：產品圖、插圖、攝影。

形狀心理學

同顏色一樣，人們的潛意識對不同的形狀也有不同的反應：

圓形、橢圓形：傳達積極的信息，通常與社區(qū)或關系有關；

正方形、三角形：傳達強烈的信息，通常與強度和穩(wěn)定性有關；

垂直線：表示強度或力量。

水平線：表示平靜、相等或安靜。

雙重編碼理論

這個理論解釋了人類需要視覺和語言信息來盡快處理信息。為了最大限度地提高設計的有效性，不應該刪除必要的說明性文字。

大多數(shù)App的底部導航欄都利用圖標與文字相結合的方式讓用戶快速知道功能。

另一個好的設計案例：

并行設計

人眼傾向于看到平行因素比其他因素更相關。這一原理經常用來對同一頁面中的兩組不同內容進行分類。

使用垂直排列的卡片代表相同的問題，水平排列的卡片代表不同的問題。

公共區(qū)域

這一原理類似于格式塔原則中的相似原則。公共區(qū)域通過使用線、形狀或顏色劃分的方式創(chuàng)建。

如果頁面需要用戶不斷滾動來查看內容，可以考慮使用顏色來更清楚地劃分這些內容，而不僅僅是使用間距。

掃描模式

根據 NNGroup、UXPin 等設計團體的研究，最常用的兩種掃描模式是“F 型”和“Z 型”：

• “F 型”應用最為廣泛，尤其是對于內容豐富的網站。
• “Z 型”用于那些文字信息少，最后需要強調用戶點擊類的網站。

了解如何使用這些模式后，我們就可以有效地選擇布局和安排元素來實現(xiàn)設計目標。

最后

第一印象是最令人難忘的，好的體驗可以在用戶與產品之間建立持久的聯(lián)系。

歡迎關注作者微信公眾號：「Clip設計夾」