• 釘釘成長(zhǎng)社區(qū)用全家福溫馨插畫，精準(zhǔn)擊中家長(zhǎng)記錄孩子成長(zhǎng)的心理，有效提升動(dòng)態(tài)發(fā)布活躍度。
• 用視覺(jué)氛圍降低參與門檻，讓用戶愿意主動(dòng)互動(dòng)、分享。

2. 熱點(diǎn)主題化：借勢(shì)營(yíng)造沉浸式氛圍

• 麥當(dāng)勞 App 頻繁推出品牌聯(lián)名主題，將界面背景、插畫、圖標(biāo)全面貼合聯(lián)名風(fēng)格，整體統(tǒng)一且辨識(shí)度極強(qiáng)。
• 從視覺(jué)到交互完整落地?zé)狳c(diǎn)氛圍，讓用戶感受到新鮮感與品牌趣味。

3. 情感化動(dòng)態(tài)：讓打卡更有儀式感

• 大眾點(diǎn)評(píng)打卡采用 IP 角色 + 定位符號(hào)動(dòng)畫，清晰傳遞 “真實(shí)到店” 的含義。
• 流暢動(dòng)效提升操作愉悅度，讓簡(jiǎn)單打卡變成有情緒反饋的小儀式。

4. 應(yīng)景天氣設(shè)計(jì)：把自然氛圍搬進(jìn)產(chǎn)品

• 蘋果天氣 App 在中秋夜晚同步展示圓月效果，與現(xiàn)實(shí)節(jié)氣高度呼應(yīng)。
• 隨季節(jié)、節(jié)日、天氣變化的視覺(jué)皮膚，讓產(chǎn)品更貼近生活、更有人情味。

5. 品牌化刷新：讓基礎(chǔ)操作貼合產(chǎn)品特質(zhì)

• 當(dāng)當(dāng) App 將刷新設(shè)計(jì)為 “開(kāi)書→翻頁(yè)” 動(dòng)畫，完美契合圖書平臺(tái)定位。
• 把通用操作變成品牌小彩蛋，枯燥動(dòng)作也變得有趣。

6. 長(zhǎng)按快捷刪除：提升效率更人性化

• 淘寶通知列表支持長(zhǎng)按一鍵彈出刪除選項(xiàng)，可單條 / 全部清除。
• 減少滑動(dòng)、點(diǎn)按步驟，高效解決用戶痛點(diǎn)，更貼合使用習(xí)慣。

7. 多元頭像預(yù)設(shè)：降低設(shè)置門檻，強(qiáng)化 IP

• 貝殼找房提供微信頭像導(dǎo)入 + 專屬 IP 頭像選擇，選擇豐富、一鍵應(yīng)用。
• 既提升用戶頭像完成率，又持續(xù)曝光品牌 IP，情感化與品牌化雙贏。

8. 點(diǎn)亮城市足跡：用成就感驅(qū)動(dòng)用戶

• 高德地圖首次抵達(dá)新城市會(huì)自動(dòng)彈出歡迎提示，并點(diǎn)亮城市足跡。
• 用輕量玩法帶來(lái)即時(shí)成就感，激發(fā)用戶探索更多地點(diǎn)。

9. 晝夜視覺(jué)切換：讓界面隨時(shí)間更治愈

• 美團(tuán) “看病買藥” 個(gè)人中心，晝夜切換頂部背景與小藥箱 IP 動(dòng)作。
• 柔和的視覺(jué)變化，讓界面更有生命力，提升整體使用舒適度。

10. 多感官趣味：視覺(jué) + 觸覺(jué)打造沉浸互動(dòng)

• 馬蜂窩 AI 幫手 “十一實(shí)況” 結(jié)合重力感應(yīng)，旋轉(zhuǎn)手機(jī)即可觸發(fā)場(chǎng)景變化。
• 從視覺(jué)延伸到觸覺(jué)，讓互動(dòng)更真實(shí)、更有探索樂(lè)趣。

   

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

人們認(rèn)為設(shè)計(jì)師是表面工作——設(shè)計(jì)師拿著盒子說(shuō)‘它看起來(lái)好！’這不是我認(rèn)為好的設(shè)計(jì)。設(shè)計(jì)可不只是看起來(lái)或者摸起來(lái)的樣子，設(shè)計(jì)考慮的是用它的感覺(jué)。 ——Steve Jobs 2003年11月30日《紐約時(shí)報(bào)》

在日常的 B 端產(chǎn)品調(diào)研支持過(guò)程中，我們研究員經(jīng)常會(huì)遇到這樣的場(chǎng)景：

“你們幫我看看，產(chǎn)品方案滿不滿足用戶需求？功能符不符合用戶預(yù)期？”

“（研發(fā)問(wèn)）功能上線的 ROI 是多少？用戶對(duì)這類功能是否有需求？解決了用戶什么問(wèn)題？”

“你們多找一些用戶驗(yàn)證一下 demo 方案行不行…”

無(wú)論是產(chǎn)品同學(xué)，還是設(shè)計(jì)同學(xué)，相信大家或多或少都會(huì)在需求文檔、設(shè)計(jì)文檔評(píng)審時(shí)被業(yè)務(wù)方、研發(fā)問(wèn)到方案可行性和落地價(jià)值等方面的“靈魂拷問(wèn)”，而這些疑惑同時(shí)也在拷問(wèn)我們研究員。那么作為研究員，我們是如何從用戶的角度去輔助產(chǎn)品同學(xué)和設(shè)計(jì)同學(xué)進(jìn)行敏捷的方案驗(yàn)證呢？

首先，我們先來(lái)了解什么是產(chǎn)品可用性測(cè)試？

可用性（Usability），被定義為一種用來(lái)衡量界面好用程度的屬性。好用程度的高低一般取決于以下五個(gè)要素：

1. 可學(xué)習(xí)性（Learnability）：初次接觸這個(gè)設(shè)計(jì)時(shí)，用戶完成基本任務(wù)的難易程度。
2. 效率（Efficiency）：用戶能多快完成任務(wù)。
3. 可記憶性（Memorability）：當(dāng)用戶一段時(shí)間沒(méi)有使用產(chǎn)品后，是否能馬上回到以前的熟練程度。
4. 出錯(cuò)（Errors）：用戶能否從錯(cuò)誤中恢復(fù)。
5. 滿意度（Satisfaction）：用戶對(duì)產(chǎn)品的主觀滿意度。

可用性測(cè)試主要用于驗(yàn)證產(chǎn)品的可用性，該方法能夠幫助產(chǎn)品同學(xué)和設(shè)計(jì)同學(xué)了解在實(shí)際使用情境中該設(shè)計(jì)方案（概念或創(chuàng)意）的質(zhì)量（評(píng)估是否可用/是否有效/用戶是否滿意），并在測(cè)試結(jié)果的基礎(chǔ)上進(jìn)行改進(jìn)。

換句話說(shuō)，可用性測(cè)試是觀察有代表性的用戶，讓用戶完成產(chǎn)品中的各項(xiàng)任務(wù)，了解用戶如何使用產(chǎn)品，界定出可用性問(wèn)題并解決這些問(wèn)題，讓業(yè)務(wù)、產(chǎn)品、設(shè)計(jì)、研發(fā)等上下游角色盡快對(duì)產(chǎn)品方案達(dá)成共識(shí)并積極優(yōu)化產(chǎn)品體驗(yàn)。

通過(guò)可用性測(cè)試，我們可以：

1. 了解用戶如何與產(chǎn)品進(jìn)行交互；
2. 了解用戶是否能夠完成指定任務(wù)；
3. 了解用戶需要多久才能完成指定任務(wù)；
4. 了解用戶對(duì)本品和競(jìng)品的滿意度；
5. 明確產(chǎn)品存在哪些需要優(yōu)化的可用性問(wèn)題；
6. 明確產(chǎn)品可用性情況及是否符合上線目標(biāo)；
7. 讓產(chǎn)設(shè)研團(tuán)隊(duì)在開(kāi)發(fā)上線前發(fā)現(xiàn)問(wèn)題并解決。

那么，什么情況下可以做可用性測(cè)試？

在實(shí)際項(xiàng)目執(zhí)行中，我們通常會(huì)在幾個(gè)特定階段去進(jìn)行產(chǎn)品可用性測(cè)試，不同階段采取的調(diào)研方式也有所不同，所關(guān)注的內(nèi)容亦隨之變化。

（1）設(shè)計(jì)初始階段，我們通常會(huì)進(jìn)行前期用戶需求挖掘或相似產(chǎn)品使用情況分析，并基于需求概念設(shè)計(jì)出來(lái)的草圖方案進(jìn)行探索性可用性測(cè)試，來(lái)確定方案內(nèi)容和功能的范圍是否符合用戶預(yù)期方向和使用需求，以此初步評(píng)估草圖方案的有效性和可用性。因此，在該階段，我們常以紙張?jiān)蜏y(cè)試+定性深訪為主，先從認(rèn)知上與用戶保持一致，理解了用戶，做出來(lái)的產(chǎn)品方案更能貼近用戶訴求。

（2）灰度上線前，我們一般對(duì) demo 終稿進(jìn)行評(píng)估性可用性測(cè)試，向目標(biāo)用戶介紹新設(shè)計(jì)，同時(shí)盡可能保證 demo 稿是用戶能夠直觀測(cè)試使用的，以此來(lái)確定 demo 在功能滿足、信息布局、流程交互，甚至是視覺(jué)樣式上是否能夠提供良好的用戶體驗(yàn)。所以，在該階段我們更多會(huì)進(jìn)行面對(duì)面測(cè)試+可用性測(cè)試量表（SUS 量表），一般在會(huì)議室等固定安靜的環(huán)境中進(jìn)行，并要求用戶按既定任務(wù)測(cè)試操作，任務(wù)測(cè)試過(guò)程中不打斷用戶并觀察記錄用戶在關(guān)鍵流程環(huán)節(jié)使用中遇到的問(wèn)題，測(cè)試完成后向用戶提出問(wèn)題或進(jìn)一步探究原因。

（3）灰度上線或全量上線后，我們通常會(huì)對(duì)上線后的新方案進(jìn)行對(duì)比性可用性測(cè)試，通過(guò)灰度方式在同一時(shí)間維度下比較新方案和原方案的可用性反饋和用戶滿意度，確保方案在全量上線之前修復(fù)任何潛在問(wèn)題。因此，在該階段我們以 A/B 測(cè)試+場(chǎng)景化調(diào)研問(wèn)卷（如下圖所示）為主，通過(guò)用戶體驗(yàn)數(shù)據(jù)和業(yè)務(wù)數(shù)據(jù)來(lái)評(píng)估出最優(yōu)版本。

實(shí)際執(zhí)行中，我們?cè)趺醋隹捎眯詼y(cè)試？主要實(shí)施步驟有：

STEP1：設(shè)計(jì)任務(wù)

可用性測(cè)試的基礎(chǔ)是任務(wù)，任務(wù)測(cè)試內(nèi)容的好壞是能夠?qū)y(cè)試結(jié)果的準(zhǔn)確性有直接影響的。因此在招募用戶之前，需要對(duì)測(cè)試的產(chǎn)品方案進(jìn)行任務(wù)設(shè)計(jì)。比如，測(cè)試商家在 B 端營(yíng)銷系統(tǒng)報(bào)名營(yíng)銷活動(dòng)流程方案的任務(wù)可以是：報(bào)名一場(chǎng)雙 11 大促活動(dòng)。

在設(shè)計(jì)比較合適的測(cè)試任務(wù)時(shí)需要注意以下幾點(diǎn)：

1. 選擇最核心的功能或操作流程作為任務(wù)。產(chǎn)品最核心的功能和操作流往往是最頻繁被用戶使用的地方，假設(shè)最常用最核心的地方還存在可用性問(wèn)題，那么就算優(yōu)化了其他邊緣部分的可用性問(wèn)題，依舊是對(duì)產(chǎn)品整體體驗(yàn)于事無(wú)補(bǔ)。比如在商家報(bào)名大促活動(dòng)流程中，最核心的環(huán)節(jié)是查找活動(dòng)→選擇商品報(bào)名→跟蹤報(bào)名進(jìn)度，那么就需要重點(diǎn)將這部分作為測(cè)試任務(wù)。
2. 任務(wù)應(yīng)符合常規(guī)操作流程。在實(shí)際業(yè)務(wù)中，產(chǎn)品線的職責(zé)分工會(huì)比較細(xì)化，比如 A 產(chǎn)品會(huì)負(fù)責(zé) A 模塊，B 產(chǎn)品負(fù)責(zé) B 模塊…單一功能模塊的測(cè)試任務(wù)較多的情況下，如果各任務(wù)之間操作流無(wú)法串聯(lián)甚至是存在沖突的話，用戶測(cè)試的操作流就是不合常規(guī)的，也容易給參與測(cè)試的用戶帶來(lái)困擾。因此，我們研究員需要根據(jù)用戶操作習(xí)慣來(lái)進(jìn)行評(píng)估測(cè)試任務(wù)并設(shè)計(jì)串聯(lián)流程。
3. 為任務(wù)創(chuàng)建一個(gè)應(yīng)用場(chǎng)景。簡(jiǎn)單的場(chǎng)景描述會(huì)對(duì)用戶執(zhí)行任務(wù)有幫助。比如：任務(wù)是“報(bào)名一場(chǎng)雙 11 大促活動(dòng)”，我們可以創(chuàng)建這樣一個(gè)場(chǎng)景：你關(guān)注的雙 11 大促活動(dòng)報(bào)名時(shí)間開(kāi)始了，你想上商家后臺(tái)去報(bào)名雙 11 大促，請(qǐng)登錄商家后臺(tái)來(lái)完成大促活動(dòng)報(bào)名。
4. 明確任務(wù)的起點(diǎn)和終點(diǎn)。用戶是否完成了任務(wù)的評(píng)估依據(jù)是：用戶是否從起點(diǎn)（頁(yè)面 A）到達(dá)了終點(diǎn)（頁(yè)面 B）。因此要明確起點(diǎn)和終點(diǎn)的定義，哪個(gè)頁(yè)面是起點(diǎn)？哪個(gè)是終點(diǎn)？比如：任務(wù)是“報(bào)名一場(chǎng)雙 11 大促活動(dòng)”，起點(diǎn)頁(yè)面就是商家后臺(tái)首頁(yè)，終點(diǎn)頁(yè)面就是提交報(bào)名素材成功的頁(yè)面。另外在評(píng)估是否到達(dá)終點(diǎn)頁(yè)面之外，還需要關(guān)注用戶在任務(wù)過(guò)程中的操作動(dòng)線、是否有效填答信息，若沒(méi)有，我們需要搞清楚背后原因是什么。
5. 任務(wù)不應(yīng)過(guò)于簡(jiǎn)單。若想測(cè)試用戶是否能夠找到某功能，不要用類似“找到 XX 功能按鈕”這類表述，我們應(yīng)該給用戶提供一個(gè)要處理的實(shí)際場(chǎng)景任務(wù)，比如不是“找到換品功能按鈕”而是“報(bào)名完成后想要重新?lián)Q品”。
6. 避免提供線索和描述操作步驟。任務(wù)只需要給出具體目標(biāo)即可，不需要給到測(cè)試用戶具體的操作步驟，不然會(huì)容易錯(cuò)過(guò)用戶在執(zhí)行任務(wù)過(guò)程中到某一環(huán)節(jié)可能存在的“意外問(wèn)題”，而這些“意外”恰恰是我們需要關(guān)注的。

STEP2：招募用戶

在招募用戶環(huán)節(jié)，最重要的是樣本數(shù)量的確定。在實(shí)際的可用性測(cè)試中，我們常常被產(chǎn)品同學(xué)或設(shè)計(jì)同學(xué)問(wèn)到：

“6 個(gè)用戶提出的問(wèn)題能代表全部么？”

“幾個(gè)用戶是不是太少了？他們提出的問(wèn)題是可靠么？”

諸如此類的樣本數(shù)量“挑戰(zhàn)”，不勝枚舉。人機(jī)交互博士 Jakob Nielsen 曾提出：“有 5 個(gè)人參加的用戶測(cè)試，即可發(fā)現(xiàn)大多數(shù)（85%）的產(chǎn)品可用性問(wèn)題。” Nielsen 這張經(jīng)典圖表（如下圖）告訴我們答案：一般最嚴(yán)重的問(wèn)題都是前幾名用戶發(fā)現(xiàn)的，隨著用戶數(shù)量增多，發(fā)現(xiàn)問(wèn)題逐漸減少。

當(dāng)然在實(shí)際執(zhí)行中也會(huì)存在一些局限性，比如只能發(fā)現(xiàn)問(wèn)題數(shù)量，但無(wú)法確定發(fā)現(xiàn)問(wèn)題的嚴(yán)重程度，因此還是需要從實(shí)際情況比如測(cè)試任務(wù)的復(fù)雜程度、人力資源的投入程度等等來(lái)確定招募樣本數(shù)量。

STEP3：前期準(zhǔn)備

1. 測(cè)試地點(diǎn)與工具準(zhǔn)備。比如安靜的會(huì)議室、電腦、錄音筆、錄屏軟件（錄制操作全程，便于后續(xù)回顧分析）等。
2. 任務(wù)相關(guān)資料準(zhǔn)備。如①數(shù)據(jù)收集表，如收集任務(wù)是否完成、完成時(shí)間、關(guān)鍵事件中遇到的體驗(yàn)問(wèn)題、滿意度；②訪談提綱，包含任務(wù)步驟、需要注意深挖的環(huán)節(jié)問(wèn)題等。比如，任務(wù)是“報(bào)名一場(chǎng)雙11大促活動(dòng)”，訪談驗(yàn)證sop示例：

STEP4：試點(diǎn)測(cè)試

試點(diǎn)前測(cè)的目的是針對(duì)整個(gè)測(cè)試流程和提綱進(jìn)行測(cè)試，便于前置發(fā)現(xiàn)流程和提綱中存在的問(wèn)題，及時(shí)優(yōu)化，避免造成真實(shí)測(cè)試用戶的資源浪費(fèi)。試點(diǎn)前測(cè)需要注意：

1. 訪談提綱的話術(shù)表達(dá)和任務(wù)流程的設(shè)計(jì)，是否能夠準(zhǔn)確讓用戶理解？
2. 提綱內(nèi)容是否透露了操作步驟，用戶是否很快完成任務(wù)？
3. 時(shí)間安排是否合理，用戶是否可以在規(guī)定時(shí)間內(nèi)完成任務(wù)？
4. 任務(wù)流程安排是否合理，用戶是否感到疑惑？

STEP5：觀察訪談

在觀察測(cè)試中，需要檢查用戶任務(wù)目標(biāo)和心理認(rèn)知是否可以順利執(zhí)行下一步操作，以此來(lái)發(fā)現(xiàn)可用性問(wèn)題，因此我們要對(duì)以下問(wèn)題做到心中有數(shù)：

在事后訪談中，有以下幾點(diǎn)小小訪談 tips：

