誰說B端醫(yī)療軟件只能是枯燥的表格？

今天分享一個(gè)把嚴(yán)謹(jǐn)科技做成藝術(shù)品的案例——德祥生物全自動(dòng)血型分析系統(tǒng)。

由蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）操刀，這次不僅是UI升級，更是一場關(guān)于“效率與美感”的深度重構(gòu)！

亮點(diǎn)一：色彩心理學(xué)的應(yīng)用 

摒棄傳統(tǒng)高亮色，采用冷調(diào)藍(lán)+淺灰背景。

目的：降低視覺噪點(diǎn)，緩解檢驗(yàn)科醫(yī)生長時(shí)間工作的視覺疲勞，同時(shí)保持醫(yī)療設(shè)備的嚴(yán)謹(jǐn)感。

 亮點(diǎn)二：信息層級重構(gòu)（左-中-右）

左側(cè)導(dǎo)航：功能分區(qū)明確，快速切換；

中間核心區(qū)：模擬物理卡盤形態(tài)，直觀展示運(yùn)行狀態(tài)；

右側(cè)數(shù)據(jù)區(qū)：關(guān)鍵指標(biāo)（樣本數(shù)、完成率）實(shí)時(shí)懸浮。

目的：符合人眼掃描習(xí)慣，縮短尋找信息的時(shí)間，提升操作效率。 

亮點(diǎn)三：異常狀態(tài)的強(qiáng)提醒 

利用紅/綠/藍(lán)三色建立條件反射。

目的：無需閱讀文字，余光掃過即可判斷設(shè)備是“正常”、“進(jìn)行中”還是“報(bào)錯(cuò)”，極大降低事故風(fēng)險(xiǎn)。 

設(shè)計(jì)師碎碎念： 

好的B端設(shè)計(jì)，是在克制中找平衡。 既要滿足微流控技術(shù)的復(fù)雜參數(shù)展示，又要保證界面的清爽易用。 這套設(shè)計(jì)做到了“始于顏值，忠于效率”，值得所有醫(yī)療SaaS產(chǎn)品經(jīng)理參考！

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

最近一直在做GIS監(jiān)測類的項(xiàng)目，從大氣污染到生態(tài)資源，從氣象預(yù)報(bào)到城市管網(wǎng)。越做越覺得，GIS監(jiān)測的設(shè)計(jì)，真的不只是“畫個(gè)好看的地圖”那么簡單。

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

近期完成了一個(gè)頗具成就感的項(xiàng)目——青海師范大學(xué)大氣污染可視化系統(tǒng)的界面視覺設(shè)計(jì)與交互設(shè)計(jì)。

項(xiàng)目背景：

該系統(tǒng)由青海師范大學(xué)委托進(jìn)行重點(diǎn)頁改版，旨在參加環(huán)保信息化領(lǐng)域的比賽。原系統(tǒng)界面功能區(qū)劃分明確，但數(shù)據(jù)堆疊較為擁擠，視覺比重失衡，信息層級模糊，導(dǎo)致用戶難以快速聚焦核心內(nèi)容。

設(shè)計(jì)策略與優(yōu)化：

1、風(fēng)格定位：采用科技感設(shè)計(jì)語言，以深藍(lán)為基底，通過背景圖案增強(qiáng)縱深感，輔以科技感邊框與線條點(diǎn)綴，在豐富頁面層次的同時(shí)突出關(guān)鍵數(shù)據(jù)。

2、信息重構(gòu)：面對龐雜數(shù)據(jù)，去粗取精，提煉核心內(nèi)容。通過文字顏色、粗細(xì)及高亮處理的差異化運(yùn)用，強(qiáng)化主次層級，使用戶能夠以直觀的方式獲取信息，有效降低理解難度。

3、視覺優(yōu)化：以清晰圖表替代文字堆砌，適度留白營造呼吸感。關(guān)鍵數(shù)據(jù)浮于場景之上，形成空間層次，在有擴(kuò)展性的同時(shí)提升閱讀體驗(yàn)。

4、場景落地：完成全國頁面及山西省臨汾市專題頁的精細(xì)化設(shè)計(jì)，涵蓋治理事件、效果分析及污染濃度趨勢等核心模塊。

一點(diǎn)感悟：

大屏設(shè)計(jì)的核心難點(diǎn)從來不是炫技，而是將復(fù)雜數(shù)據(jù)轉(zhuǎn)化為清晰易懂的信息。界面之美，在于讓用戶"一眼就懂"。

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

民宿預(yù)訂平臺(tái)的首頁設(shè)計(jì)如何精準(zhǔn)捕捉年輕用戶？木鳥、途家、美團(tuán)三大平臺(tái)通過差異化的首頁布局，分別滿足了00后的場景化需求、家庭度假的深度體驗(yàn)和95后的低價(jià)偏好。本文將深入拆解各家平臺(tái)的流量分發(fā)邏輯，揭示從搜索框到金剛區(qū)的每一個(gè)設(shè)計(jì)細(xì)節(jié)，如何成為影響用戶決策的關(guān)鍵因素。

首頁作為每個(gè)平臺(tái)的門面，不僅是形象的體現(xiàn)，也是所有業(yè)務(wù)的入口、用戶的必經(jīng)之路。不同功能的App有著不一樣的首頁模塊，選擇一種適合產(chǎn)品本身的首頁展示方式非常重要。國內(nèi)民宿預(yù)訂平臺(tái)們，又是如何通過APP首頁設(shè)置實(shí)現(xiàn)增長的？

木鳥、途家、美團(tuán)用戶群體差異

開始進(jìn)行APP首頁對比分析之前，我們先看下木鳥、途家、美團(tuán)用戶的差異。

木鳥民宿近年的年度報(bào)告中多次提到，00后用戶占比59%。從途家民宿五一客群看，報(bào)告中提到：“00后”和“80后”是小城民宿消費(fèi)的兩大主力，預(yù)訂量占比都達(dá)到24%。美團(tuán)旅行清明報(bào)告中提到，“95后”占比達(dá)到48%。

三大民宿預(yù)訂平臺(tái)紛紛聚焦95后及00后——那些已經(jīng)不滿足于“酒店住宿”邏輯，對住宿體驗(yàn)產(chǎn)生興趣的年輕用戶群。

據(jù)馬蜂窩數(shù)據(jù)，年輕用戶群基礎(chǔ)功能型的“硬性消費(fèi)”占比從2021年約70%降至2025年約50%，而精神體驗(yàn)型的“彈性消費(fèi)”則從約28%升至約42%，沉浸式體驗(yàn)?zāi)暝鏊俪^30%。千人千面的消費(fèi)需求正在倒逼供給側(cè)從標(biāo)準(zhǔn)化產(chǎn)品轉(zhuǎn)向個(gè)性化、場景化供給。

回顧民宿市場十余年發(fā)展，一條清晰脈絡(luò)是“加法邏輯”：從最初的農(nóng)家樂、日租房，再到網(wǎng)紅特色民宿，再到各種“民宿+”的挖掘。用戶不再滿足于單純的民宿入住，開始期待有更多住宿功能場景之外的體驗(yàn)。

木鳥的細(xì)分場景、途家民宿的度假需求、美團(tuán)民宿的低價(jià)體驗(yàn)，都不是標(biāo)準(zhǔn)化復(fù)制，而是根據(jù)各自不同的定位、用戶、體驗(yàn)需求定制設(shè)計(jì)。本質(zhì)上，是回答清楚一個(gè)問題：用戶在什么場景下住民宿，旅游出片、攜寵出游、周末度假、同學(xué)聚會(huì)，不同場景對應(yīng)不同需求，最終催生出不一樣的產(chǎn)品設(shè)計(jì)。

從首頁設(shè)計(jì)看流量分發(fā)邏輯

研究表明，較少的選擇會(huì)讓用戶更愉悅一些。木鳥、途家、美團(tuán)作為垂類民宿預(yù)訂平臺(tái)，核心目標(biāo)非常直接，省去了多元業(yè)務(wù)的流量取舍，流量分發(fā)和路徑非常清晰。

從三家民宿預(yù)訂平臺(tái)的首頁來看，首頁的結(jié)構(gòu)制定邏輯決定了首屏內(nèi)容是權(quán)重最高的，越往下權(quán)重越低，這是一種頭重腳輕的布局結(jié)構(gòu)。基于這種邏輯，視覺效果的強(qiáng)弱也是由上到下衰減的，而不是下方權(quán)重低的模塊反而視覺最突出。

木鳥、途家、美團(tuán)APP的首頁都把最核心的民宿預(yù)訂按鈕放到了首頁首屏中心位置，重要屬性依次下降。木鳥民宿區(qū)別于途家和美團(tuán)民宿的點(diǎn)在于，木鳥民宿只有首屏，沒有下拉界面。這樣做的好處有二：一是用戶目光更聚焦，核心首屏只保留了必要的預(yù)訂功能和服務(wù)展示，減少用戶在首屏階段的跳出；第二點(diǎn)則是避免了二屏往后的流量衰減，對一個(gè)垂類平臺(tái)來說，后續(xù)屏的設(shè)置意義不大，用戶的核心目的就是為了訂民宿。

下面筆者結(jié)合各家APP的詳細(xì)路徑來詳細(xì)拆解。

（木鳥民宿）

木鳥民宿首頁，重要的分流模塊為：搜索、訂民宿、二級導(dǎo)航、金剛區(qū)，分發(fā)邏輯由明確需求和隱形需求兩部分組成。

明確需求：用戶有明確目的，通過城市及地標(biāo)定位直接查找民宿；隱形需求：根據(jù)用戶興趣不同，潛在需要的分發(fā)邏輯，例如周末出游、人氣好房、寵物出游等。

明確需求各家差異不大，核心差異點(diǎn)在隱形需求。首頁的又一個(gè)關(guān)鍵目標(biāo)，是為不同風(fēng)格不同訴求的用戶鋪設(shè)合理的下單路徑。

按入住目的來分，有的用戶是精準(zhǔn)型用戶，很清楚自己要住在哪里要哪天出行，這樣的結(jié)構(gòu)就方便用戶一次篩選入離時(shí)間、地標(biāo)位置等；有的用戶是半精準(zhǔn)用戶，知道自己要去哪個(gè)城市但不具體，就可以通過目標(biāo)推薦給與用戶選擇。

按出行喜好來分，有的用戶是問題導(dǎo)向型，只要有地理位置符合的民宿就可以入住；有的用戶是場景指向或特殊需求，比如攜寵出行、出片等等。

木鳥民宿的目的分區(qū)相對清晰，沒有重復(fù)的部分。

（途家民宿）

途家民宿的首頁功能則相對繁瑣，各種需求穿插出現(xiàn)。明確需求部分和木鳥民宿的邏輯相同，不同點(diǎn)在于宮格設(shè)置。途家民宿的宮格重點(diǎn)在平臺(tái)側(cè)的套餐推廣和會(huì)員，這個(gè)區(qū)別或許是由于途家民宿營收壓力增大，流量下滑導(dǎo)致單純的訂房傭金收入下滑，不足以支撐途家民宿的自造血，從而平臺(tái)側(cè)變現(xiàn)需求大。

