讓用戶一見鐘情的10條心理學規(guī)則

2022-5-29    純純

一個好的設(shè)計不僅是解決正確的問題,還要為用戶創(chuàng)造積極的情感。一個實體產(chǎn)品可以通過人類的 5 種感官來創(chuàng)造情感;但對于數(shù)字產(chǎn)品來說,因為它只是在設(shè)備屏幕上進行干巴巴的交互,然后提供服務,所以很難創(chuàng)造良好的情感體驗。

 

所以數(shù)字產(chǎn)品設(shè)計師需要深入了解每一種情感,以及能夠創(chuàng)造情感的心理學原理,才能更好地設(shè)計相關(guān)產(chǎn)品。

 

唐·諾曼認為,可以從三個方面對用戶的情感體驗進行設(shè)計:本能層、行為層和反思層。

 


  • 本能層:"用戶想要的感覺"

  • 行為層:"用戶想做什么"

  • 反思層:"用戶想成為什么樣子"

 

在第一個層面,設(shè)計將通過用戶的視覺和與產(chǎn)品的互動產(chǎn)生情感。因此,這也是 UI 設(shè)計師大顯身手的地方。除了審美和基本的平面設(shè)計原則外,以下是我目前在設(shè)計中運用的心理學規(guī)則。

 


1. 格式塔原則

  • 相似性原理

人的眼睛往往會把相似的元素連接成一組,大腦會認為這些元素有相同的作用。

 


因此,在設(shè)計具有相同功能或內(nèi)容的界面元素時,要使其一致。


應用場景:導航、畫廊、卡片、橫幅、內(nèi)容、分頁。

 

  • 連續(xù)性法則

人的眼睛將排列在連續(xù)體中的元素視為一組。這個規(guī)律與對稱性和相似性頗有關(guān)系。通過在一個序列上創(chuàng)造相似和重復的元素,我們可以將用戶往我們想要的方向驅(qū)動。這使得閱讀信息更加連貫和清晰。

 


輪播圖就是應用了這一規(guī)則的設(shè)計,為用戶提供了還有信息可看的提示。

 

應用:菜單/子菜單、列表、產(chǎn)品排列、輪播圖、進度指示器。

 

  • 封閉法則

當看一個不完整的圖像時,大腦會依靠以前的經(jīng)驗,把剩下的填滿。

 


這是圖形或 Logo 設(shè)計中常用的規(guī)則。但在產(chǎn)品設(shè)計中,我們可以將其用于圖標和加載。

 

應用:圖標、加載、數(shù)據(jù)可視化。

 

  • 鄰近法則

這是 UI 設(shè)計中必不可少的規(guī)則,因為人的眼睛會把任何相鄰的元素當作一組。

 

 

在設(shè)計的時候,我非常注意利用間距將元素組合在一起。我通常用大的空間來分隔大的內(nèi)容群,然后用小的空間來分隔大的內(nèi)容群中的小的內(nèi)容群。

 

應用:導航、圖庫、卡片、橫幅、內(nèi)容、分頁。

 

  • 對稱法則

我們的大腦喜歡看到對稱和平衡的事物。這是在所有設(shè)計領(lǐng)域中最常用也是最安全的法則。它幫助我們創(chuàng)造一種穩(wěn)定和秩序感。


 

在設(shè)計需要簡單、視覺化、和諧的產(chǎn)品時,我經(jīng)常會將對稱性應用到其中。當觀眾需要專注于重要的東西時,這也有助于他們感到更舒適。缺點是,如果過度使用,產(chǎn)品會變得枯燥單調(diào)。通常,我應用于頭部或行為召喚按鈕,以更好引導用戶產(chǎn)生行動。

 

應用:圖庫、焦點圖、重要內(nèi)容、產(chǎn)品展示、列表、導航

 

  • 主體/背景原則

這個規(guī)律是關(guān)于人的眼睛傾向于注意到脫離背景的事物,或是被框為一組的內(nèi)容。

 

 

我用這個規(guī)則來引導用戶的視線去預覽重要信息。通常是在卡片設(shè)計中,用淡淡的下影在背景上方鋪設(shè)一層。此外,構(gòu)圖組也是應用這個規(guī)則的一種方式。

 

應用范圍:卡片、內(nèi)容、列表、服務、摘要。


  • 共同命運法則

在同一方向上移動的元素被認為比靜止的元素或在另一個方向上移動的元素更有關(guān)系。這一規(guī)則的應用有助于我們建立群體和狀態(tài)之間的關(guān)系。


 

