112026-3

由 Richard Saul Wurman 提出，又稱LATCH 原則，是基礎(chǔ)的信息組織原則，通過 5 種方式讓信息呈現(xiàn)更高效，提升用戶獲取信息的效率，分別是：Location（位置）、Alphabet（字母）、Time（時(shí)間）、Category（類別）、Hierarchy（視覺層級(jí)）。

核心原理

用戶在產(chǎn)品中獲取信息時(shí)，有固定的認(rèn)知習(xí)慣，違背這個(gè)習(xí)慣會(huì)增加用戶的思考成本。五架帽理論的本質(zhì)，是順應(yīng)用戶的認(rèn)知習(xí)慣，讓信息 “好找、好懂、好記”，這五個(gè)方法可單獨(dú)使用，也可組合使用。

產(chǎn)品落地技巧

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

以用戶的當(dāng)前位置為核心，展示周邊相關(guān)信息，適用于地圖、本地生活、出行類產(chǎn)品，比如：

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

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

適用于數(shù)據(jù)量大、需要精準(zhǔn)查找的場景，是最經(jīng)典的信息組織方式，比如：

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

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

按時(shí)間先后 / 熱度排序，適用于內(nèi)容、社交、資訊類產(chǎn)品，比如：

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

4. Category（類別）：按屬性分類組織信息

將信息按相同屬性 / 功能劃分，是產(chǎn)品設(shè)計(jì)中最常用的方式，適用于幾乎所有產(chǎn)品，比如：

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

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

在信息組織的基礎(chǔ)上，用顏色、大小、間距、字體等視覺手段，突出核心信息，弱化次要信息，比如：

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

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

五架帽理論的 5 個(gè)方法不是孤立的，組合使用效果更佳：比如通訊錄 = 字母 + 視覺層級(jí)，外賣 APP = 位置 + 類別 + 時(shí)間，首頁金剛區(qū) = 類別 + 視覺層級(jí)。核心是讓信息組織符合用戶的認(rèn)知習(xí)慣，降低查找成本。

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

核心定義

由心理學(xué)家 Daniel Kahneman 等提出，指人們對(duì)已經(jīng)擁有的物品 / 服務(wù)，會(huì)高估其價(jià)值，比未擁有時(shí)更珍惜。這一現(xiàn)象源于 “損失厭惡”：失去一件東西的痛苦，遠(yuǎn)大于得到它的快樂。

核心原理

當(dāng)用戶從 “旁觀者” 變成 “擁有者” 時(shí)，對(duì)產(chǎn)品的心理價(jià)值會(huì)大幅提升，會(huì)因?yàn)?“害怕失去” 而更愿意繼續(xù)使用、付費(fèi)甚至分享。比如生日收到的禮物，哪怕原本不喜歡，也會(huì)舍不得賣掉；免費(fèi)試用的會(huì)員，到期后會(huì)因?yàn)?“失去權(quán)益” 而選擇付費(fèi)。

產(chǎn)品落地技巧

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

讓用戶感受到產(chǎn)品 / 服務(wù)是 “為自己量身定制的”，提升心理歸屬感，比如：

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

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

讓用戶先 “擁有” 產(chǎn)品的權(quán)益 / 服務(wù)，再讓他們面對(duì) “失去” 的選擇，比如：

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

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

讓用戶通過個(gè)性化設(shè)置，將產(chǎn)品變成 “自己的樣子”，提升主人翁意識(shí)，比如：

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

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

明確告知用戶 “不繼續(xù)使用會(huì)失去什么”，比告知 “繼續(xù)使用會(huì)得到什么” 更有效，比如：

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

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

利用稟賦效應(yīng)的核心，是讓用戶從 “使用產(chǎn)品” 變成 “擁有產(chǎn)品”，通過專屬價(jià)值、免費(fèi)試用、個(gè)性化設(shè)置，讓用戶產(chǎn)生擁有感，再利用損失厭惡，讓用戶因?yàn)?“害怕失去” 而提升留存和轉(zhuǎn)化。

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

核心定義

指用戶同時(shí)思考 / 處理兩件及以上事情時(shí)，思考效率和操作準(zhǔn)確性會(huì)大幅下降，難以專注核心目標(biāo)。簡單來說：信息越雜亂，用戶越容易分心，操作效率越低。

核心原理

人的大腦像電腦一樣，同一時(shí)間處理的信息有限，當(dāng)多個(gè)無關(guān)信息同時(shí)出現(xiàn)時(shí)，大腦需要花費(fèi)精力篩選信息，從而分散對(duì)核心操作的注意力，甚至導(dǎo)致操作失誤。比如設(shè)計(jì)時(shí)被緊急需求打斷，再回來時(shí)會(huì)忘記原本的思路；產(chǎn)品頁面圖標(biāo)雜亂，用戶會(huì)找不到核心功能。

產(chǎn)品落地技巧

1. 簡化視覺設(shè)計(jì)，避免 “過度裝飾”

視覺設(shè)計(jì)的核心是 “服務(wù)于功能”，而非單純的美觀，避免用復(fù)雜的設(shè)計(jì)增加用戶的認(rèn)知負(fù)擔(dān)，比如：

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

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

將頁面信息按核心功能、次要功能、輔助功能劃分層級(jí)，突出核心，弱化次要，隱藏輔助，比如：

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

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

圍繞用戶的核心操作目標(biāo)設(shè)計(jì)頁面，移除無關(guān)的功能和信息，比如：

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

4. 功能分類聚合，避免 “分散擺放”

將同類功能聚合在一起，避免分散擺放導(dǎo)致用戶查找困難，比如：

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

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

技術(shù)類求職 APP 個(gè)人中心改版：舊版功能雜亂，將 “已購、錢包、收藏、錯(cuò)題、投遞記錄” 等功能分散擺放，且把無關(guān)的 “頭像、昵稱” 放在視覺核心位置，用戶查找 “投遞記錄” 的平均時(shí)間為 15 秒。

新版圍繞用戶核心目標(biāo)（查看投遞進(jìn)度、管理學(xué)習(xí)內(nèi)容） 優(yōu)化：

① 強(qiáng)化個(gè)人屬性（等級(jí)、粉絲），放在頭部吸引用戶；

② 將核心功能（我的簡歷、投遞記錄）放在頂部，按產(chǎn)品價(jià)值排序；

③ 將次要功能（收藏、錯(cuò)題、下載）按 “學(xué)習(xí)管理” 聚合，模塊劃分清晰；

④ 視覺上采用簡約風(fēng)格，弱化無關(guān)元素，核心按鈕用強(qiáng)對(duì)比色突出。

優(yōu)化后，用戶查找核心功能的平均時(shí)間縮短至 3 秒，操作效率提升 80%+。

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

避免干擾效應(yīng)的核心，是“少即是多”：圍繞用戶的核心操作目標(biāo)，簡化視覺設(shè)計(jì)、劃分信息層級(jí)、聚合同類功能，移除無關(guān)的信息和功能，讓用戶不用思考，就能快速找到并完成核心操作。

全文核心總結(jié)

設(shè)計(jì)心理學(xué)的本質(zhì)，是“站在用戶的角度做設(shè)計(jì)”，讀懂用戶的心理，才能讓設(shè)計(jì)觸達(dá)用戶的需求。這 5 個(gè)心理學(xué)法則，各有側(cè)重但可組合使用：

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

不用精通所有心理學(xué)理論，把這 5 個(gè)法則融入日常設(shè)計(jì)的每一個(gè)環(huán)節(jié)，從信息組織、頁面設(shè)計(jì)到流程體驗(yàn)，讓每一個(gè)設(shè)計(jì)決策都有心理邏輯支撐，就能做出既好看又好用的產(chǎn)品設(shè)計(jì)。

轉(zhuǎn)載：防脫發(fā)藥水

蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）www.xintaizi.com 是一家專注而深入的界面設(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。

我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。

評(píng)論(0) 瀏覽(141)

112026-3

UI 必懂的 5 個(gè)設(shè)計(jì)心理學(xué)知識(shí)，蘭亭妙微ui設(shè)計(jì)公司從理論到落地全拆解（上）

清陽設(shè)計(jì)思維

本文從背景定義、核心原理、產(chǎn)品應(yīng)用、實(shí)戰(zhàn)案例四個(gè)維度，拆解 5 個(gè) UI 設(shè)計(jì)中高頻實(shí)用的心理學(xué)法則，不講晦澀理論，只講落地方法，蘭亭妙微ui設(shè)計(jì)公司幫你把心理學(xué)融入日常設(shè)計(jì)工作。

閱讀導(dǎo)航

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

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

核心定義

由 2002 年諾貝爾經(jīng)濟(jì)學(xué)獎(jiǎng)得主丹尼爾?卡尼曼提出，人們對(duì)一段體驗(yàn)的記憶，只由體驗(yàn)的高峰時(shí)刻（正向 / 負(fù)向）和結(jié)束時(shí)刻決定，與體驗(yàn)的總時(shí)長、中間過程的平均感受無關(guān)。簡單來說：好的峰值 + 好的終值，就是好的體驗(yàn)。

核心原理

用戶不會(huì)記住產(chǎn)品使用的每一個(gè)細(xì)節(jié)，只會(huì)對(duì) “最爽的瞬間” 和 “最后的感受” 印象深刻。哪怕過程中有一些小瑕疵，只要峰值足夠驚艷、終值足夠舒適，用戶對(duì)整體體驗(yàn)的評(píng)價(jià)依然會(huì)很高。

產(chǎn)品落地技巧

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

在用戶使用產(chǎn)品的關(guān)鍵節(jié)點(diǎn)，用儀式感、驚喜感拉高情緒，比如：

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

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

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

當(dāng)用戶遇到網(wǎng)絡(luò)卡頓、操作失敗、抽獎(jiǎng)未中等負(fù)面場景時(shí)，用情感化設(shè)計(jì)減少挫敗感，比如：

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

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

在用戶完成整個(gè)使用流程后，強(qiáng)化滿足感和成就感，比如：

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

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

刷題功能體驗(yàn)優(yōu)化：針對(duì)用戶刷題時(shí)的 “未知焦慮”，做了三個(gè)核心調(diào)整：

① 用進(jìn)度條實(shí)時(shí)展示刷題進(jìn)度，讓用戶知道 “還有多久完成”；

② 最后 3 題彈出鼓勵(lì)語 “加油！馬上完成啦，你超棒的”，強(qiáng)化峰值；

③ 結(jié)果頁展示個(gè)性化數(shù)據(jù)報(bào)告（如 “商業(yè)模式模塊能力提升 15%”），打磨終值。優(yōu)化后，用戶刷題完成率提升 30%+。

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

設(shè)計(jì)時(shí)先繪制用戶情緒曲線，找到峰值和終值的關(guān)鍵節(jié)點(diǎn)，重點(diǎn)打磨這兩個(gè)時(shí)刻的體驗(yàn)，比均勻優(yōu)化所有環(huán)節(jié)更高效。

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

核心定義

由蘇聯(lián)心理學(xué)家蔡加尼克提出，又稱 “契可尼效應(yīng)”，指人們對(duì)未完成、被中斷的事情，記憶會(huì)比已完成的事情更深刻，且會(huì)持續(xù)產(chǎn)生完成的沖動(dòng)。簡單來說：用戶對(duì) “沒做完的事”，會(huì)更上心。

核心原理

當(dāng)一件事未完成時(shí)，大腦會(huì)一直處于 “緊張的激活狀態(tài)”，持續(xù)關(guān)注這件事；一旦事情完成，這種緊張感會(huì)消失，記憶也會(huì)快速淡化。就像考試時(shí)沒答上的題，會(huì)一直記掛到考試結(jié)束；綜藝在關(guān)鍵劇情插廣告，你會(huì)舍不得換臺(tái)。

產(chǎn)品落地技巧

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

在需要用戶持續(xù)參與的場景（簽到、課程、打卡），添加可視化進(jìn)度條 / 進(jìn)度點(diǎn)，讓用戶清晰看到 “完成了多少，還剩多少”，比如：

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

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

在用戶需要完成復(fù)雜操作時(shí)（如注冊(cè)、信息填寫、認(rèn)證），將流程拆分為多個(gè)簡單的小步驟，并明確展示當(dāng)前步驟，比如：

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

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

在產(chǎn)品中添加待辦事項(xiàng)、未讀提醒、未完成任務(wù)標(biāo)識(shí)，讓用戶時(shí)刻感知 “還有事沒做”，比如：

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

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

新用戶注冊(cè)流程優(yōu)化：舊版將所有信息（頭像、昵稱、手機(jī)號(hào)、性別、興趣）堆積在一個(gè)頁面，填寫率僅 40%；新版按業(yè)務(wù)維度拆分為 3 個(gè)步驟（手機(jī)號(hào)驗(yàn)證→基礎(chǔ)信息→興趣標(biāo)簽），每個(gè)頁面僅需填寫 1-2 項(xiàng)內(nèi)容，并添加進(jìn)度提示 “2/3 完善基礎(chǔ)信息”。

優(yōu)化后，利用蔡加尼克效應(yīng)讓用戶產(chǎn)生 “完成沖動(dòng)”，同時(shí)結(jié)合沉沒成本效應(yīng)（用戶填了前兩步，不愿放棄第三步），最終信息填寫率提升至 75%+，內(nèi)容推薦準(zhǔn)確率也同步提升。

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

利用蔡加尼克效應(yīng)的核心，是讓用戶 “看到未完成的目標(biāo)”，并通過拆分任務(wù)、可視化進(jìn)度，降低用戶完成目標(biāo)的門檻，從而提升參與度和完成率。

轉(zhuǎn)載：防脫發(fā)藥水

蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）www.xintaizi.com 是一家專注而深入的界面設(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。

我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。

評(píng)論(0) 瀏覽(134)

112026-3

聊聊 UI 設(shè)計(jì)中的潛臺(tái)詞

清陽交互設(shè)計(jì)及用戶體驗(yàn)

對(duì)一個(gè)產(chǎn)品而言，除了自身的內(nèi)容之外最重要的便是設(shè)計(jì)了。對(duì)于設(shè)計(jì)每個(gè)人都有自己不同的審美和想法，那么該如何做出好的設(shè)計(jì)呢？本文從潛臺(tái)詞這一角度蘭亭微妙UI設(shè)計(jì)公司來介紹如何搞好設(shè)計(jì)，讓我們一起來看看吧！

對(duì)一款產(chǎn)品而言，內(nèi)容是核心，而設(shè)計(jì)則是讓核心價(jià)值觸達(dá)用戶的關(guān)鍵橋梁。UI 設(shè)計(jì)的審美與思路向來千人千面，而想要打造出貼合用戶體驗(yàn)的優(yōu)質(zhì)設(shè)計(jì)，除了打磨直觀的視覺與信息呈現(xiàn)，更要讀懂設(shè)計(jì)背后的 “潛臺(tái)詞”。本文將從潛臺(tái)詞的視角，拆解 UI 設(shè)計(jì)的底層邏輯，探索讓設(shè)計(jì)與用戶深度共鳴的方法。

在 UI 設(shè)計(jì)工作中，我們總會(huì)聽到諸如此類的需求與反饋：

“這個(gè)頁面的感覺不太對(duì)”

“需要再加一些氛圍感”

“這段信息呈現(xiàn)得有點(diǎn)干”

……

這些看似模糊、如同 “五顏六色的黑” 般難以落地的要求，往往讓設(shè)計(jì)師無從下手。而 “潛臺(tái)詞”，正是破解這類問題的關(guān)鍵鑰匙。接下來，我們將從為何思考設(shè)計(jì)中的潛臺(tái)詞、何為設(shè)計(jì)中的潛臺(tái)詞、潛臺(tái)詞的核心作用三個(gè)維度，聊聊 UI 設(shè)計(jì)里的潛臺(tái)詞藝術(shù)。

一、為何思考設(shè)計(jì)中的潛臺(tái)詞

我對(duì)設(shè)計(jì)潛臺(tái)詞的思考，源于一次微信游戲名片的設(shè)計(jì)實(shí)踐。微信游戲名片的核心功能，是在游戲 APP 中展示玩家的游戲信息，為玩家間的社交搭建橋梁，讓不同游戲的玩家能便捷查看彼此的微信游戲數(shù)據(jù)。

最初的設(shè)計(jì)方案，采用了與微信客戶端一致的設(shè)計(jì)語言，意在強(qiáng)化微信的渠道認(rèn)知，界面的信息結(jié)構(gòu)也做到了簡潔清晰。但上線后，這份看似 “合格” 的設(shè)計(jì)卻收獲了大量負(fù)面反饋：有用戶覺得名片風(fēng)格過于生硬，像突兀插入的小廣告；也有玩家表示，沉浸游戲時(shí)看到這款名片，完全沒有點(diǎn)開的欲望。

這一結(jié)果讓我開始反思：為什么看似滿足了 “簡潔清晰” 的設(shè)計(jì)要求，卻無法契合用戶的使用體驗(yàn)？我們?cè)谧鲈O(shè)計(jì)時(shí)，是不是遺漏了什么核心要素？而想要找到答案，首先要厘清一個(gè)根本問題 ——UI 設(shè)計(jì)，究竟在設(shè)計(jì)什么？

從設(shè)計(jì)理論與行業(yè)資料中，我們能找到諸多答案：

設(shè)計(jì)是信息的包裝與合理排布
設(shè)計(jì)是整理信息的藝術(shù)
設(shè)計(jì)的本質(zhì)是交流，是信息的有效交換

這些答案中，都繞不開一個(gè)核心詞 ——信息。信息是視覺設(shè)計(jì)的基礎(chǔ)元素，設(shè)計(jì)師通過整合文字、圖片、聲音、視頻等直觀信息，吸引用戶注意力，讓用戶能快速捕捉頁面核心內(nèi)容。但在實(shí)踐中我發(fā)現(xiàn)，除了這些直觀可讀的信息，用戶的注意力往往還會(huì)被另一類隱藏的視覺信號(hào)吸引，而這，就是 UI 設(shè)計(jì)中的潛臺(tái)詞。

用戶的注意力會(huì)同時(shí)聚焦于直觀信息與潛臺(tái)詞信息，唯有兼顧兩者，才能讓設(shè)計(jì)真正貼合用戶的感知與需求。

二、何為設(shè)計(jì)中的潛臺(tái)詞

其實(shí)在工業(yè)設(shè)計(jì)領(lǐng)域，早已存在關(guān)于 “物品潛臺(tái)詞” 的探討。唐?諾曼曾提出，物品具備兩種示能性：一是物件本身的物理特質(zhì)，二是使用者能感知到的提示性特質(zhì)。而這一提示性特質(zhì)，正是物品所傳遞的潛臺(tái)詞。

深澤直人的兩個(gè)經(jīng)典設(shè)計(jì)，完美詮釋了這種潛臺(tái)詞：一款香蕉汁飲品，無需任何文字說明，僅憑香蕉造型的瓶身，就能讓用戶立刻知曉產(chǎn)品屬性，傳遞出 “這是香蕉汁” 的潛臺(tái)詞；一款臺(tái)燈的底座被設(shè)計(jì)成托盤造型，使用者會(huì)自然而然地將鑰匙、手表等隨身小物放置其上，因?yàn)榈鬃男螒B(tài)傳遞出 “可以盛放小物件” 的提示。

如同物品的信息可分為物理特質(zhì)與提示性特質(zhì)，UI 設(shè)計(jì)中的信息也能分為直接信息與潛臺(tái)詞信息。直接信息是界面中直觀的文字、圖片、數(shù)據(jù)等內(nèi)容，而潛臺(tái)詞信息，則是設(shè)計(jì)師通過顏色、形狀、圖案、質(zhì)感等視覺手法，為界面賦予的隱藏信號(hào)。

這些視覺潛臺(tái)詞，能為界面營造專屬氛圍、喚起用戶的情緒共鳴，甚至引發(fā)用戶的回憶與思考，讓設(shè)計(jì)超越單純的信息呈現(xiàn)，成為與用戶溝通的語言。

三、潛臺(tái)詞的核心作用

在日常的 UI 設(shè)計(jì)工作中，我發(fā)現(xiàn)潛臺(tái)詞能發(fā)揮三大核心作用：傳遞隱藏信息、建立情感連接、減少認(rèn)知成本。這三大作用，能從不同維度優(yōu)化用戶體驗(yàn)，讓設(shè)計(jì)更有溫度、更易理解、更貼合場景。

1. 傳遞隱藏信息，讓體驗(yàn)路徑更流暢

回到微信游戲名片的設(shè)計(jì)案例，從潛臺(tái)詞的視角分析，問題便迎刃而解。市面上主流的頭部游戲，界面大多采用暗色沉浸式風(fēng)格，這種視覺設(shè)計(jì)的潛臺(tái)詞是：“放下外界干擾，開始專注的游戲體驗(yàn)吧”，目的是為玩家營造專注、沉浸的游戲心流。

而最初的微信游戲名片，采用明亮清晰的設(shè)計(jì)風(fēng)格，其潛臺(tái)詞更偏向 “高效、冷靜的平臺(tái)功能工具”。游戲界面與名片界面的潛臺(tái)詞形成強(qiáng)烈反差，這正是用戶覺得違和、生硬的核心原因 —— 視覺潛臺(tái)詞的割裂，打破了玩家的游戲沉浸感。

想要讓玩家的游戲與社交體驗(yàn)無縫銜接，就需要讓游戲名片傳遞與游戲 UI 連貫的視覺潛臺(tái)詞。基于此，我對(duì)設(shè)計(jì)方案進(jìn)行了兩大優(yōu)化：

加入通用的游戲視覺元素點(diǎn)綴，貼合游戲場景；
將卡片整體改為暗色模式，與游戲的沉浸式風(fēng)格統(tǒng)一。

優(yōu)化后的新版游戲名片，傳遞出與游戲主界面一致的 “專注、沉浸” 潛臺(tái)詞，不僅弱化了原本的突兀插入感，還能兼容大部分游戲的視覺風(fēng)格，讓玩家在游戲與社交的過渡中，擁有更連貫、流暢的體驗(yàn)。

這一案例也印證了：潛臺(tái)詞是界面隱藏信息的傳遞載體，精準(zhǔn)運(yùn)用潛臺(tái)詞，能讓用戶的體驗(yàn)路徑更順滑，讓設(shè)計(jì)與使用場景深度融合。

2. 建立情感連接，讓設(shè)計(jì)更有溫度

第二個(gè)案例，來自微信游戲禮品站的設(shè)計(jì)。游戲禮品站是支持玩家間互贈(zèng)游戲道具、周邊的小程序，在設(shè)計(jì)過程中，產(chǎn)品經(jīng)理常提出一個(gè)核心需求：“這個(gè)頁面能不能更有氛圍感？”

“氛圍感” 看似抽象，從潛臺(tái)詞的角度解讀，本質(zhì)就是在傳遞直接信息的基礎(chǔ)上，通過視覺語言為用戶傳遞更多情感信息。基于此，我確立了明確的設(shè)計(jì)目標(biāo)：通過視覺潛臺(tái)詞，讓用戶的情感產(chǎn)生共鳴、持續(xù)升溫，讓送禮與收禮的過程，充滿儀式感與情感價(jià)值。

想要實(shí)現(xiàn)這一目標(biāo)，并非讓所有頁面都堆砌華麗的視覺元素，而是要找對(duì)設(shè)計(jì)發(fā)力點(diǎn)，具體分為三步：

第一步：梳理頁面，按情感濃度劃分設(shè)計(jì)層級(jí)

首先梳理禮品站的完整使用路徑，發(fā)現(xiàn)不同頁面的情感承載度差異顯著：一部分是挑選、購買道具的工具類頁面，核心需求是高效、便捷；另一部分是贈(zèng)送、接收、拆禮物的核心頁面，核心需求是完成用戶的情感傳遞。顯然，后者是情感化設(shè)計(jì)的關(guān)鍵切入點(diǎn)。

第二步：挖掘情感元素，傳遞專屬潛臺(tái)詞

結(jié)合現(xiàn)實(shí)生活中的送禮體驗(yàn)，一份有溫度的禮物，既不會(huì)是簡單的塑料袋包裝，也不會(huì)是過度繁瑣、華而不實(shí)的堆砌，而是恰如其分的儀式感 —— 簡潔整潔的禮盒，搭配寫滿心意的留言卡片，就是最能傳遞情感的形式。

基于此，我將 “禮盒” 與 “留言卡片” 抽象為核心 UI 元素：禮盒直觀表達(dá) “送禮” 的行為，傳遞 “這是一份用心準(zhǔn)備的禮物” 的潛臺(tái)詞；寫有雙方昵稱與留言的卡片，連接起送禮者與收禮者的關(guān)系，強(qiáng)化情感共鳴。將這兩個(gè)元素融入核心的 “拆禮物” 頁面，即便用戶不看界面文字，也能立刻感知到 “有朋友為我送上了一份心意滿滿的禮物”，讓情感傳遞更直接、更動(dòng)人。

第三步：統(tǒng)一視覺語言，利用曝光效應(yīng)加深記憶

確定 “禮盒” 這一核心情感象征后，我為其設(shè)計(jì)了扁平、微擬物、強(qiáng)擬物三種不同維度的視覺表現(xiàn)形式，根據(jù)不同頁面的風(fēng)格，搭配不同重量感的圖形。同時(shí)，讓 “禮盒”“留言卡片” 的視覺元素在禮品站的各個(gè)頁面反復(fù)出現(xiàn)，利用曝光效應(yīng)，讓用戶對(duì)禮品站形成專屬的視覺記憶，也讓情感潛臺(tái)詞的傳遞更連貫。

小結(jié)來說，通過挖掘貼合場景的核心情感元素，讓設(shè)計(jì)傳遞專屬的情感潛臺(tái)詞，能有效放大用戶間的情感連接，增強(qiáng)用戶的場景代入感，讓送禮這一行為超越道具本身，成為玩家間情感交流的紐帶。

3. 減少認(rèn)知成本，讓信息更易理解

第三個(gè)案例，是和平精英 S12 賽季戰(zhàn)報(bào)的設(shè)計(jì)。賽季戰(zhàn)報(bào)的核心功能，是回顧玩家在賽季中的游戲表現(xiàn)，而設(shè)計(jì)的核心挑戰(zhàn)是：如何將冰冷、復(fù)雜的游戲數(shù)據(jù)，轉(zhuǎn)化為直觀、易懂的內(nèi)容，讓玩家能快速感知自身的游戲成果，進(jìn)而產(chǎn)生分享欲望。

從潛臺(tái)詞的角度思考，破解這一問題的關(guān)鍵，是用用戶熟悉的事物，具象化陌生的抽象數(shù)據(jù)—— 通過視覺潛臺(tái)詞，將游戲數(shù)據(jù)與用戶熟知的概念關(guān)聯(lián)，用熟悉事物的潛臺(tái)詞解釋陌生數(shù)據(jù)，降低用戶的認(rèn)知成本，讓數(shù)據(jù)變得生動(dòng)、有畫面感。

具體設(shè)計(jì)中，我們做了兩大嘗試：

一是將 “擊殺人數(shù)” 具象為現(xiàn)實(shí)中的 “樓層高度”。和平精英中，被淘汰的玩家會(huì)變成存放裝備的小木盒，我們便將玩家賽季總擊殺數(shù)，轉(zhuǎn)化為 “盒子堆疊的高度”—— 比如 “本賽季淘汰 175 人，盒子堆疊高達(dá) 16 米，相當(dāng)于 6 層樓的高度”，用現(xiàn)實(shí)中可感知的 “樓層高度”，讓玩家直觀感受到自己的擊殺成果，遠(yuǎn)比冰冷的數(shù)字更有沖擊力。

二是用游戲玩家熟知的裝備等級(jí)顏色體系，區(qū)分分享卡片的稀有度。將灰色、綠色、藍(lán)色、紫色、金色，分別對(duì)應(yīng) “普通、優(yōu)秀、稀有、史詩、傳說” 的實(shí)力等級(jí)，這種顏色的潛臺(tái)詞，在游戲玩家的認(rèn)知中早已形成固定印象。用不同顏色打造賽季戰(zhàn)報(bào)的分享卡片，能讓玩家一眼感知到自己賽季表現(xiàn)的稀有程度，既降低了認(rèn)知成本，又提升了卡片的分享價(jià)值。

這一案例的核心思路是：當(dāng)需要向用戶傳遞陌生、抽象的概念時(shí)，將其具象為用戶熟悉的事物，用熟悉的潛臺(tái)詞喚起用戶的記憶與認(rèn)知，能讓信息傳遞更高效，也讓設(shè)計(jì)更貼近用戶的認(rèn)知習(xí)慣。

綜上，UI 設(shè)計(jì)中潛臺(tái)詞的三大核心作用可總結(jié)為：

傳遞隱藏信息：讓設(shè)計(jì)的隱藏信號(hào)與場景契合，讓體驗(yàn)路徑更流暢；
建立情感連接：挖掘核心情感元素，放大用戶間的情感共鳴，增強(qiáng)代入感；
減少認(rèn)知成本：將陌生概念具象為熟悉事物，用熟悉的潛臺(tái)詞加快用戶認(rèn)知。

四、寫在最后

思考 UI 設(shè)計(jì)中的潛臺(tái)詞，能讓設(shè)計(jì)師跳出 “僅整理信息、排布界面” 的固有思維，用更多維度看待界面中的信息傳遞。很多時(shí)候，最精簡的界面未必是最好的設(shè)計(jì)，真正的優(yōu)質(zhì)設(shè)計(jì)，是在簡潔的基礎(chǔ)上，通過圖形、顏色、質(zhì)感等設(shè)計(jì)手法，為界面描繪專屬的故事，傳遞出準(zhǔn)確的視覺潛臺(tái)詞。

而回到最初的問題 —— 為什么看似簡單清晰的設(shè)計(jì)，卻無法滿足用戶需求？如今我能給出明確的答案：我們追求的設(shè)計(jì) “簡單”，從來不是圖形、界面排布的表面簡單，而是用戶感知的簡單。

UI 設(shè)計(jì)的本質(zhì)，不僅是為信息建立秩序，更是用有限的設(shè)計(jì)資源，為用戶打造更美好的感受與體驗(yàn)。讀懂設(shè)計(jì)的潛臺(tái)詞，讓設(shè)計(jì)與用戶深度溝通，才是 UI 設(shè)計(jì)的核心要義。

蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）www.xintaizi.com 是一家專注而深入的界面設(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。

我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。

評(píng)論(0) 瀏覽(171)

092026-3

色彩在UI設(shè)計(jì)中的應(yīng)用

清陽設(shè)計(jì)資源

我們經(jīng)常會(huì)使用到很多產(chǎn)品，一些產(chǎn)品里的色彩搭配也會(huì)給我們留下深刻的影響，比如你會(huì)記得淘寶的橙色、支付寶的藍(lán)色等等，色彩對(duì)于用戶的體驗(yàn)也很重要；蘭亭妙微ui設(shè)計(jì)公司分享了關(guān)于色彩在UI設(shè)計(jì)中的應(yīng)用，我們一起來看一下。

一、色彩的應(yīng)用

人腦對(duì)于色彩的記憶度要高于形態(tài)，即一個(gè)App給用戶留下深刻印象的往往是界面的色彩；例如說到支付寶，我們可能想不起它的首頁長什么樣子，標(biāo)簽欄圖標(biāo)是那些，但能馬上記起它的界面主色是藍(lán)色；因此運(yùn)用好色彩對(duì)UI設(shè)計(jì)十分重要，它能直觀的呈現(xiàn)產(chǎn)品的氣質(zhì)和性格，能有效的幫助用戶組織和閱讀信息，與界面設(shè)計(jì)產(chǎn)生聯(lián)系和記憶。

好的配色往往依靠設(shè)計(jì)師審美、感覺搭配出來，但合理的顏色搭配必定存在合理的配色規(guī)律和配色方法論的支撐，下面結(jié)合相關(guān)案例為大家講解色彩運(yùn)用的幾個(gè)技巧。

1. 不得觸碰的禁區(qū)

分析研究了很多優(yōu)秀設(shè)計(jì)作品，發(fā)現(xiàn)他們?cè)谟蒙臅r(shí)候有一部分區(qū)域是不會(huì)使用的，也就是我們常說的“配色禁區(qū)”；當(dāng)然，這里的“禁區(qū)”是帶雙引號(hào)帶的，并沒有什么絕對(duì)的禁區(qū)，只是說這些顏色不易控制，在連基礎(chǔ)色都沒有駕馭好之前，盡量少碰。

配色禁區(qū)大概分為這三種：三角形禁區(qū)、矩形禁區(qū)、扇形禁區(qū)（紅色為禁區(qū)），如下圖：

綜合看來，不管是那種禁區(qū)，右下角區(qū)域的顏色是很少用的。畢竟他們又臟又深，當(dāng)然什么顏色都能駕馭的大師請(qǐng)略過。

知識(shí)點(diǎn)：

在界面設(shè)計(jì)中，一般主色和輔助色都集中在右上角，次要的和不可點(diǎn)的顏色都集中在中中上方，而文字信息和背景色則集中在左側(cè)，右下角禁區(qū)是我們要重點(diǎn)避開的對(duì)象。

2. 色調(diào)一致

在App設(shè)計(jì)之前應(yīng)先確定界面的主色調(diào)，主色將占據(jù)界面中很大的比例，通常是品牌色，而輔助色、點(diǎn)綴色、背景色等都應(yīng)以主色調(diào)為基準(zhǔn)來搭配，這樣才能保證App整體色調(diào)的一致。

色調(diào)一致的界面，能帶給用戶始終如一的視覺體驗(yàn)。例如馬蜂窩將黃色（品牌色）作為主色，以及從主色搭配出的藍(lán)色（對(duì)比色）貫穿App始終。

3. 60-30-10原則

60% 30% 10%的原則，是達(dá)到色彩平衡的最佳比例。在60%的空間使用主色，可以運(yùn)用到導(dǎo)航欄、按鈕、圖標(biāo)等關(guān)鍵的元素中，使之成為整個(gè)App的視覺焦點(diǎn)和色彩關(guān)系；30%的空間使用輔助色，可以平衡過多的主色而造成的視覺疲勞；最后剩下10%的空間為點(diǎn)綴色，可以用在一些不太重要的元素又需要區(qū)分的時(shí)候。

6:3:1原則構(gòu)建了一種豐富的色彩層次，讓界面看上去和諧、平衡和不雜亂。

嗶哩嗶哩將粉色運(yùn)用到頁簽、標(biāo)簽欄、按鈕、入口圖標(biāo)等上，藍(lán)色的輔助色用在角標(biāo)、圖標(biāo)上，還有黃色、紅色用在一些小圖標(biāo)、小標(biāo)簽上，主次非常清晰明了。

4. 色不過三

經(jīng)常很多大神在網(wǎng)上說配色不要超過三種色，其實(shí)就是「色不過三」原則，即在一個(gè)頁面中不要使用超過3種顏色搭配，這也和上面說的“60-30-10原則”類似，即一個(gè)主色、一個(gè)輔助色和一個(gè)點(diǎn)綴色。

但在實(shí)際UI設(shè)計(jì)中，迫于產(chǎn)品的需要可能會(huì)使用更多數(shù)量的色彩，但切記不可超過7種色相（注意不是7種色值），每個(gè)色相還可以運(yùn)用其飽和度、明度的變化分解出豐富的色彩搭配。

美團(tuán)外賣的首頁20個(gè)功能入口大圖標(biāo)的背景用了9種不同的色彩，每種色彩又包含一種低飽和度色彩進(jìn)行彩色漸變，但并沒有顯得雜亂，而是呈現(xiàn)一種年輕時(shí)尚的律動(dòng)感。

這是因?yàn)檫@里雖然使用了9種不同的色彩，但仔細(xì)觀察發(fā)現(xiàn)只使用了3種色彩，其他6種則是從前者鄰近色中提取出來的搭配，再將它們錯(cuò)落放置，呈現(xiàn)出豐富多彩的色彩搭配，整體和諧統(tǒng)一。

5. 遠(yuǎn)離純黑色和純灰色

黑色就像沒有生命力的深淵，使用戶陷入冷冷的負(fù)面情緒中。遠(yuǎn)離純黑色和純灰色，是因?yàn)樗鼈儾淮嬖谟诂F(xiàn)實(shí)世界里；嘗試在純黑和純灰中加入一些色調(diào)，會(huì)讓界面看上去更柔和自然；另外，純黑色還會(huì)與白色產(chǎn)生強(qiáng)烈的對(duì)比度，看久了會(huì)使人疲勞，讓用戶產(chǎn)生焦慮的情緒。

MONO的導(dǎo)航欄并不是深黑色，而是加入了藍(lán)色的低飽和度藍(lán)黑色，它的界面背景也是加入了藍(lán)色的的淺色，這樣就不會(huì)讓界面看上去死氣沉沉的。

6. 遵循色彩心理學(xué)

前文我們已經(jīng)了解過各種色彩的心理學(xué)知識(shí)，就是為了我們?cè)谶M(jìn)行App設(shè)計(jì)時(shí)提供依據(jù)；這些色彩都是源于人類對(duì)大自然最原始的感受，藍(lán)色的天空、綠色的草地、黃色的沙漠等等，自然的色彩，對(duì)于我們來說是司空見慣的，但其中卻蘊(yùn)含著豐富的美感，并達(dá)到了和諧統(tǒng)一。

網(wǎng)易云音樂使用紅色作為主色，這種熱情奔放的顏色傳遞出一種充滿能量、自信的氣質(zhì)。

7. 良好的可讀性

良好的可讀性在界面設(shè)計(jì)中能為用戶提供主次分明、層次清晰的閱讀體驗(yàn)，而一個(gè)可讀性差的界面則會(huì)成為用戶瀏覽的障礙。

那如何確保界面具有良好的可讀性呢？

這就需要在界面設(shè)計(jì)中注意色彩搭配的對(duì)比，如在淺色背景上使用深色文字，在深色背景上使用淺色文字，使用高對(duì)比的度的亮色展示重要的元素，用低對(duì)比度的淺色來體現(xiàn)需要弱化和次要的內(nèi)容；例如蘋果Music的主要功能入口，標(biāo)簽欄圖標(biāo)、按鈕等都是用了高純度的紅色，與其他元素從形成鮮明對(duì)比，就連深灰色的輔助文字都有著清晰的可讀性。

8. 從大自然中獲得靈感

配色中盡量使用大眾熟悉的色彩，如自然界中人們常見的色彩等；從大自然中獲取的配色靈感可以使你的設(shè)計(jì)更加切合用戶的審美，非常自然；而藝術(shù)是對(duì)自然的直接反映，是非常寶貴的資源，值得好好利用。

我們可以搜集各種與自然風(fēng)光相關(guān)的圖片，從中提取色彩運(yùn)用到設(shè)計(jì)中，這些幾近完美的搭配呈現(xiàn)出來的和諧美感能瞬間打動(dòng)人心；天氣應(yīng)用Marline就是一個(gè)很好的例子，它的界面背景漸變就參考大自然的變化，隨著不同時(shí)間段呈現(xiàn)出清晨、日出、正午、日落、深夜、雨天等漸變色，打開應(yīng)用即喚起了用戶的快樂情緒。

9. 將UX顏色與品牌相匹配

品牌價(jià)值在創(chuàng)建調(diào)色板中發(fā)揮關(guān)鍵作用，但是它們不是唯一重要的因素，行業(yè)規(guī)范也是關(guān)鍵；使用與品牌主要競爭產(chǎn)品幾乎相同的配色方案不失一種好方法。

配色在品牌視覺中所發(fā)揮的作用是不言而喻的，但是，色彩本身的內(nèi)涵和情緒特質(zhì)并不是全部；比如一個(gè)行業(yè)當(dāng)中，很多產(chǎn)品都使用了藍(lán)色，那么你的產(chǎn)品繼續(xù)使用藍(lán)色，可以讓用戶更快「識(shí)別出」你所屬的領(lǐng)域；但是本身也存在讓人混淆的風(fēng)險(xiǎn)。如果你想要在視覺上脫穎而出，可以試著使用不同的色彩。

中國區(qū)或美國區(qū)，紅色和藍(lán)色都是最流行的顏色

在進(jìn)行品牌設(shè)計(jì)的時(shí)候，選擇配色的第一步，始終是了解各種顏色或者色相的氣質(zhì)和情感屬性；然后，在具體設(shè)計(jì)的時(shí)候，再進(jìn)一步根據(jù)品牌的氣質(zhì)和需求，再在色相的基礎(chǔ)上調(diào)整明暗和飽和度。也可以打破常規(guī)創(chuàng)造出與眾不同的配色方案。

10. 從強(qiáng)調(diào)色入手

想要讓配色方案更加突出，在設(shè)計(jì)中添加強(qiáng)調(diào)色可能是最容易入手的地方；舉個(gè)例子，一個(gè)律師咨詢的App可能會(huì)使用傳統(tǒng)的藍(lán)色作為基礎(chǔ)配色，但是，如果能夠加入檸檬綠作為強(qiáng)調(diào)色，會(huì)顯得獨(dú)特很多。

11. 冷暖色對(duì)比搭配

冷暖對(duì)比色是自然平衡的規(guī)律，可以在設(shè)計(jì)中大量使用，這樣的配色會(huì)使作品非常的出彩，同時(shí)不顯單調(diào)，讓用戶感覺舒服平和；而且這種搭配方法基本沒有啥缺點(diǎn)，使用在設(shè)計(jì)中，技巧性比較多，對(duì)設(shè)計(jì)的細(xì)膩感受要求比較高，需要多練習(xí)。

12. 黑白色搭配不過時(shí)

黑色是所有中性色中最強(qiáng)的，而白色是最常用的背景顏色。

黑色是一個(gè)很好的選擇，有種高端和永恒的感覺，而白色可以帶給用戶自由，寬敞和透氣的感覺；如上所述，黑色和白色也是最大的對(duì)比色，如果合理的使用黑色配合白色，會(huì)營造出一種優(yōu)雅的氛圍。

12. 強(qiáng)交互色彩

交互色彩在執(zhí)行過程中必須清晰且在界面中保持一致。

號(hào)召性用語必須相對(duì)于背景具有足夠的對(duì)比度，并且相對(duì)于其他組件必須具有足夠的視覺權(quán)重，以便用戶可以輕松識(shí)別它們；Nike健身應(yīng)用中，「開始」按鈕以高飽和度的檸檬綠作為主色，從背景中脫引而出。

但是，交互色彩并不總是以最具飽和度或最亮為特征，而是通過色調(diào)、形狀、大小或?qū)Ρ榷龋瑥钠聊簧厦摲f而出；因此，交互色彩的有效性將基于用戶識(shí)別交互區(qū)域和執(zhí)行任務(wù)的速度來衡量。

同時(shí)，次要功能權(quán)重要更輕，并在視覺上更接近信息元素。如上圖Nike Training界面中，“設(shè)置”和“聲音”按鈕只用簡單的白色，減輕對(duì)主按鈕的干擾，也避免了頁面中出現(xiàn)多個(gè)強(qiáng)交互按鈕。

13. 保證良好的可讀性

可讀性是任何設(shè)計(jì)中的重要因素。你的顏色應(yīng)該清晰易讀，尤其是在處理文字時(shí)；因此對(duì)比度對(duì)視覺效果對(duì)影響就非常關(guān)鍵，對(duì)比度過小，就會(huì)使得界面出現(xiàn)灰蒙蒙對(duì)效果。

清晰的對(duì)比度，一般會(huì)采用色彩的兩極，黑紙白字或白紙黑字；而在彩色背景上要讓內(nèi)容清晰可見，就需要搭配純白或高明度的文字，避免灰色文字；也要注意避免彩色背景上搭配互補(bǔ)色和明度接近的文字，因?yàn)檫@兩種搭配會(huì)產(chǎn)生一種“震顫效應(yīng)”，發(fā)出光暈的視覺效果。

14. UI中的陰影

沒有完全純黑的陰影，陰影的顏色是會(huì)受到物體本身固有色的影響，一定要避免使用純黑色（#000000），使用不太深的灰色，效果會(huì)更好；對(duì)于有顏色的元素，好的做法是為陰影設(shè)定與元素相同的顏色，并使其更暗一些。

如果是有顏色的元素，并且它處在黑暗的背景下，一般情況下，是不建議使用陰影的；但是如果你一定要用，把陰影透明度調(diào)到小于10%及以下，并且顏色跟隨主色調(diào)來；比如按鈕為綠色，則可以為按鈕設(shè)定一個(gè)更深的綠色陰影，并加上小于10%的透明度數(shù)值。

如下圖，左側(cè)的按鈕陰影很自然，右側(cè)的則有一層模糊發(fā)光的效果，顯得不夠漂亮。

知識(shí)點(diǎn)：

為什么「超鏈接文字」要用藍(lán)色？

簡單說，因?yàn)樵谧钤缙诘木W(wǎng)站頁面中，藍(lán)色能呈現(xiàn)最高的對(duì)比度。

Tim Berners-Lee——web 的主要開創(chuàng)者，被認(rèn)為是最早用藍(lán)色鏈接的人。

一個(gè)很早期的 web 瀏覽器 Mosaic，用的是深灰色背景和黑色文字；那時(shí)候，能用的非黑色、最深的文字顏色，就是藍(lán)色；所以，讓超鏈接文字突出顯示，同時(shí)保證可讀性，就選定了藍(lán)色，此后超鏈接文字都用藍(lán)色的傳統(tǒng)沿用至今。

二、app設(shè)計(jì)中的色彩搭配

App的色彩搭配能直觀、快速的反饋到用戶的大腦中形成記憶思維；好的色彩搭配可以加深用戶對(duì)產(chǎn)品的印象；明確界面的視覺層次，讓用戶分清主次信息；同時(shí)還能給用戶賞心悅目的視覺享受。那么，在UI設(shè)計(jì)時(shí)該如何進(jìn)行色彩搭配呢？

我們可以從App中都包含了那些色彩開始，通常一個(gè)App中包含了主色、輔助色、點(diǎn)綴色、背景色這4類，下面就以微信讀書為例進(jìn)行詳細(xì)的講解（個(gè)人角度）。

1. 主色

主色是指在配色中處于主導(dǎo)地位的色彩，給用戶的第一眼印象，通常是產(chǎn)品的品牌色。

在App設(shè)計(jì)中，主色一般占有色相色彩的60%的比例；這里指的是60%的界面都使用到的主色比例，而不是使用面積（因?yàn)橥ǔＲ粋€(gè)界面中使用面積最大的是背景色）；還有就是背景色多為淺灰色或白色，它們都屬于無色相色彩，因此不涉及到配色過程中。

我們看到微信讀書的第一印象，就可以判斷它的主色為藍(lán)色，這也是它的品牌色；在標(biāo)簽欄、按鈕、圖標(biāo)、注冊(cè)登陸全都使用了這種純凈的主色，使界面看上去非常和諧一致。

2. 輔助色

輔助色與主色相輔相成，輔助色的功能是幫助主色建立更完整的形象，使界面豐富精彩起來，避免畫面過于單一。

通常，主色的鄰近色、互補(bǔ)色、分散互補(bǔ)色和三角對(duì)立色都可以成為優(yōu)秀的輔助色，但注意輔助色不宜過多，否則就會(huì)使界面看上去花哨分散了主題；根據(jù)6:3:1原則，輔助色可以占有色相色彩的30%或更少為宜。

在微信讀書中，綠色、橙色、梅紅、藍(lán)紫色是除了主色以外使用最多的顏色，它們都是輔助色，主要用于功能圖標(biāo)和欄目分類上。

雖然輔助色看起來有點(diǎn)多，但其實(shí)都是從主色的鄰近色和對(duì)比色（及其鄰近色）中提取出來的搭配，而且只用在頁面中很少的地方，這種搭配技巧既可以豐富色彩的搭配，傳遞出年輕活躍的產(chǎn)品氣質(zhì)，又保證了整體搭配的和諧統(tǒng)一。

3. 點(diǎn)綴色

點(diǎn)綴色是除了主色和輔助色以外的另一種色彩，通常體現(xiàn)在細(xì)節(jié)上。

其作用是，當(dāng)頁面中主色和輔助色不能滿足關(guān)鍵信息的提示時(shí)，就需要點(diǎn)綴色來吸引用戶眼球，還有就是利用點(diǎn)綴色來平衡畫面的冷暖色調(diào)。

點(diǎn)綴色通常都是分散的，使用面積小，顏色非常顯眼，能與主色形成強(qiáng)烈的對(duì)比；一般點(diǎn)綴色是主色的互補(bǔ)色。在微信讀書中，使用了香檳金、梅紅和紅色作為點(diǎn)綴色；香檳金用在文章分享按鈕上，梅紅色用在點(diǎn)贊圖標(biāo)上，強(qiáng)調(diào)其特殊性，紅色用在通知及退出登錄提醒上，用于警示。

來康康這三種點(diǎn)綴色與主色之間存在什么樣的關(guān)系，在色相（H）上，3種點(diǎn)綴色為鄰近色，與主色為互補(bǔ)色；在明度（B）上，3種點(diǎn)綴色均為高明度色彩，起到強(qiáng)提醒的作用。這種強(qiáng)對(duì)比的互補(bǔ)色的點(diǎn)綴色可以快速引起用戶注意力。

4. 背景色

背景色就比較好理解了，通常為了襯托內(nèi)容，大多數(shù)App都是用淺灰色作為背景色，以白色作為背景色的對(duì)比色，來區(qū)分視覺層次；建議是可以根據(jù)前景色來提取背景色，將其調(diào)亮或變暗，這樣可以讓界面色調(diào)更加統(tǒng)一。

在微信讀書中背景色是偏藍(lán)色調(diào)的淺灰色，而不是純灰色，背景對(duì)比色是在白色里加入了藍(lán)色色相，而不是純白色，整體對(duì)比較柔和，給人清爽通透的感覺。

支付寶 Alipay Design 團(tuán)隊(duì)提出過一個(gè)配色原則：

以同色系配色為主導(dǎo)，多色搭配為輔。

同色系為統(tǒng)一的色相，使用中可以加深品牌色的感知，可以讓界面更有層次，同時(shí)可以讓界面保持色彩上的一致性；由于業(yè)務(wù)的多樣化，我們需要多色搭配為輔；多色的輔助顏色，也可稱之為功能色，可設(shè)定不同的任務(wù)屬性和情感表達(dá)；再搭配中性色黑白灰，賦予更多的變化和層次。

兩種配色通過主次、使用比例，可靈活運(yùn)用在業(yè)務(wù)的各個(gè)場景中，具有非常好的延展性。

三、迷人的漸變色

不同于單一色彩，漸變色不屬于任何色彩，它營造出千變?nèi)f化的視覺效果，卻又不會(huì)增加視覺負(fù)擔(dān)。

相較于單一的色彩，漸變色的復(fù)合性質(zhì)讓它在界面設(shè)計(jì)中具有更強(qiáng)的視覺沖擊力，有助于快速搶占視線；如今，這種獨(dú)一無二的色彩正逐漸成為一種潮流，究其原因是目前大量的扁平風(fēng)格造成UI設(shè)計(jì)的嚴(yán)重同質(zhì)化，人們需要追求更加個(gè)性的視覺語言來滿足日益增長的設(shè)計(jì)需求。

下面我們來了解幾種常見的漸變的使用技巧：

1. 色相、飽和度、明度的漸變

色相（H）漸變是指由一種色彩向另一種色彩的過渡，這種漸變因跨度大產(chǎn)生的視覺效果非常明顯；飽和度（S）漸變是指同一種色彩不同純度的過度，其產(chǎn)生的視覺效果比較和諧單調(diào)；明度（B）漸變是同一種色彩不同明暗的過度，這種漸變的視覺效果給人一種沉靜的氛圍。

2. 漸變的表現(xiàn)形式

在界面設(shè)計(jì)中經(jīng)常看多各種各樣的漸變表現(xiàn)方式，使用最多的有以下幾種：

水平漸變：

這個(gè)很好理解，是指角度為0的線性漸變，是最流行的漸變形式；界面設(shè)計(jì)中多用在導(dǎo)航欄、進(jìn)度條、按鈕等元素上，能讓畫面變得精致而通透；例如京東使用橙紅漸變的設(shè)計(jì)語言貫穿整個(gè)App，從應(yīng)用圖標(biāo)到導(dǎo)航欄、按鈕、標(biāo)簽，全部都運(yùn)用了這種由紅色到橙色的過渡；仔細(xì)觀察發(fā)現(xiàn)在很多小標(biāo)簽上都使用了水平漸變?cè)O(shè)計(jì)手法，使產(chǎn)品看起來更年輕化。

知識(shí)點(diǎn)：

在水平漸變中，通常把輕（亮）的色彩放在左邊，重（暗）的色彩放在右邊，這樣由左向右的方向感剛好與人的瀏覽習(xí)慣保持一致；而反過來就會(huì)與人的瀏覽視線相悖，應(yīng)避免。

垂直漸變：

即角度為90°的線性漸變，它通常被用在正方形或豎條形的元素上，如注冊(cè)登陸頁，個(gè)人中心頭部等；垂直漸變中上下兩種色彩的深淺變化會(huì)產(chǎn)生截然不同的視覺效果，上淺下深會(huì)讓給人一種凸起的立體感，而上深下淺會(huì)給人一種凹陷下去的空間感。

例如「紀(jì)念碑谷」的背景是采用了單色相和多色相的垂直漸變作為游戲背景，在讓整個(gè)畫面豐富的同時(shí)又不會(huì)太搶奪主體的色彩，使畫面顯得清新透氣而不沉悶。

角度漸變：

