你有沒有過這樣的經(jīng)歷：瀏覽網(wǎng)站時，甚至沒有完全集中注意力，突然之間，大腦還沒來得及反應(yīng)，你就點擊了某個內(nèi)容？這并非巧合。這是設(shè)計心理學(xué)在引導(dǎo)你點擊。

可點擊的UI不僅僅是讓按鈕看起來像按鈕。它關(guān)乎理解你的大腦如何響應(yīng)視覺提示、層次結(jié)構(gòu)和交互模式。如果你曾經(jīng)好奇為什么有些UI讓人上癮，而有些卻像個殘酷的玩笑，那么這篇文章正適合你。

讓我們深入研究可點擊界面背后的心理學(xué)，了解設(shè)計師每天在不知不覺中打破或掌握的實際規(guī)律和原則。

1. 可供性：讓它看起來可點擊

將顯示縮放圖像

在設(shè)計語言中，“可供性”指的是物體的外觀如何暗示如何使用它。旋鈕看起來可以旋轉(zhuǎn)。按鈕看起來可以按下。漢堡菜單看起來……就像隱藏了真正的內(nèi)容。

重要性：用戶不應(yīng)該猜測什么是可交互的。它越像可以觸摸、拖動或點擊的東西，你的大腦就越會說：“沒錯，這就是一個東西。”

設(shè)計師是如何搞砸的：扁平化設(shè)計太過了。按鈕開始看起來像普通的文字，突然之間沒人知道該點擊什么了。如果它看起來像個標(biāo)簽，但實際上是一個行動號召，那么你就陷入了可用性的“犯罪現(xiàn)場”。

改進(jìn)：使用視覺提示；陰影、對比度、懸停狀態(tài)，使其清晰易懂。出于對 UI 的熱愛，除非你是為間諜設(shè)計，否則不要將鏈接隱藏在模糊的圖標(biāo)中。

2. ?？硕桑哼x擇太多=沒有選擇

將顯示縮放圖像

希克定律說，你給某人的選擇越多，他們做決定的時間就越長，甚至可能放棄整個選擇。

重要性：想讓用戶點擊那個實用的 CTA 按鈕嗎？別把它埋沒在由 17 個同樣醒目的按鈕組成的菜單中。簡化。引導(dǎo)。精簡。

設(shè)計師是如何搞砸這一點的： “讓我們給用戶自由。”翻譯過來就是：“讓我們讓他們恐慌。”

改進(jìn)：提供清晰的選擇。優(yōu)先考慮重要事項。采用漸進(jìn)式披露；現(xiàn)在顯示較少，以后顯示更多。

3. 菲茨定律：距離 + 尺寸 = 可點擊性

將顯示縮放圖像

菲茨定律的基本意思是，點擊目標(biāo)的時間取決于目標(biāo)的大小和距離。簡而言之：大按鈕更容易點擊，而且不需要人們橫跨整個歐洲才能找到它們。

重要性：在巨型頁面的右上角放置微小鏈接？恭喜，你成功創(chuàng)建了一款令人困惑的游戲的用戶體驗版本。

設(shè)計師們是如何搞砸這一點的：把“下一步”按鈕放在離“后退”按鈕12英里遠(yuǎn)的地方。或者把主要的行動號召 (CTA) 藏在頁腳的某個地方，靠近版權(quán)符號。

改進(jìn)：按鈕要足夠大，方便點擊，尤其是在移動設(shè)備上。將相關(guān)操作分組。確保重要信息觸手可及。

4.雅各布定律：使網(wǎng)站與其他網(wǎng)站相似

將顯示縮放圖像

雅各布·尼爾森定律提醒我們，用戶期望你的網(wǎng)站能夠像他們之前使用過的其他網(wǎng)站一樣。熟悉并非偷懶的設(shè)計，而是良好的用戶體驗。

重要性：如果您的“添加到購物車”按鈕形狀像駱駝，人們就會跳轉(zhuǎn)。

設(shè)計師是如何搞砸的：試圖重新發(fā)明輪子。沒錯，你的團(tuán)隊想要與眾不同，但用戶不想每次訪問網(wǎng)站都要學(xué)習(xí)一門新的 UI 語言。

改進(jìn)：使用常見模式。只有當(dāng)回報值得時才打破預(yù)期。你不是在設(shè)計藝術(shù)，而是在設(shè)計功能。

5.蔡加尼克效應(yīng)：未完成的任務(wù)讓我們煩惱

將顯示縮放圖像

人們對未完成的任務(wù)記憶比已完成的任務(wù)更深刻。這就是為什么如果你把衣服疊成一半，你會覺得很奇怪。

為什么重要：顯示進(jìn)度條、步驟或清單的用戶界面可以幫助用戶繼續(xù)前進(jìn)。“您已完成 80%”就像是激勵用戶投入的誘餌。

設(shè)計師是如何搞砸的：隱藏進(jìn)度。不顯示反饋。讓用戶猜測還剩多少。

使其變得更好：使用步驟、加載器、進(jìn)度環(huán)以及任何可以告訴用戶“嘿，你已經(jīng)接近成功”的東西。

6. 馮·雷斯托夫效應(yīng)：讓它脫穎而出

將顯示縮放圖像

人們會記住那些看起來與眾不同的東西。清單上那個奇怪的項目？它就是那個能留下深刻印象的。

重要性：想讓用戶點擊你的主要操作嗎？讓它在視覺上引人注目。顏色、大小、間距，都應(yīng)該傳達(dá)出“這就是重點”的信息。

設(shè)計師是如何搞砸的：把所有東西都做得大膽、明亮、龐大。如果所有東西都太吵鬧，就什么也聽不到了。

改進(jìn)：選擇一件事情來突出。利用顏色對比來突出重點。但要有所選擇，只有重要的事情才能得到關(guān)注。

7. 峰終定律：人們記住兩件事

將顯示縮放圖像

并非所有細(xì)節(jié)都會被記住。人們大多會回憶起體驗的高潮以及它是如何結(jié)束的。

重要性：順暢的結(jié)賬流程很棒，但如果最終確認(rèn)頁面看起來像 2004 年的錯誤消息，那么用戶就會記住它。

設(shè)計師是如何搞砸這一點的：雖然流程很順暢，但最后卻功虧一簣?；蛘咴谟脩艏磳⑼瓿刹僮鲿r引入了阻力。

讓體驗更佳：結(jié)尾要有力度。讓最終的互動令人愉悅。一點動畫、一條貼心的提示，甚至一個微妙的聲音，都能留下美好的回憶。

認(rèn)知負(fù)荷是真實存在的

如果你的用戶界面感覺像數(shù)學(xué)考試，用戶就會消失。保持簡潔，消除不必要的摩擦，不要讓短期記憶超負(fù)荷。

僅僅因為您可以在選項卡內(nèi)的模式中添加下拉菜單并不意味著您應(yīng)該這樣做。

使用可以幫助您應(yīng)用此

UI 中的心理學(xué)并非空談。你可以將其融入到你的工作流程中。一個好的工具會很有幫助，尤其是如果你每天都在 Figma 上工作的話。

我一直在使用MadeinFigma，它是預(yù)先構(gòu)建的組件和流程的集合，已經(jīng)考慮了?？硕伞ⅠT·雷斯托夫定律，甚至是傳統(tǒng)的邏輯。

將顯示縮放圖像

這就像在設(shè)計時肩上扛著一位小心理學(xué)家，但沒那么恐怖。

蘭亭妙微(m.dzxscac.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計，有興趣請加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan。