久久分类免费视频_亚洲Av不卡在线_97超碰在线免费观看_人人狠狠综合久久88亚洲 一本久道综合久久精品_四虎成人精品在永久免费_亚洲精品有码在线观看_国产在线视频导航

蘭亭妙微UI設(shè)計(jì)公司分享：當(dāng)AI能夠深度理解'團(tuán)圓經(jīng)濟(jì)'的情感密碼，節(jié)日營銷正在從流量爭奪升級(jí)為心智滲透的精準(zhǔn)戰(zhàn)役。58同城在中秋期間以'好崗離家近'為核心，通過AI生成融合城市地標(biāo)與職業(yè)場景的個(gè)性化視覺，在6大城市實(shí)現(xiàn)千萬級(jí)曝光的同時(shí)提升簡歷投遞量40%。這場品效合一的實(shí)踐揭示了一個(gè)關(guān)鍵趨勢(shì)：AI不再是冰冷的效率工具，而是情感共鳴的放大器——它讓招聘廣告從信息堆砌轉(zhuǎn)向情感連接，真正實(shí)現(xiàn)了品牌溫度與業(yè)務(wù)增長的雙贏。

01 精準(zhǔn)錨定：明確情感與場景的設(shè)計(jì)方向

項(xiàng)目首先基于人口特征、營銷資源與業(yè)績需求，精準(zhǔn)圈定長沙、成都、西安、無錫、南昌五大目標(biāo)城市。這些城市的共性在于春節(jié)/中秋返鄉(xiāng)率超80%，鄉(xiāng)土情結(jié)與團(tuán)圓氛圍尤為濃郁。

執(zhí)行層面：項(xiàng)目聚焦6大城市的24個(gè)核心商圈，選擇電梯內(nèi)、戶外大屏、公交站亭三大高頻觸達(dá)渠道。

主視覺采用“品牌區(qū)+創(chuàng)意區(qū)”雙分區(qū)布局：左側(cè)傳遞“好崗離家近”的核心主張，右側(cè)則分別針對(duì)B端企業(yè)（展示招聘實(shí)力）與C端求職者（突出崗位優(yōu)勢(shì)），引導(dǎo)“求職者投遞-商家入駐”的雙向轉(zhuǎn)化。

02 AI賦能：效率與創(chuàng)意的雙重突破

AI設(shè)計(jì)的核心價(jià)值，在于讓“情感共鳴”與“高效落地”并行不悖。本次項(xiàng)目中，AI技術(shù)貫穿創(chuàng)意生成、視覺優(yōu)化全流程，既精準(zhǔn)傳遞“團(tuán)圓+留鄉(xiāng)”的情感內(nèi)核，又破解了多城市定制、短周期交付的效率難題，實(shí)現(xiàn)雙重突破。

設(shè)計(jì)提案方向：

1. 情感+場景化共鳴：讓設(shè)計(jì)喚醒本土情結(jié)

設(shè)計(jì)緊扣“中秋團(tuán)圓”與“留鄉(xiāng)就業(yè)”的雙重訴求，以主題文案將求職需求與家庭情感深度綁定，精準(zhǔn)觸動(dòng)目標(biāo)人群的“本土情結(jié)”。

創(chuàng)意構(gòu)思沿兩個(gè)方向展開：

「中秋+商圈實(shí)景」方向提案：

快速建立“本地招聘”的直觀認(rèn)知，通過融合城市地標(biāo)與品牌色，結(jié)合 “中秋團(tuán)圓” 節(jié)點(diǎn)，延續(xù) “好崗離家近” 的核心訴求，同時(shí)針對(duì)不同城市定制化文案（如西安的“照的見你的未來”、成都的“崗位和火鍋一樣沸騰”），既傳遞就業(yè)價(jià)值，又契合城市氣質(zhì)，激活留鄉(xiāng)就業(yè)的情感需求。，讓城市印記成為情感紐帶。

「中秋+地標(biāo)+職業(yè)人物」方向提案：

采用真實(shí)場景與AI生成插畫人物相結(jié)合的方式（如職場女性與城市景觀、特色元素的融合），畫面生動(dòng)富有層次，打破傳統(tǒng)招聘廣告的單調(diào)感。

最終方案：

2. AI提效：貫穿流程的設(shè)計(jì)革命

AI技術(shù)在此次項(xiàng)目中深度融入從創(chuàng)意到落地的全流程，實(shí)現(xiàn)“多快好省”的突破：

創(chuàng)意圖像生成：借助Topnow等工具，快速合成“中秋+商圈”的定制化場景，使AI元素與實(shí)景自然銜接，直觀傳遞信息，降低用戶理解成本。

高效素材處理：

即夢(mèng)4.0：

字體設(shè)計(jì)：幾分鐘內(nèi)完成字體設(shè)計(jì)方案。

處理圖片：快速調(diào)整建筑角度、優(yōu)化圖片內(nèi)容，適配戶外大屏的傳播需求，大幅減少后期耗時(shí)。

即夢(mèng)3.0：

生成圖片：月亮的質(zhì)感與主文案的藝術(shù)化呈現(xiàn)，通過 AI 技術(shù)實(shí)現(xiàn)視覺吸引力，既保證節(jié)日氛圍的營造，又讓文案具備強(qiáng)記憶點(diǎn)。

卡通插畫：效果比4.0優(yōu)秀

在插畫生成上表現(xiàn)卓越，通過精準(zhǔn)指令，快速產(chǎn)出風(fēng)格統(tǒng)一的本地職業(yè)形象（如成都外賣小哥、西安青年群體），傳遞“本地工作的愉悅感”，效率遠(yuǎn)超人工。

關(guān)鍵詞參考：

“一個(gè)外賣小哥抱著熊貓玩偶，大步跑，綠色系工作服，開心地笑，黑色單線描邊，扁平插畫，炫彩配色”

“一個(gè)女孩面對(duì)手機(jī)視頻通話，身穿襯衫，坐姿端正，張口說話，居家環(huán)境，黑色單線描邊，扁平插畫，橙色系配色”

“5個(gè)男女青年，抬頭看前方，一人手指前方，全身，站立，背影，時(shí)尚穿搭，黑色單線描邊，扁平插畫，豐富配色”

具體成效：

創(chuàng)意階段：半天生成4個(gè)完整方向，傳統(tǒng)方式需2-3天。

多城市適配：快速產(chǎn)出兼具系列感與地方特色的視覺方案。

修改優(yōu)化：響應(yīng)客戶反饋的速度提升70%以上。

3. 物料延展：保障多場景視覺統(tǒng)一

基于“一套核心視覺，多場景適配”原則，AI擴(kuò)圖、高清修復(fù)，協(xié)助快速延展生成線下物料、線上專場Banner、長圖海報(bào)等多尺寸物料，確保線上線下品牌形象統(tǒng)一，強(qiáng)化用戶認(rèn)知。

03 價(jià)值落地：三大邏輯驅(qū)動(dòng)品效合一

AI賦能的設(shè)計(jì)創(chuàng)新，本次設(shè)計(jì)通過情感、商業(yè)、品牌三大邏輯，實(shí)現(xiàn)“品效合一”核心目標(biāo)。讓設(shè)計(jì)不僅是視覺呈現(xiàn)，更實(shí)現(xiàn)了品牌價(jià)值與業(yè)務(wù)增長的雙重落地。

1.情感邏輯：激活本土情結(jié)，拉動(dòng)C端轉(zhuǎn)化。AI設(shè)計(jì)精準(zhǔn)觸達(dá)留鄉(xiāng)需求，讓“像鳥飛往自己的山”不再只是心理期許，而是有具體崗位支撐的現(xiàn)實(shí)可能。數(shù)據(jù)印證成效：長沙、成都、西安等地線上專場簡歷投遞量增長40%，“本地崗位”搜索量上升62%，有效拉動(dòng)C端用戶參與度。

2.商業(yè)邏輯：精準(zhǔn)賦能B端，超額完成業(yè)績。對(duì)B端商家而言，精準(zhǔn)廣告投放是核心需求。通過“行業(yè)+地域”的定制化廣告設(shè)計(jì)，有效提升了商家投放意愿與合作轉(zhuǎn)化。

3.品牌邏輯：沉淀長期認(rèn)知資產(chǎn)。設(shè)計(jì)圍繞“貼近受眾、強(qiáng)化認(rèn)知、促進(jìn)轉(zhuǎn)化”原則，將“提供家鄉(xiāng)好工作”的營銷邏輯，拆解為“明月+地標(biāo)+文案+品牌信息”的直觀的視覺符號(hào)組合，降低用戶信息理解成本。通過品牌色、視覺等符號(hào)在多場景的重復(fù)曝光，持續(xù)強(qiáng)化“找本地好工作，就上58”的用戶心智，使品牌從工具平臺(tái)升級(jí)為“助力團(tuán)圓”的伙伴，構(gòu)筑獨(dú)特的品牌競爭壁壘。

04 行業(yè)啟示：走向“策略+情感”的AI設(shè)計(jì)新范式

