在 UI 設(shè)計(jì)從功能驅(qū)動(dòng)轉(zhuǎn)向體驗(yàn)驅(qū)動(dòng)的當(dāng)下，情感化設(shè)計(jì)早已成為打造優(yōu)質(zhì)產(chǎn)品體驗(yàn)的核心要素。冰冷的界面與功能，唯有注入情感的溫度，才能讓用戶(hù)產(chǎn)生共鳴、建立情感連接，進(jìn)而提升產(chǎn)品的用戶(hù)粘性與品牌好感度。蘭亭妙微設(shè)計(jì)深耕 UI 設(shè)計(jì)領(lǐng)域，深知情感化設(shè)計(jì)對(duì)新手設(shè)計(jì)師的入門(mén)難度，本次特整理一份簡(jiǎn)明易懂的情感化 UI 設(shè)計(jì)指南，從核心設(shè)計(jì)思路到落地技巧，為新手設(shè)計(jì)師梳理清晰的設(shè)計(jì)方向，助力快速掌握情感化設(shè)計(jì)的核心邏輯。

核心原理

產(chǎn)品落地技巧

1. Location（位置）：圍繞用戶(hù)位置組織信息

• 地圖 APP 優(yōu)先加載用戶(hù)當(dāng)前位置的道路、地標(biāo)、周邊商戶(hù)，位置變化時(shí)實(shí)時(shí)更新信息；
• 外賣(mài) / 生鮮 APP 按 “距離由近到遠(yuǎn)” 展示商戶(hù)，讓用戶(hù)快速找到周邊可配送的商家；
• 游戲（如絕地求生）隨用戶(hù)位置變化，加載周邊的建筑、道具、敵人信息。

2. Alphabet（字母）：按字母順序組織信息

• 通訊錄按姓氏拼音首字母排序，支持字母索引，快速定位聯(lián)系人；
• 詞典、題庫(kù) APP 按字母 / 拼音排序，方便用戶(hù)查找內(nèi)容；
• 電商 APP 的品牌分類(lèi)，按字母順序排列，提升篩選效率。

3. Time（時(shí)間）：按時(shí)間維度組織信息

• 朋友圈、微博按 “發(fā)布時(shí)間從新到舊” 展示內(nèi)容；
• 資訊 APP 分 “最新、今日、本周” 板塊，讓用戶(hù)按時(shí)間獲取信息；
• 電商 APP 的訂單頁(yè)面，按 “下單時(shí)間從新到舊” 排序，方便用戶(hù)查找近期訂單。

4. Category（類(lèi)別）：按屬性分類(lèi)組織信息

• 音樂(lè) APP 按 “曲風(fēng)（流行、搖滾、民謠）、歌手、專(zhuān)輯” 分類(lèi)；
• 電商 APP 按 “商品品類(lèi)（服飾、食品、數(shù)碼）、功能（熱銷(xiāo)、新品、優(yōu)惠）” 分類(lèi)；
• 手機(jī)桌面的 APP 文件夾，按 “社交、辦公、娛樂(lè)” 分類(lèi)。

5. Hierarchy（視覺(jué)層級(jí)）：按重要性劃分視覺(jué)層級(jí)

• 電商 APP 的商品頁(yè)面，核心信息（商品名稱(chēng)、價(jià)格）用大號(hào)粗體，次要信息（產(chǎn)地、規(guī)格）用小號(hào)常規(guī)字體；
• 首頁(yè)金剛區(qū)，將高頻功能（首頁(yè)、消息、我的）用更醒目的圖標(biāo) / 顏色突出，低頻功能弱化展示；
• 詳情頁(yè)的標(biāo)題用大字號(hào) + 強(qiáng)對(duì)比色，正文用常規(guī)字號(hào) + 淺色系，讓用戶(hù)快速抓住重點(diǎn)。

關(guān)鍵總結(jié)

四、稟賦效應(yīng)：讓用戶(hù) “珍惜” 你的產(chǎn)品，提升留存與轉(zhuǎn)化

