蘭亭妙微UI設(shè)計公司分享：過去，產(chǎn)品經(jīng)理談界面設(shè)計，常常只需要說一句：“這個頁面按后臺系統(tǒng)常規(guī)樣式做就行。”

但今天，這句話已經(jīng)不夠用了。

一方面，AI 產(chǎn)品、SaaS 工具、內(nèi)容平臺、數(shù)據(jù)看板、運營后臺越來越多，產(chǎn)品的第一印象越來越依賴界面質(zhì)感。另一方面，前端開發(fā)已經(jīng)不再是從零開始寫每一個按鈕、表單和彈窗，大多數(shù)團隊都會基于成熟的 UI 框架或組件庫快速搭建產(chǎn)品。

所以，產(chǎn)品經(jīng)理雖然不一定要會寫代碼，但至少應(yīng)該知道：市面上有哪些常見的前端 UI 框架？它們分別適合什么產(chǎn)品？什么時候該用現(xiàn)成框架，什么時候需要做定制設(shè)計？如果你完全不了解這些，很容易在需求評審時提出“不現(xiàn)實的設(shè)計要求”，或者在產(chǎn)品視覺層面輸給競品。

這篇文章，就幫產(chǎn)品經(jīng)理系統(tǒng)梳理一次。

一、什么是前端 UI 框架？

簡單理解，前端 UI 框架就是一套已經(jīng)設(shè)計好、開發(fā)好的界面組件集合。

比如：

按鈕、輸入框、下拉選擇器、表格、彈窗、標簽頁、菜單、日期選擇器、上傳組件、通知提醒、側(cè)邊欄、數(shù)據(jù)卡片……

這些都是產(chǎn)品頁面中高頻出現(xiàn)的基礎(chǔ)元素。

如果沒有 UI 框架，前端工程師就需要從零開始寫這些組件，不僅開發(fā)效率低，也很難保證不同頁面之間的風(fēng)格統(tǒng)一。

而有了 UI 框架之后，團隊可以直接調(diào)用現(xiàn)成組件，再根據(jù)品牌風(fēng)格進行主題定制。對于產(chǎn)品經(jīng)理來說，這意味著：

• 頁面開發(fā)速度更快；
• 交互一致性更強；
• 設(shè)計和研發(fā)溝通成本更低；
• 后續(xù)維護和迭代更可控。

所以，UI 框架并不只是“讓頁面變好看”的工具，它本質(zhì)上是產(chǎn)品研發(fā)效率的一部分。

二、產(chǎn)品經(jīng)理為什么需要了解 UI 框架？

很多產(chǎn)品經(jīng)理會覺得：“UI 框架不是前端工程師的事情嗎？我為什么要懂？”

原因很簡單：你不需要會用，但你需要會判斷。

產(chǎn)品經(jīng)理至少要知道三個問題：

第一，這個產(chǎn)品適合用什么類型的 UI 框架？

一個企業(yè)管理后臺，和一個 AI 聊天產(chǎn)品，和一個營銷活動頁面，對界面風(fēng)格的要求是不一樣的。后臺系統(tǒng)更看重表格、表單、權(quán)限、篩選和數(shù)據(jù)展示；AI 產(chǎn)品更看重現(xiàn)代感、輕量感、動效和交互體驗；官網(wǎng)落地頁則更看重視覺沖擊力和轉(zhuǎn)化路徑。

第二，UI 框架會影響產(chǎn)品氣質(zhì)。

同樣是一個管理系統(tǒng)，用 Ant Design、Element Plus、shadcn/ui、HeroUI 做出來的感覺可能完全不同。有的偏企業(yè)化，有的偏清爽，有的偏現(xiàn)代，有的偏國際化。

第三，UI 框架會影響需求實現(xiàn)成本。

有些組件框架本身就提供復(fù)雜表格、表單校驗、日期選擇、上傳、權(quán)限布局等能力，實現(xiàn)成本較低；但如果產(chǎn)品經(jīng)理提出的交互和框架默認能力差異很大，研發(fā)成本就會上升。

所以，懂 UI 框架，不是為了替前端做技術(shù)選型，而是為了讓產(chǎn)品經(jīng)理在設(shè)計需求、評估成本、判斷風(fēng)格時更專業(yè)。

三、產(chǎn)品經(jīng)理必知的幾類前端 UI 框架

前端 UI 框架很多，但產(chǎn)品經(jīng)理不需要全部掌握。你只需要知道以下幾類。

1. Ant Design：企業(yè)級后臺系統(tǒng)的經(jīng)典選擇

如果你做過中后臺產(chǎn)品，大概率聽說過 Ant Design。

它最適合的場景是：企業(yè)管理后臺、CRM、ERP、數(shù)據(jù)平臺、運營后臺、權(quán)限系統(tǒng)、審批系統(tǒng)、配置系統(tǒng)等。

Ant Design 的優(yōu)勢是組件非常完整，尤其適合復(fù)雜表格、復(fù)雜表單、數(shù)據(jù)篩選、彈窗、菜單、導(dǎo)航、分頁、上傳等中后臺場景。對于國內(nèi)很多 B 端產(chǎn)品來說，它幾乎已經(jīng)是一種“默認選擇”。

但它也有一個明顯問題：默認風(fēng)格比較“企業(yè)化”。如果不做主題調(diào)整，產(chǎn)品容易看起來像傳統(tǒng)后臺，缺少年輕感和高級感。

產(chǎn)品經(jīng)理在使用 Ant Design 時要注意一點：它適合提高效率，但不代表產(chǎn)品一定好看。如果是面向外部客戶的 SaaS 產(chǎn)品，最好在顏色、間距、卡片、圖標和數(shù)據(jù)可視化上做二次設(shè)計。

適合場景：

• 企業(yè)后臺
• SaaS 管理系統(tǒng)
• 數(shù)據(jù)看板
• 權(quán)限管理系統(tǒng)
• 運營配置平臺

不太適合：

• 強品牌感官網(wǎng)
• 高級感 AI 產(chǎn)品首頁
• 視覺表達要求很強的 C 端產(chǎn)品

2. Element Plus：Vue 技術(shù)棧里的后臺常用選擇

Element Plus 是 Vue 生態(tài)里非常常見的 UI 組件庫，很多國內(nèi)團隊做后臺系統(tǒng)都會用它。

如果你的技術(shù)團隊使用 Vue 3，那么 Element Plus 通常會是一個很容易被考慮的選項。它上手成本低，文檔友好，組件也比較完整，適合快速搭建管理系統(tǒng)。

它的產(chǎn)品氣質(zhì)和 Ant Design 有點類似，都是偏中后臺、偏效率、偏穩(wěn)定的路線。對于產(chǎn)品經(jīng)理來說，Element Plus 的核心價值不是“多么驚艷”，而是“穩(wěn)定、通用、開發(fā)快”。

適合場景：

• Vue 技術(shù)棧后臺系統(tǒng)
• 內(nèi)部管理平臺
• 表單密集型產(chǎn)品
• 快速搭建 MVP
• 運營管理系統(tǒng)

需要注意的是，如果產(chǎn)品對視覺高級感要求很高，Element Plus 默認風(fēng)格也需要二次設(shè)計，否則容易顯得普通。

3. Naive UI：更清爽現(xiàn)代的 Vue 組件庫

Naive UI 也是 Vue 3 生態(tài)中值得產(chǎn)品經(jīng)理了解的一套組件庫。

和 Element Plus 相比，Naive UI 的氣質(zhì)更輕、更現(xiàn)代，視覺上也更清爽一些。它比較適合那些既需要后臺能力，又希望界面不要太傳統(tǒng)的產(chǎn)品。

比如 AI 工具后臺、內(nèi)容管理系統(tǒng)、知識庫產(chǎn)品、數(shù)據(jù)分析工具、輕量 SaaS 控制臺等，都可以考慮 Naive UI。

對產(chǎn)品經(jīng)理來說，Naive UI 的價值在于：它不那么“老派后臺”，同時又具備比較完整的組件能力。如果你希望產(chǎn)品既有效率，又看起來更年輕，它是一個不錯的選擇。

適合場景：

• Vue 3 項目
• 清爽型后臺
• AI 工具管理端
• 內(nèi)容平臺后臺
• 輕量 SaaS 產(chǎn)品

4. Arco Design：適合年輕化企業(yè)產(chǎn)品

Arco Design 是一套偏企業(yè)級的設(shè)計系統(tǒng)和組件庫，既有 React 版本，也有 Vue 版本。它的整體風(fēng)格比傳統(tǒng)企業(yè)后臺更年輕，適合需要兼顧效率和視覺感的產(chǎn)品。

