昨天將基本的顏色和字體定義好了，
接下來就需要利用基礎製作元件，
從這時候開始就會邊做邊修正設計規範。

製作一套 CSS UI 框架，要先做最基礎元件：

• Button
  狀態：

  • hover
  • active
  • disable
  • focus

• Input 系列
  Type：

  • text
  • textarea
  • password
  • radio
  • checkbox

  狀態：

  • hover
  • active
  • disable
  • focus
  • error

做好這兩種後，就可以再製作更大的元件：

• Accordion
• Breadcrumb
• Dropdown
• Pagination
• Tabs
• Tree

以上僅列比較常用到的，其他先以 HTML 使用，
這樣就達成了最小程度的 UI 框架了，
如果為了更方便以及擴充更多功能的話，
可以再加上這些：

• Card
• Dialog
• Form
• Message/Notification
• Popover
• 自製 Select 各種進階功能
• Switch
• Tooltip

這樣大概就可以吃掉 80% 網頁會需要用到的元件了。

但是比較要注意的是，設計師最好也要先讀完無障礙網頁設計規範，
設計稿完成無障礙的細節越細越好，方便切版時安排與管理，
例如 Tree 就要考量每個節點都不能太擠太窄，否則會不好按到。

至此，我們完成了基本顏色、字體，也完成了基礎元件、常用元件，
其實這個過程就是在做 Atomic Design，
大叔我基本上很少刻意去背專有名詞，
一來對外說明時，專有名詞會有門檻，
如果不自覺說出來，還要一番解釋，不然會造成誤會，
二來訓練自己很自然、容易的說明給業主、同事聽。

而且如果有探究背後原因，這些東西很自然的延伸出來，
就像是「零基礎的小明要如何成為前端工程師？」這篇文章一樣，
整個事情其實就是很自然地發生，
所以當你在看 Atomic Design 理解其原理之後，
即便是忘記了 Atomic Design 這個名詞也沒關係，
就好像這張圖一樣：

也許設計師間使用專有名詞可以縮短討論時間，
也許吧，
但我自己是認為，專有名詞大家的認知、認識程度不同，
也是很容易造成誤會，例如：
hi-fi Wireframe，到底是怎樣的程度，每個人認知不同，
非必要，就別賣弄囉，
這也是降低大家在思考時的能量，
有時專有名詞也是會讓人更花力氣思考，很累人，
但這也是大叔我自己的習慣啦，
有這種習慣，當然要有相對應得社交手法，
不然大家只會認為大叔只是怪咖，
不過我被認為是怪咖也無所謂啦，人長大了，就會看開很多事。

今天就到這，明天講講 Design Guideline。