<s id="jiy2b"><source id="jiy2b"></source></s>
蘭亭妙微UI設計公司分享：當AI能夠深度理解'團圓經濟'的情感密碼，節日營銷正在從流量爭奪升級為心智滲透的精準戰役。58同城在中秋期間以'好崗離家近'為核心，通過AI生成融合城市地標與職業場景的個性化視覺，在6大城市實現千萬級曝光的同時提升簡歷投遞量40%。這場品效合一的實踐揭示了一個關鍵趨勢：AI不再是冰冷的效率工具，而是情感共鳴的放大器——它讓招聘廣告從信息堆砌轉向情感連接，真正實現了品牌溫度與業務增長的雙贏。
項目首先基于人口特征、營銷資源與業績需求，精準圈定長沙、成都、西安、無錫、南昌五大目標城市。這些城市的共性在于春節/中秋返鄉率超80%，鄉土情結與團圓氛圍尤為濃郁。
執行層面：項目聚焦6大城市的24個核心商圈，選擇電梯內、戶外大屏、公交站亭三大高頻觸達渠道。
主視覺采用“品牌區+創意區”雙分區布局：左側傳遞“好崗離家近”的核心主張，右側則分別針對B端企業（展示招聘實力）與C端求職者（突出崗位優勢），引導“求職者投遞-商家入駐”的雙向轉化。
AI設計的核心價值，在于讓“情感共鳴”與“高效落地”并行不悖。本次項目中，AI技術貫穿創意生成、視覺優化全流程，既精準傳遞“團圓+留鄉”的情感內核，又破解了多城市定制、短周期交付的效率難題，實現雙重突破。
設計提案方向：
設計緊扣“中秋團圓”與“留鄉就業”的雙重訴求，以主題文案將求職需求與家庭情感深度綁定，精準觸動目標人群的“本土情結”。
創意構思沿兩個方向展開：
「中秋+商圈實景」方向提案：
快速建立“本地招聘”的直觀認知，通過融合城市地標與品牌色，結合 “中秋團圓” 節點，延續 “好崗離家近” 的核心訴求，同時針對不同城市定制化文案（如西安的“照的見你的未來”、成都的“崗位和火鍋一樣沸騰”），既傳遞就業價值，又契合城市氣質，激活留鄉就業的情感需求。，讓城市印記成為情感紐帶。
「中秋+地標+職業人物」方向提案：
采用真實場景與AI生成插畫人物相結合的方式（如職場女性與城市景觀、特色元素的融合），畫面生動富有層次，打破傳統招聘廣告的單調感。
最終方案：
AI技術在此次項目中深度融入從創意到落地的全流程，實現“多快好省”的突破：
創意圖像生成：借助Topnow等工具，快速合成“中秋+商圈”的定制化場景，使AI元素與實景自然銜接，直觀傳遞信息，降低用戶理解成本。
高效素材處理：
即夢4.0：
字體設計：幾分鐘內完成字體設計方案。
處理圖片：快速調整建筑角度、優化圖片內容，適配戶外大屏的傳播需求，大幅減少后期耗時。
即夢3.0：
生成圖片：月亮的質感與主文案的藝術化呈現，通過 AI 技術實現視覺吸引力，既保證節日氛圍的營造，又讓文案具備強記憶點。
卡通插畫：效果比4.0優秀
在插畫生成上表現卓越，通過精準指令，快速產出風格統一的本地職業形象（如成都外賣小哥、西安青年群體），傳遞“本地工作的愉悅感”，效率遠超人工。
關鍵詞參考：
“一個外賣小哥抱著熊貓玩偶，大步跑，綠色系工作服，開心地笑，黑色單線描邊，扁平插畫，炫彩配色”
“一個女孩面對手機視頻通話，身穿襯衫，坐姿端正，張口說話，居家環境，黑色單線描邊，扁平插畫，橙色系配色”
“5個男女青年，抬頭看前方，一人手指前方，全身，站立，背影，時尚穿搭，黑色單線描邊，扁平插畫，豐富配色”
具體成效：
創意階段：半天生成4個完整方向，傳統方式需2-3天。
多城市適配：快速產出兼具系列感與地方特色的視覺方案。
修改優化：響應客戶反饋的速度提升70%以上。
基于“一套核心視覺，多場景適配”原則，AI擴圖、高清修復，協助快速延展生成線下物料、線上專場Banner、長圖海報等多尺寸物料，確保線上線下品牌形象統一，強化用戶認知。
AI賦能的設計創新，本次設計通過情感、商業、品牌三大邏輯，實現“品效合一”核心目標。讓設計不僅是視覺呈現，更實現了品牌價值與業務增長的雙重落地。
1.情感邏輯：激活本土情結，拉動C端轉化。AI設計精準觸達留鄉需求，讓“像鳥飛往自己的山”不再只是心理期許，而是有具體崗位支撐的現實可能。數據印證成效：長沙、成都、西安等地線上專場簡歷投遞量增長40%，“本地崗位”搜索量上升62%，有效拉動C端用戶參與度。
2.商業邏輯：精準賦能B端，超額完成業績。對B端商家而言，精準廣告投放是核心需求。通過“行業+地域”的定制化廣告設計，有效提升了商家投放意愿與合作轉化。
3.品牌邏輯：沉淀長期認知資產。設計圍繞“貼近受眾、強化認知、促進轉化”原則，將“提供家鄉好工作”的營銷邏輯，拆解為“明月+地標+文案+品牌信息”的直觀的視覺符號組合，降低用戶信息理解成本。通過品牌色、視覺等符號在多場景的重復曝光，持續強化“找本地好工作，就上58”的用戶心智，使品牌從工具平臺升級為“助力團圓”的伙伴，構筑獨特的品牌競爭壁壘。
本次實踐為行業帶來核心啟示：AI是設計師的“超級助手”，其核心價值在于提升效率與精準度。未來的品牌設計應聚焦于 “策略為先，AI賦能，情感共鳴”的融合模式——以策略為導向，用AI提效，最終以情感打動人心。
打動人心的永遠是對人性的洞察和情感的共鳴：
對招聘品牌推廣而言，這打破了“信息堆砌”的傳統廣告模式；對更廣的行業來說，則示范了“AI賦能設計，設計驅動品效”的新路徑。技術終究是工具，而深度的策略思考與人文洞察，永遠是設計師不可替代的核心價值。當AI與品牌策略、情感共鳴深度結合，營銷才能實現真正的突破，為品牌創造可持續的長期價值。
58同城此次中秋品牌營銷項目，正是技術理性與創意感性完美融合的例證。用AI實現高效精準的落地，用設計傳遞深刻的情感價值，最終成就了品牌聲量與業務增長的雙贏，也為行業提供了可復制的品效合一實踐范本。
轉載：人人都是產品經理
蘭亭妙微（藍藍設計）m.payeee.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
UI 設計中依舊有很多裝飾圖標要使用偏擬物的設計風格，雖然很多人以為可以通過 AI 來生成，但實際上真正符合頁面需要的設計很難通過 AI 來獲得，所以我們依舊要自己來繪制。
這類輕擬物圖標畫起來并不難，只需要掌握一定的規律以及幾個基本操作技巧即可。而最好的入門方式，就是從“畫圓”開始，就像學素描時最開始畫的圓形石膏，用它來認識光影的效果。
設計中對擬物效果的實現，就是對三個基本要素的塑造，形體、光影、材質。
形體就是物體本身的外輪廓和外形樣式，不同的風格和設計標準會對外形有不同的繪制要求，比如有的復雜寫實有的簡約隨意。除了外形復雜度外，還有個關鍵的知識點，即 —— 透視關系。
透視關系就是現實世界物體在人眼中成像的一種模式，離得越近的東西越大，越遠的東西就越小，也就是我們所說的近大遠小。用一個正方體來解釋，就是當它擺出不同角度時，那么側邊的面會朝遠端逐漸縮小。
如果不帶透視關系，那么它的不同面就沒有縮小的效果，上下邊平行處于等高的狀態。
設計師輸出圖形，就要正確的反映空間關系，加或不加都可以，但不能出現兩種混用的沖突，那就是沒想好要怎么表現。同時就是元素本身角度的控制會對下一步光影的應用產生巨大的影響，因為不同的角度就會形成不同的光影關系，而之所以素描最喜歡從圓開始練起，就是因為圓形 “只有一個” 角度。
第二個光影要素，就是物體在接受光照后呈現出來的高光反射與遮擋光源后形成的投影。如果只有一個圓，在接受一個光源的照射后就會形成下面這樣的光影關系。
也只有在光照的影響下，物體的表面才不會是純色的，也才能反應本身的弧度。所以每次繪制擬物圖形我們都要確定它的光源在哪，決定受光面和投影的方向。
最后一點則是材質，也就是物體表面使用哪種材料，這不僅會決定它使用哪種肌理紋路，也會決定它面對光影的效果。比如一個鏡面材質，表面就是光滑且高反光度的，而磨砂玻璃材質，則是弱反光且具有透明模糊的效果。
上面三個就是擬物圖標繪制最核心的知識點，也是最基礎的美術專業知識，雖然它們還有很多細節可以拓展和學習，但所幸我們今天設計的質感圖標不再是追求高度還原的擬物，而是經過簡化的 —— 輕擬物。
雖然那些知識不能被忽視，但因為我們要設計的東西也簡單，所以可以在一邊實踐中一邊學習，效果會更好。
接著我們就開始來畫圓，掌握擬物效果的實操方式，在這里我們演示用的軟件還是 Figma，只用到最基礎的矢量、填充、描邊、圖形效果等基礎功能。不管你用 Sketch 還是即時設計、Mastergo 都一樣。
第一步就是創建畫布后畫個圓，這個圓用 100-200px 大小就行，然后給圓填充一個基礎的顏色。
然后我們確定這個圓是鏡面材質的，光源是從正上方往下打。所以圓應該上方比下方顏色亮，且因為這是球體有弧度，所以添加的是 “徑向漸變”。通過這個漸變的添加為整個圓的色彩定調，確定明暗關系。
接著添加高光和投影，高光在頂部呈現不規則的橢圓狀，然后使用垂直透明度漸變向下逐漸消失。高光是種折射是會受到反射對象色彩影響的，所以高光也不可能是純白，而要使用和圓一樣色相的高明度色彩。
然后就是下方投影，這里一定要明白投影會反映空間的關系。如果使用默認圖層效果中的投影，它只能表現環境中的背景和我們的視線垂直，光源也是從視線這側來的。而我們現在希望塑造的是背景是在底部，且光源是從上打下來的，那么軟件自帶的投影模式就不適用。
軟件自帶投影的方向
我們希望創建的投影方向
想實現這個效果就要獨立繪制投影，最簡單的方式就是先畫個小點的深色投影輪廓，然后為它添加圖層模糊效果。
到這里圖形基本的狀態和光影效果都有了，但這看起來太粗糙了，想讓它更細膩更生動，就看我們怎么理解光影并為它添加更多細節進去了。
首先作為一個有顏色的玻璃球體，雖然會形成投影但也有光穿過它投射到背景上，那么這些穿過的光線就可以被表現出來，也就是底部要再疊加一層有色的投影。
同時因為光穿透到底部會再往回折射，所以球體底部實際上是會“積累”光線的，這不是明暗交界線，而是玻璃材質本身的一種特性，所以這個積累亮度的底部就要單獨畫出來，然后添加漸變和模糊效果。
而光在打到頂部時高光的形成是在表面之下（這個大家可以觀察玻璃珠），那么表層也有受光面，我們就可以再做個表面的橢圓模糊疊加到上方，讓它的高光面更自然。
最后，就是為圓添加一個描邊，這個描邊還有漸變色，來表現球體邊緣的厚度。而這個厚度在頂部是遠處不是受光位置所以較深，而底部在反光處所以有高亮。
完成上面的效果這個案例就做完了，要想做細節還可以再往下做。我們可以簡單在上面添加圖標，那么就是一個玻璃質感的按鈕。
做擬物類圖標的內核，就是你想表現什么樣的結果，要讓它的細節呈現到什么地步。復雜和極簡沒有對錯，關鍵的是你添加的每個細節都能有真實的物理特性去支撐，那么它們看起來才是合理的。
學習擬物就是認識美術的基本原理的過程，再學習不同細節呈現的軟件操作方式。
軟件是次要的，理解才是最重要的。
轉載自優設網
蘭亭妙微（藍藍設計）m.payeee.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
附 Figma 官方文案節選：無論多少次被宣告 “消亡”，設計始終生生不息。它藏在幫你避免坐過站的地鐵圖里，藏在一目了然的菜單里，也藏在貼心的 App 通知里。設計不是轉瞬即逝的潮流，也不是可被替代的技術，它關乎體驗、關乎感受，而非僅僅追求功能可用。設計屢遭唱衰，卻一次次證明自身不可替代。官方鏈接：https://x.com/figma/status/2061101954034442293
蘭亭妙微（藍藍設計）m.payeee.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
商品卡片是一個廣泛存在于電商產品中的組件，不管是狹義上的商品，還是廣義上的所有可交易產品 (包括課程、服務、游戲等虛擬商品)，都需要商品卡片來承載它們的關鍵信息，以方便用戶快速了解商品的核心屬性。
常見的商品卡片有兩種形式，也是電商 App 普遍使用的兩個視圖，即：網格視圖和列表視圖，卡片在這兩種視圖中有著不同的布局，其信息包含能力也有所差異。
1. 兩種布局
如 Part.1 種所說，商品卡片通常有兩種布局形式，分別是網格布局和列表布局。
①網格布局
網格布局可以使用瀑布流，圖片的尺寸相對來說會更單一一些，因為需要嚴格控制卡片的錯落程度，不至于過于雜亂。
當然，并不是只能做成瀑布流，完全對齊的網格布局也很常見，只需要嚴格限制圖片和字段的高度，且為有高度差異的字段 (一般是標題) 留出空間即可。
②列表布局
列表布局通常也會保持所有圖片尺寸一致，但文本區域需不需要與圖片等高，得看具體項目中商品需要露出的信息多寡，像京東這種信息非常多的，文本區域就可以超出圖片的高度范圍。而如果信息量中等，那么等高是一種比較好的選擇。
但如果信息比較少，強行把某一字段與圖片底對齊的做法會導致組件內的間距比組件間的更大，從而影響親密性識別。
這時候可以在兩個商品之間加分割線。
2. 卡片樣式
主要有三種樣式，我稱之為有全包、半包和開放式。
全包：有明確的卡片背景，將圖片和文本全部包括在內部，比較不常見。
半包：圖片部分會撐滿卡片的邊界，而文本依然在卡片內部，比較常見。值得注意的是如果卡片需要做圓角，圖片朝內的兩個角不需要給圓角。
開放式：沒有明確的卡片背景，圖+文本自成卡片區域，在設計上通常會讓文本兩側較之圖片稍微向內縮進一些距離，在讓親密性表現得更舒適。可以兩側縮進，也可以只縮進右側。
3.卡片內容
不同類型的商品、不同需求的產品所需要表達的信息是不同的，但總結來說有以下這幾類：
其中，圖片、標題和價格，這三個是最基礎的信息，幾乎每個商品卡片都必不或缺。其余的信息則并不一定每個都要包含在內，不同的 App 會根據自己的展示需求挑選其中幾類排布在卡片內。
信息展示的順序、和權重對比，都會根據實際情況略作調整。例如一些國外的電商 App，會把價格的權重做得比標題更大。而對于網格布局和列表布局，所展示的信息盡可能保持一致。但因為網格視圖不適合展示的過長，所以如果信息真的非常多，那么網格視圖可以適當省略。例如小米有品是一個典型的例子，網格視圖相比列表視圖只少了商品規格表，因為這個字段實在不適合放在網格視圖展示。
4. 不同的使用場景
之所以會把使用場景放在這里，是因為商品卡片的使用場景會影響它所展示的信息類型。舉個例子，淘寶首頁推薦內的商品卡片內所包含的信息，就比搜索出來的完整商品卡片少了一些。
這是因為推薦中的商品信息務求直擊要害，其導購需求遠遠強于展示需求，同時也考慮到推薦頁應同屏展示更多商品，所以會把其他可能會影響用戶獲取核心信息，且可能造成卡片過長的字段全部隱去了。
同理，商品卡片在購物車中的信息也不一樣，考慮到存在于購物車中的商品都是用戶已經了解過大部份信息的商品，所以設計時要抓住用戶在這種場景下最關注的內容——價格和規格，所以購物車中的卡片會多出一些價格變動、規格重選、數量修改等信息。
總之，商品的使用場景很大程度上會影響展示信息的選擇，最核心的要點是一定要考慮用戶在不用的場景下，最核心的信息訴求是什么，不同 App 對此可能有不同的做法，我在這里也無法一概而論。
5. 不一樣的商品卡片
①Asos/Massimo Dutti
國外的電商 App，尤其是品牌自己的 App，總是會做得非常極簡，一個標題一個價格一張圖片，幾乎做到了商品卡片最簡潔的狀態，這是品牌氣質決定的，也是產品定位決定的。所以國內走出海路線的 App 大多也會是這個風格，比如 Shein。
②馬蜂窩/飛豬
舉這兩個例子并不是因為兩者的組件設計得有多精妙，而是因為它們有著另一種不同的商品，以及所呈現出來的不同的組件——酒店。
我在這里想要說明的是，不同的商品類型可能也會有其特有的字段類型，尤其是服務型商品，不同的服務所呈現出來的組件會有很大不同。
這里收集了一些商品卡片的線上案例，也可以作為設計時的參考：
轉載自優設網
蘭亭妙微（藍藍設計）m.payeee.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
1. 初識B端產品和C端產品
C端 Consumer，表示為消費者、個人用戶或終端用戶設計，直接面向普通用戶提供服務來幫助他們實現個人需求。B端 Business，它面對商業和企業，是為幫助企業集團等實現商業目的而設計的軟件、工具或者平臺。
在我們日常生活中，在手機上使用的大多是 C 端產品，單一的 C 端產品通常是為了實現單一的需求。比如看網紅的抖音、聽音樂的酷狗、買車票的12306、社交的微信等，這些產品有自己的核心功能，其他的功能則是附加的，倘若沒有這些附加功能，雖然用戶體驗感會降低，但并不會影響產品的核心功能。
而面向 B 端的產品，我個人稱之為「暗渡陳倉」，當個人用戶為實現個人需求產生了一系列動作，往往伴隨著該需求的另一端也會反饋一系列動作，即 C 端產品的后臺產品線（BtoC），比如淘寶賣家平臺、餓了么商家版等。除此之外，還有面向商家、企業、業務部門提供的企業級服務產品，以及面對企業或者個人提供的平臺級工具產品等。
雖說我們日常使用的更多是 C 端產品，但是 B 端產品對我們的影響也是時時刻刻存在著。C 端產品在明，逐漸改變著現代人的生活方式，B 端產品在暗，間接服務于用戶，讓一切流程化秩序化，并且具有多個主要功能點。
2. B端和C端產品的區別
在我看來，C 端產品以消費互聯網為主，B 端產品以產業互聯網為主，C 端更感性，而B 端更理性。
從使用者的角度來說：
從開發的角度來說：
3. 后臺產品常見分類
后臺產品按其作用可大致分為兩類，一是支撐前臺產品，二是管理各種資源。我認為后臺產品應當是囊括在 B 端產品的范圍之內的，常見的類型包括：
1. 初識后臺產品設計
說起后臺產品，很容易想到復雜、龐大、邏輯縝密，而作為設計師，則苦于競品短缺、架構復雜，設計的前期工作比設計本身要復雜得多等問題。
后臺產品不同于普通用戶所使用的 APP，它在用戶初次使用和短暫時間內的認知成本是較高的。當用戶用慣了一個音樂類的 app，再給他幾個其他的音樂 APP，用戶是可以迅速上手并且輕易解決自己的需求的。而后臺產品則不然。
對于后臺產品來說，它并不是隨隨便便就可以下載使用的，即便你在使用的過程中，也因角色不同而受到權限限制，一般來講很難像超級管理員一樣接觸到整體功能；其次，門檻之高，后臺產品的使用者一般都是在該行業沉淀了很久，所以要對后臺產品進行設計就需要同樣了解該行業，甚至更能洞察該行業，業務本身的復雜性質決定了后臺產品架構也會比較龐大；然后，無論是工廠商家的進銷存管理，還是政府醫院的工作流和業務流，乃至企業內部的產品，除了不同行業都有門檻外，對信息和產品也有「保密協議」的使命感，所謂「隔行如隔山」，在后臺產品更是如此；最后，后臺產品設計往往沒有固定的功能架構和商業模式，對于產品經理的邏輯思維能力要求更高，設計師不僅僅是做界面、優化流程，也要主動和產品經理溝通交流，并對產品進行思考和探索。
2. 后臺UI設計工作流程
后臺 UI 設計的工作，大體分為三個部分：需求分析、設計執行、數據分析。
在需求分析階段，要對產品本身和行業本身有一些基本的認知。要了解產品的基本情況，比如產品目標、用戶人群、產品定位、需求分析、功能模塊、主要競品和產品特色。做這個產品是為了解決什么問題？想實現什么目標？使用這個系統的用戶有哪些？不同角色的用戶有哪些具體的權限？是否需要對每一個用戶的行為都生成操作日志？產品有哪些主要的功能模塊？產品的業務流程是怎樣的？有哪些同類型的產品？和他們相比我們的產品有什么特色和特點？成功地做出大而全的后臺產品，是整個設計團隊和開發團隊能力的體現，而對很多小團隊來說，只能做一些大團隊不愿去做的產品，或另辟蹊徑在某些方面做專做精。
在設計執行階段，參照 PM 給出的功能清單做原型和流程的梳理，需要關注的有當前版本規劃、功能模塊、功能類型、功能描述、任務優先級、完成時間等，交互原型則伴隨著功能描述、規則判定條件、觸發條件等內容。原型設計完成，開始做 UI 視覺方面的設計，而這時后端同步構思需求的實現方案。UI 設計師向前端了解實現框架，方便交接和溝通。當界面實現，UI 設計師應該是最早進行測試的，力求視覺設計和代碼實現無誤差。在完成設計執行后，從信息層級、文字、圖標、圖片等方面進行設計走查，進行多次設計驗證與測試。
數據分析是產品優化迭代的重要依據。進行多番測試和評審后交付客戶（或內部）使用，根據產生的具體問題進行不斷迭代，且觀察產品能否通過準確的數據反映問題、體現能力，應虛心接納使用者的使用建議并嚴謹思考其合理性，用戶的使用和反饋是優化產品的重要途徑。只有達到了管理和運營的指標，后臺產品才是真正產生了價值。
3. 制定設計規范的作用
為后臺產品制定設計規范有哪些作用和好處呢？簡單來說就是對產品好、對自己好、對團隊好、對客戶好。
以下數值為參考，請結合特定產品靈活運用。
統一尺寸
據統計，目前 PC 端用戶屏幕分辨率占比排名前三的是 1920*1080、1366*768、1440*900，以 1440 來設計的話，向上適配或者向下適配誤差會比較小。
適配方案：面向多個客戶，后臺產品設計功能型頁面的尺寸統一為 1440*900，按照柵格系統原則向上或向下適配。展示型頁面以 1440*900 為主，同時設計出極端情況（寬度為 1280 以及寬度為 1920）的效果圖，力求實現前端實現效果和高保真設計圖誤差最小。面向公司內部的后臺系統，由于各個職工電腦屏幕是統一采購、統一尺寸，所以開發適配的分辨率可以統一尺寸進行設計，這個尺寸根據公司內部采購屏幕的尺寸和分辨率選擇即可（提前和前端溝通好）。
頁面框架
頁面框架主要分為左右欄布局和上下欄布局，還有其他的布局。左右欄布局包括頂部欄、左側菜單欄、主體內容三大區域，其中頂部菜單欄、左側菜單欄為固定結構，右側主體內容根據分辨率進行動態縮放；上下欄布局包括頂部菜單欄和主體內容兩大區域，其中頂部菜單欄為固定結構，主體內容進行動態縮放且需定義主體內容左右兩邊空白區域最小值；左右欄布局時，左側菜單可收縮展開，收縮狀態下固定寬度。
柵格布局
柵格系統的使用是為了解決自適應和響應式問題，從而更好地進行產品設計和產品開發。響應式柵格采用 24 列柵格系統實現，以滿足 2，3，4，5，6 分比布局等多種情況。固定寬度 Column，將間隔 Gutter 進行動態縮放。
谷歌規定模塊和結構之間要以 8px 為基準，布局間相對間距可采用 8px 以及 8 的倍數，但一些小組件（按鈕、間隔、輸入框）可以以 4 為基準。柵格布局是為了輔助設計，靈活運用，不要被它所局限。
尺寸設定
一般在整體區域左上角放置產品 LOGO 及產品名稱，大部分系統頂部欄高度 48+8n，側邊欄寬度 200+8n。我常用的是頂部欄高度 56px，側邊欄寬度 200px，側邊欄收縮狀態寬度 56px，右側的側浮窗寬度 400px。
相對間隔
定義主體內容的上下左右邊距，定義主體區域內各模塊的邊距及安全寬度，超出內容區域的部分采用區域內滾動或整屏滾動，視情況固定導航欄。
顏色分為品牌色、輔助色、中性色。根據不同產品的不同需求，可能也會將統計圖、標簽等進行統一標準色設定。
品牌色即產品主色，產品主色的設定直接影響產品氣質和直觀感受，也是產品直接對外的形象。品牌色要根據產品特性、用戶使用場景、產品定位等進行選取，盡量做好色彩的延伸性，可支持換膚。品牌色的應用場景包括操作狀態、按鈕色、可操作圖標等。
輔助色用于提示其他場景，比如成功、失敗、警告、無效等。
中性色常用于文本、背景、邊框、分割線等，需要考慮深色背景和淺色背景的差異，可以選擇同一色相控制透明度變化，用來表現不同的層級結構。
其他色如統計圖、數據可視化、多個標簽的不同配色方案根據項目情況單獨設定。
后臺系統常用的字體：windows 系統，中文 Microsoft YaHei，英文 Arial；Mac 字體，中文 PingFang SC，英文 Helvetica；除此之外可以選擇的字體還有 segoe UI、思源黑體、Hiragino Sans GB等。
后臺系統中常用字體大小為 12px、13px、14px、16px、18px、20px、24px、30px。
行高設定，根據文字大小及使用場景設置行高，一般行高=文字大小+6px/8px。
圖標是 UI 設計中重要組成部分，一般分為功能圖標和應用圖標，以圖形的方式傳達概念，可以降低理解成本，使得界面更加協調美觀。在后臺產品中，圖標的功能則更偏向輔助性，輔助用戶對功能的認識。
除了某些常用的圖標，有一些專業性的操作和詞匯則需要設計師進行繪制，現在比較高效方便的方法是在 iconfont 提供的圖標模板上用 AI 繪制，畫板 1024*1024，提供圓形、正方形、矩形形狀。圖標尺寸按照 8 的倍數進行延展，繪制完成后生成 svg 格式文件，提交到阿里巴巴矢量圖標庫的項目組里，方便前端調用，調整大小和顏色更為方便，且能夠優化系統內存和性能。
按鈕是后臺產品進行交互設計是重要元素，提供給用戶進行點擊操作，是視覺上最引人注目的控件，具有一定的視覺受范性。常用按鈕可分為填充按鈕、線性按鈕、文字按鈕。
按鈕的交互狀態包括默認、懸停、點擊和不可用。
按鈕根據需求分為不同尺寸，大中小三個級別用在不同的場景，一般按照 8 的倍數設定。如高度分別設定為 24、32、40px。
規范整理時要規定不同類型按鈕的寬高、圓角及文字大小，同時還要將按鈕的不同狀態展現出來。
填充按鈕之間間距最小為 10px。
導航的類型有很多種，常用的比如頂欄菜單、側欄菜單、折疊菜單、下拉菜單、面包屑、分頁、步驟條、時間軸、tab標簽頁、膠囊菜單、徽標數等。
各類導航中的字體大小可進行統一設定。
頂欄菜單多為一級菜單，點擊切換，或作為下拉菜單的父級，將子級菜單合理分類。
側欄菜單為垂直導航菜單，可以內嵌子菜單。
下拉菜單的觸發方式一般有鼠標懸停和鼠標點擊兩種。
步驟條引導用戶按照流程來完成任務，一般步驟不得少于兩步。
分頁的高度設定為 24px、30px、32px，根據應用場景適當增減內容，比如設定每頁展示數據的條數、跳轉至指定頁等。
面包屑用于說明層級結構，使用戶明確當前所在位置，并且可以回到任一上級頁面。
徽標數用來通知用戶當前有未讀消息，一般出現在圖標的右上角或者跟在文字后面。
表單多由一條或多條列表項組成，單一列表項的類型有字段輸入框、條件選擇器。
字段輸入框的標題和輸入框分布方式包括左右、上下、無標題。左右分布是常見的對齊方式，比較適合 PC 端的使用；上下分布增加了表單的整體高度，視情況選擇使用；無標題經常應用在登錄注冊，雖然減少了面積，但是增加了理解難度。
輸入框的交互狀態包括默認、輸入結果、提示錯誤、禁用、獲取焦點。
輸入框的尺寸可按照8的倍數進行設定，比如 24px、32px，也可根據系統實際情況進行設定，我常用的輸入框高度為 30px，寬度視情況而定，無圓角。上下布局的多個輸入框上下間距為 20px，有錯誤提示時候豎向增加 10px 或橫向顯示在輸入框右側（預留出位置）。
表單中標題文字左對齊，輸入框左對齊，標題文字距離輸入框20px（多個長度不同的輸入框算最長的）；標題文字右對齊，輸入框左對齊，也是常用的方式。輸入框內正文字體 14px，文字和左右兩邊邊框的邊距 10px。
選擇器包括單選、多選、時間選擇、開關切換、下拉選擇、滑塊選擇、旋鈕等。單選框多為圓形，復選框多為方形。
搜索框和選擇框的高度為 30px 或按照 8 的倍數自行設定，通常和輸入框保持一致。搜索框距離右側按鈕 4px，內部文字 14px。
單選多選框尺寸 16*16px，多個選項橫向排列間距 16px，縱向排列間距 8px。
開關按鈕外框 40*20px，內部圓形 16*16px。
表格在后臺產品 UI 設計中占比非常大，用來展示數據、統一管理、作為詳情入口，是最清晰、高效的形式之一。在設計規范中需設定表頭高度、表格行高、表格列寬范圍，同時也包括表格中的按鈕樣式、標簽樣式。
表格主要分為五大區域：選擇搜索區、操作區、表頭、正文、底欄。選擇搜索區放置篩選框和搜索框，為用戶提供按需搜索，可以大大提高用戶效率；操作區指各種對表格內容進行增刪改查、批量處理、配置列的動作；表頭展示列標題，一般具有排序功能；正文主要展示各種各樣的數據，要注意行高、對齊、分割、信息層級等，要考慮是否提供行內操作；底欄顯示分頁、總數統計等。
表格信息一般主要功能為增刪改查，查看和編輯是最基本的功能，表格信息支持篩選、搜索、排序、分頁。對可批量操作的表格數據在第一列增加多選框。
行高
表格行高可設置為表格內字體高度的 2~3 倍，主表格會間隔顯示不同顏色，用于區分不同行數據、加強視覺流引導，展開單行的內置表格可采用純色，選中行應有視覺上的反饋。表頭要和表格內容有視覺上的區分。表格行高可采用 36、40、48、60 等。
行數
表格行數太多加載速度會降低，延長用戶等待時間；行數太少會導致用戶不斷翻頁，降低使用效率。比較合適的默認表格行數是 20 或 50，用戶可以根據自己需求選擇默認的行數。設定行數之后，如果每頁行數多于每屏行數，可在表格內引入滾動條，這時可以固定表頭滾動內容。
列寬
列寬根據內容字段長短需要有不同且合理的默認值，使得表格字段有良好的展示效果。列內容的長度固定時，列寬應大于固定寬度（比如時間、MD5、SHA1）；列內容不固定時，能預判最大寬度的按照最大寬度設定列寬（比如IP地址、MAC地址、姓名），不能預判最大寬度的設定列寬按照常用寬度，多于內容省略以「...」展示，鼠標懸停出現完整內容（比如詳情、描述）。
列數
表格列不應過多，列數比較多的情況下應該合理進行合并、隱藏、刪除或進行優先級處理。常用的方法有引入配置列，用戶可自定義展示必需列以外的其他列；只展示重要信息，下拉展開列查看完整信息；在表格中引入橫向滾動條，根據實際情況選擇是否要始終固定基本信息列（如第一列是文件名）和操作列（最后一列的操作）。
對齊方式
表格內的文本應按照文本類型不同進行統一規范，如金額類數值保留相同位數小數，SHA1 雖然是一串數字但是其實那并不是數據而是一串編碼，所以可以像文本一樣左對齊。根據文本內容不同，對齊方式也應靈活調整，可采用文本左對齊、數據右對齊、金額小數點對齊的方式。數據前面有標簽的，將標簽前置對齊。類似 IP 地址、MD5、SHA1、域名這樣的信息，也可以根據產品需要在文本前面增加「復制」圖標，方便用戶調用。
詳情入口
表格內部數據的詳情入口，將能點擊下鉆查看詳情的內容以不同顏色表示，同時在表格行最后一列操作按鈕部分放置一個查看按鈕。
包括彈框、側滑框、骨架屏、全局提示、警告提示、消息提醒、加載狀態等。分為模態框和非模態框，區別是是否會打斷用戶工作流。
彈框又稱對話框，是疊加在應用主窗口上的彈出式窗口，以對話的方式使用戶參與進來。
彈框
彈框出現時，主題內容增加一層遮罩 #000，透明度 50%，避免使用雙層彈框，可同時采用有關閉圖標的彈框和無關閉圖標的彈框，引導用戶對內容進行正確操作。如果設定系統內所有彈框均可以點擊彈框外區域關閉， 則需要為用戶新增或編輯內容的彈框彈出二級確認的彈框，或者再次進行交互梳理。
側滑框
側滑框又稱抽屜，出現在右側，固定寬度 400px，高度覆蓋在主題內容之上，點擊側滑框以外的區域則收起側滑框。
骨架屏
為某些特定數據提供數據加載等待時的占位圖形組合。
全局提示
建議停留時間 3s，可根據文字字數調整停留時間，文字內容限制在 30 以內。
警告提示
用不同顏色和樣式展示需要關注的信息。
通知提醒
消息通知和警告信息用通知提醒框，單個消息從頁面右側以抽屜的方式劃出，用戶可手動關閉，或停留 3s 后自動關閉。
繪制不同類型的情感化插畫表示缺省狀態，如404、500、暫時沒有數據、沒有新消息等。
頁面需要一個默認的底色，錯誤文字使用 14px，與情感化插畫間距 20px，與按鈕間距 30px。
數據可視化部分可能是后臺產品中對視覺設計要求較高的部分，使用情境為各類統計圖、大屏展示頁面等。
功能型頁面的數據可視化可以引入圖形化設計組件，Echarts、G2、d3等；展示型頁面的數據可視化則可以做得更有趣，比如立體的統計圖、粒子地球效果、靈活有趣的網絡拓撲圖等。
考慮到數據可視化可能會需要深色淺色不同的背景，在數據可視化統計圖的色彩搭配上要注意顏色的拓展性。
不管是做 C 端產品還是 B 端產品，都是為了實現用戶的需求、幫用戶解決問題。
剛接觸后臺產品的時候，最希望能把產品做的炫酷、美觀，工作中慢慢地發現項目的背后思考更為重要，產出的設計成果也應該有理有據、支撐整個設計體系。網上供大家使用和學習的資源非常多，對一些公司來說、專門去制定一套自己的后臺設計規范不免顯得費時費力，合理引入 antdesign 和 element 等開源的設計組件，會使得設計師以及前端事半功倍，有助于設計師把更多的精力投入到沉淀行業知識、研究產品架構、梳理交互方式和創新視覺表現上。
在后臺產品的設計過程中，更應該把寶貴的時間用在更值得關注的事物上，讓設計師能夠輔助業務挖掘，從趨于相同的表象中找到產品獨有的閃光點，從而切實解決問題和實現價值。
蘭亭妙微（藍藍設計）m.payeee.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
分別站在整個產品設計研發流程中各個角色的不同角度，在工作中可能會有以下“抱怨時刻”：
由此，體現出搭建設計規范的作用和意義：
搭建設計規范的意義
產品側：?個產品不同分支多個團隊完成的時候，可以保證產品團隊使用同一份設計規范快速完成產品原型設計。保證可復用模塊的交互體驗的?致性。
設計側：通過設計規范去解決大部分需求，極大提高效率解放雙手，讓設計師能去做一些更發揮創意和想象力的設計。
開發側：形成開發資產，可以提升研發效率，降低維護成本。開發工程師無需再重復開發同?個組件，只需要去組件庫里調用即可，配合業務邏輯，高效完成界面開發，做到開箱即用。
測試側：標準化的設計規范，是測試人員最喜歡看到的。例如，設計規范規定彈窗 footer 區按鈕組居右，那么測試人員只要測到不居右，就可以給產品提優化建議了。
設計規范中具像化的環節是設計組件化，最早可以追溯到工業革命時期，福特創造的流水線生產方式。福特將汽車分解成零部件，再把零部件模塊化組裝，這?創舉極大的提高了生產效率。
根據資料顯示，T型車是世界第一款大量使用通用零部件，并進行大規模流水線裝配的汽車。這種方式極大地提高了T型車生產效率，降低了生產成本。1914年，福特已經可以做到93分鐘生產一輛汽車，而同期其他所有汽車廠商的生產能力總和也不及于此。到了1920年代，T型車的價格甚至降到300美元一輛（問世之初T型車的售價僅需850美元，而同期的競爭對手則通常為2000-3000美元一輛）。
原子設計理論最初來源于化學領域，這一點從名字可以聽出來。在化學中，所有的物體都是由原子構成，原子組合構成分子，分子組合構成有機物，最終形成了宇宙萬物。
2013年前端工程師BradForst將此理論運用在界面設計中，形成一套設計系統，包含5個層面：原子、分子、組織、模板、頁面。
當公司的業務產品逐漸擴大時，我們就需要制定一套完整的設計系統，提升設計和開發的協作效率，統一所有設計師的輸出物。
總之，將設計拆分成一些基本元素，例如一個按鈕、一個彈窗，再根據業務需求、產品邏輯重新組裝，形成最終的產品，這就是原子設計理論（組件化設計），區別于整體設計制造的一種新的工作流程。
1. 設計系統搭建—原子
原子是物質的基礎組成部分，是構成設計系統的最基礎元素。
在界面中以「元素」的形式存在，例如：顏色、文字、圖標、分割線、間距、圓角、陰影等。
2. 色彩體系
中后臺產品的色彩體系主要分為3類：品牌色、功能色、中性色。
色彩體系
3. 文字體系
B端產品的文字系統設計目標：增強閱讀體驗、提升信息獲取效率，字體是體系化界面設計中最基本的構成之一。
字體的大小、字重、色彩區分體現界面信息的層級關系。
文字體系
4. 陰影、圓角、線條
陰影：在B端界面中，有些特殊的元素會使用到陰影，從陰影中我們可以看出物體距離平面的高度，距離平面越高的物體陰影越大；
圓角：從直角到圓角給人帶來從嚴謹冰冷到柔和親切的心理感受，在B端界面中，常用2-8px圓角；
線條：分割模塊及輔助定位。
5. 后臺設計系統搭建—分子
在界面中，分子是按照規律組合起來的元素，如：按鈕、搜索框、選擇器等。
以按鈕為例，文字、色塊、圖標和間距這些抽象的原子產生關聯組合成分子：圖標、文字傳達含義；顏色、圓角傳遞特性；間距、尺寸定義規范。
6. 后臺設計系統搭建—組織
分子+原子組合成更復雜和可拓展的組織（區塊組件），如搜索區、卡片列表區、表單區、數據統計區等。
7. 后臺設計系統搭建—模板
由原子+分子+組織構成的更復雜更專注頁面底層架構，并非具體頁面。
8. 后臺設計系統搭建—頁面
帶業務邏輯的場景案例，如標注場景、權限管理、詳情設置等，將頁面模板填充真實的文字、圖片后形成頁面，即帶交互邏輯的高保真原型圖，真實內容使設計系統有了“生命”。
雖然通過設計規范可以對產研流程提效，但在開發還原中還是會經常遇到一些棘手的問題。
為了解決和優化上述的問題，DesignToken應運而生。它可以解決產品設計和開發過程中的細節、變更和風格一致性的問題，有效提高產研團隊設計質量和協作效率。
1. Design Token 介紹
“Token”原本的意思是“令牌，指令”，與Design連在一起指“設計變量”。在工程邏輯中用于用戶身份與服務器端進行驗證，而在設計體系中，DesignToken則可以簡單理解為封裝的視覺樣式參數。它通過規定樣式參數，并通過一套符合設計師、工程師理解的統一的命名規則，為這些樣式參數的定義名稱。
2. Design Token 優勢
① 設計語義更易理解
幫助設計師和開發建立統一語言，設計方案更加一致。
從下到上的Design Token 命名思路
②主題皮膚一鍵替換
主題皮膚的替換可以用在兩個維度，一是淺色模式和暗色模式的替換，二是不同品牌色之間的替換。我們可以將不同主題的同一個場景下的顏色使用同一個Token命名，達到一鍵換膚的效果適配不同客戶方案。
③設計變更高效維護
替代傳統工作流一鍵替換效果。例如修改二級文本的顏色，傳統工作流需要先修改設計規范，修改設計稿，然后輸出給開發，開發逐一更新代碼，完成后提交給設計師進行走查驗收。而當使用Token之后，只需要更新Token參數，就可以直接導出JSON給開發，一鍵自動更新。提高效率不止一點點。
④設計效果精準還原
代碼編輯器自動化提示顏色選擇，如不正確則產生報錯。
使用Token開發和傳統開發的對比
總結一下使用 Token 開發的優勢：
3. Design Token 應用流程
第一步：提煉 token 元素；第二步：定義命名規則；第三步：整理 Design Token 資產表；第四步：開發與應用。
Design Token 應用實踐
接下來具體說說如何為 Design Token 命名，命名方式目前并沒有絕對統一的要求，不過有一定的邏輯規則，可以由設計師找前端開發一起商量出一個都能通俗易懂便于理解的命名規則，舉個例子：
命名規則示意
為了更好的統一規范，應用 Token，建議成熟的互聯網公司設計團隊搭建自己的低代碼平臺。一鍵更換主題，盡在指尖。
轉載自優設網
蘭亭妙微（藍藍設計）m.payeee.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
jankspace精準概括這類痛點：產品對外宣傳全鏈路無縫自動化，實際使用卻要在賬號、支付、文件、權限間反復跳轉，消耗用戶耐心卻毫無體驗增益，屬于設計失誤帶來的無效負擔。消費心理學宜家效應佐證：用戶親手投入步驟完成事物后，會自發抬高產品價值；動手參與的沉沒成本，最終轉化為情感與記憶沉淀。
| 摩擦分類 | 用戶體感 | 典型場景 | 設計決策 |
|---|---|---|---|
| 壞摩擦 | 被迫填坑、煩躁流失 | 重復登錄、錯亂跳轉、無效排隊 | 全盤刪除優化 |
| 交易必要摩擦 | 安全感確認 | 支付二次核驗、隱私授權 | 精簡話術、保留必要步驟 |
| 儀式型好摩擦 | 沉浸場景、充滿期待 | 開箱、線下試穿、集章打卡 | 結構化設計，配套情緒回報 |
| 記憶型好摩擦 | 愿意投入時間、加深印象 | 長內容觀看、線下展覽動線、手作 DIY | 設計體驗峰值 |
蘭亭妙微（藍藍設計）m.payeee.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
北京蘭亭妙微 UI 設計公司，成立 16 年來，始終保持著對國內外優秀設計作品的學習與研究。我們持續追蹤全球前沿的 UI/UX 設計趨勢，從中提煉可落地的設計方法論，分享給同樣熱愛設計的你。今天分享分析一套名為「APEX」的航天發射與回收控制臺 UI 設計系統——它可能是近年來暗黑系數據大屏領域最完整的作品之一。
────────────────────────────────────────
上圖是Logo Construction 頁面，包含幾何圖形構建過程、Key Values 清單、Clear Space 規范、On-Board Panel 金屬銘牌效果圖、ID Card 工牌效果圖。
這套設計的起點不是界面本身，而是一個完整的品牌識別體系。Logo 采用幾何化的"M/N"折線圖形，通過嚴格的網格系統和角度標注（A1 60°、A2 60°）完成構建。這種做法傳遞出一個信號：這不是"畫出來的"，而是"工程推導出來"的。
三個值得注意的品牌細節：
• Key Values 清單將 Corner Radius、Stack Ratio、Grid Multiple 等參數量化到小數點后兩位——這種"偽工程規范"的呈現方式，本身就是一種視覺敘事手段，讓品牌看起來像真實的軍工項目
• On-Board Panel 金屬銘牌效果圖：把 Logo 做成金屬蝕刻效果，配合 S/N 序列號和規格參數（AL-142 SPEC: AMS 4027），完成了從數字設計到物理實體的視覺跨越
• ID Card 工牌：Operator / Alex Chen / Launch Director / EXP 12/2026，用真實工牌的格式強化了整個項目的沉浸感
設計啟示：B 端/工業級 UI 項目，如果能在界面之外補充品牌載體（銘牌、工牌、實體 Mockup），說服力會呈指數級增長。
────────────────────────────────────────
上圖是The Brief 文檔頁 + WHAT BROKE ON B-04 事故報告頁。
這套作品最獨特的地方在于：它不只是"好看的界面"，而是有故事背景的完整設計系統。
The Brief 頁面采用類似軍方密件的紅頭文件格式——FROM / TO / DATE / SUBJECT / PRIORITY 的元信息欄，正文用襯線體排版，引用語"We launch the booster every twenty-three days. We recover it every twenty-three days"營造出強烈的任務氛圍。
B-04 事故報告頁則展示了另一種信息架構能力：
• Mission Timeline：一條時間軸貫穿從 PRE-IGNITION 到 RECOVERY COMPLETE 的全過程，關鍵節點（T+04:57 TELEMETRY GAP · 30s）用黃色高亮 + 虛線框標注異常區間——這是非常成熟的事件標注模式
• Operator Stress Map：三張并排的折線圖分別展示 Launch Director / Telemetry Officer / Recovery Captain 的注意力負荷曲線，黃色漸變填充區域直觀標示高壓時段
• Operator Testimonials：底部三張引言卡片用雙引號圖標 + 小字署名，把冷冰冰的數據還原為人的體驗——"We were guessing for thirty-eight seconds"
這種"數據 + 人文敘事"的組合，是高端 B 端設計區別于普通儀表盤的關鍵差異點。
────────────────────────────────────────
上圖是One surface. Four operators. Nine minutes. 概念標題頁。
"One surface. Four operators. Nine minutes."
這句話只有六個英文單詞，但它完成了三件事：
• 定義了交互范式（One surface = 統一操作界面）
• 定義了用戶角色（Four operators = 四個操作崗位）
• 定義了時間約束（Nine minutes = 任務窗口）
下方四張線稿風格的人物側臉插圖（Launch Director / Telemetry Officer / Recovery Captain / Engineer），用極簡的輪廓線勾勒出角色身份，每個頭像下方標注崗位名稱。這種處理方式在視覺上極度克制，卻信息量充足。
設計啟示：任何復雜系統的 UI 設計，都應該有一個"一句話概括"的概念頁。它不僅是封面，更是整個設計系統的"憲法"——后續所有界面的設計決策都要能回溯到這句話。
────────────────────────────────────────
上圖是主控面板總覽 + Launch Director 主界面。
這是整套設計的核心界面。T-MINUS HOLD 00:10:42.88 以巨大的等寬字體占據左半屏視覺重心，周圍是大量留白——和之前分析的車輛儀表盤使用的是同一策略：讓數字自己說話。
但這套設計在此基礎上做了更極致的延伸：
① System Readiness 點陣網格 右側用一個 8×8 的方格矩陣表示系統狀態，每個子系統（Avionics / Propulsion / Range / Payload 等）對應一個格子。綠色 = GO，橙色 = HOLD，紅色 = NO-GO。這種"一目了然"的狀態表達方式比文字列表高效得多——用戶可以在 1 秒內掃完所有子系統健康狀態。
② Auto-Sequence Path 自動序列路徑 左側豎向排列的任務清單（Sensor Calibration → RF Uplink Established → Range Clearance...），每個任務前用三角形圖標表示狀態：綠色 ▲ = 已完成，橙色 ? = 等待中，灰色 = 未開始。這是一種非常清晰的線性進度可視化方式。
③ 火箭線稿插畫 右側大面積區域放置火箭透明線稿圖（Wireframe），內部用綠色漸變填充表示液氧（LOX）儲量——84.2%。這種"技術藍圖 × 實時數據"的組合，既提供了設備形態參照，又嵌入了關鍵運行參數。
④ Secure Audio Channel 音頻通道波形圖 右上角的小型音頻波形條（AES-256 ACTIVE），暗示這是一個實時通訊環境。這類"微細節"的存在感雖然弱，但對營造專業氛圍至關重要。
────────────────────────────────────────
上圖是Stage 1 LOX 詳情 + 引擎集群溫度監控。
上圖是Launch Director 與 Telemetry Officer 并排對比。
上圖是Recovery Captain 與 Engineer 并排對比。
這套設計最令人印象深刻的架構決策是：為四個不同角色設計了完全不同的數據視圖，且每個視圖的信息密度和數據類型都精確匹配該角色的職責：
|
角色 |
核心關注 |
主色調 |
關鍵組件 |
|
Launch Director |
全局狀態 + 倒計時 |
綠色 |
Readiness 網格、Auto-Sequence |
|
Telemetry Officer |
實時遙測數據 |
紅色 |
波形圖、雷達掃描、引擎剖面 |
|
Recovery Captain |
回收海域 + 著陸區 |
綠色+紅 |
雷達圓環、海況熱力圖、甲板平面圖 |
|
Engineer |
子系統參數 |
綠色 |
Readiness 網格、診斷圖表、引擎溫度 |
Stage 1 LOX 詳情卡片的設計尤其出色：
• 84.2% 用超大的綠色等寬字體顯示
• 右側是一個透明的圓柱形容器 3D 渲染圖，內部綠色液體高度與百分比對應——數據可視化與三維插畫的完美融合
• 下方列出 TEMP（-183.4°C）和 PRESSURE（4.2 BAR），字體大小層級清晰
• 引擎集群部分用九宮格排布九個引擎噴口，每個噴口上方標注編號，其中 #07 用橙色高亮標記異常溫度（1120°C），#03 和 #09 顯示正常溫度
Engine Cluster 溫度條形圖：底部一根橫向的溫度分布條，從綠（420°C）過渡到黃再到紅（1480°C），ENG-07 區域明顯偏黃/橙——一眼就能定位哪個引擎出了問題。
────────────────────────────────────────
上圖是TOPOLOGY 拓撲圖。"Four roles. Two locations. One protocol."
這張拓撲圖回答了一個核心問題：四個操作員之間是什么關系？數據怎么流動？
畫面布局清晰地展示了信息鏈路：
• Ground Station（地面站衛星天線）→ 通過 Fiber Backbone 連接到 Mission Control（任務控制中心）
• Mission Control 內部有兩個席位：Launch Director + Telemetry Officer
• Mission Control 通過 Orbital Uplink 連接到 Satellite GEO-04
• 同時通過 Manual Override/Fallback 鏈路連接到 DroneShip "North Star"（海上回收船）
• DroneShip 上有另外兩個席位：Recovery Captain + Engineer
• 還有一個獨立的 Meteorological Mesh / Atlantic 氣象數據源
每條連線都用虛線 + 不同顏色區分（綠色 = 正常鏈路，黃色 = 備用鏈路，紅色 = 應急鏈路），并標注了延遲時間（Fiber 1.2 Gbps / Orbital 38 ms / Descent Targeting 12 ms）。
設計啟示：復雜系統的 UI 設計，如果缺少一張"上帝視角"的拓撲圖，用戶就很難建立對整體架構的心智模型。這張拓撲圖就是整個系統的"地圖"。
────────────────────────────────────────
上圖是軌道飛行視圖 + Ascent 階段視圖。
這是整套設計中最具視覺沖擊力的頁面之一：
上半部分：地球邊緣的太空視角，可以看到城市燈光分布在大陸上，一枚白色箭頭軌跡線從地表射入太空，旁邊標注 8.42 MACH 和 112.4 KM —— 當前速度和高度。右上角的狀態標簽顯示 MAX-Q CLEARED（已通過最大動壓點）。
下半部分分為多個數據模塊：
• Aerodynamic G-Force：左側的 G 力曲線圖，紅色斜紋填充區域標示危險范圍，白線表示當前值（// critical load 6.22G //）
• Aerodynamic Heating：六邊形蜂窩熱力圖，中心亮紅色表示最高溫區（Peak Nose Core Temp: 1,940°C）
• Flight Event // WECO：事件列表，[ STAGE 1 CUTOFF CONFIRMED ] 用綠色標注已完成事件
• Trajectory Attitude：右側小型地球儀顯示當前姿態角（Pitch: 48.1°, Roll: 0.8°）
特別值得一提的是下圖的變體版本——部分區域被黃色/黑色斜紋遮罩覆蓋，模擬軍事系統中常見的"機密信息遮蓋"效果。這種細節處理極大地增強了真實感。
────────────────────────────────────────
上圖是真實控制室環境中的大屏渲染。
這張圖把 UI 從"屏幕截圖"提升到了"空間體驗"層面：
• 整個控制室籠罩在紅色應急燈光下，營造出緊張的事故處置氛圍
• 中央大屏顯示的是 Telemetry Officer 的雷達界面（紅色主題）
• 大屏前方坐著幾位操作員的剪影背影，他們面前還有各自的工作站屏幕
• 右上角的數字時鐘顯示 3:20，暗示這是某個關鍵時刻的時間戳
為什么這張圖重要？
大多數 UI 設計只停留在 Figma/Sketch 的畫布上。但這套設計考慮了物理環境中的呈現效果——紅色環境光如何影響界面的可讀性？大尺寸投影下的字號是否足夠？多人協作時的視線方向是否合理？這些"超出像素"的問題才是決定實際落地質量的關鍵。
────────────────────────────────────────
上圖是Aborted/Ordnance 中止/引爆界面。
當系統進入中止/緊急模式時，界面發生了顯著變化：
• 主色調從綠色切換為紅色：正常態的綠色元素全部變為紅色或橙紅色
• 圓形雷達視圖中央顯示 KSC LAUNCH-PAD 39A，外圍有多層同心圓環（綠色→黃色→紅色）代表不同的安全區域邊界
• Exclusion Zone [ EXCLUSION ZONE ] 標簽用紅色菱形圖標標記禁區
• 左上角顯示 ABORT 狀態標識，左側邊欄也變為紅色調
• 底部的 Flight Termination System 面板顯示 [ ORDNANCE ARMED ] 狀態，KEY_ALPHA / CMD 顯示 [AUTHORIZED] 或 [PENDING]
這種基于狀態的色彩系統反轉，是高風險行業 UI 的標準做法——用戶不需要閱讀文字，僅憑顏色就能判斷當前處于"正常"還是"緊急"狀態。
────────────────────────────────────────
上圖是DroneShip 回收船甲板監控界面。
Recovery Captain 的主界面展示了海上回收階段的全貌：
• 頂部狀態欄：Vessel 名稱 "A SHORTFALL OF GRAVITAS"、Droneship Connectivity [STABLE]、Signal Latency 24 MS
• Sea State & Wind：左上角海況熱力圖，Speed 14 KTS，Sea State 3 (MODERATE)
• 甲板俯視平面圖：中央大型區域顯示無人機船甲板布局，三層同心圓環（SAFE ZONE / RISK ZONE / ABORT ZONE），目標落點用綠色菱形標記
• 底部四模塊：
• Grid Fins：四個舵面角度滑塊（+02° ~ +05°）
• Deck Impact & Legs：著陸沖擊熱力圖 + 四條著陸腿狀態（LANDING LEGS: DEPLOYING...）
• Action Zone：機械臂抓取裝置的線稿圖 + [ DECK SECURE ] 按鈕
黃色/黑色警示條紋的使用也是一大亮點——多處區域用斜紋條紋表示"受限/加密/不可用"，既是功能表達也是一種視覺節奏的調節手段。
────────────────────────────────────────
上圖是Module 03/04 和 Module 05/06 子系統詳情。
最后兩張圖展示了子系統的精細化設計：
Module 03 — VECTOR THRUSTERS（矢量推進器）：
• 四個推進器的 3D 線稿圖，每個箭頭標注推力方向
• 推力數值直接標注在推進器旁：42% / 38% / 89% / 34%
• 底部狀態欄：DP MODE: STATION KEEPING [ ACTIVE ]
Module 04 — ALTITUDE TELEMETRY（高度遙測）：
• 一條下降曲線圖，橫軸為 TIME TO IMPACT（撞擊倒計時），縱軸為 ALTITUDE
• 下方兩個超大數字：ALT: 1,240m / SINK RATE: 42 m/s
Module 05 — G-FORCE TELEMETRY：
• G 力曲線圖，紅色區域標示危險范圍
• 注釋文本：// critical load 6.22G //
Module 06 — STAGE SEPARATION & MECO：
• 事件確認列表 + 多組進度條（Stage 1 Return Trajectory / Grid Thrusters / Retro-Burn 等）
• 右側火箭剖面圖標注各部件狀態（Pneumatic Clamps: RELEASED）
這些模塊化的設計使得整個系統具有極強的可擴展性——新增一個子系統只需增加一個 Module 卡片，而不需要重構整個界面。
────────────────────────────────────────
這套 APEX 發射控制系統 UI 給我們留下了以下可直接應用的設計原則：
1. 從品牌到界面的全鏈條設計：Logo → 工牌 → 銘牌 → 界面 → 物理環境，每一個觸點都在講故事
2. 概念先行，一句話定義系統："One surface. Four operators. Nine minutes." 讓所有設計決策有據可依
3. 角色驅動的差異化界面：不同崗位看到不同數據，信息密度精確匹配職責需求
4. 狀態即顏色，顏色即語義：綠色=正常/GO，黃色=警告/HOLD，紅色=緊急/NO-GO/ABORT
5. 點陣網格替代狀態列表：System Readiness 的方格矩陣比文字列表快 5 倍完成認知
6. 線稿插畫承載工程美感：透明線稿 × 數據填充，比寫實渲染更有"控制室"的專業感
7. 拓撲圖是復雜系統的必需品：沒有"地圖"，用戶就無法建立全局心智模型
8. 考慮物理環境的影響：屏幕上的好看 ≠ 控制室里好用，環境光、觀看距離、多人協作都是設計變量
────────────────────────────────────────
蘭亭妙微（藍藍設計）m.payeee.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
北京蘭亭妙微 UI 設計公司，成立 16 年來，始終保持著對國內外優秀設計作品的學習與研究。我們持續追蹤全球前沿的 UI/UX 設計趨勢，從中提煉可落地的設計方法論，分享給同樣熱愛設計的你。今天，我們來深度拆解一套車輛安全數據分析儀表盤的 UI 設計，從信息架構、配色策略、移動端適配到數據敘事的視覺表達，逐一解析其背后的設計決策。
────────────────────────────────────────
手機端 iPhone Mockup 中的 AI 智能洞察彈窗卡片，白色卡片浮層覆蓋在主界面之上。
手機端的這張 Smart AI Insight Card，展示了 B 端彈窗設計的一個重要原則：層級的建立靠光影，不靠線條。
• 主界面采用淺灰背景（約 #F5F6FA），彈窗卡片是純白浮層 + 微投影（Y-offset 4px, blur 8px），層次關系干凈利落，無需額外邊框來界定卡片范圍
• 卡片內部包含車輛碰撞示意圖、型號信息（Ford Model 2017）、事件類型標簽、CTA 鏈接共四類信息層，通過縱向網格對齊排布，視覺密度控制在舒適區間
• 左上角的藍色警示標簽（高飽和藍，類似 #0047FF）是整個卡片唯一的色彩重心——它同時承擔了"信息類型標識"和"視覺激活點"兩個職能，讓用戶 0.3 秒內鎖定核心信息
設計啟示：彈窗卡片中，單一高飽和色點 + 大量灰白留白 = 最高效的注意力引導策略。不要用多個顏色"爭搶"用戶視線——在 B 端場景下，克制即高級。
────────────────────────────────────────
iPad 寬屏 Mockup 展示的 Advanced Visual Data Graph 界面，左側淺灰數據區 + 右側高飽和藍詳情面板形成強烈對比。
全系界面僅使用藍 + 灰白兩個色系，卻呈現出強烈的科技感和專業感。這種配色策略的背后是一套嚴格的色彩分工：
|
層級 |
顏色 |
用途 |
|
主內容區 |
#F5F6FA / 淺灰底 |
降低視覺疲勞，承載長期查閱的大量數據 |
|
強調面板 |
高飽和藍 #0028FF |
聚焦關鍵信息，建立信息的視覺優先級 |
|
交互元素 |
藍色漸變 |
按鈕、選中態、CTA 鏈接 |
|
數據圖表 |
藍白漸變 + 灰色輔助線 |
保證數據可讀性為第一優先級 |
其中右側藍色詳情面板的處理尤為出色：純藍底色上使用白色線稿風格的車輛技術插畫，融合了"工程圖紙"的美學質感與"數字大屏"的現代感。這種「工程藍圖 × 數字大屏」的混搭風格，是近兩年 B 端設計中逐漸成熟的視覺語言，特別適合汽車、工業、安防等領域的產品界面。
iPad Mockup 的展示意義：寬屏設備框讓儀表盤的寬屏布局優勢一目了然——選對展示載體，本身就是最好的設計說明。
────────────────────────────────────────
Collision Analytics 完整看板，在筆記本設備 Mockup 中的實際效果展示，包含主數據區 + 底部卡片列表 + 右側藍色抽屜面板。
在完整的 Collision Analytics 看板中，信息被嚴格劃分為三個優先級層級，每一層對應不同深度的閱讀需求：
第一層：核心指標（0.5s 鎖定）
• 「48.2%」以超大字號占據左上角視覺重心區
• 這是用戶在任何場景下都能瞬間鎖定的"那個數字"
• 時間維度切片（Year/Quarter/Week）以 Tab 形式置于指標上方，提供靈活切換的同時不侵占核心數字的空間
第二層：趨勢與異常標注（5s 理解）
• 折線圖上用藍色豎線直接標出風險突增的時間節點
• 箭頭線從豎線引出，連接到文字說明"Collision severity increased by 64.2%"
• 這種標注式數據可視化讓用戶不必在圖表和說明文字之間來回跳轉——上下文信息被直接嵌入圖表內部
第三層：可對比的詳情卡片（30s+ 深入）
• 底部三張卡片（Collision Reconstruction / Firestorm Viper / King Cobra）以等寬網格并列排布
• 每張卡片結構完全一致：左側標簽 + 中間標題 + 右側關鍵百分比，支持快速橫向對比
• 右側藍色抽屜面板作為"按需展開"的詳情層，隨時可召喚、不搶占主內容區域
核心方法論：B 端儀表盤的信息架構不是"把數據放上去"，而是精心設計一條「用戶先看什么 → 再看什么 → 如何深入」的視線引導路徑。
────────────────────────────────────────
手機端兩張卡片并排展示，左側為藍色聚焦卡片（Collision Reconstruction），右側為白色常規卡片，兩張卡片形成對比。
移動端的 B 端設計面臨的核心挑戰是：在極有限的屏幕空間內，把復雜數據講清楚。這組移動端卡片展示了三個可復用的設計原則：
原則一：一卡一事 每張卡片承載一個分析命題，不做多任務混合。藍色卡片 = 需要用戶關注的條目，白色卡片 = 常規信息條目。顏色在此承擔了優先級語義，而非裝飾功能。
原則二：圖文合一 車輛技術插畫與百分比數據（如 35% severity）在同一卡片內左右排布。插圖不是裝飾——它用視覺化的方式解釋了"碰撞嚴重程度"這個抽象概念，大幅降低了用戶的理解成本。右側的折線小圖同時提供時間維度的趨勢感知。
原則三：時間軸極簡化 折線圖上方的時間維度切換（Year/Quarter/Week/Month/Day）只用一排文字 Tab 完成，整個交互區域高度不超過 40px——零控件感，零視覺冗余，卻承載了五個時間維度的切換入口。
────────────────────────────────────────
Focused Analytics 界面，左側大量留白區域居中展示 +64.2% 大數字，右側為折線趨勢圖 + 藍色聚焦行動卡片。
最后一張 Focused Analytics 畫面，是全套設計中最值得細品的一個單頁。+64.2% 的增長數據被單獨放在整個左半屏，周圍是大量留白。這種處理方式背后有一條被反復驗證的設計法則：
數字的"說服力" = 字號 × 留白面積
具體執行層面：
• 巨大的無襯線字體 + 極簡居中排版，讓數字本身成為頁面唯一的視覺錘，用戶不需要閱讀任何輔助文字，就能"感受"到這個數字的分量
• 右側折線圖從 0 開始緩慢爬升、斜率逐漸增大，用圖形曲線的"加速感"還原了"問題在惡化"的緊迫性——這是敘事型數據可視化的經典手法，圖形本身在講一個"從平穩到惡化"的故事
• 左灰右藍的分屏策略將界面分為"客觀數據區"和"行動聚焦區"，完整閉環了「信息獲取 → 風險感知 → 行動指引」的用戶旅程
• 藍色聚焦卡片內部包含標簽、標題、技術插畫、百分比數值、進度條、說明文字共 6 個信息層級，全部通過字號、字重、間距做出清晰區分，密而不亂
────────────────────────────────────────
這套作品給我們提供了以下可直接應用到實際項目中的設計準則：
1. 配色做減法：2 個主色 + 灰白體系，足夠構建完整的科技感 UI。顏色越多，信息噪音越大
2. 信息分三層：核心數字 → 趨勢標注 → 對比詳情，為用戶建立有節奏的閱讀路徑
3. 彈窗靠光影：偏移投影 + 留白比邊框分割更優雅，更符合現代 UI 的視覺趨勢
4. 顏色即信息：界面上唯一的高飽和色，必須指向用戶當前最該關注的區域
5. 移動端一卡一事：小屏不做多任務混合，一張卡片講清一個命題，寧可多滑一屏
6. 數字要能被"感受"：超大字號 + 充足留白 + 敘事型曲線，比干巴巴的百分比數字更有沖擊力
蘭亭妙微（藍藍設計）m.payeee.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
螞蟻阿福 APP 以 AI 醫生朋友的身份重新定義健康管理，從對話式醫療入口到智能體驅動的全流程服務，這款應用正在顛覆傳統醫療產品的交互邏輯。它不僅通過人格化設計降低醫療決策壓力，更借助阿里生態實現從咨詢到就診的完整閉環。本文將深度解析其創新設計如何重構用戶與醫療服務的連接方式。
今天向大家分享一款最近剛推出的螞蟻旗下的 AI 健康助手——螞蟻阿福 APP ，希望你能從這篇產品體驗分析中有所收獲。如果你覺得我們的文章有價值，歡迎分享給你的朋友！
螞蟻阿福是螞蟻集團推出的 AI 健康管理應用，由原 AI 健康工具 AQ 升級而來。產品愿景是成為用戶的 AI 醫生朋友，提供健康咨詢、圖片解讀（支持報告、病例、處方、藥盒）、個人和家庭健康檔案管理，以及預約掛號、云陪診等醫療健康服務。
當你打開螞蟻阿福 APP的第一刻，你會發現它像 ChatGPT、DeepSeek 一樣，只有一個對話框。這正是 AI-UX 的典型表現形式——把「對話」作為核心入口，弱化傳統的多層級導航，讓用戶用一句話就能觸達預約、解讀報告、癥狀咨詢等多種服務。交互形式就像與醫生聊天，而不是過去在 App 里找入口、找功能。
對話式AI交互和傳統的菜單欄相比，用戶的心智需要改變什么？
最近我對用“用戶心智”這個知識點有了全新的理解。這得益于剛好在嘗試全新交互的設計，而體驗到阿福時，我尤其感同身受，因此重新思考了這個問題。
從交互方式上看，傳統菜單欄要求用戶預先了解功能位置和層級結構，通過”點擊—瀏覽—選擇”的路徑完成任務。而對話式 AI 交互讓用戶從”尋找功能”轉向”表達需求”，用自然語言直接描述問題，對話即交互、對話即操作。
這種轉變對應著心智模型的兩個層面：
另外，你會發現阿福的頭部有點擁擠（包含用戶中心、智能體、任務中心等入口）。這是因為過去在菜單欄或金剛區的高頻功能都被上移了。也許這就是未來的設計趨勢——”菜單欄”從下往上，把最寶貴的黃金位置留給 AI。
心智模型（Mental Model）
心智模型是用戶基于過去經驗形成的認知框架，決定了他們如何理解產品的運作方式。它影響用戶如何理解界面、預測交互結果并做出操作決策。當產品的實際運作方式與用戶的心智模型一致時，體驗會更流暢；反之則會增加學習成本和認知負擔。
與傳統 AI 對話式交互不同，阿福將醫療場景中的高頻應用設計成獨立智能體。用戶可以在底部對話框上方和頭部直接觸發，比如接下來介紹的 AI 診室。使用其他 AI 工具問診時，體驗往往缺乏儀式感。但在阿福中，點擊 AI 問診后，系統會明確提示”你已進入 AI 診室問診中”。接下來的流程會聚焦于你的癥狀，進行梳理分析，最終推薦適合的醫院和醫生。
另外，阿福受益于阿里健康和支付寶的強大生態，可以在 APP 內完成預約和問診的閉環。用戶只需一個 APP，就能完成從診前咨詢到在線就診的全流程。
如果你覺得 ChatGPT、DeepSeek 這類對話式 AI 產品的交互過于簡單，融入智能體設計的阿福會給你更多驚喜。智能體像一個封裝了特定功能的應用，具有明確的目標導向，用 AI 服務于這個目標，而不是讓用戶在自然語言中”摸索路徑”。換句話說，智能體就像傳統的二級功能模塊——用戶觸發后，系統會在當前場景中圍繞這個需求進行交互。
正是這個流程的設計，讓我發現了它的獨特之處。無論是之前體驗過的阿里旗下安診兒和訊飛曉醫，還是我 7 月份構思的北京協和互聯網醫院 AI 版本方案，都未曾想過可以通過智能體來豐富交互設計形式。
AI 智能體是什么？
AI 智能體（AI Agent）是一種能夠自主感知環境、做出決策并執行任務的 AI 系統。與傳統的對話式 AI 不同，智能體具有明確的目標導向，能夠調用多種工具、API 和服務來完成復雜任務。
AI 找醫生這個智能體同樣帶給我很大的驚喜和啟發。它成功地將傳統醫療 APP 中用戶已經熟悉的交互模式融入產品，同時巧妙地結合了 AI 智能對話方式，形成了一種既保留用戶認知習慣又具有創新性的混合交互體驗。
體驗完這個智能體的交互流程后，我意識到過去對對話式 AI 產品的交互和 UI 理解過于淺顯。它們確實主要依靠對話交互，但隨著智能體的發展，每個智能體都代表一個獨立的流程、內容甚至風格。
以 AI 找醫生為例：它融合了傳統的 TAB 框架，讓用戶按科室或疾病查找；當 AI 推薦的數據不滿意時，還提供”查看全部”按鈕，引導用戶進入二級頁面進行個性化篩選。這個設計讓我發現，AI 產品遠比想象中豐富——它不只是簡單的對話框和側邊欄。
寫到這里，我突然想起另一款對話式醫療 APP——訊飛曉醫。當我輸入”預約掛號”時，系統只能提示我跳轉至其他醫療網站完成掛號。相比之下，阿里的生態能力令人贊嘆：阿福直接連接好大夫等平臺，用戶可以在 App 內完成從 AI 推薦、查看醫生到付費問診的全流程，無需跳出即可實現就診閉環。
早在 2023 年參與釘釘智能體測評時，我就有過類似構思：如果將專家過往的就診經驗和知識喂養給 AI 并進行專門訓練，這個智能體能否解決 80% 的診前基礎咨詢？當我體驗這個智能體并查詢相關資料后，發現阿福的醫生 AI 分身確實做得非常出色。
該模型（官方名稱叫螞蟻·安診兒醫療大模型 AntAngelMed）基于海量醫學文獻和去隱私化的真實病例數據構建，具備”深度思考”能力。它可對復雜、信息不全的臨床場景進行多輪推理、邏輯驗證與自我糾錯，助力精準診療。
在產品層面，AI 醫生整合了語音對話、掛號、補號申請等多種功能和場景。患者可以像與真人交流一樣咨詢，醫生則能 24 小時服務多位患者。
醫生 AI 智能體這一創新模式對多個行業領域具有重要的參考價值。它的核心在于：將一位擁有數十年臨床經驗的醫療專家所積累的專業知識、診療經驗和實踐智慧進行系統化的數據處理和標準化轉換，再借助人工智能技術，使這些專業知識能夠同時為成千上萬的用戶提供高質量的服務。
我甚至有一個大膽的設想：在未來，即便一個專家壽終正寢，只要他能把自己的知識庫和經驗傳送給 AI，這個專家是不是就并未真正離去，而是可以繼續造福我們的子孫后代？
「健康小目標」是一個圍繞具體健康意圖（如改善睡眠）展開的目標型智能體。它通過 AI 引導式問答拆解目標，自動生成可執行的日常任務，并將”制定計劃—每日打卡—正向反饋”完整串聯，形成持續的行為干預閉環。
體驗這個功能時，我特意下載了幾款健身打卡 APP，對比阿福的打卡流程與專業健身應用的差異。整體體驗下來，阿福的用戶體驗更流暢。由于首頁更聚焦、更簡潔，我可以一目了然地看到所有打卡任務。
這個智能體給了我兩點啟發。
第一，表單類操作（如添加就診人、填寫問卷等）可以直接在對話框中完成，無需跳轉到新頁面。實際體驗下來，這種設計不僅高效，還能保持用戶的使用連貫性。
第二，健康小目標就像常見的用戶簽到打卡功能，通過持續打卡增強用戶活躍度。但我認為最大的亮點在于：你可以在對話框中輸入想實現的目標，系統就會為你自動規劃。這正是自我決定理論（Self-Determination Theory）的絕佳體現，當用戶具備自主性和勝任感時，他們會感覺是在主動使用產品，而非被產品操控。
這還是我第一次如此細致地了解我的皮膚，因為阿福的 AI拍皮膚智能體更像一個一體化的皮膚管理工具。不僅可以拍患處、看舌苔，還可以測膚質、測毛發。很幸運，工作了這么多年，我還沒有禿頭的跡象，AI 給我的測評是要注意休息、少熬夜，目前毛發良好。
我不得不感嘆當今 AI 技術的飛速發展。當我完整體驗了看舌苔、測膚質和測毛發這些功能時，雖然或許是我之前未曾留意，但還是給了我很大的震撼。AI 僅通過不同視角和角度的拍照，就能在短時間內快速評估出用戶皮膚的健康狀況——這本身就是科技的巨大進步。我沒有去找 ChatGPT 探討背后的技術原理，只想從一個普通用戶的角度，表達我體驗這些技術時的真實感受。
「藥管家」圍繞患者真實的用藥場景，將藥品識別、用藥管理、用藥指導、價格查詢與購買行為整合為連續流程。用戶從”我手上有什么藥/我需要吃什么藥”出發，可以自然完成從查詢、添加到用藥提醒，乃至購買的全鏈路操作。AI 在其中承擔持續輔助與決策支持角色。
這個環節讓我深刻感受到一個完整生態的價值——你在阿福就能實時查詢藥品價格、多維度對比，以及直接通過外賣配送或郵寄下單。
C 端產品的頁面空間寸土寸金。當我添加了用藥提醒后，我突然意識到阿福的首頁其實是一個任務中心，而非傳統的科普資訊推薦區。特別是與安診兒 APP 相比，阿福的首頁雖然看起來千人千面,但它能夠感知、讀取并提醒用戶——無論是健康打卡、健康數據還是用藥提醒,這個卡片區的場景拓展與應用都關聯著整個產品的功能體系。
體驗到這里時，恰好我剛帶小孩去醫院做了個小檢查。拿到抽血報告后，我嘗試將報告拍給阿福，親身體驗了 AI 報告功能。與醫生相比，阿福的 AI 報告能幫助患者更系統、更完整地了解細節。醫生工作繁忙，雖然經驗豐富、能快速判斷病情，但往往沒有足夠時間為患者詳細解釋。
AI 報告不僅為患者提供多輪對話追問，最后還會自然銜接 AI 診室、醫生解讀與醫院推薦，形成從”看不懂報告”到”下一步怎么做”的完整閉環。
我們也許真的要認真思考如何利用 AI 來幫助我們更好地生活了，比如 AI 報告這樣的功能，它至少可以解決大部分患者對于專業報告的疑惑，了解 50%-70% 的基礎情況。過去的互聯網醫院可以解決全國城市醫療資源不對等的痛點，而隨著 AI 的加持，我覺得這種痛點會逐漸降低，就像 我在 AI 醫生分身那個環節提到的一樣，如果AI 可以把一個醫生過去幾十年的知識和就診經驗復刻，那么無論我們在哪個城市，都能同時享受到這個醫生帶給社會的價值。
總結與思考
第一，傳統菜單欄會逐漸消失嗎？
正如我在第一部分討論的，阿福的對話式入口給了我很多啟發。看著阿福擁擠的頭部，我真切地感覺到——傳統菜單欄可能會在越來越多的產品場景中徹底消失。甚至連搜索欄這樣的功能，都會被 AI 輸入框替代。對話即交互，對話即搜索，對話即觸發，讓我們拭目以待。
第二，智能體驅動 AI 產品設計創新
我每天都在使用 ChatGPT，長久以來形成了一種刻板印象：對話式 AI 產品的設計平淡無聊，傳統的交互和界面設計似乎不再重要，取而代之的是功能邏輯和提示詞設計。但阿福的設計給了我新的啟發，打破了我對對話式 AI 產品的固有認知——未來的 AI 產品可以結合智能體做出更多創新，交互界面設計依然重要。
第三，對話式 AI 產品的應用場景將越來越廣
我想到了許多應用場景，特別是與醫療高度相似的政務領域，比如稅務、教育等。如果這些傳統行業引入對話式 AI 交互，將極大提升工作效率。試想一下，當你只需在稅務 APP 中輸入幾個字或說一段語音就能開始辦理業務，能為前臺工作人員節省多少時間？在這里給自己定個小目標：2026 年設計一款政企對話式 AI 產品，探索這個領域的設計趨勢。
蘭亭妙微（藍藍設計）m.payeee.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
藍藍設計的小編 http://m.payeee.cn