如果說 Ant Design 更像成熟穩(wěn)重的企業(yè)后臺，那么 Arco Design 相對更輕、更活潑一些。它適合做企業(yè)協(xié)同產(chǎn)品、效率工具、數(shù)據(jù)平臺、SaaS 后臺、運營系統(tǒng)等。

產(chǎn)品經(jīng)理可以把 Arco Design 理解為：在企業(yè)級能力和年輕化視覺之間做平衡的一套方案。

適合場景：

• 企業(yè)級 SaaS
• 協(xié)同辦公產(chǎn)品
• 數(shù)據(jù)分析平臺
• 運營后臺
• 年輕化 B 端產(chǎn)品

5. MUI：適合國際化產(chǎn)品和 Material Design 風(fēng)格

MUI 是 React 生態(tài)里很成熟的一套組件庫，基于 Google 的 Material Design 風(fēng)格。

它的特點是規(guī)范感強、組件完整、國際化程度高。很多海外產(chǎn)品、開發(fā)者工具、SaaS 產(chǎn)品會使用 MUI。

不過，MUI 的默認風(fēng)格有比較明顯的 Material Design 特征。如果你的產(chǎn)品希望看起來更“Google 系”，MUI 會比較合適；但如果你希望做出獨特品牌感，就需要進行較多主題定制。

適合場景：

• 國際化 SaaS
• React 項目
• 工具型產(chǎn)品
• 海外用戶產(chǎn)品
• Material Design 風(fēng)格產(chǎn)品

6. Mantine：React 生態(tài)里的全能型選手

Mantine 是一套比較全能的 React 組件庫。

它的優(yōu)勢在于組件豐富、hooks 完整、主題定制能力強，適合做各種 Web 應(yīng)用，尤其適合 SaaS、后臺系統(tǒng)、工具型產(chǎn)品。

和 Ant Design 相比，Mantine 的視覺氣質(zhì)更輕一些；和 shadcn/ui 相比，它又更像一個完整的組件庫，開箱即用能力更強。

如果你的團隊使用 React，并且想要一個既能快速開發(fā)、又不會太傳統(tǒng)的 UI 框架，Mantine 是值得考慮的選擇。

適合場景：

• React SaaS 產(chǎn)品
• 工具型 Web 應(yīng)用
• 管理后臺
• 表單密集型產(chǎn)品
• 中小型商業(yè)產(chǎn)品

7. Shadcn ui：當下很適合 AI 產(chǎn)品的現(xiàn)代組件方案

近幾年，Shadcn ui 在 React 和 Next.js 圈子里非常受歡迎。

嚴格來說，它并不是傳統(tǒng)意義上的組件庫。它更像是一套可以復(fù)制到自己項目里、再自由改造的組件體系。它的設(shè)計風(fēng)格非常現(xiàn)代，配合 Tailwind CSS 使用，很容易做出高級、干凈、有質(zhì)感的界面。

這類風(fēng)格非常適合 AI 產(chǎn)品、SaaS 官網(wǎng)、開發(fā)者工具、數(shù)據(jù)看板、知識庫產(chǎn)品、內(nèi)容平臺等。

shadcn/ui 的優(yōu)勢是好看、靈活、可控；缺點是它對前端團隊能力要求更高，不像傳統(tǒng)組件庫那樣“一裝即用”。如果團隊前端能力不錯，它可以做出非常有差異化的產(chǎn)品視覺；如果團隊比較依賴現(xiàn)成組件，使用成本可能會更高。

適合場景：

• AI 產(chǎn)品
• Next.js 項目
• SaaS 控制臺
• 開發(fā)者工具
• 高級感管理后臺
• 需要定制化設(shè)計系統(tǒng)的產(chǎn)品

對產(chǎn)品經(jīng)理來說，shadcn/ui 值得重點關(guān)注。因為現(xiàn)在很多新一代 AI 產(chǎn)品的界面風(fēng)格，已經(jīng)不再是傳統(tǒng)后臺，而是更輕、更白、更克制、更高級的設(shè)計語言。

8. HeroUI：適合想要默認就好看的 React 產(chǎn)品

HeroUI 也是一套適合 React 項目的現(xiàn)代 UI 組件庫。

它的特點是默認視覺比較好，組件帶有更明顯的現(xiàn)代感和動效感，適合做 AI 工具、創(chuàng)作者產(chǎn)品、社區(qū)產(chǎn)品、輕量 SaaS 產(chǎn)品等。

如果產(chǎn)品經(jīng)理希望產(chǎn)品一開始就有不錯的視覺表現(xiàn)，而不是完全依賴設(shè)計師和前端從零調(diào)整，HeroUI 會是一個不錯的選擇。

適合場景：

• AI 工具
• 創(chuàng)作者工具
• 輕量 SaaS
• 社區(qū)產(chǎn)品
• 現(xiàn)代化 Web 應(yīng)用

9. Tailwind CSS：不是組件庫，但產(chǎn)品經(jīng)理也應(yīng)該知道

Tailwind CSS 嚴格來說不是 UI 組件庫，而是一套 CSS 工具框架。

你可以把它理解成一套“原子化樣式系統(tǒng)”。它不會直接給你一個完整的表格或彈窗，但它可以讓前端非常靈活地搭建各種界面。

現(xiàn)在很多現(xiàn)代 UI 框架和組件方案都會基于 Tailwind CSS，比如 shadcn/ui、HeroUI 等。

產(chǎn)品經(jīng)理不需要理解 Tailwind CSS 的寫法，但要知道它代表了一種趨勢：越來越多團隊不滿足于直接套用傳統(tǒng)組件庫，而是希望通過更靈活的樣式系統(tǒng)，做出更有品牌感的界面。

適合場景：

• 高定制化官網(wǎng)
• SaaS 官網(wǎng)
• AI 產(chǎn)品頁面
• 需要強視覺表達的產(chǎn)品
• 自建設(shè)計系統(tǒng)

四、產(chǎn)品經(jīng)理應(yīng)該如何選擇 UI 框架？

產(chǎn)品經(jīng)理不需要決定最終技術(shù)選型，但可以和設(shè)計師、前端一起從以下幾個維度判斷。

1. 先看產(chǎn)品類型

如果是企業(yè)后臺、管理系統(tǒng)、配置平臺，可以優(yōu)先考慮 Ant Design、Element Plus、Arco Design。

如果是 AI 產(chǎn)品、SaaS 工具、開發(fā)者工具，可以重點關(guān)注 shadcn/ui、HeroUI、Mantine。

如果是 Vue 技術(shù)棧，可以看 Element Plus、Naive UI、Arco Design Vue。

如果是官網(wǎng)、落地頁、活動頁，可以關(guān)注 Tailwind CSS 及其生態(tài)組件。

2. 再看技術(shù)棧

React 項目常見選擇：

• Ant Design
• MUI
• Mantine
• shadcn/ui
• HeroUI
• Arco Design React

Vue 項目常見選擇：

• Element Plus
• Naive UI
• Arco Design Vue
• shadcn-vue

不同框架并不是隨便選的，它和團隊技術(shù)棧高度相關(guān)。產(chǎn)品經(jīng)理不要只說“我喜歡這個風(fēng)格”，還要問一句：“我們現(xiàn)在的前端技術(shù)棧適合用它嗎？”

3. 看組件完整度

如果產(chǎn)品里有大量復(fù)雜表格、篩選、表單、權(quán)限、彈窗、上傳、日期選擇，組件完整度非常重要。

這類產(chǎn)品更適合選擇成熟組件庫，比如 Ant Design、Element Plus、Mantine、Arco Design。

如果產(chǎn)品更重視視覺表達、頁面質(zhì)感和品牌差異化，可以選擇 shadcn/ui、HeroUI、Tailwind CSS 生態(tài)。

4. 看設(shè)計定制能力

很多產(chǎn)品的問題不是“沒有 UI 框架”，而是“所有頁面都長得像模板”。

如果你希望產(chǎn)品有自己的品牌感，就不能只依賴默認樣式。產(chǎn)品經(jīng)理需要關(guān)注：

• 是否支持主題色定制？
• 是否支持暗黑模式？
• 組件間距能不能統(tǒng)一調(diào)整？
• 按鈕、卡片、表格、彈窗是否能形成統(tǒng)一設(shè)計語言？
• 設(shè)計稿和前端組件是否能長期保持一致？

一個成熟產(chǎn)品，最終一定不是簡單套模板，而是形成自己的設(shè)計系統(tǒng)。

五、不同產(chǎn)品場景的推薦選擇

如果你是做企業(yè)中后臺：

優(yōu)先看 Ant Design、Element Plus、Arco Design。它們組件成熟，適合復(fù)雜業(yè)務(wù)場景，尤其是表格、表單、篩選、權(quán)限等能力比較重要的系統(tǒng)。

如果你是做 AI 產(chǎn)品：

優(yōu)先看 shadcn/ui、HeroUI、Mantine。它們更容易做出現(xiàn)代感和高級感，適合 AI 工具、AI 工作臺、AI 內(nèi)容平臺、AI Agent 控制臺等產(chǎn)品。

如果你是做 SaaS 產(chǎn)品：

可以根據(jù)風(fēng)格選擇 Mantine、shadcn/ui、Ant Design、Arco Design。如果是偏后臺管理，可以選 Ant Design 或 Arco；如果是偏現(xiàn)代工具，可以選 shadcn/ui 或 Mantine。

如果你是做官網(wǎng)和營銷頁：

可以關(guān)注 Tailwind CSS 生態(tài)。相比傳統(tǒng)后臺組件庫，它更適合做品牌官網(wǎng)、課程頁、活動頁、產(chǎn)品介紹頁。

如果你是 Vue 團隊：

可以重點看 Element Plus、Naive UI、Arco Design Vue。如果想穩(wěn)妥，就選 Element Plus；如果想更現(xiàn)代，可以看 Naive UI；如果要企業(yè)級完整方案，可以看 Arco Design Vue。

六、產(chǎn)品經(jīng)理要避免的幾個誤區(qū)

第一個誤區(qū)：以為 UI 框架等于設(shè)計稿。

UI 框架只是基礎(chǔ)組件，不等于完整設(shè)計。真正的產(chǎn)品體驗還包括信息架構(gòu)、頁面布局、視覺層級、交互路徑、文案表達和品牌調(diào)性。

第二個誤區(qū)：只看好不好看，不看業(yè)務(wù)復(fù)雜度。

有些框架看起來很美，但不一定適合復(fù)雜后臺。如果產(chǎn)品有大量表格、篩選和表單，組件能力比視覺炫酷更重要。

第三個誤區(qū)：只追求差異化，忽略開發(fā)成本。

如果每個組件都要重寫，每個交互都要高度定制，產(chǎn)品看起來可能更特別，但研發(fā)成本和維護成本也會大幅上升。

第四個誤區(qū)：認為用了某個框架就一定高級。

同樣使用 shadcn/ui，有的產(chǎn)品很高級，有的產(chǎn)品也會很普通。框架只是起點，最終效果取決于設(shè)計能力、前端實現(xiàn)和產(chǎn)品細節(jié)。

七、產(chǎn)品經(jīng)理真正應(yīng)該掌握的不是框架名字，而是選型邏輯

產(chǎn)品經(jīng)理了解 UI 框架，不是為了和前端爭論“到底用哪個庫”，而是為了提升產(chǎn)品判斷力。

你至少要能判斷：

• 這個產(chǎn)品是偏后臺，還是偏前臺？
• 是效率優(yōu)先，還是品牌優(yōu)先？
• 是快速上線，還是長期打造設(shè)計系統(tǒng)？
• 是 React 技術(shù)棧，還是 Vue 技術(shù)棧？
• 是重表格表單，還是重視覺體驗？
• 是內(nèi)部系統(tǒng)，還是面向用戶的商業(yè)產(chǎn)品？

當你能回答這些問題，和設(shè)計師、前端溝通時就會更專業(yè)。

結(jié)語：未來的產(chǎn)品經(jīng)理，要懂一點前端審美和工程效率

AI 時代，產(chǎn)品經(jīng)理的能力邊界正在變化。

過去，產(chǎn)品經(jīng)理重點關(guān)注需求、流程和功能；現(xiàn)在，產(chǎn)品經(jīng)理還需要懂一點界面審美、組件思維、設(shè)計系統(tǒng)和研發(fā)效率。

前端 UI 框架就是連接產(chǎn)品、設(shè)計和研發(fā)的重要橋梁。

你不需要成為前端工程師，但你需要知道：

• 做企業(yè)后臺時，為什么很多團隊會選擇 Ant Design 或 Element Plus；
• 做現(xiàn)代 AI 產(chǎn)品時，為什么越來越多團隊關(guān)注 shadcn/ui、HeroUI 和 Tailwind CSS；
• 做 SaaS 產(chǎn)品時，為什么組件庫不僅影響開發(fā)速度，也影響用戶對產(chǎn)品專業(yè)度的第一印象。

真正優(yōu)秀的產(chǎn)品經(jīng)理，不只是會寫需求文檔，也要能判斷一個產(chǎn)品該用什么方式被更高效、更美觀、更可持續(xù)地做出來。

這，就是產(chǎn)品經(jīng)理應(yīng)該了解前端 UI 框架的原因。

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

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

談?wù)?AI 就繞不開大模型，它是 AI 技術(shù)應(yīng)用的核心。

簡單解釋 AI 大模型，就是一個通過特定方法和大量數(shù)據(jù)訓(xùn)練出來的 “自主化程序”，這個程序可以根據(jù)用戶輸入的指令自己做出 “判斷和思考” 后再進行回復(fù)。

傳統(tǒng)程序雖然也可以執(zhí)行用戶的指令，但回復(fù)的內(nèi)容和方式不會超出一開始預(yù)設(shè)的范圍，非常有限。

而 AI 大模型則大大拓展了這個邊界，我們不用提前預(yù)設(shè)各種條件和邏輯，它就會自己去理解問題再決定給出什么結(jié)果。

當然，這個邊界只是不能生成圖片(截止到2026年初)。而 Google 開發(fā)的 Gemini 大模型則是多模態(tài)模型，可以生成圖片和視頻等內(nèi)容。

不同模型會有不同的表現(xiàn)和優(yōu)劣，但因為大模型的開發(fā)需要尖端的技術(shù)和龐大的規(guī)模（訓(xùn)練），門檻極高，所以市面上主流的大模型數(shù)量并不多，可以簡單分為國內(nèi)和國外兩個陣營。

國外的主流大模型包括 OpenAi 開發(fā)的 ChatGPT，Google 開發(fā)的 Gemini，Anthropic 開發(fā)的 Claude，xAI 的 Grok 等。

國內(nèi)的主流大模型則包括字節(jié)開發(fā)的豆包，阿里開發(fā)的千問 Qwen，深度求索開發(fā)的 Deepseek，月之暗面開發(fā)的 Kimi 等。

因為前面說過大模型的局限性，所以為了應(yīng)對不同的應(yīng)用場景，團隊就會將它們裂變出不同的版本。比如千問既有 Max 語言大模型，還有 Omni 全模態(tài)（文字、圖片、音頻、視頻）大模型，針對處理問題的難易度又分成了 Max、Plus、Flash、Lite 等版本。

完整的大模型體積和參數(shù)都非常龐大，需要部署到專屬的算力中心，并通過云服務(wù)來實現(xiàn)用戶的訪問和使用。也就是需要聯(lián)網(wǎng)使用，但因為國內(nèi)網(wǎng)絡(luò)服務(wù)的限制（不可抗力），我們無法通過國內(nèi)電信訪問國外的主流大模型。

雖然說國內(nèi)大模型的水平在這幾年突飛猛進，但離國外的大模型還有一定的差距，在實際工作場景中多數(shù)應(yīng)用的也是國外大模型，所以訪問它們就需要大家自己發(fā)揮主觀能動性解決了。

順便再解釋一個基礎(chǔ)的問題，大模型除了遠程訪問以外，也可以在本地進行安裝。部分團隊（如千問）會在網(wǎng)上開源自己的大模型供其它人下載和使用，當我們下載到本地后就可以用 GPU 來運行它。但因為大模型對性能的要求極高（旗艦顯卡起步），所以本地運行的效果要大打折扣。

而一些企業(yè)內(nèi)部或行業(yè)專屬的大模型，往往都是使用這些開源大模型進行二次訓(xùn)練和調(diào)試后的結(jié)果。還有一些針對特定硬件（如手機、眼鏡）和特殊應(yīng)用場景開發(fā)的小模型，就暫時不在我們的討論范圍之內(nèi)。

三、AI 相關(guān)工具的認識

前面講過大模型可以類比成一種 “程序”，且它還是后端服務(wù)器上運行的程序。想要對這個程序?qū)崿F(xiàn)命令的輸入并返回它處理的結(jié)果，就需要應(yīng)用前端的工具來實現(xiàn)。

比如我們打開豆包的官網(wǎng)，就可以使用這個網(wǎng)頁對豆包大模型提出問題和要求，然后網(wǎng)頁上就會返回它處理后的結(jié)果。這個網(wǎng)頁就是使用大模型的工具，而這只是 AI 工具的其中一種形式，還可以是本地應(yīng)用程序、手機 APP、小程序、硬件定制系統(tǒng)等等。

我們大多數(shù)人開始接觸 AI 大模型，都是從這些官方的工具開始，它們最基本的功能就是根據(jù)指令返回文字或圖片信息，我們會把它們當成是一種可以對話的人工智能客服。

但實際上它們可以發(fā)揮的作用遠不止于此，比如幫你整理本地的文件夾清理重復(fù)的文件，幫你自動修圖并完成動態(tài)相片的剪輯，幫你編寫程序并自己運行和檢測等等。想要實現(xiàn)對話以外的其它功能，就需要借助特定的工具才能實現(xiàn)。

所以除了最基礎(chǔ)的對話工具外，行業(yè)還衍生出了很多激發(fā)大模型潛力的 AI 工具。它們可以借助大模型完成程序開發(fā)、視頻剪輯、操作托管、熱點整理、消息推送等等。

到這里我們就要清楚，AI 大模型是大模型，工具是工具，大模型是基座，而工具是大模型的具體表現(xiàn)和應(yīng)用形式。

我們更進一步認識 AI 工具，就可以把AI工具分成官方工具和第三方工具兩個種類。

官方工具就是 OpenAI、Google 等大模型企業(yè)自己開發(fā)并綁定自家大模型的產(chǎn)品，而第三方工具則是其它團隊開發(fā)，再接入到大模型進行使用的工具。

比如本地聊天機器人 Cherry Studio，它本身只是個簡單的聊天對話工具，可以自己創(chuàng)建對話角色/助手，但需要接入大模型以后才能進行對話。還有著名的AI編程工具 Cusror，只有接入大模型以后，它才可以實現(xiàn) AI 編程和代碼管理。還有前陣子火遍全球的龍蝦 Openclaw，也只是個本地工具，需要接入大模型后才能識別本地的文件和執(zhí)行命令。

官方能提供的 AI 工具與服務(wù)往往很有限，所以在真實項目流程中，我們就會混合使用多種工具來完成工作。就像以前做一套項目除了用 Figma以外，還要結(jié)合使用 Adobe PS、AI、C4D、AE 等軟件。

而第三方工具和官方不同的是，官方工具默認連接自家的大模型，用戶直接登錄就能使用。而第三方工具要接入大模型，就需要進行額外的配置，也就是添加大模型的 —— API。

API 就是接口，是前端工具連接后端服務(wù)器的通道，而這個通道默認是上鎖的，還需要提供對應(yīng)的密鑰（API Key）才能正常訪問。

部分工具會自己接入各大模型的 API，用戶只能選擇它提供的模型，并只需要對這個工具進行付費即可。

另一部分工具則需要用戶自己選擇模型和配置 API，需要我們訪問大模型的 API 開放平臺進行申請，然后再將它們生成的 API Key 填入到工具中完成連接。

API Key 就像是一個電話號碼，當我們申請完并進行使用，就會產(chǎn)生一定的 “流量”，而 AI 產(chǎn)生的流量用專業(yè)術(shù)語形容叫詞元 Token。

使用 API 完成的任意 AI 服務(wù)，都會消耗 Token，且因為 AI 的計算成本極高，所以主流大模型都會針對 Token 消耗量進行收費。就像電信運營商一樣，既有包月服務(wù)附帶一部分流量，超出部分還要按量計費。

在實際的 AI 工具使用過程中，Token 的消耗是極其巨大的，往往會造成沉重的成本，而這個市場也遵循一分錢一分貨的真理，越好的大模型價格就越貴。以最適合編程的大模型 Claude Opus 為例， 一個程序員高頻使用消耗的 Token 賬單可以從數(shù)千到數(shù)萬元不等。所以我們也會從性價比的角度出發(fā)，來搭配不同的模型進行使用。

總結(jié)我們應(yīng)用 AI 的本質(zhì)，就是通過工具來操作大模型。而工具的作用不同，大模型本身的特性和價格也不同，就導(dǎo)致我們在面對一個復(fù)雜的任務(wù)時，需要選擇多種 AI 工具和不同大模型來實現(xiàn)。

學(xué)習(xí)使用 AI，和傳統(tǒng)的單一軟件教學(xué)不同，不是只學(xué)會某個工具的功能和操作方法，而是了解不同的 AI 工具以及大模型的特性，通過組合它們來實現(xiàn)自己目標的方式。這不是設(shè)計或產(chǎn)品思維，而是工程思維的具體應(yīng)用。

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

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

一、異形容器

通過制造視覺元素的差異—— 讓 “不一樣” 的元素從周圍環(huán)境中凸顯出來，自然成為視覺焦點。

引導(dǎo)用戶注意力優(yōu)先落在關(guān)鍵信息或操作點上，這就是對比原則，我們可以通過形狀的對比讓卡片突出，增加視覺表現(xiàn)力：

在一些視覺頁面中，也可以用異形容器增加視覺表現(xiàn)力，可以結(jié)合主題設(shè)計容器，例如下方就是一個以紙質(zhì)火車票造型作為卡片背景的例子：

也可以結(jié)合內(nèi)容設(shè)計容器，例如頁面的內(nèi)容是感謝用戶，就可以從感謝信或者信紙的角度設(shè)計容器：

二、背景

在設(shè)計中，想要為卡片或頁面增加形式感，豐富背景是直接且高效的方式，可以從顏色、底紋、裝飾元素這三個核心維度展開，讓背景不再單調(diào)，為整體設(shè)計加分：

1. 優(yōu)化顏色增加背景的形式感

可將背景的無彩色（如黑白、灰度色）替換為帶有明確色相的有彩色（如柔和的薄荷綠、清新的天藍、低飽和的珊瑚橙等）

借助 “無彩色與有彩色” 的屬性差異，讓卡片與周圍的淺灰背景或普通卡片形成直觀色彩對比，快速從整體布局中跳脫出來：

也可以將卡片的單一純色設(shè)計，升級為多種顏色的漸變效果 —— 通過這種漸變色，讓卡片與周圍的背景、其他組件形成鮮明對比

從而快速從整體布局中凸顯出來，成為視覺焦點，快速抓住用戶注意力：

2. 給背景增加底紋

在背景中增加底紋（如低透明度的幾何紋理、輕微的肌理質(zhì)感等），不僅可以強化視覺層次，還可以向用戶傳遞頁面的風(fēng)格氛圍，增強記憶點。

例如科技類產(chǎn)品用細線條網(wǎng)格底紋增強科技感，古風(fēng)類產(chǎn)品可以用紙張等營造復(fù)古的氛圍感：

下面列舉了一些常見的底紋元素，可搭配圖層的混合模式、不透明度使用：

3. 在背景上增加裝飾

可以根據(jù)頁面/活動添加合適的裝飾元素，裝飾可以是圖形、文字等與頁面相關(guān)的元素。

裝飾元素主要是為了平衡界面視覺，優(yōu)化整體協(xié)調(diào)性：當界面存在 “大面積空白” 或 “元素分布不均” 時，裝飾元素可起到 “視覺平衡” 作用。

三、文字

這里的文字不僅是卡片標題，也可以是活動標題或者頁簽導(dǎo)航，那么文字的設(shè)計感可以怎么加呢？我們可以從圖形裝飾、線條裝飾、文字裝飾、背景裝飾四個方面給文字添加設(shè)計感：

1. 圖形裝飾

將圖形放在標題空白處增加標題的設(shè)計感：

也可以用來填補標題的空白區(qū)域，平衡視覺：

用圖形代替文字的某一個筆畫，傳遞產(chǎn)品的氛圍：

2. 線條裝飾

用簡單的線條突出標題，輔助信息分層，突出重點信息，降低認知成本：

3. 文字裝飾

用風(fēng)格獨特的字體寫一句英文作為標題的裝飾：

另一種方法是將文字放大起到裝飾作用：

4. 背景裝飾

在標題后面增加背景，不僅可以保證標題的可讀性，還能讓標題抓住用戶的眼球，進一步強化視覺表現(xiàn)力：

總結(jié)

盡管上面的案例分別展示了不同的提升形式感的方法，但在實際設(shè)計中，不必局限于單一形式。

將多種手法靈活組合（比如為卡片搭配有彩色背景的同時，疊加輕量底紋并點綴細節(jié)裝飾），更能放大視覺表現(xiàn)力，讓界面擺脫單調(diào)感，呈現(xiàn)出更豐富的層次與質(zhì)感。