1. 認(rèn)知習(xí)慣層面：首先了解用戶對(duì)方案功能的基本理解，比如是否能夠理解？理解的意思是什么？為什么會(huì)有這些理解等等，之前在這些環(huán)節(jié)中用戶的操作習(xí)慣是什么樣的？
2. 需求關(guān)注層面：用戶在這些環(huán)節(jié)關(guān)注哪些方面？然后再給用戶解釋每個(gè)功能方案的定位作用是什么，方案解決什么問(wèn)題。同時(shí)追問(wèn)用戶，就目前方案是否解決實(shí)際中的問(wèn)題，哪些問(wèn)題？以及還有哪些優(yōu)化的建議等等。盡管大多數(shù)人認(rèn)為不該直接問(wèn)用戶產(chǎn)品的優(yōu)化建議，用戶給到的結(jié)論也只是基于自身經(jīng)驗(yàn)的主觀想法，但是若根據(jù)用戶給到的答案繼續(xù)深挖“為什么”，可能會(huì)知道用戶真正想要達(dá)到的效果和預(yù)期是什么。
3. 切記不要上來(lái)就一通講解方案后就單純問(wèn)用戶你覺(jué)得好不好，應(yīng)該還要繼續(xù)往下追問(wèn)。因?yàn)檫@樣通過(guò)對(duì)用戶現(xiàn)有的行為習(xí)慣和需求關(guān)注的了解，才能夠判斷評(píng)估用戶說(shuō)的話是否邏輯自洽，才能夠驗(yàn)證方案是否能夠真正滿足用戶的需求，而不是偽需求。

STEP6：分析報(bào)告

一般情況下，可用性報(bào)告的內(nèi)容主要包含以下三方面：

1. 研究概述：測(cè)試目標(biāo)、樣本描述、研究方法等。
2. 問(wèn)題解讀：?jiǎn)栴}描述、原因解讀、嚴(yán)重程度及影響范圍評(píng)估、數(shù)據(jù)結(jié)果等。
3. 解決應(yīng)對(duì)：建議的解決方案。

最后的話

好的產(chǎn)品設(shè)計(jì)應(yīng)當(dāng)滿足以下特征：可用性、易用性、好用性且具有吸引力。每個(gè)特征都是為了能讓產(chǎn)品站穩(wěn)腳跟而存在的，倘若想要讓產(chǎn)品功能最終具備這些特征屬性，就離不開(kāi)產(chǎn)品可用性測(cè)試的過(guò)程。

而且一個(gè)產(chǎn)品設(shè)計(jì)方案在沒(méi)有經(jīng)過(guò)用戶驗(yàn)證的情況下，容易在實(shí)際上線使用后出現(xiàn)一些隱性風(fēng)險(xiǎn)。而前置的設(shè)計(jì)驗(yàn)證，在一定程度上可以輔助我們產(chǎn)品功能在上線前發(fā)現(xiàn)問(wèn)題，改進(jìn)設(shè)計(jì)。

以上，共勉~希望能對(duì)大家有所啟發(fā)。

轉(zhuǎn)載：優(yōu)設(shè)

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

作為深耕 UI/UE 設(shè)計(jì)領(lǐng)域的專業(yè)機(jī)構(gòu)，蘭亭妙微始終認(rèn)為，優(yōu)秀的 UI 設(shè)計(jì)絕非單純的視覺(jué)美化，而是讓界面成為人機(jī)高效溝通的橋梁。交互設(shè)計(jì)作為 UI 設(shè)計(jì)的核心內(nèi)核，直接決定了產(chǎn)品的易用性與用戶體驗(yàn)。在為各行業(yè)客戶打造優(yōu)質(zhì)設(shè)計(jì)方案的實(shí)踐中，蘭亭妙微沉淀了一套系統(tǒng)的交互設(shè)計(jì)方法論，從界面布局形式、導(dǎo)航組件設(shè)計(jì)，到表單反饋、評(píng)論體系搭建，再到搜索功能優(yōu)化，每一個(gè)環(huán)節(jié)都藏著提升產(chǎn)品體驗(yàn)的關(guān)鍵邏輯。以下便是蘭亭妙微為 UI 設(shè)計(jì)師梳理的必備交互設(shè)計(jì)核心知識(shí)，助力設(shè)計(jì)師打造更友好、更高效的產(chǎn)品界面。

作為深耕 UI/UE 設(shè)計(jì)領(lǐng)域 16 年，服務(wù)超 500 家大中型企業(yè)的專業(yè)設(shè)計(jì)機(jī)構(gòu)，蘭亭妙微始終將「用戶體驗(yàn)為先」的設(shè)計(jì)理念融入每一個(gè)項(xiàng)目流程中。在多年的 B 端后臺(tái)管理界面、大屏可視化等全流程設(shè)計(jì)實(shí)踐中，我們發(fā)現(xiàn)「黑白稿優(yōu)先設(shè)計(jì)」是打造優(yōu)質(zhì) UI 作品的關(guān)鍵方法論 —— 在為設(shè)計(jì)添加色彩前，先完成灰度級(jí)界面的搭建，能讓設(shè)計(jì)師跳出視覺(jué)表象，聚焦設(shè)計(jì)本質(zhì)，也讓產(chǎn)品的用戶體驗(yàn)與商業(yè)價(jià)值實(shí)現(xiàn)雙重落地。以下便是蘭亭妙微總結(jié)的，UI 設(shè)計(jì)中堅(jiān)持黑白稿優(yōu)先的四大核心理由。

一、金融場(chǎng)景（DisputeFox 信用管理）：專業(yè)透明與用戶友好的平衡