本次實(shí)踐為行業(yè)帶來核心啟示：AI是設(shè)計(jì)師的“超級(jí)助手”，其核心價(jià)值在于提升效率與精準(zhǔn)度。未來的品牌設(shè)計(jì)應(yīng)聚焦于 “策略為先，AI賦能，情感共鳴”的融合模式——以策略為導(dǎo)向，用AI提效，最終以情感打動(dòng)人心。

打動(dòng)人心的永遠(yuǎn)是對(duì)人性的洞察和情感的共鳴：

對(duì)招聘品牌推廣而言，這打破了“信息堆砌”的傳統(tǒng)廣告模式；對(duì)更廣的行業(yè)來說，則示范了“AI賦能設(shè)計(jì)，設(shè)計(jì)驅(qū)動(dòng)品效”的新路徑。技術(shù)終究是工具，而深度的策略思考與人文洞察，永遠(yuǎn)是設(shè)計(jì)師不可替代的核心價(jià)值。當(dāng)AI與品牌策略、情感共鳴深度結(jié)合，營銷才能實(shí)現(xiàn)真正的突破，為品牌創(chuàng)造可持續(xù)的長期價(jià)值。

05 寫在最后

58同城此次中秋品牌營銷項(xiàng)目，正是技術(shù)理性與創(chuàng)意感性完美融合的例證。用AI實(shí)現(xiàn)高效精準(zhǔn)的落地，用設(shè)計(jì)傳遞深刻的情感價(jià)值，最終成就了品牌聲量與業(yè)務(wù)增長的雙贏，也為行業(yè)提供了可復(fù)制的品效合一實(shí)踐范本。

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

蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）www.aknz.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è)廣泛存在于電商產(chǎn)品中的組件，不管是狹義上的商品，還是廣義上的所有可交易產(chǎn)品 (包括課程、服務(wù)、游戲等虛擬商品)，都需要商品卡片來承載它們的關(guān)鍵信息，以方便用戶快速了解商品的核心屬性。

常見的商品卡片有兩種形式，也是電商 App 普遍使用的兩個(gè)視圖，即：網(wǎng)格視圖和列表視圖，卡片在這兩種視圖中有著不同的布局，其信息包含能力也有所差異。

1. 兩種布局

如 Part.1 種所說，商品卡片通常有兩種布局形式，分別是網(wǎng)格布局和列表布局。

①網(wǎng)格布局

網(wǎng)格布局可以使用瀑布流，圖片的尺寸相對(duì)來說會(huì)更單一一些，因?yàn)樾枰獓?yán)格控制卡片的錯(cuò)落程度，不至于過于雜亂。

當(dāng)然，并不是只能做成瀑布流，完全對(duì)齊的網(wǎng)格布局也很常見，只需要嚴(yán)格限制圖片和字段的高度，且為有高度差異的字段 (一般是標(biāo)題) 留出空間即可。

②列表布局

列表布局通常也會(huì)保持所有圖片尺寸一致，但文本區(qū)域需不需要與圖片等高，得看具體項(xiàng)目中商品需要露出的信息多寡，像京東這種信息非常多的，文本區(qū)域就可以超出圖片的高度范圍。而如果信息量中等，那么等高是一種比較好的選擇。

但如果信息比較少，強(qiáng)行把某一字段與圖片底對(duì)齊的做法會(huì)導(dǎo)致組件內(nèi)的間距比組件間的更大，從而影響親密性識(shí)別。

這時(shí)候可以在兩個(gè)商品之間加分割線。

2. 卡片樣式

主要有三種樣式，我稱之為有全包、半包和開放式。

全包：有明確的卡片背景，將圖片和文本全部包括在內(nèi)部，比較不常見。

半包：圖片部分會(huì)撐滿卡片的邊界，而文本依然在卡片內(nèi)部，比較常見。值得注意的是如果卡片需要做圓角，圖片朝內(nèi)的兩個(gè)角不需要給圓角。

開放式：沒有明確的卡片背景，圖+文本自成卡片區(qū)域，在設(shè)計(jì)上通常會(huì)讓文本兩側(cè)較之圖片稍微向內(nèi)縮進(jìn)一些距離，在讓親密性表現(xiàn)得更舒適?？梢詢蓚?cè)縮進(jìn)，也可以只縮進(jìn)右側(cè)。

3.卡片內(nèi)容

不同類型的商品、不同需求的產(chǎn)品所需要表達(dá)的信息是不同的，但總結(jié)來說有以下這幾類：

1. 圖片：商品主圖
2. 主標(biāo)題：活動(dòng)標(biāo)簽+商品名稱
3. 副標(biāo)題：銷售排名/用戶評(píng)價(jià)數(shù)據(jù)等
4. 價(jià)格數(shù)據(jù)：折后價(jià)格/折前價(jià)格+銷售量
5. 優(yōu)惠信息：退換政策/優(yōu)惠券/滿減活動(dòng)/分期信息
6. 商品規(guī)格表：商品核心規(guī)格信息
7. 店鋪信息：相關(guān)標(biāo)簽+店鋪名稱
8. 功能按鈕：收藏/購物車

其中，圖片、標(biāo)題和價(jià)格，這三個(gè)是最基礎(chǔ)的信息，幾乎每個(gè)商品卡片都必不或缺。其余的信息則并不一定每個(gè)都要包含在內(nèi)，不同的 App 會(huì)根據(jù)自己的展示需求挑選其中幾類排布在卡片內(nèi)。

信息展示的順序、和權(quán)重對(duì)比，都會(huì)根據(jù)實(shí)際情況略作調(diào)整。例如一些國外的電商 App，會(huì)把價(jià)格的權(quán)重做得比標(biāo)題更大。而對(duì)于網(wǎng)格布局和列表布局，所展示的信息盡可能保持一致。但因?yàn)榫W(wǎng)格視圖不適合展示的過長，所以如果信息真的非常多，那么網(wǎng)格視圖可以適當(dāng)省略。例如小米有品是一個(gè)典型的例子，網(wǎng)格視圖相比列表視圖只少了商品規(guī)格表，因?yàn)檫@個(gè)字段實(shí)在不適合放在網(wǎng)格視圖展示。

4. 不同的使用場景

之所以會(huì)把使用場景放在這里，是因?yàn)樯唐房ㄆ氖褂脠鼍皶?huì)影響它所展示的信息類型。舉個(gè)例子，淘寶首頁推薦內(nèi)的商品卡片內(nèi)所包含的信息，就比搜索出來的完整商品卡片少了一些。

這是因?yàn)橥扑]中的商品信息務(wù)求直擊要害，其導(dǎo)購需求遠(yuǎn)遠(yuǎn)強(qiáng)于展示需求，同時(shí)也考慮到推薦頁應(yīng)同屏展示更多商品，所以會(huì)把其他可能會(huì)影響用戶獲取核心信息，且可能造成卡片過長的字段全部隱去了。

同理，商品卡片在購物車中的信息也不一樣，考慮到存在于購物車中的商品都是用戶已經(jīng)了解過大部份信息的商品，所以設(shè)計(jì)時(shí)要抓住用戶在這種場景下最關(guān)注的內(nèi)容——價(jià)格和規(guī)格，所以購物車中的卡片會(huì)多出一些價(jià)格變動(dòng)、規(guī)格重選、數(shù)量修改等信息。

總之，商品的使用場景很大程度上會(huì)影響展示信息的選擇，最核心的要點(diǎn)是一定要考慮用戶在不用的場景下，最核心的信息訴求是什么，不同 App 對(duì)此可能有不同的做法，我在這里也無法一概而論。

5. 不一樣的商品卡片

①Asos/Massimo Dutti

國外的電商 App，尤其是品牌自己的 App，總是會(huì)做得非常極簡，一個(gè)標(biāo)題一個(gè)價(jià)格一張圖片，幾乎做到了商品卡片最簡潔的狀態(tài)，這是品牌氣質(zhì)決定的，也是產(chǎn)品定位決定的。所以國內(nèi)走出海路線的 App 大多也會(huì)是這個(gè)風(fēng)格，比如 Shein。

②馬蜂窩/飛豬

舉這兩個(gè)例子并不是因?yàn)閮烧叩慕M件設(shè)計(jì)得有多精妙，而是因?yàn)樗鼈冇兄硪环N不同的商品，以及所呈現(xiàn)出來的不同的組件——酒店。

我在這里想要說明的是，不同的商品類型可能也會(huì)有其特有的字段類型，尤其是服務(wù)型商品，不同的服務(wù)所呈現(xiàn)出來的組件會(huì)有很大不同。

三、樣式拓展

這里收集了一些商品卡片的線上案例，也可以作為設(shè)計(jì)時(shí)的參考：

轉(zhuǎn)載自優(yōu)設(shè)網(wǎng)

蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）www.aknz.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。

2. B端和C端產(chǎn)品的區(qū)別

在我看來，C 端產(chǎn)品以消費(fèi)互聯(lián)網(wǎng)為主，B 端產(chǎn)品以產(chǎn)業(yè)互聯(lián)網(wǎng)為主，C 端更感性，而B 端更理性。

從使用者的角度來說：

