[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-sap-design-system-ai-cross-platform-ui-kits-zh":3,"article-related-sap-design-system-ai-cross-platform-ui-kits-zh":30,"series-tools-08c27def-4f0f-4959-b7bd-e112d1dd8f8d":73},{"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":22,"views":26,"created_at":27,"published_at":28,"topic_cluster_id":29},"08c27def-4f0f-4959-b7bd-e112d1dd8f8d","sap-design-system-ai-cross-platform-ui-kits-zh","SAP Design System 加入 AI 與跨平台 UI Kit","\u003Cp>企業團隊做 SAP 應用時，常卡在同一件事：網頁、手機、AI 功能各自長出不同介面，最後品牌與可用性一起走樣。這次 \u003Ca href=\"https:\u002F\u002Fwww.sap.com\u002Fdesign-system\" target=\"_blank\" rel=\"noopener\">SAP Design System\u003C\u002Fa> 把這個問題\u003Ca href=\"\u002Fnews\u002Fchatgpt-health-turns-chat-into-health-layer-zh\">直接\u003C\u002Fa>收斂到同一個入口。\u003C\u002Fp>\u003Cp data-speakable=\"summary\">SAP 更新 Design System，整合多平台 UI kit、無障礙指引與 AI 設計支援，讓企業應用更容易保持一致。\u003C\u002Fp>\u003Ctable>\u003Cthead>\u003Ctr>\u003Cth>項目\u003C\u002Fth>\u003Cth>數值\u003C\u002Fth>\u003C\u002Ftr>\u003C\u002Fthead>\u003Ctbody>\u003Ctr>\u003Ctd>平台 UI kit\u003C\u002Ftd>\u003Ctd>4\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>核心原則\u003C\u002Ftd>\u003Ctd>5\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>AI 重點\u003C\u002Ftd>\u003Ctd>Joule Work 與生成式 AI 指引\u003C\u002Ftd>\u003C\u002Ftr>\u003Ctr>\u003Ctd>設計優先項\u003C\u002Ftd>\u003Ctd>Simple、delightful、coherent、role-based、adaptive\u003C\u002Ftd>\u003C\u002Ftr>\u003C\u002Ftbody>\u003C\u002Ftable>\u003Ch2>發生了什麼\u003C\u002Fh2>\u003Cp>這次更新把 \u003Ca href=\"https:\u002F\u002Fexperience.sap.com\u002Ffiori-design-web\u002F\" target=\"_blank\" rel=\"noopener\">SAP Fiori for Web\u003C\u002Fa>、\u003Ca href=\"https:\u002F\u002Fexperience.sap.com\u002Ffiori-design-android\u002F\" target=\"_blank\" rel=\"noopener\">SAP Fiori for Android\u003C\u002Fa>、\u003Ca href=\"https:\u002F\u002Fexperience.sap.com\u002Ffiori-design-ios\u002F\" target=\"_blank\" rel=\"noopener\">SAP Fiori for iOS\u003C\u002Fa>，以及 \u003Ca href=\"https:\u002F\u002Fexperience.sap.com\u002Fdesign-system\u002F\" target=\"_blank\" rel=\"noopener\">SAP Digital Design System\u003C\u002Fa> 一起收進設計中心。對產品團隊來說，這代表找元件、看規範、對齊版型，不必再分散到多個頁面。\u003C\u002Fp>\n\u003Cfigure class=\"my-6\">\u003Cimg src=\"https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1785009771871-nkf6.png\" alt=\"SAP Design System 加入 AI 與跨平台 UI Kit\" class=\"rounded-xl w-full\" loading=\"lazy\" \u002F>\u003C\u002Ffigure>\n\u003Cp>頁面也把 AI 相關內容拉到更前面，重點放在 \u003Ca href=\"https:\u002F\u002Fwww.sap.com\u002Fproducts\u002Fartificial-intelligence.html\" target=\"_blank\" rel=\"noopener\">Joule\u003C\u002Fa>、組合式設計，以及用產品插圖說明 AI 功能。這不是單純補幾個圖示，而是把 AI 互動怎麼長、怎麼被理解，納入設計流程。\u003C\u002Fp>\u003Cp>官方同時列出 5 個設計原則：simple、delightful、coherent、role-based、adaptive。搭配 visual foundation、UI elements、UI technologies 這些基礎模組，團隊可以從概念到實作少走幾次交接。\u003C\u002Fp>\u003Cul>\u003Cli>Web、Android、iOS 與數位 UI kit 都能從同一入口取得。\u003C\u002Fli>\u003Cli>新指引更聚焦 AI 協作與端到端商務流程。\u003C\u002Fli>\u003Cli>無障礙與包容性預設被放在設計起點。\u003C\u002Fli>\u003Cli>整體定位是企業級，服務大型 SAP 產品組合。\u003C\u002Fli>\u003C\u002Ful>\u003Cp>從內容結構看，SAP 不是只在補文件，而是在重排設計\u003Ca href=\"\u002Fnews\u002Fsystem-design-interviews-5-core-ideas-zh\">系統\u003C\u002Fa>的優先順序。過去設計系統多半先處理元件一致性，現在它把 AI 行為、流程解釋與跨平台體驗一起放進同一套框架。\u003C\u002Fp>\u003Ch2>為什麼重要\u003C\u002Fh2>\u003Cp>對開發者來說，這種集中式設計系統最直接的價值是少猜、少改、少重工。當 Web、手機與 AI 助理都共用同一套規範，前端工程師和設計師就比較不會各自理解出不同版本的「正確介面」。\u003C\u002Fp>\n\u003Cfigure class=\"my-6\">\u003Cimg src=\"https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1785009771411-3vzu.png\" alt=\"SAP Design System 加入 AI 與跨平台 UI Kit\" class=\"rounded-xl w-full\" loading=\"lazy\" \u002F>\u003C\u002Ffigure>\n\u003Cp>對\u003Ca href=\"\u002Ftag\u002F企業軟體\">企業軟體\u003C\u002Fa>市場來說，SAP 這次更新也在傳遞一個訊號：AI 功能不能只加在流程末端，還得和介面語言、可用性、角色權限一起設計。這對做 B2B SaaS 的團隊很實際，因為買家現在看的是整體操作感，不只是功能數量。\u003C\u002Fp>\u003Cp>另一個影響是交付速度。當 UI kit、原則和 AI 指引都放在同一套資源裡，產品團隊更容易把新功能先做成可控的樣板，再擴到不同模組與裝置。這種做法通常比每個專案各自定義介面，來得穩定也更省協作成本。\u003C\u002Fp>\u003Cp>對 SAP 自己而言，這也有助於讓龐大的產品線看起來\u003Ca href=\"\u002Fnews\u002Fclaude-voice-mode-more-work-in-chat-zh\">更像\u003C\u002Fa>同一個系統，而不是一堆相鄰但不相干的工具。問題不在於企業軟體要不要設計系統，而在於 AI 進場後，團隊能不能維持一致而不把體驗拆散。\u003C\u002Fp>\u003Cp>真正的考題很直接：當 AI 介面開始進入日常工作流，企業團隊是能用一套設計語言快速擴張，還是又得為每個功能重做一次規則？\u003C\u002Fp>","SAP 更新 Design System，整合 Web、Android、iOS 與數位設計資源，並加入 Joule 與生成式 AI 指引，讓企業團隊更容易維持一致的介面與可用性。","www.sap.com","https:\u002F\u002Fwww.sap.com\u002Fdesign-system",null,"https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1785009771871-nkf6.png","tools","zh","420673b6-0c3b-4ace-82a6-b840790fa9ea",[17,18,19,20,21],"SAP","Design System","UI kit","AI design","enterprise software",[23,24,25],"SAP 把 Web、Android、iOS 與數位設計資源收進同一入口。","更新重點從元件一致性，轉向 AI 互動、無障礙與跨平台體驗。","對開發者來說，集中式規範可減少重工，也更利於擴充企業級 AI 功能。",0,"2026-07-25T20:02:25.288494+00:00","2026-07-25T20:02:25.278+00:00","4eb0f633-b1c7-4144-b949-af151d5f0005",{"tags":31,"relatedLang":32,"relatedPosts":36},[],{"id":15,"slug":33,"title":34,"language":35},"sap-design-system-ai-cross-platform-ui-kits-en","SAP Design System adds AI and cross-platform UI kits","en",[37,43,49,55,61,67],{"id":38,"slug":39,"title":40,"cover_image":41,"image_url":41,"created_at":42,"category":13},"6f9cbc0e-712e-438e-9b75-96431bdcdf33","openai-incident-postmortem-security-template-zh","OpenAI 事故帖教你寫安全復盤","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1785024220921-qols.png","2026-07-26T00:03:15.743094+00:00",{"id":44,"slug":45,"title":46,"cover_image":47,"image_url":47,"created_at":48,"category":13},"60e3efb8-e6dd-4c31-9b56-d91cc2bd04d7","chatgpt-health-turns-chat-into-health-layer-zh","ChatGPT Health 直接進主對話","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1785002596802-9crh.png","2026-07-25T18:02:50.190152+00:00",{"id":50,"slug":51,"title":52,"cover_image":53,"image_url":53,"created_at":54,"category":13},"d1580f53-26f0-4bc7-8788-d8ba029bb096","microsoft-azure-amd-ai-hpc-2026-zh","Microsoft 把 AMD 晶片帶進 Azure AI","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1784964760772-c01a.png","2026-07-25T07:32:15.638692+00:00",{"id":56,"slug":57,"title":58,"cover_image":59,"image_url":59,"created_at":60,"category":13},"0461ca72-072e-40dd-a2b4-0521afd6c7a7","openai-compatible-model-comparison-script-zh","一套 OpenAI 兼容脚本測出差距","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1784918020667-jwkd.png","2026-07-24T18:33:10.378548+00:00",{"id":62,"slug":63,"title":64,"cover_image":65,"image_url":65,"created_at":66,"category":13},"d3a5b328-3573-404b-bd9d-807901e54dd3","gemini-live-camera-turns-seeing-into-help-zh","Gemini Live 用鏡頭把問題變答案","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1784851388356-f4dz.png","2026-07-24T00:02:41.656237+00:00",{"id":68,"slug":69,"title":70,"cover_image":71,"image_url":71,"created_at":72,"category":13},"fc2bcfb3-7542-4176-9d84-428bcf950649","jianguoyun-gongxiangwenjian-tongbu-you-sheng-zh","共享文件不该像寄快递：坚果云赢在同步","https:\u002F\u002Fxxdpdyhzhpamafnrdkyq.supabase.co\u002Fstorage\u002Fv1\u002Fobject\u002Fpublic\u002Fcovers\u002Finline-1784797382771-17jk.png","2026-07-23T09:02:33.898431+00:00",[74,79,84,89,94,99,104,109,114,119],{"id":75,"slug":76,"title":77,"created_at":78},"855cd52f-6fab-46cc-a7c1-42195e8a0de4","surepath-real-time-mcp-policy-controls-zh","SurePath 推出即時 MCP 政策控管","2026-03-26T07:57:40.77233+00:00",{"id":80,"slug":81,"title":82,"created_at":83},"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":85,"slug":86,"title":87,"created_at":88},"af9c46c3-7a28-410b-9f04-32b3de30a68c","prompting-in-2026-what-actually-works-zh","2026 提示工程，真正有用的是什麼","2026-03-26T08:08:12.453028+00:00",{"id":90,"slug":91,"title":92,"created_at":93},"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":95,"slug":96,"title":97,"created_at":98},"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":100,"slug":101,"title":102,"created_at":103},"a5f94120-ac0d-4483-9a8b-63590071ac6a","claude-code-vs-cursor-2026-zh","Claude Code 與 Cursor 深度對比：202…","2026-03-26T13:27:14.279193+00:00",{"id":105,"slug":106,"title":107,"created_at":108},"0975afa1-e0c7-4130-a20d-d890eaed995e","practical-github-guide-learning-ml-2026-zh","2026 機器學習入門 GitHub 實用指南","2026-03-27T01:16:49.712576+00:00",{"id":110,"slug":111,"title":112,"created_at":113},"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":115,"slug":116,"title":117,"created_at":118},"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":120,"slug":121,"title":122,"created_at":123},"3ce6e6e2-bac5-463e-9f8d-45caabcc61f7","awesome-ai-for-science-research-tools-map-zh","AI 科研工具清單，開始像地圖了","2026-03-27T01:46:50.521945+00:00"]