（美團(tuán)民宿）

美團(tuán)民宿首頁沒有平臺(tái)業(yè)務(wù)需求的設(shè)計(jì)，單純的展示內(nèi)容資源。首頁結(jié)構(gòu)單一，視覺美觀，但屏幕效率低。

用戶為什么要留在這里？

從三家民宿預(yù)訂平臺(tái)的首頁結(jié)構(gòu)拆解可以看出，木鳥民宿用戶側(cè)和平臺(tái)側(cè)設(shè)計(jì)相對平均，途家民宿重平臺(tái)需求，美團(tuán)民宿重用戶需求。這與各平臺(tái)的運(yùn)營現(xiàn)狀緊密相關(guān)。

木鳥和途家是中國最早的那批民宿平臺(tái)，在2017年之后進(jìn)入長時(shí)間的木途美三大時(shí)期。但在2020年途家民宿關(guān)停20城直營房源之后，途家民宿的現(xiàn)金流和營收壓力驟然增加，攜程商旅流量下滑加之重心轉(zhuǎn)向跨境游，途家民宿可謂雪上加霜，難以獨(dú)立行走的途家靠自身引流的傭金費(fèi)用并不足以支撐商業(yè)運(yùn)轉(zhuǎn)，從而平臺(tái)側(cè)變現(xiàn)需求增加，這也是途家在首頁中增加套餐和會(huì)員業(yè)務(wù)的最大因素。

木鳥民宿自2020年實(shí)現(xiàn)連續(xù)盈利后，盡管是一個(gè)獨(dú)立運(yùn)營的平臺(tái)，但80%的自有流量讓木鳥實(shí)現(xiàn)了良好的“流量-訂單-擴(kuò)張”的循環(huán)，網(wǎng)紅民宿以及延伸的細(xì)分場景成為平臺(tái)引以為傲的產(chǎn)品力，這也使得木鳥兼具用戶體驗(yàn)和營收增長的雙端利好條件。

美團(tuán)民宿在首頁舍棄了平臺(tái)側(cè)內(nèi)容，主要和美團(tuán)本地生活的發(fā)展息息相關(guān)。自外賣大戰(zhàn)開始以來，美團(tuán)確立的就是高頻帶低頻的戰(zhàn)略，酒旅的變現(xiàn)壓力更多的放在主站美團(tuán)旅行板塊，對獨(dú)立APP的要求并不大。

首頁設(shè)計(jì)的最終目標(biāo)還是要圍繞讓用戶多逛逛，多看些民宿，以更少的點(diǎn)擊完成轉(zhuǎn)化。除設(shè)計(jì)外，重要的還是民宿平臺(tái)的房源和服務(wù)。木鳥民宿依托特色民宿體驗(yàn)場景守住核心用戶，途家期待通過家庭度假需求彌補(bǔ)商旅流量流失及特色體驗(yàn)短板，美團(tuán)聚焦絕對低價(jià)民宿削弱品質(zhì)缺失。因此，真正能讓用戶留下來的，仍在于平臺(tái)能否在民宿市場的發(fā)展更新中，找到不可替代的生態(tài)位。

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

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

近期和團(tuán)隊(duì)一起完成了一個(gè)超酷的項(xiàng)目——飛秒激光時(shí)域熱反射測量系統(tǒng)（TDTR）的軟件UI設(shè)計(jì)。

不得不說，做科研設(shè)備設(shè)計(jì)真的太“上頭”了！

這不僅僅是一個(gè)軟件界面，更是連接科學(xué)家與納米世界的窗口。

分享一下我們的設(shè)計(jì)思考，希望能給做B端、科研儀器設(shè)計(jì)的姐妹們一點(diǎn)靈感～

1. 項(xiàng)目背景：讓復(fù)雜的測量變簡單 客戶是一家專注于熱學(xué)測試設(shè)備領(lǐng)域的科技企業(yè)。 

設(shè)備用途： 測量納米薄膜熱導(dǎo)率、界面熱阻等。

 核心挑戰(zhàn)： 如何把微納尺度的復(fù)雜數(shù)據(jù)，轉(zhuǎn)化成直觀、易操作的視覺語言？ 我們輸出了深色和淺色兩套方案，客戶一眼相中了淺色方案！理由是：干凈、通透，長時(shí)間盯著屏幕做實(shí)驗(yàn)眼睛不累。

2. 設(shè)計(jì)亮點(diǎn)：嚴(yán)謹(jǐn)中的“小心機(jī)” 

配色邏輯：紅灰CP太絕了！

灰色背景： 作為基底，最大程度保證了數(shù)據(jù)圖表的清晰度，不搶戲。

 紅色點(diǎn)睛： 作為品牌主色和警示色，關(guān)鍵操作按鈕和重要數(shù)據(jù)用紅色突出，既符合工業(yè)嚴(yán)謹(jǐn)性，又增加了視覺活力。

圖標(biāo)設(shè)計(jì)：低飽和度的“科研風(fēng)” 沒有用花里胡哨的漸變，而是采用幾何圖形+數(shù)據(jù)可視化元素。

線條扁平化，小尺寸下也能看清，降低科研人員的認(rèn)知成本。

布局：多面板分欄 左側(cè)控制參數(shù)，中間展示實(shí)時(shí)數(shù)據(jù)，右側(cè)顯示擬合分析。

這種布局讓科研人員可以“一眼看全”，不用頻繁切換頁面，大大提升了實(shí)驗(yàn)效率。

3. 從設(shè)計(jì)到落地：高還原度的秘密 讓人驕傲的是，我們不僅做了UI設(shè)計(jì)，還負(fù)責(zé)了QT前端開發(fā)！ 

通過多輪的效果走查，我們實(shí)現(xiàn)了設(shè)計(jì)稿的高還原度落地。看著設(shè)計(jì)圖變成真正能跑代碼、能測數(shù)據(jù)的軟件，這種成就感真的爆棚！

4. 設(shè)計(jì)師碎碎念

做科研儀器設(shè)計(jì)，“克制”是最大的美德。 我們不需要炫技，只需要讓數(shù)據(jù)更清晰，讓操作更流暢。每一個(gè)像素的打磨，都是為了致敬科學(xué)的嚴(yán)謹(jǐn)。

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

北京蘭亭妙微 UI 設(shè)計(jì)公司，成立 16 年來，始終保持著對國內(nèi)外優(yōu)秀設(shè)計(jì)作品的學(xué)習(xí)與研究。我們持續(xù)追蹤全球前沿的 UI/UX 設(shè)計(jì)趨勢，從中提煉可落地的設(shè)計(jì)方法論，分享給同樣熱愛設(shè)計(jì)的你。今天分享分析一套名為「APEX」的航天發(fā)射與回收控制臺(tái) UI 設(shè)計(jì)系統(tǒng)——它可能是近年來暗黑系數(shù)據(jù)大屏領(lǐng)域最完整的作品之一。

────────────────────────────────────────

一、品牌系統(tǒng)構(gòu)建：從 Logo 到物理載體的完整閉環(huán)

上圖是Logo Construction 頁面，包含幾何圖形構(gòu)建過程、Key Values 清單、Clear Space 規(guī)范、On-Board Panel 金屬銘牌效果圖、ID Card 工牌效果圖。

這套設(shè)計(jì)的起點(diǎn)不是界面本身，而是一個(gè)完整的品牌識(shí)別體系。Logo 采用幾何化的"M/N"折線圖形，通過嚴(yán)格的網(wǎng)格系統(tǒng)和角度標(biāo)注（A1 60°、A2 60°）完成構(gòu)建。這種做法傳遞出一個(gè)信號(hào)：這不是"畫出來的"，而是"工程推導(dǎo)出來"的。

三個(gè)值得注意的品牌細(xì)節(jié)：

• Key Values 清單將 Corner Radius、Stack Ratio、Grid Multiple 等參數(shù)量化到小數(shù)點(diǎn)后兩位——這種"偽工程規(guī)范"的呈現(xiàn)方式，本身就是一種視覺敘事手段，讓品牌看起來像真實(shí)的軍工項(xiàng)目

• On-Board Panel 金屬銘牌效果圖：把 Logo 做成金屬蝕刻效果，配合 S/N 序列號(hào)和規(guī)格參數(shù)（AL-142 SPEC: AMS 4027），完成了從數(shù)字設(shè)計(jì)到物理實(shí)體的視覺跨越

• ID Card 工牌：Operator / Alex Chen / Launch Director / EXP 12/2026，用真實(shí)工牌的格式強(qiáng)化了整個(gè)項(xiàng)目的沉浸感

設(shè)計(jì)啟示：B 端/工業(yè)級 UI 項(xiàng)目，如果能在界面之外補(bǔ)充品牌載體（銘牌、工牌、實(shí)體 Mockup），說服力會(huì)呈指數(shù)級增長。

────────────────────────────────────────

二、設(shè)計(jì)敘事：用文檔頁面講一個(gè)完整的故事

上圖是The Brief 文檔頁 + WHAT BROKE ON B-04 事故報(bào)告頁。

這套作品最獨(dú)特的地方在于：它不只是"好看的界面"，而是有故事背景的完整設(shè)計(jì)系統(tǒng)。

The Brief 頁面采用類似軍方密件的紅頭文件格式——FROM / TO / DATE / SUBJECT / PRIORITY 的元信息欄，正文用襯線體排版，引用語"We launch the booster every twenty-three days. We recover it every twenty-three days"營造出強(qiáng)烈的任務(wù)氛圍。

B-04 事故報(bào)告頁則展示了另一種信息架構(gòu)能力：

• Mission Timeline：一條時(shí)間軸貫穿從 PRE-IGNITION 到 RECOVERY COMPLETE 的全過程，關(guān)鍵節(jié)點(diǎn)（T+04:57 TELEMETRY GAP · 30s）用黃色高亮 + 虛線框標(biāo)注異常區(qū)間——這是非常成熟的事件標(biāo)注模式

• Operator Stress Map：三張并排的折線圖分別展示 Launch Director / Telemetry Officer / Recovery Captain 的注意力負(fù)荷曲線，黃色漸變填充區(qū)域直觀標(biāo)示高壓時(shí)段

• Operator Testimonials：底部三張引言卡片用雙引號(hào)圖標(biāo) + 小字署名，把冷冰冰的數(shù)據(jù)還原為人的體驗(yàn)——"We were guessing for thirty-eight seconds"

這種"數(shù)據(jù) + 人文敘事"的組合，是高端 B 端設(shè)計(jì)區(qū)別于普通儀表盤的關(guān)鍵差異點(diǎn)。

────────────────────────────────────────

三、概念錨定頁：一句話建立全局認(rèn)知

上圖是One surface. Four operators. Nine minutes. 概念標(biāo)題頁。

"One surface. Four operators. Nine minutes."

這句話只有六個(gè)英文單詞，但它完成了三件事：

• 定義了交互范式（One surface = 統(tǒng)一操作界面）

• 定義了用戶角色（Four operators = 四個(gè)操作崗位）

• 定義了時(shí)間約束（Nine minutes = 任務(wù)窗口）