角度漸變通常有對(duì)角漸變和多角度漸變；有角度的漸變相比水平和垂直漸變，它的使用場景更廣，如圖標(biāo)背板、啟動(dòng)頁、注冊(cè)登錄頁、標(biāo)簽等；想讓界面更加絢麗、動(dòng)感和迷人，這時(shí)候我們可以考慮多組漸變搭配使用。

色塊漸變：

漸變的顏色不只可以運(yùn)用在一個(gè)色塊上，還可以運(yùn)用在一組色塊上；設(shè)計(jì)師運(yùn)用一組近似性色彩，將每個(gè)菜單項(xiàng)清晰區(qū)分開，讓界面平衡在一個(gè)頻率上，這樣的畫面更有節(jié)奏感和舒適性。

不同于平滑的漸變，色塊漸變不再是單純的背景裝飾，在某些地方還具有一定的功能性，比如使用不同的色塊來分割的列表樣式；Clear Todos是一款日常任務(wù)清單的APP，它拋棄了傳統(tǒng)的列表樣式，使用了一系列色塊來作為列表的分割，非常漂亮和精致。

徑向漸變：

是指色彩以圓心向四周擴(kuò)散的漸變，是一種模擬光源照射的視覺效果，因此光源是整個(gè)畫面的視覺焦點(diǎn)，將關(guān)鍵元素放在光源中心就會(huì)成為主角；通常被運(yùn)用到大背景上，如啟動(dòng)頁、引導(dǎo)頁等。

Solar天氣應(yīng)用的背景就是徑向漸變，光源擴(kuò)散的效果營造出一種夢幻般的美感。

3. 和諧的漸變色

漸變色是由一個(gè)色彩走向另一個(gè)色彩的過程，有著迷人的視覺效果；如果你仔細(xì)觀察兩種色彩的過渡關(guān)系，就會(huì)發(fā)現(xiàn)不是每次都會(huì)得到滿意的效果，例如紅綠漸變就很糟糕，因?yàn)樗鼈儍烧呤腔閷?duì)立的色彩，但是如果加入黃色的過渡色就會(huì)好很多；原因是當(dāng)兩種色彩之間超過90度就會(huì)導(dǎo)致其漸變色看上去不太和諧自然，只有控制在90度之內(nèi)才會(huì)產(chǎn)生美妙的變化。

如何改善超過90度的兩種色相的漸變呢？這時(shí)候可以在兩色之間加入過渡色進(jìn)行調(diào)和。例如當(dāng)從黃色到藍(lán)色漸變時(shí)，就可以加入紫色作為過渡才能呈現(xiàn)完美的視覺效果。

知識(shí)點(diǎn)：

在搭配漸變色時(shí)，盡量只改變其色相（H）、飽和度（S）、明度（B）中的一項(xiàng)，這樣才能創(chuàng)造出和諧的漸變色方案

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

蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）www.xintaizi.com 是一家專注而深入的界面設(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。

我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。

評(píng)論(0) 瀏覽(219)

092026-3

高手設(shè)計(jì)彈窗的12個(gè)切入點(diǎn)

清陽系統(tǒng)UI設(shè)計(jì)文章及欣賞

在日常的數(shù)字產(chǎn)品設(shè)計(jì)中，彈窗雖小，卻往往承擔(dān)著轉(zhuǎn)化用戶、傳遞信息、引導(dǎo)行為的關(guān)鍵角色。一個(gè)恰到好處的彈窗，能讓用戶體驗(yàn)如絲般順滑；而一個(gè)設(shè)計(jì)粗糙的彈窗，則可能成為用戶流失的導(dǎo)火索。

基于上百個(gè)真實(shí)的實(shí)戰(zhàn)案例深度拆解，蘭亭妙微ui設(shè)計(jì)公司總結(jié)出 12 種超實(shí)用的彈窗設(shè)計(jì)切入點(diǎn)。每一種都附有真實(shí)案例與核心優(yōu)點(diǎn)，既好上手又具備延展性。無論你是想介紹產(chǎn)品功能、推送運(yùn)營活動(dòng)，還是引導(dǎo)用戶互動(dòng)，都能在這里找到適配方案，助你快速擺脫靈感瓶頸，讓小小彈窗既好看又好用。

窗已是產(chǎn)品核心視覺焦點(diǎn)之一，產(chǎn)品整體功能定型后，彈窗會(huì)隨運(yùn)營活動(dòng)持續(xù)迭代創(chuàng)新。本文基于上百個(gè)實(shí)戰(zhàn)案例拆解，總結(jié)出 12 種易上手、延展性強(qiáng)的彈窗設(shè)計(jì)切入點(diǎn)，每種均搭配真實(shí)應(yīng)用案例并提煉核心優(yōu)勢，適配產(chǎn)品功能介紹、運(yùn)營活動(dòng)推送、用戶互動(dòng)引導(dǎo)等多元場景，助力設(shè)計(jì)者突破靈感瓶頸，打造顏值與實(shí)用性兼具的彈窗設(shè)計(jì)。

01 卡片疊加式設(shè)計(jì)

小卡片錯(cuò)落超出大卡片的疊加形式，讓彈窗視覺上靈動(dòng)有層次，同時(shí)保證信息傳達(dá)清晰明了，避免因設(shè)計(jì)疊加導(dǎo)致的內(nèi)容混亂。

02 相冊(cè)式產(chǎn)品卡片設(shè)計(jì)

將產(chǎn)品卡片與相冊(cè)樣式的圖例相結(jié)合，視覺呈現(xiàn)貼合內(nèi)容展示邏輯，尤其適合用于介紹產(chǎn)品功能、展示產(chǎn)品效果的彈窗場景，直觀傳遞核心信息。

03 中間圖標(biāo) + 方形卡片設(shè)計(jì)

以方形卡片為基底，搭配居中核心圖標(biāo)，是基礎(chǔ)且經(jīng)典的設(shè)計(jì)形式。操作簡單易上手，同時(shí)具備極強(qiáng)的延展性，可適配多種產(chǎn)品風(fēng)格與使用場景。

04 IP 形象 + 方形卡片設(shè)計(jì)

將產(chǎn)品專屬 IP 形象與方形卡片融合，是創(chuàng)意枯竭時(shí)的優(yōu)質(zhì)普適性方案。借助 IP 的視覺辨識(shí)度，讓彈窗兼具美觀度與趣味性，強(qiáng)化產(chǎn)品記憶點(diǎn)。

05 擬人化表情圖標(biāo) + 異形卡片設(shè)計(jì)

異形卡片打破傳統(tǒng)方形彈窗的刻板感，搭配擬人化表情圖標(biāo)，為彈窗增添人情味與趣味性；再結(jié)合明快的陽光配色，進(jìn)一步提升頁面的歡樂氛圍，拉近與用戶的距離。

06 圖標(biāo) + 空氣彈框設(shè)計(jì)

摒棄傳統(tǒng)彈窗的底色與邊框，僅保留簡約圖標(biāo)與核心文案。無多余視覺元素干擾，讓關(guān)鍵信息在頁面中更突出、更矚目，極簡設(shè)計(jì)適配輕量化信息傳遞需求。

07 簡約插畫組合 + 方形彈框設(shè)計(jì)

在方形彈框上方搭配簡約插畫組合，下方對(duì)應(yīng)核心標(biāo)題文案，圖文結(jié)合讓彈窗內(nèi)容更豐富有層次。不僅提升視覺美感，更讓信息傳達(dá)更有力度，打造強(qiáng)記憶點(diǎn)。

08 信封式彈框設(shè)計(jì)

經(jīng)典的信封造型彈窗，是跨平臺(tái)、跨場景的普適性設(shè)計(jì)形式。雖無新穎創(chuàng)意，但因適配性強(qiáng)、用戶接受度高，至今仍被各大平臺(tái)廣泛應(yīng)用，適配各類基礎(chǔ)信息與活動(dòng)推送。

09 IP 配標(biāo)題文字 + 空氣彈框設(shè)計(jì)

將俏皮的產(chǎn)品 IP 與簡潔的標(biāo)題文字結(jié)合，采用無底色的空氣彈框形式，兼顧趣味性與信息傳遞效率。視覺上輕盈吸睛，能快速讓用戶捕捉核心內(nèi)容，高效完成信息觸達(dá)。

10 無定式彈框設(shè)計(jì)

跳出異形、方形的傳統(tǒng)彈窗框架，以核心內(nèi)容（如優(yōu)惠券、福利券）的有序排列形成 “隱形彈窗”。看似無固定形態(tài)，實(shí)則內(nèi)容排布有章法，能最大程度突顯核心信息，徹底打破常規(guī)設(shè)計(jì)的思維束縛。

這一設(shè)計(jì)也帶來重要啟示：彈窗設(shè)計(jì)的核心是精準(zhǔn)表達(dá)需求，無需被固有樣式限制，讓設(shè)計(jì)為內(nèi)容與場景服務(wù)。

11 底部彈出式插畫彈窗

從頁面底部滑出的彈窗形式，視覺矚目性適中，不會(huì)過度干擾用戶對(duì)主頁面的瀏覽，底部頁面信息仍可清晰查看。搭配簡約插畫，既豐富視覺層次，又避免彈窗設(shè)計(jì)過于單調(diào)。

12 底部彈出式空氣插畫彈窗

融合底部彈出的輕干擾形式與空氣彈框的無框底特點(diǎn)，搭配插畫設(shè)計(jì)，擺脫傳統(tǒng)彈窗的樣式束縛。視覺上氛圍感與感染力拉滿，核心標(biāo)題更醒目，適配沉浸式體驗(yàn)的產(chǎn)品場景與氛圍感營銷活動(dòng)。

蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）www.xintaizi.com 是一家專注而深入的界面設(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。

我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。

評(píng)論(0) 瀏覽(170)

092026-3

如何提升UI設(shè)計(jì)的高級(jí)感

清陽設(shè)計(jì)資源

我們平常會(huì)使用很多APP，久而久之我們會(huì)發(fā)現(xiàn)一些APP的設(shè)計(jì)非常的相似；一個(gè)有新意、精致的APP界面可以讓用戶產(chǎn)生很深的影響，對(duì)產(chǎn)品的形象也有一定的幫助；本文由蘭亭妙微UI設(shè)計(jì)公司分享了關(guān)于如何提升UI設(shè)計(jì)的高級(jí)感的方法，我們一起來看一下。

一個(gè)App設(shè)計(jì)是否精致，是否富有設(shè)計(jì)感，在于它的細(xì)節(jié)，這就意味著我們?cè)谶M(jìn)行設(shè)計(jì)的時(shí)候，要從細(xì)微之處著手，從多方面去鉆研如何創(chuàng)造出打動(dòng)人心的UI設(shè)計(jì)。

本文總結(jié)了12個(gè)簡單直觀的提升設(shè)計(jì)感的小細(xì)節(jié)，一起來學(xué)習(xí)。

一、使用顏色深淺構(gòu)建層次結(jié)構(gòu)

在對(duì)UI 文本進(jìn)行樣式控制的時(shí)候，最常見的錯(cuò)誤莫過于過度依賴字體大小差異來營造對(duì)比；單純使用字體大小對(duì)比，所營造的對(duì)比并不夠，嘗試結(jié)合色彩和字重來營造更好的對(duì)比效果。

每種顏色都有一個(gè)視覺權(quán)重，這有助于在內(nèi)容中建立層次結(jié)構(gòu)；通過使用顏色的深淺，為元素賦予不同的重要性。

如果可以的話，你甚至可以采用兩到三種顏色：

主要內(nèi)容使用深灰色（諸如標(biāo)題，但是不要用純黑）；
次要內(nèi)容使用灰色（比如商品介紹）；
輔助性內(nèi)容采用淺灰色（比如發(fā)布日期）；

類似的，在UI設(shè)計(jì)的時(shí)候，通常兩種不同的字重足以營造出優(yōu)秀的層次感：

大多數(shù)的文本采用正常的字重（400到500，具體取決于字體）；
對(duì)于需要強(qiáng)調(diào)的文字采用較重的字重（600到700，具體取決于字體）；

▲主標(biāo)題字重為600，其他標(biāo)綠點(diǎn)的文字字重都為400

應(yīng)當(dāng)盡量不要讓正文部分字重低于400，因?yàn)檫@一部分字體本身尺寸已經(jīng)較小，低于400會(huì)使得可讀性不佳。

如果你依然需要降低字重，那么不妨讓字體色彩更淺一點(diǎn)，或者替換成其他識(shí)別度較強(qiáng)、字重相對(duì)較小的字體。

灰色文字在無彩/彩色背景下要分開處理：

不要在有色背景上使用灰色的文本，在白色背景下，將黑色的文本改成灰色（或者在黑色背景下使用灰色文本），是不錯(cuò)的淡化其視覺效果的做法。

但是在彩色背景下，想要降低和背景色之間的對(duì)比，通常有兩種方法：

一是降低白色文本的不透明度；二是讓文本逐步接近背景色，而不是改為灰色。

▲左圖設(shè)計(jì)師職位信息為白色文字降低不透明度，右圖為和背景同色相高明度的顏色

其次當(dāng)涉及長篇內(nèi)容時(shí)，大面積的深色粗體字會(huì)給人一種沉重感，而且很跳躍；通過選擇類似深灰色（#4F4F4F）這樣的顏色可以很容易地解決這個(gè)問題，使文字更容易被識(shí)別。

二、統(tǒng)一色調(diào)

選擇一種基礎(chǔ)色，再調(diào)整色調(diào)和顏色深淺來增加均衡；設(shè)計(jì)時(shí)避免用過多的顏色。如果項(xiàng)目允許，只需使用固定的色板，通過調(diào)整基礎(chǔ)色的飽和度和明度，利用這種簡單的方式為設(shè)計(jì)增加一致性。

三、干凈的陰影

陰影是UI設(shè)計(jì)中最常見的視覺表現(xiàn)手法，它可以增加元素的深度，使其從背景中脫穎而出，引起用戶的注意力，同時(shí)也能增強(qiáng)畫面的視覺層次感。

相比于采用大范圍的擴(kuò)散模糊陰影，使用微妙的垂直偏移陰影效果更明顯，更自然，它模擬了最常見的光源特征，光線從上往下照下來所營造的陰影效果。

這種輕柔的陰影呈現(xiàn)出的干凈，增加了畫面的精致；如果陰影的范圍太小或顏色太深，位置也沒有偏移，而是聚集在元素的四周，就會(huì)讓畫面更加扁平，讓視覺變得厚重，呈現(xiàn)出不精致的畫面感。

陰影不一定是黑色的，還有一種擴(kuò)算陰影是模擬元素本身的顏色投射在背景上，由于陰影與元素的色調(diào)一致，因此呈現(xiàn)出十分融洽的畫面感。

在UI設(shè)計(jì)中，這種手法不宜過多使用，否則呈現(xiàn)出的各種色彩搭配會(huì)讓人眼花繚亂。

四、個(gè)性的圖標(biāo)設(shè)計(jì)

合格的設(shè)計(jì)師能夠繪制風(fēng)格統(tǒng)一的圖標(biāo)，而優(yōu)秀的設(shè)計(jì)師能夠創(chuàng)造風(fēng)格獨(dú)特的圖標(biāo)。

我們能否在追求大小一致，圓角一致，線寬一致和配色一致的同時(shí)，為它的視覺表現(xiàn)力加入更多的創(chuàng)意呢？例如下面這組圖標(biāo)設(shè)計(jì)，無論是在圖形上的創(chuàng)新，還是顏色搭配上都呈現(xiàn)出無與倫比的創(chuàng)意。

標(biāo)簽欄作為一個(gè)App的全局導(dǎo)航起著至關(guān)重要的作用，它的設(shè)計(jì)影響著整個(gè)產(chǎn)品的視覺風(fēng)格。

通常，大多數(shù)App都是使用iOS規(guī)范的設(shè)計(jì)樣式（默認(rèn)灰色，選中填充品牌色），這樣的設(shè)計(jì)太普通，太常見了；要想讓標(biāo)簽欄圖標(biāo)設(shè)計(jì)精致和富有個(gè)性，可以豐富每一個(gè)選中態(tài)圖標(biāo)的視覺表現(xiàn)，例如給圖標(biāo)加上背景和表情，即顯得生動(dòng)有趣，又增加了用戶的好感，給人留下深刻的印象。

3D立體圖標(biāo)設(shè)計(jì)是近幾年來的流行趨勢，看上去十分精致、華麗，但是看久了會(huì)讓人產(chǎn)生輕微的視覺疲勞，同時(shí)因其復(fù)雜的結(jié)構(gòu)會(huì)增加用戶的認(rèn)知成本，一般在外賣美食類應(yīng)用中比較常見。

五、Tab的設(shè)計(jì)感

Tab是App設(shè)計(jì)中最常見的控件之一，它源自Material Design的設(shè)計(jì)規(guī)范；現(xiàn)在很多iOS產(chǎn)品當(dāng)中也開始使用這種導(dǎo)航欄樣式來進(jìn)行設(shè)計(jì)，而原本屬于iOS規(guī)范當(dāng)中的分段選擇器變得不那么常見了。

在視覺表現(xiàn)形式上，Tab和標(biāo)簽欄同樣也分為選中態(tài)和未選態(tài)，它的設(shè)計(jì)較為簡單，通常是使用一組文字標(biāo)簽，通過顏色或在標(biāo)簽下加上小長條來區(qū)分兩者的狀態(tài)；因?yàn)樗唵危瑓s越難設(shè)計(jì)出彩，要發(fā)揮極大的設(shè)計(jì)想象力，跳脫出設(shè)計(jì)規(guī)范的限制，才能找到完美的方案。

例如蝦米音樂的Tab選中態(tài)是一段音頻波線，再配合文字的大小對(duì)比，一個(gè)富有設(shè)計(jì)感又符合產(chǎn)品特征的Tabs就被創(chuàng)造出來了。

我們還可以從品牌基因中獲取靈感，品牌作為用戶熟知的形象是個(gè)絕佳的來源。

從品牌形象中提取具有獨(dú)特氣質(zhì)的視覺富豪作為Tab選中態(tài)的小長條，這樣就建立起視覺上的聯(lián)系，讓用戶產(chǎn)生由內(nèi)而外的一致感受；例如馬蜂窩品牌形象中的微笑符號(hào)和飛豬旅行品牌形象中的豬頭都被延伸到Tab的設(shè)計(jì)上，既讓界面視覺獨(dú)一無二，又進(jìn)一步強(qiáng)化了用戶對(duì)品牌形象的認(rèn)知。

六、無框設(shè)計(jì) 去繁從簡

在UI設(shè)計(jì)中，有許多的裝飾元素，如卡片的邊框、列表的分割線等，雖然邊框，分割線是分隔兩個(gè)元素的好辦法，但是它不是唯一的方法；使用過多會(huì)讓整個(gè)布局的設(shè)計(jì)感降低，或多或少都會(huì)干擾用戶瀏覽的視線，讓信息內(nèi)容失去注意力，因此可以減少不必要的裝飾元素。

我們可以通過以下幾個(gè)方法來劃分元素的視覺層次，讓畫面變得干凈，整齊：

1）使用陰影

陰影同樣可以營造出邊界感，而且相比邊框分割線更加微妙，并不會(huì)顯得突兀，不會(huì)分散用戶的注意力，讓內(nèi)容更聚焦。

2）使用不同的背景色來區(qū)分

通常，相鄰的元素背景只需要有微妙的差別就能夠讓人對(duì)他們進(jìn)行區(qū)分；所以，你所需要做的就是在不同的區(qū)塊采用不同的背景色，并且嘗試刪除分割線，因?yàn)槟愀静恍枰?/p>

3）增加額外的留白

創(chuàng)建元素之間的分離效果，并不一定要通過線框來表現(xiàn)，只要增加留白，讓它們分隔開就行了，通過留白和間距來實(shí)現(xiàn)元素分組是UI設(shè)計(jì)中的常用手法。

七、統(tǒng)一設(shè)計(jì)元素

在App中的每一個(gè)界面都有許多元素，那些同類的元素應(yīng)保持統(tǒng)一的設(shè)計(jì)樣式。

通常個(gè)人中心的標(biāo)簽欄圖標(biāo)是一個(gè)人形剪影，它代表著用戶，因此可以在展示用戶頭像和用戶形象的界面中延續(xù)使用。

如果圖形擁有獨(dú)特的外觀，如橢圓矩形，也可以作為視覺符號(hào)的一種，延續(xù)到其他界面中，成為圖形或按鈕的外觀；這樣，整個(gè)界面就被統(tǒng)一的設(shè)計(jì)元素聯(lián)系起來了，給用戶始終如一的一致感。

八、符合產(chǎn)品氣質(zhì)的字體

選擇符合產(chǎn)品氣質(zhì)的字體，可以與產(chǎn)品的定位相吻合，傳遞給用戶正確的情感意識(shí)。

雖然默認(rèn)字體可以滿足大多數(shù)App 的設(shè)計(jì)需求，但會(huì)出現(xiàn)一個(gè)問題就是——系統(tǒng)字體的普適性并沒有什么特色，在一些特定的情境下就顯得收效甚微；例如在運(yùn)動(dòng)類App中更適合粗壯的斜體來傳遞力量、爆發(fā)力、速度的感覺，換成系統(tǒng)字體后，整體感覺在氣勢上就變?nèi)趿撕芏唷?/p>

九、第三方圖標(biāo)風(fēng)格統(tǒng)一

大多數(shù)App都支持三方登陸，他可以減輕用戶注冊(cè)的時(shí)間成本。

通常是在注冊(cè)登陸頁的底部展示第三方圖標(biāo)入口，這也是設(shè)計(jì)師最常忽略的內(nèi)容，往往是直接將第三方圖標(biāo)調(diào)整一致大小和擺放整齊位置，沒有針對(duì)它們?cè)僭O(shè)計(jì)；一個(gè)設(shè)計(jì)精致的App不應(yīng)漏過任何的細(xì)節(jié)，我們可以以自家App的圖標(biāo)風(fēng)格為依據(jù)，對(duì)第三方圖標(biāo)進(jìn)行優(yōu)化設(shè)計(jì)。

十、圖片中尋找色彩

App中優(yōu)美的圖文設(shè)計(jì)，能帶給用戶如沐春風(fēng)的視覺享受，它非常重要。我們經(jīng)常看到文字疊加在圖片背景上的設(shè)計(jì)樣式；為了減少復(fù)雜圖片背景對(duì)文字的干擾，通常的做法是疊加半透明度的黑色蒙版，讓白色文字清晰可見，但這不是最優(yōu)的辦法。

我們可以從圖片中提取主色調(diào)用于疊加背景的填充色，這樣就使文字、色塊和圖片融入到一起了，畫面變得高級(jí)和富有設(shè)計(jì)感。

十一、提高圖片質(zhì)量

圖片的質(zhì)量影響著整個(gè)App的格調(diào)和用戶的情緒，高品質(zhì)的圖片給人愉悅的視覺享受，產(chǎn)生美好的聯(lián)想；而低品質(zhì)的圖片會(huì)瞬間拉低App的質(zhì)感。

在App設(shè)計(jì)中，一張漂亮的圖片從收集到上線，需要經(jīng)過裁剪，調(diào)色等過程才能被使用；即使是普通的商品圖片，我們將它摳圖后調(diào)整成統(tǒng)一大小，再加上干凈的背景，就能立刻提升商品的美感，界面視覺也會(huì)變得美觀、整潔。

十二、卡片式設(shè)計(jì)

現(xiàn)在的UI界面設(shè)計(jì)中，卡片式設(shè)計(jì)已經(jīng)是一種非常常見的設(shè)計(jì)形式，它有利于信息分層和整合，劃分出更加清晰的組織結(jié)構(gòu)，實(shí)現(xiàn)復(fù)雜內(nèi)容的簡化處理，提高空間利用率；同時(shí)卡片式設(shè)計(jì)通常很依賴視覺元素，很強(qiáng)的視覺元素正是卡片式設(shè)計(jì)的一種優(yōu)勢，也是提升設(shè)計(jì)品質(zhì)感的良方。

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

蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）www.xintaizi.com 是一家專注而深入的界面設(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。

我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。

評(píng)論(0) 瀏覽(164)

092026-3

人人都可以是設(shè)計(jì)師：UI&UX 小技巧大全（二）

清陽設(shè)計(jì)思維

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

用戶對(duì)產(chǎn)品的體驗(yàn)往往源于直觀感受，因此 UI&UX 設(shè)計(jì)直接影響著產(chǎn)品的成敗 —— 即便產(chǎn)品功能再強(qiáng)大，糟糕的界面與交互體驗(yàn)也會(huì)讓其價(jià)值大打折扣。

但想要優(yōu)化 UI&UX 設(shè)計(jì)，并非一定要掌握系統(tǒng)且全面的設(shè)計(jì)知識(shí)，有時(shí)只需一些細(xì)微的調(diào)整，就能讓設(shè)計(jì)效果實(shí)現(xiàn)質(zhì)的提升。Marc Andrew 總結(jié)了 36 個(gè)可落地的 UI&UX 優(yōu)化小技巧，分 6 篇系列文章呈現(xiàn)，本文為第二篇，希望能為設(shè)計(jì)師們提供實(shí)操參考。（原文發(fā)表于 Medium，標(biāo)題為：UI & UX micro-tips: Volume two）

在打造高效、美觀的 UI 界面時(shí)，那些看似不起眼的細(xì)節(jié)調(diào)整，往往能快速優(yōu)化設(shè)計(jì)效果與用戶體驗(yàn)。接下來，直接分享干貨技巧：

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

在設(shè)計(jì)界面中添加圖標(biāo)時(shí)，核心原則是選擇行業(yè)通用、用戶普遍認(rèn)可的樣式，確保圖標(biāo)能清晰傳遞操作意圖與功能含義。

對(duì)比兩種設(shè)計(jì)實(shí)例就能發(fā)現(xiàn)，使用表意模糊的自定義圖標(biāo)，會(huì)讓用戶產(chǎn)生操作困惑，形成認(rèn)知障礙；而選用標(biāo)準(zhǔn)化的通用圖標(biāo)，能讓用戶無需思考即可理解操作指向。設(shè)計(jì)中切勿為了追求個(gè)性，使用過于小眾、叛逆的圖標(biāo)樣式，徒增用戶的理解成本。

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

在對(duì)比、間隔、重復(fù)等經(jīng)典設(shè)計(jì)原則中，親密性原則是打造清晰界面的關(guān)鍵，能有效幫助用戶快速識(shí)別元素間的邏輯關(guān)系。

這一原則的落地方式十分簡單：將內(nèi)容相關(guān)、功能聯(lián)動(dòng)的設(shè)計(jì)元素就近排布，通過物理距離的遠(yuǎn)近，直觀體現(xiàn)元素間的關(guān)聯(lián)程度。反之，無關(guān)元素則保持合理間距。這樣的設(shè)計(jì)方式，能讓用戶在瀏覽網(wǎng)頁或 APP 時(shí)，快速建立對(duì)界面內(nèi)容的認(rèn)知，提升信息獲取效率。

對(duì)比設(shè)計(jì)實(shí)例可見，元素排布松散的界面會(huì)讓用戶難以識(shí)別邏輯關(guān)聯(lián)，而元素就近聚合的界面，能讓信息層級(jí)更清晰。

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

網(wǎng)格系統(tǒng)是界面排版的基礎(chǔ)，將4px 基線網(wǎng)格與通用的8px 網(wǎng)格搭配使用，能讓界面的垂直視覺節(jié)奏更和諧，尤其適用于字體排版環(huán)節(jié)。

具體實(shí)操方法為：讓字體對(duì)齊 4px 基線網(wǎng)格，同時(shí)將行高值設(shè)置為 4 的整數(shù)倍（如 16、20、24、28px 等）。之所以選擇 4px 作為基線網(wǎng)格單位，是因?yàn)閱渭円?8px 為倍數(shù)進(jìn)行伸縮，在處理部分文本尺寸時(shí)，靈活性與適配性會(huì)有所不足，而 4px 基線網(wǎng)格能彌補(bǔ)這一問題，與 8px 網(wǎng)格形成互補(bǔ)，讓整體排版更具秩序感。

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

標(biāo)題與長格式正文的排版需求截然不同：正文需要足夠的行高來保證閱讀舒適度，而標(biāo)題通常文字簡短，適當(dāng)縮小行高不僅不會(huì)影響閱讀，還能提升視覺緊湊度，讓標(biāo)題更具層次感。

設(shè)計(jì)中推薦將標(biāo)題行高設(shè)置為文字大小的 1-1.3 倍，且標(biāo)題文字越大，行高的倍數(shù)可適當(dāng)降低。對(duì)比行高過高與行高適中的設(shè)計(jì)實(shí)例能明顯發(fā)現(xiàn)，行高合適的標(biāo)題視覺更聚焦，能讓用戶快速捕捉核心信息。

五、色輪類似配色，快速打造和諧配色方案

若在設(shè)計(jì)中陷入配色選擇的困境，色輪類似配色法會(huì)是高效的解決方案 —— 類似色（也叫鄰接色相 / 相鄰色相）是最易打造視覺和諧的配色方案之一。

類似色指色輪上相鄰的色相，由原色、間色與復(fù)色組合而成，基于這一原則選擇配色，能快速搭建出簡潔且無視覺違和感的色彩體系。借助色輪選擇相鄰色相進(jìn)行搭配，無需復(fù)雜的色彩調(diào)試，就能讓界面配色達(dá)到和諧統(tǒng)一的效果，大幅提升配色效率。

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

設(shè)計(jì)的清晰度與可用性，核心在于提升信噪比—— 這里的 “信號(hào)” 指產(chǎn)品想要傳遞的核心相關(guān)信息，“噪音” 則是無意義的干擾元素。通過讓信號(hào)最大化、噪音最小化，能讓用戶快速聚焦核心內(nèi)容，提升信息獲取效率。

實(shí)現(xiàn)這一目標(biāo)的關(guān)鍵方法為：一方面通過強(qiáng)化視覺層級(jí)，讓核心信息（信號(hào)）得到有效凸顯；另一方面堅(jiān)決剔除或弱化無關(guān)的文字、圖標(biāo)、裝飾等元素（噪音），避免分散用戶注意力。

對(duì)比兩種設(shè)計(jì)實(shí)例能看到，元素堆砌、信息雜亂的界面會(huì)讓用戶難以捕捉重點(diǎn)，而剔除冗余元素、聚焦核心信息的界面，視覺更簡潔，用戶能快速獲取關(guān)鍵內(nèi)容。簡言之，剔除無關(guān)、簡化界面、突出核心，是提升設(shè)計(jì)信噪比的核心要義。

希望這些 UI&UX 微調(diào)技巧，能為大家的設(shè)計(jì)實(shí)踐提供新思路，讓每一處細(xì)節(jié)調(diào)整都能為產(chǎn)品體驗(yàn)賦能。

蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）www.xintaizi.com 是一家專注而深入的界面設(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。

我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。

評(píng)論(0) 瀏覽(121)

092026-3

B端與C端設(shè)計(jì)：效率邏輯與情感邏輯的本質(zhì)區(qū)別

清陽交互設(shè)計(jì)及用戶體驗(yàn)

在數(shù)字化產(chǎn)品全面滲透的當(dāng)下，UI設(shè)計(jì)早已不是單一的視覺美化工作，而是根據(jù)產(chǎn)品定位、用戶需求、商業(yè)目標(biāo)分化出清晰賽道的專業(yè)體系。其中，B端設(shè)計(jì)與C端設(shè)計(jì)作為兩大核心分支，看似同屬用戶體驗(yàn)設(shè)計(jì)范疇，卻在目標(biāo)設(shè)定、核心原則、實(shí)現(xiàn)路徑、落地細(xì)節(jié)上有著天壤之別，二者各司其職又相輔相成，共同構(gòu)成了完整的數(shù)字化用戶體驗(yàn)版圖。本文將結(jié)合蘭亭妙微UI設(shè)計(jì)公司多年深耕UI設(shè)計(jì)領(lǐng)域的實(shí)戰(zhàn)經(jīng)驗(yàn)，全方位拆解B端與C端設(shè)計(jì)的核心差異，幫助從業(yè)者、企業(yè)方精準(zhǔn)把握兩類設(shè)計(jì)的精髓，打造適配場景、貼合需求的優(yōu)質(zhì)產(chǎn)品。

B 端與 C 端設(shè)計(jì)：效率邏輯與情感邏輯的本質(zhì)分野

在數(shù)字產(chǎn)品的設(shè)計(jì)版圖中，B 端與 C 端設(shè)計(jì)如同一枚硬幣的兩面，同屬用戶體驗(yàn)構(gòu)建的核心組成，卻因服務(wù)場景、用戶需求的本質(zhì)差異，形成了效率至上與情感共鳴的兩種核心邏輯。二者的區(qū)別遠(yuǎn)不止于界面布局、交互細(xì)節(jié)的表層差異，更根植于價(jià)值主張的根本不同：B 端設(shè)計(jì)以工具理性為核心，追求復(fù)雜業(yè)務(wù)中的極致效率與嚴(yán)謹(jǐn)秩序；C 端設(shè)計(jì)以用戶感性為導(dǎo)向，致力于在輕量化交互中建立深度情感連接與使用愉悅。本文將從目標(biāo)設(shè)定、設(shè)計(jì)原則、復(fù)雜性呈現(xiàn)等七大維度，深度剖析二者的核心差異，同時(shí)解讀當(dāng)下行業(yè)的融合趨勢，為產(chǎn)品設(shè)計(jì)提供底層邏輯參考。

一、目標(biāo)設(shè)定：任務(wù)完成的工具性 VS 體驗(yàn)愉悅的情感性

B 端設(shè)計(jì)：效率至上的工具理性

B 端產(chǎn)品的核心價(jià)值在于解決企業(yè)明確的商業(yè)問題，通過優(yōu)化業(yè)務(wù)流程提升組織效能、降低運(yùn)營成本，其用戶使用產(chǎn)品的核心訴求是完成特定工作任務(wù)，而非興趣或娛樂。這種強(qiáng)工具屬性，決定了 B 端設(shè)計(jì)的核心導(dǎo)向是最大化功能效用，最小化任務(wù)完成時(shí)間，讓專業(yè)從業(yè)者能高效處理復(fù)雜業(yè)務(wù)。

典型案例：釘釘工作平臺(tái)

作為企業(yè)級(jí)協(xié)作工具的標(biāo)桿，釘釘?shù)脑O(shè)計(jì)深度契合 B 端產(chǎn)品的效率邏輯，所有設(shè)計(jì)選擇均圍繞企業(yè)業(yè)務(wù)落地展開：

功能密度優(yōu)先：單屏承載多模塊信息，大幅減少跨頁面跳轉(zhuǎn)的操作成本；
組織架構(gòu)可視化：將企業(yè)層級(jí)、權(quán)限關(guān)系在界面中直觀呈現(xiàn)，明確業(yè)務(wù)協(xié)作邊界；
任務(wù)流程線性化：把審批、匯報(bào)等核心企業(yè)流程標(biāo)準(zhǔn)化，規(guī)避操作冗余；
數(shù)據(jù)呈現(xiàn)結(jié)構(gòu)化：報(bào)表、統(tǒng)計(jì)數(shù)據(jù)以最直接的形式展示，降低專業(yè)數(shù)據(jù)的解讀成本。

釘釘?shù)?“已讀未讀”“DING 一下” 強(qiáng)提醒功能，從純用戶體驗(yàn)視角看雖有 “壓迫感”，但從企業(yè)管理效率出發(fā)，卻是確保信息高效傳達(dá)、業(yè)務(wù)及時(shí)推進(jìn)的必要設(shè)計(jì)，精準(zhǔn)滿足了組織對(duì)信息可控性、業(yè)務(wù)落地性的核心需求。

C 端設(shè)計(jì)：情感連接的用戶共鳴