核心定義

核心原理

產(chǎn)品落地技巧

1. 賦予用戶(hù) “專(zhuān)屬價(jià)值”，強(qiáng)化擁有感

• 學(xué)習(xí) APP 將學(xué)習(xí)數(shù)據(jù)生成個(gè)性化報(bào)告，支持一鍵分享，讓用戶(hù)覺(jué)得 “這份成果是獨(dú)屬于我的”；
• 旅游 APP 記錄用戶(hù)的旅游足跡，生成 “我的旅行地圖”，激發(fā)用戶(hù)的珍惜感和分享欲；
• 電商 APP 為用戶(hù)生成 “專(zhuān)屬會(huì)員標(biāo)識(shí)”“定制化推薦頁(yè)面”，強(qiáng)化專(zhuān)屬感。

2. 提供免費(fèi)試用 / 體驗(yàn)，誘導(dǎo)稟賦效應(yīng)

• 視頻 / 音樂(lè) APP 為新用戶(hù)提供 7 天免費(fèi) VIP，到期后用戶(hù)會(huì)因?yàn)?“失去高清畫(huà)質(zhì) / 無(wú)損音樂(lè)” 而選擇付費(fèi)；
• 辦公 APP 提供 30 天免費(fèi)高級(jí)功能，讓用戶(hù)習(xí)慣后，不愿回到基礎(chǔ)版；
• 電商 APP 為新用戶(hù)發(fā)放 “專(zhuān)屬優(yōu)惠券”，讓用戶(hù)覺(jué)得 “擁有了優(yōu)惠，不用就虧了”。

3. 增加個(gè)性化設(shè)置，讓用戶(hù) “參與產(chǎn)品打造”

• 瀏覽器 / APP 支持換膚、換背景、調(diào)整布局，讓用戶(hù)按自己的喜好定制產(chǎn)品；
• 筆記 APP 支持自定義筆記本封面、字體、顏色，讓用戶(hù)覺(jué)得 “這是我的專(zhuān)屬筆記”；
• 社交 APP 支持自定義頭像、昵稱(chēng)、個(gè)性簽名，強(qiáng)化用戶(hù)的擁有感。

4. 利用 “損失厭惡”，提升用戶(hù)粘性

• 簽到 APP 提示 “已連續(xù)簽到 5 天，中斷將重置進(jìn)度，失去 100 積分”；
• 會(huì)員 APP 提示 “您的 VIP 還有 3 天到期，到期后將失去免費(fèi)包郵、專(zhuān)屬折扣等權(quán)益”；
• 打卡 APP 提示 “今日未打卡，將失去本月打卡勛章的領(lǐng)取資格”。

關(guān)鍵總結(jié)

五、干擾效應(yīng)：減少信息干擾，讓用戶(hù)專(zhuān)注核心操作

核心定義

核心原理

產(chǎn)品落地技巧

1. 簡(jiǎn)化視覺(jué)設(shè)計(jì)，避免 “過(guò)度裝飾”

• 金剛區(qū)圖標(biāo)避免使用過(guò)于復(fù)雜的實(shí)物圖 / 彩色漸變，優(yōu)先用簡(jiǎn)約的線性圖標(biāo) + 清晰的文字，讓用戶(hù)一眼識(shí)別；
• 頁(yè)面避免過(guò)多的色彩、動(dòng)效，核心操作按鈕（如確認(rèn)、支付、提交）用強(qiáng)對(duì)比色突出，次要元素用低飽和度色彩；
• 生鮮 APP 的分類(lèi)圖標(biāo)，避免用復(fù)雜的商品實(shí)物圖，用簡(jiǎn)約的圖標(biāo)（如蘋(píng)果代表水果、青菜代表蔬菜）即可。

2. 劃分信息層級(jí)，避免 “信息堆積”