• 信息層級(jí)：以信用分 803 為核心視覺(jué)錨點(diǎn)，用弧形儀表盤直觀展示分?jǐn)?shù)區(qū)間，同時(shí)拆解還款歷史、信用卡使用率等關(guān)鍵指標(biāo)，讓用戶快速掌握信用狀態(tài)，契合北京蘭亭妙微 “專業(yè)數(shù)據(jù)輕量化呈現(xiàn)” 的設(shè)計(jì)理念。
• 風(fēng)險(xiǎn)可視化：用紅 / 綠雙色標(biāo)注逾期記錄與正常還款，用進(jìn)度條展示余額變化，將復(fù)雜的信用數(shù)據(jù)轉(zhuǎn)化為易懂的視覺(jué)語(yǔ)言，降低用戶理解門檻。
• 操作閉環(huán)：全流程嵌入 “Dispute” 等操作入口，在數(shù)據(jù)展示中自然引導(dǎo)用戶行動(dòng)，符合金融產(chǎn)品 “先建立信任，再提供服務(wù)” 的邏輯。

二、辦公場(chǎng)景（銷售協(xié)作工作臺(tái)）：高效協(xié)同與信息聚合

• 模塊化布局：將潛在客戶、日程任務(wù)、會(huì)議通話等模塊有序排布，用標(biāo)簽區(qū)分客戶意向度，用顏色標(biāo)注任務(wù)優(yōu)先級(jí)，讓銷售團(tuán)隊(duì)一眼獲取核心信息，提升協(xié)作效率。
• 跨端聯(lián)動(dòng)：桌面端聚合全量數(shù)據(jù)，移動(dòng)端同步會(huì)議紀(jì)要與任務(wù)進(jìn)度，實(shí)現(xiàn) “大屏統(tǒng)籌 + 小屏跟進(jìn)” 的體驗(yàn)閉環(huán)，與北京蘭亭妙微在企業(yè)協(xié)作產(chǎn)品中強(qiáng)調(diào)的 “跨端連貫性” 理念高度一致。
• 交互便捷性：懸浮操作、快速篩選等功能，減少用戶操作步驟，貼合辦公場(chǎng)景 “高效辦公” 的核心需求。

三、車載場(chǎng)景（Aston Vantage 車機(jī)）：極簡(jiǎn)交互與駕駛安全

• 駕駛優(yōu)先：以車輛俯視圖為核心，左側(cè)聚合駕駛、氣候等核心數(shù)據(jù)，右側(cè)展示娛樂(lè)功能，信息層級(jí)嚴(yán)格遵循 “駕駛安全優(yōu)先”，避免干擾駕駛。
• 視覺(jué)極簡(jiǎn)：用大字體、高對(duì)比度展示車速、里程等關(guān)鍵數(shù)據(jù)，用卡片式布局區(qū)分功能模塊，操作按鈕尺寸適配車載觸控，符合車機(jī)產(chǎn)品 “少即是多” 的設(shè)計(jì)原則。
• 場(chǎng)景適配：集成導(dǎo)航、空調(diào)、媒體等全場(chǎng)景功能，同時(shí)保留 Auto Valet 等專屬功能，兼顧實(shí)用性與品牌調(diào)性。

四、健康場(chǎng)景（運(yùn)動(dòng)健康儀表盤）：數(shù)據(jù)可視化與正向激勵(lì)

• 數(shù)據(jù)直觀化：用環(huán)形圖展示步行進(jìn)度，用折線圖呈現(xiàn)體重變化，用柱狀圖對(duì)比睡眠時(shí)長(zhǎng)，將抽象的健康數(shù)據(jù)轉(zhuǎn)化為可視化趨勢(shì)，讓用戶清晰感知身體狀態(tài)。
• 正向反饋：用綠色標(biāo)注達(dá)標(biāo)數(shù)據(jù)，用紅色提示睡眠不足，用 “Well done” 等文案強(qiáng)化正向激勵(lì)，貼合健康產(chǎn)品 “陪伴式管理” 的定位。
• 信息分層：核心數(shù)據(jù)（步數(shù)、體重）突出展示，輔助數(shù)據(jù)（熱量、睡眠）有序排布，避免信息過(guò)載。

五、工業(yè)場(chǎng)景（風(fēng)電場(chǎng)監(jiān)控平臺(tái)）：實(shí)時(shí)監(jiān)控與風(fēng)險(xiǎn)預(yù)警

• 實(shí)時(shí)可視化：用折線圖展示風(fēng)速與功率變化，用儀表盤呈現(xiàn)風(fēng)機(jī)轉(zhuǎn)速，用紅色預(yù)警標(biāo)注溫度異常，讓運(yùn)維人員實(shí)時(shí)掌握設(shè)備狀態(tài)，符合工業(yè)產(chǎn)品 “實(shí)時(shí)監(jiān)控、快速響應(yīng)” 的需求。
• 全局視角：左側(cè)風(fēng)機(jī)實(shí)景圖與右側(cè)數(shù)據(jù)面板聯(lián)動(dòng)，實(shí)現(xiàn) “可視化監(jiān)控 + 數(shù)據(jù)化管理” 的雙重體驗(yàn)，契合北京蘭亭妙微在工業(yè)物聯(lián)網(wǎng)產(chǎn)品中的設(shè)計(jì)思路。
• 操作便捷性：懸浮狀態(tài)面板、快速編輯等功能，提升運(yùn)維效率，保障工業(yè)生產(chǎn)安全。

