近期於前端開發時常會被 PM 要求先提個 Mockup 來看看呈現效果之類的。有鑑於公司目前的人力配置一直沒有規劃到 UI / UX 這個領域，那就自己下來碰碰看吧。這篇筆記的是六角學院的 UI 設計入門：畫出有程式邏輯的設計稿 中的實作部分 – 從按鈕出發。
課程相關資訊
[連結]：https://courses.hexschool.com/courses/enrolled/724307
本篇範圍：Chapter 4 ( 從原子設計學習介面的常見元件 ) ，一共有 13 篇
請注意：本系列文章為個人對應課程的消化吸收後，所整理出來的內容。換言之，並不一定會包含全部的課程內容，也有可能會添加其他資源來說明。
筆記
1. 按鈕功能：讓使用者採取行動 / 做出選擇，使用者在點擊後，會產生反饋。
2. 可以分為填滿按鈕、外框按鈕和文字按鈕，強調程度則是由高到低排列。換言之，填滿按鈕的情境常會用在如「加入購物車」、「點擊註冊」…等希望使用者執行的區塊。
3. 按鈕樣式：直角、圓角(使用者的視覺會集中)、切角
4. 按鈕排版：文字垂直置中、精簡、單行、粗體字重、英文大寫、要有文字間距、加上圖標和陰影(填滿按鈕)
實際設計時，會使用預設的 16px 來當作基準。水平垂直置中的文字和 padding 的比例，一般為 1:2 (上下:左右)
5. 圓角 border-radius 的部分不要超過 8px
