蘭亭妙微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.payeee.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
當 Toast 內圖標、裝飾元素較多時，畫面容易雜亂松散。可以在主體元素后方增加專屬背板，既能收攏零散元素、強化整體感，還能快速增加視覺層次。
蘭亭妙微（藍藍設計）m.payeee.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
附 Figma 官方文案節選：無論多少次被宣告 “消亡”，設計始終生生不息。它藏在幫你避免坐過站的地鐵圖里，藏在一目了然的菜單里，也藏在貼心的 App 通知里。設計不是轉瞬即逝的潮流，也不是可被替代的技術，它關乎體驗、關乎感受，而非僅僅追求功能可用。設計屢遭唱衰，卻一次次證明自身不可替代。官方鏈接：https://x.com/figma/status/2061101954034442293
蘭亭妙微（藍藍設計）m.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 工具以及大模型的特性，通過組合它們來實現自己目標的方式。這不是設計或產品思維，而是工程思維的具體應用。
蘭亭妙微（藍藍設計）m.payeee.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
通過制造視覺元素的差異—— 讓 “不一樣” 的元素從周圍環境中凸顯出來，自然成為視覺焦點。
引導用戶注意力優先落在關鍵信息或操作點上，這就是對比原則，我們可以通過形狀的對比讓卡片突出，增加視覺表現力：
在一些視覺頁面中，也可以用異形容器增加視覺表現力，可以結合主題設計容器，例如下方就是一個以紙質火車票造型作為卡片背景的例子：
也可以結合內容設計容器，例如頁面的內容是感謝用戶，就可以從感謝信或者信紙的角度設計容器：
在設計中，想要為卡片或頁面增加形式感，豐富背景是直接且高效的方式，可以從顏色、底紋、裝飾元素這三個核心維度展開，讓背景不再單調，為整體設計加分：
1. 優化顏色增加背景的形式感
可將背景的無彩色（如黑白、灰度色）替換為帶有明確色相的有彩色（如柔和的薄荷綠、清新的天藍、低飽和的珊瑚橙等）
借助 “無彩色與有彩色” 的屬性差異，讓卡片與周圍的淺灰背景或普通卡片形成直觀色彩對比，快速從整體布局中跳脫出來：
也可以將卡片的單一純色設計，升級為多種顏色的漸變效果 —— 通過這種漸變色，讓卡片與周圍的背景、其他組件形成鮮明對比
從而快速從整體布局中凸顯出來，成為視覺焦點，快速抓住用戶注意力：
2. 給背景增加底紋
在背景中增加底紋（如低透明度的幾何紋理、輕微的肌理質感等），不僅可以強化視覺層次，還可以向用戶傳遞頁面的風格氛圍，增強記憶點。
例如科技類產品用細線條網格底紋增強科技感，古風類產品可以用紙張等營造復古的氛圍感：
下面列舉了一些常見的底紋元素，可搭配圖層的混合模式、不透明度使用：
3. 在背景上增加裝飾
可以根據頁面/活動添加合適的裝飾元素，裝飾可以是圖形、文字等與頁面相關的元素。
裝飾元素主要是為了平衡界面視覺，優化整體協調性：當界面存在 “大面積空白” 或 “元素分布不均” 時，裝飾元素可起到 “視覺平衡” 作用。
這里的文字不僅是卡片標題，也可以是活動標題或者頁簽導航，那么文字的設計感可以怎么加呢？我們可以從圖形裝飾、線條裝飾、文字裝飾、背景裝飾四個方面給文字添加設計感：
1. 圖形裝飾
將圖形放在標題空白處增加標題的設計感：
也可以用來填補標題的空白區域，平衡視覺：
用圖形代替文字的某一個筆畫，傳遞產品的氛圍：
2. 線條裝飾
用簡單的線條突出標題，輔助信息分層，突出重點信息，降低認知成本：
3. 文字裝飾
用風格獨特的字體寫一句英文作為標題的裝飾：
另一種方法是將文字放大起到裝飾作用：
4. 背景裝飾
在標題后面增加背景，不僅可以保證標題的可讀性，還能讓標題抓住用戶的眼球，進一步強化視覺表現力：
盡管上面的案例分別展示了不同的提升形式感的方法，但在實際設計中，不必局限于單一形式。
將多種手法靈活組合（比如為卡片搭配有彩色背景的同時，疊加輕量底紋并點綴細節裝飾），更能放大視覺表現力，讓界面擺脫單調感，呈現出更豐富的層次與質感。
如果這篇內容對你有啟發，或是你有其他提升形式感的實用思路，歡迎在評論區分享交流，一起探索更多設計可能性～
轉載：優設
蘭亭妙微（藍藍設計）m.payeee.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.payeee.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.payeee.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
蘭亭妙微（藍藍設計）m.payeee.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
插圖的使用已有 10,000 年的歷史。最早的圖畫之一是西班牙發現的手部輪廓圖，距今已有 66,000 多年歷史。隨著互聯網的出現，大約在 1997 年，插圖的使用逐漸增多，谷歌的每日涂鴉和紅牛能量飲料就是其中的典型例子，包括國內的百度，它們都在將具有特殊意義的插圖融入產品中。
在過去插圖通常使用鉛筆、粉筆、鋼筆、蝕刻畫和顏料完成，但現在經過技術的發展我們可以通過更智能的方式來呈現插圖；
一個好的插圖還可以更好地生動地傳達信息，我們如何確定最合適的插圖風格？插圖怎么才能體現品牌感？怎么能引起用戶群體的共鳴？對于內容，哪種類型的插圖最能強調產品特性，本篇內容分享了相關的案例，并解析如何針對不同用戶群體確定產品插圖風格；
1、當代產品設計中插圖的戰略價值
以互聯網產品為例，現在市場上隨便拿出來個產品都會有一堆競品出現，那如何在眾多產品中體現自己產品的特性呢，除了功能層的差距外，無非就是“看和用”這個方面了，我們以看為例，像Ant Design的「科技溫度」風格、Discord的「夜光貼紙」風格，都展現了產品的個性化，甚至說從插圖風格就能get到產品是做什么行業的；
當情況挺復雜的時候，要是全靠大段大段的文字去講清楚，用戶可能得費不少勁才能弄明白。這時候，要是有插圖來幫忙，往往就能直接把意思給展現出來，讓用戶能更快地抓住信息的核心意思，例如醫療類APP用插圖替代專業術語；
好的插圖不僅起到美化視覺信息傳達的作用，也能夠對業務起到數據方面的提升，例如多鄰國的插圖表情，他們在2023年的調研數據上顯示ip系統提升用戶學習時長28%，Headspace冥想插圖動效減少用戶焦慮指數；
不同的群體對于認知和喜好不同，首先就要明確是給誰做，每個產品都有自己用戶畫像，拿到用戶畫像去進行拆解設計目標，例如年齡在18-25歲，這就決定了設計風格偏年輕化，女性用戶群體占比70%，決定了色系不能使用過多的冷色系（產品主色如果不是按照群體來的，那當我沒說），在例如是一線還是二線三線，職業分布如何，這些拆解出來后，方向不就確定了嗎，無非就是通過受眾群體做減法，減少無用的腦暴；
|
用戶特征 |
設計切入點 |
|
18-25歲 |
年輕化風格、新穎、趣味性 |
|
男性70% |
減少暖色使用，冷色為主 |
|
一線城市居多 |
避免營銷化、低端風格 |
|
對科技、技術感興趣 |
冷色系、極客風、極簡... |
搭建插圖系統和設計規范流程是一致的，都需要在最基礎的設計原則框架下完成，否則就脫離了基本的體驗；
視覺降噪原則：構圖簡單，突出核心表達信息，避免過渡裝飾干擾用戶
語言符號化：使用行業共識的符號做為基礎形象進行設計，降低認知成本以及適配國際化，例如網絡中斷使用wifi、球形網絡；
場景關聯：除了基礎的插圖，在特定場景下的插圖也要預判用戶在當前場景下的情緒變化，通過插圖來提升用戶情緒峰值，例如社區產品中，用戶成功發布一個帖子，給用戶反饋的插圖應當是開心、活躍讓用戶感受到產品的情緒價值；
動態情感曲線：在新手引導中通過每一步的交互流程來變化插圖表達的情緒，例如開始引導時突出表達信息，在一個流程結束時強化氛圍鼓勵用戶，用戶情緒進度期待→奮斗→高昂，促進用戶進一步操作；
視覺原子構建：提取品牌色彩、標志性符號，形成基礎的插圖基因庫；
品牌故事元素貫穿全場景，例如茶顏悅色將古風和現代插圖風格結合，創造了獨特的品牌調性，并且每個插圖場景都在傳達品牌故事；
多端一致性：能夠三端自適應適配尺寸，在小尺寸屏幕下插圖的識別性是否會出現問題；
擴展性：在各大節日時插圖是否能夠結合當前節日擴展，例如春節時插圖是否可以添加燈籠煙花相關元素；
插圖風格系統是品牌視覺語言的延伸，需通過基因提煉-規則制定-動態迭代的三層框架實現規模化應用；提到喜茶能想到的是描邊黑白風格插圖，茶顏悅色就能想到古風，而提到飛書我們就能想到極簡具有規則的形狀插圖，這就是通過插圖風格提升用戶對產品認知；
前面每一步的分析都是為執行輔助
|
品牌基因提取 |
從品牌色、logo中提取顏色標志性符號，上面提到過 |
|
用戶認知匹配 |
例如年輕用戶偏高飽和，小眾獨特風格，但銀行類的產品就需要體現出權威、安全、穩重的風格 |
|
組件化拆解 |
代入組件化思維，從小到大進行搭建，例如原子層→分子層→模塊，也可以根據場景搭建基礎層→裝飾層→插圖 |
|
情感化分類 |
按照場景情緒進行分類，成功、錯誤、失敗 |
通過視覺表達降低用戶認知負荷，引導用戶關注或操作核心功能；
這個比較常見，很多產品在新功能或者復雜功能的時候會建立新手引導的流程，這時候使用單一的箭頭引導會比較單一，就需要添加一些插圖做為情緒化引導，提升用戶趣味性；
在一些上傳、加載的場景其實也可以融入插圖來緩沖用戶焦慮，現在大多產品都是使用比較簡單的加載方式，實際上可以將品牌插圖融入進去；
將品牌DNA轉化為可感知的視覺敘事，建立情感化認知錨點
在登錄頁/加載頁/404頁等全鏈路重復品牌標志性元素，提升用戶對品牌的記憶；
用插圖隱喻傳遞品牌主張（如環保產品用樹木生長插圖替代口號式文案）
在特殊節日疊加一些裝飾元素，提升儀式感，上面有提到融入節日元素；
解決體驗斷點，通過情感化設計提升用戶容忍度與愉悅感
出現bug的頁面通過插圖傳遞「可控感」，用修復工具插圖+明確解決步驟緩解用戶焦慮；
在新功能上線時或者改版功能時，用插圖對比新舊流程差異，這個主要在b端場景使用會比較多
在用戶完成某項任務或完成某個階段流程時給用戶反饋出高成就感的插圖，例如keep的成就解鎖，學習軟件種每日學習打卡成功等；
分析三個不同行業的插圖，來看看他們的插圖差異化
首先看看金融類產品如何在專業與用戶情感傳遞之間進行平衡
顏色方面圍繞穩重復合色（深藍+淺金），避免高飽和色彩帶來的廉價感；
僅在低風險場景（如教育科普頁）使用輕度擬人化角色，而核心功能涉及到數據方面的則使用抽象的數據的可視化插圖；
在出海的一些國家涉及到文化沖突，例如在中東區域就刪除了動物形象用植物和建筑符號代替；
小紅書通過潮流涂鴉的風格建立z時代圈層共鳴，為用戶提供固定的模板，降低用戶創作成本，提升產品的品牌主張，同時能夠營造出社區統一的氛圍感。
以線稿為主，為用戶提供自由創意的涂鴉玩法。
動態生成：根據實時數據改變插圖元素，如不同的天氣、心率的高低、運動的步數等等；
天氣軟件中可以根據不同的天氣變化背景，當然這個目前已經廣泛應用了，但未來也是不變的一個趨勢；
可通過ai流程來制作統一的插圖風格進行應用，并且風格的局限性相較于之前也更靈活了，在前幾年只能通過mj喂圖抽卡來生成統一的插圖，并且時間成本非常高；
在前兩年只能通過訓練大模型的方式訓練具有產品特點的模型，并且訓練周期非常長，配置要求高，隨著現在的技術更新，線上出現了很多訓練模型的方式，不在依賴本地配置，通過線上訓練的lora模型，內存比較小也方便調用，時間上相對之前大大提高；
轉載：防脫發藥水
蘭亭妙微（藍藍設計）m.payeee.cn 是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
藍藍設計的小編 http://m.payeee.cn