如果這篇內(nèi)容對你有啟發(fā)，或是你有其他提升形式感的實用思路，歡迎在評論區(qū)分享交流，一起探索更多設(shè)計可能性～

轉(zhuǎn)載：優(yōu)設(shè)

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

響應(yīng)式的適配對象

響應(yīng)式是一種網(wǎng)頁前端技術(shù)，讓網(wǎng)頁可以根據(jù)分辨率、設(shè)備的變更，自動調(diào)整樣式和布局。

它的誕生起源于移動互聯(lián)網(wǎng)興起的熱潮，彼時智能手機訪問網(wǎng)站的需求激增，但多數(shù)網(wǎng)站的適配都是面向電腦端的大屏幕，僅有少數(shù)網(wǎng)站會額外開發(fā)符合移動端顯示需求的版本（自適應(yīng)）。

響應(yīng)式的提出，就是為了解決這種問題，通過建立一套約定好的設(shè)計、開發(fā)方法，用一套代碼自動適配臺式電腦、筆記本、平板、移動端等各種設(shè)備，提高網(wǎng)站的兼容性和開發(fā)效率。

而學(xué)習(xí)響應(yīng)式，首先就要從瀏覽器開始說起。

瀏覽器是一個非常特殊的軟件，比如大家熟知的 Chrome、Safari、Eage 等，我們?nèi)粘ＴL問的所有網(wǎng)頁，都需要通過瀏覽器加載并渲染出最終的樣式。

可以把網(wǎng)頁 HTML 文件理解成是一個程序，而瀏覽器就是運行這個程序的系統(tǒng)（環(huán)境），也就是說解析網(wǎng)頁依靠的是瀏覽器而不是 Windows、Mac、iOS、Android、Linux 等客戶端系統(tǒng)。

瀏覽器即系統(tǒng)中的系統(tǒng)（類似虛擬機)，不管在任何系統(tǒng)或設(shè)備上，只要安裝了瀏覽器，就可以用大體相同的規(guī)則、邏輯去加載、渲染出網(wǎng)頁。

但不同設(shè)備的屏幕有很大差異，網(wǎng)頁如何識別并匹配這些設(shè)備呢？

方法主要有兩種，第一種是瀏覽器會識別當前系統(tǒng)和設(shè)備，并提供接口讓網(wǎng)頁讀取。而部分網(wǎng)站會準備多種規(guī)格的網(wǎng)頁，根據(jù)獲取的設(shè)備類型推送對應(yīng)的規(guī)格，這種做法叫做自適應(yīng)模式。

通常自適應(yīng)只區(qū)分桌面端和移動端兩種，較大的門戶、購物、工具類網(wǎng)站，普遍使用自適應(yīng)模式。因為移動端訪問網(wǎng)頁的需求并不高，所以會對移動端版本做大量的精簡，降低開發(fā)、維護成本。

另一種方法，則是讀取瀏覽器視圖區(qū)域的分辨率。任何瀏覽器的界面，都包含功能區(qū)域和視圖區(qū)域兩個部分，功能區(qū)域提供相關(guān)的軟件菜單、操作按鈕，視圖區(qū)域則是顯示網(wǎng)頁界面的區(qū)域。隨著設(shè)備和屏幕分辨率的變化，瀏覽器的大小也會不同，網(wǎng)頁視圖區(qū)域也會跟著縮放。

網(wǎng)頁視圖注定小于整個瀏覽器的軟件窗口，而瀏覽器作為軟件，在系統(tǒng)中的尺寸不等于系統(tǒng)分辨率（或設(shè)備分辨率），一方面有系統(tǒng)的全局組件影響，另一方面窗口并不是非得全屏，用戶可以任意調(diào)整。

所以響應(yīng)式網(wǎng)頁就是根據(jù)瀏覽器的視圖區(qū)域做適配，不管你是在電腦上縮放軟件窗口，還是在不同的設(shè)備、系統(tǒng)中打開，本質(zhì)上都只是顯示區(qū)域大小的變更。而在瀏覽器的檢查選項中，模擬不同的設(shè)備其實就是縮放出一個指定的視圖窗口出來。

這種依賴關(guān)系延伸出一個新的知識點，即網(wǎng)頁顯示的分辨率，和顯示設(shè)備的屏幕分辨率，是兩套不同的體系。

這是因為硬件分辨率和系統(tǒng)渲染的分辨率是兩個概念，尤其在今天高分辨率屏幕普及的背景之下。比如我的 Macbook Pro14 寸筆記本，硬件分辨率是 3024 x 1964 (254 ppi)，但在系統(tǒng)的屏幕分辨率選擇中，默認的卻是 1512*982（即原來的 1/2）。

這是因為硬件分辨率太高了，1:1 渲染的話，那么大多數(shù)圖標、文字是無法被看清的，所以默認使用了 2x 的規(guī)格渲染。但這只是其中一個選項，在 HIDPI 技術(shù)的加持下，用戶還可以選擇別的分辨率，比如我會進一步調(diào)高到 1800*1169。

在 Windows 系統(tǒng)中同理，雖然有很多高分辨率的屏幕，但是用戶為了看清內(nèi)容，會在系統(tǒng)中設(shè)置 120%、150% 的放大效果，等于為系統(tǒng)分辨率做出變更。

說到底，系統(tǒng)顯示分辨率的規(guī)格也是無窮無盡的。但是不管外部的轉(zhuǎn)換邏輯有多復(fù)雜，規(guī)格有多少，都和響應(yīng)式網(wǎng)頁無關(guān)，它只需要認準瀏覽器的視圖區(qū)域分辨率即可。

所以了解線上案例的響應(yīng)式布局規(guī)則，或者檢查已經(jīng)開發(fā)好的響應(yīng)式頁面，并不需要切換不同設(shè)備查看，只要拖拽縮放瀏覽器的大小（主要是寬度）即可獲得完整的響應(yīng)效果。

最后總結(jié)起來，響應(yīng)式網(wǎng)頁是面向瀏覽器視圖區(qū)域做適配的布局方法，而不是面向系統(tǒng)、屏幕分辨率的適配，這和自適應(yīng)布局有本質(zhì)的差異。

在 B 端領(lǐng)域，絕大多數(shù)項目都只部分兼容響應(yīng)式，放棄移動端的適配，即使支持移動端也是使用自適應(yīng)的混合模式。要面對這些復(fù)雜的場景，就月需要理解上面這些基礎(chǔ)的概念，否則設(shè)計師就無法真正滿足響應(yīng)式項目的前期創(chuàng)建和后期交付需要。

轉(zhuǎn)載：優(yōu)設(shè)

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

設(shè)計組件庫是提升設(shè)計效率和一致性的重要工具，但如何在頻繁迭代和動態(tài)調(diào)整中高效賦能業(yè)務(wù)設(shè)計交付，一直是行業(yè)面臨的挑戰(zhàn)。蘭亭妙微UI設(shè)計公司，分享了他們在設(shè)計組件庫建設(shè)中的新思考和實踐，供大家參考學(xué)習(xí)。

本文將分享我們對于“什么是好的設(shè)計組件”的看法，并給出一種搭建復(fù)雜組件的實用思路。我們還會從資產(chǎn)消費的角度，提供一些優(yōu)化建議。雖然過程中會涉及不少基于Figma軟件的操作細節(jié)，但核心思路就像一把“萬能鑰匙”，無論在哪個設(shè)計平臺都行之有效，希望這些內(nèi)容能給廣大設(shè)計師們帶來一些新的啟發(fā)。

01 “好的設(shè)計組件”在搜索設(shè)計場景中的定義

從網(wǎng)上搜索設(shè)計組件，我們能找到各種對外公開的設(shè)計組件庫，同樣還有不少或概括或詳細的文章，手把手教你“如何搭建一個好的設(shè)計組件庫”，但這些方法論很少探討面對C端組件頻繁增改、設(shè)計規(guī)范動態(tài)調(diào)整，如何高效賦能業(yè)務(wù)設(shè)計交付的相關(guān)內(nèi)容，但這恰恰是搜索業(yè)務(wù)面臨的關(guān)鍵問題。

搜索是一個“牽一發(fā)而動全身”的業(yè)務(wù)，每一個微小的設(shè)計細節(jié)都有可能影響各個業(yè)務(wù)的數(shù)據(jù)指標，一個“好的設(shè)計組件庫”需要以一種潛移默化的方式讓設(shè)計師掌握設(shè)計規(guī)范，完成合規(guī)的設(shè)計，從這個角度而言它應(yīng)該比較「好懂」。

而作為服務(wù)于整個設(shè)計團隊的公用設(shè)計組件庫，面對每月數(shù)以萬計的調(diào)用次數(shù)，它必須保障最基本的易用性，應(yīng)該非常「好用」。