下方四張線稿風(fēng)格的人物側(cè)臉插圖（Launch Director / Telemetry Officer / Recovery Captain / Engineer），用極簡的輪廓線勾勒出角色身份，每個(gè)頭像下方標(biāo)注崗位名稱。這種處理方式在視覺上極度克制，卻信息量充足。

設(shè)計(jì)啟示：任何復(fù)雜系統(tǒng)的 UI 設(shè)計(jì)，都應(yīng)該有一個(gè)"一句話概括"的概念頁。它不僅是封面，更是整個(gè)設(shè)計(jì)系統(tǒng)的"憲法"——后續(xù)所有界面的設(shè)計(jì)決策都要能回溯到這句話。

────────────────────────────────────────

四、主控面板：T-Minus 倒計(jì)時(shí)作為視覺錘

上圖是主控面板總覽 + Launch Director 主界面。

這是整套設(shè)計(jì)的核心界面。T-MINUS HOLD 00:10:42.88 以巨大的等寬字體占據(jù)左半屏視覺重心，周圍是大量留白——和之前分析的車輛儀表盤使用的是同一策略：讓數(shù)字自己說話。

但這套設(shè)計(jì)在此基礎(chǔ)上做了更極致的延伸：

① System Readiness 點(diǎn)陣網(wǎng)格 右側(cè)用一個(gè) 8×8 的方格矩陣表示系統(tǒng)狀態(tài)，每個(gè)子系統(tǒng)（Avionics / Propulsion / Range / Payload 等）對應(yīng)一個(gè)格子。綠色 = GO，橙色 = HOLD，紅色 = NO-GO。這種"一目了然"的狀態(tài)表達(dá)方式比文字列表高效得多——用戶可以在 1 秒內(nèi)掃完所有子系統(tǒng)健康狀態(tài)。

② Auto-Sequence Path 自動(dòng)序列路徑 左側(cè)豎向排列的任務(wù)清單（Sensor Calibration → RF Uplink Established → Range Clearance...），每個(gè)任務(wù)前用三角形圖標(biāo)表示狀態(tài)：綠色 ▲ = 已完成，橙色 ? = 等待中，灰色 = 未開始。這是一種非常清晰的線性進(jìn)度可視化方式。

③ 火箭線稿插畫 右側(cè)大面積區(qū)域放置火箭透明線稿圖（Wireframe），內(nèi)部用綠色漸變填充表示液氧（LOX）儲(chǔ)量——84.2%。這種"技術(shù)藍(lán)圖 × 實(shí)時(shí)數(shù)據(jù)"的組合，既提供了設(shè)備形態(tài)參照，又嵌入了關(guān)鍵運(yùn)行參數(shù)。

④ Secure Audio Channel 音頻通道波形圖 右上角的小型音頻波形條（AES-256 ACTIVE），暗示這是一個(gè)實(shí)時(shí)通訊環(huán)境。這類"微細(xì)節(jié)"的存在感雖然弱，但對營造專業(yè)氛圍至關(guān)重要。

────────────────────────────────────────

五、多角色界面分工：四個(gè)視角，四種數(shù)據(jù)密度

上圖是Stage 1 LOX 詳情 + 引擎集群溫度監(jiān)控。

上圖是Launch Director 與 Telemetry Officer 并排對比。

上圖是Recovery Captain 與 Engineer 并排對比。

這套設(shè)計(jì)最令人印象深刻的架構(gòu)決策是：為四個(gè)不同角色設(shè)計(jì)了完全不同的數(shù)據(jù)視圖，且每個(gè)視圖的信息密度和數(shù)據(jù)類型都精確匹配該角色的職責(zé)：

Stage 1 LOX 詳情卡片的設(shè)計(jì)尤其出色：

• 84.2% 用超大的綠色等寬字體顯示

• 右側(cè)是一個(gè)透明的圓柱形容器 3D 渲染圖，內(nèi)部綠色液體高度與百分比對應(yīng)——數(shù)據(jù)可視化與三維插畫的完美融合

• 下方列出 TEMP（-183.4°C）和 PRESSURE（4.2 BAR），字體大小層級清晰

• 引擎集群部分用九宮格排布九個(gè)引擎噴口，每個(gè)噴口上方標(biāo)注編號(hào)，其中 #07 用橙色高亮標(biāo)記異常溫度（1120°C），#03 和 #09 顯示正常溫度

Engine Cluster 溫度條形圖：底部一根橫向的溫度分布條，從綠（420°C）過渡到黃再到紅（1480°C），ENG-07 區(qū)域明顯偏黃/橙——一眼就能定位哪個(gè)引擎出了問題。

────────────────────────────────────────

六、拓?fù)浣Y(jié)構(gòu)：從全局理解信息流轉(zhuǎn)

上圖是TOPOLOGY 拓?fù)鋱D。"Four roles. Two locations. One protocol."

這張拓?fù)鋱D回答了一個(gè)核心問題：四個(gè)操作員之間是什么關(guān)系？數(shù)據(jù)怎么流動(dòng)？

畫面布局清晰地展示了信息鏈路：

• Ground Station（地面站衛(wèi)星天線）→ 通過 Fiber Backbone 連接到 Mission Control（任務(wù)控制中心）

• Mission Control 內(nèi)部有兩個(gè)席位：Launch Director + Telemetry Officer

• Mission Control 通過 Orbital Uplink 連接到 Satellite GEO-04

• 同時(shí)通過 Manual Override/Fallback 鏈路連接到 DroneShip "North Star"（海上回收船）

• DroneShip 上有另外兩個(gè)席位：Recovery Captain + Engineer

• 還有一個(gè)獨(dú)立的 Meteorological Mesh / Atlantic 氣象數(shù)據(jù)源

每條連線都用虛線 + 不同顏色區(qū)分（綠色 = 正常鏈路，黃色 = 備用鏈路，紅色 = 應(yīng)急鏈路），并標(biāo)注了延遲時(shí)間（Fiber 1.2 Gbps / Orbital 38 ms / Descent Targeting 12 ms）。

設(shè)計(jì)啟示：復(fù)雜系統(tǒng)的 UI 設(shè)計(jì)，如果缺少一張"上帝視角"的拓?fù)鋱D，用戶就很難建立對整體架構(gòu)的心智模型。這張拓?fù)鋱D就是整個(gè)系統(tǒng)的"地圖"。

────────────────────────────────────────

七、軌道與大氣層：飛行階段的動(dòng)態(tài)數(shù)據(jù)表達(dá)

上圖是軌道飛行視圖 + Ascent 階段視圖。

這是整套設(shè)計(jì)中最具視覺沖擊力的頁面之一：

上半部分：地球邊緣的太空視角，可以看到城市燈光分布在大陸上，一枚白色箭頭軌跡線從地表射入太空，旁邊標(biāo)注 8.42 MACH 和 112.4 KM —— 當(dāng)前速度和高度。右上角的狀態(tài)標(biāo)簽顯示 MAX-Q CLEARED（已通過最大動(dòng)壓點(diǎn)）。

下半部分分為多個(gè)數(shù)據(jù)模塊：

• Aerodynamic G-Force：左側(cè)的 G 力曲線圖，紅色斜紋填充區(qū)域標(biāo)示危險(xiǎn)范圍，白線表示當(dāng)前值（// critical load 6.22G //）

• Aerodynamic Heating：六邊形蜂窩熱力圖，中心亮紅色表示最高溫區(qū)（Peak Nose Core Temp: 1,940°C）

• Flight Event // WECO：事件列表，[ STAGE 1 CUTOFF CONFIRMED ] 用綠色標(biāo)注已完成事件

• Trajectory Attitude：右側(cè)小型地球儀顯示當(dāng)前姿態(tài)角（Pitch: 48.1°, Roll: 0.8°）

特別值得一提的是下圖的變體版本——部分區(qū)域被黃色/黑色斜紋遮罩覆蓋，模擬軍事系統(tǒng)中常見的"機(jī)密信息遮蓋"效果。這種細(xì)節(jié)處理極大地增強(qiáng)了真實(shí)感。

────────────────────────────────────────

八、物理環(huán)境融合：從屏幕走進(jìn)控制室

上圖是真實(shí)控制室環(huán)境中的大屏渲染。

這張圖把 UI 從"屏幕截圖"提升到了"空間體驗(yàn)"層面：

• 整個(gè)控制室籠罩在紅色應(yīng)急燈光下，營造出緊張的事故處置氛圍

• 中央大屏顯示的是 Telemetry Officer 的雷達(dá)界面（紅色主題）

• 大屏前方坐著幾位操作員的剪影背影，他們面前還有各自的工作站屏幕

• 右上角的數(shù)字時(shí)鐘顯示 3:20，暗示這是某個(gè)關(guān)鍵時(shí)刻的時(shí)間戳

為什么這張圖重要？

大多數(shù) UI 設(shè)計(jì)只停留在 Figma/Sketch 的畫布上。但這套設(shè)計(jì)考慮了物理環(huán)境中的呈現(xiàn)效果——紅色環(huán)境光如何影響界面的可讀性？大尺寸投影下的字號(hào)是否足夠？多人協(xié)作時(shí)的視線方向是否合理？這些"超出像素"的問題才是決定實(shí)際落地質(zhì)量的關(guān)鍵。

────────────────────────────────────────

九、應(yīng)急模式：顏色反轉(zhuǎn)傳達(dá)緊急狀態(tài)

上圖是Aborted/Ordnance 中止/引爆界面。

當(dāng)系統(tǒng)進(jìn)入中止/緊急模式時(shí)，界面發(fā)生了顯著變化：

• 主色調(diào)從綠色切換為紅色：正常態(tài)的綠色元素全部變?yōu)榧t色或橙紅色

• 圓形雷達(dá)視圖中央顯示 KSC LAUNCH-PAD 39A，外圍有多層同心圓環(huán)（綠色→黃色→紅色）代表不同的安全區(qū)域邊界

• Exclusion Zone [ EXCLUSION ZONE ] 標(biāo)簽用紅色菱形圖標(biāo)標(biāo)記禁區(qū)

• 左上角顯示 ABORT 狀態(tài)標(biāo)識(shí)，左側(cè)邊欄也變?yōu)榧t色調(diào)

• 底部的 Flight Termination System 面板顯示 [ ORDNANCE ARMED ] 狀態(tài)，KEY_ALPHA / CMD 顯示 [AUTHORIZED] 或 [PENDING]

這種基于狀態(tài)的色彩系統(tǒng)反轉(zhuǎn)，是高風(fēng)險(xiǎn)行業(yè) UI 的標(biāo)準(zhǔn)做法——用戶不需要閱讀文字，僅憑顏色就能判斷當(dāng)前處于"正常"還是"緊急"狀態(tài)。

────────────────────────────────────────

十、回收作業(yè)：海上著陸區(qū)的精密監(jiān)控

上圖是DroneShip 回收船甲板監(jiān)控界面。

Recovery Captain 的主界面展示了海上回收階段的全貌：

• 頂部狀態(tài)欄：Vessel 名稱 "A SHORTFALL OF GRAVITAS"、Droneship Connectivity [STABLE]、Signal Latency 24 MS

