設(shè)計(jì)的感性與理性之爭(zhēng)，似乎從未有過標(biāo)準(zhǔn)答案。有人將設(shè)計(jì)視作靈感迸發(fā)的藝術(shù)創(chuàng)作，重感性表達(dá)；有人將其當(dāng)作解決問題的工程實(shí)踐，尊理性決策；也有人籠統(tǒng)說 “要平衡二者”，卻始終說不清該如何平衡。事實(shí)上，這場(chǎng)爭(zhēng)論的核心誤區(qū)，在于混淆了設(shè)計(jì)的決策過程與表達(dá)結(jié)果兩個(gè)維度。設(shè)計(jì)從來不是非此即彼的選擇，而是一場(chǎng)理性為根、感性為枝的生長(zhǎng) —— 理性決定設(shè)計(jì)的方向與可行性，讓設(shè)計(jì)不偏離解決問題的本質(zhì)；感性賦予設(shè)計(jì)的溫度與感染力，讓設(shè)計(jì)超越功能成為與用戶共鳴的載體。二者并非對(duì)立或并列，而是層層嵌套的先后關(guān)系：先以理性錨定目標(biāo)，再以感性點(diǎn)亮價(jià)值。

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

關(guān)鍵在于：人類的大腦很強(qiáng)大，但也超級(jí) “偷懶” 。

我們一直都在努力節(jié)省腦力。這就是為什么優(yōu)秀的 UI 設(shè)計(jì)不會(huì)讓人們進(jìn)行沒必要的思考。要是你的應(yīng)用程序用起來像解謎游戲，用戶會(huì)直接離開，說不定走之前還會(huì)留下一篇言辭激烈的差評(píng)。

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

這些技巧能讓大腦 “不宕機(jī)” ：

• 清晰呈現(xiàn)層級(jí)關(guān)系。通常，每個(gè)界面只設(shè)置一個(gè)主要操作就夠了。
• 別搞沒必要的選擇。這又不是智力競(jìng)猜節(jié)目。

把復(fù)雜內(nèi)容藏起來，等需要的時(shí)候再展示。（對(duì)，說的就是你 “高級(jí)設(shè)置” 。 ）

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

希克定律很簡(jiǎn)單：你給別人的選擇越多，他們做決定花的時(shí)間就越長(zhǎng)，而且越想哭，或者直接放棄。

你有沒有盯著一個(gè)按字母順序排列，從 “阿富汗” 開始羅列了 30 個(gè)國家的下拉菜單發(fā)懵？就是這種情況。

設(shè)計(jì)要做的是減少?zèng)Q策難度。不是剝奪用戶選擇自由，而是讓選擇路徑一目了然。

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

• 把大任務(wù)拆分成小步驟。
• 突出最常見或推薦的選項(xiàng)。
• 使用默認(rèn)設(shè)置，反正大多數(shù)用戶都會(huì)選它。

3.目標(biāo)應(yīng)易于點(diǎn)擊（菲茨定律）

小得可憐的按鈕、細(xì)得離譜的文本鏈接，還有關(guān)閉按鈕 “X” 比果蠅還小的可關(guān)閉彈窗。

我們都為此吐槽過。菲茨定律表明，點(diǎn)擊某物所需的時(shí)間取決于兩個(gè)因素：目標(biāo)的大小和距離。所以，要是你想讓用戶真的去點(diǎn)擊按鈕，那就得讓它便于點(diǎn)擊。

實(shí)用建議如下：

• 增大觸摸目標(biāo)，在移動(dòng)端尤其如此。畢竟沒人能像忍者那樣手指精準(zhǔn)。
• 把主要按鈕放在易于觸及的位置，想想大拇指操作的區(qū)域。
• 避免將操作按鈕堆疊得太近。誤觸現(xiàn)在可是新的“抓狂亂點(diǎn)”源頭。

4.視覺層級(jí)：為何你的用戶會(huì)迷失

用戶看屏幕可不是從上到下逐行閱讀，他們?yōu)g覽的樣子就像喝了濃縮咖啡的松鼠，這兒瞅瞅那兒看看。

所以，你得像指揮家引領(lǐng)管弦樂隊(duì)那樣把控視覺層級(jí)。通過尺寸、顏色、粗細(xì)和間距來告訴用戶：“嘿，先看這兒！”