同時，面對頻繁迭代，“好的設(shè)計組件”還需要保持最快的更新速度，為各個橫向團隊提供正確的樣式，從這個角度來說它還要「好維護」。

因此，「好懂、好用、好維護」是搜索設(shè)計語境下，對一個“好的設(shè)計組件”的定義。

接下來，我們將從這三個「好」入手，分享搜索設(shè)計組件庫在升級過程中的一些思考，希望能和大家共同探討。

02 好懂：一種耦合設(shè)計規(guī)范的組件搭建方式

“萬丈高樓平地起”，我們先來說說如何從零開始構(gòu)建一個既符合設(shè)計規(guī)范又易于理解的設(shè)計組件。

首先，在搭建組件時，我們可以考慮采用多層嵌套的方式，即組件(Component)內(nèi)部嵌套變體(Instance)。這種方式不僅能省去組件搭建和修改過程中的重復(fù)操作，甚至還能在解綁組件時，通過選中內(nèi)部的子組件圖層進行解綁，大大簡化了搭建和使用雙方的操作流程。

在多層嵌套的思路下，我們可以進一步用“底層靈活、上層收斂”來指導(dǎo)組件的搭建。這意味著底層變體的形式足夠多樣，能夠支持大部分的狀態(tài)切換，而在上層組件搭建的過程中顯性地加強規(guī)范的指引(如規(guī)范中不允許使用的樣式不對外展示)，以降低超出規(guī)范設(shè)計的可能。

具體的搭建流程可以大致分為三步：場景收集和分析、搭建基本變體組、拓展高階變體組。

我們將通過視頻組件搭建的生動案例，具體介紹如何依據(jù)“底層靈活、上層收斂”原則來搭建組件庫，使得組件本身既足夠靈活，又能起到足夠的約束作用。

在著手搭建某類組件時，我們首先通過規(guī)范確認和場景遍歷，廣泛收集各類變體。

隨后，從我們能想到的所有維度出發(fā)，對這些變體進行細致定義。

這樣，我們就能得到一張詳盡描述組件變體性質(zhì)的表格。表格的第一列依次列出變體1、變體2、變體3等，而第一行則羅列出各種維度，如寬度、比例等。

通過這種方法，我們可以將原本零散、雜亂的組件變體描述，系統(tǒng)地歸納整理成一張清晰明了的表格。

表格通過不同維度來唯一確定一個變體，這些維度可大致分為兩個特性和一個共性。共性指的是所有變體在這一維度上均保持一致，常見特性則涵蓋了最常見的分類性質(zhì)，如寬度、高度、數(shù)量和優(yōu)先級等，而業(yè)務(wù)特性則與具體業(yè)務(wù)緊密相關(guān)。

在搭建組件時，我們可以遵循「共性-常見特性-業(yè)務(wù)特性」順序，這樣的順序有助于降低理解成本，因為最符合心智的分類被置于外層，同時底層的組件又保持了足夠的靈活性，便于切換各種變量。對于業(yè)務(wù)特性，我們可以根據(jù)實際情況靈活處理，既可以將其作為基本組件的延展，也可以不將其納入組件范疇。

以視頻組件為例，我們從表格中獲取的信息如下：

• 視頻尺寸及其組合是最符合用戶心智的變體選擇；
• 播放狀態(tài)是所有變體的共有性質(zhì)；
• 自動播放情況與業(yè)務(wù)相關(guān)，但不一定需要在組件庫中呈現(xiàn)；
• 高階組件僅涉及少部分尺寸的組件，應(yīng)在完成基本組件搭建后再進行。

據(jù)此，我們可以輕松梳理出視頻組件搭建流程的優(yōu)先級：

1. 播放狀態(tài)作為共性，應(yīng)首先搭建；
2. 基本組件尺寸和組合是最符合用戶心智的變體選擇，應(yīng)緊隨其后；
3. 高階組件在完成基本組件搭建后再進行。

值得注意的是，“封面槽位”是“播放狀態(tài)”中的一個圖層。根據(jù)“底層靈活、上層收斂”的原則，我們將其插入到搭建播放狀態(tài)之前。

因此，視頻組件的最終搭建流程為：

1. 封面槽位；
2. 播放狀態(tài)；
3. 基本組件尺寸和組合；
4. 高階組件。

完成對視頻組件搭建的分析，我們就可以有條不紊地開始搭建組件了。

先搭建基本組件視頻組件，再用基本組件搭建高階組件。

這一步驟雖然為大家所熟知，但仍需格外注意，如配置項的設(shè)置要力求合理，也可以融入設(shè)計規(guī)范和使用規(guī)范，同時還應(yīng)將一些搭建過程中的零散組件集中收納避免被調(diào)用。

關(guān)于這些具體的注意事項，我們將在后續(xù)部分進行詳細闡述。

至此我們完成了組件搭建的基本流程，一個達到及格線的視頻組件就誕生了。

據(jù)統(tǒng)計，優(yōu)化后每次調(diào)用視頻組件將節(jié)省至少10步的點擊操作！

03 好用：消費視角下的組件自檢

完成了一個基本組件的搭建后，我們可以轉(zhuǎn)換視角，從使用的角度來審視并檢查這個組件。

我們期望，從插入組件變體、切換組件配置，再到最后的解綁組件，整個流程都能縱享絲滑且穩(wěn)定可靠，確保業(yè)務(wù)設(shè)計師在使用過程中獲得最佳體驗。

我們可以一步步來審視組件的使用過程。

首先是插入組件，據(jù)觀察，通常有三種方式：

①在左側(cè)的資產(chǎn)面板(Assets)中直接找到對應(yīng)組件并插入；

②通過查閱設(shè)計規(guī)范，鎖定所需的變體后復(fù)制粘貼；

③選中一個不需要的組件，通過右側(cè)的“切換變體”面板(Swap instance)切換成所需的變體。

很明顯，在這個過程中依賴的是組件的精準搜索和快速定位。

為了提升搜索精度，我們可以從組件命名入手，采用中、英、數(shù)字結(jié)合的方式，實現(xiàn)模糊匹配；也可以在發(fā)布時隱藏不希望被調(diào)用的組件，以減少無用的搜索結(jié)果。

如果組件是采用前文提到的“多層嵌套”方式搭建的，我們可以添加“Preferred”子組件，這樣在切換時會優(yōu)先展示這些子組件，這個功能在切換圖標時尤為實用。

對于習(xí)慣邊查閱設(shè)計規(guī)范邊使用組件的設(shè)計師，我們增加了更多實際使用的正誤案例，這些案例直觀展示了組件變體的正確選擇和使用方式，進一步降低了規(guī)范的理解成本，有效輔助設(shè)計決策。同時，我們專門維護了一個固定區(qū)域，用于平鋪展示所有組件變體。

為了確保能夠輕松點選，我們將變體放在最外層展示(即不在任何Frame、Group或Section中)。這樣能讓設(shè)計師一目了然地看到所有變體，從而快速選擇所需的組件。

在組件配置階段，有三項注意點能讓組件更加易用，即“重視組件的可視化效果、設(shè)置高效易用的配置項、貼心地保存修改”。

考慮到C端組件的多樣性和用戶的使用習(xí)慣，我們應(yīng)避免使用過于復(fù)雜的分組方式。相反，應(yīng)更注重組件的樣式展示，并盡量簡化組件的層級結(jié)構(gòu)。這樣，設(shè)計師在使用時能夠更直觀地看到組件的外觀，而無需深入復(fù)雜的層級去查找。

另外值得注意的是，F(xiàn)igma會默認用組件集合中最左上角的組件生成預(yù)覽樣式，因此應(yīng)當把視覺上最有代表性的變體放在左上角，這個效果在切換變體(Swap instance)時很重要，因為目前在該面板中沒法查看組件細節(jié)，只能靠縮略圖和名稱來推測是哪個組件。

其次對于配置項的設(shè)置也大有講究，業(yè)界有組件庫為了實現(xiàn)C2D2C，從源頭上將設(shè)計組件和前端組件的配置項打平，這是不錯的思路，但有可能會提升設(shè)計側(cè)的理解成本。

針對搜索業(yè)務(wù)的特殊語境，我們還是選擇了從「規(guī)范理解」角度去設(shè)置組件的配置項，將所有允許自定義的配置盡可能外露，并清晰地說明修改限制，如字數(shù)限定、選項個數(shù)等，這樣能夠在使用的過程中強化業(yè)務(wù)設(shè)計師對規(guī)范的掌握。