• 美團(tuán)首頁(yè)金剛區(qū)，將高頻功能（美食、外賣(mài)、超市便利）用大圖標(biāo)突出，低頻功能（旅游、美甲、洗車(chē)）用小圖標(biāo)弱化，避免信息雜亂；
• 個(gè)人中心頁(yè)面，將核心功能（我的訂單、我的資產(chǎn)、我的收藏）放在頂部，次要功能（設(shè)置、幫助、關(guān)于）放在底部，按使用頻率排序；
• 詳情頁(yè)將核心操作（購(gòu)買(mǎi)、加入購(gòu)物車(chē)）放在固定位置，次要信息（商品參數(shù)、評(píng)價(jià)）放在下方，避免干擾核心操作。

3. 按用戶(hù)目標(biāo)，組織頁(yè)面功能

• 刷題 APP 的答題頁(yè)面，僅保留 “題目、選項(xiàng)、上一題、下一題”，移除廣告、推薦、消息等無(wú)關(guān)信息，讓用戶(hù)專(zhuān)注答題；
• 支付頁(yè)面，僅保留 “支付金額、支付方式、確認(rèn)支付”，避免添加其他功能（如充值、領(lǐng)券），防止用戶(hù)分心；
• 閱讀 APP 的閱讀頁(yè)面，支持 “沉浸式模式”，隱藏導(dǎo)航、廣告、消息，讓用戶(hù)專(zhuān)注閱讀。

4. 功能分類(lèi)聚合，避免 “分散擺放”

• 個(gè)人中心將 “設(shè)置、幫助、反饋、關(guān)于” 聚合在 “更多功能” 里，避免零散擺放；
• 電商 APP 將 “收藏、足跡、購(gòu)物車(chē)” 聚合在 “我的資產(chǎn)” 板塊，按 “用戶(hù)資產(chǎn)” 的邏輯組織；
• 辦公 APP 將 “新建、保存、分享、打印” 聚合在操作欄，按 “文檔操作” 的邏輯組織。

實(shí)戰(zhàn)案例

關(guān)鍵總結(jié)

全文核心總結(jié)

• 用五架帽理論組織信息，讓用戶(hù) “好找信息”；
• 用干擾效應(yīng)簡(jiǎn)化設(shè)計(jì)，讓用戶(hù) “專(zhuān)注操作”；
• 用蔡加尼克效應(yīng)引導(dǎo)參與，讓用戶(hù) “愿意完成”；
• 用峰終定律打磨體驗(yàn)，讓用戶(hù) “記住產(chǎn)品”；
• 用稟賦效應(yīng)強(qiáng)化擁有，讓用戶(hù) “珍惜產(chǎn)品”。

閱讀導(dǎo)航

1. 峰終定律：抓準(zhǔn)體驗(yàn)關(guān)鍵節(jié)點(diǎn)，讓用戶(hù)記住你的產(chǎn)品
2. 蔡加尼克效應(yīng)：利用未完成心理，提升用戶(hù)參與度
3. 五架帽理論（LATCH 原則）：高效組織信息，降低用戶(hù)認(rèn)知成本
4. 稟賦效應(yīng)：讓用戶(hù)對(duì)產(chǎn)品產(chǎn)生 “歸屬感”，提升留存與轉(zhuǎn)化
5. 干擾效應(yīng)：減少信息干擾，讓用戶(hù)專(zhuān)注核心操作

一、峰終定律：體驗(yàn)的好壞，由兩個(gè)關(guān)鍵節(jié)點(diǎn)決定

核心定義

核心原理

產(chǎn)品落地技巧

1. 強(qiáng)化正向峰值：打造用戶(hù)的 “愉悅瞬間”

盲盒 APP 購(gòu)買(mǎi)成功后，彈出動(dòng)態(tài)收藏卡，放大用戶(hù)的獲得感；

• 網(wǎng)易云音樂(lè)直播間為新用戶(hù)彈出「新人見(jiàn)面禮」，用視覺(jué)設(shè)計(jì)拉滿(mǎn)氛圍；
• 功能操作完成后（如打卡、繳費(fèi)、答題），用情感化彈窗給予肯定，如 “任務(wù)完成！你也太厲害了吧～”。