C 端產(chǎn)品身處注意力稀缺的市場環(huán)境，用戶的使用意愿源于情感認(rèn)同而非任務(wù)壓力，產(chǎn)品的成功與否，核心取決于能否在用戶心中建立深度情感連接，創(chuàng)造超越功能本身的體驗(yàn)愉悅。相較于 B 端的 “完成任務(wù)”，C 端更追求 “愿意使用、樂于分享” 的用戶心智。

典型案例：微信

從即時(shí)通訊工具成長為全民數(shù)字生活平臺(tái)，微信的設(shè)計(jì)演進(jìn)是 C 端產(chǎn)品構(gòu)建情感連接的經(jīng)典范本，其設(shè)計(jì)策略始終圍繞用戶體驗(yàn)與社交共鳴展開：

漸進(jìn)式功能披露：從基礎(chǔ)通訊出發(fā)，逐步上線朋友圈、公眾號(hào)、小程序、視頻號(hào)，讓用戶在熟悉產(chǎn)品的基礎(chǔ)上自然接受功能拓展，降低認(rèn)知門檻；
社交場景自然延伸：將紅包這一傳統(tǒng)民俗數(shù)字化，打造全新的社交互動(dòng)模式，讓功能成為情感傳遞的載體；
界面極致簡潔：核心聊天界面十年基本不變，以穩(wěn)定的交互體驗(yàn)降低用戶的記憶成本；
生態(tài)化而不臃腫：通過小程序?qū)崿F(xiàn)功能無限拓展，同時(shí)保持主應(yīng)用的輕量化，兼顧體驗(yàn)與實(shí)用性。

微信早期的 “搖一搖” 無強(qiáng)實(shí)用價(jià)值，卻通過簡單的交互動(dòng)作創(chuàng)造了新奇的社交體驗(yàn)；朋友圈的半封閉分享模式，雖限制了內(nèi)容傳播范圍，卻提升了強(qiáng)關(guān)系社交的互動(dòng)質(zhì)量與情感安全感，讓產(chǎn)品與用戶的社交需求深度綁定。

二、設(shè)計(jì)原則：復(fù)雜中的秩序構(gòu)建 VS 簡單中的體驗(yàn)深度

B 端：在復(fù)雜性中建立可落地的秩序

B 端產(chǎn)品的核心設(shè)計(jì)挑戰(zhàn)，在于面對(duì)不可避免的業(yè)務(wù)復(fù)雜性時(shí)，建立清晰、可復(fù)制的使用路徑。專業(yè)工具的價(jià)值往往與功能深度正相關(guān)，因此設(shè)計(jì)師的核心任務(wù)并非消除復(fù)雜性，而是管理復(fù)雜性，讓復(fù)雜的業(yè)務(wù)邏輯轉(zhuǎn)化為可被用戶理解、操作的系統(tǒng)。

信息架構(gòu)的深度與廣度平衡

以金山 WPS 企業(yè)版為例，作為服務(wù)企業(yè)全流程辦公的專業(yè)套件，其需滿足從基礎(chǔ)文檔編輯到復(fù)雜企業(yè)管理的多層次需求，對(duì)應(yīng)的設(shè)計(jì)解決方案精準(zhǔn)且落地：
- 模塊化功能區(qū)：將數(shù)百項(xiàng)功能按辦公場景分類組織，讓用戶能快速定位所需功能；
- 上下文智能顯示：根據(jù)用戶當(dāng)前操作動(dòng)態(tài)調(diào)整工具欄，避免無關(guān)功能造成的視覺干擾；
- 多視圖支持：為同一文檔提供編輯、審閱、閱讀等多模式，匹配不同辦公場景的使用需求；
- 模板系統(tǒng)化：內(nèi)置符合企業(yè)規(guī)范的各類文檔模板，降低企業(yè)辦公的標(biāo)準(zhǔn)化成本。
一致性與可預(yù)測性

一致性設(shè)計(jì)是 B 端產(chǎn)品減少用戶認(rèn)知負(fù)荷的關(guān)鍵，飛書作為企業(yè)協(xié)作平臺(tái)，將這一原則貫穿設(shè)計(jì)全流程：
- 操作模式統(tǒng)一：所有列表的排序、篩選、分組操作遵循相同邏輯，讓用戶 “一次學(xué)會(huì)，處處能用”；
- 反饋機(jī)制標(biāo)準(zhǔn)化：成功、警告、錯(cuò)誤提示采用統(tǒng)一的視覺語言，讓用戶能快速識(shí)別操作結(jié)果；
- 導(dǎo)航結(jié)構(gòu)穩(wěn)定：核心導(dǎo)航項(xiàng)位置固定，不因功能更新而頻繁變動(dòng)，保障業(yè)務(wù)操作的連續(xù)性。

C 端：在簡單中創(chuàng)造有溫度的體驗(yàn)深度

C 端產(chǎn)品的設(shè)計(jì)挑戰(zhàn)與 B 端截然相反 —— 如何在保持表面交互簡單的同時(shí)，提供足夠豐富的體驗(yàn)深度。用戶不會(huì)為 “強(qiáng)大但復(fù)雜” 的產(chǎn)品買單，卻愿意為 “簡單卻有趣、有溫度” 的產(chǎn)品投入時(shí)間，因此 C 端設(shè)計(jì)的核心是輕量化交互 + 高價(jià)值體驗(yàn)。

認(rèn)知負(fù)荷最小化

抖音的界面設(shè)計(jì)是降低 C 端用戶認(rèn)知負(fù)荷的典范，讓不同年齡、不同互聯(lián)網(wǎng)認(rèn)知的用戶都能快速上手：
- 單一內(nèi)容焦點(diǎn)：全屏展示單個(gè)視頻，排除所有干擾元素，讓用戶專注于內(nèi)容本身；
- 手勢操作統(tǒng)一：上滑切換內(nèi)容、雙擊點(diǎn)贊、左滑進(jìn)入主頁，以最直觀的手勢替代復(fù)雜操作；
- 零文本界面：幾乎無需閱讀任何說明文字，實(shí)現(xiàn) “無教程式操作”；
- 即時(shí)反饋強(qiáng)化：點(diǎn)贊時(shí)的愛心動(dòng)畫、評(píng)論后的快速回復(fù)提醒，以視覺化反饋明確操作結(jié)果，提升使用愉悅感。
情感化交互設(shè)計(jì)

從微信的 “拍一拍” 到小象超市的 “加購動(dòng)畫”，這些看似 “非必要” 的設(shè)計(jì)元素，實(shí)則是 C 端產(chǎn)品建立用戶粘性的關(guān)鍵，其核心價(jià)值體現(xiàn)在三方面：
- 增加產(chǎn)品個(gè)性：通過微交互打造獨(dú)特的產(chǎn)品氣質(zhì)，讓產(chǎn)品在同質(zhì)化市場中形成記憶點(diǎn)；
- 創(chuàng)造愉悅時(shí)刻：在完成核心操作時(shí)給予超出預(yù)期的反饋，讓簡單的操作變得有溫度；
- 強(qiáng)化行為習(xí)慣：通過積極的視覺、觸覺反饋，鼓勵(lì)用戶重復(fù)使用，逐步培養(yǎng)使用慣性。

三、復(fù)雜性呈現(xiàn)：顯性結(jié)構(gòu)的可管理 VS 隱性智能的輕量化

B 端：擁抱并管理顯性復(fù)雜性

B 端產(chǎn)品的復(fù)雜性是可見的、結(jié)構(gòu)化的，其面向的專業(yè)用戶具備理解業(yè)務(wù)復(fù)雜性的能力，而產(chǎn)品設(shè)計(jì)的核心是讓這種復(fù)雜性變得可管理、可操作，而非刻意隱藏。用戶通過理解系統(tǒng)的內(nèi)在邏輯，獲得對(duì)復(fù)雜業(yè)務(wù)的控制能力，進(jìn)而提升工作效率。

典型案例：明道云 aPaaS 平臺(tái)

明道云作為面向企業(yè)的低代碼平臺(tái)，需要支持用戶自定義復(fù)雜業(yè)務(wù)流程，其設(shè)計(jì)將顯性復(fù)雜性的管理做到了極致：

可視化流程設(shè)計(jì)器：通過拖拽組件構(gòu)建工作流，讓抽象的業(yè)務(wù)流程轉(zhuǎn)化為直觀的視覺圖表；
數(shù)據(jù)模型清晰展示：以可視化形式呈現(xiàn)實(shí)體關(guān)系，讓用戶能快速理解數(shù)據(jù)關(guān)聯(lián)邏輯；
權(quán)限矩陣明確配置：將每個(gè)角色的操作權(quán)限矩陣化展示，清晰界定不同崗位的操作邊界；
系統(tǒng)架構(gòu)透明化：向管理員開放 API 接口、數(shù)據(jù)表結(jié)構(gòu)，讓企業(yè)能根據(jù)自身需求進(jìn)行二次開發(fā)。

B 端產(chǎn)品對(duì)不同類型復(fù)雜性的管理策略各有側(cè)重，核心均為 “讓復(fù)雜可落地”：

表格

復(fù)雜性類型	設(shè)計(jì)應(yīng)對(duì)策略	典型案例
功能復(fù)雜性	模塊化組織、漸進(jìn)式披露	金山 WPS 企業(yè)版
流程復(fù)雜性	可視化工作流、狀態(tài)實(shí)時(shí)追蹤	明道云
數(shù)據(jù)復(fù)雜性	多維視圖、智能篩選排序	Tableau
權(quán)限復(fù)雜性	角色矩陣、分級(jí)授權(quán)管控	釘釘

C 端：將復(fù)雜性隱藏于智能背后

C 端產(chǎn)品的核心追求是“簡單的表面”，將所有技術(shù)、邏輯的復(fù)雜性隱藏在智能算法和后臺(tái)處理中，讓用戶在無感知的情況下享受復(fù)雜技術(shù)帶來的優(yōu)質(zhì)體驗(yàn)。用戶無需理解背后的邏輯，只需關(guān)注 “使用是否便捷、體驗(yàn)是否愉悅”。

典型案例：今日頭條的推薦系統(tǒng)

表面上，今日頭條只是一個(gè)支持無限刷新的信息流平臺(tái)，操作簡單到極致，但背后卻依托復(fù)雜的智能系統(tǒng)，實(shí)現(xiàn)了 “千人千面” 的內(nèi)容推薦：

實(shí)時(shí)興趣學(xué)習(xí)：根據(jù)用戶的每次點(diǎn)擊、停留時(shí)長、收藏轉(zhuǎn)發(fā)等行為，動(dòng)態(tài)調(diào)整推薦策略；
多維度內(nèi)容理解：對(duì)文本、視頻等不同形式的內(nèi)容進(jìn)行深度語義分析，精準(zhǔn)識(shí)別內(nèi)容核心價(jià)值；
個(gè)性化排序：基于用戶興趣標(biāo)簽，對(duì)信息流進(jìn)行個(gè)性化排序，讓用戶 “總能看到感興趣的內(nèi)容”。

C 端產(chǎn)品的隱性復(fù)雜性與表面簡化設(shè)計(jì)形成了完美的互補(bǔ)，最終轉(zhuǎn)化為優(yōu)質(zhì)的用戶體驗(yàn)：

表格

隱層復(fù)雜性	表面簡化設(shè)計(jì)	最終用戶體驗(yàn)
推薦算法	無限刷新信息流	內(nèi)容精準(zhǔn)匹配，提升使用粘性
內(nèi)容理解	統(tǒng)一的信息卡片樣式	不同形式內(nèi)容一致呈現(xiàn)，降低視覺認(rèn)知成本
興趣預(yù)測	個(gè)性化內(nèi)容排序	越用越懂用戶，提升體驗(yàn)契合度
A/B 測試系統(tǒng)	穩(wěn)定的界面與交互	產(chǎn)品持續(xù)優(yōu)化，用戶無感知適配

四、協(xié)作模式：結(jié)構(gòu)化協(xié)同的專業(yè)性 VS 社交化連接的輕量化

B 端：多角色工作流的精細(xì)設(shè)計(jì)

B 端協(xié)作產(chǎn)品的核心是服務(wù)企業(yè)組織的協(xié)同需求，需要支持不同崗位、不同角色的復(fù)雜互動(dòng)，因此設(shè)計(jì)必須兼顧權(quán)限、流程、信息安全三大核心約束，讓結(jié)構(gòu)化的協(xié)作流程落地，提升組織協(xié)同效率。

典型案例：飛書的協(xié)作架構(gòu)

飛書的設(shè)計(jì)充分考慮了企業(yè)協(xié)作的復(fù)雜性，從底層架構(gòu)上支撐多角色、多場景的結(jié)構(gòu)化協(xié)同：

角色化視圖：為不同崗位定制專屬信息面板，讓用戶只看到與自身工作相關(guān)的內(nèi)容，避免信息冗余；
權(quán)限精細(xì)控制：文檔、群聊的訪問權(quán)限可精確到個(gè)人，保障企業(yè)核心信息的安全；
流程節(jié)點(diǎn)明確：審批、任務(wù)分配等流程的狀態(tài)實(shí)時(shí)可見，讓每個(gè)角色都能清晰掌握業(yè)務(wù)推進(jìn)進(jìn)度；
異步協(xié)作優(yōu)化：通過評(píng)論、@提及、任務(wù)留言等功能，支持非實(shí)時(shí)協(xié)作，適配企業(yè)跨地域、跨時(shí)段的協(xié)作需求。

C 端：基于關(guān)系的輕量級(jí)互動(dòng)

C 端社交產(chǎn)品的協(xié)作核心是人與人的連接，而非標(biāo)準(zhǔn)化的業(yè)務(wù)流程，因此設(shè)計(jì)更偏向靈活、去中心化，重點(diǎn)在于降低互動(dòng)門檻、增加互動(dòng)趣味，讓用戶能輕松實(shí)現(xiàn)情感交流與信息共享。

典型案例：微信群的社交設(shè)計(jì)

微信群的設(shè)計(jì)完美體現(xiàn)了 C 端協(xié)作的輕量化特點(diǎn)，契合用戶的社交需求：

扁平化管理：群成員關(guān)系基本平等，管理員僅擁有基礎(chǔ)的管理權(quán)限，弱化層級(jí)感，提升交流自由度；
靈活進(jìn)退出：用戶可隨時(shí)加入或退出群聊，無復(fù)雜的審批流程，適配社交關(guān)系的動(dòng)態(tài)變化；
多媒體富互動(dòng)：支持文字、圖片、語音、視頻、紅包、小程序等多種互動(dòng)形式，讓情感表達(dá)更豐富；
弱流程約束：無固定的協(xié)作流程，對(duì)話自由流動(dòng)，適配日常社交的隨意性、多樣性。

五、演進(jìn)路徑：垂直深耕的專業(yè)化 VS 跨界擴(kuò)張的生態(tài)化

B 端：在專業(yè)領(lǐng)域持續(xù)垂直深耕

B 端產(chǎn)品的演進(jìn)始終圍繞行業(yè)專業(yè)化、業(yè)務(wù)深度化展開，往往沿著垂直專業(yè)化的路徑發(fā)展，在特定領(lǐng)域建立難以替代的專業(yè)壁壘。其新功能的開發(fā)與上線，均建立在已有專業(yè)深度的基礎(chǔ)上，與原有系統(tǒng)深度集成，保障數(shù)據(jù)與流程的一致性，避免因功能擴(kuò)張導(dǎo)致的業(yè)務(wù)混亂。

典型案例：金蝶云?蒼穹的演進(jìn)軌跡

金蝶云?蒼穹從單一財(cái)務(wù)軟件發(fā)展為企業(yè)級(jí)云原生平臺(tái)，其每一步演進(jìn)都緊扣垂直深耕的核心：

財(cái)務(wù)專業(yè)化階段：深度優(yōu)化會(huì)計(jì)憑證、財(cái)務(wù)報(bào)表等核心功能，打造財(cái)務(wù)領(lǐng)域的專業(yè)壁壘；
管理擴(kuò)展階段：在財(cái)務(wù)核心的基礎(chǔ)上，增加供應(yīng)鏈、生產(chǎn)制造、人力資源等模塊，實(shí)現(xiàn)企業(yè)管理的全流程覆蓋；
平臺(tái)開放階段：提供標(biāo)準(zhǔn)化開發(fā)平臺(tái)，支持企業(yè)根據(jù)自身業(yè)務(wù)需求進(jìn)行定制化擴(kuò)展；
智能化階段：引入 AI 技術(shù)，實(shí)現(xiàn)財(cái)務(wù)數(shù)據(jù)的智能分析、業(yè)務(wù)趨勢的精準(zhǔn)預(yù)測，從 “工具” 升級(jí)為 “企業(yè)決策助手”。

C 端：打破邊界的生態(tài)化擴(kuò)張

C 端產(chǎn)品的演進(jìn)更加大膽、激進(jìn)，核心圍繞用戶需求展開，常常跨越行業(yè)邊界，構(gòu)建以用戶為中心的全場景服務(wù)生態(tài)。其核心邏輯是 “以核心能力輻射多場景，以用戶需求驅(qū)動(dòng)功能擴(kuò)張”，通過打造一站式服務(wù)平臺(tái)，提升用戶的使用粘性與生命周期價(jià)值。

典型案例：美團(tuán)的邊界擴(kuò)張史

美團(tuán)從團(tuán)購網(wǎng)站成長為全民生活服務(wù)超級(jí)平臺(tái)，其擴(kuò)張路徑始終以用戶的生活服務(wù)需求為核心，以核心能力為支撐：