六、設(shè)計(jì)總結(jié)與專業(yè)視角

• 不同場(chǎng)景的設(shè)計(jì)各有側(cè)重：金融重透明、辦公重效率、車載重安全、健康重陪伴、工業(yè)重實(shí)時(shí)。
• 底層設(shè)計(jì)原則高度統(tǒng)一：信息層級(jí)分明、數(shù)據(jù)可視化直觀、交互邏輯簡(jiǎn)潔、視覺(jué)風(fēng)格貼合場(chǎng)景。

色彩是 UI 設(shè)計(jì)的靈魂，它并非單純的視覺(jué)裝飾，而是傳遞品牌情緒、引導(dǎo)用戶行為、強(qiáng)化設(shè)計(jì)質(zhì)感的核心語(yǔ)言。蘭亭妙微深耕 UI/UE 設(shè)計(jì)領(lǐng)域十六載，始終將色彩運(yùn)用作為設(shè)計(jì)體系的核心環(huán)節(jié)，在工業(yè)制造、醫(yī)療健康、財(cái)稅金融、航天軍工等垂直領(lǐng)域，將色彩理論、色彩心理學(xué)與行業(yè)場(chǎng)景深度融合，形成了一套 “理論落地 + 行業(yè)適配 + 用戶感知” 的色彩運(yùn)用方法論。從色彩比例的精準(zhǔn)把控到色彩情緒的精準(zhǔn)傳遞，從自然靈感的汲取到實(shí)用工具的高效運(yùn)用，蘭亭妙微讓每一種色彩的選擇都有邏輯、有溫度、有價(jià)值，讓色彩成為連接品牌與用戶的無(wú)聲橋梁。

蘭亭妙微作為國(guó)內(nèi)頂尖的 UI/UE 設(shè)計(jì)領(lǐng)域標(biāo)桿，深耕行業(yè) 16 年，始終以 “設(shè)計(jì)賦能業(yè)務(wù)、體驗(yàn)驅(qū)動(dòng)價(jià)值” 為核心，在工業(yè)制造、醫(yī)療健康、半導(dǎo)體、航天軍工等垂直領(lǐng)域，將當(dāng)下前沿的 UI 設(shè)計(jì)趨勢(shì)與行業(yè)場(chǎng)景深度融合，打造出兼具實(shí)用性、美學(xué)性與行業(yè)適配性的設(shè)計(jì)方案今日頭條。從 3D 視覺(jué)的技術(shù)落地到個(gè)性化體驗(yàn)的精準(zhǔn)打造，從交互創(chuàng)新到品牌視覺(jué)的 UI 化表達(dá)，蘭亭妙微在每一個(gè)設(shè)計(jì)趨勢(shì)的實(shí)踐中，都堅(jiān)持 “懂行業(yè) + 懂技術(shù) + 懂用戶” 的核心定位，讓設(shè)計(jì)不止于視覺(jué)美感，更成為解決企業(yè)業(yè)務(wù)痛點(diǎn)、提升用戶操作效率的核心抓手。未來(lái)，UI 設(shè)計(jì)必將朝著更多元、更智能、更貼合用戶需求的方向發(fā)展，而蘭亭妙微也將持續(xù)探索設(shè)計(jì)與技術(shù)的融合邊界，為各行業(yè)打造更具競(jìng)爭(zhēng)力的數(shù)字界面體驗(yàn)。

競(jìng)品分析作為日常工作中常用的基礎(chǔ)能力，在 C 端和 B 端兩種截然不同的產(chǎn)品形態(tài)下需要面對(duì)的難點(diǎn)也是不盡相同的。那么作為面向企業(yè)、公司的 B 端產(chǎn)品，在做競(jìng)品分析時(shí)的流程以及側(cè)重方向上都有哪些特點(diǎn)呢？蘭亭妙微UI設(shè)計(jì)公司將從產(chǎn)品差異等幾個(gè)方向?yàn)榇蠹曳窒硪幌伦约旱乃伎己涂偨Y(jié)，以期能夠提供參考和建議。

“競(jìng)品分析”我們從字面上理解，就是對(duì)現(xiàn)有的以及潛在的競(jìng)爭(zhēng)產(chǎn)品的優(yōu)劣進(jìn)行分析和總結(jié)。用以了解市場(chǎng)行情及自身產(chǎn)品的定位，發(fā)現(xiàn)新的市場(chǎng)機(jī)會(huì)，探索產(chǎn)品迭代的有效策略。在正式介紹 B 端競(jìng)品分析的經(jīng)驗(yàn)和思路之前，想先簡(jiǎn)單介紹一下 C 端產(chǎn)品和 B 端產(chǎn)品的差異點(diǎn)，也能更好的理解 B 端產(chǎn)品的特性。

一、先搞懂：B 端 vs C 端 核心差異