• C 端產(chǎn)品關(guān)鍵詞包括免費(fèi)使用、迅速上手、體驗(yàn)為王、你能讓我做什么；
• B 端產(chǎn)品的關(guān)鍵詞則是付費(fèi)購買、上手緩慢、效率第一、你能為我做什么。

從開發(fā)的角度來說：

• C端周期短，B端周期長；
• C端用戶多，B端用戶少；
• C端邏輯簡單，B端邏輯復(fù)雜；
• C端競品較多，B端競品較少；
• C端主戰(zhàn)場是移動(dòng)端，B端則是 PC 端；
• C端是用戶體驗(yàn)驅(qū)動(dòng)，B端是解決問題驅(qū)動(dòng)；
• C端產(chǎn)品的使用決策權(quán)在用戶手中，而B端產(chǎn)品的使用決策權(quán)則在客戶手中（B端客戶不一定是用戶）；
• C端產(chǎn)品除了產(chǎn)品的體驗(yàn)以外，也要讓產(chǎn)品更美觀，讓活動(dòng)更有趣，讓用戶更舒服，產(chǎn)品經(jīng)理有很強(qiáng)的同理心。B端產(chǎn)品的實(shí)用性大于美觀性，能切實(shí)解決問題、配置資源的 B 端產(chǎn)品才是一個(gè)好的 B 端產(chǎn)品，產(chǎn)品經(jīng)理要具有更強(qiáng)的邏輯思維能力。

3. 后臺(tái)產(chǎn)品常見分類

后臺(tái)產(chǎn)品按其作用可大致分為兩類，一是支撐前臺(tái)產(chǎn)品，二是管理各種資源。我認(rèn)為后臺(tái)產(chǎn)品應(yīng)當(dāng)是囊括在 B 端產(chǎn)品的范圍之內(nèi)的，常見的類型包括：

• C 端產(chǎn)品的后臺(tái)產(chǎn)品線，如淘寶商家版，餓了么商家版，對(duì)訂單和用戶進(jìn)行管理，支持 C 端產(chǎn)品的業(yè)務(wù)進(jìn)展。
• 平臺(tái)級(jí)工具產(chǎn)品，如微信公眾平臺(tái)，對(duì)文章和讀者的數(shù)據(jù)統(tǒng)計(jì)和管理；各大互聯(lián)網(wǎng)公司的開放平臺(tái)，如微博開放平臺(tái)等。
• 企業(yè)級(jí)服務(wù)產(chǎn)品，虛擬主機(jī)系統(tǒng)（VMware），云主機(jī)管理系統(tǒng)（深信服、xensystem、騰訊云）以及各種云SaaS。
• 企業(yè)的業(yè)務(wù)處理平臺(tái)，對(duì)內(nèi)有考勤、報(bào)銷等 OA辦公系統(tǒng)，對(duì)外有 CRM 客戶管理系統(tǒng)，ERP 資源及供應(yīng)鏈管理系統(tǒng)。

后臺(tái)產(chǎn)品設(shè)計(jì)思路

1. 初識(shí)后臺(tái)產(chǎn)品設(shè)計(jì)

說起后臺(tái)產(chǎn)品，很容易想到復(fù)雜、龐大、邏輯縝密，而作為設(shè)計(jì)師，則苦于競品短缺、架構(gòu)復(fù)雜，設(shè)計(jì)的前期工作比設(shè)計(jì)本身要復(fù)雜得多等問題。

后臺(tái)產(chǎn)品不同于普通用戶所使用的 APP，它在用戶初次使用和短暫時(shí)間內(nèi)的認(rèn)知成本是較高的。當(dāng)用戶用慣了一個(gè)音樂類的 app，再給他幾個(gè)其他的音樂 APP，用戶是可以迅速上手并且輕易解決自己的需求的。而后臺(tái)產(chǎn)品則不然。

對(duì)于后臺(tái)產(chǎn)品來說，它并不是隨隨便便就可以下載使用的，即便你在使用的過程中，也因角色不同而受到權(quán)限限制，一般來講很難像超級(jí)管理員一樣接觸到整體功能；其次，門檻之高，后臺(tái)產(chǎn)品的使用者一般都是在該行業(yè)沉淀了很久，所以要對(duì)后臺(tái)產(chǎn)品進(jìn)行設(shè)計(jì)就需要同樣了解該行業(yè)，甚至更能洞察該行業(yè)，業(yè)務(wù)本身的復(fù)雜性質(zhì)決定了后臺(tái)產(chǎn)品架構(gòu)也會(huì)比較龐大；然后，無論是工廠商家的進(jìn)銷存管理，還是政府醫(yī)院的工作流和業(yè)務(wù)流，乃至企業(yè)內(nèi)部的產(chǎn)品，除了不同行業(yè)都有門檻外，對(duì)信息和產(chǎn)品也有「保密協(xié)議」的使命感，所謂「隔行如隔山」，在后臺(tái)產(chǎn)品更是如此；最后，后臺(tái)產(chǎn)品設(shè)計(jì)往往沒有固定的功能架構(gòu)和商業(yè)模式，對(duì)于產(chǎn)品經(jīng)理的邏輯思維能力要求更高，設(shè)計(jì)師不僅僅是做界面、優(yōu)化流程，也要主動(dòng)和產(chǎn)品經(jīng)理溝通交流，并對(duì)產(chǎn)品進(jìn)行思考和探索。

2. 后臺(tái)UI設(shè)計(jì)工作流程

后臺(tái) UI 設(shè)計(jì)的工作，大體分為三個(gè)部分：需求分析、設(shè)計(jì)執(zhí)行、數(shù)據(jù)分析。

在需求分析階段，要對(duì)產(chǎn)品本身和行業(yè)本身有一些基本的認(rèn)知。要了解產(chǎn)品的基本情況，比如產(chǎn)品目標(biāo)、用戶人群、產(chǎn)品定位、需求分析、功能模塊、主要競品和產(chǎn)品特色。做這個(gè)產(chǎn)品是為了解決什么問題？想實(shí)現(xiàn)什么目標(biāo)？使用這個(gè)系統(tǒng)的用戶有哪些？不同角色的用戶有哪些具體的權(quán)限？是否需要對(duì)每一個(gè)用戶的行為都生成操作日志？產(chǎn)品有哪些主要的功能模塊？產(chǎn)品的業(yè)務(wù)流程是怎樣的？有哪些同類型的產(chǎn)品？和他們相比我們的產(chǎn)品有什么特色和特點(diǎn)？成功地做出大而全的后臺(tái)產(chǎn)品，是整個(gè)設(shè)計(jì)團(tuán)隊(duì)和開發(fā)團(tuán)隊(duì)能力的體現(xiàn)，而對(duì)很多小團(tuán)隊(duì)來說，只能做一些大團(tuán)隊(duì)不愿去做的產(chǎn)品，或另辟蹊徑在某些方面做專做精。

在設(shè)計(jì)執(zhí)行階段，參照 PM 給出的功能清單做原型和流程的梳理，需要關(guān)注的有當(dāng)前版本規(guī)劃、功能模塊、功能類型、功能描述、任務(wù)優(yōu)先級(jí)、完成時(shí)間等，交互原型則伴隨著功能描述、規(guī)則判定條件、觸發(fā)條件等內(nèi)容。原型設(shè)計(jì)完成，開始做 UI 視覺方面的設(shè)計(jì)，而這時(shí)后端同步構(gòu)思需求的實(shí)現(xiàn)方案。UI 設(shè)計(jì)師向前端了解實(shí)現(xiàn)框架，方便交接和溝通。當(dāng)界面實(shí)現(xiàn)，UI 設(shè)計(jì)師應(yīng)該是最早進(jìn)行測試的，力求視覺設(shè)計(jì)和代碼實(shí)現(xiàn)無誤差。在完成設(shè)計(jì)執(zhí)行后，從信息層級(jí)、文字、圖標(biāo)、圖片等方面進(jìn)行設(shè)計(jì)走查，進(jìn)行多次設(shè)計(jì)驗(yàn)證與測試。

數(shù)據(jù)分析是產(chǎn)品優(yōu)化迭代的重要依據(jù)。進(jìn)行多番測試和評(píng)審后交付客戶（或內(nèi)部）使用，根據(jù)產(chǎn)生的具體問題進(jìn)行不斷迭代，且觀察產(chǎn)品能否通過準(zhǔn)確的數(shù)據(jù)反映問題、體現(xiàn)能力，應(yīng)虛心接納使用者的使用建議并嚴(yán)謹(jǐn)思考其合理性，用戶的使用和反饋是優(yōu)化產(chǎn)品的重要途徑。只有達(dá)到了管理和運(yùn)營的指標(biāo)，后臺(tái)產(chǎn)品才是真正產(chǎn)生了價(jià)值。

3. 制定設(shè)計(jì)規(guī)范的作用

為后臺(tái)產(chǎn)品制定設(shè)計(jì)規(guī)范有哪些作用和好處呢？簡單來說就是對(duì)產(chǎn)品好、對(duì)自己好、對(duì)團(tuán)隊(duì)好、對(duì)客戶好。