核心能力輻射：以外賣配送的即時(shí)性能力為基礎(chǔ)，拓展至生鮮、藥品、商超的即時(shí)配送，打造 “30 分鐘生活圈”；
場景自然延伸：從餐廳團(tuán)購出發(fā)，逐步覆蓋酒店預(yù)訂、旅游服務(wù)、電影票務(wù)、休閑娛樂等生活場景，實(shí)現(xiàn) “吃住行游購?qiáng)?rdquo; 全覆蓋；
數(shù)據(jù)網(wǎng)絡(luò)效應(yīng)：通過積累海量的用戶評(píng)價(jià)數(shù)據(jù)，提升服務(wù)與用戶的匹配效率，形成 “數(shù)據(jù)越豐富，體驗(yàn)越優(yōu)質(zhì)” 的正向循環(huán)；
協(xié)同價(jià)值創(chuàng)造：到店業(yè)務(wù)與外賣業(yè)務(wù)相互引流、相互促進(jìn)，實(shí)現(xiàn)不同業(yè)務(wù)板塊的協(xié)同發(fā)展，提升平臺(tái)整體價(jià)值。

六、成功衡量：可量化的效率指標(biāo) VS 多維度的體驗(yàn)評(píng)估

B 端：以客觀數(shù)據(jù)衡量效率提升

B 端產(chǎn)品的價(jià)值直接關(guān)聯(lián)企業(yè)的投資回報(bào)，其成功與否可通過明確、可量化的業(yè)務(wù)效率指標(biāo)來衡量，所有指標(biāo)均圍繞 “降本、增效、提質(zhì)” 展開，數(shù)據(jù)結(jié)果是產(chǎn)品價(jià)值的核心體現(xiàn)。

核心衡量指標(biāo)包括：

任務(wù)完成時(shí)間減少：核心業(yè)務(wù)流程的操作耗時(shí)降低百分比；
錯(cuò)誤率下降：人工操作失誤、流程銜接失誤的減少比例；
人力成本節(jié)約：通過自動(dòng)化、標(biāo)準(zhǔn)化替代的人工工作量；
流程標(biāo)準(zhǔn)化程度：企業(yè)內(nèi)部標(biāo)準(zhǔn)化流程占總業(yè)務(wù)流程的比例。

C 端：以主觀體驗(yàn)為核心的多維度評(píng)估

C 端產(chǎn)品的成功更具多元性與主觀性，其價(jià)值體現(xiàn)在用戶的使用意愿、粘性與口碑中，因此評(píng)估體系需兼顧數(shù)據(jù)指標(biāo)與主觀體驗(yàn)，核心圍繞 “用戶是否愿意用、是否持續(xù)用、是否推薦用” 展開。

核心評(píng)估指標(biāo)包括：

用戶留存曲線：不同時(shí)間段的用戶保持率，反映產(chǎn)品的長期吸引力；
日 / 月活躍用戶規(guī)模：反映產(chǎn)品的市場滲透率與用戶使用習(xí)慣；
用戶滿意度評(píng)分：通過調(diào)研獲取的用戶主觀評(píng)價(jià)，反映產(chǎn)品的體驗(yàn)契合度；
凈推薦值（NPS）：用戶向他人推薦產(chǎn)品的可能性，反映產(chǎn)品的口碑與傳播力；
平均使用時(shí)長：單次使用與每日總使用時(shí)間，反映產(chǎn)品的用戶粘性。

七、融合趨勢與未來展望：相互借鑒，各守核心

當(dāng)下，隨著 B 端市場競爭的加劇與 C 端產(chǎn)品的深度發(fā)展，B 端與 C 端設(shè)計(jì)不再是涇渭分明的兩個(gè)領(lǐng)域，而是出現(xiàn)了相互借鑒、融合創(chuàng)新的趨勢。但值得注意的是，融合并非 “同質(zhì)化”，二者仍堅(jiān)守自身的核心設(shè)計(jì)邏輯，在保留本質(zhì)的基礎(chǔ)上優(yōu)化體驗(yàn)。

B 端產(chǎn)品的消費(fèi)化體驗(yàn)升級(jí)

新一代 B 端產(chǎn)品開始重視用戶體驗(yàn)的優(yōu)化，引入 C 端設(shè)計(jì)的思維與方法，在保障效率與專業(yè)性的前提下，降低使用門檻、提升操作愉悅感，核心升級(jí)方向包括：

移動(dòng)優(yōu)先：充分考慮員工移動(dòng)辦公的場景需求，優(yōu)化移動(dòng)端界面與交互，實(shí)現(xiàn) “隨時(shí)隨地處理業(yè)務(wù)”；
上手簡化：通過新手引導(dǎo)、標(biāo)準(zhǔn)化模板、一鍵操作等設(shè)計(jì)，降低產(chǎn)品的初期學(xué)習(xí)成本；
視覺輕量化：在保持信息密度的前提下，優(yōu)化界面視覺設(shè)計(jì)，采用卡片式布局、可視化圖表，降低視覺疲勞；
微交互優(yōu)化：增加操作后的實(shí)時(shí)反饋，如任務(wù)提交成功的動(dòng)畫、流程推進(jìn)的提醒，讓專業(yè)操作更有溫度。

C 端產(chǎn)品的專業(yè)化功能完善

C 端產(chǎn)品在堅(jiān)守情感體驗(yàn)與輕量化交互的基礎(chǔ)上，開始向?qū)I(yè)化、精細(xì)化發(fā)展，為不同用戶群體提供更具深度的功能支持，核心升級(jí)方向包括：

創(chuàng)作者工具專業(yè)化：內(nèi)容平臺(tái)為創(chuàng)作者提供專業(yè)的數(shù)據(jù)統(tǒng)計(jì)、粉絲管理、內(nèi)容編輯工具，滿足其精細(xì)化運(yùn)營需求；
商家后臺(tái)復(fù)雜化：電商平臺(tái)的商家后臺(tái)功能日益接近傳統(tǒng) B 端產(chǎn)品，提供庫存管理、數(shù)據(jù)分析、客戶運(yùn)營等全流程專業(yè)工具；
企業(yè)級(jí)功能引入：部分 C 端產(chǎn)品推出團(tuán)隊(duì)協(xié)作版本，如微信企業(yè)版、飛書個(gè)人版，在保留 C 端體驗(yàn)的基礎(chǔ)上，滿足小型團(tuán)隊(duì)的協(xié)作需求。

核心設(shè)計(jì)原則的趨同與分化

盡管二者相互借鑒，但核心設(shè)計(jì)原則的差異仍清晰存在，這種 “和而不同” 的狀態(tài)，正是產(chǎn)品設(shè)計(jì)貼合用戶需求的體現(xiàn)：

表格

設(shè)計(jì)維度	B 端設(shè)計(jì)傾向	C 端設(shè)計(jì)傾向
信息密度	高密度，減少頁面跳轉(zhuǎn)，適配專業(yè)操作	低密度，焦點(diǎn)明確，降低認(rèn)知負(fù)荷
交互模式	專業(yè)、高效，標(biāo)準(zhǔn)化流程優(yōu)先	直覺、有趣，輕量化體驗(yàn)優(yōu)先
個(gè)性化程度	基于角色定制，匹配企業(yè)組織架構(gòu)	基于行為偏好，實(shí)現(xiàn)千人千面
迭代速度	穩(wěn)重、兼容性優(yōu)先，保障業(yè)務(wù)連續(xù)性	快速、創(chuàng)新優(yōu)先，貼合市場需求

結(jié)語：理解差異本質(zhì)，創(chuàng)造跨界價(jià)值

B 端與 C 端設(shè)計(jì)的本質(zhì)差異，源于其服務(wù)的用戶群體、使用場景與核心需求的不同：B 端設(shè)計(jì)如同精密的專業(yè)儀器，核心使命是在復(fù)雜的企業(yè)業(yè)務(wù)中建立秩序，實(shí)現(xiàn)效率的最大化；C 端設(shè)計(jì)則如富有溫度的藝術(shù)作品，核心追求是在簡單的用戶交互中創(chuàng)造共鳴，實(shí)現(xiàn)體驗(yàn)的最優(yōu)化。

優(yōu)秀的產(chǎn)品設(shè)計(jì)師，并非簡單地 “站在 B 端” 或 “站在 C 端”，而是深刻理解兩種設(shè)計(jì)邏輯背后的底層需求，根據(jù)產(chǎn)品定位與用戶場景選擇恰當(dāng)?shù)脑O(shè)計(jì)策略。在 B 端產(chǎn)品中適當(dāng)融入情感化設(shè)計(jì)，讓專業(yè)操作更有溫度；在 C 端產(chǎn)品中合理引入效率工具，讓愉悅體驗(yàn)更具價(jià)值。這種跨越邊界的設(shè)計(jì)思維，正是當(dāng)下數(shù)字產(chǎn)品創(chuàng)新的核心動(dòng)力，也能讓產(chǎn)品在滿足核心需求的基礎(chǔ)上，創(chuàng)造出超出用戶預(yù)期的價(jià)值

蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）www.xintaizi.com 是一家專注而深入的界面設(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。

我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。

評(píng)論(0) 瀏覽(256)

092026-3

12個(gè)規(guī)范原型的方法，好看的原型就是有用

清陽設(shè)計(jì)資源

本文為產(chǎn)品經(jīng)理和設(shè)計(jì)師提供了一份詳盡的原型設(shè)計(jì)規(guī)范指南。作者強(qiáng)調(diào)了規(guī)范在原型設(shè)計(jì)中的重要性，指出它能夠提升信息傳達(dá)效率并增強(qiáng)視覺吸引力。文章詳細(xì)介紹了尺寸、顏色、文字、圖標(biāo)、圖片、圓角、陰影、對(duì)齊、分布、間距和組件等關(guān)鍵要素的規(guī)范方法，旨在幫助讀者創(chuàng)建既美觀又實(shí)用的原型圖。蘭亭妙微 UI 設(shè)計(jì)公司在實(shí)踐中始終遵循這套專業(yè)標(biāo)準(zhǔn)，無論是求職面試還是項(xiàng)目評(píng)審，一個(gè)規(guī)范且吸引人的原型圖都將是一個(gè)顯著的加分項(xiàng)。

UI設(shè)計(jì)有設(shè)計(jì)規(guī)范要遵循，同樣的原型圖也有自己的規(guī)范。

任何通過圖形示意的東西一樣，規(guī)范帶來的最大的好處是提高信息傳達(dá)效率。

人是視覺動(dòng)物，好看的東西總喜歡多看兩眼，混亂的東西給人最直白的感受就是邏輯混亂。

這就是「卷面分」。

這篇文章我們說下原型圖的規(guī)范。

所謂的規(guī)范就是定規(guī)則，按照這一套規(guī)則作為標(biāo)準(zhǔn)進(jìn)行執(zhí)行，這里邊包含元素規(guī)范、布局、顏色等等。

我對(duì)畫原型圖對(duì)規(guī)范的要求是：盡量向著規(guī)范靠近。

原型圖不像UI圖，不用去到像素級(jí)別去摳。

因?yàn)楫嬙臀覀冃枰紤]時(shí)間，考慮效率，我們需要將最大的精力去放到方案的產(chǎn)出，寫需求文檔上。

規(guī)范只是為了讓我們有個(gè)標(biāo)準(zhǔn)，如果你想畫的規(guī)范時(shí)，給你一個(gè)參考。

原型圖規(guī)范

1. 尺寸

對(duì)于手機(jī)端、PC端、平板、車機(jī)等不同的產(chǎn)品形態(tài)，最大的區(qū)別是尺寸。

在畫原型圖之前，我們要做的就是先把頁面原型尺寸給定下來。

可以參考的規(guī)范有：手機(jī)端首屏的尺寸設(shè)置為 375×667 px。

注：375 × 667 是首屏高度，也就是原型圖的最小高度，并不是原型的固定高度，當(dāng)內(nèi)容很多時(shí)，直接把高度拉長到合適的內(nèi)容即可。下邊提到的PC端尺寸也是這個(gè)道理。

狀態(tài)欄：375 × 20 px

導(dǎo)航欄：375 × 44 px

底部tab：375 × 49 px

這個(gè)規(guī)范的尺寸是使用的 iPhone8 的尺寸，產(chǎn)品經(jīng)理火的那幾年就是這個(gè)尺寸火，所以用這個(gè)尺寸的多。

你同樣的也可以使用其他常用的手機(jī)端尺寸，這沒有固定限制。

我比較建議用這個(gè)尺寸，因?yàn)楹芏郃xure組件也都是按照這個(gè)尺寸去做的，適配的比較好。

對(duì)于PC端，尺寸可以按照 1440×900px。

雖然當(dāng)前使用最多的屏幕尺寸是1920×1080。

對(duì)于原型圖1440的寬度，如果是左邊是原型圖，右邊寫需求描述的話，在屏幕上可以正好展示出原型圖+需求描述，不用左右滑動(dòng)去看。

對(duì)于平板，建議直接使用 768×1024 px。

2. 顏色

對(duì)于原型圖的顏色，我們可以分別來看：

1）有UI設(shè)計(jì)師參與的

我們可以考慮使用中性色，中性色是指不強(qiáng)烈的色彩，常見的就是黑白灰。

在選擇黑白灰時(shí)，我很推薦的是Axure色板中自帶的顏色，在畫原型時(shí)直接選取使用就行。

另外一些大廠規(guī)范中，都有自己的中性色定義，你也可以選擇使用。不過我不建議你花費(fèi)太多時(shí)間去處理顏色。

如下圖，左邊是用Axure中的黑白灰，右邊是使用的Arcodesign的中性色，在畫原型時(shí)，整體上影響并沒有那么大。

雖然右邊的更好點(diǎn)，如果你要用其它中性色，可以將顏色收藏進(jìn)Axure的色板中，方便下次使用。

2）沒有UI設(shè)計(jì)參與的

比如說后臺(tái)，可以添加一些顏色。

后臺(tái)一般都是內(nèi)部使用，對(duì)樣式?jīng)]有太高要求，也不會(huì)讓UI進(jìn)行設(shè)計(jì)；

因?yàn)楹笈_(tái)一般都是使用現(xiàn)成的UI組件進(jìn)行開發(fā)的，比如Antdesign、Element等；

具體什么顏色，可以用萬能的藍(lán)色作為主色調(diào)，使用其他顏色作為輔助即可。

對(duì)于語義色，來表達(dá)成功、警告、錯(cuò)誤語義，可以選擇紅綠黃進(jìn)行使用即可。

3. 文字

對(duì)于文字，涉及到字體、字號(hào)、粗細(xì)、行間距等。

字體

可以使用 Arial，也就是Axure默認(rèn)的字體。

同樣的，也可以使用蘋方、微軟雅黑，這兩個(gè)字體則需要單獨(dú)安裝。

不過當(dāng)你通過Axure打包發(fā)布出去時(shí)，如果對(duì)方?jīng)]有安裝對(duì)應(yīng)的字體，將則不會(huì)展示為蘋方/微軟雅黑字體進(jìn)行展示。

對(duì)方查看的效果和你看的效果會(huì)不一樣，我正在找處理方案，目前還沒找到。

字號(hào)、字重

也就是字體大小、字體粗細(xì)，對(duì)于字體大小、粗細(xì)，還有顏色，影響的信息層級(jí)關(guān)系。

我們直接看規(guī)范：

一級(jí)標(biāo)題：20px、加粗，顏色#000000

主標(biāo)題：18px、選擇性加粗，顏色#000000

次標(biāo)題：16px、選擇性加粗，顏色#000000

小標(biāo)題：14px、選擇性加粗，顏色#000000

正文：14px、選擇性加粗，顏色#000000/#333333

輔助文字：14px/12px，不加粗，顏色#333333/#555555

次級(jí)文字：12px/10px，不加粗，顏色#555555/#7F7F7F

注：對(duì)于文字的大小，前提是在 375×667、1440×900 的頁面尺寸下的。如果你使用的尺寸過大，對(duì)應(yīng)的字號(hào)也需要加大。

這個(gè)規(guī)范不用記，可以用字號(hào) 14 作為標(biāo)準(zhǔn)，層級(jí)高的字號(hào)+2，加粗、顏色加重即可，層級(jí)低的字號(hào)就-2，不加粗，顏色淺一些。

行間距

在原型中不重要，Axure時(shí)會(huì)根據(jù)字體大小自動(dòng)調(diào)整行間距，如果文字內(nèi)容過多時(shí)，可以手動(dòng)進(jìn)行加大間距。

4. 圖標(biāo)

原型中如果是「圖標(biāo)+文字說明」一起出現(xiàn)，不用管圖標(biāo)，直接使用圓形或矩形代替即可。

占位符太丑，不建議用。

顏色不要使用太深的中性色。如下圖示例：

如果只有「圖標(biāo)」，可以選擇能表達(dá)具體含義的圖標(biāo)。

從iconfont、iconpark中搜索復(fù)制svg格式粘貼到Axure使用即可。

如下圖中的掃一掃、設(shè)置、播放圖標(biāo)。

如果你覺得使用圓形或矩形表達(dá)圖標(biāo)的意思不明顯，或者是不想找圖標(biāo)，就在加個(gè)「icon」文字，或者直接用寫文字。

如下圖的掃一掃、設(shè)置、播放，直接使用文字說明即可。

對(duì)于頭像、圖片等，都可以加個(gè)文字說明。

如果是沒有UI介入設(shè)計(jì)，當(dāng)需要確定圖標(biāo)時(shí)，則需要產(chǎn)品經(jīng)理確定，同樣的去iconfont、iconpark中找到圖標(biāo)，按前端要求提供過去即可。

5. 圖片

圖片在原型中不需要使用真實(shí)圖片，直接使用矩形代替即可。

Axure中自帶的圖片元件太丑了，不建議用。

可以再加上文字說明，來表達(dá)這是圖片，比如加個(gè)img，或者根據(jù)圖片特性，如封面、頭像，都是可以的。

原型中的圖片規(guī)范可以按照寬高比，比如 4:3，3:2，16:9，1:1。

當(dāng)然這個(gè)沒那么嚴(yán)格，如果你想規(guī)范些，可以這樣用。

6. 圓角

圓角在原型中不重要，如果你想使用圓角，可以按照2的倍數(shù)調(diào)整。

圓角在UI中的作用很大，而且規(guī)范還挺多，原型中就無所謂了。

7. 陰影

陰影不重要。如果想使用陰影，可以將陰影使用純黑色號(hào)000000，透明度30%，模糊5。

8. 對(duì)齊

對(duì)齊是版式設(shè)計(jì)的基本原則，使用工具進(jìn)行對(duì)齊即可。