我在做動畫的時候,經(jīng)常比較明確地使用這個規(guī)則。但是,我們也可以應用到更多方面。

 

應用:導航/下拉菜單、折疊菜單、折疊面板、工具提示、滾動條、視差滾動和指標

 


2. 焦點

當我們看某樣東西的時候,我們的眼睛往往會先關(guān)注最突出的元素。理解這種行為將幫助我們在設(shè)計中創(chuàng)建一個 "錨點",從而推動用戶按照我們的方案去瀏覽內(nèi)容。

 

 

應用:內(nèi)容頁、落地頁、價格頁、產(chǎn)品頁、焦點圖。

 


3. 馮·雷斯托夫效應

又稱隔離效應,它表明人們傾向于注意和記住與其他部分不同的部分。這個規(guī)則很容易與焦點法則相混淆。不同的一點是,應用這個規(guī)則的元素往往是獨立存在的,并沒有額外的功能和信息。

 

 

應用:定價表、促銷橫幅、權(quán)益升級。

 

 

4. 本能反應

基于真實世界的用戶體驗,創(chuàng)造出具有視覺吸引力的體驗。就像我們看一個視頻時,每一個高潮笑話都有笑聲的配音,我們就更容易笑。如果我們的設(shè)計能讓用戶感覺很好很舒服,用戶就會喜歡我們的設(shè)計。

 

 

應用:產(chǎn)品形象、插圖、攝影。

 


5. 色彩心理學

有許多研究表明,顏色對我們的潛意識有特別的影響。不同性別、不同宗教、不同文化的人對色彩的看法也不同。

 

另外,我們也不要忘了早期被廣泛使用的系統(tǒng)的顏色:

  • 紅色:錯誤

  • 綠色:成功

  • 藍色: 進行中

  • 黃色:警告。

 


6. 形狀心理學

 

 

和顏色一樣,人的潛意識對不同的形狀也有不同的反應。比如:

  • 圓形 、橢圓形:傳遞一個積極的信息,通常與社區(qū)或關(guān)系有關(guān)。

  • 正方形和三角形:傳遞強烈的信息,通常與力量和穩(wěn)定有關(guān)。

  • 豎線:代表強度、力量或侵略性。

  • 水平線:代表平靜、平等或安靜。

 

 

7. 雙重編碼理論

這個理論解釋了人類需要視覺和語言信息來盡快處理信息。而且,人類是視覺動物,我們的大腦處理圖像的速度是文字的 6 萬倍。而為了達到設(shè)計的最大效果,我們不應該刪除說明性文字。

 

 

一個明顯的例子就是應用程序的導航欄。大多數(shù)新的應用程序或具有復雜功能的應用程序都是用圖標和標簽來設(shè)計的。

 

另一個例子。

 

 


8. 并行設(shè)計

相較于其他元素,人的眼睛往往會更容易注意到平行的元素。我經(jīng)常用這個原理將同一屏幕內(nèi)的兩組不同內(nèi)容進行分類。最容易看到的相關(guān)案例可能是 Facebook 的消息界面,“故事”并排而消息水平平行排列。

 

 


9. 共同區(qū)域

這個原理就像《格式塔原理》中的相似性法則一樣,但它并不以相同為終點。共同區(qū)域是通過我們使用劃分的方式,通過線條、形狀或顏色來創(chuàng)建的。

 

 

如果一個屏幕需要用戶大量滾動來查看內(nèi)容,我們應該有一些方法來將其劃分得更清晰,而不是僅僅使用間距。


應用:列表、信息流。

 


10、掃描模式

根據(jù) NNGroup、UXPin 等機構(gòu)或團體的各種研究,最常用的兩種掃描模式是 "F 模式"和 "Z 模式"。

 

其中,"F 模式"的應用最為廣泛,尤其是對于內(nèi)容較多的網(wǎng)站。

 

“Z 模式”用于那些不太注重文字的網(wǎng)站,往往在最后強調(diào)行為召喚按鈕。

 

當我們了解了這些模式的使用方法后,我們就可以有效地選擇布局和安排元素來實現(xiàn)我們的設(shè)計目標。

 

第一印象是最難忘的,積極的體驗可以在用戶和產(chǎn)品之間建立長久的關(guān)系。如果我們能讓用戶在第一時間愛上設(shè)計,我們就為我們的產(chǎn)品創(chuàng)造了相當好的優(yōu)勢。

 

作者:知群

藍藍設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍藍設(shè)計sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務、

UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司




分享本文至:

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://sillybuy.com

存檔