• Sea State & Wind：左上角海況熱力圖，Speed 14 KTS，Sea State 3 (MODERATE)

• 甲板俯視平面圖：中央大型區(qū)域顯示無人機(jī)船甲板布局，三層同心圓環(huán)（SAFE ZONE / RISK ZONE / ABORT ZONE），目標(biāo)落點(diǎn)用綠色菱形標(biāo)記

• 底部四模塊：

• Grid Fins：四個(gè)舵面角度滑塊（+02° ~ +05°）

• Deck Impact & Legs：著陸沖擊熱力圖 + 四條著陸腿狀態(tài)（LANDING LEGS: DEPLOYING...）

• Action Zone：機(jī)械臂抓取裝置的線稿圖 + [ DECK SECURE ] 按鈕

黃色/黑色警示條紋的使用也是一大亮點(diǎn)——多處區(qū)域用斜紋條紋表示"受限/加密/不可用"，既是功能表達(dá)也是一種視覺節(jié)奏的調(diào)節(jié)手段。

────────────────────────────────────────

十一、子系統(tǒng)模塊化：可組合的數(shù)據(jù)單元

上圖是Module 03/04 和 Module 05/06 子系統(tǒng)詳情。

最后兩張圖展示了子系統(tǒng)的精細(xì)化設(shè)計(jì)：

Module 03 — VECTOR THRUSTERS（矢量推進(jìn)器）：

• 四個(gè)推進(jìn)器的 3D 線稿圖，每個(gè)箭頭標(biāo)注推力方向

• 推力數(shù)值直接標(biāo)注在推進(jìn)器旁：42% / 38% / 89% / 34%

• 底部狀態(tài)欄：DP MODE: STATION KEEPING [ ACTIVE ]

Module 04 — ALTITUDE TELEMETRY（高度遙測）：

• 一條下降曲線圖，橫軸為 TIME TO IMPACT（撞擊倒計(jì)時(shí)），縱軸為 ALTITUDE

• 下方兩個(gè)超大數(shù)字：ALT: 1,240m / SINK RATE: 42 m/s

Module 05 — G-FORCE TELEMETRY：

• G 力曲線圖，紅色區(qū)域標(biāo)示危險(xiǎn)范圍

• 注釋文本：// critical load 6.22G //

Module 06 — STAGE SEPARATION & MECO：

• 事件確認(rèn)列表 + 多組進(jìn)度條（Stage 1 Return Trajectory / Grid Thrusters / Retro-Burn 等）

• 右側(cè)火箭剖面圖標(biāo)注各部件狀態(tài)（Pneumatic Clamps: RELEASED）

這些模塊化的設(shè)計(jì)使得整個(gè)系統(tǒng)具有極強(qiáng)的可擴(kuò)展性——新增一個(gè)子系統(tǒng)只需增加一個(gè) Module 卡片，而不需要重構(gòu)整個(gè)界面。

────────────────────────────────────────

總結(jié)：8 條可遷移的設(shè)計(jì)方法論

這套 APEX 發(fā)射控制系統(tǒng) UI 給我們留下了以下可直接應(yīng)用的設(shè)計(jì)原則：

1. 從品牌到界面的全鏈條設(shè)計(jì)：Logo → 工牌 → 銘牌 → 界面 → 物理環(huán)境，每一個(gè)觸點(diǎn)都在講故事

2. 概念先行，一句話定義系統(tǒng)："One surface. Four operators. Nine minutes." 讓所有設(shè)計(jì)決策有據(jù)可依

3. 角色驅(qū)動(dòng)的差異化界面：不同崗位看到不同數(shù)據(jù)，信息密度精確匹配職責(zé)需求

4. 狀態(tài)即顏色，顏色即語義：綠色=正常/GO，黃色=警告/HOLD，紅色=緊急/NO-GO/ABORT

5. 點(diǎn)陣網(wǎng)格替代狀態(tài)列表：System Readiness 的方格矩陣比文字列表快 5 倍完成認(rèn)知

6. 線稿插畫承載工程美感：透明線稿 × 數(shù)據(jù)填充，比寫實(shí)渲染更有"控制室"的專業(yè)感

7. 拓?fù)鋱D是復(fù)雜系統(tǒng)的必需品：沒有"地圖"，用戶就無法建立全局心智模型

8. 考慮物理環(huán)境的影響：屏幕上的好看 ≠ 控制室里好用，環(huán)境光、觀看距離、多人協(xié)作都是設(shè)計(jì)變量

────────────────────────────────────────

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

北京蘭亭妙微 UI 設(shè)計(jì)公司，成立 16 年來，始終保持著對國內(nèi)外優(yōu)秀設(shè)計(jì)作品的學(xué)習(xí)與研究。我們持續(xù)追蹤全球前沿的 UI/UX 設(shè)計(jì)趨勢，從中提煉可落地的設(shè)計(jì)方法論，分享給同樣熱愛設(shè)計(jì)的你。今天，我們來深度拆解一套車輛安全數(shù)據(jù)分析儀表盤的 UI 設(shè)計(jì)，從信息架構(gòu)、配色策略、移動(dòng)端適配到數(shù)據(jù)敘事的視覺表達(dá)，逐一解析其背后的設(shè)計(jì)決策。

────────────────────────────────────────

一、智能 AI 卡片設(shè)計(jì)：彈窗層級的克制表達(dá)

手機(jī)端 iPhone Mockup 中的 AI 智能洞察彈窗卡片，白色卡片浮層覆蓋在主界面之上。

手機(jī)端的這張 Smart AI Insight Card，展示了 B 端彈窗設(shè)計(jì)的一個(gè)重要原則：層級的建立靠光影，不靠線條。

• 主界面采用淺灰背景（約 #F5F6FA），彈窗卡片是純白浮層 + 微投影（Y-offset 4px, blur 8px），層次關(guān)系干凈利落，無需額外邊框來界定卡片范圍

• 卡片內(nèi)部包含車輛碰撞示意圖、型號(hào)信息（Ford Model 2017）、事件類型標(biāo)簽、CTA 鏈接共四類信息層，通過縱向網(wǎng)格對齊排布，視覺密度控制在舒適區(qū)間

• 左上角的藍(lán)色警示標(biāo)簽（高飽和藍(lán)，類似 #0047FF）是整個(gè)卡片唯一的色彩重心——它同時(shí)承擔(dān)了"信息類型標(biāo)識(shí)"和"視覺激活點(diǎn)"兩個(gè)職能，讓用戶 0.3 秒內(nèi)鎖定核心信息

設(shè)計(jì)啟示：彈窗卡片中，單一高飽和色點(diǎn) + 大量灰白留白 = 最高效的注意力引導(dǎo)策略。不要用多個(gè)顏色"爭搶"用戶視線——在 B 端場景下，克制即高級。

────────────────────────────────────────

二、配色體系：藍(lán)白雙色的技術(shù)感構(gòu)建

iPad 寬屏 Mockup 展示的 Advanced Visual Data Graph 界面，左側(cè)淺灰數(shù)據(jù)區(qū) + 右側(cè)高飽和藍(lán)詳情面板形成強(qiáng)烈對比。

全系界面僅使用藍(lán) + 灰白兩個(gè)色系，卻呈現(xiàn)出強(qiáng)烈的科技感和專業(yè)感。這種配色策略的背后是一套嚴(yán)格的色彩分工：

其中右側(cè)藍(lán)色詳情面板的處理尤為出色：純藍(lán)底色上使用白色線稿風(fēng)格的車輛技術(shù)插畫，融合了"工程圖紙"的美學(xué)質(zhì)感與"數(shù)字大屏"的現(xiàn)代感。這種「工程藍(lán)圖 × 數(shù)字大屏」的混搭風(fēng)格，是近兩年 B 端設(shè)計(jì)中逐漸成熟的視覺語言，特別適合汽車、工業(yè)、安防等領(lǐng)域的產(chǎn)品界面。

iPad Mockup 的展示意義：寬屏設(shè)備框讓儀表盤的寬屏布局優(yōu)勢一目了然——選對展示載體，本身就是最好的設(shè)計(jì)說明。

────────────────────────────────────────

三、信息架構(gòu)：數(shù)據(jù)優(yōu)先級的三層金字塔

Collision Analytics 完整看板，在筆記本設(shè)備 Mockup 中的實(shí)際效果展示，包含主數(shù)據(jù)區(qū) + 底部卡片列表 + 右側(cè)藍(lán)色抽屜面板。

在完整的 Collision Analytics 看板中，信息被嚴(yán)格劃分為三個(gè)優(yōu)先級層級，每一層對應(yīng)不同深度的閱讀需求：

第一層：核心指標(biāo)（0.5s 鎖定）

• 「48.2%」以超大字號(hào)占據(jù)左上角視覺重心區(qū)

• 這是用戶在任何場景下都能瞬間鎖定的"那個(gè)數(shù)字"

• 時(shí)間維度切片（Year/Quarter/Week）以 Tab 形式置于指標(biāo)上方，提供靈活切換的同時(shí)不侵占核心數(shù)字的空間

第二層：趨勢與異常標(biāo)注（5s 理解）

• 折線圖上用藍(lán)色豎線直接標(biāo)出風(fēng)險(xiǎn)突增的時(shí)間節(jié)點(diǎn)

• 箭頭線從豎線引出，連接到文字說明"Collision severity increased by 64.2%"

• 這種標(biāo)注式數(shù)據(jù)可視化讓用戶不必在圖表和說明文字之間來回跳轉(zhuǎn)——上下文信息被直接嵌入圖表內(nèi)部

第三層：可對比的詳情卡片（30s+ 深入）

• 底部三張卡片（Collision Reconstruction / Firestorm Viper / King Cobra）以等寬網(wǎng)格并列排布

• 每張卡片結(jié)構(gòu)完全一致：左側(cè)標(biāo)簽 + 中間標(biāo)題 + 右側(cè)關(guān)鍵百分比，支持快速橫向?qū)Ρ?/p>

• 右側(cè)藍(lán)色抽屜面板作為"按需展開"的詳情層，隨時(shí)可召喚、不搶占主內(nèi)容區(qū)域

核心方法論：B 端儀表盤的信息架構(gòu)不是"把數(shù)據(jù)放上去"，而是精心設(shè)計(jì)一條「用戶先看什么 → 再看什么 → 如何深入」的視線引導(dǎo)路徑。

────────────────────────────────────────

四、移動(dòng)端適配：減法設(shè)計(jì)的三個(gè)原則

手機(jī)端兩張卡片并排展示，左側(cè)為藍(lán)色聚焦卡片（Collision Reconstruction），右側(cè)為白色常規(guī)卡片，兩張卡片形成對比。

移動(dòng)端的 B 端設(shè)計(jì)面臨的核心挑戰(zhàn)是：在極有限的屏幕空間內(nèi)，把復(fù)雜數(shù)據(jù)講清楚。這組移動(dòng)端卡片展示了三個(gè)可復(fù)用的設(shè)計(jì)原則：

