UX 設計
SaaS 任務流程重新設計，達成 25% 任務減少
#企業專案
Completed
打造高質量、易用且可擴展的設計系統
簡介
此項目專注於完善現有的設計系統，以提升一致性、可及性和可擴展性。通過審視實際使用情境並識別組件、交互模式及可及性標準的差距，系統得以優化，從而更好地支持設計師和開發者，同時提供更具包容性的產品體驗。
角色
作為Wistron ITS (WITS)的使用者體驗設計師，我負責根據客戶需求創建和持續維護設計系統。我完善了設計原則和使用情景，以提供更具可訪問性和可擴展性的體驗。
本作品集中顯示的螢幕僅供示範使用，並不代表實際專案介面。所有權利均屬於原所有者。
色彩對比優化
影響
增強可讀性和視覺舒適度，通過優化核心元件的顏色對比達成。
識別出在關鍵UI元素中不足的對比度，影響了可讀性。通過色彩系統審核和 使用Stark插件進行WCAG AA驗證 ，我在保護品牌一致性的同時，優化了 21個色調變體 ，提升了視覺層次和無障礙性。
按鈕聚焦狀態
影響
通過更清晰的焦點狀態設計，改進的交互反饋和鍵盤無障礙功能。
檢視現有的焦點行為，以更好地支援鍵盤導航和互動清晰度。透過優化元件的焦點樣式，使用者可以更容易理解他們的當前狀態和可用操作，提升整體可用性。
通知提示標準化
影響
提高 一致性和跨團隊協作的通知使用。
發現原有站內消息的不明確使用情況。在定義不同場景並引入標準化規範，整理了明確的指導方針，包含出現和消失的時間、樣式和最大數量，以確保跨團隊的一致性。
數量選擇器優化
影響
減少認知負擔和提高可用性在數值輸入過程中。
發現原始數字選擇器與常見設計慣例相衝突。經過對標準模式的研究和與團隊的協調，我提出了一個修改樣式，使其更直觀且更易於使用。
摘要
在打造和維護設計系統的過程中，我意識到設計單一元件與創建可擴展到多個產品線的元件在本質上是不同的。這段經驗增強了我系統性思考的能力，使我能及早考慮更廣泛的架構，並預測元件在各種情境下的行為。
不僅僅是確保視覺一致性，我還學到了平衡設計師和開發人員需求的重要性。無障礙設計的考量，包括顏色對比、觸控目標大小和焦點可見性，被納入基本層面，而不是被視為後續增強。
另一個關鍵學習是結構化設計標記和語義命名的影響。通過採用層次化的標記結構，如 color.background.chip.primary.info。通過在視覺、行為和結構維度上系統性地構建元件變量，系統提高了可維護性和可擴展性。這種結構化的方法降低了設計師的認知負荷，並改善了開發人員的實施清晰度。
這個專案重塑了我設計決策的方式，從一開始就優先考量可擴展性、可訪問性和長期系統的可持續性。
