Multi-platform Unified Design Language
Multi-platform Unified Design Language
這個專案的核心，是為了解決跨平台產品最常見的『設計碎片化』。我針對色彩規範不明確、深色模式層次混亂，還有重複開發組件等痛點，重新梳理了一套設計規範。這套系統成功串接了設計與開發端的溝通邏輯，除了徹底解決介面不一致的技術債，也讓產品在不同平台上，都能保有最高品質的易讀性與視覺層次。
ROLE
ROLE
UI / UX Design
UI / UX Design
UI / UX Design
DELIVERABLES
DELIVERABLES
UI 套件建置
產品架構統整
品牌色系優化
UI 套件建置
產品架構統整
品牌色系優化
Year
Year
2025
2025
2025
PLATFORMS
PLATFORMS
MAC, WINDOWS
Android, iOS
MAC, WINDOWS
Android, iOS
MAC, WINDOWS
Android, iOS
Unified Multi-Platform Design Guidelines
Multi-Platform
Cross Team Communication Document
Cross Team Communication Document
Boost Communication Efficiency
Communication efficiency
Single Source Of Truth
Single Source Of Truth
Introducing
Introducing
從混亂到秩序
從混亂到秩序
提升開發端的交付標準
提升開發端的交付標準
Letstalk 是一款跨平台（Android / iOS / Desktop）的高隱私加密通訊工具。隨著產品邁入成熟期，多端實作的視覺落差成為影響使用者體驗關鍵性問題。針對跨四個平台的設計元素進行深度評估後，我發現了隱含的設計系統在各端實作中出現明顯的視覺斷層 :
Letstalk 是一款跨平台（Android / iOS / Desktop）的高隱私加密通訊工具。隨著產品邁入成熟期，多端實作的視覺落差成為影響使用者體驗關鍵性問題。針對跨四個平台的設計元素進行深度評估後，我發現了隱含的設計系統在各端實作中出現明顯的視覺斷層 :
1
色彩規範不一
設計師與工程師對色彩標示理解不一，導致反覆確認，拉長開發時程
2
深色模式對比不足
元件邊界模糊、辨識度差，增加用戶點擊錯誤的機率，降低轉換率
3
元件缺乏模組化
各頁面交互邏輯不一致，研發效率極低，更讓用戶感到產品不專業且難用
1
色彩規範不一
設計師與工程師對色彩標示理解不一，導致反覆確認，拉長開發時程
2
深色模式對比不足
元件邊界模糊、辨識度差，增加用戶點擊錯誤的機率，降低轉換率
3
元件缺乏模組化
各頁面交互邏輯不一致，研發效率極低，更讓用戶感到產品不專業且難用
What I Build
What I Build
從 Token 到系統
從 Token 到系統
跨平台溝通說明書
跨平台溝通說明書
拆解與重組
標準化跨平台 UI Kit
以原子架構重塑組件， 內化 A11y 無障礙規範與 Elevation 規則
以 "原子設計 (Atomic Design)" 為核心，將龐大的產品元件進行結構化拆解與重組。 同時與開發團隊合作，透過導入 Design Tokens（如命名系統、Elevation 規範），為每一個元件注入跨平台的高彈性應用。並統一規範至跨平台裝置 (Mac、Web、iOS、Android) 。這解決了長期存在的重工問題，更成功加速平台的迭代速度與視覺穩定性。
重組
規範
以原子架構重塑組件， 內化 A11y 無障礙規範與 Elevation 規則
以 "原子設計 (Atomic Design)" 為核心，將龐大的產品元件進行結構化拆解與重組。 同時與開發團隊合作，透過導入 Design Tokens（如命名系統、Elevation 規範），為每一個元件注入跨平台的高彈性應用。並統一規範至跨平台裝置 (Mac、Web、iOS、Android) 。這解決了長期存在的重工問題，更成功加速平台的迭代速度與視覺穩定性。
Benefits
Benefits
從零散到系統
從零散到系統
重構跨平台協作基石
重構跨平台協作基石
透過導入標準化命名邏輯、優化深色模式光影演算，並建立系統性的主元件庫，成功消除設計與開發間的認知鴻溝，大幅提升跨平台產出的精準度與協作效率。
透過導入標準化命名邏輯、優化深色模式光影演算，並建立系統性的主元件庫，成功消除設計與開發間的認知鴻溝，大幅提升跨平台產出的精準度與協作效率。
以下為本次設計系統升級後，為產品帶來的核心價值改善：
以下為本次設計系統升級後，為產品帶來的核心價值改善：
建立標準化的設計語彙
透過導入 Design Tokens 統一色彩命名邏輯，消除設計與開發間的認知鴻溝，讓 還原度提升至 100%
建立標準化的設計語彙
透過導入 Design Tokens 統一色彩命名邏輯，消除設計與開發間的認知鴻溝，讓 還原度提升至 100%
建立標準化的設計語彙
透過導入 Design Tokens 統一色彩命名邏輯，消除設計與開發間的認知鴻溝，讓 還原度提升至 100%
雙模式無障礙設計重構
針對 Dark Mode 重新演算陰影與對比度，解決元件扁平化問題，確保產品在不同環境下皆具備 高水準的易讀性
雙模式無障礙設計重構
針對 Dark Mode 重新演算陰影與對比度，解決元件扁平化問題，確保產品在不同環境下皆具備 高水準的易讀性
雙模式無障礙設計重構
針對 Dark Mode 重新演算陰影與對比度，解決元件扁平化問題，確保產品在不同環境下皆具備 高水準的易讀性
推動系統化產出的規模化
建立原子化主元件庫，減少 40% 以上的重複設計與開發工作量，實現跨平台頁面的快速迭代與統一
推動系統化產出的規模化
建立原子化主元件庫，減少 40% 以上的重複設計與開發工作量，實現跨平台頁面的快速迭代與統一
推動系統化產出的規模化
建立原子化主元件庫，減少 40% 以上的重複設計與開發工作量，實現跨平台頁面的快速迭代與統一
Deconstruction The System
Deconstruction The System
診斷與重構
診斷與重構
解構並優化既有系統
解構並優化既有系統
拆解問題
拆解問題
在正式優化前，首先對設計系統進行全面的體檢，從中梳理出影響跨平台協作的四大關鍵問題：
在正式優化前，首先對設計系統進行全面的體檢，從中梳理出影響跨平台協作的四大關鍵問題：
•
跨平台色彩、排版與尺寸不一致
當使用者從 Web 切換到 App 時，發現品牌色有肉眼可見的落差，會產生「這是不是釣魚網站？」或「這家公司的產品不夠專業」的直覺。以商業的角度來看，不一致的視覺會削弱品牌識別度，增加用戶的認知負荷。
# 顏色
# 頁面佈局
# 元件構造
•
跨平台色彩、排版與尺寸不一致
當使用者從 Web 切換到 App 時，發現品牌色有肉眼可見的落差，會產生「這是不是釣魚網站？」或「這家公司的產品不夠專業」的直覺。以商業的角度來看，不一致的視覺會削弱品牌識別度，增加用戶的認知負荷。
# 顏色
# 頁面佈局
# 元件構造
•
色彩命名系統混亂
存在不同的Token名稱，代表工程師每次開發新頁面都需要與設計師核對前後元件是否一致，這導致嚴重的 設計/開發 重工。當未來需要跨幅度的修改顏色時 (例如品牌形象更新、建立子產品) ，工程師必須逐一搜尋代碼手動修改，非常容易出錯且浪費人力成本。
# Token
# 單一事實來源
# 語義化命名
# 開發協作
•
色彩命名系統混亂
存在不同的Token名稱，代表工程師每次開發新頁面都需要與設計師核對前後元件是否一致，這導致嚴重的 設計/開發 重工。當未來需要跨幅度的修改顏色時 (例如品牌形象更新、建立子產品) ，工程師必須逐一搜尋代碼手動修改，非常容易出錯且浪費人力成本。
# Token
# 單一事實來源
# 語義化命名
# 開發協作
•
無障礙標準 (A11y) 未完全符合
隨著世界人口高齡化，對比度不足將影響高齡使用者，以及視障、色弱等需求性。此外，在數位轉型法律逐漸嚴格的情境下，不符合 WCAG 標準的產品可能面臨法律訴訟。這不僅是道德考量，更是市場覆蓋率的問題。
# 交互元素
# A11y
# 無障礙設計
# 法規遵循
•
無障礙標準 (A11y) 未完全符合
隨著世界人口高齡化，對比度不足將影響高齡使用者，以及視障、色弱等需求性。此外，在數位轉型法律逐漸嚴格的情境下，不符合 WCAG 標準的產品可能面臨法律訴訟。這不僅是道德考量，更是市場覆蓋率的問題。
# 交互元素
# A11y
# 無障礙設計
# 法規遵循
規範梳理與建置
規範梳理與建置
語義化色彩令牌
字體 與 空間變量
多語系內容變量 (i18n)
Semantic Naming
Semantic Naming
Component (頂層)
與開發團隊整合 語義化 (Semantic) 與 大駝峰 (PascalCase) 命名規範，成功建立了具備高度擴展性的色彩體系
Semantic
將顏色與層級掛鉤，標示此色號功能
Primitives (底層)
定義基礎的系統色譜，作為系統基底色值來源
Color Values
定義系統最底層的 Hex Code，確保所有平台共享同一套原始數據
Component (頂層)
與開發團隊整合 語義化 (Semantic) 與 大駝峰 (PascalCase) 命名規範，成功建立了具備高度擴展性的色彩體系
Semantic
將顏色與層級掛鉤，標示此色號功能
Primitives (底層)
定義基礎的系統色譜，作為系統基底色值來源
Color Values
定義系統最底層的 Hex Code，確保所有平台共享同一套原始數據
Component (頂層)
與開發團隊整合 語義化 (Semantic) 與 大駝峰 (PascalCase) 命名規範，成功建立了具備高度擴展性的色彩體系
Semantic
將顏色與層級掛鉤，標示此色號功能
Primitives (底層)
定義基礎的系統色譜，作為系統基底色值來源
Color Values
定義系統最底層的 Hex Code，確保所有平台共享同一套原始數據
Accessibility Tool
Accessibility Tool
AI 輔助無障礙審查與人工審核
透過 Figma AI 工具初步檢查無障礙與規範錯誤，再由設計師作為核心決策者，綜合元件屬性、視覺美感與使用場景進行最後的決定
AI 輔助無障礙審查與人工審核
透過 Figma AI 工具初步檢查無障礙與規範錯誤，再由設計師作為核心決策者，綜合元件屬性、視覺美感與使用場景進行最後的決定
AI 輔助無障礙審查與人工審核
透過 Figma AI 工具初步檢查無障礙與規範錯誤，再由設計師作為核心決策者，綜合元件屬性、視覺美感與使用場景進行最後的決定
DarkMode Optimisation
DarkMode Optimisation
建構深色模式
建構深色模式
優化多情境使用體驗
優化多情境使用體驗
拆解問題
拆解問題
原舊版深色模式因組件邊界模糊且缺乏定義明確的視覺層級，當組件與背景混在一起時，使用者會感到挫折。我初步將這些問題細分為三大痛點：
原舊版深色模式因組件邊界模糊且缺乏定義明確的視覺層級，當組件與背景混在一起時，使用者會感到挫折。我初步將這些問題細分為三大痛點：
•
對比不足導致的閱讀不適感
當次要區域與背景混在一起，使用者無法快速掃描頁面結構。如果用戶需要「額外用力閱讀」，他們會感到眼睛乾澀、疲勞，進而縮短停留時間，影響產品黏著度。
# 夜間易讀性
# 視覺疲勞優化
# 高度層級
•
對比不足導致的閱讀不適感
當次要區域與背景混在一起，使用者無法快速掃描頁面結構。如果用戶需要「額外用力閱讀」，他們會感到眼睛乾澀、疲勞，進而縮短停留時間，影響產品黏著度。
# 夜間易讀性
# 視覺疲勞優化
# 高度層級
•
消失的陰影立體感與層級
在深色背景中，陰影的效果不如亮色背景明顯，導致所有元件看起來都平舖在同一層面上，增加使用者資訊處理的困難度。
# 層級
# 元件陰影
•
消失的陰影立體感與層級
在深色背景中，陰影的效果不如亮色背景明顯，導致所有元件看起來都平舖在同一層面上，增加使用者資訊處理的困難度。
# 層級
# 元件陰影
•
行動版螢幕的視覺負擔
限制較小的螢幕空間容錯率較低。如果沒有明確的層次，重點資訊會被背景淹沒。
# 交互元素
# 行動版佈局
•
行動版螢幕的視覺負擔
限制較小的螢幕空間容錯率較低。如果沒有明確的層次，重點資訊會被背景淹沒。
# 交互元素
# 行動版佈局
解決步驟
解決步驟
針對舊版深色模式下組件模糊、層級缺失的易讀性問題，新版模組依循 Material Design 的光影哲學進行重構。藉由精準的對比度調整與模擬光源注入，賦予元件深度與厚度，確保行動端使用者能在複雜環境下快速、精準地完成操作判讀。
針對舊版深色模式下組件模糊、層級缺失的易讀性問題，新版模組依循 Material Design 的光影哲學進行重構。藉由精準的對比度調整與模擬光源注入，賦予元件深度與厚度，確保行動端使用者能在複雜環境下快速、精準地完成操作判讀。
Define Level
Define Level
Elevation 多層級定義
遵循 Material Design 2 的海拔高度（Elevation）理論，透過 DP (Density-independent Pixels) 數值來定義元件在 Z 軸上的深度，元件隨著 Elevation 數值（如 2dp, 4dp, 6dp）的增加。
定義 Light 和 Dark 兩種模式
白色背景元件純搭配深色、低透明度的 box-shadow，深色模式透過額外疊加半透明層，Elevation 越高，元件上方的白色 Overlay 透明度就越高 (如 7% → 16%) ，海拔越高的元件看起來越亮。
Elevation 多層級定義
遵循 Material Design 2 的海拔高度（Elevation）理論，透過 DP (Density-independent Pixels) 數值來定義元件在 Z 軸上的深度，元件隨著 Elevation 數值（如 2dp, 4dp, 6dp）的增加。
定義 Light 和 Dark 兩種模式
白色背景元件純搭配深色、低透明度的 box-shadow，深色模式透過額外疊加半透明層，Elevation 越高，元件上方的白色 Overlay 透明度就越高 (如 7% → 16%) ，海拔越高的元件看起來越亮。
DarkMode Optimisation
DarkMode Optimisation
UI Kit 系統建構
UI Kit 系統建構
跨團隊協作的規範文件
跨團隊協作的規範文件
跨團隊協作的單一事實來源
跨團隊協作的單一事實來源
在新版組件文件中，我們詳細歸納從基礎元件（如套件元素）到規劃功能套件（按鈕、色調、陰影層級），並於最終整合並套用至各主要頁面
在新版組件文件中，我們詳細歸納從基礎元件（如套件元素）到規劃功能套件（按鈕、色調、陰影層級），並於最終整合並套用至各主要頁面
透過整合卡片、輪播、模態框等組件，我們建立了一套可複用的設計模式，透過元件原子化規範，確保高頻使用的佈局保持視覺一致性，降低開發溝通成本，並在多員協作下消除重工狀況。
透過整合卡片、輪播、模態框等組件，我們建立了一套可複用的設計模式，透過元件原子化規範，確保高頻使用的佈局保持視覺一致性，降低開發溝通成本，並在多員協作下消除重工狀況。
Single Source Of Truth
Single Source Of Truth
基礎元件原子化
定義 Design Tokens (色彩、字體、間距) ，開發可重複使用的基礎原子元件。
功能模組化整合
組合常用元件 (如卡片、彈窗、輪播圖) 形成功能單元，並制定標準化的互動模式與對應的組件使用指南。
頁面佈局標準化
制定通用頁面佈局準則與響應式設計規範，並提供常用的範本，以確保複雜頁面在擴展時的一致性。
基礎元件原子化
定義 Design Tokens (色彩、字體、間距) ，開發可重複使用的基礎原子元件。
功能模組化整合
組合常用元件 (如卡片、彈窗、輪播圖) 形成功能單元，並制定標準化的互動模式與對應的組件使用指南。
頁面佈局標準化
制定通用頁面佈局準則與響應式設計規範，並提供常用的範本，以確保複雜頁面在擴展時的一致性。
System Evolution
System Evolution
從「靜態」進化
從「靜態」進化
AI 協助下的生成式 UI 模組
AI 協助下的生成式模組
在 AI 驅動的設計流程中，基礎品質控管 (如 A11y 預檢、色彩對比與點擊熱區監測) 將交由 AI 負責，讓設計師能從重複性的檢查工作中徹底解放。這讓我們能將精力從繁瑣的元件建置，轉向更具深度的使用者痛點分析，轉而成為更具有策略性的產品設計師。
我認為設計師的價值將不再僅限於精緻的視覺佈局，而是透過對產品本質的理解，我們思考的不再只是外觀的好看，而是設計背後強大的理由與目的性。
本專案建立於2025年，想了解我如何將設計系統與AI Agent整合，歡迎參考近期最新專案:
在 AI 驅動的設計流程中，基礎品質控管 (如 A11y 預檢、色彩對比與點擊熱區監測) 將交由 AI 負責，讓設計師能從重複性的檢查工作中徹底解放。這讓我們能將精力從繁瑣的元件建置，轉向更具深度的使用者痛點分析，轉而成為更具有策略性的產品設計師。
我認為設計師的價值將不再僅限於精緻的視覺佈局，而是透過對產品本質的理解，我們思考的不再只是外觀的好看，而是設計背後強大的理由與目的性。
本專案建立於2025年，想了解我如何進階將設計系統與 AI Agent 整合，歡迎參考近期最新專案:
COPYRIGHT © CHIEN-YI CHU ALL RIGHTS RESERVED