原則一：一卡一事 每張卡片承載一個(gè)分析命題，不做多任務(wù)混合。藍(lán)色卡片 = 需要用戶關(guān)注的條目，白色卡片 = 常規(guī)信息條目。顏色在此承擔(dān)了優(yōu)先級語義，而非裝飾功能。

原則二：圖文合一 車輛技術(shù)插畫與百分比數(shù)據(jù)（如 35% severity）在同一卡片內(nèi)左右排布。插圖不是裝飾——它用視覺化的方式解釋了"碰撞嚴(yán)重程度"這個(gè)抽象概念，大幅降低了用戶的理解成本。右側(cè)的折線小圖同時(shí)提供時(shí)間維度的趨勢感知。

原則三：時(shí)間軸極簡化 折線圖上方的時(shí)間維度切換（Year/Quarter/Week/Month/Day）只用一排文字 Tab 完成，整個(gè)交互區(qū)域高度不超過 40px——零控件感，零視覺冗余，卻承載了五個(gè)時(shí)間維度的切換入口。

────────────────────────────────────────

五、設(shè)計(jì)強(qiáng)化數(shù)字感受力：+64.2% 的視覺敘事

Focused Analytics 界面，左側(cè)大量留白區(qū)域居中展示 +64.2% 大數(shù)字，右側(cè)為折線趨勢圖 + 藍(lán)色聚焦行動(dòng)卡片。

最后一張 Focused Analytics 畫面，是全套設(shè)計(jì)中最值得細(xì)品的一個(gè)單頁。+64.2% 的增長數(shù)據(jù)被單獨(dú)放在整個(gè)左半屏，周圍是大量留白。這種處理方式背后有一條被反復(fù)驗(yàn)證的設(shè)計(jì)法則：

數(shù)字的"說服力" = 字號(hào) × 留白面積

具體執(zhí)行層面：

• 巨大的無襯線字體 + 極簡居中排版，讓數(shù)字本身成為頁面唯一的視覺錘，用戶不需要閱讀任何輔助文字，就能"感受"到這個(gè)數(shù)字的分量

• 右側(cè)折線圖從 0 開始緩慢爬升、斜率逐漸增大，用圖形曲線的"加速感"還原了"問題在惡化"的緊迫性——這是敘事型數(shù)據(jù)可視化的經(jīng)典手法，圖形本身在講一個(gè)"從平穩(wěn)到惡化"的故事

• 左灰右藍(lán)的分屏策略將界面分為"客觀數(shù)據(jù)區(qū)"和"行動(dòng)聚焦區(qū)"，完整閉環(huán)了「信息獲取 → 風(fēng)險(xiǎn)感知 → 行動(dòng)指引」的用戶旅程

• 藍(lán)色聚焦卡片內(nèi)部包含標(biāo)簽、標(biāo)題、技術(shù)插畫、百分比數(shù)值、進(jìn)度條、說明文字共 6 個(gè)信息層級，全部通過字號(hào)、字重、間距做出清晰區(qū)分，密而不亂

────────────────────────────────────────

六、總結(jié)：6條可遷移的設(shè)計(jì)原則

這套作品給我們提供了以下可直接應(yīng)用到實(shí)際項(xiàng)目中的設(shè)計(jì)準(zhǔn)則：

1. 配色做減法：2 個(gè)主色 + 灰白體系，足夠構(gòu)建完整的科技感 UI。顏色越多，信息噪音越大

2. 信息分三層：核心數(shù)字 → 趨勢標(biāo)注 → 對比詳情，為用戶建立有節(jié)奏的閱讀路徑

3. 彈窗靠光影：偏移投影 + 留白比邊框分割更優(yōu)雅，更符合現(xiàn)代 UI 的視覺趨勢

4. 顏色即信息：界面上唯一的高飽和色，必須指向用戶當(dāng)前最該關(guān)注的區(qū)域

5. 移動(dòng)端一卡一事：小屏不做多任務(wù)混合，一張卡片講清一個(gè)命題，寧可多滑一屏

6. 數(shù)字要能被"感受"：超大字號(hào) + 充足留白 + 敘事型曲線，比干巴巴的百分比數(shù)字更有沖擊力

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

螞蟻阿福 APP 以 AI 醫(yī)生朋友的身份重新定義健康管理，從對話式醫(yī)療入口到智能體驅(qū)動(dòng)的全流程服務(wù)，這款應(yīng)用正在顛覆傳統(tǒng)醫(yī)療產(chǎn)品的交互邏輯。它不僅通過人格化設(shè)計(jì)降低醫(yī)療決策壓力，更借助阿里生態(tài)實(shí)現(xiàn)從咨詢到就診的完整閉環(huán)。本文將深度解析其創(chuàng)新設(shè)計(jì)如何重構(gòu)用戶與醫(yī)療服務(wù)的連接方式。

今天向大家分享一款最近剛推出的螞蟻旗下的 AI 健康助手——螞蟻阿福 APP ，希望你能從這篇產(chǎn)品體驗(yàn)分析中有所收獲。如果你覺得我們的文章有價(jià)值，歡迎分享給你的朋友！

螞蟻阿福是誰？

螞蟻阿福是螞蟻集團(tuán)推出的 AI 健康管理應(yīng)用，由原 AI 健康工具 AQ 升級而來。產(chǎn)品愿景是成為用戶的 AI 醫(yī)生朋友，提供健康咨詢、圖片解讀（支持報(bào)告、病例、處方、藥盒）、個(gè)人和家庭健康檔案管理，以及預(yù)約掛號(hào)、云陪診等醫(yī)療健康服務(wù)。

螞蟻阿福有什么設(shè)計(jì)亮點(diǎn)？

對話式醫(yī)療入口：用 AI 重構(gòu)交互方式

當(dāng)你打開螞蟻阿福 APP的第一刻，你會(huì)發(fā)現(xiàn)它像 ChatGPT、DeepSeek 一樣，只有一個(gè)對話框。這正是 AI-UX 的典型表現(xiàn)形式——把「對話」作為核心入口，弱化傳統(tǒng)的多層級導(dǎo)航，讓用戶用一句話就能觸達(dá)預(yù)約、解讀報(bào)告、癥狀咨詢等多種服務(wù)。交互形式就像與醫(yī)生聊天，而不是過去在 App 里找入口、找功能。

設(shè)計(jì)亮點(diǎn)

• 人格化的 AI 形象與語言：螞蟻塑造了一個(gè)名叫阿福的卡通醫(yī)生 IP 形象，降低醫(yī)療決策的心理壓力，提升用戶信任感。
• 關(guān)鍵詞即體驗(yàn)起點(diǎn)：用戶無需理解產(chǎn)品結(jié)構(gòu)，輸入健康關(guān)鍵詞即可觸發(fā)服務(wù)，顯著降低使用門檻。
• 多智能體并行承載復(fù)雜場景：在傳統(tǒng)菜單欄上方，不同智能體對應(yīng)不同醫(yī)療流程，用戶一次點(diǎn)擊即可進(jìn)入明確的任務(wù)流，避免對話發(fā)散。

體驗(yàn)思考

對話式AI交互和傳統(tǒng)的菜單欄相比，用戶的心智需要改變什么？

最近我對用“用戶心智”這個(gè)知識(shí)點(diǎn)有了全新的理解。這得益于剛好在嘗試全新交互的設(shè)計(jì)，而體驗(yàn)到阿福時(shí)，我尤其感同身受，因此重新思考了這個(gè)問題。

從交互方式上看，傳統(tǒng)菜單欄要求用戶預(yù)先了解功能位置和層級結(jié)構(gòu)，通過”點(diǎn)擊—瀏覽—選擇”的路徑完成任務(wù)。而對話式 AI 交互讓用戶從”尋找功能”轉(zhuǎn)向”表達(dá)需求”，用自然語言直接描述問題，對話即交互、對話即操作。

這種轉(zhuǎn)變對應(yīng)著心智模型的兩個(gè)層面：

• 從空間導(dǎo)航到意圖表達(dá)：用戶不再需要在腦海中構(gòu)建”這個(gè)功能在哪個(gè)菜單下”的空間地圖，而是像與人對話一樣說出”我想做什么”，系統(tǒng)來理解并執(zhí)行。
• 從記憶負(fù)擔(dān)到表達(dá)負(fù)擔(dān)：雖然降低了記憶功能位置的成本，但增加了準(zhǔn)確描述需求的要求——用戶需要學(xué)會(huì)如何”問對問題”。

另外，你會(huì)發(fā)現(xiàn)阿福的頭部有點(diǎn)擁擠（包含用戶中心、智能體、任務(wù)中心等入口）。這是因?yàn)檫^去在菜單欄或金剛區(qū)的高頻功能都被上移了。也許這就是未來的設(shè)計(jì)趨勢——”菜單欄”從下往上，把最寶貴的黃金位置留給 AI。

心智模型（Mental Model）

心智模型是用戶基于過去經(jīng)驗(yàn)形成的認(rèn)知框架，決定了他們?nèi)绾卫斫猱a(chǎn)品的運(yùn)作方式。它影響用戶如何理解界面、預(yù)測交互結(jié)果并做出操作決策。當(dāng)產(chǎn)品的實(shí)際運(yùn)作方式與用戶的心智模型一致時(shí)，體驗(yàn)會(huì)更流暢；反之則會(huì)增加學(xué)習(xí)成本和認(rèn)知負(fù)擔(dān)。

AI 診室：全新的互聯(lián)網(wǎng)在線就診

與傳統(tǒng) AI 對話式交互不同，阿福將醫(yī)療場景中的高頻應(yīng)用設(shè)計(jì)成獨(dú)立智能體。用戶可以在底部對話框上方和頭部直接觸發(fā)，比如接下來介紹的 AI 診室。使用其他 AI 工具問診時(shí)，體驗(yàn)往往缺乏儀式感。但在阿福中，點(diǎn)擊 AI 問診后，系統(tǒng)會(huì)明確提示”你已進(jìn)入 AI 診室問診中”。接下來的流程會(huì)聚焦于你的癥狀，進(jìn)行梳理分析，最終推薦適合的醫(yī)院和醫(yī)生。

另外，阿福受益于阿里健康和支付寶的強(qiáng)大生態(tài)，可以在 APP 內(nèi)完成預(yù)約和問診的閉環(huán)。用戶只需一個(gè) APP，就能完成從診前咨詢到在線就診的全流程。

交互流程

• 用戶在底部打開 AI 診室智能體，系統(tǒng)顯示問診中。
• 輸入病情，可以切換就診人、上傳報(bào)告等。
• 第一輪分析：AI 判斷初步癥狀，實(shí)時(shí)顯示進(jìn)度（遵循系統(tǒng)可見性原則，體驗(yàn)很好），同時(shí)生成下一輪可能輸入的提示詞（交互體驗(yàn)相當(dāng)棒——點(diǎn)擊標(biāo)簽就能自動(dòng)跳入輸入框）。
• 第二輪分析：AI 繼續(xù)確認(rèn)癥狀（我預(yù)計(jì)系統(tǒng)已可預(yù)判 90% 的病情），并提供”直接出結(jié)論”按鈕——用戶可以選擇繼續(xù)補(bǔ)充信息，也可以直接查看專業(yè)結(jié)果。
• 多輪分析后或點(diǎn)擊”直接出結(jié)論”后，AI 給出最終病情判斷，并提供對應(yīng)解決方案、就近醫(yī)院掛號(hào)和醫(yī)生推薦。
• 用戶可選擇去公立醫(yī)院就診或直接在線問診。