另一個常常被忽視的關(guān)鍵點是選項和配置的排序問題。為了提高瀏覽和選擇的效率，建議對選項和選項之間，以及外層的不同配置項，都按照一定的邏輯順序進行排序。

最后一點，我們稱之為“貼心地保存修改”機制，這個針對的是文字修改的場景。

在實際操作中，使用一個組件可能需要對多個配置項進行修改。有時在修改完文字內(nèi)容后再去調(diào)整其他配置時，已修改的文字會被重置。這時文本屬性(text property)的設(shè)置就顯得尤為重要，它能夠記憶并保存修改過的文字內(nèi)容，從而免于重復(fù)輸入。

還有一些情況是，某個組件變體實際上并沒有與某個值相對應(yīng)的組件(盡管Figma機制允許選擇該值)，用戶切換后就會發(fā)現(xiàn)組件完全變了，只能撤回。

為了避免這類情況，建議使用另外的標記來表明組件某個設(shè)置項是不可切換的。

04 好維護：持續(xù)監(jiān)測，不斷迭代

完成了組件的搭建和檢查，接下來讓我們聚焦于組件的日常維護。

這一環(huán)節(jié)可以從兩個維度展開，一是依托中臺的日常數(shù)據(jù)監(jiān)控進行維護，二是通過團隊內(nèi)部的緊密協(xié)同機制來保障。后者更多側(cè)重協(xié)作流程和機制上的建設(shè)，在本文中我們不做更多展開，重點討論前者。

數(shù)據(jù)監(jiān)控的方式主要依托Figma中的組件數(shù)據(jù)看板(查看路徑：View libraries-Analytics)，看板中展示了各個組件的調(diào)用數(shù)和解綁數(shù)數(shù)據(jù)，這些數(shù)據(jù)不直接反映組件的優(yōu)劣，但如果我們觀測到某個組件解綁率偏高，我們會考慮直接把它作為模板而不是創(chuàng)建成組件。

總結(jié)

以上是百度搜索設(shè)計團隊在設(shè)計組件庫升級過程中的心得分享，包括搜索業(yè)務(wù)對于“好的設(shè)計組件”的訴求，以及一些搭建和優(yōu)化組件的實用思路，核心是探討如何從組件庫建設(shè)的角度入手，成功助力團隊提升設(shè)計資產(chǎn)消費效率。

當前我們已經(jīng)完成設(shè)計資產(chǎn)工程化的前序環(huán)節(jié)，我們對設(shè)計資產(chǎn)的升級和探索并沒有結(jié)束，未來我們將持續(xù)探索設(shè)計系統(tǒng)工具化的形態(tài)、與AI大模型結(jié)合的機會，通過豐富消費途徑，實現(xiàn)在業(yè)務(wù)交付的不同階段下全方位提效。

這部分內(nèi)容后續(xù)有機會也將會和大家見面，請大家期待！

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

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

一、用戶群體差異：三大平臺的核心客群定位

• 木鳥民宿：00 后占比 59%，主打年輕群體場景化、個性化住宿需求；
• 途家民宿：00 后、80 后為小城民宿消費雙主力，各占 24%，側(cè)重家庭度假與深度體驗；
• 美團民宿：95 后占比 48%，核心偏好高性價比、低價便捷住宿。

二、首頁設(shè)計：流量分發(fā)邏輯拆解

木鳥民宿：聚焦首屏，場景化精準分流

• 核心模塊：搜索、預(yù)訂、二級導(dǎo)航、金剛區(qū)；
• 分發(fā)邏輯：明確需求 + 隱性需求雙軌并行。
   
  明確需求：支持城市、地標、日期精準查詢，滿足目標清晰的用戶；
   
  隱性需求：通過周末出游、人氣好房、寵物友好等場景入口，激發(fā)潛在消費。

途家民宿：功能偏多，側(cè)重平臺變現(xiàn)與會員

• 明確需求模塊與木鳥一致，支持基礎(chǔ)預(yù)訂操作；
• 金剛區(qū)重點傾斜套餐推廣、會員體系，強平臺側(cè)變現(xiàn)導(dǎo)向。

美團民宿：極簡展示，依賴主站流量

• 結(jié)構(gòu)單一、視覺簡潔，但屏幕利用效率偏低；
• 策略上依托美團主站 “高頻帶低頻” 邏輯，酒旅變現(xiàn)壓力集中在美團旅行主板塊，獨立 APP 僅承擔基礎(chǔ)預(yù)訂功能。

三、留存本質(zhì)：平臺戰(zhàn)略與首頁設(shè)計的深層關(guān)聯(lián)

1. 木鳥民宿：用戶與平臺需求平衡

    

   2020 年起連續(xù)盈利，80% 自有流量形成 “流量 - 訂單 - 擴張” 閉環(huán)，靠場景化特色民宿筑牢產(chǎn)品力，兼顧體驗與增長。
    
2. 途家民宿：重平臺變現(xiàn)需求

    

   早年關(guān)停多城直營房源，疊加攜程商旅流量轉(zhuǎn)移、重心轉(zhuǎn)向跨境游，營收與現(xiàn)金流壓力加劇，不得不通過首頁強化套餐、會員等多元變現(xiàn)。
    
3. 美團民宿：重用戶體驗、輕平臺運營

    

   依托本地生態(tài)與主站流量，獨立 APP 無需承擔強變現(xiàn)目標，因此頁面極簡、聚焦用戶瀏覽體驗。
    

一、配置密碼顯示 / 隱藏切換功能

二、設(shè)置規(guī)范無障礙專屬標簽

三、前置展示密碼設(shè)置規(guī)則

1. Adobe：采用復(fù)選框清單式校驗，滿足一條規(guī)則對應(yīng)條目自動變綠、打上勾選標記，實時可視化校驗；
2. Dropbox：以靜態(tài)列表完整羅列密碼要求，引導(dǎo)用戶逐條對照輸入。

四、實時密碼強度可視化校驗

1. 色彩進度條：以紅（弱）→黃（中）→綠（強）漸變配色，直觀區(qū)分密碼安全等級；
2. 規(guī)則清單逐項核驗：逐條標注大小寫字母、數(shù)字、特殊字符、位數(shù)等要求，完成即標記，清晰明了。

五、預(yù)留清晰的忘記密碼找回路徑

密碼框核心設(shè)計原則總結(jié)

1. 顯隱切換：提升密碼輸入準確率，精簡表單流程；
2. 規(guī)范標簽：適配無障礙訪問，避免用戶認知困惑；
3. 預(yù)顯規(guī)則：前置告知要求，規(guī)避重復(fù)操作失誤；
4. 實時校驗：可視化強度反饋，提升輸入設(shè)置效率；
5. 便捷找回：完善賬號恢復(fù)路徑，降低用戶使用門檻。

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

一、背景概述

插圖的使用已有 10,000 年的歷史。最早的圖畫之一是西班牙發(fā)現(xiàn)的手部輪廓圖，距今已有 66,000 多年歷史。隨著互聯(lián)網(wǎng)的出現(xiàn)，大約在 1997 年，插圖的使用逐漸增多，谷歌的每日涂鴉和紅牛能量飲料就是其中的典型例子，包括國內(nèi)的百度，它們都在將具有特殊意義的插圖融入產(chǎn)品中。

在過去插圖通常使用鉛筆、粉筆、鋼筆、蝕刻畫和顏料完成，但現(xiàn)在經(jīng)過技術(shù)的發(fā)展我們可以通過更智能的方式來呈現(xiàn)插圖；

一個好的插圖還可以更好地生動地傳達信息，我們?nèi)绾未_定最合適的插圖風(fēng)格？插圖怎么才能體現(xiàn)品牌感？怎么能引起用戶群體的共鳴？對于內(nèi)容，哪種類型的插圖最能強調(diào)產(chǎn)品特性，本篇內(nèi)容分享了相關(guān)的案例，并解析如何針對不同用戶群體確定產(chǎn)品插圖風(fēng)格；

1、當代產(chǎn)品設(shè)計中插圖的戰(zhàn)略價值

品牌差異化

以互聯(lián)網(wǎng)產(chǎn)品為例，現(xiàn)在市場上隨便拿出來個產(chǎn)品都會有一堆競品出現(xiàn)，那如何在眾多產(chǎn)品中體現(xiàn)自己產(chǎn)品的特性呢，除了功能層的差距外，無非就是“看和用”這個方面了，我們以看為例，像Ant Design的「科技溫度」風(fēng)格、Discord的「夜光貼紙」風(fēng)格，都展現(xiàn)了產(chǎn)品的個性化，甚至說從插圖風(fēng)格就能get到產(chǎn)品是做什么行業(yè)的；

