你知道那些感覺恰到好處的設(shè)計(jì)嗎？就是那些所有東西看起來都恰到好處，你不用瞇著眼睛看，不用思考，也不用瘋狂點(diǎn)擊就能搞清楚的東西。

這不是魔術(shù)，而是心理學(xué)。

好的 UI 設(shè)計(jì)并非僅僅因?yàn)檫x擇了合適的藍(lán)色調(diào)或使用了漂亮的字體就能夠?qū)崿F(xiàn)。它之所以有效，是因?yàn)樗私馊藗兊南敕āＫ麄冏⒁獾搅耸裁矗雎粤耸裁矗约笆裁磿?huì)讓他們偷偷地咒罵。

讓我們分析一下優(yōu)秀 UI 設(shè)計(jì)背后的心理學(xué)，這樣您就可以打造讓用戶感覺自己像天才的體驗(yàn)，即使他們還沒有喝咖啡。

1. 你的大腦是個(gè)懶惰的天才（認(rèn)知負(fù)荷）

將顯示縮放圖像

事實(shí)是這樣的：人類的大腦非常強(qiáng)大，但也非常懶惰。

我們一直在努力節(jié)省腦力。正因如此，優(yōu)秀的 UI 設(shè)計(jì)不會(huì)讓人們思考過多。如果你的應(yīng)用感覺像個(gè)謎題，用戶就會(huì)離開，甚至可能在離開時(shí)留下措辭激烈的評(píng)論。

設(shè)計(jì)不是為了炫耀你有多聰明，而是為了讓用戶感覺自己很聰明。

不會(huì)讓人頭腦發(fā)熱的技巧：

• 使用清晰的層次結(jié)構(gòu)。每個(gè)屏幕一個(gè)主要操作通常就足夠了。
• 避免不必要的選擇。這不是智力競賽節(jié)目。

隱藏復(fù)雜性，直到需要它為止。（是的，“高級(jí)設(shè)置”，我說的就是你。）

2.“選擇太多”問題（希克定律）

希克定律很簡單：你給某人的選擇越多，他們做出選擇的時(shí)間就越長。他們就越想哭，或者放棄。

你有沒有看到過一個(gè)下拉菜單，上面列著 30 個(gè)國家，按字母順序排列，以“阿富汗”開頭？沒錯(cuò)，就是這樣。

設(shè)計(jì)的意義在于減少?zèng)Q策。設(shè)計(jì)的目的并非剝奪自由，而是讓路徑清晰可見。

像極簡主義者一樣設(shè)計(jì)：

• 將大任務(wù)分解成更小的步驟。
• 突出顯示最常見或推薦的選項(xiàng)。
• 使用默認(rèn)值，因?yàn)榇蠖鄶?shù)用戶無論如何都會(huì)使用它們。

3. 目標(biāo)應(yīng)該容易實(shí)現(xiàn)（菲茨定律）

將顯示縮放圖像

微型按鈕。超薄的文本鏈接。可關(guān)閉的模態(tài)框，帶有一個(gè)比果蠅還小的“X”。

我們都詛咒過它們。菲茨定律說，點(diǎn)擊某個(gè)按鈕所需的時(shí)間取決于兩個(gè)因素：按鈕的大小和距離。所以，如果你想讓人們真正點(diǎn)擊你的按鈕，就讓它可點(diǎn)擊。

實(shí)用想法：

• 增加觸控目標(biāo)，尤其是在移動(dòng)設(shè)備上。沒有人能像忍者一樣精準(zhǔn)地控制手指。
• 將主要按鈕放置在容易觸及的位置。考慮拇指區(qū)域。
• 避免操作間隔過長。誤觸會(huì)導(dǎo)致新的“憤怒點(diǎn)擊”。

4. 視覺層次：用戶流失的原因

將顯示縮放圖像

用戶不會(huì)從上到下閱讀屏幕內(nèi)容。他們?yōu)g覽的速度就像松鼠在喝濃縮咖啡一樣。

所以你需要像指揮家指揮管弦樂隊(duì)一樣控制視覺層次。利用大小、顏色、粗細(xì)和間距來傳達(dá)“嘿，先看這里！”

如果沒有等級(jí)制度，一切都會(huì)爭奪關(guān)注。當(dāng)一切都在大聲喧嘩時(shí)，沒有人會(huì)被聽到。

嘗試一下：

• 粗體表示主要操作。較不重要的內(nèi)容則使用較輕的字體。
• 像工作一樣使用空白。（因?yàn)樗褪悄愕墓ぷ鳌＃?/li>
• 想要快速測試一下嗎？瞇起眼睛看看你的設(shè)計(jì)。哪里最突出？那就是你的焦點(diǎn)。

5. 熟悉勝過創(chuàng)造力

你可能想成為按鈕界的畢加索，或者重新設(shè)計(jì)導(dǎo)航欄。但你猜怎么著？人們喜歡他們熟悉的東西。

登錄表單中郵箱和密碼的順序總是一致的，這是有原因的。這不是懶惰，而是熟悉。

