鐵人檔案
公司一直沒有 UI Design System，在產品設計上沒有一個規範，導致產品 UI 一致性很差，最近想替公司設計一套 UI Design System，讓公司設計師使用，讓前端工程師根 UI Design System 製作components，想藉由鐵人賽來督促自己，給自己一個挑戰自我的機會。
在 UI 設計中，我們會以大小、重量、顏色、間距、對齊，來創造視覺層級與空間，今天就來聊聊間距與對齊，也順便把這次的 Spacing 定義好。 間距（spaci...
今天要做的定義是按鈕及圖示（圖標），開始吧。 按鈕（Button）： 類型：圓角按鈕：圓角尺寸有四個級距（0 ～ 32px），4px 為預設值。填滿按鈕：底...
表單在 CMS 的產品中是很重要的 UI，而表單是由表單元件組合而成，一個基本款的表單需要哪些元件組合呢？ 表單元件： 基本的表單元件有輸入框（input）、下...
Grid System 的演進： 在早期小螢幕的時代，大家都是以 960 grid 為主，這是因為早期的螢幕寬度大部份都是 1024，扣掉瀏覽器的捲軸及邊框，9...
在第十八篇我們已經統計出需要的 UI 元件，也在往後的十九～廿四篇中，把 UI 元件做了設計與定義，現在就要進入歸納與整理階段並且把元件組裝起來，我們先從原子的...
在前面「設計定義」的篇章裡，大部份都只定義了原子，所以在分子的組合時，我們會針對組合過程中需要注意的地方做更細節的規範。 02 分子： 在分子頁面裡，我們開啟...
經過原子→分子的組合，今天進入組織，透過組織我們可以得到更完整的 UI 元件，在後續的模版中，套用組織，就可以快速完成一個頁面。 03 組織： 在組織頁面裡，我...
04 模板： UI 組件裡的「模板」可以當成是 wireframe（線框圖），在 wireframe ，我們要設計排列出四個模板：Desktop、Pad-h、P...
在第十四、十五篇「站在巨人的肩膀」的 UI 解析中，看到 Ant Design、Bootstrap 的介面及使用說明的時候就在想：我能不能把 Design Sy...
昨天我們看到了 Storybook 超棒的功能，今天也來試著寫寫看吧！我們以 Input 為例： 在 VS code 左側面版中有看到一個 Stories...