2. 降低負(fù)面峰值：緩解用戶(hù)的 “焦慮時(shí)刻”

• 網(wǎng)絡(luò)斷開(kāi)時(shí)，用趣味動(dòng)效 + 溫柔提示 “網(wǎng)絡(luò)開(kāi)小差啦，點(diǎn)擊重試吧” 代替冰冷的報(bào)錯(cuò)碼；
• 抽獎(jiǎng)未中時(shí)，彈出安慰式彈窗 “沒(méi)關(guān)系，下次好運(yùn) buff 加持～”，并附帶小額優(yōu)惠券。

3. 打磨終值體驗(yàn)：給用戶(hù)一個(gè) “完美收尾”

• 刷題 APP 在用戶(hù)完成整套習(xí)題后，展示直觀的數(shù)據(jù)分析頁(yè)（正確率、能力提升、排名），并附帶鼓勵(lì)語(yǔ)；
• 外賣(mài) APP 下單成功后，清晰展示配送進(jìn)度 +“下單成功！吃貨專(zhuān)屬福利已到賬”，讓收尾更愉悅；
• 課程 APP 完成學(xué)習(xí)后，生成學(xué)習(xí)證書(shū) / 打卡海報(bào)，支持一鍵分享，放大用戶(hù)的成就感。

實(shí)戰(zhàn)案例

關(guān)鍵總結(jié)

二、蔡加尼克效應(yīng)：未完成的事，用戶(hù)會(huì)記得更牢

核心定義

核心原理

產(chǎn)品落地技巧

1. 用進(jìn)度提示，引導(dǎo)用戶(hù)持續(xù)完成

• 學(xué)習(xí) APP 的簽到頁(yè)面，展示 “已連續(xù)簽到 3 天，再簽 4 天領(lǐng) 50 積分”，用未完成的獎(jiǎng)勵(lì)吸引用戶(hù)持續(xù)打卡；
• 健身 APP 的課程頁(yè)面，標(biāo)注 “本課程共 8 節(jié)，已學(xué) 3 節(jié)”，激發(fā)用戶(hù)的完成欲。

2. 拆分復(fù)雜任務(wù)，減少用戶(hù)心理負(fù)擔(dān)

• 新用戶(hù)注冊(cè)時(shí)，將 “手機(jī)號(hào)驗(yàn)證→設(shè)置密碼→完善資料” 拆分為 3 個(gè)頁(yè)面，標(biāo)注 “1/3 驗(yàn)證手機(jī)號(hào)”，讓用戶(hù)覺(jué)得 “任務(wù)很簡(jiǎn)單，很快就能完成”；
• 信息認(rèn)證時(shí)，按 “身份信息→銀行卡信息→人臉驗(yàn)證” 拆分，中途退出后再次進(jìn)入可直接定位到未完成步驟。

3. 用待辦提醒，強(qiáng)化 “未完成” 的心理暗示

• 日歷 APP 的代辦功能，未完成的事項(xiàng)會(huì)持續(xù)高亮，讓用戶(hù)產(chǎn)生 “必須做完” 的心理；
• 辦公 APP 的待辦列表，用小紅點(diǎn)標(biāo)注未處理的消息，引導(dǎo)用戶(hù)及時(shí)操作；
• 電商 APP 的購(gòu)物車(chē)，保留用戶(hù)未付款的商品，并用 “庫(kù)存僅剩 3 件” 強(qiáng)化完成沖動(dòng)。

實(shí)戰(zhàn)案例

關(guān)鍵總結(jié)