• 對(duì)產(chǎn)品：在項(xiàng)目完成第一版較為穩(wěn)定的版本時(shí)，著手制定設(shè)計(jì)標(biāo)準(zhǔn)，統(tǒng)一公司視覺設(shè)計(jì)規(guī)范及某些特定交互設(shè)計(jì)規(guī)范。同一個(gè)項(xiàng)目會(huì)有多個(gè)設(shè)計(jì)師的參與，規(guī)范化的設(shè)計(jì)語言，避免因設(shè)計(jì)控件混亂而影響設(shè)計(jì)輸出。
• 對(duì)自己：組件化同類元素，提高工作效率，建立公司產(chǎn)品的組件庫，以便不同項(xiàng)目的復(fù)用及設(shè)計(jì)延展。在同一個(gè)項(xiàng)目中也能更好的把控該項(xiàng)目的視覺規(guī)范，提高效率。
• 對(duì)團(tuán)隊(duì)：設(shè)計(jì)規(guī)范的制定，規(guī)范了設(shè)計(jì)團(tuán)隊(duì)的輸出，同時(shí)方便了與開發(fā)團(tuán)隊(duì)的交接和協(xié)作。通過設(shè)計(jì)規(guī)范的制定，前端實(shí)現(xiàn)也能擁有一套可供復(fù)用和擴(kuò)展的組件庫，助力上下游交接及團(tuán)隊(duì)協(xié)作。
• 對(duì)客戶：制定設(shè)計(jì)規(guī)范的同時(shí)需要考慮設(shè)計(jì)延展性，為不同客戶的定制化需求提供更高效的輸出。同時(shí)在進(jìn)行產(chǎn)品迭代時(shí)，設(shè)計(jì)規(guī)范的組件化調(diào)整也大大提高了工作效率。

后臺(tái)產(chǎn)品設(shè)計(jì)規(guī)范

以下數(shù)值為參考，請(qǐng)結(jié)合特定產(chǎn)品靈活運(yùn)用。

1. 頁面布局

統(tǒng)一尺寸

據(jù)統(tǒng)計(jì)，目前 PC 端用戶屏幕分辨率占比排名前三的是 1920*1080、1366*768、1440*900，以 1440 來設(shè)計(jì)的話，向上適配或者向下適配誤差會(huì)比較小。

適配方案：面向多個(gè)客戶，后臺(tái)產(chǎn)品設(shè)計(jì)功能型頁面的尺寸統(tǒng)一為 1440*900，按照柵格系統(tǒng)原則向上或向下適配。展示型頁面以 1440*900 為主，同時(shí)設(shè)計(jì)出極端情況（寬度為 1280 以及寬度為 1920）的效果圖，力求實(shí)現(xiàn)前端實(shí)現(xiàn)效果和高保真設(shè)計(jì)圖誤差最小。面向公司內(nèi)部的后臺(tái)系統(tǒng)，由于各個(gè)職工電腦屏幕是統(tǒng)一采購、統(tǒng)一尺寸，所以開發(fā)適配的分辨率可以統(tǒng)一尺寸進(jìn)行設(shè)計(jì)，這個(gè)尺寸根據(jù)公司內(nèi)部采購屏幕的尺寸和分辨率選擇即可（提前和前端溝通好）。

頁面框架

頁面框架主要分為左右欄布局和上下欄布局，還有其他的布局。左右欄布局包括頂部欄、左側(cè)菜單欄、主體內(nèi)容三大區(qū)域，其中頂部菜單欄、左側(cè)菜單欄為固定結(jié)構(gòu)，右側(cè)主體內(nèi)容根據(jù)分辨率進(jìn)行動(dòng)態(tài)縮放；上下欄布局包括頂部菜單欄和主體內(nèi)容兩大區(qū)域，其中頂部菜單欄為固定結(jié)構(gòu)，主體內(nèi)容進(jìn)行動(dòng)態(tài)縮放且需定義主體內(nèi)容左右兩邊空白區(qū)域最小值；左右欄布局時(shí)，左側(cè)菜單可收縮展開，收縮狀態(tài)下固定寬度。

柵格布局

柵格系統(tǒng)的使用是為了解決自適應(yīng)和響應(yīng)式問題，從而更好地進(jìn)行產(chǎn)品設(shè)計(jì)和產(chǎn)品開發(fā)。響應(yīng)式柵格采用 24 列柵格系統(tǒng)實(shí)現(xiàn)，以滿足 2，3，4，5，6 分比布局等多種情況。固定寬度 Column，將間隔 Gutter 進(jìn)行動(dòng)態(tài)縮放。

谷歌規(guī)定模塊和結(jié)構(gòu)之間要以 8px 為基準(zhǔn)，布局間相對(duì)間距可采用 8px 以及 8 的倍數(shù)，但一些小組件（按鈕、間隔、輸入框）可以以 4 為基準(zhǔn)。柵格布局是為了輔助設(shè)計(jì)，靈活運(yùn)用，不要被它所局限。

尺寸設(shè)定

一般在整體區(qū)域左上角放置產(chǎn)品 LOGO 及產(chǎn)品名稱，大部分系統(tǒng)頂部欄高度 48+8n，側(cè)邊欄寬度  200+8n。我常用的是頂部欄高度 56px，側(cè)邊欄寬度 200px，側(cè)邊欄收縮狀態(tài)寬度 56px，右側(cè)的側(cè)浮窗寬度 400px。

相對(duì)間隔

定義主體內(nèi)容的上下左右邊距，定義主體區(qū)域內(nèi)各模塊的邊距及安全寬度，超出內(nèi)容區(qū)域的部分采用區(qū)域內(nèi)滾動(dòng)或整屏滾動(dòng)，視情況固定導(dǎo)航欄。

2. 標(biāo)準(zhǔn)色

顏色分為品牌色、輔助色、中性色。根據(jù)不同產(chǎn)品的不同需求，可能也會(huì)將統(tǒng)計(jì)圖、標(biāo)簽等進(jìn)行統(tǒng)一標(biāo)準(zhǔn)色設(shè)定。

品牌色即產(chǎn)品主色，產(chǎn)品主色的設(shè)定直接影響產(chǎn)品氣質(zhì)和直觀感受，也是產(chǎn)品直接對(duì)外的形象。品牌色要根據(jù)產(chǎn)品特性、用戶使用場景、產(chǎn)品定位等進(jìn)行選取，盡量做好色彩的延伸性，可支持換膚。品牌色的應(yīng)用場景包括操作狀態(tài)、按鈕色、可操作圖標(biāo)等。

輔助色用于提示其他場景，比如成功、失敗、警告、無效等。

中性色常用于文本、背景、邊框、分割線等，需要考慮深色背景和淺色背景的差異，可以選擇同一色相控制透明度變化，用來表現(xiàn)不同的層級(jí)結(jié)構(gòu)。

其他色如統(tǒng)計(jì)圖、數(shù)據(jù)可視化、多個(gè)標(biāo)簽的不同配色方案根據(jù)項(xiàng)目情況單獨(dú)設(shè)定。

3. 標(biāo)準(zhǔn)字

后臺(tái)系統(tǒng)常用的字體：windows 系統(tǒng)，中文 Microsoft YaHei，英文 Arial；Mac 字體，中文 PingFang SC，英文 Helvetica；除此之外可以選擇的字體還有 segoe UI、思源黑體、Hiragino Sans GB等。

后臺(tái)系統(tǒng)中常用字體大小為 12px、13px、14px、16px、18px、20px、24px、30px。

行高設(shè)定，根據(jù)文字大小及使用場景設(shè)置行高，一般行高=文字大小+6px/8px。

4. 圖標(biāo)

圖標(biāo)是 UI 設(shè)計(jì)中重要組成部分，一般分為功能圖標(biāo)和應(yīng)用圖標(biāo)，以圖形的方式傳達(dá)概念，可以降低理解成本，使得界面更加協(xié)調(diào)美觀。在后臺(tái)產(chǎn)品中，圖標(biāo)的功能則更偏向輔助性，輔助用戶對(duì)功能的認(rèn)識(shí)。

除了某些常用的圖標(biāo)，有一些專業(yè)性的操作和詞匯則需要設(shè)計(jì)師進(jìn)行繪制，現(xiàn)在比較高效方便的方法是在 iconfont 提供的圖標(biāo)模板上用 AI 繪制，畫板 1024*1024，提供圓形、正方形、矩形形狀。圖標(biāo)尺寸按照 8 的倍數(shù)進(jìn)行延展，繪制完成后生成 svg 格式文件，提交到阿里巴巴矢量圖標(biāo)庫的項(xiàng)目組里，方便前端調(diào)用，調(diào)整大小和顏色更為方便，且能夠優(yōu)化系統(tǒng)內(nèi)存和性能。

5. 按鈕

按鈕是后臺(tái)產(chǎn)品進(jìn)行交互設(shè)計(jì)是重要元素，提供給用戶進(jìn)行點(diǎn)擊操作，是視覺上最引人注目的控件，具有一定的視覺受范性。常用按鈕可分為填充按鈕、線性按鈕、文字按鈕。

按鈕的交互狀態(tài)包括默認(rèn)、懸停、點(diǎn)擊和不可用。

