<li id="g3zqm"></li>
X 上看到一個 Codex 的使用案例，將 Codex 內置一個圖片標注工具，這樣修改標注工具里的圖，Codex 就能讀取數據進行重新生成，案例分享給大家
通過內嵌瀏覽器 + Codex Image 2 + 無限畫布（Excalidraw / tldraw），構建一個多模態畫布系統，讓 Codex 直接讀取畫布的 Base64 標注圖，實現“看圖理解 + 生成”。
這樣 Excalidraw / tldraw 就不只是白板，而是變成前端的 Multi-modal Canvas，用來拼一個低配但可控的生圖工作流。
其他在線白板工具：
此想法的原帖： https://x.com/zhongerxin/status/2068027614300893383
原作者 Cowart：Codex + 無限畫布工具插件開源： https://github.com/zhongerxin/cowart#
換白板工具原帖： https://x.com/cellinlab/status/2068193900570046502
操作步驟原帖： https://x.com/liyue_ai/status/2068545434818400526
標簽頁分組功能允許您在 Figma 桌面應用程序中對標簽頁進行分組、著色、展開和折疊。保持井然有序，再也不用擔心找不到要查找的文件。
網址：https://www.figma.com/release-notes/
FigmaEX 客戶端已經更新到 126.6.8 版本，可自行下載安裝。
展示收藏了非常多 iOS 的經典應用圖標，并支持搜索，非常喜歡被精心設計的圖標包圍的充實感，后續會開放 macOS 應用圖標庫。
網站收集了一波應用商店的優化圖片和用戶引導流程的設計案例。
App Store 截圖庫包含，350 萬+ 截圖 、40 萬+ 應用，永久免費
網址：https://screenshotsclub.xyz/
每個應用程序都需要矩陣加載器，55+個免費且開源的加載器，基于 React、TypeScript、Tailwind CSS 和 shadcn 構建。安裝一個，復制代碼，然后將其變成屬于你自己的作品。
網址：https://dotmatrix.zzzzshawn.cloud/
精選 X 中設計、交互的最佳設計，每日更新，并且還有應用截圖和應用圖標等信息，AI 時代提升"看"的能力
umanmade 是一個由真人創作的數字作品精選目錄，收錄優秀的設計靈感和交互案例
免費的、隨時可用的 Figma UI 塊庫。 復制任意組件，將其粘貼到你的文件中，即可立即開始構建。 非常適合著陸頁、布局和 UI 部分。
網址：https://blocks.lander.studio/
轉載：優設
蘭亭妙微（藍藍設計）m.hengshangtqd.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
轉載：優設
蘭亭妙微（藍藍設計）m.hengshangtqd.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
蘭亭妙微UI設計公司：今天分享的是「圖標設計準則」。圖標是界面設計里的 “剛需元素”，一個小圖標能快速傳遞很多信息。好的圖標需要兼顧簡潔、現代、友好。但圖標的尺寸很小，設計時既要嚴格遵守設計規則，又得清晰表達信息，這樣才能保證整套圖標的風格統一、辨識度高。
今天就來聊聊大廠在用的圖標設計原則和設計規范，配合案例進行設計分析~
給大家舉個例子，就說下面的小船圖標，想讓圖標清晰好認，就得做減法，那么用正面的簡約船身造型最合適。
如果圖標設計的過于細致，例如圖標中添加了船帆、桅桿或者旗幟等細節，太寫實的圖標不僅會降低識別速度，還會破壞整套圖標的視覺統一性。
設計總結：
? 簡化圖標造型，提升清晰度和辨識度
? 拒絕過度寫實，避開復雜繁瑣的設計
使用幾何圖形和統一的基礎形狀來設計圖標，能打造出清晰醒目的視覺感受。哪怕結構簡單，也能保持清晰的形態，縮小到小尺寸時也照樣容易分辨。
反過來講，盡量少用那些纖細、松散的不規則形狀，它們會破壞線條的連貫性，讓整套圖標看起來亂糟糟的，沒個統一的調性。
設計總結：
? 靠幾何圖形和統一的造型，打造醒目視覺效果
? 少用纖細、不規則的形狀
這里給大家看一組風格統一的圖標示例。對品牌識別和系統適配來說，保持圖標集的視覺一致性太重要了。
要是把不同風格的圖標混在一起用，用戶根本沒法把它們當成“一家人”。所以同一套圖標里，不管是形狀、線條粗細，還是比例、邊角處理，都得按同一個標準來。
設計總結：
? 單套圖標集里視覺風格要保持統一
? 千萬別混搭不同風格的圖標
在谷歌的Material Design 3 設計規范中，標準 (基線) 圖標尺寸是24dp×24dp，設計時建議按100%的比例來做，這樣能保證像素級的精準度。
除了這個標準尺寸，還有20dp、40dp、48dp這幾種常用尺寸可以選：
20dp：適合用在桌面端、緊湊布局，或者那些小尺寸的視覺元素
40dp/48dp：針對顯示器、大屏幕，還有標題欄這類特殊場景
設計圖標時，內容需要放在有效區域內里。有效區域是指頁面滾動或適配不同設備時圖標不會被遮擋的“安全可視區域”。
如果想讓圖標的視覺沖擊力更強，可以讓內容延伸到有效區域和裁剪區域之間的留白處，但不能超出裁剪區域，不然圖標很容易被裁剪顯示不全。
具體要怎么布局呢？看下面這兩點就夠了：
① 有效區域：圖標內容要放在20dp×20dp的范圍內，四周各留2dp的邊距
② 邊距：給有效區域留出2dp邊距，既能讓圖標和周圍元素拉開視覺距離，又能讓整體看起來更平衡
接下來通過一個圖標案例來簡單總結一下：
上圖從左到右分別代表了在有效區域、在有效區域和裁剪區域、在裁剪區域之外創建的圖標案例。
設計總結：
? 圖標內容保持在20dp×20dp的有效區域里，記得留2dp邊距?? 想加視覺沖擊力？內容可以延伸到邊距區域
? 任何情況下，圖標都不能超出裁剪區域
① 網格和關輔助線
一套圖標中可能有的是圓形，有的是方形，那怎么才能保證形狀不同的圖標保持視覺大小的一致性呢？
這種情況大家在設計圖標時應該都碰到過，解決方法可能大多是通過眼睛對比查看，把看著小的圖標調大一些或者把看著大的圖標調小一點。這種方法效率不高，而且設計出來的圖標大小不容易保持一致性。
這里提供一個更科學和高效的輔助圖標設計方法——使用網格和輔助線，照著這些輔助線來設計圖標，能輕松保持比例一致。
例如常用的24dp×24dp圖標網格，由正方形、圓形、豎矩形、橫矩形這四種基礎輔助線構成。它們就像圖標的“骨架”，能幫所有圖標保持統一的比例和對齊效果，哪怕放大10倍看，結構也照樣清晰。
給大家拆解一下這四種輔助線：
方形輔助線：邊長18dp，是圖標的基礎平衡基準。比如圖表類圖標就可以照著這個方形來畫，保證比例穩定。
圓形輔助線：直徑20dp，用來設計圓潤平衡的圖標。像地球圖標用這個圓形打底，就能和其他圖標和諧搭配。
垂直矩形輔助線：高20dp、寬16dp，適合強調縱向比例的圖標。比如文檔圖標圍著這個豎矩形設計，比例會特別清晰。
水平矩形輔助線：高16dp、寬20dp，適合橫向比例的圖標。像郵件圖標用這個橫矩形當基礎，形狀會很均衡。
一個完整的圖標，由圓角、起始/結束點、內部形狀、外部輪廓等組成。
這里重點說下大家容易踩坑的“圓角”的設計：例如下圖的銀行卡圖標，采用外角2dp圓角、內角尖角的設計，這樣既柔和又利落。
如果把圓角做得太大，如下圖左側文檔圖標，圖標的辨識度就會下降；如果一個圖標中混用不同半徑的圓角，如下圖右側的圖標，整個圖標看著就會很雜亂。
設計總結：
? 按規則設置圓角，統一圓角半徑
? 避免圓角半徑過大/半徑混用的情況
推薦的圖標描邊粗細是2dp或常規 (400)，也可以根據需求靈活調整，例如在MD3設計規范中就提供了100 (細)到700 (粗)的多種選擇。
這里有兩個小技巧：
設計直角線性圖標時，描邊的末端盡量做成直角，例如下圖左側的箭頭圖標，45度切割的直角就很清晰；在下圖右側的添加圖標中，內部的加號也采用了2dp的描邊粗細，與外輪廓保持一致。
另外要注意一套圖標需要保持相同的描邊粗細。如果描邊x粗細不一致，不僅會模糊圖標形狀，還會破壞視覺一致性。
設計總結：
? 描邊粗細保持統一，直角圖標末端也用直角
如果圖標需要一些精細的細節，可以通過一些靈活的調整來提升辨識度，但不能扭曲基礎的幾何形狀或破壞整體比例。
比如回形針圖標，為了在24dp的空間里放下多個曲線，可以把 2dp的標準描邊粗細微調成1.5dp；再比如拉面圖標，下面的碗作為托底采用2dp的粗描邊，上面的筷子拉面等元素細節更多，則采用1.5dp的細描邊，讓細節更清晰。
還有一個小原則：設計復雜圖標時，盡量保持正面視角，別做傾斜、旋轉的等距或者3D效果——多余的深度感會增加識別難度。
設計總結
? 正面視角設計，細節微調不跑偏
? 少用傾斜、旋轉的等距/3D呈現方式
圖標是一種高效的視覺語言，能打破語言壁壘，快速傳遞信息。但它的優勢，必須建立在清晰的結構和統一的規則之上。
設計時基于標準的輔助網格走，保持比例均衡、視覺重量一致，設計出的圖標才不會喧賓奪主，反而能提升整個產品的用戶體驗。
蘭亭妙微（藍藍設計）m.hengshangtqd.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
蘭亭妙微UI設計公司分享：過去，產品經理談界面設計，常常只需要說一句：“這個頁面按后臺系統常規樣式做就行。”
但今天，這句話已經不夠用了。
一方面，AI 產品、SaaS 工具、內容平臺、數據看板、運營后臺越來越多，產品的第一印象越來越依賴界面質感。另一方面，前端開發已經不再是從零開始寫每一個按鈕、表單和彈窗，大多數團隊都會基于成熟的 UI 框架或組件庫快速搭建產品。
所以，產品經理雖然不一定要會寫代碼，但至少應該知道：市面上有哪些常見的前端 UI 框架？它們分別適合什么產品？什么時候該用現成框架，什么時候需要做定制設計？如果你完全不了解這些，很容易在需求評審時提出“不現實的設計要求”，或者在產品視覺層面輸給競品。
這篇文章，就幫產品經理系統梳理一次。
簡單理解，前端 UI 框架就是一套已經設計好、開發好的界面組件集合。
比如：
按鈕、輸入框、下拉選擇器、表格、彈窗、標簽頁、菜單、日期選擇器、上傳組件、通知提醒、側邊欄、數據卡片……
這些都是產品頁面中高頻出現的基礎元素。
如果沒有 UI 框架，前端工程師就需要從零開始寫這些組件，不僅開發效率低，也很難保證不同頁面之間的風格統一。
而有了 UI 框架之后，團隊可以直接調用現成組件，再根據品牌風格進行主題定制。對于產品經理來說，這意味著：
所以，UI 框架并不只是“讓頁面變好看”的工具，它本質上是產品研發效率的一部分。
很多產品經理會覺得：“UI 框架不是前端工程師的事情嗎？我為什么要懂？”
原因很簡單：你不需要會用，但你需要會判斷。
產品經理至少要知道三個問題：
第一，這個產品適合用什么類型的 UI 框架？
一個企業管理后臺，和一個 AI 聊天產品，和一個營銷活動頁面，對界面風格的要求是不一樣的。后臺系統更看重表格、表單、權限、篩選和數據展示；AI 產品更看重現代感、輕量感、動效和交互體驗；官網落地頁則更看重視覺沖擊力和轉化路徑。
第二，UI 框架會影響產品氣質。
同樣是一個管理系統，用 Ant Design、Element Plus、shadcn/ui、HeroUI 做出來的感覺可能完全不同。有的偏企業化，有的偏清爽，有的偏現代，有的偏國際化。
第三，UI 框架會影響需求實現成本。
有些組件框架本身就提供復雜表格、表單校驗、日期選擇、上傳、權限布局等能力，實現成本較低；但如果產品經理提出的交互和框架默認能力差異很大，研發成本就會上升。
所以，懂 UI 框架，不是為了替前端做技術選型，而是為了讓產品經理在設計需求、評估成本、判斷風格時更專業。
前端 UI 框架很多，但產品經理不需要全部掌握。你只需要知道以下幾類。
如果你做過中后臺產品，大概率聽說過 Ant Design。
它最適合的場景是：企業管理后臺、CRM、ERP、數據平臺、運營后臺、權限系統、審批系統、配置系統等。
Ant Design 的優勢是組件非常完整，尤其適合復雜表格、復雜表單、數據篩選、彈窗、菜單、導航、分頁、上傳等中后臺場景。對于國內很多 B 端產品來說，它幾乎已經是一種“默認選擇”。
但它也有一個明顯問題：默認風格比較“企業化”。如果不做主題調整，產品容易看起來像傳統后臺，缺少年輕感和高級感。
產品經理在使用 Ant Design 時要注意一點：它適合提高效率，但不代表產品一定好看。如果是面向外部客戶的 SaaS 產品，最好在顏色、間距、卡片、圖標和數據可視化上做二次設計。
適合場景：
不太適合：
Element Plus 是 Vue 生態里非常常見的 UI 組件庫，很多國內團隊做后臺系統都會用它。
如果你的技術團隊使用 Vue 3，那么 Element Plus 通常會是一個很容易被考慮的選項。它上手成本低，文檔友好，組件也比較完整，適合快速搭建管理系統。
它的產品氣質和 Ant Design 有點類似，都是偏中后臺、偏效率、偏穩定的路線。對于產品經理來說，Element Plus 的核心價值不是“多么驚艷”，而是“穩定、通用、開發快”。
適合場景：
需要注意的是，如果產品對視覺高級感要求很高，Element Plus 默認風格也需要二次設計，否則容易顯得普通。
Naive UI 也是 Vue 3 生態中值得產品經理了解的一套組件庫。
和 Element Plus 相比，Naive UI 的氣質更輕、更現代，視覺上也更清爽一些。它比較適合那些既需要后臺能力，又希望界面不要太傳統的產品。
比如 AI 工具后臺、內容管理系統、知識庫產品、數據分析工具、輕量 SaaS 控制臺等，都可以考慮 Naive UI。
對產品經理來說，Naive UI 的價值在于：它不那么“老派后臺”，同時又具備比較完整的組件能力。如果你希望產品既有效率，又看起來更年輕，它是一個不錯的選擇。
適合場景：
Arco Design 是一套偏企業級的設計系統和組件庫，既有 React 版本，也有 Vue 版本。它的整體風格比傳統企業后臺更年輕，適合需要兼顧效率和視覺感的產品。
如果說 Ant Design 更像成熟穩重的企業后臺，那么 Arco Design 相對更輕、更活潑一些。它適合做企業協同產品、效率工具、數據平臺、SaaS 后臺、運營系統等。
產品經理可以把 Arco Design 理解為：在企業級能力和年輕化視覺之間做平衡的一套方案。
適合場景：
MUI 是 React 生態里很成熟的一套組件庫，基于 Google 的 Material Design 風格。
它的特點是規范感強、組件完整、國際化程度高。很多海外產品、開發者工具、SaaS 產品會使用 MUI。
不過，MUI 的默認風格有比較明顯的 Material Design 特征。如果你的產品希望看起來更“Google 系”，MUI 會比較合適；但如果你希望做出獨特品牌感，就需要進行較多主題定制。
適合場景：
Mantine 是一套比較全能的 React 組件庫。
它的優勢在于組件豐富、hooks 完整、主題定制能力強，適合做各種 Web 應用，尤其適合 SaaS、后臺系統、工具型產品。
和 Ant Design 相比，Mantine 的視覺氣質更輕一些；和 shadcn/ui 相比，它又更像一個完整的組件庫，開箱即用能力更強。
如果你的團隊使用 React，并且想要一個既能快速開發、又不會太傳統的 UI 框架，Mantine 是值得考慮的選擇。
適合場景：
近幾年，Shadcn ui 在 React 和 Next.js 圈子里非常受歡迎。
嚴格來說，它并不是傳統意義上的組件庫。它更像是一套可以復制到自己項目里、再自由改造的組件體系。它的設計風格非常現代，配合 Tailwind CSS 使用，很容易做出高級、干凈、有質感的界面。
這類風格非常適合 AI 產品、SaaS 官網、開發者工具、數據看板、知識庫產品、內容平臺等。
shadcn/ui 的優勢是好看、靈活、可控；缺點是它對前端團隊能力要求更高，不像傳統組件庫那樣“一裝即用”。如果團隊前端能力不錯，它可以做出非常有差異化的產品視覺；如果團隊比較依賴現成組件，使用成本可能會更高。
適合場景：
對產品經理來說，shadcn/ui 值得重點關注。因為現在很多新一代 AI 產品的界面風格，已經不再是傳統后臺，而是更輕、更白、更克制、更高級的設計語言。
HeroUI 也是一套適合 React 項目的現代 UI 組件庫。
它的特點是默認視覺比較好，組件帶有更明顯的現代感和動效感，適合做 AI 工具、創作者產品、社區產品、輕量 SaaS 產品等。
如果產品經理希望產品一開始就有不錯的視覺表現，而不是完全依賴設計師和前端從零調整，HeroUI 會是一個不錯的選擇。
適合場景：
Tailwind CSS 嚴格來說不是 UI 組件庫，而是一套 CSS 工具框架。
你可以把它理解成一套“原子化樣式系統”。它不會直接給你一個完整的表格或彈窗，但它可以讓前端非常靈活地搭建各種界面。
現在很多現代 UI 框架和組件方案都會基于 Tailwind CSS，比如 shadcn/ui、HeroUI 等。
產品經理不需要理解 Tailwind CSS 的寫法，但要知道它代表了一種趨勢：越來越多團隊不滿足于直接套用傳統組件庫，而是希望通過更靈活的樣式系統，做出更有品牌感的界面。
適合場景：
產品經理不需要決定最終技術選型，但可以和設計師、前端一起從以下幾個維度判斷。
如果是企業后臺、管理系統、配置平臺，可以優先考慮 Ant Design、Element Plus、Arco Design。
如果是 AI 產品、SaaS 工具、開發者工具，可以重點關注 shadcn/ui、HeroUI、Mantine。
如果是 Vue 技術棧，可以看 Element Plus、Naive UI、Arco Design Vue。
如果是官網、落地頁、活動頁，可以關注 Tailwind CSS 及其生態組件。
React 項目常見選擇：
Vue 項目常見選擇：
不同框架并不是隨便選的，它和團隊技術棧高度相關。產品經理不要只說“我喜歡這個風格”，還要問一句：“我們現在的前端技術棧適合用它嗎？”
如果產品里有大量復雜表格、篩選、表單、權限、彈窗、上傳、日期選擇，組件完整度非常重要。
這類產品更適合選擇成熟組件庫，比如 Ant Design、Element Plus、Mantine、Arco Design。
如果產品更重視視覺表達、頁面質感和品牌差異化，可以選擇 shadcn/ui、HeroUI、Tailwind CSS 生態。
很多產品的問題不是“沒有 UI 框架”，而是“所有頁面都長得像模板”。
如果你希望產品有自己的品牌感，就不能只依賴默認樣式。產品經理需要關注：
一個成熟產品，最終一定不是簡單套模板，而是形成自己的設計系統。
如果你是做企業中后臺：
優先看 Ant Design、Element Plus、Arco Design。它們組件成熟，適合復雜業務場景，尤其是表格、表單、篩選、權限等能力比較重要的系統。
如果你是做 AI 產品：
優先看 shadcn/ui、HeroUI、Mantine。它們更容易做出現代感和高級感，適合 AI 工具、AI 工作臺、AI 內容平臺、AI Agent 控制臺等產品。
如果你是做 SaaS 產品：
可以根據風格選擇 Mantine、shadcn/ui、Ant Design、Arco Design。如果是偏后臺管理，可以選 Ant Design 或 Arco；如果是偏現代工具，可以選 shadcn/ui 或 Mantine。
如果你是做官網和營銷頁：
可以關注 Tailwind CSS 生態。相比傳統后臺組件庫，它更適合做品牌官網、課程頁、活動頁、產品介紹頁。
如果你是 Vue 團隊：
可以重點看 Element Plus、Naive UI、Arco Design Vue。如果想穩妥，就選 Element Plus；如果想更現代，可以看 Naive UI；如果要企業級完整方案，可以看 Arco Design Vue。
第一個誤區：以為 UI 框架等于設計稿。
UI 框架只是基礎組件，不等于完整設計。真正的產品體驗還包括信息架構、頁面布局、視覺層級、交互路徑、文案表達和品牌調性。
第二個誤區：只看好不好看，不看業務復雜度。
有些框架看起來很美，但不一定適合復雜后臺。如果產品有大量表格、篩選和表單，組件能力比視覺炫酷更重要。
第三個誤區：只追求差異化，忽略開發成本。
如果每個組件都要重寫，每個交互都要高度定制，產品看起來可能更特別，但研發成本和維護成本也會大幅上升。
第四個誤區：認為用了某個框架就一定高級。
同樣使用 shadcn/ui，有的產品很高級，有的產品也會很普通。框架只是起點，最終效果取決于設計能力、前端實現和產品細節。
產品經理了解 UI 框架，不是為了和前端爭論“到底用哪個庫”，而是為了提升產品判斷力。
你至少要能判斷：
當你能回答這些問題，和設計師、前端溝通時就會更專業。
AI 時代，產品經理的能力邊界正在變化。
過去，產品經理重點關注需求、流程和功能；現在，產品經理還需要懂一點界面審美、組件思維、設計系統和研發效率。
前端 UI 框架就是連接產品、設計和研發的重要橋梁。
你不需要成為前端工程師，但你需要知道：
真正優秀的產品經理，不只是會寫需求文檔，也要能判斷一個產品該用什么方式被更高效、更美觀、更可持續地做出來。
這，就是產品經理應該了解前端 UI 框架的原因。
轉載：人人都是產品經理
蘭亭妙微（藍藍設計）m.hengshangtqd.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
當 Toast 內圖標、裝飾元素較多時，畫面容易雜亂松散。可以在主體元素后方增加專屬背板，既能收攏零散元素、強化整體感，還能快速增加視覺層次。
蘭亭妙微（藍藍設計）m.hengshangtqd.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
附 Figma 官方文案節選：無論多少次被宣告 “消亡”，設計始終生生不息。它藏在幫你避免坐過站的地鐵圖里，藏在一目了然的菜單里，也藏在貼心的 App 通知里。設計不是轉瞬即逝的潮流，也不是可被替代的技術，它關乎體驗、關乎感受，而非僅僅追求功能可用。設計屢遭唱衰，卻一次次證明自身不可替代。官方鏈接：https://x.com/figma/status/2061101954034442293
蘭亭妙微（藍藍設計）m.hengshangtqd.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 工具以及大模型的特性，通過組合它們來實現自己目標的方式。這不是設計或產品思維，而是工程思維的具體應用。
蘭亭妙微（藍藍設計）m.hengshangtqd.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
通過制造視覺元素的差異—— 讓 “不一樣” 的元素從周圍環境中凸顯出來，自然成為視覺焦點。
引導用戶注意力優先落在關鍵信息或操作點上，這就是對比原則，我們可以通過形狀的對比讓卡片突出，增加視覺表現力：
在一些視覺頁面中，也可以用異形容器增加視覺表現力，可以結合主題設計容器，例如下方就是一個以紙質火車票造型作為卡片背景的例子：
也可以結合內容設計容器，例如頁面的內容是感謝用戶，就可以從感謝信或者信紙的角度設計容器：
在設計中，想要為卡片或頁面增加形式感，豐富背景是直接且高效的方式，可以從顏色、底紋、裝飾元素這三個核心維度展開，讓背景不再單調，為整體設計加分：
1. 優化顏色增加背景的形式感
可將背景的無彩色（如黑白、灰度色）替換為帶有明確色相的有彩色（如柔和的薄荷綠、清新的天藍、低飽和的珊瑚橙等）
借助 “無彩色與有彩色” 的屬性差異，讓卡片與周圍的淺灰背景或普通卡片形成直觀色彩對比，快速從整體布局中跳脫出來：
也可以將卡片的單一純色設計，升級為多種顏色的漸變效果 —— 通過這種漸變色，讓卡片與周圍的背景、其他組件形成鮮明對比
從而快速從整體布局中凸顯出來，成為視覺焦點，快速抓住用戶注意力：
2. 給背景增加底紋
在背景中增加底紋（如低透明度的幾何紋理、輕微的肌理質感等），不僅可以強化視覺層次，還可以向用戶傳遞頁面的風格氛圍，增強記憶點。
例如科技類產品用細線條網格底紋增強科技感，古風類產品可以用紙張等營造復古的氛圍感：
下面列舉了一些常見的底紋元素，可搭配圖層的混合模式、不透明度使用：
3. 在背景上增加裝飾
可以根據頁面/活動添加合適的裝飾元素，裝飾可以是圖形、文字等與頁面相關的元素。
裝飾元素主要是為了平衡界面視覺，優化整體協調性：當界面存在 “大面積空白” 或 “元素分布不均” 時，裝飾元素可起到 “視覺平衡” 作用。
這里的文字不僅是卡片標題，也可以是活動標題或者頁簽導航，那么文字的設計感可以怎么加呢？我們可以從圖形裝飾、線條裝飾、文字裝飾、背景裝飾四個方面給文字添加設計感：
1. 圖形裝飾
將圖形放在標題空白處增加標題的設計感：
也可以用來填補標題的空白區域，平衡視覺：
用圖形代替文字的某一個筆畫，傳遞產品的氛圍：
2. 線條裝飾
用簡單的線條突出標題，輔助信息分層，突出重點信息，降低認知成本：
3. 文字裝飾
用風格獨特的字體寫一句英文作為標題的裝飾：
另一種方法是將文字放大起到裝飾作用：
4. 背景裝飾
在標題后面增加背景，不僅可以保證標題的可讀性，還能讓標題抓住用戶的眼球，進一步強化視覺表現力：
盡管上面的案例分別展示了不同的提升形式感的方法，但在實際設計中，不必局限于單一形式。
將多種手法靈活組合（比如為卡片搭配有彩色背景的同時，疊加輕量底紋并點綴細節裝飾），更能放大視覺表現力，讓界面擺脫單調感，呈現出更豐富的層次與質感。
如果這篇內容對你有啟發，或是你有其他提升形式感的實用思路，歡迎在評論區分享交流，一起探索更多設計可能性～
轉載：優設
蘭亭妙微（藍藍設計）m.hengshangtqd.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
響應式是一種網頁前端技術，讓網頁可以根據分辨率、設備的變更，自動調整樣式和布局。
它的誕生起源于移動互聯網興起的熱潮，彼時智能手機訪問網站的需求激增，但多數網站的適配都是面向電腦端的大屏幕，僅有少數網站會額外開發符合移動端顯示需求的版本（自適應）。
響應式的提出，就是為了解決這種問題，通過建立一套約定好的設計、開發方法，用一套代碼自動適配臺式電腦、筆記本、平板、移動端等各種設備，提高網站的兼容性和開發效率。
而學習響應式，首先就要從瀏覽器開始說起。
瀏覽器是一個非常特殊的軟件，比如大家熟知的 Chrome、Safari、Eage 等，我們日常訪問的所有網頁，都需要通過瀏覽器加載并渲染出最終的樣式。
可以把網頁 HTML 文件理解成是一個程序，而瀏覽器就是運行這個程序的系統（環境），也就是說解析網頁依靠的是瀏覽器而不是 Windows、Mac、iOS、Android、Linux 等客戶端系統。
瀏覽器即系統中的系統（類似虛擬機)，不管在任何系統或設備上，只要安裝了瀏覽器，就可以用大體相同的規則、邏輯去加載、渲染出網頁。
但不同設備的屏幕有很大差異，網頁如何識別并匹配這些設備呢？
方法主要有兩種，第一種是瀏覽器會識別當前系統和設備，并提供接口讓網頁讀取。而部分網站會準備多種規格的網頁，根據獲取的設備類型推送對應的規格，這種做法叫做自適應模式。
通常自適應只區分桌面端和移動端兩種，較大的門戶、購物、工具類網站，普遍使用自適應模式。因為移動端訪問網頁的需求并不高，所以會對移動端版本做大量的精簡，降低開發、維護成本。
另一種方法，則是讀取瀏覽器視圖區域的分辨率。任何瀏覽器的界面，都包含功能區域和視圖區域兩個部分，功能區域提供相關的軟件菜單、操作按鈕，視圖區域則是顯示網頁界面的區域。隨著設備和屏幕分辨率的變化，瀏覽器的大小也會不同，網頁視圖區域也會跟著縮放。
網頁視圖注定小于整個瀏覽器的軟件窗口，而瀏覽器作為軟件，在系統中的尺寸不等于系統分辨率（或設備分辨率），一方面有系統的全局組件影響，另一方面窗口并不是非得全屏，用戶可以任意調整。
所以響應式網頁就是根據瀏覽器的視圖區域做適配，不管你是在電腦上縮放軟件窗口，還是在不同的設備、系統中打開，本質上都只是顯示區域大小的變更。而在瀏覽器的檢查選項中，模擬不同的設備其實就是縮放出一個指定的視圖窗口出來。
這種依賴關系延伸出一個新的知識點，即網頁顯示的分辨率，和顯示設備的屏幕分辨率，是兩套不同的體系。
這是因為硬件分辨率和系統渲染的分辨率是兩個概念，尤其在今天高分辨率屏幕普及的背景之下。比如我的 Macbook Pro14 寸筆記本，硬件分辨率是 3024 x 1964 (254 ppi)，但在系統的屏幕分辨率選擇中，默認的卻是 1512*982（即原來的 1/2）。
這是因為硬件分辨率太高了，1:1 渲染的話，那么大多數圖標、文字是無法被看清的，所以默認使用了 2x 的規格渲染。但這只是其中一個選項，在 HIDPI 技術的加持下，用戶還可以選擇別的分辨率，比如我會進一步調高到 1800*1169。
在 Windows 系統中同理，雖然有很多高分辨率的屏幕，但是用戶為了看清內容，會在系統中設置 120%、150% 的放大效果，等于為系統分辨率做出變更。
說到底，系統顯示分辨率的規格也是無窮無盡的。但是不管外部的轉換邏輯有多復雜，規格有多少，都和響應式網頁無關，它只需要認準瀏覽器的視圖區域分辨率即可。
所以了解線上案例的響應式布局規則，或者檢查已經開發好的響應式頁面，并不需要切換不同設備查看，只要拖拽縮放瀏覽器的大小（主要是寬度）即可獲得完整的響應效果。
最后總結起來，響應式網頁是面向瀏覽器視圖區域做適配的布局方法，而不是面向系統、屏幕分辨率的適配，這和自適應布局有本質的差異。
在 B 端領域，絕大多數項目都只部分兼容響應式，放棄移動端的適配，即使支持移動端也是使用自適應的混合模式。要面對這些復雜的場景，就月需要理解上面這些基礎的概念，否則設計師就無法真正滿足響應式項目的前期創建和后期交付需要。
轉載：優設
蘭亭妙微（藍藍設計）m.hengshangtqd.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
設計組件庫是提升設計效率和一致性的重要工具，但如何在頻繁迭代和動態調整中高效賦能業務設計交付，一直是行業面臨的挑戰。蘭亭妙微UI設計公司，分享了他們在設計組件庫建設中的新思考和實踐，供大家參考學習。
本文將分享我們對于“什么是好的設計組件”的看法，并給出一種搭建復雜組件的實用思路。我們還會從資產消費的角度，提供一些優化建議。雖然過程中會涉及不少基于Figma軟件的操作細節，但核心思路就像一把“萬能鑰匙”，無論在哪個設計平臺都行之有效，希望這些內容能給廣大設計師們帶來一些新的啟發。
從網上搜索設計組件，我們能找到各種對外公開的設計組件庫，同樣還有不少或概括或詳細的文章，手把手教你“如何搭建一個好的設計組件庫”，但這些方法論很少探討面對C端組件頻繁增改、設計規范動態調整，如何高效賦能業務設計交付的相關內容，但這恰恰是搜索業務面臨的關鍵問題。
搜索是一個“牽一發而動全身”的業務，每一個微小的設計細節都有可能影響各個業務的數據指標，一個“好的設計組件庫”需要以一種潛移默化的方式讓設計師掌握設計規范，完成合規的設計，從這個角度而言它應該比較「好懂」。
而作為服務于整個設計團隊的公用設計組件庫，面對每月數以萬計的調用次數，它必須保障最基本的易用性，應該非常「好用」。
同時，面對頻繁迭代，“好的設計組件”還需要保持最快的更新速度，為各個橫向團隊提供正確的樣式，從這個角度來說它還要「好維護」。
因此，「好懂、好用、好維護」是搜索設計語境下，對一個“好的設計組件”的定義。
接下來，我們將從這三個「好」入手，分享搜索設計組件庫在升級過程中的一些思考，希望能和大家共同探討。
“萬丈高樓平地起”，我們先來說說如何從零開始構建一個既符合設計規范又易于理解的設計組件。
首先，在搭建組件時，我們可以考慮采用多層嵌套的方式，即組件(Component)內部嵌套變體(Instance)。這種方式不僅能省去組件搭建和修改過程中的重復操作，甚至還能在解綁組件時，通過選中內部的子組件圖層進行解綁，大大簡化了搭建和使用雙方的操作流程。
在多層嵌套的思路下，我們可以進一步用“底層靈活、上層收斂”來指導組件的搭建。這意味著底層變體的形式足夠多樣，能夠支持大部分的狀態切換，而在上層組件搭建的過程中顯性地加強規范的指引(如規范中不允許使用的樣式不對外展示)，以降低超出規范設計的可能。
具體的搭建流程可以大致分為三步：場景收集和分析、搭建基本變體組、拓展高階變體組。
我們將通過視頻組件搭建的生動案例，具體介紹如何依據“底層靈活、上層收斂”原則來搭建組件庫，使得組件本身既足夠靈活，又能起到足夠的約束作用。
在著手搭建某類組件時，我們首先通過規范確認和場景遍歷，廣泛收集各類變體。
隨后，從我們能想到的所有維度出發，對這些變體進行細致定義。
這樣，我們就能得到一張詳盡描述組件變體性質的表格。表格的第一列依次列出變體1、變體2、變體3等，而第一行則羅列出各種維度，如寬度、比例等。
通過這種方法，我們可以將原本零散、雜亂的組件變體描述，系統地歸納整理成一張清晰明了的表格。
表格通過不同維度來唯一確定一個變體，這些維度可大致分為兩個特性和一個共性。共性指的是所有變體在這一維度上均保持一致，常見特性則涵蓋了最常見的分類性質，如寬度、高度、數量和優先級等，而業務特性則與具體業務緊密相關。
在搭建組件時，我們可以遵循「共性-常見特性-業務特性」順序，這樣的順序有助于降低理解成本，因為最符合心智的分類被置于外層，同時底層的組件又保持了足夠的靈活性，便于切換各種變量。對于業務特性，我們可以根據實際情況靈活處理，既可以將其作為基本組件的延展，也可以不將其納入組件范疇。
以視頻組件為例，我們從表格中獲取的信息如下：
據此，我們可以輕松梳理出視頻組件搭建流程的優先級：
值得注意的是，“封面槽位”是“播放狀態”中的一個圖層。根據“底層靈活、上層收斂”的原則，我們將其插入到搭建播放狀態之前。
因此，視頻組件的最終搭建流程為：
完成對視頻組件搭建的分析，我們就可以有條不紊地開始搭建組件了。
先搭建基本組件視頻組件，再用基本組件搭建高階組件。
這一步驟雖然為大家所熟知，但仍需格外注意，如配置項的設置要力求合理，也可以融入設計規范和使用規范，同時還應將一些搭建過程中的零散組件集中收納避免被調用。
關于這些具體的注意事項，我們將在后續部分進行詳細闡述。
至此我們完成了組件搭建的基本流程，一個達到及格線的視頻組件就誕生了。
據統計，優化后每次調用視頻組件將節省至少10步的點擊操作！
完成了一個基本組件的搭建后，我們可以轉換視角，從使用的角度來審視并檢查這個組件。
我們期望，從插入組件變體、切換組件配置，再到最后的解綁組件，整個流程都能縱享絲滑且穩定可靠，確保業務設計師在使用過程中獲得最佳體驗。
我們可以一步步來審視組件的使用過程。
首先是插入組件，據觀察，通常有三種方式：
①在左側的資產面板(Assets)中直接找到對應組件并插入；
②通過查閱設計規范，鎖定所需的變體后復制粘貼；
③選中一個不需要的組件，通過右側的“切換變體”面板(Swap instance)切換成所需的變體。
很明顯，在這個過程中依賴的是組件的精準搜索和快速定位。
為了提升搜索精度，我們可以從組件命名入手，采用中、英、數字結合的方式，實現模糊匹配；也可以在發布時隱藏不希望被調用的組件，以減少無用的搜索結果。
如果組件是采用前文提到的“多層嵌套”方式搭建的，我們可以添加“Preferred”子組件，這樣在切換時會優先展示這些子組件，這個功能在切換圖標時尤為實用。
對于習慣邊查閱設計規范邊使用組件的設計師，我們增加了更多實際使用的正誤案例，這些案例直觀展示了組件變體的正確選擇和使用方式，進一步降低了規范的理解成本，有效輔助設計決策。同時，我們專門維護了一個固定區域，用于平鋪展示所有組件變體。
為了確保能夠輕松點選，我們將變體放在最外層展示(即不在任何Frame、Group或Section中)。這樣能讓設計師一目了然地看到所有變體，從而快速選擇所需的組件。
在組件配置階段，有三項注意點能讓組件更加易用，即“重視組件的可視化效果、設置高效易用的配置項、貼心地保存修改”。
考慮到C端組件的多樣性和用戶的使用習慣，我們應避免使用過于復雜的分組方式。相反，應更注重組件的樣式展示，并盡量簡化組件的層級結構。這樣，設計師在使用時能夠更直觀地看到組件的外觀，而無需深入復雜的層級去查找。
另外值得注意的是，Figma會默認用組件集合中最左上角的組件生成預覽樣式，因此應當把視覺上最有代表性的變體放在左上角，這個效果在切換變體(Swap instance)時很重要，因為目前在該面板中沒法查看組件細節，只能靠縮略圖和名稱來推測是哪個組件。
其次對于配置項的設置也大有講究，業界有組件庫為了實現C2D2C，從源頭上將設計組件和前端組件的配置項打平，這是不錯的思路，但有可能會提升設計側的理解成本。
針對搜索業務的特殊語境，我們還是選擇了從「規范理解」角度去設置組件的配置項，將所有允許自定義的配置盡可能外露，并清晰地說明修改限制，如字數限定、選項個數等，這樣能夠在使用的過程中強化業務設計師對規范的掌握。
另一個常常被忽視的關鍵點是選項和配置的排序問題。為了提高瀏覽和選擇的效率，建議對選項和選項之間，以及外層的不同配置項，都按照一定的邏輯順序進行排序。
最后一點，我們稱之為“貼心地保存修改”機制，這個針對的是文字修改的場景。
在實際操作中，使用一個組件可能需要對多個配置項進行修改。有時在修改完文字內容后再去調整其他配置時，已修改的文字會被重置。這時文本屬性(text property)的設置就顯得尤為重要，它能夠記憶并保存修改過的文字內容，從而免于重復輸入。
還有一些情況是，某個組件變體實際上并沒有與某個值相對應的組件(盡管Figma機制允許選擇該值)，用戶切換后就會發現組件完全變了，只能撤回。
為了避免這類情況，建議使用另外的標記來表明組件某個設置項是不可切換的。
完成了組件的搭建和檢查，接下來讓我們聚焦于組件的日常維護。
這一環節可以從兩個維度展開，一是依托中臺的日常數據監控進行維護，二是通過團隊內部的緊密協同機制來保障。后者更多側重協作流程和機制上的建設，在本文中我們不做更多展開，重點討論前者。
數據監控的方式主要依托Figma中的組件數據看板(查看路徑：View libraries-Analytics)，看板中展示了各個組件的調用數和解綁數數據，這些數據不直接反映組件的優劣，但如果我們觀測到某個組件解綁率偏高，我們會考慮直接把它作為模板而不是創建成組件。
以上是百度搜索設計團隊在設計組件庫升級過程中的心得分享，包括搜索業務對于“好的設計組件”的訴求，以及一些搭建和優化組件的實用思路，核心是探討如何從組件庫建設的角度入手，成功助力團隊提升設計資產消費效率。
當前我們已經完成設計資產工程化的前序環節，我們對設計資產的升級和探索并沒有結束，未來我們將持續探索設計系統工具化的形態、與AI大模型結合的機會，通過豐富消費途徑，實現在業務交付的不同階段下全方位提效。
這部分內容后續有機會也將會和大家見面，請大家期待！
轉載：人人都是產品經理
蘭亭妙微（藍藍設計）m.hengshangtqd.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
藍藍設計的小編 http://m.hengshangtqd.cn