語(yǔ)言是人類(lèi)文明的載體，是交流思想、傳遞情感的復(fù)雜系統(tǒng)，其豐富的媒介形式為文創(chuàng)設(shè)計(jì)打開(kāi)了全新的創(chuàng)作維度。從自然語(yǔ)言的口語(yǔ)、文字、手語(yǔ)，到人工語(yǔ)言的編程符號(hào)、數(shù)學(xué)公式，再到涵蓋聽(tīng)覺(jué)、視覺(jué)、觸覺(jué)等的非語(yǔ)言形式，每一種語(yǔ)言媒介都蘊(yùn)含著獨(dú)特的文化內(nèi)涵與設(shè)計(jì)價(jià)值。當(dāng)語(yǔ)言媒介與新文創(chuàng)設(shè)計(jì)碰撞融合，不僅讓文化傳播有了更多元的表達(dá)，更讓文創(chuàng)產(chǎn)品兼具實(shí)用性、藝術(shù)性與文化性，成為連接傳統(tǒng)與現(xiàn)代、文化與生活的橋梁。本文將從語(yǔ)言媒介的分類(lèi)出發(fā)，結(jié)合經(jīng)典設(shè)計(jì)案例，全面解析語(yǔ)言媒介如何成為新文創(chuàng)設(shè)計(jì)的靈感源泉。

讓用戶(hù)在使用產(chǎn)品時(shí)不產(chǎn)生混淆、可快速獲取所需信息，是產(chǎn)品設(shè)計(jì)時(shí)應(yīng)當(dāng)考慮的重要層面，而這需要團(tuán)隊(duì)在設(shè)計(jì)時(shí)預(yù)先做好方案，去掉無(wú)關(guān)事物，清晰地呈現(xiàn)信息，提升產(chǎn)品的易用性與用戶(hù)體驗(yàn)。蘭亭妙微 UI 設(shè)計(jì)公司始終以 “精簡(jiǎn)信息、提升信噪比” 為設(shè)計(jì)核心，本篇文章里，作者結(jié)合實(shí)戰(zhàn)經(jīng)驗(yàn)，介紹了提高信噪比的設(shè)計(jì)技巧，一起來(lái)看一下。

一、選用通用認(rèn)可圖標(biāo)，規(guī)避用戶(hù)認(rèn)知混淆

二、巧用親密性原則，明確元素關(guān)聯(lián)關(guān)系

三、4px 基線網(wǎng)格 + 8px 網(wǎng)格，打造和諧垂直視覺(jué)節(jié)奏

四、降低標(biāo)題行高，提升視覺(jué)緊湊度與閱讀體驗(yàn)

五、色輪類(lèi)似配色，快速打造和諧配色方案

六、最大化設(shè)計(jì)信噪比，讓核心信息更突出

作為專(zhuān)注于體驗(yàn)設(shè)計(jì)的創(chuàng)新團(tuán)隊(duì)，蘭亭妙微UI設(shè)計(jì)公司認(rèn)為：一個(gè)好的設(shè)計(jì)，不僅要解決問(wèn)題，更要撫慰情緒。我們從“不確定感”“壓力”和“關(guān)懷”三種典型情緒出發(fā)，重新拆解航班狀態(tài)頁(yè)的設(shè)計(jì)邏輯，讓它不再是冰冷的工具，而是成為用戶(hù)旅程中善解人意的“情緒伙伴

你有沒(méi)有匆忙趕著去機(jī)場(chǎng)的經(jīng)歷？是否也在航班延誤時(shí)感到過(guò)焦慮？ 這些情緒我們都曾體驗(yàn)過(guò)——但它們真的被運(yùn)用到設(shè)計(jì)中了嗎？

這一次，我們從“情緒”出發(fā)，重新設(shè)計(jì)了航班狀態(tài)頁(yè)，分享 3 個(gè)由用戶(hù)情緒驅(qū)動(dòng)的設(shè)計(jì)決策。

01.情緒：不確定感

想象一下這個(gè)場(chǎng)景： 用戶(hù)可能正坐在趕往機(jī)場(chǎng)的火車(chē)上。一邊盯著時(shí)間，一邊核對(duì)路線，腦子里不斷計(jì)算著：“我來(lái)得及嗎？萬(wàn)一航班有變化怎么辦？”

這是一種非常典型的不確定時(shí)刻。 不是恐慌，而是那種微妙卻持續(xù)的緊張——用戶(hù)此刻只想確認(rèn)一件事：一切是否仍在按計(jì)劃進(jìn)行。