按鈕根據(jù)需求分為不同尺寸，大中小三個(gè)級(jí)別用在不同的場景，一般按照 8 的倍數(shù)設(shè)定。如高度分別設(shè)定為 24、32、40px。

規(guī)范整理時(shí)要規(guī)定不同類型按鈕的寬高、圓角及文字大小，同時(shí)還要將按鈕的不同狀態(tài)展現(xiàn)出來。

填充按鈕之間間距最小為 10px。

6. 導(dǎo)航

導(dǎo)航的類型有很多種，常用的比如頂欄菜單、側(cè)欄菜單、折疊菜單、下拉菜單、面包屑、分頁、步驟條、時(shí)間軸、tab標(biāo)簽頁、膠囊菜單、徽標(biāo)數(shù)等。

各類導(dǎo)航中的字體大小可進(jìn)行統(tǒng)一設(shè)定。

頂欄菜單多為一級(jí)菜單，點(diǎn)擊切換，或作為下拉菜單的父級(jí)，將子級(jí)菜單合理分類。

側(cè)欄菜單為垂直導(dǎo)航菜單，可以內(nèi)嵌子菜單。

下拉菜單的觸發(fā)方式一般有鼠標(biāo)懸停和鼠標(biāo)點(diǎn)擊兩種。

步驟條引導(dǎo)用戶按照流程來完成任務(wù)，一般步驟不得少于兩步。

分頁的高度設(shè)定為 24px、30px、32px，根據(jù)應(yīng)用場景適當(dāng)增減內(nèi)容，比如設(shè)定每頁展示數(shù)據(jù)的條數(shù)、跳轉(zhuǎn)至指定頁等。

面包屑用于說明層級(jí)結(jié)構(gòu)，使用戶明確當(dāng)前所在位置，并且可以回到任一上級(jí)頁面。

徽標(biāo)數(shù)用來通知用戶當(dāng)前有未讀消息，一般出現(xiàn)在圖標(biāo)的右上角或者跟在文字后面。

7. 表單

表單多由一條或多條列表項(xiàng)組成，單一列表項(xiàng)的類型有字段輸入框、條件選擇器。

字段輸入框的標(biāo)題和輸入框分布方式包括左右、上下、無標(biāo)題。左右分布是常見的對(duì)齊方式，比較適合 PC 端的使用；上下分布增加了表單的整體高度，視情況選擇使用；無標(biāo)題經(jīng)常應(yīng)用在登錄注冊(cè)，雖然減少了面積，但是增加了理解難度。

輸入框的交互狀態(tài)包括默認(rèn)、輸入結(jié)果、提示錯(cuò)誤、禁用、獲取焦點(diǎn)。

輸入框的尺寸可按照8的倍數(shù)進(jìn)行設(shè)定，比如 24px、32px，也可根據(jù)系統(tǒng)實(shí)際情況進(jìn)行設(shè)定，我常用的輸入框高度為 30px，寬度視情況而定，無圓角。上下布局的多個(gè)輸入框上下間距為 20px，有錯(cuò)誤提示時(shí)候豎向增加 10px 或橫向顯示在輸入框右側(cè)（預(yù)留出位置）。

表單中標(biāo)題文字左對(duì)齊，輸入框左對(duì)齊，標(biāo)題文字距離輸入框20px（多個(gè)長度不同的輸入框算最長的）；標(biāo)題文字右對(duì)齊，輸入框左對(duì)齊，也是常用的方式。輸入框內(nèi)正文字體 14px，文字和左右兩邊邊框的邊距 10px。

選擇器包括單選、多選、時(shí)間選擇、開關(guān)切換、下拉選擇、滑塊選擇、旋鈕等。單選框多為圓形，復(fù)選框多為方形。

搜索框和選擇框的高度為 30px 或按照 8 的倍數(shù)自行設(shè)定，通常和輸入框保持一致。搜索框距離右側(cè)按鈕 4px，內(nèi)部文字 14px。

單選多選框尺寸 16*16px，多個(gè)選項(xiàng)橫向排列間距 16px，縱向排列間距 8px。

開關(guān)按鈕外框 40*20px，內(nèi)部圓形 16*16px。

8. 表格

表格在后臺(tái)產(chǎn)品 UI 設(shè)計(jì)中占比非常大，用來展示數(shù)據(jù)、統(tǒng)一管理、作為詳情入口，是最清晰、高效的形式之一。在設(shè)計(jì)規(guī)范中需設(shè)定表頭高度、表格行高、表格列寬范圍，同時(shí)也包括表格中的按鈕樣式、標(biāo)簽樣式。

表格主要分為五大區(qū)域：選擇搜索區(qū)、操作區(qū)、表頭、正文、底欄。選擇搜索區(qū)放置篩選框和搜索框，為用戶提供按需搜索，可以大大提高用戶效率；操作區(qū)指各種對(duì)表格內(nèi)容進(jìn)行增刪改查、批量處理、配置列的動(dòng)作；表頭展示列標(biāo)題，一般具有排序功能；正文主要展示各種各樣的數(shù)據(jù)，要注意行高、對(duì)齊、分割、信息層級(jí)等，要考慮是否提供行內(nèi)操作；底欄顯示分頁、總數(shù)統(tǒng)計(jì)等。

表格信息一般主要功能為增刪改查，查看和編輯是最基本的功能，表格信息支持篩選、搜索、排序、分頁。對(duì)可批量操作的表格數(shù)據(jù)在第一列增加多選框。

行高

表格行高可設(shè)置為表格內(nèi)字體高度的 2~3 倍，主表格會(huì)間隔顯示不同顏色，用于區(qū)分不同行數(shù)據(jù)、加強(qiáng)視覺流引導(dǎo)，展開單行的內(nèi)置表格可采用純色，選中行應(yīng)有視覺上的反饋。表頭要和表格內(nèi)容有視覺上的區(qū)分。表格行高可采用 36、40、48、60 等。

行數(shù)

表格行數(shù)太多加載速度會(huì)降低，延長用戶等待時(shí)間；行數(shù)太少會(huì)導(dǎo)致用戶不斷翻頁，降低使用效率。比較合適的默認(rèn)表格行數(shù)是 20 或 50，用戶可以根據(jù)自己需求選擇默認(rèn)的行數(shù)。設(shè)定行數(shù)之后，如果每頁行數(shù)多于每屏行數(shù)，可在表格內(nèi)引入滾動(dòng)條，這時(shí)可以固定表頭滾動(dòng)內(nèi)容。

列寬

列寬根據(jù)內(nèi)容字段長短需要有不同且合理的默認(rèn)值，使得表格字段有良好的展示效果。列內(nèi)容的長度固定時(shí)，列寬應(yīng)大于固定寬度（比如時(shí)間、MD5、SHA1）；列內(nèi)容不固定時(shí)，能預(yù)判最大寬度的按照最大寬度設(shè)定列寬（比如IP地址、MAC地址、姓名），不能預(yù)判最大寬度的設(shè)定列寬按照常用寬度，多于內(nèi)容省略以「...」展示，鼠標(biāo)懸停出現(xiàn)完整內(nèi)容（比如詳情、描述）。

列數(shù)

表格列不應(yīng)過多，列數(shù)比較多的情況下應(yīng)該合理進(jìn)行合并、隱藏、刪除或進(jìn)行優(yōu)先級(jí)處理。常用的方法有引入配置列，用戶可自定義展示必需列以外的其他列；只展示重要信息，下拉展開列查看完整信息；在表格中引入橫向滾動(dòng)條，根據(jù)實(shí)際情況選擇是否要始終固定基本信息列（如第一列是文件名）和操作列（最后一列的操作）。

對(duì)齊方式

表格內(nèi)的文本應(yīng)按照文本類型不同進(jìn)行統(tǒng)一規(guī)范，如金額類數(shù)值保留相同位數(shù)小數(shù)，SHA1 雖然是一串?dāng)?shù)字但是其實(shí)那并不是數(shù)據(jù)而是一串編碼，所以可以像文本一樣左對(duì)齊。根據(jù)文本內(nèi)容不同，對(duì)齊方式也應(yīng)靈活調(diào)整，可采用文本左對(duì)齊、數(shù)據(jù)右對(duì)齊、金額小數(shù)點(diǎn)對(duì)齊的方式。數(shù)據(jù)前面有標(biāo)簽的，將標(biāo)簽前置對(duì)齊。類似 IP 地址、MD5、SHA1、域名這樣的信息，也可以根據(jù)產(chǎn)品需要在文本前面增加「復(fù)制」圖標(biāo)，方便用戶調(diào)用。

詳情入口

表格內(nèi)部數(shù)據(jù)的詳情入口，將能點(diǎn)擊下鉆查看詳情的內(nèi)容以不同顏色表示，同時(shí)在表格行最后一列操作按鈕部分放置一個(gè)查看按鈕。

9. 反饋

包括彈框、側(cè)滑框、骨架屏、全局提示、警告提示、消息提醒、加載狀態(tài)等。分為模態(tài)框和非模態(tài)框，區(qū)別是是否會(huì)打斷用戶工作流。

