週末不想廢話，直接進入正題。

當一個專案啟動時，會先釐清需求，
到底瀏覽器要什麼版本？
需不需要過無障礙標章？
這兩個問題是大叔我之前一開始就問的問題。

但現在，大叔我只會問一個問題，就是瀏覽器版本到底支援到哪，
因為做好了無障礙網頁設計 UI 框架後，
無障礙的底就已經打好了50%，
剩下的就是等設計稿完成，
再來進行討論切版等相關事宜，
所以無障礙標章基本不用擔心。

而今天要來講的是 UI 框架一切的根源：設計稿。

先定義設計稿：是指在與業主釐清需求、wireframe 以及風格之後繪製的畫面，
此畫面將是未來驗收重要的一環。
而在製作 UI 框架上，設計稿就是定義基礎元素、組合元件以及使用規範，
又因為我們要過無障礙，所以又必須把無障礙規則加進去，全部融合再一起。
其中，定義基礎元素時，又以顏色最為重要，字體次之。

顏色

在制定顏色之前，必須知道到底要設計多少種顏色：

1. 主色
2. 成功
3. 資訊
4. 警告
5. 危險
6. 灰色
7. 第二主色（如果有必要）
8. 第三主色（如果有必要）

而且上述顏色，每一個最少都制定 9 個層級，才有辦法因應未來的各種狀態。
且 9 個層級必須要有規律，例如亮度固定增加或減少之類的，
而且還要顧慮深淺背景顏色時，前景文字要什麼顏色，
會這麼說是因為大叔我比較喜歡單純，
我在這 9 個層級當中，可以挑來做 hover、active、disabled 的顏色，
然後利用程式的方式自動生成，
這樣在 CSS 的管理上就會變得比較容易，也比較容易製作出不同的 Theme，
如果每個都特製，那就會很累人了，
但如果是比較特殊的目的，也不用堅持這種原則。

除了這些之外，還有一些顏色要也要設定，
但不需要到 9 個層級，基本只要一個就夠了：

1. 黑色( 通常不建議純黑 #000 ，太刺眼 )
2. 白色( 通常不建議純白 #FFF ，太刺眼 )
3. visited
4. focus
5. border color(建議從灰色裡面挑，或自訂)
6. placehilder(建議從灰色裡面挑，或自訂)

以上就是基本的顏色，
後續可以再自行定義更多，例如：標題文字顏色，內文文字顏色等...

字體

字體其實沒有最好的選項，
這也是跟UX還有語言有關係，
以中文來說，幾乎沒有安全的字體，
所以字體的選擇，只能設計師自行判斷。
比較能定義的是字級大小，
但其實也是會受到字體影響，
但今天就先講一些通則。

之前提過最小最好不要超過 12px，
然後大叔我喜歡 4 的倍數，不管是設計或切版都很好用，
能使用就盡量使用 4 的倍數，間距單位也是，
所以像叔就很喜歡這個組合：

1. 12px
2. 14px
3. 16px
4. 18px
5. 24px
6. 32px
7. 48px
8. 64px
9. 80px

其中 4 ~ 9 的粗體，就可以作為 <h6> ~ <h1>
然後再看看 h 系列的顏色要什麼，
內文文字要什麼，
邊設計邊搭配先前制定好的顏色。

定義完之後，別忘了還要全部檢查一下是否對比值及文字大小是符合無障礙規範的。

icon

選一套 icon 就好，不知道要用什麼，
就選 Fontawesome 吧，因為他有很多種類型。

陰影層級
最好定義三種不同層度的陰影，保持彈性以便隨時調整。

有點想睡了，設計稿部分待續...