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 等開源的設計組件，會使得設計師以及前端事半功倍，有助于設計師把更多的精力投入到沉淀行業知識、研究產品架構、梳理交互方式和創新視覺表現上。
在后臺產品的設計過程中，更應該把寶貴的時間用在更值得關注的事物上，讓設計師能夠輔助業務挖掘，從趨于相同的表象中找到產品獨有的閃光點，從而切實解決問題和實現價值。
蘭亭妙微（藍藍設計）www.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，建議成熟的互聯網公司設計團隊搭建自己的低代碼平臺。一鍵更換主題，盡在指尖。
轉載自優設網
蘭亭妙微（藍藍設計）www.payeee.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
jankspace精準概括這類痛點：產品對外宣傳全鏈路無縫自動化，實際使用卻要在賬號、支付、文件、權限間反復跳轉，消耗用戶耐心卻毫無體驗增益，屬于設計失誤帶來的無效負擔。消費心理學宜家效應佐證：用戶親手投入步驟完成事物后，會自發抬高產品價值；動手參與的沉沒成本，最終轉化為情感與記憶沉淀。
| 摩擦分類 | 用戶體感 | 典型場景 | 設計決策 |
|---|---|---|---|
| 壞摩擦 | 被迫填坑、煩躁流失 | 重復登錄、錯亂跳轉、無效排隊 | 全盤刪除優化 |
| 交易必要摩擦 | 安全感確認 | 支付二次核驗、隱私授權 | 精簡話術、保留必要步驟 |
| 儀式型好摩擦 | 沉浸場景、充滿期待 | 開箱、線下試穿、集章打卡 | 結構化設計，配套情緒回報 |
| 記憶型好摩擦 | 愿意投入時間、加深印象 | 長內容觀看、線下展覽動線、手作 DIY | 設計體驗峰值 |
蘭亭妙微（藍藍設計）www.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. 考慮物理環境的影響：屏幕上的好看 ≠ 控制室里好用，環境光、觀看距離、多人協作都是設計變量
────────────────────────────────────────
蘭亭妙微（藍藍設計）www.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. 數字要能被"感受"：超大字號 + 充足留白 + 敘事型曲線，比干巴巴的百分比數字更有沖擊力
蘭亭妙微（藍藍設計）www.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 產品，探索這個領域的設計趨勢。
蘭亭妙微（藍藍設計）www.payeee.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
飛書的聊天窗口設計正重新定義企業協作的邊界。通過標簽頁集成、多模態通訊、結構化搜索等創新功能，它將傳統IM工具升級為沉浸式工作臺。本文深度拆解了這款產品如何將碎片化溝通轉化為高效生產力，其設計哲學值得每一位關注協作效率的產品人思考。
今天我想向大家分享我近期對飛書聊天窗口設計的體驗洞察 ，希望你能從這篇產品體驗分析中有所收獲。如果你覺得我們的文章有價值，歡迎分享給你的朋友！
飛書是字節跳動旗下的新一代一體化協作平臺，誕生于 2016 年。它將即時通訊、日歷、文檔、云盤、OKR、審批等功能深度整合，試圖通過”All-in-One”的產品哲學重新定義企業辦公的協作方式。相比傳統 IM 工具，飛書更像是一個以溝通為中心的工作操作系統，致力于消除信息孤島，讓團隊協作變得更加高效與流暢。
飛書的聊天窗口設計徹底打破了”即時通訊工具”的傳統邊界。通過在會話界面頂端嵌入可自定義的標簽頁（Tabs），飛書將對話框重構為一個微型協作工作臺。用戶無需跳轉頁面，即可在聊天上下文中快速切換文檔、云表格、網頁鏈接或關鍵任務，實現從”信息流”到”任務流”的無縫融合。
設計亮點
體驗思考
從接觸飛書到此次深度拆解，中間大概有 3 年多時間。我算不上飛書的重度用戶，但過去 1 年多，飛書已成為我負責的在線教育項目中的主要溝通工具。如果不是這次深度體驗，我從未發現聊天窗口竟然支持 tab 切換查找內容，甚至可以自定義。
當我開始深度體驗時，從上至下的第一個功能就給了我驚喜——它突破了我對聊天窗口的固有認知。傳統的 IM 軟件將溝通（聊天）與結果（文檔/任務）剝離，導致用戶頻繁在應用間跳轉。而飛書通過”標簽頁”將生產力資產直接”拎”到會話層。這種設計策略證明了在 B 端產品中，溝通往往基于具體目標，這就是協作的本質——減少操作跨度就是提升生產力。
體驗到這里，我甚至特意打開企業微信進行對比。畢竟在國內，這兩個工具是企業辦公的二選一。相比飛書,企業微信的聊天窗口采用傳統模式，和微信的聊天模式相差無幾。
另外，這一功能設計充分體現了漸進式披露和自我決定理論這兩個設計策略——不強迫普通用戶接受復雜的工作臺邏輯，而是將深度協作工具隱藏在輕量級的標簽切換中，并充分給予用戶自主性和掌控感。
知識卡片：
漸進披露（Progressive Disclosure）：一種信息呈現策略，只在用戶需要時才展示更復雜或高級的功能，而非一次性呈現所有信息。這種方法防止用戶被過多信息淹沒，減輕認知負荷，讓用戶能逐步學習和適應界面。
自我決定理論（SDT）：人有三個基本心理需求——自主性（想自己做決定）、勝任感（覺得自己做得到）和關系感（感到被認可和接納）。如果產品設計能滿足這些需求,用戶就會更愿意使用。
飛書在聊天窗口頂端集成了覆蓋全場景的通訊矩陣，將語音通話、視頻會議以及運營商電話撥打深度整合在統一的交互入口下。除了文字，還支持語音、視頻和電話撥打。更讓人愛不釋手的是，飛書的語音/視頻不僅可以自由切換，還可以隨時邀請其他伙伴發起多人會議，并提供屏幕共享、錄制、倒計時、直播等工具——溝通體驗真的非比尋常。
設計亮點
體驗思考
在深度使用飛書協作的這一年里（此前三年我都是獨立工作），我才真正理解為什么會誕生飛書、企業微信這類協作軟件。例如，飛書的語音通話可以直接轉化為會議，完美解決了傳統聊天軟件如微信的痛點：第三個人加入時必須掛斷并重建群聊；分享屏幕時不得不切換到騰訊會議。這種”溝通即協作”的邏輯大幅提升了工作效率，無需頻繁切換溝通方式。
相比傳統聊天軟件，這種聊天既協作、語音既會議的模式是從”溝通媒介”到”協作場景”的躍遷。它不僅深度集成了聊天和協作場景，更通過屏幕共享、倒計時和錄制功能，將稍縱即逝的語音信息轉化為可搜索、可引用的數字資產。
飛書聊天窗口的搜索功能不僅是一個關鍵詞入口，更是一個強大的結構化過濾器。它通過將混亂的聊天記錄原子化地拆解為消息、云文檔、文件、圖片/視頻、鏈接等五大維度，配合“來自用戶”與“時間范圍”的多重嵌套過濾，讓用戶在海量碎片化信息中實現秒級定位。這種設計將搜索從一種“試錯行為”轉變為了一種高度確定的“資產調取”過程。
設計亮點
體驗思考
在飛書的聊天窗口中，搜索并不是一個獨立、泛化的全局能力，而是深度綁定在“會話”這一上下文之中。我覺得它的更像是一種從“文本檢索”向“資產管理”的心智遷移。比如傳統的 IM 搜索往往只針對文本，而飛書把對話中產生的每一個文檔、每一條鏈接都定位成數字資產，于是我們可以通過不同的類型、時間、以及發送人去進行篩選。
回到產品設計層面，我覺得飛書的設計，解決了過往我們在傳統 IM 搜索中的三個痛點：
如果要推薦此次產品分析中最驚喜的功能，實時翻譯無疑是我的首選。飛書的實時翻譯功能徹底抹平了國際化協作中的語言鴻溝。通過在聊天設置中深度集成翻譯助手，飛書不僅實現了接收消息的”自動翻譯”，更創新性地推出了”邊寫邊譯”模式。這一設計將翻譯從”被動查閱”升維為”主動表達”的即時增強，讓跨國團隊無需第三方工具，就能在 IM 窗口內完成流暢且地道的原生對話。
設計亮點
體驗思考
體驗這個功能時，我不禁思考：飛書的實時翻譯能否替代 HelloTalk 這類專業語言學習軟件，讓我在真實工作場景中自然地學習外語？它不僅支持自動翻譯和邊寫邊譯，更重要的是能消除語言障礙，提升工作效率。而且，這還是一個完全免費的功能。
發現這個功能后，假如未來我能服務國際客戶，我也覺得不必膽怯。它不僅打破了”表達焦慮”，更能實際解決跨語言協作溝通的難題。
你是否遇到過這樣的情況：用傳統 IM 軟件發送長文字時，需要添加格式，比如加粗、增加項目序號？事實上，我一直忽略了飛書的這個功能。雖然我堅持聊天應言簡意賅，但在工作場景中，確實常需要編輯長段落文字。
飛書聊天窗口通過一鍵轉化功能，將傳統的單行文本輸入框升維為專業的富文本編輯器。這一創新設計打破了即時通訊”碎片化表達”的局限，讓用戶無需跳轉文檔頁面，就能在會話流中直接產出結構清晰、排版精美的深度內容，實現”溝通”與”創作”的無縫對接。
設計亮點
體驗思考
當我拆解得越細致，我發現我對飛書的印象就在一步步的改變。聊天對話框一鍵轉化為富文本編輯器的設計，不僅規避了”長文表達必須跳轉文檔”的痛點，更解決了碎片化聊天導致信息混亂的問題。富文本編輯框本質上是一個”強制信息結構化”的引導工具——通過引導用戶使用項目序號、加粗重點，設計師無形中幫助團隊提升了信息分發效率，確保核心指令不被社交閑聊淹沒。
飛書聊天窗口底部的工具欄是一個集成了多元化辦公能力的原子化矩陣。它不僅涵蓋了基礎的社交元素（如表情、圖片、語音），更深度嵌入了生產力組件（如任務、云文檔、紅包、定位等）。這一設計確保了用戶在溝通的任一環節，都能即時調取對應的工具來推進工作，真正實現了“所聊即所得”的協作閉環。
設計亮點
體驗思考
請點擊“
”按鈕，然后仔細看看飛書底部工具欄藏著多少功能。如果說傳統 IM 軟件的工具欄是社交驅動的，而飛書則是任務驅動的。也許在 B 端的工作場景中，聊天框不應僅僅是字符的傳輸帶，而應成為各業務模塊（如 OA、CRM、任務管理）的統一分發器。
不過雖然工具欄功能繁多，但飛書通過“常用置前、深度收納”的排版邏輯，避免了信息過載。這種設計確保了用戶在基礎聊天時處于“社交心流”中，而在需要專業協作時，又能通過二級菜單快速喚起“協作心流”。
我強烈推薦大家一定要注意飛書聊天窗口底部菜單欄的日程和任務這兩個功能。因為你可以在和同事的聊天中隨時發起會議和任務分配。你甚至不需退出聊天窗口去會議和任務面板，就能把工作的事兒在聊天窗口完成。
飛書通過在 IM 界面深度嵌入這樣的快捷功能入口，消除了傳統辦公軟件中切換應用、同步上下文的繁瑣過程，讓用戶在溝通的任一瞬間都能一鍵將“想法”轉化為“行動”，構建了一個從實時對話到確定性執行的閉環。
設計亮點
體驗思考
我覺得飛書的聊天窗口實在太能理解用戶的需求了，也許這正是飛書是字節跳動內部延伸出來的產品，它的誕生就是為了幫助字節跳動提升效率，所以它能深刻洞察到如何在幾秒鐘內防止辦公效率的流失，從而將會議與任務視為 IM 的內生能力，而不是外部插件。
體驗到這里，我真正改變了自己對飛書的產品認知，它并不是社交工具，而是數字辦公室。即便只是一個聊天窗口，飛書也構建了全能的任務分發器。這種系統功能之間連接的顆粒度，讓人嘆為觀止。
飛書在聊天窗口外圍構建了一套極細顆粒度的消息過濾體系。通過將混合在一起的消息流原子化地拆解為未讀、標記、單聊、群組、云文檔、任務等多個 Tab 標簽，飛書將“閱讀消息”這一行為從無序的翻找升維為精準的任務處理。這種設計極大地提升了信息檢索與處理效率，確保了核心任務在海量溝通中始終處于視覺中心。
設計亮點
體驗思考
當我退出聊天窗口，準備結束這次產品體驗的時候，我又突然發現飛書的消息列表頁也藏著不少細節。如果習慣了傳統 IM 軟件按時間順序堆疊消息的模式，飛書則通過 Tab 標簽來標注消息的狀態，甚至點擊左側篩選，還可以查看標記、@我、標簽、單聊、話題等等更細的分類。
這是一種“信息熵增”的減法交互技巧和策略。隨著工作時間增長，群組與好友數量會不可控地增加（即熵增），Tab 標簽本質上是一套“動態降噪系統”。它允許用戶通過點擊特定的 Tab（如“未讀”），瞬間將復雜的界面簡化為僅剩待辦事項的極簡模式，從而緩解用戶的信息焦慮、提升專注力。
過去幾年我一直在用飛書，但坦白說，在沒有刻意拆解之前，我從未意識到一個聊天窗口里竟然藏著這么多“為效率而生”的設計細節，雖然它是使用頻率最高、卻也最容易被忽略的核心界面。
我們日常使用協作軟件時，常常會沿用其他 IM 的習慣，把它當作一個“像聊天一樣聊天”的地方：發消息、回消息、刷對話就結束了。直到我開始更細致地體驗與對比，才發現飛書把聊天窗口做成了更接近“協作工作臺”的中樞入口。溝通不再只是信息往返，而是能在對話上下文里直接完成。
無論是結構化搜索在海量消息中精準定位關鍵資產，還是一鍵發起會議、隨時分配任務讓“討論”立刻落到“行動”，又或者是實時翻譯讓跨語言協作更順滑，這些能力都盡可能被收攏到同一個聊天窗口里完成。也因此我相信，你在看完這次拆解后，會對飛書的使用場景與產品認知產生新的變化：原來一個聊天窗口不僅能承載溝通，還能承載協作與生產力的閉環。
我認為，飛書把“以場景為中心”的策略發揮到了極致：和 C 端產品不同，它真正聚焦于 B 端協作溝通場景，將用戶最高頻、最真實的工作場景——溝通——作為承載協作的主舞臺。
于是，文檔、任務、會議、搜索、翻譯等能力都能在同一上下文中被自然調用，讓用戶沿著“正在討論什么”這條主線，持續推進到“接下來要做什么”。這種將信息流與任務流緊密耦合的設計，顯著降低了切換成本與認知負擔，也讓團隊的協作軌跡更容易沉淀、回溯與復用。
正因如此，這個聊天窗口幾乎濃縮了飛書的設計精華：既承載其“溝通即協作”的價值主張，也映射出對真實工作場景與用戶需求的深刻洞察。
蘭亭妙微（藍藍設計）www.payeee.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
AI 行業的爆發始于2022年 ChatGPT 和 Midjouney 的發布，到現在已經快4年了，整個發展過程用突飛猛進、日新月異形容一點都不過分。
但不管它過去還是現在，發展得有多迅猛，都依舊處于行業早期的開荒和發展階段，離真正成熟的理想形態還有很長的一段路要走，這是我們首先要達成的共識。
而之所以有這樣的結論，原因就是 AI 的發展速度是超過現實世界匹配它的速度的，這造成了一種經濟和機會成本上的巨大阻力。
簡單來說，我們可以把 AI 技術的應用拆分成上、中、下游三個層，上層是 AI 的核心，主要是算法、大模型，中游是負責運行AI模型的硬件和支撐，即 AI 芯片、光模塊 CPO、高速內存 HBM、服務器液冷、特高壓電路等，下游即 AI 具體的應用工具，包括 AI 軟件、硬件、智能體等。
這是一個非常龐大且復雜的產業鏈，它們之間是需要相互耦合，才能順利應用到具體的使用場景中。
簡單來說，就是 AI 模型廠商需要根據技術路線和成本選擇硬件并購買算力中心，以及消耗海量的電力來訓練自己的模型并維持它的正常運轉。雖然這些背后的基建作為普通用戶可能感受不深，但頭部廠商的競爭已經到了白熱化的階段。
比如大模型的開發必然要關注硬件規格和架構，大洋彼岸除了英偉達外，還陸續推出了谷歌 TPU、微軟 Maia、英特爾 Gaudi 等芯片，它們代表了不同的技術方案，應用在了不同的模型上。
而因為貿易和地緣政治的因素，國內是無法進口這些高端芯片，所以我們只能自研生產以滿足國產大模型的需求。如阿里在自研并應用自家的真武系列芯片， DeepSeek 近期更新緩慢的重要原因就是因為要適配華為的昇騰系列芯片等。
之所以要提這點，是因為 AI 大模型的發展也適用馬太效應，贏家通吃。在接近性能和水平下誰家應用的算力、電力成本最低，誰就具備了最大的優勢。
而每家大模型廠商都要面臨技術路線的選擇，并投入海量的成本孤注一擲做基建，很難走回頭路。這種發展路徑注定會讓行業發展充滿波折和動蕩，會有很多企業倒在半路上，連帶著它們提供的產品和服務一起逐漸消亡。
比如文生圖的 OG Midjounery，已經無法跟上大廠的技術和訓練規模掉隊，在今天已經無人問津，而一年多前網上還到處都是用 MJ 生成UI界面設計，UI 設計師要下崗的帖子。
強如 OpenAI，也要應對 Google、X AI、Anthropic、Seedance 的沖擊和成本管理失控（GPT5 訓練量需要消耗一個中等規模城市1年用電量），也在近期放棄旗下的文生視頻工具 Sora。
模型和硬件端都充滿了巨大的不確定性，因為技術的發展是需要“試”出來的，總有前浪會被拍死在沙灘上。至于誰會被拍死在沙灘上就不是站在今天的視角上能回答的。
再回到我們今天的主角 Anthropic，這是一家非常務實的 AI 公司，專注于開發有商業應用場景的大模型，是寫作、編程等領域中的最佳選擇。與之相對的則是類似 ChatGPT、Gemini 這類全能多模態大模型。
因為其模型可用性極高，所以從去年開始付費用戶量暴增，在今年初預估年化收益已經超過300億美元，不僅用戶付費率遠高于 OpenAI，且運行成本也遠比它低。
而這家公司想要年底要上市（估值8000億美金），產品矩陣的拓展就成為非常重要的資本策略。通過發布 Claude Design，能很好的和 Claude Code 實現聯動，完成使用 AI 開發軟件的閉環。
至于現階段 Claude Design 夠不夠用不重要，畢竟故事和邏輯是成立的，作為初版它也有后續升級迭代和優化的空間。在我們目前的試用中，它的生成效果也就那樣，但消耗的 Token 量（你最好確保自己有個足夠鼓的錢包）……
Claude Design 有新上市的光環風頭正盛，那是否還記發布也還不久的Google Stitch、OpenClaw、FigmaMake、Rive、Pencil 等等。
再往前是否還記得使用 StableDiffusion 訓練 Lora 和 Checkpoint 的工作流？
工具一直在更新，即使今天還很粗糙。但用發展的眼光看問題的話，終有一天它生成的質量會足夠高足夠智能足夠可控，甚至通過腦機接口 BMI 實現所想即所得的水平（又到了做夢的時候）。
但是，那天是什么時候？
以及，和你現在設計的界面有什么關系？
作為設計師一定要搞清楚的邏輯，就是 AI 生成界面和圖像的過程，只是一種工具的發展和進步，提升了設計師的設計效率。就像人類發明了電腦和軟件，取代了尺規作圖，同樣也大幅度降低了設計的效率和成本，但設計師這個崗位并沒有消失。
因為使用工具的人之間的差異，會直接影響最終的輸出效果，就像用同一個 AI 生成工具你可能就是做不出網上高贊帖子的案例，都用美圖秀秀不用 PS 去 P 圖你也 P 不過有一定專業積累的攝影師。
而且任何工具使用都有門檻，就一個簡單的 Claude Design、Google Stitch 安裝和使用都需要學習和適應，生成結果還要做大量的調節和校準，這些就不是工作量，老板和產品經理也一定能閑得每天學習新工具并且直接自己干？
我相信有很多公司現在都很熱衷于擁抱 AI，強行推進 AI 的工作流，從企業戰略和發展的角度來講是能夠理解的，但在實際執行層面上卻不會像想的那么美好。其中最大的問題就是前面提到的整個產業的不確定性，產品還都有各自的局限。
每個團隊在搭建 AI 工作流的時候需要做技術的選型，以及圍繞自己的實際生產場景優化工具的使用方式。往往為了一個簡單的工作結果就要耗費大量的精力去搭建工作流，而這個工作流很可能是一次性的，因為之后的工作場景發生改變這套工作流就用不了了。
有些同學可能心態好點覺得這種過程可以收獲寶貴的經驗，但最不幸的，就是工具的升級和更新（甚至關閉）可以直接顛覆掉原來的做法，讓原先的成果毫無意義。
在我朋友中普遍得到的反饋，就是在稍微復雜的專業場景中，強行適配 AI 的結果往往只有增加工作量，原先目標的降本增效，實際導致了更長的工作時間和更晚下班，從去年到現在在不同 AI 工具中做研究疲于奔命。
換個角度思考，其實就是工作過程變成今天用 PS，明天用 Figma，后天用 Excel 或 PPT 進行設計，每一陣子換個工具設計相同的東西，而它們又不能解決設計過程中最復雜的決策部分。
也就是我們一直在使用充滿不確定性的工具去尋求相對確定的結果。
這就是今天 AI 工具在 UI 行業中應用的真相，不管我們怎么用邏輯還是格局去判斷未來 AI 要實現一切，但起碼不是今天和最近，就是變得更強了，也依舊需要有人去操作和控制。
而我們現在要做的是關注最終輸出的結果，而不是和別人炫耀 Figma 用的好，還是 Sketch、XD、即時、Pixso 用的好。等到市場競爭格局基本確認，通用的工具也普及以后，再去掌握和學習也不會低人一等（門檻不會高到哪里去）。
蘭亭妙微（藍藍設計）www.payeee.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
談論 AI 就繞不開大模型，它是 AI 技術應用的核心。
簡單解釋 AI 大模型，就是一個通過特定方法和大量數據訓練出來的 “自主化程序”，這個程序可以根據用戶輸入的指令自己做出 “判斷和思考” 后再進行回復。
傳統程序雖然也可以執行用戶的指令，但回復的內容和方式不會超出一開始預設的范圍，非常有限。
而 AI 大模型則大大拓展了這個邊界，我們不用提前預設各種條件和邏輯，它就會自己去理解問題再決定給出什么結果。
當然，這個邊界只是不能生成圖片(截止到2026年初)。而 Google 開發的 Gemini 大模型則是多模態模型，可以生成圖片和視頻等內容。
不同模型會有不同的表現和優劣，但因為大模型的開發需要尖端的技術和龐大的規模（訓練），門檻極高，所以市面上主流的大模型數量并不多，可以簡單分為國內和國外兩個陣營。
國外的主流大模型包括 OpenAi 開發的 ChatGPT，Google 開發的 Gemini，Anthropic 開發的 Claude，xAI 的 Grok 等。
國內的主流大模型則包括字節開發的豆包，阿里開發的千問 Qwen，深度求索開發的 Deepseek，月之暗面開發的 Kimi 等。
因為前面說過大模型的局限性，所以為了應對不同的應用場景，團隊就會將它們裂變出不同的版本。比如千問既有 Max 語言大模型，還有 Omni 全模態（文字、圖片、音頻、視頻）大模型，針對處理問題的難易度又分成了 Max、Plus、Flash、Lite 等版本。
完整的大模型體積和參數都非常龐大，需要部署到專屬的算力中心，并通過云服務來實現用戶的訪問和使用。也就是需要聯網使用，但因為國內網絡服務的限制（不可抗力），我們無法通過國內電信訪問國外的主流大模型。
雖然說國內大模型的水平在這幾年突飛猛進，但離國外的大模型還有一定的差距，在實際工作場景中多數應用的也是國外大模型，所以訪問它們就需要大家自己發揮主觀能動性解決了。
順便再解釋一個基礎的問題，大模型除了遠程訪問以外，也可以在本地進行安裝。部分團隊（如千問）會在網上開源自己的大模型供其它人下載和使用，當我們下載到本地后就可以用 GPU 來運行它。但因為大模型對性能的要求極高（旗艦顯卡起步），所以本地運行的效果要大打折扣。
而一些企業內部或行業專屬的大模型，往往都是使用這些開源大模型進行二次訓練和調試后的結果。還有一些針對特定硬件（如手機、眼鏡）和特殊應用場景開發的小模型，就暫時不在我們的討論范圍之內。
前面講過大模型可以類比成一種 “程序”，且它還是后端服務器上運行的程序。想要對這個程序實現命令的輸入并返回它處理的結果，就需要應用前端的工具來實現。
比如我們打開豆包的官網，就可以使用這個網頁對豆包大模型提出問題和要求，然后網頁上就會返回它處理后的結果。這個網頁就是使用大模型的工具，而這只是 AI 工具的其中一種形式，還可以是本地應用程序、手機 APP、小程序、硬件定制系統等等。
我們大多數人開始接觸 AI 大模型，都是從這些官方的工具開始，它們最基本的功能就是根據指令返回文字或圖片信息，我們會把它們當成是一種可以對話的人工智能客服。
但實際上它們可以發揮的作用遠不止于此，比如幫你整理本地的文件夾清理重復的文件，幫你自動修圖并完成動態相片的剪輯，幫你編寫程序并自己運行和檢測等等。想要實現對話以外的其它功能，就需要借助特定的工具才能實現。
所以除了最基礎的對話工具外，行業還衍生出了很多激發大模型潛力的 AI 工具。它們可以借助大模型完成程序開發、視頻剪輯、操作托管、熱點整理、消息推送等等。
到這里我們就要清楚，AI 大模型是大模型，工具是工具，大模型是基座，而工具是大模型的具體表現和應用形式。
我們更進一步認識 AI 工具，就可以把AI工具分成官方工具和第三方工具兩個種類。
官方工具就是 OpenAI、Google 等大模型企業自己開發并綁定自家大模型的產品，而第三方工具則是其它團隊開發，再接入到大模型進行使用的工具。
比如本地聊天機器人 Cherry Studio，它本身只是個簡單的聊天對話工具，可以自己創建對話角色/助手，但需要接入大模型以后才能進行對話。還有著名的AI編程工具 Cusror，只有接入大模型以后，它才可以實現 AI 編程和代碼管理。還有前陣子火遍全球的龍蝦 Openclaw，也只是個本地工具，需要接入大模型后才能識別本地的文件和執行命令。
官方能提供的 AI 工具與服務往往很有限，所以在真實項目流程中，我們就會混合使用多種工具來完成工作。就像以前做一套項目除了用 Figma以外，還要結合使用 Adobe PS、AI、C4D、AE 等軟件。
而第三方工具和官方不同的是，官方工具默認連接自家的大模型，用戶直接登錄就能使用。而第三方工具要接入大模型，就需要進行額外的配置，也就是添加大模型的 —— API。
API 就是接口，是前端工具連接后端服務器的通道，而這個通道默認是上鎖的，還需要提供對應的密鑰（API Key）才能正常訪問。
部分工具會自己接入各大模型的 API，用戶只能選擇它提供的模型，并只需要對這個工具進行付費即可。
另一部分工具則需要用戶自己選擇模型和配置 API，需要我們訪問大模型的 API 開放平臺進行申請，然后再將它們生成的 API Key 填入到工具中完成連接。
API Key 就像是一個電話號碼，當我們申請完并進行使用，就會產生一定的 “流量”，而 AI 產生的流量用專業術語形容叫詞元 Token。
使用 API 完成的任意 AI 服務，都會消耗 Token，且因為 AI 的計算成本極高，所以主流大模型都會針對 Token 消耗量進行收費。就像電信運營商一樣，既有包月服務附帶一部分流量，超出部分還要按量計費。
在實際的 AI 工具使用過程中，Token 的消耗是極其巨大的，往往會造成沉重的成本，而這個市場也遵循一分錢一分貨的真理，越好的大模型價格就越貴。以最適合編程的大模型 Claude Opus 為例， 一個程序員高頻使用消耗的 Token 賬單可以從數千到數萬元不等。所以我們也會從性價比的角度出發，來搭配不同的模型進行使用。
總結我們應用 AI 的本質，就是通過工具來操作大模型。而工具的作用不同，大模型本身的特性和價格也不同，就導致我們在面對一個復雜的任務時，需要選擇多種 AI 工具和不同大模型來實現。
學習使用 AI，和傳統的單一軟件教學不同，不是只學會某個工具的功能和操作方法，而是了解不同的 AI 工具以及大模型的特性，通過組合它們來實現自己目標的方式。這不是設計或產品思維，而是工程思維的具體應用。
蘭亭妙微（藍藍設計）www.payeee.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
做UI/UX設計的同學幾乎每天都要和切換類組件打交道，但很多人總會在開關、復選框、單選按鈕之間踩坑——要么用錯場景，要么給用戶造成認知混淆，甚至引發操作失誤。
蘋果HIG (人機界面指南) 里明確把開關、復選框、單選按鈕這三類，都歸為「切換開關」組件。它們的核心共性是讓用戶在對立的狀態間做選擇，通過差異化的視覺形態清晰區分選中/未選中的狀態。
開關是用來瞬間切換單個功能/設置的開啟/關閉狀態的組件，一次只能控制一個設置的開關，工作邏輯和我們家里的物理電燈開關完全一致，能讓用戶一眼看清當前的生效狀態。
開關的結構非常簡潔，核心分為3個部分：
如果要添加輔助圖標，必須選表意清晰、強二元對立的樣式，千萬別用含義模糊、沒有明確正反屬性的圖標（比如月亮、編輯圖標），用戶沒法一眼對應開/關狀態。
開關的核心交互邏輯是操作后立即生效，不需要用戶額外點擊確認按鈕，切換狀態時，可配合手柄尺寸的微動效強化操作反饋。
開關必須和描述控制功能的標簽搭配使用，標簽要簡潔直白，不要把文字放到開關內部。這樣會壓縮視覺空間，還會破壞組件通用性，增加用戶識別成本。
復選框的核心定位，是支持用戶對一組關聯選項，做單項或多項的選中/取消操作。
記住一個核心原則：當用戶可以在一個列表里選擇多個選項時就用復選框，不用開關或單選按鈕。單選按鈕的語義是「請選其中一個」，而復選框的語義是「可以選多個，也可以全不選」，二者的底層邏輯不同。
復選框的結構清晰，核心就是選擇容器+選中狀態圖標，通過勾選/未勾選的視覺差異，直觀傳遞用戶的選擇結果。
如果選項列表較長，建議添加「全選父復選框」提升操作效率，它的交互邏輯有明確的行業規范：
處理一組有關聯的多選項時優先用復選框，而非一堆獨立的開關。
一方面，復選框能天然傳遞「選項之間互相關聯」的語義，另一方面，它比開關占用的視覺空間更小，頁面會更整潔有序。
單選按鈕的核心是互斥單選。在一組選項里，用戶有且只能選擇一個，選中新選項后之前選中的選項會自動取消。
它的語義非常明確：這一組選項里，「你必須、只能選一個」和復選框的「可多選、可全不選」形成了清晰的邊界。
單選按鈕的結構核心是選中/未選中的狀態圖標+對應的選項標簽。行業通用的視覺規范是：用實心圓點表示選中，空心圓圈表示未選中，保證用戶的視覺識別度。
不能打破互斥單選的核心邏輯，更不能讓單選按鈕出現布局重疊，否則會完全顛覆用戶的固有認知，造成操作混亂。
如果選項數量較多、屏幕空間有限，可用下拉菜單替代單選按鈕。
但要注意：下拉菜單需要用戶多一步點擊展開的操作，會增加交互成本，也沒法讓用戶一眼看到全量選項，降低認知效率。因此選項較少時，優先用單選按鈕。
單選按鈕優先垂直排列，不建議水平排列。
垂直排列時每個選項的圖標和標簽對應關系更清晰，用戶不會看錯；水平排列不僅容易讓頁面擁擠、可讀性下降，還會破壞布局一致性，在響應式適配中也更容易出問題。
前面講了每個組件的細節，這里給大家整理了最簡使用規則，設計時直接對照即可。
開關、復選框、單選按鈕，都是設計里最基礎、最常用的組件。設計時要先看場景、定語義，再選對應的組件，而不是憑感覺、看顏值隨便亂用。
當然，我們也會看到一些特殊的設計案例，比如iOS在深色模式的選擇里，用了圓形復選框，和我們今天說的常規用法不一樣。這種情況，要么是為了整個系統的設計語言統一，要么是有特殊的產品考量，不建議盲目照搬。對于設計師來說，先搞懂這些基礎組件的用法、可用性底層邏輯，才是做好設計的根基！
轉載自 優設網
蘭亭妙微（藍藍設計）www.payeee.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
藍藍設計的小編 http://www.payeee.cn