彈框又稱對(duì)話框，是疊加在應(yīng)用主窗口上的彈出式窗口，以對(duì)話的方式使用戶參與進(jìn)來。

彈框

彈框出現(xiàn)時(shí)，主題內(nèi)容增加一層遮罩 #000，透明度 50%，避免使用雙層彈框，可同時(shí)采用有關(guān)閉圖標(biāo)的彈框和無關(guān)閉圖標(biāo)的彈框，引導(dǎo)用戶對(duì)內(nèi)容進(jìn)行正確操作。如果設(shè)定系統(tǒng)內(nèi)所有彈框均可以點(diǎn)擊彈框外區(qū)域關(guān)閉， 則需要為用戶新增或編輯內(nèi)容的彈框彈出二級(jí)確認(rèn)的彈框，或者再次進(jìn)行交互梳理。

側(cè)滑框

側(cè)滑框又稱抽屜，出現(xiàn)在右側(cè)，固定寬度 400px，高度覆蓋在主題內(nèi)容之上，點(diǎn)擊側(cè)滑框以外的區(qū)域則收起側(cè)滑框。

骨架屏

為某些特定數(shù)據(jù)提供數(shù)據(jù)加載等待時(shí)的占位圖形組合。

全局提示

建議停留時(shí)間 3s，可根據(jù)文字字?jǐn)?shù)調(diào)整停留時(shí)間，文字內(nèi)容限制在 30 以內(nèi)。

警告提示

用不同顏色和樣式展示需要關(guān)注的信息。

通知提醒

消息通知和警告信息用通知提醒框，單個(gè)消息從頁面右側(cè)以抽屜的方式劃出，用戶可手動(dòng)關(guān)閉，或停留 3s 后自動(dòng)關(guān)閉。

10. 缺省狀態(tài)

繪制不同類型的情感化插畫表示缺省狀態(tài)，如404、500、暫時(shí)沒有數(shù)據(jù)、沒有新消息等。

頁面需要一個(gè)默認(rèn)的底色，錯(cuò)誤文字使用 14px，與情感化插畫間距 20px，與按鈕間距 30px。

11. 數(shù)據(jù)可視化

數(shù)據(jù)可視化部分可能是后臺(tái)產(chǎn)品中對(duì)視覺設(shè)計(jì)要求較高的部分，使用情境為各類統(tǒng)計(jì)圖、大屏展示頁面等。

功能型頁面的數(shù)據(jù)可視化可以引入圖形化設(shè)計(jì)組件，Echarts、G2、d3等；展示型頁面的數(shù)據(jù)可視化則可以做得更有趣，比如立體的統(tǒng)計(jì)圖、粒子地球效果、靈活有趣的網(wǎng)絡(luò)拓?fù)鋱D等。

考慮到數(shù)據(jù)可視化可能會(huì)需要深色淺色不同的背景，在數(shù)據(jù)可視化統(tǒng)計(jì)圖的色彩搭配上要注意顏色的拓展性。

總結(jié)

不管是做 C 端產(chǎn)品還是 B 端產(chǎn)品，都是為了實(shí)現(xiàn)用戶的需求、幫用戶解決問題。

剛接觸后臺(tái)產(chǎn)品的時(shí)候，最希望能把產(chǎn)品做的炫酷、美觀，工作中慢慢地發(fā)現(xiàn)項(xiàng)目的背后思考更為重要，產(chǎn)出的設(shè)計(jì)成果也應(yīng)該有理有據(jù)、支撐整個(gè)設(shè)計(jì)體系。網(wǎng)上供大家使用和學(xué)習(xí)的資源非常多，對(duì)一些公司來說、專門去制定一套自己的后臺(tái)設(shè)計(jì)規(guī)范不免顯得費(fèi)時(shí)費(fèi)力，合理引入 antdesign 和 element 等開源的設(shè)計(jì)組件，會(huì)使得設(shè)計(jì)師以及前端事半功倍，有助于設(shè)計(jì)師把更多的精力投入到沉淀行業(yè)知識(shí)、研究產(chǎn)品架構(gòu)、梳理交互方式和創(chuàng)新視覺表現(xiàn)上。

在后臺(tái)產(chǎn)品的設(shè)計(jì)過程中，更應(yīng)該把寶貴的時(shí)間用在更值得關(guān)注的事物上，讓設(shè)計(jì)師能夠輔助業(yè)務(wù)挖掘，從趨于相同的表象中找到產(chǎn)品獨(dú)有的閃光點(diǎn)，從而切實(shí)解決問題和實(shí)現(xiàn)價(jià)值。

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

搭建設(shè)計(jì)規(guī)范的意義

產(chǎn)品側(cè)：?個(gè)產(chǎn)品不同分支多個(gè)團(tuán)隊(duì)完成的時(shí)候，可以保證產(chǎn)品團(tuán)隊(duì)使用同一份設(shè)計(jì)規(guī)范快速完成產(chǎn)品原型設(shè)計(jì)。保證可復(fù)用模塊的交互體驗(yàn)的?致性。

設(shè)計(jì)側(cè)：通過設(shè)計(jì)規(guī)范去解決大部分需求，極大提高效率解放雙手，讓設(shè)計(jì)師能去做一些更發(fā)揮創(chuàng)意和想象力的設(shè)計(jì)。

開發(fā)側(cè)：形成開發(fā)資產(chǎn)，可以提升研發(fā)效率，降低維護(hù)成本。開發(fā)工程師無需再重復(fù)開發(fā)同?個(gè)組件，只需要去組件庫里調(diào)用即可，配合業(yè)務(wù)邏輯，高效完成界面開發(fā)，做到開箱即用。

測試側(cè)：標(biāo)準(zhǔn)化的設(shè)計(jì)規(guī)范，是測試人員最喜歡看到的。例如，設(shè)計(jì)規(guī)范規(guī)定彈窗 footer 區(qū)按鈕組居右，那么測試人員只要測到不居右，就可以給產(chǎn)品提優(yōu)化建議了。

二、原子設(shè)計(jì)理論

設(shè)計(jì)規(guī)范中具像化的環(huán)節(jié)是設(shè)計(jì)組件化，最早可以追溯到工業(yè)革命時(shí)期，福特創(chuàng)造的流水線生產(chǎn)方式。福特將汽車分解成零部件，再把零部件模塊化組裝，這?創(chuàng)舉極大的提高了生產(chǎn)效率。

根據(jù)資料顯示，T型車是世界第一款大量使用通用零部件，并進(jìn)行大規(guī)模流水線裝配的汽車。這種方式極大地提高了T型車生產(chǎn)效率，降低了生產(chǎn)成本。1914年，福特已經(jīng)可以做到93分鐘生產(chǎn)一輛汽車，而同期其他所有汽車廠商的生產(chǎn)能力總和也不及于此。到了1920年代，T型車的價(jià)格甚至降到300美元一輛（問世之初T型車的售價(jià)僅需850美元，而同期的競爭對(duì)手則通常為2000-3000美元一輛）。

原子設(shè)計(jì)理論最初來源于化學(xué)領(lǐng)域，這一點(diǎn)從名字可以聽出來。在化學(xué)中，所有的物體都是由原子構(gòu)成，原子組合構(gòu)成分子，分子組合構(gòu)成有機(jī)物，最終形成了宇宙萬物。

2013年前端工程師BradForst將此理論運(yùn)用在界面設(shè)計(jì)中，形成一套設(shè)計(jì)系統(tǒng)，包含5個(gè)層面：原子、分子、組織、模板、頁面。

當(dāng)公司的業(yè)務(wù)產(chǎn)品逐漸擴(kuò)大時(shí)，我們就需要制定一套完整的設(shè)計(jì)系統(tǒng)，提升設(shè)計(jì)和開發(fā)的協(xié)作效率，統(tǒng)一所有設(shè)計(jì)師的輸出物。

總之，將設(shè)計(jì)拆分成一些基本元素，例如一個(gè)按鈕、一個(gè)彈窗，再根據(jù)業(yè)務(wù)需求、產(chǎn)品邏輯重新組裝，形成最終的產(chǎn)品，這就是原子設(shè)計(jì)理論（組件化設(shè)計(jì)），區(qū)別于整體設(shè)計(jì)制造的一種新的工作流程。

1. 設(shè)計(jì)系統(tǒng)搭建—原子

原子是物質(zhì)的基礎(chǔ)組成部分，是構(gòu)成設(shè)計(jì)系統(tǒng)的最基礎(chǔ)元素。

在界面中以「元素」的形式存在，例如：顏色、文字、圖標(biāo)、分割線、間距、圓角、陰影等。

2. 色彩體系

中后臺(tái)產(chǎn)品的色彩體系主要分為3類：品牌色、功能色、中性色。

色彩體系

1. 品牌色：大型公司往往都會(huì)有專屬色號(hào)的品牌色，比如阿里橙色、美團(tuán)黃色和騰訊藍(lán)色，以體現(xiàn)產(chǎn)品特性、傳播理念。在界面中主要體現(xiàn)在關(guān)鍵行動(dòng)點(diǎn)、選中狀態(tài)、重要信息和插畫元素等。
2. 功能色：旨在表示某種狀態(tài)提示，這類顏色往往是深入人心的，比如綠色代表成功，紅色代表失敗等等。
3. 中性色：還有一種是不需要傳遞顏色代表的特殊含義的，稱為中性色，即黑白灰。B 端網(wǎng)站體現(xiàn)理性和效率特性，往往會(huì)使中性色占據(jù)九成以上，應(yīng)用在背景、邊框、文本和分割線。

