2025-8-4 杰睿
你有沒有過這樣的經(jīng)歷：瀏覽網(wǎng)站時(shí)，甚至沒有完全集中注意力，突然之間，大腦還沒來得及反應(yīng)，你就點(diǎn)擊了某個(gè)內(nèi)容？這并非巧合。這是設(shè)計(jì)心理學(xué)在引導(dǎo)你點(diǎn)擊。
可點(diǎn)擊的UI不僅僅是讓按鈕看起來像按鈕。它關(guān)乎理解你的大腦如何響應(yīng)視覺提示、層次結(jié)構(gòu)和交互模式。如果你曾經(jīng)好奇為什么有些UI讓人上癮，而有些卻像個(gè)殘酷的玩笑，那么這篇文章正適合你。
讓我們深入研究可點(diǎn)擊界面背后的心理學(xué)，了解設(shè)計(jì)師每天在不知不覺中打破或掌握的實(shí)際規(guī)律和原則。
在設(shè)計(jì)語(yǔ)言中，“可供性”指的是物體的外觀如何暗示如何使用它。旋鈕看起來可以旋轉(zhuǎn)。按鈕看起來可以按下。漢堡菜單看起來……就像隱藏了真正的內(nèi)容。
重要性：用戶不應(yīng)該猜測(cè)什么是可交互的。它越像可以觸摸、拖動(dòng)或點(diǎn)擊的東西，你的大腦就越會(huì)說：“沒錯(cuò)，這就是一個(gè)東西。”
設(shè)計(jì)師是如何搞砸的：扁平化設(shè)計(jì)太過了。按鈕開始看起來像普通的文字，突然之間沒人知道該點(diǎn)擊什么了。如果它看起來像個(gè)標(biāo)簽，但實(shí)際上是一個(gè)行動(dòng)號(hào)召，那么你就陷入了可用性的“犯罪現(xiàn)場(chǎng)”。
改進(jìn)：使用視覺提示；陰影、對(duì)比度、懸停狀態(tài)，使其清晰易懂。出于對(duì) UI 的熱愛，除非你是為間諜設(shè)計(jì)，否則不要將鏈接隱藏在模糊的圖標(biāo)中。
希克定律說，你給某人的選擇越多，他們做決定的時(shí)間就越長(zhǎng)，甚至可能放棄整個(gè)選擇。
重要性：想讓用戶點(diǎn)擊那個(gè)實(shí)用的 CTA 按鈕嗎？別把它埋沒在由 17 個(gè)同樣醒目的按鈕組成的菜單中。簡(jiǎn)化。引導(dǎo)。精簡(jiǎn)。
設(shè)計(jì)師是如何搞砸這一點(diǎn)的： “讓我們給用戶自由。”翻譯過來就是：“讓我們讓他們恐慌。”
改進(jìn)：提供清晰的選擇。優(yōu)先考慮重要事項(xiàng)。采用漸進(jìn)式披露；現(xiàn)在顯示較少，以后顯示更多。
菲茨定律的基本意思是，點(diǎn)擊目標(biāo)的時(shí)間取決于目標(biāo)的大小和距離。簡(jiǎn)而言之：大按鈕更容易點(diǎn)擊，而且不需要人們橫跨整個(gè)歐洲才能找到它們。
重要性：在巨型頁(yè)面的右上角放置微小鏈接？恭喜，你成功創(chuàng)建了一款令人困惑的游戲的用戶體驗(yàn)版本。
設(shè)計(jì)師們是如何搞砸這一點(diǎn)的：把“下一步”按鈕放在離“后退”按鈕12英里遠(yuǎn)的地方。或者把主要的行動(dòng)號(hào)召 (CTA) 藏在頁(yè)腳的某個(gè)地方，靠近版權(quán)符號(hào)。
改進(jìn)：按鈕要足夠大，方便點(diǎn)擊，尤其是在移動(dòng)設(shè)備上。將相關(guān)操作分組。確保重要信息觸手可及。
雅各布·尼爾森定律提醒我們，用戶期望你的網(wǎng)站能夠像他們之前使用過的其他網(wǎng)站一樣。熟悉并非偷懶的設(shè)計(jì)，而是良好的用戶體驗(yàn)。
重要性：如果您的“添加到購(gòu)物車”按鈕形狀像駱駝，人們就會(huì)跳轉(zhuǎn)。
設(shè)計(jì)師是如何搞砸的：試圖重新發(fā)明輪子。沒錯(cuò)，你的團(tuán)隊(duì)想要與眾不同，但用戶不想每次訪問網(wǎng)站都要學(xué)習(xí)一門新的 UI 語(yǔ)言。
改進(jìn)：使用常見模式。只有當(dāng)回報(bào)值得時(shí)才打破預(yù)期。你不是在設(shè)計(jì)藝術(shù)，而是在設(shè)計(jì)功能。
人們對(duì)未完成的任務(wù)記憶比已完成的任務(wù)更深刻。這就是為什么如果你把衣服疊成一半，你會(huì)覺得很奇怪。
為什么重要：顯示進(jìn)度條、步驟或清單的用戶界面可以幫助用戶繼續(xù)前進(jìn)。“您已完成 80%”就像是激勵(lì)用戶投入的誘餌。
設(shè)計(jì)師是如何搞砸的：隱藏進(jìn)度。不顯示反饋。讓用戶猜測(cè)還剩多少。
使其變得更好：使用步驟、加載器、進(jìn)度環(huán)以及任何可以告訴用戶“嘿，你已經(jīng)接近成功”的東西。
人們會(huì)記住那些看起來與眾不同的東西。清單上那個(gè)奇怪的項(xiàng)目？它就是那個(gè)能留下深刻印象的。
重要性：想讓用戶點(diǎn)擊你的主要操作嗎？讓它在視覺上引人注目。顏色、大小、間距，都應(yīng)該傳達(dá)出“這就是重點(diǎn)”的信息。
設(shè)計(jì)師是如何搞砸的：把所有東西都做得大膽、明亮、龐大。如果所有東西都太吵鬧，就什么也聽不到了。
改進(jìn)：選擇一件事情來突出。利用顏色對(duì)比來突出重點(diǎn)。但要有所選擇，只有重要的事情才能得到關(guān)注。
并非所有細(xì)節(jié)都會(huì)被記住。人們大多會(huì)回憶起體驗(yàn)的高潮以及它是如何結(jié)束的。
重要性：順暢的結(jié)賬流程很棒，但如果最終確認(rèn)頁(yè)面看起來像 2004 年的錯(cuò)誤消息，那么用戶就會(huì)記住它。
設(shè)計(jì)師是如何搞砸這一點(diǎn)的：雖然流程很順暢，但最后卻功虧一簣。或者在用戶即將完成操作時(shí)引入了阻力。
讓體驗(yàn)更佳：結(jié)尾要有力度。讓最終的互動(dòng)令人愉悅。一點(diǎn)動(dòng)畫、一條貼心的提示，甚至一個(gè)微妙的聲音，都能留下美好的回憶。
如果你的用戶界面感覺像數(shù)學(xué)考試，用戶就會(huì)消失。保持簡(jiǎn)潔，消除不必要的摩擦，不要讓短期記憶超負(fù)荷。
僅僅因?yàn)槟?/span>可以在選項(xiàng)卡內(nèi)的模式中添加下拉菜單并不意味著您應(yīng)該這樣做。
UI 中的心理學(xué)并非空談。你可以將其融入到你的工作流程中。一個(gè)好的工具會(huì)很有幫助，尤其是如果你每天都在 Figma 上工作的話。
我一直在使用MadeinFigma，它是預(yù)先構(gòu)建的組件和流程的集合，已經(jīng)考慮了希克定律、馮·雷斯托夫定律，甚至是傳統(tǒng)的邏輯。
這就像在設(shè)計(jì)時(shí)肩上扛著一位小心理學(xué)家，但沒那么恐怖。
蘭亭妙微(www.tuitetiyu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國(guó)內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長(zhǎng)，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.tuitetiyu.cn