該怎么辦：

• 堅(jiān)持使用關(guān)鍵流程的標(biāo)準(zhǔn) UI 模式：注冊(cè)、結(jié)帳、導(dǎo)航。
• 將創(chuàng)意內(nèi)容保存為微交互或視覺效果，而不是基本布局。
• 記住：熟悉=值得信賴。奇怪=可疑。

6. 將屬于同一類的事物歸為一類（格式塔心理學(xué)）

將顯示縮放圖像

格式塔心理學(xué)本質(zhì)上是我們大腦快速解讀現(xiàn)實(shí)的方式。我們不會(huì)將事物視為孤立的元素。我們會(huì)根據(jù)接近性、相似性、一致性和連續(xù)性對(duì)它們進(jìn)行分組。

如果你的 UI 不遵循這些模式，用戶就會(huì)感到困惑。而困惑是導(dǎo)致你關(guān)閉標(biāo)簽頁的捷徑。

例子：

• 外觀相同的按鈕應(yīng)該具有類似的功能。不要欺騙用戶。
• 將表單中的相關(guān)字段放在一起。不要像復(fù)活節(jié)彩蛋一樣將“姓名”和“電子郵件”散落一地。
• 對(duì)齊內(nèi)容。未對(duì)齊的內(nèi)容會(huì)引發(fā)潛意識(shí)的不適。

7. 情感>邏輯

秘訣在于：人們會(huì)憑情感做出決定，然后用邏輯來證明其合理性。這同樣適用于用戶界面。

想一想。你是否曾經(jīng)僅僅因?yàn)楦杏X良好而點(diǎn)擊過某個(gè)按鈕？那種令人滿意的懸停效果？那種微妙的動(dòng)畫效果？

設(shè)計(jì)可以激發(fā)喜悅，也可以激發(fā)沮喪。

如何為感受而設(shè)計(jì)：

• 使用個(gè)性化的微文案。一點(diǎn)點(diǎn)魅力就能帶來很大的效果。
• 動(dòng)畫應(yīng)該像黃油一樣，而不是邁克爾貝的電影。
• 創(chuàng)造愉悅的時(shí)刻：令人愉快的成功信息、五彩紙屑動(dòng)畫或令人滿意的加載狀態(tài)。

8. 人們記住高峰和結(jié)束（峰終定律）

將顯示縮放圖像

用戶不會(huì)記住旅程的每一秒。他們只會(huì)記住最激動(dòng)人心的時(shí)刻和旅程的結(jié)局。這就是峰終定律。

因此，如果您的結(jié)賬流程無縫，但確認(rèn)屏幕看起來像 404 頁面，猜猜他們會(huì)記住什么？

設(shè)計(jì)提示：

• 找到你的“巔峰時(shí)刻”。讓它們變得令人愉悅。
• 千萬不要忽視結(jié)尾。確認(rèn)信息、感謝頁面、注冊(cè)成功頁面，它們比你想象的更重要。

9. 真正的用戶體驗(yàn)惡棍：不確定性

如果用戶不確定按鈕的功能，他們就會(huì)猶豫。猶豫會(huì)扼殺用戶行動(dòng)的動(dòng)力。

最好的用戶界面能消除疑慮。它會(huì)說：“嘿，點(diǎn)擊這里。很安全。你不會(huì)意外刪除所有內(nèi)容。”

使用這些武器：

• 清晰的標(biāo)簽：“保存草稿”比“提交”更好。
• 微文本：一行小文字就能消除恐懼。
• 反饋：顯示剛剛發(fā)生的事情以及接下來發(fā)生的事情。

10. 讓你保持理智的工具

將顯示縮放圖像

說實(shí)話，有時(shí)候你確實(shí)沒時(shí)間從頭開始構(gòu)建每個(gè)流程。這時(shí)，像Made in Figma這樣的插件就能幫上忙了。

它允許您直接使用預(yù)先構(gòu)建的 UI 流程和遵循最佳實(shí)踐的組件。無需猜測，無需費(fèi)力尋找靈感。就像擁有一位話不多的設(shè)計(jì)副駕駛。

當(dāng)我想快速行動(dòng)而不犧牲質(zhì)量時(shí)，或者當(dāng)我的大腦在咖啡因的煙霧中運(yùn)轉(zhuǎn)并且我只是需要一個(gè)可靠的布局來即興發(fā)揮時(shí)，我會(huì)經(jīng)常使用它。

額外獎(jiǎng)勵(lì)：如果您仍在閱讀……

首先謝謝。看來你對(duì)好的設(shè)計(jì)很認(rèn)真。

其次，這是心理學(xué)驅(qū)動(dòng)的用戶界面的備忘單：

• 減少噪音（越少越好）
• 引導(dǎo)眼睛
• 尊重默認(rèn)設(shè)置和模式
• 設(shè)計(jì)要注重情感，而非僅僅考慮邏輯
• 幫助用戶感受到掌控
• 有疑問的時(shí)候？別耍小聰明，要清楚