要是沒有視覺層級(jí)，所有元素都在爭(zhēng)搶用戶的注意力。可要是所有元素都在大喊大叫，那就什么都聽不見了。

不妨試試這些方法：

• 主要操作使用粗體，不太重要的內(nèi)容用細(xì)一些的字體。
• 像對(duì)待本職工作一樣利用好留白（因?yàn)檫@就是你的工作）。
• 想快速檢驗(yàn)效果？瞇著眼看你的設(shè)計(jì)，最先映入眼簾的就是焦點(diǎn)。

5.熟悉感勝過創(chuàng)意

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

登錄表單總是按固定順序設(shè)置郵箱和密碼輸入框，這并非偷懶，而是因?yàn)榇蠹覍?duì)此熟悉。

具體做法如下：

• 關(guān)鍵流程，如注冊(cè)、結(jié)賬、導(dǎo)航等，沿用標(biāo)準(zhǔn)的UI模式。
• 把創(chuàng)意用在微交互或視覺效果上，別用在基礎(chǔ)布局上。
• 記住：熟悉意味著可靠，怪異則會(huì)引發(fā)懷疑。

6.物以類聚（格式塔心理學(xué)）

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

如果你的用戶界面（UI）不遵循這些模式，用戶就會(huì)感到困惑。而困惑會(huì)讓用戶迅速關(guān)閉頁面。

舉例如下：

• 外觀相似的按鈕應(yīng)該執(zhí)行類似的操作，別誤導(dǎo)用戶。
• 在表單中，將相關(guān)字段放在一起，別把“姓名”和“郵箱”像彩蛋一樣隨意分散。
• 對(duì)齊內(nèi)容，未對(duì)齊的元素會(huì)在潛意識(shí)層面引發(fā)混亂。

7.情感大于邏輯

告訴你個(gè)秘密：人們做決策時(shí)憑的是情感，之后才從邏輯上找理由。這一點(diǎn)在 UI 設(shè)計(jì)中同樣適用。

想想看，你有沒有因?yàn)槟硞€(gè)按鈕給人的感覺很好就點(diǎn)了它？比如那令人愉悅的懸停效果，或是那巧妙的動(dòng)畫。

設(shè)計(jì)能引發(fā)愉悅感，也可能帶來挫敗感。

如何從情感角度進(jìn)行設(shè)計(jì)：

• 使用有個(gè)性的微文案，一點(diǎn)點(diǎn)魅力就能產(chǎn)生很大效果。
• 動(dòng)畫要流暢得像黃油般順滑，而不是像邁克爾?貝電影那樣夸張。
• 打造令人愉悅的瞬間：比如一條歡快的成功提示信息、一個(gè)五彩紙屑動(dòng)畫，或是一個(gè)讓人滿意的加載狀態(tài)。

8.人們記住的是峰值與結(jié)尾（峰終定律）

用戶不會(huì)記得使用過程中的每一秒，他們記住的是最強(qiáng)烈的瞬間和結(jié)尾，這就是峰終定律。

所以，如果你的結(jié)賬流程十分順暢，但確認(rèn)頁面卻像 404 錯(cuò)誤頁一樣糟糕，猜猜他們會(huì)記住什么？

設(shè)計(jì)小貼士：

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

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

要是用戶不確定某個(gè)按鈕的功能，就會(huì)猶豫不決。而這種猶豫會(huì)破壞操作的連貫性。

最出色的用戶界面（UI）能消除疑慮。它們仿佛在告訴用戶：“嘿，點(diǎn)這兒，放心，不會(huì)誤刪所有東西。”

可以利用以下方法：

• 清晰的標(biāo)簽：“保存草稿”就比“提交”更明晰。
• 微文案：短短一行字就能打消用戶的顧慮。
• 反饋：及時(shí)告知用戶剛剛發(fā)生了什么，以及接下來會(huì)怎樣。

10.助你保持思路清晰的工具

說實(shí)話，有時(shí)候你確實(shí)沒時(shí)間從頭構(gòu)建每一個(gè)流程。這時(shí)候，像 “Made in Figma” 這樣的插件就能救急。