B 端產(chǎn)品面向企業(yè) / 組織，強(qiáng)調(diào)效率、流程、合規(guī)；C 端面向個(gè)人用戶，強(qiáng)調(diào)體驗(yàn)、流量、轉(zhuǎn)化。兩者做競(jìng)品分析的思路完全不同。

 

表格

 

 

 

對(duì)比維度	B 端產(chǎn)品	C 端產(chǎn)品
用戶	企業(yè)客戶、組織角色（管理者 / 員工）	海量個(gè)人用戶
場(chǎng)景	辦公場(chǎng)景、工作流程、時(shí)間固定	生活場(chǎng)景、碎片化、強(qiáng)私人屬性
設(shè)計(jì)	重流程、效率、穩(wěn)定性	重體驗(yàn)、細(xì)節(jié)、拉新留存
競(jìng)品	公開(kāi)度低、同質(zhì)化低、難體驗(yàn)	公開(kāi)易找、同質(zhì)化高、易體驗(yàn)
盈利	定制化報(bào)價(jià)、按年 / 模塊收費(fèi)	明碼標(biāo)價(jià)、會(huì)員 / 廣告 / 電商

 

B 端競(jìng)品分析兩大難點(diǎn)：

 

1. 競(jìng)品難找、信息不透明
2. 產(chǎn)品難試用、核心功能不開(kāi)放

二、第一步：明確分析目的 + 搭建分析框架

1. 分析目的（二選一為主）

• 戰(zhàn)略層：對(duì)比市場(chǎng)定位、定價(jià)、客戶群、產(chǎn)品矩陣、服務(wù)模式
• 功能層：找產(chǎn)品優(yōu)缺點(diǎn)、看流程合理性、輔助迭代規(guī)劃

2. 必收集的背景信息

• 公司背景：成立時(shí)間、規(guī)模、行業(yè)案例
• 技術(shù)背景：核心技術(shù)、迭代節(jié)奏、生態(tài)合作
• 客戶與場(chǎng)景：目標(biāo)行業(yè)、使用角色、核心痛點(diǎn)

三、第二步：B 端競(jìng)品怎么找、怎么篩？

1. 四類必選競(jìng)品

1. 初代產(chǎn)品：看行業(yè)起源，理解原始需求
2. 直接競(jìng)品：核心對(duì)標(biāo)，全面拆解
3. 間接競(jìng)品：局部功能可借鑒的產(chǎn)品
4. 頭部競(jìng)品：行業(yè)標(biāo)桿，看成熟方案

2. 小眾領(lǐng)域：先發(fā)散→再收斂

• 發(fā)散：提煉核心關(guān)鍵詞（如體驗(yàn)管理→CEM、體驗(yàn)監(jiān)測(cè)、客戶洞察、數(shù)據(jù)采集）
• 收斂：用官網(wǎng)信息篩選，剔除定位不符的 “偽競(jìng)品”

3. 信息渠道

• 行業(yè)報(bào)告、行業(yè)峰會(huì) / 論壇
• 搜索引擎、垂直媒體
• 廠商官網(wǎng)、客戶案例、銷售資料

四、第三步：B 端產(chǎn)品難體驗(yàn)？這 4 種方法最實(shí)用

1. 半公開(kāi)產(chǎn)品（可對(duì)外售賣）

• 看官網(wǎng)：快速了解定位、功能、客戶、案例
• 申請(qǐng)?jiān)囉?/ 付費(fèi)：最真實(shí)體驗(yàn)流程與交互
• 角色扮演咨詢：假裝客戶問(wèn)銷售，獲取報(bào)價(jià)、交付、實(shí)施細(xì)節(jié)

2. 非公開(kāi)產(chǎn)品（內(nèi)部系統(tǒng) / 定制系統(tǒng)）

• 人脈借賬號(hào)：親自操作體驗(yàn)
• 操作錄屏 / 影子計(jì)劃：錄屏回放完整流程
• 用戶訪談：訪談使用者 / 客服，了解真實(shí)痛點(diǎn)
• 流程記錄：梳理操作路徑，還原體驗(yàn)地圖

五、第四步：分析總結(jié) + 輸出可落地結(jié)論

1. 按框架對(duì)齊信息：功能、流程、體驗(yàn)、定價(jià)、客戶、服務(wù)逐項(xiàng)對(duì)比
2. 提煉優(yōu)劣勢(shì)：哪些可直接借鑒、哪些要避開(kāi)
3. 結(jié)合自身落地：不照搬競(jìng)品，匹配公司資源、產(chǎn)品定位、團(tuán)隊(duì)能力
4. 長(zhǎng)期跟蹤：B 端迭代慢，需持續(xù)關(guān)注競(jìng)品更新

六、極簡(jiǎn)工作流程（直接照做）

定目標(biāo) → 2. 搭框架 → 3. 找競(jìng)品 → 4. 巧體驗(yàn) → 5. 對(duì)比分析 → 6. 輸出結(jié)論與迭代建議

轉(zhuǎn)載：優(yōu)設(shè)

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