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