它能讓你直接使用預(yù)先構(gòu)建好的 UI 流程和組件，這些都遵循了最佳實(shí)踐。無需猜測(cè)，也不用到處找靈感。就好比有個(gè)不嘮叨的設(shè)計(jì)副駕在幫你

當(dāng)我想在不犧牲質(zhì)量的前提下快速推進(jìn)工作，或者大腦靠咖啡因強(qiáng)撐，只需要一個(gè)可靠的布局來開展工作時(shí)，我就會(huì)經(jīng)常用它。

額外福利：要是你還在看……

首先，感謝你。顯然你對(duì)優(yōu)秀設(shè)計(jì)非常上心。

其次，這里有一份基于心理學(xué)的 UI 設(shè)計(jì)小抄：

• 去除干擾（少即是多）
• 引導(dǎo)視覺
• 遵循默認(rèn)設(shè)置和模式
• 兼顧情感與邏輯進(jìn)行設(shè)計(jì)
• 讓用戶有掌控感
• 要是拿不準(zhǔn)怎么做？別耍小聰明，保持清晰就

轉(zhuǎn)載：人人都是產(chǎn)品經(jīng)理

蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）www.dzxscac.cn 是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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。

•  

  溝通方式：

  感性溝通——傳達(dá)“我能讓你變得很有品位”的概念，向他們兜售一個(gè)關(guān)于“理想之家”的筑夢(mèng)工具；
•  

  設(shè)計(jì)目標(biāo)：

  希望能第一時(shí)間抓住用戶眼球，讓用戶感知到這是一家高級(jí)的公司；
•  

  風(fēng)格調(diào)研：

  在本地用戶投票調(diào)研中拿到了不俗的票數(shù)，說明成功地引發(fā)了用戶“共鳴”；
•  

  差異化：

  在普遍SaaS網(wǎng)站中，風(fēng)格比較獨(dú)特鮮明；
•  

  總結(jié)：

  通過大面積的留白、克制的和風(fēng)配色、以及嚴(yán)謹(jǐn)?shù)木W(wǎng)格系統(tǒng)和銳利的直角，去傳遞產(chǎn)品的專業(yè)與品位，旨在先與用戶建立情感共鳴。

   

   

•  

  溝通方式：

  理性溝通——傳達(dá)“我們很厲害”的概念，告訴用戶我們?cè)谫u一個(gè)“解決方案”；
•  

  信賴感強(qiáng)：

  藍(lán)色主色搭配黃色的輔助色，配合線條插畫，是日本SaaS網(wǎng)站建立用戶信任的“標(biāo)配”元素；
•  

  風(fēng)格清晰：

  明確的SaaS風(fēng)格，降低用戶認(rèn)知成本，同樣在本地用戶投票調(diào)研中拿到了不俗的票數(shù)；
•  

  總結(jié)：

  符合日本主流SaaS網(wǎng)站的設(shè)計(jì)范式，開門見山地展示了軟件的核心功能、客戶案例墻、增長(zhǎng)數(shù)據(jù)，通過“理性溝通”，用最快的速度告訴用戶“相信我，我能幫你解決問題”；

一、色彩設(shè)計(jì)心理學(xué)：精準(zhǔn)契合 “穩(wěn)重 + 創(chuàng)新” 的核心需求

二、打破科技色慣例：在同質(zhì)化中實(shí)現(xiàn)差異化突圍

三、數(shù)字場(chǎng)景 “天生百搭色”：適配多場(chǎng)景使用需求

隨著設(shè)計(jì)行業(yè)的蓬勃發(fā)展，產(chǎn)品 UI 的整體水準(zhǔn)持續(xù)提升，但同質(zhì)化現(xiàn)象也愈發(fā)明顯。想要讓產(chǎn)品在同類競(jìng)品中脫穎而出，設(shè)計(jì)師需要在細(xì)節(jié)表達(dá)、功能適配、情感共鳴等維度持續(xù)探索。今天就為大家精選 8 個(gè)極具創(chuàng)意的 UI 設(shè)計(jì)案例，希望能為你的設(shè)計(jì)實(shí)踐帶來新的靈感。

