[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-microsoft-fluent-2-design-system-zh":3,"article-related-microsoft-fluent-2-design-system-zh":33,"series-tools-2fddc42e-111d-4e76-917c-45aa85c8f885":86},{"id":4,"slug":5,"title":6,"content":7,"summary":8,"source":9,"source_url":10,"author":11,"image_url":12,"cover_image":12,"category":13,"language":14,"translated_content":11,"related_article_id":15,"keywords":16,"key_takeaways":25,"views":29,"created_at":30,"published_at":31,"topic_cluster_id":32},"2fddc42e-111d-4e76-917c-45aa85c8f885","microsoft-fluent-2-design-system-zh","Microsoft Fluent 2 怎麼運作","\u003Cp data-speakable=\"summary\">\u003Ca href=\"\u002Ftag\u002Fmicrosoft\">Microsoft\u003C\u002Fa> Fluent 2 是微軟的共用設計系統，串起 Microsoft 365、Windows、Teams 和 Azure。\u003C\u002Fp>\u003Cp>說真的，這套東西很硬。微軟要同時管桌機、手機、網頁、原生 \u003Ca href=\"\u002Fnews\u002Fwhy-apples-liquid-glass-redesign-is-wrong-priority-zh\">App\u003C\u002Fa>。還要讓 365、Windows、Teams、Azure 看起來像一家人。\u003C\u002Fp>\u003Cp>這篇重點很單純。就是看 \u003Ca href=\"https:\u002F\u002Fwww.microsoft.com\u002Fdesign\u002Ffluent\u002F\" target=\"_blank\" rel=\"noopener\">Microsoft Fluent 2\u003C\u002Fa> 怎麼靠共用規則，撐起一整個產品宇宙。你如果做過軟體介面，就會知道這件事有多麻煩。\u003C\u002Fp>\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>項目\u003C\u002Fth>\u003Cth>內容\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\u003Ctbody>\u003Ctr>\u003Ctd>平台\u003C\u002Ftd>\u003Ctd>Web、Windows、iOS、Android、macOS\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>產品\u003C\u002Ftd>\u003Ctd>Microsoft 365、Windows、Teams、Azure\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>框架支援\u003C\u002Ftd>\u003Ctd>React、React Native、原生框架\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>設計重點\u003C\u002Ftd>\u003Ctd>簡化、一致、跨平台協調\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftbody>\u003C\u002Ftable>\u003Ch2>Fluent 2 在解什麼問題\u003C\u002Fh2>\u003Cp>微軟不是只做一個產品。它是做一整串產品。這些產品的使用情境差很多。Office 文件、雲端控制台、聊天工具、作業系統，全部都要長得有關聯。\u003C\u002Fp>\n\u003Cfigure class=\"my-6\">\u003Cimg src=\"https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1779071641614-bqxe.png\" alt=\"Microsoft Fluent 2 怎麼運作\" class=\"rounded-xl w-full\" loading=\"lazy\" \u002F>\u003C\u002Ffigure>\n\u003Cp>Fluent 2 的工作，就是把這些差異收進同一套規則裡。它提供 tokens、元件、互動邏輯。設計師和工程師不用每次都從零開始吵。\u003C\u002Fp>\u003Cp>講白了，沒有設計系統，團隊就會各做各的。間距一套、字級一套、按鈕狀態也一套。做久了，產品群會像不同公司拼起來的。\u003C\u002Fp>\u003Cul>\u003Cli>給設計師和工程師同一套語言\u003C\u002Fli>\u003Cli>元件可重用，少重工\u003C\u002Fli>\u003Cli>保留平台原生感，不亂長相\u003C\u002Fli>\u003Cli>大型團隊交付速度更穩\u003C\u002Fli>\u003C\u002Ful>\u003Ch2>為什麼新版 Fluent 2 重要\u003C\u002Fh2>\u003Cp>Fluent 2 不是單純換皮。它把視覺語言縮得更乾淨。也把跨裝置的體驗拉得更一致。這包含間距、字體、層級，也包含你從滑鼠切到觸控時的感受。\u003C\u002Fp>\u003Cp>這種系統最難的地方，不在設計稿。難在真實環境。它要扛無障礙、在地化、程式碼重用，還要面對不同平台的習慣差異。\u003C\u002Fp>\u003Cp>你可以把它跟 \u003Ca href=\"https:\u002F\u002Fm3.material.io\" target=\"_blank\" rel=\"noopener\">Google Material Design 3\u003C\u002Fa>、\u003Ca href=\"https:\u002F\u002Fpolaris.shopify.com\" target=\"_blank\" rel=\"noopener\">Shopify Polaris\u003C\u002Fa>、\u003Ca href=\"https:\u002F\u002Fatlassian.design\" target=\"_blank\" rel=\"noopener\">Atlassian Design System\u003C\u002Fa> 放一起看。大家都在解同一題，只是場景不同。\u003C\u002Fp>\u003Cblockquote>“Design is not just what it looks like and feels like. Design is how it works.” — \u003Ca href=\"https:\u002F\u002Fwww.apple.com\u002Fthink-different\u002F\" target=\"_blank\" rel=\"noopener\">Steve Jobs\u003C\u002Fa>\u003C\u002Fblockquote>\u003Cp>這句話老梗，但很準。Fluent 2 不追求每個畫面都一模一樣。它要的是整體感。你一換裝置，還是知道這是微軟。\u003C\u002Fp>\u003Cp>這裡有一個現實問題。產品越多，偏差越容易累積。今天一個團隊改按鈕，明天另一個團隊改卡片，三個月後整個系統就開始走鐘。\u003C\u002Fp>\u003Cp>所以 Fluent 2 的價值，不只是美觀。它是在幫微軟守住產品秩序。這種秩序很無聊，但很重要。\u003C\u002Fp>\u003Ch2>Fluent 2 跟其他系統怎麼比\u003C\u002Fh2>\u003Cp>Fluent 2 最難的地方，是它得同時滿足兩件事。第一，產品要像同一家出品。第二，平台感不能死掉。這兩件事常常互相打架。\u003C\u002Fp>\n\u003Cfigure class=\"my-6\">\u003Cimg src=\"https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1779071651712-513u.png\" alt=\"Microsoft Fluent 2 怎麼運作\" class=\"rounded-xl w-full\" loading=\"lazy\" \u002F>\u003C\u002Ffigure>\n\u003Cp>拿 \u003Ca href=\"https:\u002F\u002Fdeveloper.apple.com\u002Fdesign\u002Fhuman-interface-guidelines\u002F\" target=\"_blank\" rel=\"noopener\">Apple Human Interface Guidelines\u003C\u002Fa> 來比，Apple 更偏平台原生。拿 \u003Ca href=\"https:\u002F\u002Fcarbondesignsystem.com\" target=\"_blank\" rel=\"noopener\">IBM Carbon Design System\u003C\u002Fa> 來比，IBM 更強在企業資料介面。Fluent 2 則是橫跨很多產品線。\u003C\u002Fp>\u003Cp>這也解釋了為\u003Ca href=\"\u002Fnews\u002Fwhy-web3-ai-learning-must-be-practical-zh\">什麼\u003C\u002Fa>微軟要把它做得夠彈性。不同平台的手勢、鍵盤操作、觸控邏輯都不同。你不能硬把 Windows 的互動搬到 iPhone 上。\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cstrong>Apple HIG\u003C\u002Fstrong>：最重平台原生行為\u003C\u002Fli>\u003Cli>\u003Cstrong>IBM Carbon\u003C\u002Fstrong>：最強企業資料與表單\u003C\u002Fli>\u003Cli>\u003Cstrong>Salesforce Lightning\u003C\u002Fstrong>：強在流程和業務介面\u003C\u002Fli>\u003Cli>\u003Cstrong>Fluent 2\u003C\u002Fstrong>：強在跨產品、跨平台一致性\u003C\u002Fli>\u003C\u002Ful>\u003Cp>這種比較對台灣團隊也有用。你不一定要做超大系統。可是你一定要決定，哪些元件共用，哪些地方要依平台調整。\u003C\u002Fp>\u003Cp>微軟還有一個優勢。Fluent 2 有實作路徑。像 React 和 React Native 都能接。這代表設計規則比較容易落地，不會只停在 \u003Ca href=\"\u002Ftag\u002Ffigma\">Figma\u003C\u002Fa>。\u003C\u002Fp>\u003Cp>很多設計系統死掉，不是因為不好看。是因為工程團隊懶得接，或文件寫得像天書。Fluent 2 至少在這點上比較務實。\u003C\u002Fp>\u003Ch2>產品團隊可以學到什麼\u003C\u002Fh2>\u003Cp>Fluent 2 最值得學的，不是元件樣式。是它把設計系統當成決策模型。你怎麼定 \u003Ca href=\"\u002Ftag\u002Ftoken\">token\u003C\u002Fa>，怎麼定互動，怎麼定跨平台規則，這些都會影響開發效率。\u003C\u002Fp>\u003Cp>如果你自己也在做系統，先想三件事。第一，token 要不要語意化。第二，元件在不同輸入方式下怎麼變。第三，文件要不要同時給設計師和工程師看。\u003C\u002Fp>\u003Cp>再來是治理問題。設計系統不是做完就結束。它要有人維護，有版本管理，也要能接受產品線回饋。沒有治理，系統很快就變成半死不活的元件倉庫。\u003C\u002Fp>\u003Cp>你也可以參考其他公司的做法。\u003Ca href=\"https:\u002F\u002Fwww.shopify.com\u002F\" target=\"_blank\" rel=\"noopener\">Shopify\u003C\u002Fa> 很會寫內容規範。\u003Ca href=\"https:\u002F\u002Fwww.ibm.com\u002Fdesign\u002Fcarbon\u002F\" target=\"_blank\" rel=\"noopener\">IBM\u003C\u002Fa> 很重貢獻流程。\u003Ca href=\"https:\u002F\u002Fwww.salesforce.com\u002F\" target=\"_blank\" rel=\"noopener\">Salesforce\u003C\u002Fa> 則很擅長企業模板。\u003C\u002Fp>\u003Cp>如果你想看更多案例，可以順手看 OraCore 的 \u003Ca href=\"\u002Fnews\u002Fdesign-system-examples-2025\">設計系統案例整理\u003C\u002Fa>。拿來對照很有感。\u003C\u002Fp>\u003Cp>我自己的看法很直接。設計系統下一階段，比的不是誰圖面最漂亮。比的是誰能把無障礙、跨平台、程式碼重用一起做好。這才是硬實力。\u003C\u002Fp>\u003Ch2>這個系統背後的產業脈絡\u003C\u002Fh2>\u003Cp>設計系統會紅，不是偶然。產品數量越多，手工維護 UI 的成本就越高。尤其是 SaaS、雲端服務、\u003Ca href=\"\u002Ftag\u002F企業軟體\">企業軟體\u003C\u002Fa>，畫面只要一亂，客服和內部支援都會跟著爆。\u003C\u002Fp>\u003Cp>微軟這種公司特別需要系統化。它的使用者橫跨消費端和企業端。有人在 Windows 上工作，有人在 Teams 開會，有人在 Azure 管伺服器。每個人看到的介面都不同，但都要有一致感。\u003C\u002Fp>\u003Cp>這也是為什麼 Fluent 2 值得看。它不是單一產品的 UI 指南。它是大型軟體公司怎麼維持秩序的範本。對台灣做 B2B 軟體、內部系統、雲端平台的團隊，也很有參考價值。\u003C\u002Fp>\u003Cp>再講白一點。你公司如果已經有三個前端團隊、兩套元件庫、四種按鈕樣式，問題就不在設計好不好看。問題在治理。Fluent 2 就是在處理這種治理成本。\u003C\u002Fp>\u003Ch2>你該怎麼看 Fluent 2\u003C\u002Fh2>\u003Cp>如果你是設計師，就看它怎麼定規則。 如果你是工程師，就看它怎麼落地。 如果你是產品人，就看它怎麼降低溝通成本。\u003C\u002Fp>\u003Cp>我會建議先從三件事下手。看 token 怎麼命名。看元件怎麼支援不同平台。看文件有沒有把例外情境講清楚。這三件事，通常決定一套系統能不能活過兩年。\u003C\u002Fp>\u003Cp>我的預測很簡單。接下來的設計系統，會越來越像產品基礎建設。誰能把規則、程式碼、文件、治理串好，誰就比較不會被自己的 UI 拖垮。\u003C\u002Fp>\u003Cp>如果你正在做自己的 d\u003Ca href=\"\u002Fnews\u002Fwhy-cadence-design-systems-still-worth-owning-zh\">esig\u003C\u002Fa>n system，先別急著做更多元件。先問一句：你現在的規則，能不能撐住下一個產品線？\u003C\u002Fp>","Microsoft Fluent 2 是微軟的共用設計系統，串起 Microsoft 365、Windows、Teams 和 Azure，靠 tokens、元件與跨平台規則維持一致。","www.uxpin.com","https:\u002F\u002Fwww.uxpin.com\u002Fstudio\u002Fblog\u002Fbest-design-system-examples\u002F",null,"https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1779071641614-bqxe.png","tools","zh","c964fdf9-d57e-4ce4-a1bc-276f93f9daf1",[17,18,19,20,21,22,23,24],"Microsoft Fluent 2","design system","Microsoft 365","Windows","Teams","Azure","tokens","cross-platform UI",[26,27,28],"Fluent 2 的核心，是讓多產品線維持一致。","它靠 tokens、元件和互動規則減少重工。","真正難點不是美觀，是跨平台落地與治理。",1,"2026-05-18T02:33:32.309995+00:00","2026-05-18T02:33:32.29+00:00","6a5b6cdf-6404-4494-bdf9-82bb1e843c0d",{"tags":34,"relatedLang":45,"relatedPosts":49},[35,37,39,41,43],{"name":19,"slug":36},"microsoft-365",{"name":20,"slug":38},"windows",{"name":17,"slug":40},"microsoft-fluent-2",{"name":18,"slug":42},"design-system",{"name":21,"slug":44},"teams",{"id":15,"slug":46,"title":47,"language":48},"microsoft-fluent-2-design-system-en","Microsoft Fluent 2: What Makes It Work","en",[50,56,62,68,74,80],{"id":51,"slug":52,"title":53,"cover_image":54,"image_url":54,"created_at":55,"category":13},"4bdcf208-fb80-484e-b4b6-06af035a6df1","modulate-aws-voice-chats-into-signals-zh","Modulate 用 AWS 把語音聊天做成訊號","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1780519733892-rxue.png","2026-06-03T20:48:22.697917+00:00",{"id":57,"slug":58,"title":59,"cover_image":60,"image_url":60,"created_at":61,"category":13},"f44a28d3-2305-43de-b5fa-21217d561054","amazon-rekognition-content-moderation-filter-zh","Amazon Rekognition把審核變成過濾器","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1780517005409-bxfc.png","2026-06-03T20:02:57.634353+00:00",{"id":63,"slug":64,"title":65,"cover_image":66,"image_url":66,"created_at":67,"category":13},"80f6f40b-3217-45e4-acff-7b2f6d261779","codex-workspace-limits-tell-you-why-zh","Codex 讓工作區限額錯誤說人話","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1780514293711-ltqa.png","2026-06-03T19:17:41.340056+00:00",{"id":69,"slug":70,"title":71,"cover_image":72,"image_url":72,"created_at":73,"category":13},"daa3d568-4bc5-4f29-aa64-225928ace9b4","book-2-turns-sneaker-drop-into-merch-zh","Book 2 把球鞋發售變成周邊系統","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1780513400116-8jeh.png","2026-06-03T19:02:49.03795+00:00",{"id":75,"slug":76,"title":77,"cover_image":78,"image_url":78,"created_at":79,"category":13},"9c9d8493-a290-4058-bcab-dc03c05476bf","chatgpt-updates-june-2026-playbook-zh","ChatGPT 更新變成 6 月 playbook","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1780503519133-jmfa.png","2026-06-03T16:18:07.006985+00:00",{"id":81,"slug":82,"title":83,"cover_image":84,"image_url":84,"created_at":85,"category":13},"f8c7594c-a6b3-4745-acfe-8bc3b217662c","leveraging-turns-vague-business-speak-into-action-zh","Leveraging 讓你把廢話寫成行動","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1780461213246-b87c.png","2026-06-03T04:32:58.759444+00:00",[87,92,97,102,107,112,117,122,127,132],{"id":88,"slug":89,"title":90,"created_at":91},"855cd52f-6fab-46cc-a7c1-42195e8a0de4","surepath-real-time-mcp-policy-controls-zh","SurePath 推出即時 MCP 政策控管","2026-03-26T07:57:40.77233+00:00",{"id":93,"slug":94,"title":95,"created_at":96},"9b19ab54-edef-4dbd-9ce4-a51e4bae4ebb","mcp-in-2026-the-ai-tool-layer-teams-use-zh","2026 年 MCP：團隊真的在用的 AI 工具層","2026-03-26T08:01:46.589694+00:00",{"id":98,"slug":99,"title":100,"created_at":101},"af9c46c3-7a28-410b-9f04-32b3de30a68c","prompting-in-2026-what-actually-works-zh","2026 提示工程，真正有用的是什麼","2026-03-26T08:08:12.453028+00:00",{"id":103,"slug":104,"title":105,"created_at":106},"05553086-6ed0-4758-81fd-6cab24b575e0","garry-tan-open-sources-claude-code-toolkit-zh","Garry Tan 開源 Claude Code 工具包","2026-03-26T08:26:20.068737+00:00",{"id":108,"slug":109,"title":110,"created_at":111},"042a73a2-18a2-433d-9e8f-9802b9559aac","github-ai-projects-to-watch-in-2026-zh","2026 必看 20 個 GitHub AI 專案","2026-03-26T08:28:09.619964+00:00",{"id":113,"slug":114,"title":115,"created_at":116},"a5f94120-ac0d-4483-9a8b-63590071ac6a","claude-code-vs-cursor-2026-zh","Claude Code 與 Cursor 深度對比：202…","2026-03-26T13:27:14.279193+00:00",{"id":118,"slug":119,"title":120,"created_at":121},"0975afa1-e0c7-4130-a20d-d890eaed995e","practical-github-guide-learning-ml-2026-zh","2026 機器學習入門 GitHub 實用指南","2026-03-27T01:16:49.712576+00:00",{"id":123,"slug":124,"title":125,"created_at":126},"bfdb467a-290f-4a80-b3a9-6f081afb6dff","aiml-2026-student-ai-ml-lab-repo-review-zh","AIML-2026：像課綱的學生實驗 Repo","2026-03-27T01:21:51.467798+00:00",{"id":128,"slug":129,"title":130,"created_at":131},"80cabc3e-09fc-4ff5-8f07-b8d68f5ae545","ai-trending-github-repos-and-research-feeds-zh","AI Trending：把 AI 資源收成一張表","2026-03-27T01:31:35.262183+00:00",{"id":133,"slug":134,"title":135,"created_at":136},"3ce6e6e2-bac5-463e-9f8d-45caabcc61f7","awesome-ai-for-science-research-tools-map-zh","AI 科研工具清單，開始像地圖了","2026-03-27T01:46:50.521945+00:00"]