Theme / v2.15.0
UI UX Pro Max
把模糊需求變成可實作、可驗收的介面
Case studies
實戰範例
- 實戰範例 001:打造 Glassmorphism 監控儀表板入門從資訊架構開始,逐步建立一個帶有玻璃擬態視覺、響應式布局與可讀狀態的服務監控儀表板。
- 實戰範例 002:建立可探索的營運資料儀表板中階從使用者問題、篩選器狀態和圖表選型開始,逐步做出能比較、定位與追查資料的互動儀表板。
- 實戰範例 003:用 Design Tokens 建立主題切換器進階逐步設計預設、品牌與深色主題,理解 Token 映射、預覽、持久化與首次載入閃爍的處理方式。
- 實戰範例 004:建立可恢復的無障礙退款表單中階從欄位語意、即時驗證到提交狀態,逐步建立滑鼠、鍵盤和讀屏器都能完成的退款申請表單。
- 實戰範例 005:用圖表回答營運問題進階從資料問題、圖表選型到文字替代,逐步建立一個能幫助客服主管找出 SLA 風險的儀表板。
- 實戰範例 006:優化品牌字體與 CLS中階從字重盤點、fallback 設計到慢速網路測試,改善品牌字體載入造成的文字閃爍和累積佈局偏移。
- 實戰範例 007:建立真正可用的深色模式中階不直接反轉顏色,從語意 Token、元件狀態和系統偏好建立可讀、可恢復的深色模式。
- 實戰範例 008:完成一次可重跑的 UX 審查進階以退款申請任務為例,從觀察、問題分級到修正後重測,建立可交給設計與工程團隊的 UX 審查報告。
- 實戰範例 009:第一次為新專案建立配色與主題入門從一句品牌描述開始,透過 palette-picker 與 theme-exporter 走完語意色彩角色、對比度檢查、深色主題到 CSS 變數交付的完整流程。
- 實戰範例 010:為繁中內容站挑選字體配對入門從閱讀需求、字符覆蓋到 fallback 校正,透過 font-pairer 與 style-generator 完成一次可落地的標題與正文字體配對。