我們的設(shè)計(jì)回應(yīng)在這個(gè)場(chǎng)景中，用戶(hù)最需要的，其實(shí)就是航班狀態(tài)信息本身的確定性反饋。 而最常見(jiàn)、也最容易引發(fā)誤解的狀態(tài)之一，就是航班“延誤”。

但延誤并不等于災(zāi)難——航班依然會(huì)飛，有時(shí)甚至反而給用戶(hù)多出了一點(diǎn)趕往機(jī)場(chǎng)的時(shí)間；起飛延誤，也不一定意味著落地延誤。

而在舊版本中，“延誤”與“取消”使用了同一種紅色。這種表達(dá)，會(huì)在第一秒就把“延誤”解讀為一種危險(xiǎn)信號(hào)，放大了用戶(hù)原本就存在的不確定感。

因此在改版中，我們將“延誤”的顏色調(diào)整為橙色：

• 與“正常起飛”的綠色保持清晰區(qū)分
• 在視覺(jué)上依然足夠顯眼
• 但在情緒感知上更加克制
• 也更符合“延誤”本身的真實(shí)嚴(yán)重程度

一個(gè)顏色的變化，背后對(duì)應(yīng)的其實(shí)是一種“風(fēng)險(xiǎn)等級(jí)可視化分級(jí)設(shè)計(jì)”，而不是簡(jiǎn)單的視覺(jué)改動(dòng)——讓信息 既足夠被看見(jiàn)，又不會(huì)過(guò)度制造恐慌。

也正是在這種細(xì)微的情緒調(diào)節(jié)中，用戶(hù)的不確定感被悄悄降低了。

02.情緒：壓力

再換一個(gè)場(chǎng)景：用戶(hù)已經(jīng)站在值機(jī)柜臺(tái)前，一只手拿著護(hù)照，另一只手扶著行李，也許身旁還有一個(gè)小孩正拉著他們的衣角。外部刺激密集、節(jié)奏迅速，這是一種短暫但強(qiáng)烈的壓力時(shí)刻。

在這種狀態(tài)下，用戶(hù)最迫切的需求，往往不是“瀏覽”； 而是馬上確認(rèn)關(guān)鍵信息是否齊全——PNR 號(hào)、行李額度、值機(jī)所需的任何關(guān)鍵信息。 這不是一個(gè)可以讓用戶(hù)慢慢尋找入口的時(shí)刻。

他們只想快速、明確、毫不猶豫地進(jìn)入「我的預(yù)訂」。

我們的設(shè)計(jì)回應(yīng)

航班狀態(tài)頁(yè)，往往是用戶(hù)走到柜臺(tái)前最后查看一次的頁(yè)面。  因此在這個(gè)高壓場(chǎng)景中，“我的預(yù)訂”必須是第一時(shí)間被看到的入口。

在這次改版中，我們做了三件小調(diào)整：

1. 讓入口更加明顯
2. 增加圖標(biāo)，方便用戶(hù)快速理解
3. 文案從泛泛的“查看預(yù)訂（View bookings）”，調(diào)整為更貼近當(dāng)下心智模型的“我的預(yù)訂 My booking”

這些變化看起來(lái)都不大，但它們背后遵循的是同一個(gè)原則：在高壓力狀態(tài)下，為用戶(hù)提供「最短決策路徑（Shortest Decision Path）」。

當(dāng)用戶(hù)無(wú)需思考“我要點(diǎn)哪里”，而是第一眼就知道“這就是我要找的”，壓力，便在這一瞬間被有效削減了。

03.情緒：關(guān)懷（Care）

在旅程的后半段，節(jié)奏逐漸慢了下來(lái)。

用戶(hù)已經(jīng)通過(guò)安檢，買(mǎi)了一杯咖啡，坐下等待登機(jī)。

在這個(gè)相對(duì)放松的時(shí)刻，他們偶爾會(huì)再次打開(kāi)航班狀態(tài)頁(yè)，然后看到一個(gè)按鈕：“分享航班狀態(tài)”。