在科技產(chǎn)品主導(dǎo)的當(dāng)下，“用戶體驗(yàn)”“用戶界面” 早已不是行業(yè)黑話，而是決定產(chǎn)品成敗的關(guān)鍵。但很多人仍會(huì)將 UI 設(shè)計(jì)與 UX 設(shè)計(jì)混為一談，認(rèn)為兩者只是名稱不同，實(shí)則它們?nèi)缤a(chǎn)品的 “形” 與 “神”，分工明確卻又密不可分。今天我們就來清晰拆解兩者的區(qū)別、聯(lián)系，以及各自的核心價(jià)值。

對(duì)于深耕平面設(shè)計(jì)領(lǐng)域的創(chuàng)作者而言，轉(zhuǎn)型 UX 設(shè)計(jì)并非從零開始的冒險(xiǎn) —— 你們多年積累的美學(xué)素養(yǎng)、布局思維和問題解決能力，早已是踏入 UX 領(lǐng)域的堅(jiān)實(shí)基礎(chǔ)。隨著用戶體驗(yàn)在產(chǎn)品競(jìng)爭(zhēng)中的權(quán)重日益提升，UX 設(shè)計(jì)師的職業(yè)前景也愈發(fā)廣闊：據(jù) Interaction Design Foundation 數(shù)據(jù)顯示，UX 設(shè)計(jì)師年均薪資約 74,000 美元，遠(yuǎn)超平面設(shè)計(jì)師的 41,000 美元。從專注視覺呈現(xiàn)到兼顧用戶需求與交互邏輯，這場(chǎng)轉(zhuǎn)型需要思維的重塑與技能的拓展。以下 7 個(gè)實(shí)戰(zhàn)指南，將幫你平穩(wěn)跨越邊界，在 UX 設(shè)計(jì)領(lǐng)域站穩(wěn)腳跟。

•  

  當(dāng)前的業(yè)務(wù)是什么樣的
•  

  當(dāng)前業(yè)務(wù)存在的具體缺陷
•  

  構(gòu)思產(chǎn)品的整體框架形態(tài)
•  

  確定產(chǎn)品的具體功能需求

•  

  房間基礎(chǔ)定價(jià)：房間的基底價(jià)格，用于做計(jì)算的基數(shù)
•  

  房?jī)r(jià)當(dāng)前系數(shù)：根據(jù)忙時(shí)和閑時(shí)變更定價(jià)的系數(shù)，比如忙時(shí)是原來的1.5倍，閑時(shí)是原來的0.8倍
•  

  房間當(dāng)前價(jià)格：根據(jù)定價(jià)基數(shù)x 系數(shù)得到的當(dāng)前價(jià)格，是前端展示和付款的具體金額

規(guī)劃完產(chǎn)品地圖后，下一步才進(jìn)入正式的產(chǎn)品原型設(shè)計(jì)過程，將我們對(duì)產(chǎn)品應(yīng)該做成什么樣通過原型線框圖表現(xiàn)出來，只要能讓其他人理解我們的意圖即可。

1.  

   項(xiàng)目分析
2.  

   業(yè)務(wù)分析
3.  

   產(chǎn)品分析
4.  

   體驗(yàn)分析
5.  

   設(shè)計(jì)分析

作者：酸梅干超人
鏈接：https://www.zcool.com.cn/article/ZMTY4MDUwMA==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）www.dzxscac.cn 是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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。

設(shè)計(jì)的本質(zhì)是什么？是冰冷的邏輯推演，還是溫暖的情感共鳴？關(guān)于 “設(shè)計(jì)應(yīng)感性主導(dǎo)” 還是 “理性為王” 的爭(zhēng)論，在設(shè)計(jì)圈從未停歇。有人將設(shè)計(jì)等同于藝術(shù)創(chuàng)作，執(zhí)著于個(gè)人情感的抒發(fā)；也有人將設(shè)計(jì)視為工程任務(wù)，嚴(yán)守邏輯與規(guī)則的邊界。實(shí)則，這場(chǎng)爭(zhēng)論的核心誤區(qū)在于混淆了設(shè)計(jì)的兩個(gè)核心維度 —— 設(shè)計(jì)決策與設(shè)計(jì)表達(dá)。真正成熟的設(shè)計(jì)，從來不是非此即彼的選擇，而是以理性為根基，以感性為羽翼，二者層層嵌套、相輔相成的完整體系。