信息傳達

當情況挺復(fù)雜的時候，要是全靠大段大段的文字去講清楚，用戶可能得費不少勁才能弄明白。這時候，要是有插圖來幫忙，往往就能直接把意思給展現(xiàn)出來，讓用戶能更快地抓住信息的核心意思，例如醫(yī)療類APP用插圖替代專業(yè)術(shù)語；

情感化連接量化

好的插圖不僅起到美化視覺信息傳達的作用，也能夠?qū)I(yè)務(wù)起到數(shù)據(jù)方面的提升，例如多鄰國的插圖表情，他們在2023年的調(diào)研數(shù)據(jù)上顯示ip系統(tǒng)提升用戶學(xué)習(xí)時長28%，Headspace冥想插圖動效減少用戶焦慮指數(shù)；

二、如何設(shè)計出好的插圖

2.1 受眾群體

不同的群體對于認知和喜好不同，首先就要明確是給誰做，每個產(chǎn)品都有自己用戶畫像，拿到用戶畫像去進行拆解設(shè)計目標，例如年齡在18-25歲，這就決定了設(shè)計風(fēng)格偏年輕化，女性用戶群體占比70%，決定了色系不能使用過多的冷色系（產(chǎn)品主色如果不是按照群體來的，那當我沒說），在例如是一線還是二線三線，職業(yè)分布如何，這些拆解出來后，方向不就確定了嗎，無非就是通過受眾群體做減法，減少無用的腦暴；

2.2 設(shè)計原則體系

搭建插圖系統(tǒng)和設(shè)計規(guī)范流程是一致的，都需要在最基礎(chǔ)的設(shè)計原則框架下完成，否則就脫離了基本的體驗；

信息傳達的精準性

• 視覺降噪原則：構(gòu)圖簡單，突出核心表達信息，避免過渡裝飾干擾用戶

• 語言符號化：使用行業(yè)共識的符號做為基礎(chǔ)形象進行設(shè)計，降低認知成本以及適配國際化，例如網(wǎng)絡(luò)中斷使用wifi、球形網(wǎng)絡(luò)；

情感共鳴的層次化

• 場景關(guān)聯(lián)：除了基礎(chǔ)的插圖，在特定場景下的插圖也要預(yù)判用戶在當前場景下的情緒變化，通過插圖來提升用戶情緒峰值，例如社區(qū)產(chǎn)品中，用戶成功發(fā)布一個帖子，給用戶反饋的插圖應(yīng)當是開心、活躍讓用戶感受到產(chǎn)品的情緒價值；

• 動態(tài)情感曲線：在新手引導(dǎo)中通過每一步的交互流程來變化插圖表達的情緒，例如開始引導(dǎo)時突出表達信息，在一個流程結(jié)束時強化氛圍鼓勵用戶，用戶情緒進度期待→奮斗→高昂，促進用戶進一步操作；

品牌基因滲透

• 視覺原子構(gòu)建：提取品牌色彩、標志性符號，形成基礎(chǔ)的插圖基因庫；

• 品牌故事元素貫穿全場景，例如茶顏悅色將古風(fēng)和現(xiàn)代插圖風(fēng)格結(jié)合，創(chuàng)造了獨特的品牌調(diào)性，并且每個插圖場景都在傳達品牌故事；

適配原則

• 多端一致性：能夠三端自適應(yīng)適配尺寸，在小尺寸屏幕下插圖的識別性是否會出現(xiàn)問題；

• 擴展性：在各大節(jié)日時插圖是否能夠結(jié)合當前節(jié)日擴展，例如春節(jié)時插圖是否可以添加燈籠煙花相關(guān)元素；

2.3 風(fēng)格系統(tǒng)構(gòu)建

風(fēng)格定位

插圖風(fēng)格系統(tǒng)是品牌視覺語言的延伸，需通過基因提煉-規(guī)則制定-動態(tài)迭代的三層框架實現(xiàn)規(guī)模化應(yīng)用；提到喜茶能想到的是描邊黑白風(fēng)格插圖，茶顏悅色就能想到古風(fēng)，而提到飛書我們就能想到極簡具有規(guī)則的形狀插圖，這就是通過插圖風(fēng)格提升用戶對產(chǎn)品認知；

風(fēng)格系統(tǒng)四個緯度

前面每一步的分析都是為執(zhí)行輔助

三、插圖應(yīng)用場景

3.1 核心功能

通過視覺表達降低用戶認知負荷，引導(dǎo)用戶關(guān)注或操作核心功能；

新手引導(dǎo)

這個比較常見，很多產(chǎn)品在新功能或者復(fù)雜功能的時候會建立新手引導(dǎo)的流程，這時候使用單一的箭頭引導(dǎo)會比較單一，就需要添加一些插圖做為情緒化引導(dǎo)，提升用戶趣味性；

狀態(tài)可視化

在一些上傳、加載的場景其實也可以融入插圖來緩沖用戶焦慮，現(xiàn)在大多產(chǎn)品都是使用比較簡單的加載方式，實際上可以將品牌插圖融入進去；

3.2 品牌價值傳達層

將品牌DNA轉(zhuǎn)化為可感知的視覺敘事，建立情感化認知錨點

超級符號ip滲透

在登錄頁/加載頁/404頁等全鏈路重復(fù)品牌標志性元素，提升用戶對品牌的記憶；

價值觀場景化表達

用插圖隱喻傳遞品牌主張（如環(huán)保產(chǎn)品用樹木生長插圖替代口號式文案）

節(jié)日儀式感表達

在特殊節(jié)日疊加一些裝飾元素，提升儀式感，上面有提到融入節(jié)日元素；

3.3 用戶體驗優(yōu)化層

解決體驗斷點，通過情感化設(shè)計提升用戶容忍度與愉悅感

負向場景安撫設(shè)計

出現(xiàn)bug的頁面通過插圖傳遞「可控感」，用修復(fù)工具插圖+明確解決步驟緩解用戶焦慮；

降低學(xué)習(xí)成本

在新功能上線時或者改版功能時，用插圖對比新舊流程差異，這個主要在b端場景使用會比較多

情感峰值制造

在用戶完成某項任務(wù)或完成某個階段流程時給用戶反饋出高成就感的插圖，例如keep的成就解鎖，學(xué)習(xí)軟件種每日學(xué)習(xí)打卡成功等；

四、案例分析

分析三個不同行業(yè)的插圖，來看看他們的插圖差異化

4.1 金融類APP的信任感構(gòu)建

首先看看金融類產(chǎn)品如何在專業(yè)與用戶情感傳遞之間進行平衡

符號系統(tǒng)化

顏色方面圍繞穩(wěn)重復(fù)合色（深藍+淺金），避免高飽和色彩帶來的廉價感；

場景克制表達

僅在低風(fēng)險場景（如教育科普頁）使用輕度擬人化角色，而核心功能涉及到數(shù)據(jù)方面的則使用抽象的數(shù)據(jù)的可視化插圖；

文化兼容

在出海的一些國家涉及到文化沖突，例如在中東區(qū)域就刪除了動物形象用植物和建筑符號代替；

4.2 社交產(chǎn)品的年輕化表達

小紅書通過潮流涂鴉的風(fēng)格建立z時代圈層共鳴，為用戶提供固定的模板，降低用戶創(chuàng)作成本，提升產(chǎn)品的品牌主張，同時能夠營造出社區(qū)統(tǒng)一的氛圍感。

視覺特點

以線稿為主，為用戶提供自由創(chuàng)意的涂鴉玩法。

五、未來趨勢

實時渲染的個性化插圖

動態(tài)生成：根據(jù)實時數(shù)據(jù)改變插圖元素，如不同的天氣、心率的高低、運動的步數(shù)等等；

天氣軟件中可以根據(jù)不同的天氣變化背景，當然這個目前已經(jīng)廣泛應(yīng)用了，但未來也是不變的一個趨勢；

AI效率性插圖

可通過ai流程來制作統(tǒng)一的插圖風(fēng)格進行應(yīng)用，并且風(fēng)格的局限性相較于之前也更靈活了，在前幾年只能通過mj喂圖抽卡來生成統(tǒng)一的插圖，并且時間成本非常高；

在前兩年只能通過訓(xùn)練大模型的方式訓(xùn)練具有產(chǎn)品特點的模型，并且訓(xùn)練周期非常長，配置要求高，隨著現(xiàn)在的技術(shù)更新，線上出現(xiàn)了很多訓(xùn)練模型的方式，不在依賴本地配置，通過線上訓(xùn)練的lora模型，內(nèi)存比較小也方便調(diào)用，時間上相對之前大大提高；