讓設計方案更具說服力的10個心理學原理
編輯導語:作為一名設計師,在日常工作時除了完成設計需求以外,更要對設計中的情感做研究;很多時候用戶在用產品時對視覺方面會有很多感覺,所以設計師需要合理的運用情感層面的原理進行改變和設計,我們一起來了解一下。
好的設計不僅能解決問題,還能為用戶帶來積極的情感,并通過三個層面產生情感:
- 本能層:用戶想要的感受;
- 行為層:用戶想要做什么;
- 反思層:用戶想要成為誰。
作為設計師除了要掌握基本的設計原則外,還需要對每個層面的情感以及創造情感的心理學原理有更深入的了解。
一、格式塔原則
1. 相似原則
人的眼睛會把具有相似特征的元素當成一個整體,認為這些元素具有相同的作用。
▲?界面中的綠色圖標具有相同的功能,方便用戶快速認知和操作;因此在設計具有相同功能或內容的界面元素時,應該保持一致性。
應用位置:導航、鏈接、按鈕、內容頁。
2. 連續原則
用戶傾向于把連續排列的元素視為一個整體,這條原則與對稱性和相似性密切相關;通過在序列上創建相似且重復的元素,引導用戶的視線方向,使操作更加連貫和清晰。
▲?只露出一部分的卡片會向用戶發出信號,表示滑動可以查看更多的書。
應用位置:菜單和子菜單、列表、產品頁、輪播頁。
3. 封閉原則
當看到不完整的圖像時,我們會依據已有的經驗把不完全封閉的圖像當成一個統一的整體,這是在平面或logo設計中常用到的原則。
▲?盡管頁面右上方的餅圖只顯示了一部分,我們仍然能夠輕松地識別出來。
應用位置:圖標、加載、數據可視化。
4. 鄰近原則
人們會將彼此相鄰的元素視為一組。在設計時要注意使用間距將元素組合在一起;使用較大的間距來分隔大的內容組,再使用較小的間距來分隔大內容組中的小內容組。
▲?頁面上的每個卡片中都含有4組信息,很難快速識別具體的內容。通過調整間距,可以將這些信息清楚地分為2組。
應用位置:導航、卡片、橫幅、列表頁、分頁。
5. 對稱原則
我們喜歡看到對稱且平衡的事物,它是所設計領域中最常用和最安全的原則,有助于營造一種穩定感和秩序感。
▲?對稱的布局不僅增強了用戶的印象,還強調了中間的視頻播放按鈕。
應用位置:產品展示頁、列表、導航以及任何內容豐富的頁面。
6. 共同區域原則
通過信息分組和內容組織,實現內容的組合,有助于提升內容的層次結構和可掃描性。
▲?卡片式UI有助于將信息分組并創建內容的層級深度。
應用位置:卡片、內容、服務、摘要。
7. 共同命運原則
向同一方向移動的元素被認為比靜止或向另一個方向上移動的元素更相關,這個原則有利于建立不同分組或狀態之間的關系。
▲?頁面右側的3個圖形方向相同,有利于展示信息并讓用戶了解它們的功能。
應用位置:導航/下拉、折疊條目、工具提示、產品滑塊、滾動條。
二、焦點
看東西時,我們的視線往往會首先關注最突出的元素。理解這種行為有助于我們在設計中創建一個“錨點”,從而引導用戶按照我們設計的場景查看內容。
▲?通過人物插畫將用戶的注意力引導到賬單和人數等主要信息上。
應用位置:內容、登錄頁、產品頁。
三、馮·雷斯托夫效應
又稱隔離效應,相對于普通事件或物體,獨特、有特色的事件或物體更容易被人記?。粦么嗽瓌t的元素通常獨立存在,不需要向用戶導航額外的信息。
▲?中間的升級插畫部分在整個頁面上是獨立存在的,并且吸引注意力是號召性用語或轉化的關鍵。
應用位置:價格表、促銷頁、圖標入口。
四、本能反應
根據現實中的用戶行為創建視覺上引人入勝的體驗。例如看幽默類視頻的時候,如果在視頻的高潮伴有笑聲音效,我們也會更容易跟著笑起來。
如果能讓用戶感覺良好和舒適,他們也會更喜歡我們的設計。
應用位置:產品圖、插圖、攝影。
五、色彩心理學
許多研究表明,顏色對我們的潛意識有特殊的影響;性別、宗教和文化對顏色的理解也有所不同。
▲?關于顏色的運用,這張色彩心理學海報介紹了豐富的方法。同時也要記住最廣泛使用的系統顏色:紅色代表錯誤;綠色代表成功;藍色代表進行中;黃色代表警告。
六、形狀心理學
▲?同顏色一樣,人們的潛意識對不同的形狀也有不同的反應:
- 圓形、橢圓形:傳達積極的信息,通常與社區或關系有關;
- 正方形、三角形:傳達強烈的信息,通常與強度和穩定性有關;
- 垂直線:表示強度或力量。
- 水平線:表示平靜、相等或安靜。
七、雙重編碼理論
這個理論解釋了人類需要視覺和語言信息來盡快處理信息,為了最大限度地提高設計的有效性,不應該刪除必要的說明性文字。
▲?大多數App的底部導航欄都利用圖標與文字相結合的方式讓用戶快速知道功能。
另一個好的設計案例:
八、并行設計
人眼傾向于看到平行因素比其他因素更相關,這一原理經常用來對同一頁面中的兩組不同內容進行分類。
▲?使用垂直排列的卡片代表相同的問題,水平排列的卡片代表不同的問題。
九、公共區域
這一原理類似于格式塔原則中的相似原則。公共區域通過使用線、形狀或顏色劃分的方式創建。
▲?如果頁面需要用戶不斷滾動來查看內容,可以考慮使用顏色來更清楚地劃分這些內容,而不僅僅是使用間距。
十、掃描模式
根據NNGroup、UXPin等設計團體的研究,最常用的兩種掃描模式是“F型”和“Z型”:
- “F型”應用最為廣泛,尤其是對于內容豐富的網站。
- “Z型”用于那些文字信息少,最后需要強調用戶點擊類的網站。
關于掃描模式更詳細的內容可以查看我之前的文章:如何構建直觀有效的導航結構?
了解如何使用這些模式后,我們就可以有效地選擇布局和安排元素來實現設計目標。
十一、最后
第一印象是最令人難忘的,好的體驗可以在用戶與產品之間建立持久的聯系。
慢慢來比較快,希望對你有幫助~
作者:Clippp,微信公眾號:Clip設計夾。每周精選設計文章,專注分享關于產品、交互、UI視覺上的設計思考。
本文由 @Clippp 翻譯發布于人人都是產品經理,未經作者許可,禁止轉載。
題圖來自Unsplash,基于CC0協議。
不錯
謝謝~
感覺動態的標簽看著會眼花??
哈哈哈會有一點
寫的太棒了 可惜不能領會….
但是動效種類不宜過多,不然就是喧賓奪主了。
是的 動效設計要講究克制和恰當,避免濫用
寫的太棒了 可惜不能領會….
慢慢積累~