3. 文字體系

B端產(chǎn)品的文字系統(tǒng)設(shè)計(jì)目標(biāo)：增強(qiáng)閱讀體驗(yàn)、提升信息獲取效率，字體是體系化界面設(shè)計(jì)中最基本的構(gòu)成之一。

字體的大小、字重、色彩區(qū)分體現(xiàn)界面信息的層級(jí)關(guān)系。

文字體系

1. 整體思路：在同一個(gè)系統(tǒng)的UI設(shè)計(jì)中先建立體系化的設(shè)計(jì)思路，對(duì)主、次、輔助、標(biāo)題、展示等類別的字體做統(tǒng)一的規(guī)劃，再落地到具體場景中進(jìn)行微調(diào)，最終確定建立體系化的設(shè)計(jì)思路，有助于強(qiáng)化字體落地的一致性。
2. 少即是多：在視覺展現(xiàn)上能夠用盡量少的樣式去實(shí)現(xiàn)設(shè)計(jì)目的。避免毫無意義的使用大量字階、顏色、字重強(qiáng)調(diào)視覺重點(diǎn)或?qū)Ρ汝P(guān)系，提高字體應(yīng)用的性價(jià)比，減少不必要的樣式浪費(fèi)。
3. 拉開對(duì)比：在需要拉開差距的時(shí)候可以嘗試在字階表中跳躍地選擇字體大小，會(huì)令字階之間產(chǎn)生一種微妙的韻律感。

4. 陰影、圓角、線條

陰影：在B端界面中，有些特殊的元素會(huì)使用到陰影，從陰影中我們可以看出物體距離平面的高度，距離平面越高的物體陰影越大；

圓角：從直角到圓角給人帶來從嚴(yán)謹(jǐn)冰冷到柔和親切的心理感受，在B端界面中，常用2-8px圓角；

線條：分割模塊及輔助定位。

5. 后臺(tái)設(shè)計(jì)系統(tǒng)搭建—分子

在界面中，分子是按照規(guī)律組合起來的元素，如：按鈕、搜索框、選擇器等。

以按鈕為例，文字、色塊、圖標(biāo)和間距這些抽象的原子產(chǎn)生關(guān)聯(lián)組合成分子：圖標(biāo)、文字傳達(dá)含義；顏色、圓角傳遞特性；間距、尺寸定義規(guī)范。

6. 后臺(tái)設(shè)計(jì)系統(tǒng)搭建—組織

分子+原子組合成更復(fù)雜和可拓展的組織（區(qū)塊組件），如搜索區(qū)、卡片列表區(qū)、表單區(qū)、數(shù)據(jù)統(tǒng)計(jì)區(qū)等。

7. 后臺(tái)設(shè)計(jì)系統(tǒng)搭建—模板

由原子+分子+組織構(gòu)成的更復(fù)雜更專注頁面底層架構(gòu)，并非具體頁面。

8. 后臺(tái)設(shè)計(jì)系統(tǒng)搭建—頁面

帶業(yè)務(wù)邏輯的場景案例，如標(biāo)注場景、權(quán)限管理、詳情設(shè)置等，將頁面模板填充真實(shí)的文字、圖片后形成頁面，即帶交互邏輯的高保真原型圖，真實(shí)內(nèi)容使設(shè)計(jì)系統(tǒng)有了“生命”。

三、Design Token

雖然通過設(shè)計(jì)規(guī)范可以對(duì)產(chǎn)研流程提效，但在開發(fā)還原中還是會(huì)經(jīng)常遇到一些棘手的問題。

1. 開發(fā)還原準(zhǔn)確度難以保證，走查幾輪還有有細(xì)節(jié)問題沒有修復(fù)；
2. 領(lǐng)導(dǎo)要求開發(fā)暗色模式，或者客戶要求換一套主題色，找到替換的工作量巨大；
3. 設(shè)計(jì)一處變更，涉及多個(gè)頁面模塊，維護(hù)工作量大。

為了解決和優(yōu)化上述的問題，DesignToken應(yīng)運(yùn)而生。它可以解決產(chǎn)品設(shè)計(jì)和開發(fā)過程中的細(xì)節(jié)、變更和風(fēng)格一致性的問題，有效提高產(chǎn)研團(tuán)隊(duì)設(shè)計(jì)質(zhì)量和協(xié)作效率。

1. Design Token 介紹

“Token”原本的意思是“令牌，指令”，與Design連在一起指“設(shè)計(jì)變量”。在工程邏輯中用于用戶身份與服務(wù)器端進(jìn)行驗(yàn)證，而在設(shè)計(jì)體系中，DesignToken則可以簡單理解為封裝的視覺樣式參數(shù)。它通過規(guī)定樣式參數(shù)，并通過一套符合設(shè)計(jì)師、工程師理解的統(tǒng)一的命名規(guī)則，為這些樣式參數(shù)的定義名稱。

2. Design Token 優(yōu)勢(shì)

① 設(shè)計(jì)語義更易理解

幫助設(shè)計(jì)師和開發(fā)建立統(tǒng)一語言，設(shè)計(jì)方案更加一致。

從下到上的Design Token 命名思路

②主題皮膚一鍵替換

主題皮膚的替換可以用在兩個(gè)維度，一是淺色模式和暗色模式的替換，二是不同品牌色之間的替換。我們可以將不同主題的同一個(gè)場景下的顏色使用同一個(gè)Token命名，達(dá)到一鍵換膚的效果適配不同客戶方案。

③設(shè)計(jì)變更高效維護(hù)

替代傳統(tǒng)工作流一鍵替換效果。例如修改二級(jí)文本的顏色，傳統(tǒng)工作流需要先修改設(shè)計(jì)規(guī)范，修改設(shè)計(jì)稿，然后輸出給開發(fā)，開發(fā)逐一更新代碼，完成后提交給設(shè)計(jì)師進(jìn)行走查驗(yàn)收。而當(dāng)使用Token之后，只需要更新Token參數(shù)，就可以直接導(dǎo)出JSON給開發(fā)，一鍵自動(dòng)更新。提高效率不止一點(diǎn)點(diǎn)。

④設(shè)計(jì)效果精準(zhǔn)還原

代碼編輯器自動(dòng)化提示顏色選擇，如不正確則產(chǎn)生報(bào)錯(cuò)。

使用Token開發(fā)和傳統(tǒng)開發(fā)的對(duì)比

總結(jié)一下使用 Token 開發(fā)的優(yōu)勢(shì)：

1. 設(shè)計(jì)語言 更易理解
2. 主題皮膚 一鍵替換
3. 設(shè)計(jì)變更 高效維護(hù)
4. 設(shè)計(jì)成果 精準(zhǔn)還原

3. Design Token 應(yīng)用流程

第一步：提煉 token 元素；第二步：定義命名規(guī)則；第三步：整理 Design Token 資產(chǎn)表；第四步：開發(fā)與應(yīng)用。

Design Token 應(yīng)用實(shí)踐

接下來具體說說如何為 Design Token 命名，命名方式目前并沒有絕對(duì)統(tǒng)一的要求，不過有一定的邏輯規(guī)則，可以由設(shè)計(jì)師找前端開發(fā)一起商量出一個(gè)都能通俗易懂便于理解的命名規(guī)則，舉個(gè)例子：

1. Token 名稱由大到小排序，中間用“-”分隔；
2. Token 前綴可自定義添加公司簡稱，如“--el-xx” 、“--ant-xx”、“--td-xx”。

命名規(guī)則示意

為了更好的統(tǒng)一規(guī)范，應(yīng)用 Token，建議成熟的互聯(lián)網(wǎng)公司設(shè)計(jì)團(tuán)隊(duì)搭建自己的低代碼平臺(tái)。一鍵更換主題，盡在指尖。

轉(zhuǎn)載自優(yōu)設(shè)網(wǎng)

蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）www.aknz.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 年來，始終保持著對(duì)國內(nèi)外優(yōu)秀設(shè)計(jì)作品的學(xué)習(xí)與研究。我們持續(xù)追蹤全球前沿的 UI/UX 設(shè)計(jì)趨勢(shì)，從中提煉可落地的設(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è)級(jí) UI 項(xiàng)目，如果能在界面之外補(bǔ)充品牌載體（銘牌、工牌、實(shí)體 Mockup），說服力會(huì)呈指數(shù)級(jí)增長。

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