也正是在這一瞬間，用戶(hù)的情緒，從“關(guān)注自己”，悄然轉(zhuǎn)向了“想到別人”。

他們會(huì)想到來(lái)接機(jī)的朋友或家人——

是否順利、是否會(huì)在機(jī)場(chǎng)焦急地反復(fù)確認(rèn)時(shí)間。 于是，一個(gè)非常真實(shí)、也非常普遍的念頭出現(xiàn)了：“我想讓對(duì)方更方便一點(diǎn)。”

我們的設(shè)計(jì)回應(yīng)

為了讓這種“關(guān)懷”更容易被表達(dá)，我們?cè)谶@次改版中優(yōu)化了“航班分享”的入口： 讓用戶(hù)可以一鍵將航班信息發(fā)送給接機(jī)的人， 對(duì)方無(wú)需再向用戶(hù)反復(fù)確認(rèn)，便能直接跟蹤航班的實(shí)時(shí)動(dòng)態(tài)。

這不是一個(gè)效率型功能，而是一個(gè)典型的“情緒外溢（Emotional Spillover）”場(chǎng)景——用戶(hù)所感知到的安心，被自然地傳遞給了另一端的人。

設(shè)計(jì)在這一刻所做的，只是順勢(shì)托住了這種善意：讓用戶(hù)，幫別人更輕松一點(diǎn)。

結(jié)語(yǔ)：像方法派演員一樣設(shè)計(jì)

如果要總結(jié)這一切，我想說(shuō)：設(shè)計(jì)不僅是在“做界面”，而是在“進(jìn)入用戶(hù)的情緒”。

這有點(diǎn)像演員的“方法派表演（Method Acting）”——他們不是站在外面詮釋角色，而是走進(jìn)角色，成為角色本身。

當(dāng)你也帶著這樣的方式進(jìn)入用戶(hù)的情緒場(chǎng)景時(shí)，你會(huì)發(fā)現(xiàn)：

很多設(shè)計(jì)決策不再是反復(fù)權(quán)衡的“選擇題”，而會(huì)變成一種順理成章、甚至“非這樣不可”的結(jié)果。

因?yàn)榇藭r(shí)你已經(jīng)不再是站在屏幕這一側(cè)為用戶(hù)設(shè)計(jì)，你是在用戶(hù)的狀態(tài)之中，替他們做出判斷。

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

蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）m.hengshangtqd.cn 是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢(xún)電話：01063334945。

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

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

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

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

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

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

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

2.“選擇過(guò)多” 問(wèn)題（?？硕桑?/h2>

?？硕珊芎?jiǎn)單：你給別人的選擇越多，他們做決定花的時(shí)間就越長(zhǎng)，而且越想哭，或者直接放棄。

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

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

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

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

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

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

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

實(shí)用建議如下：

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

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

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

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

要是沒(méi)有視覺(jué)層級(jí)，所有元素都在爭(zhēng)搶用戶(hù)的注意力。可要是所有元素都在大喊大叫，那就什么都聽(tīng)不見(jiàn)了。

不妨試試這些方法：

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

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

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

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

具體做法如下：

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

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

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

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

舉例如下：

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

7.情感大于邏輯

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

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

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

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

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

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

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

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

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

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

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

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

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

可以利用以下方法：

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

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

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

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

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

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

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

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

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

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

蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）m.hengshangtqd.cn 是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶(hù)體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢(xún)、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開(kāi)發(fā)服務(wù)，咨詢(xún)電話：01063334945。

你是不是也常遇到這種情況：拿到手的界面原型平平無(wú)奇，滿(mǎn)屏都是基礎(chǔ)文字和按鈕，想優(yōu)化加設(shè)計(jì)感卻無(wú)從下手，改來(lái)改去要么還是單調(diào)乏味，要么畫(huà)蛇添足影響體驗(yàn)，最后只能煩躁吐槽：“這破班，不上也罷！”

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