具體采用「左對(duì)齊、右對(duì)齊、上對(duì)齊、底對(duì)齊、居中對(duì)齊」，你可以按照布局來，比如靠右的元件，使用右對(duì)齊。

9. 分布

分布是指將頁面內(nèi)容使用水平分布、垂直分布的方式進(jìn)行平均分布，來保證頁面元素之間的間距相同。

當(dāng)相同的元素多次出現(xiàn)時(shí)，我們可以使用分布快速調(diào)整，讓頁面更規(guī)范。

10. 間距

間距沒有那么重要，但是規(guī)范的原型一定要有會(huì)有間距。

間距分為上下左右間距，分為模塊與模塊間的間距，子模塊與子模塊的間距，元素與元素之間的間距。

對(duì)于整個(gè)移動(dòng)端來說，可以使用 5 的倍數(shù)調(diào)整間距。

對(duì)于尺寸較大的PC端原型，可以按照 10 的倍數(shù)調(diào)整間距。

也可以直接將元件結(jié)合「對(duì)齊、分布」直接調(diào)整，不用關(guān)注具體間距。

根據(jù)我們之前提到的設(shè)計(jì)原則「親密性」，屬于同組的內(nèi)容間距小，不同組的內(nèi)容間距大。

11. 組件規(guī)范

組件是就是可以直接拿過來的元件組合。

對(duì)于每個(gè)組件都是通過基礎(chǔ)的形狀、文字、顏色、尺寸、間距等進(jìn)行組合形成的。

就是UI設(shè)計(jì)中的原子化設(shè)計(jì)。

當(dāng)完成基礎(chǔ)的形狀、文字、顏色、尺寸、間距等規(guī)范確定后，進(jìn)行基礎(chǔ)元素的組合即可得到規(guī)范的組件。

你可以基于上邊的規(guī)范去制定自己的產(chǎn)品組件庫，可以快速使用規(guī)范的組件。

12. 內(nèi)容的貼合性

在畫原型時(shí)，可以將原型中的內(nèi)容盡量填寫為真實(shí)內(nèi)容，使用極值狀態(tài)，將內(nèi)容最多、數(shù)據(jù)最多的情況畫出來。

總結(jié)

規(guī)范建立好是為了使用，我們了解清楚原型的規(guī)范后，可以在畫原型時(shí)往規(guī)范上靠，慢慢的養(yǎng)成好習(xí)慣。

一個(gè)規(guī)范好看的原型圖在求職面試、評(píng)審的時(shí)候，會(huì)是個(gè)加分項(xiàng)。

當(dāng)然，不要過度遵循規(guī)范，原型圖不是UI圖，重要的是使用原型將功能表達(dá)出來。

對(duì)于剛?cè)腴T的產(chǎn)品經(jīng)理來說，原型圖是日常的基本工作。

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

蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）www.xintaizi.com 是一家專注而深入的界面設(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。

我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。

評(píng)論(0) 瀏覽(160)

092026-3

UI設(shè)計(jì)中的情感化設(shè)計(jì)

清陽設(shè)計(jì)思維

當(dāng)下互聯(lián)網(wǎng)產(chǎn)品日趨同質(zhì)化，用戶每天要接觸、使用數(shù)十款各類軟件，單純滿足基礎(chǔ)功能需求的產(chǎn)品，早已難以留住用戶；而一款自帶溫度、飽含情感的軟件，不僅能大幅提升用戶使用體驗(yàn)，更能悄悄拉近產(chǎn)品與用戶的距離，讓用戶產(chǎn)生穩(wěn)定的依賴感與不期而遇的驚喜感，在海量產(chǎn)品中牢牢占據(jù)用戶心智。作為深耕界面設(shè)計(jì)與用戶體驗(yàn)領(lǐng)域的蘭亭妙微UI設(shè)計(jì)公司，始終將情感化設(shè)計(jì)視為UI設(shè)計(jì)的核心內(nèi)核，認(rèn)為好的UI設(shè)計(jì)從不只是視覺美化與功能排布，更是與用戶的情感對(duì)話。本文將聚焦UI設(shè)計(jì)中的情感化設(shè)計(jì)，拆解核心思路與落地技巧，一同探尋讓產(chǎn)品更有溫度的設(shè)計(jì)密碼。

UI 設(shè)計(jì)中的情感化設(shè)計(jì)：讓產(chǎn)品與用戶產(chǎn)生心靈共鳴

如今，用戶每日都會(huì)接觸和使用多款軟件，一款能傳遞情感的產(chǎn)品，往往能大幅提升用戶體驗(yàn)，讓用戶對(duì)產(chǎn)品產(chǎn)生依賴感與驚喜感。情感化設(shè)計(jì)，正是讓產(chǎn)品跳出冰冷的功能框架，觸達(dá)用戶內(nèi)心的關(guān)鍵，接下來我們就來深入探討 UI 設(shè)計(jì)中的情感化設(shè)計(jì)之道。

心理學(xué)認(rèn)為，情感是人對(duì)客觀事物是否滿足自身需求而產(chǎn)生的態(tài)度體驗(yàn)。當(dāng)產(chǎn)品能夠觸動(dòng)用戶內(nèi)心，引發(fā)其情感波動(dòng)時(shí)，便不再是冰冷的工具。用戶能透過界面與交互，感受到設(shè)計(jì)師為優(yōu)化使用體驗(yàn)，在每一個(gè)細(xì)節(jié)處的用心打磨，進(jìn)而心生愉悅、喜愛與幸福感。

情感化設(shè)計(jì)并非轟轟烈烈的大改動(dòng)，有時(shí)一句暖心文案、一幅趣味插圖、一個(gè)靈動(dòng)動(dòng)畫，便能打動(dòng)人心，讓用戶獲得愉悅的使用體驗(yàn)。設(shè)計(jì)的高級(jí)感，從來不止于視覺層面的精致，這些藏在細(xì)節(jié)里的美好設(shè)計(jì)，滿含積極情緒，是產(chǎn)品在滿足功能性與易用性之后，對(duì)更高層次用戶體驗(yàn)的追求。

一、提示性文字：用語言拉近距離，賦予產(chǎn)品生命力

語言是情感化設(shè)計(jì)最直接的利器，擬人化的對(duì)話相較于冰冷的機(jī)械文字，更易獲得用戶好感，為產(chǎn)品賦予鮮活的生命力。尤其在 App 推送場景中，用戶每日接收大量推送，早已產(chǎn)生審美疲勞，此時(shí)一句精心設(shè)計(jì)的推送文案，成本低、效率高，能將對(duì)用戶的 “打擾” 轉(zhuǎn)化為趣味互動(dòng)，讓用戶會(huì)心一笑。

荔枝 FM 的推送 “一個(gè)人嗎？我也是呢”，精準(zhǔn)戳中獨(dú)處用戶的情緒；一刻的 “你知道孤獨(dú)是什么感覺嗎：手機(jī)亮了，卻只有推送”，用細(xì)膩的表達(dá)引發(fā)情感共鳴；隨手記專業(yè)版的 “5 天沒花錢，贊啊”，像朋友般為用戶的省錢行為喝彩；百度地圖的 “北京風(fēng)好大，我要被吹走啦”，用俏皮的語氣化解出行查詢的枯燥；百詞斬的 “周沒背！！！卸掉我算了！！！”，以略帶 “小脾氣” 的表達(dá)，巧妙提醒用戶打卡學(xué)習(xí)，這些都是提示性文字情感化的絕佳范例。

二、下拉刷新：讓高頻操作，成為趣味體驗(yàn)

下拉刷新是用戶使用 App 時(shí)的高頻操作，傳統(tǒng)的圖標(biāo)加文字設(shè)計(jì)，雖簡單直觀，卻毫無設(shè)計(jì)感，無法引發(fā)用戶任何情緒波動(dòng)。而下拉刷新作為一種臨時(shí)交互狀態(tài)，豐富其設(shè)計(jì)細(xì)節(jié)，不僅不會(huì)與產(chǎn)品界面產(chǎn)生違和感，反而能讓產(chǎn)品收獲用戶好感。

以 UC 頭條為例，其下拉刷新時(shí)會(huì)跳出一只奔跑的小鹿，既延續(xù)了品牌 logo 的視覺元素，又以 “快馬加鞭” 的視覺隱喻，契合資訊類產(chǎn)品對(duì)內(nèi)容更新速度的核心需求。用戶在等待加載的過程中，被靈動(dòng)的設(shè)計(jì)吸引，在愉悅的情緒中對(duì)產(chǎn)品產(chǎn)生好感，讓原本枯燥的下拉刷新操作變得生動(dòng)有趣。

三、頭像設(shè)計(jì)：打造專屬虛擬形象，增強(qiáng)用戶認(rèn)同感

個(gè)人中心是承載用戶信息的核心頁面，也是用戶虛擬形象的展示窗口。傳統(tǒng)的默認(rèn)頭像加登錄文字的設(shè)計(jì)，死板且缺乏溫度，無法讓用戶產(chǎn)生身份認(rèn)同感。如今，越來越多產(chǎn)品摒棄了這種單一設(shè)計(jì)，為用戶提供多樣化的頭像選擇，賦予產(chǎn)品人格魅力，讓產(chǎn)品擁有生命力，消除人機(jī)交互的冰冷感，幫助用戶與產(chǎn)品建立友好的情感聯(lián)結(jié)。

美團(tuán)外賣、躺平等產(chǎn)品，為用戶設(shè)計(jì)了貼合產(chǎn)品氣質(zhì)與用戶屬性的專屬虛擬形象，讓用戶在使用過程中產(chǎn)生強(qiáng)烈的身份共鳴，仿佛擁有了與產(chǎn)品契合的專屬標(biāo)簽，大幅提升了用戶對(duì)產(chǎn)品的接納度與認(rèn)同感。

四、缺省頁設(shè)計(jì)：化解負(fù)面情緒，傳遞產(chǎn)品溫度

缺省頁通常出現(xiàn)在頁面無內(nèi)容、網(wǎng)絡(luò)斷開等場景，傳統(tǒng)簡陋的圖標(biāo)加提示文字設(shè)計(jì)，會(huì)讓用戶產(chǎn)生心理落差，陷入挫敗、煩躁等負(fù)面情緒。而情感化的缺省頁設(shè)計(jì)，能通過設(shè)計(jì)手段有效緩解用戶的負(fù)面感受，成為傳遞產(chǎn)品溫度的重要載體。

設(shè)計(jì)師可結(jié)合產(chǎn)品屬性與品牌視覺體系，延展圖形設(shè)計(jì)，搭配動(dòng)效、插畫等形式，豐富缺省頁內(nèi)容。比如躺平的空白頁，設(shè)計(jì)出賤萌有趣的視覺場景，一句 “沒消息就是好消息”“內(nèi)容找不到了，發(fā)現(xiàn)更多圈子”，讓用戶在無奈的場景下會(huì)心一笑，將負(fù)面情緒轉(zhuǎn)化為輕松的體驗(yàn)，讓產(chǎn)品充滿趣味性與人情味。

五、標(biāo)簽欄微動(dòng)效：讓頁面切換，告別單調(diào)死板

隨著情感化設(shè)計(jì)的不斷豐富，標(biāo)簽欄圖標(biāo)設(shè)計(jì)不再局限于靜態(tài)視覺，動(dòng)態(tài)動(dòng)畫效果的融入，讓標(biāo)簽欄切換操作告別死板。用戶在頻繁切換頁面時(shí)，不會(huì)再感到單調(diào)枯燥，精心設(shè)計(jì)的微動(dòng)效，還能有效緩解用戶等待時(shí)的焦躁心情，從心理層面縮短用戶的等待感知，同時(shí)讓品牌視覺形象更深入人心，強(qiáng)化用戶對(duì)產(chǎn)品的記憶點(diǎn)。

六、模擬用戶行為：貼合真實(shí)場景，深化情感認(rèn)同

當(dāng)產(chǎn)品能夠精準(zhǔn)模擬用戶行為，將用戶代入真實(shí)的使用情境時(shí)，便能讓用戶產(chǎn)生深刻的情感認(rèn)同感。這種設(shè)計(jì)核心，在于精準(zhǔn)洞悉用戶的行為習(xí)慣與潛在需求，實(shí)現(xiàn)產(chǎn)品與用戶的 “心意相通”。

潮汐 App 會(huì)根據(jù)時(shí)間、場景與季節(jié)變化，播放雨聲、雷聲、風(fēng)聲、潮水聲等不同的背景音效，為用戶營造身臨其境的氛圍感，讓用戶在專注、睡眠、小憩等不同場景下，獲得貼合心境的體驗(yàn)；微信能感知用戶的截屏行為，當(dāng)用戶打開對(duì)話框時(shí)，自動(dòng)顯示截屏圖片，提前預(yù)判用戶發(fā)截圖的需求，讓操作更便捷；淘票票則精準(zhǔn)捕捉到觀眾看電影后等彩蛋的習(xí)慣，在影片詳情頁添加彩蛋提醒，告知用戶電影是否有彩蛋、彩蛋出現(xiàn)在哪個(gè)位置，避免用戶白白浪費(fèi)時(shí)間，這些設(shè)計(jì)都從用戶真實(shí)需求出發(fā)，讓產(chǎn)品成為懂用戶的 “貼心伙伴”。

七、有趣的細(xì)節(jié)設(shè)計(jì)：藏起小彩蛋，激發(fā)探索欲

常言道，有趣的靈魂萬里挑一，在 UI 設(shè)計(jì)中，有趣的細(xì)節(jié)設(shè)計(jì)能引發(fā)用戶與產(chǎn)品的積極互動(dòng)，讓用戶產(chǎn)生愉悅的情緒。這類設(shè)計(jì)分為隱形與顯性兩種，無論是需要用戶主動(dòng)發(fā)現(xiàn)的隱藏彩蛋，還是直觀呈現(xiàn)的趣味設(shè)計(jì)，都能為用戶帶來驚喜，增強(qiáng)用戶對(duì)產(chǎn)品的探知欲與粘性。

B 站電腦端鬼畜區(qū)的 “隱藏彩蛋” 便是隱形設(shè)計(jì)的代表，長按返回圖標(biāo) 10 秒，頁面會(huì)出現(xiàn)提示語，引導(dǎo)用戶輸入字母，隨后鬼畜明星的畫面會(huì)劃過屏幕，這種需要用戶主動(dòng)探索的設(shè)計(jì)，讓用戶在發(fā)現(xiàn)彩蛋時(shí)收獲滿滿的喜悅，大幅提升了產(chǎn)品的趣味性；優(yōu)酷視頻的顯性趣味設(shè)計(jì)同樣出彩，會(huì)員發(fā)彈幕后，可使用劇集相關(guān)角色的頭像，帶角色扮演頭像的彈幕，讓用戶的發(fā)言更有劇集代入感，既強(qiáng)化了會(huì)員的尊貴感與專屬特權(quán)，又豐富了彈幕區(qū)的互動(dòng)形式，一舉兩得。

總而言之，UI 設(shè)計(jì)的 “高級(jí)感”，既需要在視覺層面精雕細(xì)琢，從細(xì)微之處打造精致、富有設(shè)計(jì)感的畫面，更需要從情感化設(shè)計(jì)出發(fā)，站在用戶的角度換位思考，洞悉用戶的情緒需求與行為習(xí)慣，讓產(chǎn)品與用戶產(chǎn)生情感共鳴。當(dāng)產(chǎn)品不再只是滿足功能需求的工具，而是能傳遞溫度、引發(fā)共鳴的情感載體時(shí)，才能讓用戶獲得更高層次的使用體驗(yàn)，建立起長久且牢固的產(chǎn)品情感聯(lián)結(jié)。

蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）www.xintaizi.com 是一家專注而深入的界面設(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。

我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請(qǐng)加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請(qǐng)加藍(lán)小助微信ben_lanlan。

評(píng)論(0) 瀏覽(136)

首頁

三、五架帽理論（LATCH 原則）：高效組織信息的 5 個(gè)核心方法

核心定義

核心原理

產(chǎn)品落地技巧

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

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

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

4. Category（類別）：按屬性分類組織信息

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

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

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

核心定義

核心原理

產(chǎn)品落地技巧

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

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

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

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

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

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

核心定義

核心原理

產(chǎn)品落地技巧

1. 簡化視覺設(shè)計(jì)，避免 “過度裝飾”

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

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

4. 功能分類聚合，避免 “分散擺放”

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

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

全文核心總結(jié)

閱讀導(dǎo)航

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

核心定義

核心原理

產(chǎn)品落地技巧

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

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

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

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

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

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

核心定義

核心原理

產(chǎn)品落地技巧

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

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

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

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

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

一、為何思考設(shè)計(jì)中的潛臺(tái)詞

二、何為設(shè)計(jì)中的潛臺(tái)詞

三、潛臺(tái)詞的核心作用

1. 傳遞隱藏信息，讓體驗(yàn)路徑更流暢

2. 建立情感連接，讓設(shè)計(jì)更有溫度

第一步：梳理頁面，按情感濃度劃分設(shè)計(jì)層級(jí)

第二步：挖掘情感元素，傳遞專屬潛臺(tái)詞

第三步：統(tǒng)一視覺語言，利用曝光效應(yīng)加深記憶

3. 減少認(rèn)知成本，讓信息更易理解

四、寫在最后

一、色彩的應(yīng)用

1. 不得觸碰的禁區(qū)

2. 色調(diào)一致

3. 60-30-10原則

4. 色不過三

5. 遠(yuǎn)離純黑色和純灰色

6. 遵循色彩心理學(xué)

7. 良好的可讀性

8. 從大自然中獲得靈感

9. 將UX顏色與品牌相匹配

10. 從強(qiáng)調(diào)色入手

11. 冷暖色對(duì)比搭配

12. 黑白色搭配不過時(shí)

12. 強(qiáng)交互色彩

13. 保證良好的可讀性

14. UI中的陰影

二、app設(shè)計(jì)中的色彩搭配

1. 主色

2. 輔助色

3. 點(diǎn)綴色