設計創意 · UI Design System
把設計稿變成工程師照做的規格
給一個主色，展開整套顏色字級間距規格，設計和工程照同一份做
設計稿看起來好好的，工程師做出來按鈕高度差三個像素、灰色又比較深，來回改到大家都不想講話。改個主色更慘，整站要一頁一頁翻出來換。
這是什麼
給它一個品牌主色，它會展開成一整套規格：深淺十階的顏色、大小配好的字級、以整數往上加的間距、圓角、陰影，還有手機平板電腦的斷點。同時檢查文字和背景的對比夠不夠，避免淺灰字配白底看不清楚。最後輸出成工程師可以直接放進專案的規格檔，設計和工程從頭到尾看同一份。
- 一個主色展開成十個深淺階，按鈕、滑過、按下、停用各用哪一階都標好
- 算出成套的字級和行高，標題到說明文字之間的落差有規律可循
- 間距用八的倍數排，畫面上的距離不會這裡十三、那裡十七
- 檢查文字和背景的對比夠不夠無障礙標準，淺色字配淺底會被抓出來
- 按鈕、輸入框、卡片、彈出視窗各要用哪些規格，三種尺寸三種樣式都定好
- 輸出成工程師能直接用的規格檔，也能貼回設計軟體裡共用
什麼時候用得上
接案交付時少吵三輪
設計稿丟給客戶的工程團隊，對方問「這個灰是哪個灰」「間距到底多少」，一問就是半天。先產一份規格表附在交付檔案裡，色號、字級、間距、圓角全部寫死，工程師照抄就好。驗收時也有依據，不用再拿兩台螢幕比對誰的比較準。
品牌換色，整站不用重做
主色從藍換成墨綠，當初每個顏色都是隨手填的話，就得整站翻一遍。有規格表就只改主色那一格，其他深淺階跟著重算，按鈕、連結、提示訊息一起換過去。做季節活動臨時換色也一樣，換完再檢查一次對比夠不夠就能上。
網站在手機上一直跑版
電腦看好好的，客人用手機點進來標題太大擠成三行，區塊之間又貼太近。規格表會直接給手機、平板、電腦各自的字級和間距，還有讓字隨螢幕寬度平順縮放的做法。商品頁和一頁式銷售頁最需要這個，因為客人多半是滑手機在看。
怎麼用
- 01
先講主色和整體風格
給品牌主色的六碼色號，再挑一個風格：俐落現代、穩重經典，或活潑一點。風格會影響圓角要多圓、陰影要多明顯、字體怎麼挑。不確定風格的話，把品牌現有的網站或商品頁截圖給它看，讓它先判斷再回頭問你對不對。風格挑錯這一步重來很快，比後面整套規格都出來了才想換省事。
- 02
確認展開出來的規格表
它會列出顏色深淺階、字級、間距、圓角、陰影和斷點。這時候要看的是：有沒有哪個顏色在你家背景上看不清楚、字級的落差夠不夠明顯、間距是不是太緊。這一步花十分鐘看過，比日後整站一頁一頁微調省事很多。看到不對就直接說「這個灰太淺」，讓它重算一次再往下走。
- 03
把常用元件的樣子定下來
請它把按鈕、輸入框、卡片、彈出視窗各列出三種尺寸和三種樣式，還有滑過、按下、停用、鎖定時分別長什麼樣。這份定好，之後不管誰做新頁面，按鈕都會長一樣，也不會出現同一個網站有五種圓角的狀況。最容易漏掉的是滑過和停用的樣子，記得一起要，不要只看正常狀態。
- 04
輸出規格交給工程師
請它輸出成工程師可以直接放進專案的格式，再附一份你自己看得懂的說明：哪個顏色用在哪、間距怎麼取。交付時兩份一起給，後面有人接手也看得懂。之後要改，回頭改這份規格再重新輸出，不要在單一頁面上直接硬改。
實際對話長這樣
我們要重做官網，品牌主色是墨綠 #2F5D50，風格俐落、圓角不要太圓。請展開一整套設計規格：主色的十個深淺階、中性灰、成功和錯誤的提示色、字級和行高、以八為倍數的間距、圓角和陰影，還有手機平板電腦三種斷點。文字對比請照無障礙標準檢查，不合格的標出來並給我替代色號。另外把按鈕、輸入框、卡片這三個元件的三種尺寸和三種樣式列成表格。最後輸出一份工程師可以直接放進專案的規格檔，再附一份我自己看得懂的中文說明。
先拿到一張顏色表：墨綠從最淺到最深十階，每階標明用在背景、邊框、文字還是按下的狀態，旁邊是中性灰和兩個提示色。接著是字級表，從十二到四十八共八級，各自配好行高；間距是八、十六、二十四這樣往上排。對比檢查那段會直接寫「淺灰字配白底不合格，建議改用第七階」。最後是元件表、規格檔和一份中文說明。
幾個實用技巧
- 主色給六碼色號，不要只說「我們的綠」，深淺差一點點，整站看起來就不一樣。
- 對比檢查不要跳過，淺灰字配白底在辦公室看得到，客人在陽光下滑手機就看不到了。
- 手機上可以點的地方留大一點，太小的按鈕手指戳不準，客人常常就直接關掉了。
- 規格定完就當成唯一版本，之後要改回頭改這份，不要在單一頁面上直接硬改數字。