設(shè)計(jì)亮點(diǎn)

• 智能體即場景容器：AI 診室不是聊天窗口,而是明確的”就診空間”，天然限定用戶心智，避免對話跑偏。
• 階段化流程強(qiáng)引導(dǎo)：從選咨詢?nèi)说矫枋霭Y狀，再到診療建議，每步都有清晰狀態(tài)提示，顯著降低醫(yī)療決策的不確定感。
• 任務(wù)完成感明確：通過”本次 AI 診室咨詢已結(jié)束”的節(jié)點(diǎn)提示，幫助用戶形成心理閉環(huán)，避免無限對話。

體驗(yàn)思考

如果你覺得 ChatGPT、DeepSeek 這類對話式 AI 產(chǎn)品的交互過于簡單，融入智能體設(shè)計(jì)的阿福會(huì)給你更多驚喜。智能體像一個(gè)封裝了特定功能的應(yīng)用，具有明確的目標(biāo)導(dǎo)向，用 AI 服務(wù)于這個(gè)目標(biāo)，而不是讓用戶在自然語言中”摸索路徑”。換句話說，智能體就像傳統(tǒng)的二級功能模塊——用戶觸發(fā)后，系統(tǒng)會(huì)在當(dāng)前場景中圍繞這個(gè)需求進(jìn)行交互。

正是這個(gè)流程的設(shè)計(jì)，讓我發(fā)現(xiàn)了它的獨(dú)特之處。無論是之前體驗(yàn)過的阿里旗下安診兒和訊飛曉醫(yī)，還是我 7 月份構(gòu)思的北京協(xié)和互聯(lián)網(wǎng)醫(yī)院 AI 版本方案，都未曾想過可以通過智能體來豐富交互設(shè)計(jì)形式。

AI 智能體是什么？

AI 智能體（AI Agent）是一種能夠自主感知環(huán)境、做出決策并執(zhí)行任務(wù)的 AI 系統(tǒng)。與傳統(tǒng)的對話式 AI 不同，智能體具有明確的目標(biāo)導(dǎo)向，能夠調(diào)用多種工具、API 和服務(wù)來完成復(fù)雜任務(wù)。

AI 找醫(yī)生：融入傳統(tǒng)交互的創(chuàng)新設(shè)計(jì)

AI 找醫(yī)生這個(gè)智能體同樣帶給我很大的驚喜和啟發(fā)。它成功地將傳統(tǒng)醫(yī)療 APP 中用戶已經(jīng)熟悉的交互模式融入產(chǎn)品，同時(shí)巧妙地結(jié)合了 AI 智能對話方式，形成了一種既保留用戶認(rèn)知習(xí)慣又具有創(chuàng)新性的混合交互體驗(yàn)。

交互流程

• 用戶在底部打開就醫(yī)服務(wù)智能體，點(diǎn)擊AI 找醫(yī)生。
• 平臺(tái)提供按科室和按疾病兩種類型的檢索（這一步和我們平時(shí)去醫(yī)院掛號(hào)找醫(yī)生的習(xí)慣完全一致）。
• 點(diǎn)擊科室或病種，觸發(fā) AI 對話，系統(tǒng)開始結(jié)合患者的病情、地區(qū)進(jìn)行推薦（醫(yī)生數(shù)據(jù)來源自在全國擁有 90 萬醫(yī)生的好大夫）。
• 患者可以直接進(jìn)入醫(yī)生主頁，進(jìn)行在線問診和掛號(hào)。
• 如果對平臺(tái)推薦的醫(yī)生不滿意，可以進(jìn)入全部醫(yī)生二級頁面進(jìn)行個(gè)性化篩選（傳統(tǒng)的找醫(yī)生形式），也可以讓阿福重新為你推薦。

設(shè)計(jì)亮點(diǎn)

• 融合傳統(tǒng)交互模式：在 AI 對話框中加入傳統(tǒng)的 TAB 組件，讓用戶可以切換篩選，符合用戶的使用習(xí)慣。
• 標(biāo)簽即意圖觸發(fā)器：疾病/科室標(biāo)簽本身就是結(jié)構(gòu)化意圖，點(diǎn)擊即可觸發(fā) AI 搜索，無需多輪描述。
• 給人留下深刻印象的視覺設(shè)計(jì)：除了交互形式的創(chuàng)新，視覺設(shè)計(jì)同樣出色，為用戶帶來全新的視覺體驗(yàn)。

體驗(yàn)思考

體驗(yàn)完這個(gè)智能體的交互流程后，我意識(shí)到過去對對話式 AI 產(chǎn)品的交互和 UI 理解過于淺顯。它們確實(shí)主要依靠對話交互，但隨著智能體的發(fā)展，每個(gè)智能體都代表一個(gè)獨(dú)立的流程、內(nèi)容甚至風(fēng)格。

以 AI 找醫(yī)生為例：它融合了傳統(tǒng)的 TAB 框架，讓用戶按科室或疾病查找；當(dāng) AI 推薦的數(shù)據(jù)不滿意時(shí)，還提供”查看全部”按鈕，引導(dǎo)用戶進(jìn)入二級頁面進(jìn)行個(gè)性化篩選。這個(gè)設(shè)計(jì)讓我發(fā)現(xiàn)，AI 產(chǎn)品遠(yuǎn)比想象中豐富——它不只是簡單的對話框和側(cè)邊欄。

寫到這里，我突然想起另一款對話式醫(yī)療 APP——訊飛曉醫(yī)。當(dāng)我輸入”預(yù)約掛號(hào)”時(shí)，系統(tǒng)只能提示我跳轉(zhuǎn)至其他醫(yī)療網(wǎng)站完成掛號(hào)。相比之下，阿里的生態(tài)能力令人贊嘆：阿福直接連接好大夫等平臺(tái)，用戶可以在 App 內(nèi)完成從 AI 推薦、查看醫(yī)生到付費(fèi)問診的全流程，無需跳出即可實(shí)現(xiàn)就診閉環(huán)。

醫(yī)生AI分身：讓專家經(jīng)驗(yàn)規(guī)模化服務(wù)的創(chuàng)新嘗試

早在 2023 年參與釘釘智能體測評時(shí)，我就有過類似構(gòu)思：如果將專家過往的就診經(jīng)驗(yàn)和知識(shí)喂養(yǎng)給 AI 并進(jìn)行專門訓(xùn)練，這個(gè)智能體能否解決 80% 的診前基礎(chǔ)咨詢？當(dāng)我體驗(yàn)這個(gè)智能體并查詢相關(guān)資料后，發(fā)現(xiàn)阿福的醫(yī)生 AI 分身確實(shí)做得非常出色。

該模型（官方名稱叫螞蟻·安診兒醫(yī)療大模型 AntAngelMed）基于海量醫(yī)學(xué)文獻(xiàn)和去隱私化的真實(shí)病例數(shù)據(jù)構(gòu)建，具備”深度思考”能力。它可對復(fù)雜、信息不全的臨床場景進(jìn)行多輪推理、邏輯驗(yàn)證與自我糾錯(cuò)，助力精準(zhǔn)診療。

在產(chǎn)品層面，AI 醫(yī)生整合了語音對話、掛號(hào)、補(bǔ)號(hào)申請等多種功能和場景。患者可以像與真人交流一樣咨詢，醫(yī)生則能 24 小時(shí)服務(wù)多位患者。

設(shè)計(jì)亮點(diǎn)

• 專家身份具象化，建立信任起點(diǎn)：AI 不再是泛化的醫(yī)生形象，而是明確綁定真實(shí)專家（姓名、醫(yī)院、學(xué)科、頭銜），讓用戶在對話前就建立信任預(yù)期。
• 醫(yī)學(xué)思考路徑可視化，不只給結(jié)論：通過「院士團(tuán)隊(duì)解讀 / 醫(yī)學(xué)思考路徑 / 文獻(xiàn)引用」等模塊，將 AI 的推理過程展示出來，降低”黑箱感”，增強(qiáng)專業(yè)可信度。
• 多模態(tài)輸入降低使用門檻：支持語音對話、拍照上傳病歷與檢查報(bào)告，降低中老年用戶或非專業(yè)用戶的表達(dá)成本，貼合真實(shí)就醫(yī)場景。

體驗(yàn)思考

醫(yī)生 AI 智能體這一創(chuàng)新模式對多個(gè)行業(yè)領(lǐng)域具有重要的參考價(jià)值。它的核心在于：將一位擁有數(shù)十年臨床經(jīng)驗(yàn)的醫(yī)療專家所積累的專業(yè)知識(shí)、診療經(jīng)驗(yàn)和實(shí)踐智慧進(jìn)行系統(tǒng)化的數(shù)據(jù)處理和標(biāo)準(zhǔn)化轉(zhuǎn)換，再借助人工智能技術(shù)，使這些專業(yè)知識(shí)能夠同時(shí)為成千上萬的用戶提供高質(zhì)量的服務(wù)。

我甚至有一個(gè)大膽的設(shè)想：在未來，即便一個(gè)專家壽終正寢，只要他能把自己的知識(shí)庫和經(jīng)驗(yàn)傳送給 AI，這個(gè)專家是不是就并未真正離去，而是可以繼續(xù)造福我們的子孫后代？

健康小目標(biāo)：自動(dòng)生成健康打卡任務(wù)

「健康小目標(biāo)」是一個(gè)圍繞具體健康意圖（如改善睡眠）展開的目標(biāo)型智能體。它通過 AI 引導(dǎo)式問答拆解目標(biāo)，自動(dòng)生成可執(zhí)行的日常任務(wù)，并將”制定計(jì)劃—每日打卡—正向反饋”完整串聯(lián)，形成持續(xù)的行為干預(yù)閉環(huán)。

體驗(yàn)這個(gè)功能時(shí)，我特意下載了幾款健身打卡 APP，對比阿福的打卡流程與專業(yè)健身應(yīng)用的差異。整體體驗(yàn)下來，阿福的用戶體驗(yàn)更流暢。由于首頁更聚焦、更簡潔，我可以一目了然地看到所有打卡任務(wù)。

交互流程

• 用戶在底部打開健康小目標(biāo)智能體。
• 進(jìn)入后開始設(shè)置自己的小目標(biāo)（用戶可以選擇模板也可以進(jìn)行自定義）。
• 在AI 對話框完善詳細(xì)資料。
• 一鍵生成健康計(jì)劃和打卡任務(wù)。
• 打卡任務(wù)建立后，AI 首頁會(huì)實(shí)時(shí)同步提醒。

設(shè)計(jì)亮點(diǎn)