二、設(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 等）對(duì)應(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é)"的存在感雖然弱，但對(duì)營造專業(yè)氛圍至關(guān)重要。

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

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

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

上圖是Launch Director 與 Telemetry Officer 并排對(duì)比。

上圖是Recovery Captain 與 Engineer 并排對(duì)比。

這套設(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)部綠色液體高度與百分比對(duì)應(yīng)——數(shù)據(jù)可視化與三維插畫的完美融合

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

• 引擎集群部分用九宮格排布九個(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，用戶就很難建立對(duì)整體架構(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.aknz.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 年來，始終保持著對(duì)國內(nèi)外優(yōu)秀設(shè)計(jì)作品的學(xué)習(xí)與研究。我們持續(xù)追蹤全球前沿的 UI/UX 設(shè)計(jì)趨勢(shì)，從中提煉可落地的設(shè)計(jì)方法論，分享給同樣熱愛設(shè)計(jì)的你。今天，我們來深度拆解一套車輛安全數(shù)據(jù)分析儀表盤的 UI 設(shè)計(jì)，從信息架構(gòu)、配色策略、移動(dòng)端適配到數(shù)據(jù)敘事的視覺表達(dá)，逐一解析其背后的設(shè)計(jì)決策。

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

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

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

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

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

• 卡片內(nèi)部包含車輛碰撞示意圖、型號(hào)信息（Ford Model 2017）、事件類型標(biāo)簽、CTA 鏈接共四類信息層，通過縱向網(wǎng)格對(duì)齊排布，視覺密度控制在舒適區(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 端場景下，克制即高級(jí)。

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

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

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

全系界面僅使用藍(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ì)一目了然——選對(duì)展示載體，本身就是最好的設(shè)計(jì)說明。

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

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

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

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

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

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

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

• 時(shí)間維度切片（Year/Quarter/Week）以 Tab 形式置于指標(biāo)上方，提供靈活切換的同時(shí)不侵占核心數(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)部

第三層：可對(duì)比的詳情卡片（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ī)卡片，兩張卡片形成對(duì)比。

移動(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)先級(jí)語義，而非裝飾功能。

原則二：圖文合一 車輛技術(shù)插畫與百分比數(shù)據(jù)（如 35% severity）在同一卡片內(nèi)左右排布。插圖不是裝飾——它用視覺化的方式解釋了"碰撞嚴(yán)重程度"這個(gè)抽象概念，大幅降低了用戶的理解成本。右側(cè)的折線小圖同時(shí)提供時(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è)為折線趨勢(shì)圖 + 藍(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è)信息層級(jí)，全部通過字號(hào)、字重、間距做出清晰區(qū)分，密而不亂

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

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

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

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

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

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

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

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

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

蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）www.aknz.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ī)生朋友的身份重新定義健康管理，從對(duì)話式醫(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 升級(jí)而來。產(chǎn)品愿景是成為用戶的 AI 醫(yī)生朋友，提供健康咨詢、圖片解讀（支持報(bào)告、病例、處方、藥盒）、個(gè)人和家庭健康檔案管理，以及預(yù)約掛號(hào)、云陪診等醫(yī)療健康服務(wù)。

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

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

當(dāng)你打開螞蟻阿福 APP的第一刻，你會(huì)發(fā)現(xiàn)它像 ChatGPT、DeepSeek 一樣，只有一個(gè)對(duì)話框。這正是 AI-UX 的典型表現(xiàn)形式——把「對(duì)話」作為核心入口，弱化傳統(tǒng)的多層級(jí)導(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)菜單欄上方，不同智能體對(duì)應(yīng)不同醫(yī)療流程，用戶一次點(diǎn)擊即可進(jìn)入明確的任務(wù)流，避免對(duì)話發(fā)散。

體驗(yàn)思考

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

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

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

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

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

另外，你會(huì)發(fā)現(xiàn)阿福的頭部有點(diǎn)擁擠（包含用戶中心、智能體、任務(wù)中心等入口）。這是因?yàn)檫^去在菜單欄或金剛區(qū)的高頻功能都被上移了。也許這就是未來的設(shè)計(jì)趨勢(shì)——”菜單欄”從下往上，把最寶貴的黃金位置留給 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 對(duì)話式交互不同，阿福將醫(yī)療場景中的高頻應(yīng)用設(shè)計(jì)成獨(dú)立智能體。用戶可以在底部對(duì)話框上方和頭部直接觸發(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 給出最終病情判斷，并提供對(duì)應(yīng)解決方案、就近醫(yī)院掛號(hào)和醫(yī)生推薦。
• 用戶可選擇去公立醫(yī)院就診或直接在線問診。

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

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

體驗(yàn)思考

如果你覺得 ChatGPT、DeepSeek 這類對(duì)話式 AI 產(chǎn)品的交互過于簡單，融入智能體設(shè)計(jì)的阿福會(huì)給你更多驚喜。智能體像一個(gè)封裝了特定功能的應(yīng)用，具有明確的目標(biāo)導(dǎo)向，用 AI 服務(wù)于這個(gè)目標(biāo)，而不是讓用戶在自然語言中”摸索路徑”。換句話說，智能體就像傳統(tǒng)的二級(jí)功能模塊——用戶觸發(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)的對(duì)話式 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 智能對(duì)話方式，形成了一種既保留用戶認(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 對(duì)話，系統(tǒng)開始結(jié)合患者的病情、地區(qū)進(jìn)行推薦（醫(yī)生數(shù)據(jù)來源自在全國擁有 90 萬醫(yī)生的好大夫）。
• 患者可以直接進(jìn)入醫(yī)生主頁，進(jìn)行在線問診和掛號(hào)。
• 如果對(duì)平臺(tái)推薦的醫(yī)生不滿意，可以進(jìn)入全部醫(yī)生二級(jí)頁面進(jìn)行個(gè)性化篩選（傳統(tǒng)的找醫(yī)生形式），也可以讓阿福重新為你推薦。

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

• 融合傳統(tǒng)交互模式：在 AI 對(duì)話框中加入傳統(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í)到過去對(duì)對(duì)話式 AI 產(chǎn)品的交互和 UI 理解過于淺顯。它們確實(shí)主要依靠對(duì)話交互，但隨著智能體的發(fā)展，每個(gè)智能體都代表一個(gè)獨(dú)立的流程、內(nèi)容甚至風(fēng)格。

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

寫到這里，我突然想起另一款對(duì)話式醫(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 年參與釘釘智能體測評(píng)時(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)建，具備”深度思考”能力。它可對(duì)復(fù)雜、信息不全的臨床場景進(jìn)行多輪推理、邏輯驗(yàn)證與自我糾錯(cuò)，助力精準(zhǔn)診療。

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

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

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

體驗(yàn)思考

醫(yī)生 AI 智能體這一創(chuàng)新模式對(duì)多個(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，對(duì)比阿福的打卡流程與專業(yè)健身應(yīng)用的差異。整體體驗(yàn)下來，阿福的用戶體驗(yàn)更流暢。由于首頁更聚焦、更簡潔，我可以一目了然地看到所有打卡任務(wù)。

交互流程

• 用戶在底部打開健康小目標(biāo)智能體。
• 進(jìn)入后開始設(shè)置自己的小目標(biāo)（用戶可以選擇模板也可以進(jìn)行自定義）。
• 在AI 對(duì)話框完善詳細(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)與對(duì)話系統(tǒng)割裂。
• 即時(shí)正反饋與成長機(jī)制：打卡成功即獲得“健康福氣值”，通過情緒化動(dòng)畫與數(shù)值反饋強(qiáng)化成就感。

體驗(yàn)思考

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

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

第二，健康小目標(biāo)就像常見的用戶簽到打卡功能，通過持續(xù)打卡增強(qiáng)用戶活躍度。但我認(rèn)為最大的亮點(diǎn)在于：你可以在對(duì)話框中輸入想實(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 給我的測評(píng)是要注意休息、少熬夜，目前毛發(fā)良好。

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

• 多場景入口統(tǒng)一：拍患處、看舌苔、測膚質(zhì)、測毛發(fā)等能力集中在同一入口，用戶無需理解功能邊界，只需選擇“我想拍什么”。
• 漸進(jìn)式診斷對(duì)話：先基于圖像給出初步提示，再通過關(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)快速評(píng)估出用戶皮膚的健康狀況——這本身就是科技的巨大進(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à)格、多維度對(duì)比，以及直接通過外賣配送或郵寄下單。

設(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)告不僅為患者提供多輪對(duì)話追問，最后還會(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)告這樣的功能，它至少可以解決大部分患者對(duì)于專業(yè)報(bào)告的疑惑，了解 50%-70% 的基礎(chǔ)情況。過去的互聯(lián)網(wǎng)醫(yī)院可以解決全國城市醫(yī)療資源不對(duì)等的痛點(diǎn)，而隨著 AI 的加持，我覺得這種痛點(diǎn)會(huì)逐漸降低，就像 我在 AI 醫(yī)生分身那個(gè)環(huán)節(jié)提到的一樣，如果AI 可以把一個(gè)醫(yī)生過去幾十年的知識(shí)和就診經(jīng)驗(yàn)復(fù)刻，那么無論我們?cè)谀膫€(gè)城市，都能同時(shí)享受到這個(gè)醫(yī)生帶給社會(huì)的價(jià)值。

總結(jié)與思考

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

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

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

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

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

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

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

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

蘭亭妙微（藍(lán)藍(lán)設(shè)計(jì)）www.aknz.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。