• 目標(biāo)即入口，靈活自由：用戶可以選擇系統(tǒng)設(shè)置好的打卡目標(biāo)，也可以從一句“我想睡得更香”去建立自己的專屬目標(biāo)。
• 結(jié)構(gòu)化提問，替用戶完成自我診斷：以“我想睡得更香”為例，系統(tǒng)通過睡眠狀態(tài)、入睡時(shí)長、睡前行為等問題，幫助用戶把模糊感受轉(zhuǎn)化為可分析變量。
• AI 自動(dòng)生成“可打卡”的微行動(dòng)：不是泛泛建議，而是直接給出可執(zhí)行、低負(fù)擔(dān)的具體行為（如調(diào)暗燈光、熱水泡腳）。
• 打卡與 AI 強(qiáng)綁定：從創(chuàng)建、執(zhí)行到反饋，始終在 AI 場景內(nèi)完成，避免任務(wù)系統(tǒng)與對話系統(tǒng)割裂。
• 即時(shí)正反饋與成長機(jī)制：打卡成功即獲得“健康福氣值”，通過情緒化動(dòng)畫與數(shù)值反饋強(qiáng)化成就感。

體驗(yàn)思考

這個(gè)智能體給了我兩點(diǎn)啟發(fā)。

第一，表單類操作（如添加就診人、填寫問卷等）可以直接在對話框中完成，無需跳轉(zhuǎn)到新頁面。實(shí)際體驗(yàn)下來，這種設(shè)計(jì)不僅高效，還能保持用戶的使用連貫性。

第二，健康小目標(biāo)就像常見的用戶簽到打卡功能，通過持續(xù)打卡增強(qiáng)用戶活躍度。但我認(rèn)為最大的亮點(diǎn)在于：你可以在對話框中輸入想實(shí)現(xiàn)的目標(biāo)，系統(tǒng)就會(huì)為你自動(dòng)規(guī)劃。這正是自我決定理論（Self-Determination Theory）的絕佳體現(xiàn)，當(dāng)用戶具備自主性和勝任感時(shí)，他們會(huì)感覺是在主動(dòng)使用產(chǎn)品，而非被產(chǎn)品操控。

AI 拍皮膚：一體化皮膚管理流程

這還是我第一次如此細(xì)致地了解我的皮膚，因?yàn)榘⒏５?AI拍皮膚智能體更像一個(gè)一體化的皮膚管理工具。不僅可以拍患處、看舌苔，還可以測膚質(zhì)、測毛發(fā)。很幸運(yùn)，工作了這么多年，我還沒有禿頭的跡象，AI 給我的測評是要注意休息、少熬夜，目前毛發(fā)良好。

設(shè)計(jì)亮點(diǎn)

• 多場景入口統(tǒng)一：拍患處、看舌苔、測膚質(zhì)、測毛發(fā)等能力集中在同一入口，用戶無需理解功能邊界，只需選擇“我想拍什么”。
• 漸進(jìn)式診斷對話：先基于圖像給出初步提示，再通過關(guān)鍵追問（瘙癢時(shí)長、接觸史）逐步收斂判斷，顯著降低誤判焦慮。
• 強(qiáng)大的圖像識(shí)別能力：僅需拍攝患處照片即可完成分析,并提供專業(yè)的診療建議;
• 延續(xù)性關(guān)懷設(shè)計(jì)：微交互特別出色，通過「3 天后再聊」與訂閱提醒，將一次性問診轉(zhuǎn)化為持續(xù)的皮膚管理關(guān)系。

體驗(yàn)思考

我不得不感嘆當(dāng)今 AI 技術(shù)的飛速發(fā)展。當(dāng)我完整體驗(yàn)了看舌苔、測膚質(zhì)和測毛發(fā)這些功能時(shí)，雖然或許是我之前未曾留意，但還是給了我很大的震撼。AI 僅通過不同視角和角度的拍照，就能在短時(shí)間內(nèi)快速評估出用戶皮膚的健康狀況——這本身就是科技的巨大進(jìn)步。我沒有去找 ChatGPT 探討背后的技術(shù)原理，只想從一個(gè)普通用戶的角度，表達(dá)我體驗(yàn)這些技術(shù)時(shí)的真實(shí)感受。

藥管家：圍繞“用藥”的完整閉環(huán)服務(wù)

「藥管家」圍繞患者真實(shí)的用藥場景，將藥品識(shí)別、用藥管理、用藥指導(dǎo)、價(jià)格查詢與購買行為整合為連續(xù)流程。用戶從”我手上有什么藥/我需要吃什么藥”出發(fā)，可以自然完成從查詢、添加到用藥提醒，乃至購買的全鏈路操作。AI 在其中承擔(dān)持續(xù)輔助與決策支持角色。

這個(gè)環(huán)節(jié)讓我深刻感受到一個(gè)完整生態(tài)的價(jià)值——你在阿福就能實(shí)時(shí)查詢藥品價(jià)格、多維度對比，以及直接通過外賣配送或郵寄下單。

設(shè)計(jì)亮點(diǎn)

• 完整的閉環(huán)服務(wù)：藥管家并未將拍照識(shí)別、比價(jià)、用藥計(jì)劃、購買拆成孤立功能，而是圍繞“用藥”這一高頻行為，構(gòu)建單一連續(xù)路徑，符合用戶一次性完成任務(wù)的心理預(yù)期。
• AI 深度介入但不過度干預(yù)：AI 能基于上傳的藥品圖片與健康檔案，主動(dòng)識(shí)別用戶意圖并給出結(jié)構(gòu)化用藥解讀，同時(shí)明確風(fēng)險(xiǎn)邊界，不替代醫(yī)生判斷，建立可信的“輔助者”形象。
• 用藥行為的時(shí)間化與自動(dòng)化：通過用藥計(jì)劃，將一次性的藥品查詢轉(zhuǎn)化為持續(xù)行為管理，AI 與提醒機(jī)制共同承擔(dān)“記憶負(fù)擔(dān)”，降低用戶出錯(cuò)與遺忘風(fēng)險(xiǎn)。
• 從認(rèn)知到行動(dòng)的順滑閉環(huán)：在用戶確認(rèn)藥品信息與用法后，無縫銜接比價(jià)與購買場景，決策成本最低時(shí)提供轉(zhuǎn)化能力，既提升效率，也強(qiáng)化平臺(tái)價(jià)值。

體驗(yàn)思考

C 端產(chǎn)品的頁面空間寸土寸金。當(dāng)我添加了用藥提醒后，我突然意識(shí)到阿福的首頁其實(shí)是一個(gè)任務(wù)中心，而非傳統(tǒng)的科普資訊推薦區(qū)。特別是與安診兒 APP 相比，阿福的首頁雖然看起來千人千面,但它能夠感知、讀取并提醒用戶——無論是健康打卡、健康數(shù)據(jù)還是用藥提醒,這個(gè)卡片區(qū)的場景拓展與應(yīng)用都關(guān)聯(lián)著整個(gè)產(chǎn)品的功能體系。

AI報(bào)告：診斷+ 診療閉環(huán)銜接

體驗(yàn)到這里時(shí)，恰好我剛帶小孩去醫(yī)院做了個(gè)小檢查。拿到抽血報(bào)告后，我嘗試將報(bào)告拍給阿福，親身體驗(yàn)了 AI 報(bào)告功能。與醫(yī)生相比，阿福的 AI 報(bào)告能幫助患者更系統(tǒng)、更完整地了解細(xì)節(jié)。醫(yī)生工作繁忙，雖然經(jīng)驗(yàn)豐富、能快速判斷病情，但往往沒有足夠時(shí)間為患者詳細(xì)解釋。

AI 報(bào)告不僅為患者提供多輪對話追問，最后還會(huì)自然銜接 AI 診室、醫(yī)生解讀與醫(yī)院推薦，形成從”看不懂報(bào)告”到”下一步怎么做”的完整閉環(huán)。

設(shè)計(jì)亮點(diǎn)

• 一鍵式認(rèn)知降噪：通過 AI 自動(dòng)結(jié)構(gòu)化報(bào)告內(nèi)容，將專業(yè)醫(yī)學(xué)術(shù)語轉(zhuǎn)譯為用戶可理解的結(jié)論與建議，顯著降低信息理解成本。
• 過程可感知的分析狀態(tài)：掃描、脫敏、分析、整理結(jié)論以步驟化進(jìn)度呈現(xiàn)，增強(qiáng)系統(tǒng)可見性，緩解用戶等待與不確定感。
• 分流式行動(dòng)推薦：在 AI 解讀后明確給出“AI 繼續(xù)問診 / 真人醫(yī)生解讀”兩種路徑，尊重不同風(fēng)險(xiǎn)偏好與決策階段的用戶。
• 信任邊界清晰：通過「僅供參考、需遵醫(yī)囑」等提示，主動(dòng)聲明 AI 能力邊界，避免過度承諾帶來的信任風(fēng)險(xiǎn)。

體驗(yàn)思考

我們也許真的要認(rèn)真思考如何利用 AI 來幫助我們更好地生活了，比如 AI 報(bào)告這樣的功能，它至少可以解決大部分患者對于專業(yè)報(bào)告的疑惑，了解 50%-70% 的基礎(chǔ)情況。過去的互聯(lián)網(wǎng)醫(yī)院可以解決全國城市醫(yī)療資源不對等的痛點(diǎn)，而隨著 AI 的加持，我覺得這種痛點(diǎn)會(huì)逐漸降低，就像 我在 AI 醫(yī)生分身那個(gè)環(huán)節(jié)提到的一樣，如果AI 可以把一個(gè)醫(yī)生過去幾十年的知識(shí)和就診經(jīng)驗(yàn)復(fù)刻，那么無論我們在哪個(gè)城市，都能同時(shí)享受到這個(gè)醫(yī)生帶給社會(huì)的價(jià)值。

總結(jié)與思考

螞蟻阿福給了我哪些思考？

第一，傳統(tǒng)菜單欄會(huì)逐漸消失嗎？

正如我在第一部分討論的，阿福的對話式入口給了我很多啟發(fā)。看著阿福擁擠的頭部，我真切地感覺到——傳統(tǒng)菜單欄可能會(huì)在越來越多的產(chǎn)品場景中徹底消失。甚至連搜索欄這樣的功能，都會(huì)被 AI 輸入框替代。對話即交互，對話即搜索，對話即觸發(fā)，讓我們拭目以待。

第二，智能體驅(qū)動(dòng) AI 產(chǎn)品設(shè)計(jì)創(chuàng)新

我每天都在使用 ChatGPT，長久以來形成了一種刻板印象：對話式 AI 產(chǎn)品的設(shè)計(jì)平淡無聊，傳統(tǒng)的交互和界面設(shè)計(jì)似乎不再重要，取而代之的是功能邏輯和提示詞設(shè)計(jì)。但阿福的設(shè)計(jì)給了我新的啟發(fā)，打破了我對對話式 AI 產(chǎn)品的固有認(rèn)知——未來的 AI 產(chǎn)品可以結(jié)合智能體做出更多創(chuàng)新，交互界面設(shè)計(jì)依然重要。

第三，對話式 AI 產(chǎn)品的應(yīng)用場景將越來越廣

我想到了許多應(yīng)用場景，特別是與醫(yī)療高度相似的政務(wù)領(lǐng)域，比如稅務(wù)、教育等。如果這些傳統(tǒng)行業(yè)引入對話式 AI 交互，將極大提升工作效率。試想一下，當(dāng)你只需在稅務(wù) APP 中輸入幾個(gè)字或說一段語音就能開始辦理業(yè)務(wù)，能為前臺(tái)工作人員節(jié)省多少時(shí)間？在這里給自己定個(gè)小目標(biāo)：2026 年設(shè)計(jì)一款政企對話式 AI 產(chǎn)品，探索這個(gè)領(lǐng)域的設(shè)計(jì)趨勢。

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

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

一般用戶在登錄后臺(tái)管理系統(tǒng)后，后臺(tái)首頁就成為了用戶與產(chǎn)品交互的第一個(gè)頁面，這某種程度上也凸顯了這一頁面的重要性。那么，后臺(tái)管理系統(tǒng)的首頁設(shè)計(jì)可以遵循哪些策略？本文作者結(jié)合實(shí)戰(zhàn)項(xiàng)目發(fā)表了他的想法，一起來看看吧。

很久沒有更新文章了，一方面文章選題困難，公眾號(hào)的閱讀量真是有點(diǎn)慘不忍睹，寫作的動(dòng)力有所下降。另一方面工作確實(shí)比較忙，時(shí)間精力有限，最近參加了多個(gè)工作項(xiàng)目一直在加班。

今天總結(jié)下項(xiàng)目過程中，關(guān)于后臺(tái)管理系統(tǒng)首頁設(shè)計(jì)引發(fā)的一些思考。

主要的內(nèi)容包括：

1. 后臺(tái)首頁的作用；
2. 首頁的設(shè)計(jì)方向；
3. 首頁內(nèi)容的思考。

一、后臺(tái)首頁的作用

后臺(tái)首頁是用戶登錄后，與產(chǎn)品交互的第一個(gè)頁面，信息內(nèi)容非常重要，作用也非常明顯。一方面可以幫助用戶宏觀了解系統(tǒng)的整體運(yùn)行狀態(tài)，洞察業(yè)務(wù)問題。另一方面可以幫助用戶快速處理業(yè)務(wù)問題，不需要到專門的功能頁面操作，縮短用戶的操作路徑。

后臺(tái)首頁需要依托整個(gè)產(chǎn)品的功能體系，根據(jù)用戶角色的職能、權(quán)限、業(yè)務(wù)范圍，提取關(guān)鍵的用戶關(guān)心的業(yè)務(wù)功能點(diǎn)搭建頁面內(nèi)容。所以一般是在業(yè)務(wù)功能完成之后再進(jìn)行首頁設(shè)計(jì)。這就要求產(chǎn)品經(jīng)理能夠從全局視角理解用戶和場景，才能做出有效的設(shè)計(jì)方案。

另外首頁不屬于具體的業(yè)務(wù)領(lǐng)域，所以一般不會(huì)安排固定的產(chǎn)品經(jīng)理，而是由產(chǎn)品經(jīng)理兼任。如果產(chǎn)品設(shè)計(jì)沒有整體規(guī)劃，首頁就容易被忽略，成為「三不管」地帶。

二、首頁設(shè)計(jì)的方向

根據(jù)以往的設(shè)計(jì)經(jīng)驗(yàn)，我總結(jié)了以下四點(diǎn)：

1. 內(nèi)容與用戶角色

首頁設(shè)計(jì)要求產(chǎn)品經(jīng)理對用戶角色的分類、業(yè)務(wù)職能有比較深入的了解，否則產(chǎn)品設(shè)計(jì)就可能變成內(nèi)容堆砌。

通常后臺(tái)系統(tǒng)需要面向管理層和執(zhí)行層兩類用戶，他們對于信息需求存在比較大的差異。管理層更關(guān)注宏觀層面的統(tǒng)計(jì)信息，方便了解業(yè)務(wù)動(dòng)態(tài)，從而制定工作決策等，所以各類可視化圖表就成為首頁重要的內(nèi)容組成。

對于執(zhí)行層用戶，主要是完成具體的工作任務(wù)，所以更加關(guān)注明細(xì)數(shù)據(jù)。除此之外，適當(dāng)?shù)卦黾右恍┙y(tǒng)計(jì)數(shù)據(jù)，可以更全面了解系統(tǒng)狀態(tài)，也便于對上匯報(bào)，減少人工統(tǒng)計(jì)的工作量。

B 端產(chǎn)品了解用戶和場景并不容易，如果只靠“猜測”做設(shè)計(jì)，就會(huì)發(fā)現(xiàn)首頁設(shè)計(jì)有很多種可能，怎么做似乎都對，怎么做似乎都不對。而且參與的人越多，想法也會(huì)越多。

所以在項(xiàng)目中，需要盡可能地收集用戶場景信息加以分析完成設(shè)計(jì)，即使存在一部分“猜測”信息，也需要能夠自圓其說，才能更好的推進(jìn)產(chǎn)品設(shè)計(jì)落地。

2. 場景/主題化

對于小的業(yè)務(wù)系統(tǒng)，單獨(dú)的一個(gè)頁面就可以涵蓋所有的業(yè)務(wù)信息，內(nèi)容也會(huì)比較清晰簡單。

對于比較大的業(yè)務(wù)系統(tǒng)，首頁包含的消息會(huì)比較多，例如阿里云、騰訊云等產(chǎn)品，一個(gè)頁面內(nèi)容無法承載所有的信息。因此需要根據(jù)場景/主題拆分首頁內(nèi)容，便于用戶有目標(biāo)地快速查看信息。比如阿里云采用的是資源管理、安全管理、成本管理等主題去劃分首頁內(nèi)容。

3. 實(shí)用性

1）串聯(lián)內(nèi)容，縮短路徑

某些場景下，首頁要滿足用戶快速處理業(yè)務(wù)工作的需求，例如待辦事項(xiàng)，審批操作等，通過明細(xì)列表的展示，結(jié)合抽屜等詳情信息展示，用戶可以在首頁直接處理工作任務(wù)，無需進(jìn)入到功能頁面。

「常用功能」也是首頁的常見組件，類似操作系統(tǒng)桌面的快捷方式一樣。可以將一些二級甚至三級功能作為常用功能放在首頁中，用戶不需要通過菜單逐級點(diǎn)擊，即可進(jìn)入功能頁面，對縮短用戶操作路徑也有很大幫助。

2）高頻常用功能信息聚合

首頁的價(jià)值在于幫助用戶簡單、高效的認(rèn)知系統(tǒng)，是高頻常用功能的信息聚合。因此需要盡量減少花哨、不實(shí)用、看似高大上的功能，或者改變展示形式，保證重要信息的優(yōu)先展示。

有些 B 端產(chǎn)品的門檻比較高，為了降低認(rèn)知成本，于是有人希望在首頁中增加系統(tǒng)介紹、系統(tǒng)架構(gòu)圖的形式來展示產(chǎn)品的功能流程，在產(chǎn)品演示是可以更好的讓用戶理解產(chǎn)品功能。

這些本來應(yīng)該是在 PPT 中展示的信息，卻要放到首頁中展示。看似酷炫的一張圖，實(shí)際上在應(yīng)用階段對用戶的工作沒有任何幫助。因?yàn)橛脩舾静魂P(guān)心你的系統(tǒng)架構(gòu)是什么，需要的是產(chǎn)品幫助他解決工作中的問題，帶來的效率提升。

即使用戶需要了解這些信息，也不是每天打開首頁就要一眼看到，可以采用其他的呈現(xiàn)方式。比如用戶引導(dǎo)，或者與業(yè)務(wù)信息關(guān)聯(lián)，既可以呈現(xiàn)出業(yè)務(wù)流程，也可以展示業(yè)務(wù)信息，又或者首頁增加入口、引導(dǎo)在幫助中心查看。

4. 定制化

B 端產(chǎn)品業(yè)務(wù)功能是面向用戶角色的，同一角色的用戶具有相同的工作任務(wù)。但是首頁則有所不同，同一類角色的不同用戶，關(guān)注點(diǎn)也不完全相同。尤其是業(yè)務(wù)系統(tǒng)內(nèi)容較多時(shí)，首頁內(nèi)容可定制就成為了滿足不同用戶信息需求的方式。

當(dāng)然系統(tǒng)的定制化并不是讓用戶從零定制，而是在系統(tǒng)初始內(nèi)容基礎(chǔ)上，重新組織頁面內(nèi)容、調(diào)整頁面布局等。否則定制化反而會(huì)帶給用戶更差的體驗(yàn)。

三、首頁內(nèi)容應(yīng)該追求簡潔還是豐富呢？

在項(xiàng)目設(shè)計(jì)中，就碰到了這個(gè)問題。有同事認(rèn)為首頁應(yīng)該簡單點(diǎn)，避免過多的信息量增加用戶的學(xué)習(xí)成本。

當(dāng)然這個(gè)問題需要根據(jù)產(chǎn)品定位具體分析。不過總的來說，我個(gè)人認(rèn)為首頁應(yīng)該豐富一些。

首頁是信息聚合頁面，天然就會(huì)有較多的信息內(nèi)容，用戶需要通過信息傳遞了解系統(tǒng)的狀態(tài)和變化，人為的過濾掉內(nèi)容后會(huì)影響信息的全面性。

其次用戶有信息選擇權(quán)，通過一定時(shí)間的摸索，可以形成自己的信息查看軌跡，或者個(gè)性化定制首頁內(nèi)容過濾掉工作中冗余的信息。

而且B 端產(chǎn)品經(jīng)過多年的發(fā)展，單從布局和表現(xiàn)形式上看，首頁已經(jīng)有比較成熟的設(shè)計(jì)模式了，大多數(shù)企業(yè)用戶也形成了統(tǒng)一的認(rèn)知和習(xí)慣。卡片風(fēng)格是首頁最常見的展現(xiàn)形式，卡片可以讓頁面分割更加清晰，方便信息讀取，有助于弱化信息量帶來的復(fù)雜感。即使不采用卡片分割， 可以通過間距、標(biāo)題等引導(dǎo)用戶視線，劃分頁面內(nèi)容。

四、總結(jié)

簡單總結(jié)下：

1. 首頁考慮的設(shè)計(jì)因素比較多，每種用戶角色可能會(huì)有不同的需求，需要針對性的設(shè)計(jì)，而業(yè)務(wù)功能的用戶角色更加明確；
2. 首頁設(shè)計(jì)需要對系統(tǒng)有全面了解，業(yè)務(wù)功能則比較聚焦；
3. 首頁是系統(tǒng)第一個(gè)頁面，會(huì)受到更高的關(guān)注度，往往設(shè)計(jì)分歧也會(huì)比較大；產(chǎn)品設(shè)計(jì)需要做深入的分析，故事性要求也會(huì)更高；否則被噴和被 Pass的可能性會(huì)非常大；
4. 首頁設(shè)計(jì)的內(nèi)容需要注重實(shí)用性，避免各種信息的無效堆砌。

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

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