Refactoring UI: The Book 蠻不錯的一本 PDF 小書，講網頁的 UI 設計。特別是前幾章講 Hierarchy, Layout, Text 的部分，工程師也很適合了解一下。
Starting from Scratch
- 先決定好功能、再畫圖
- 先畫草圖，細節之後補
- Agile way 設計
- 選擇 Personality: 字型、顏色、圓角、語言
- 選擇要有 system 限制：顏色、大小…etc
Hierarchy
- 元素的階層很重要，除了用大小之外，還有很多方式可以看出有階層
- font-weight 跟顏色，例如 主內容深色、次內容灰色、更淺的灰放第三層
- 有顏色的背景上，不要用灰色字，應用背景色的淺色版來做 次內容
- 要加強的內容，除了本身顏色或大小之外，也可以弱化其他部分，例如 tabs 變淺
- 資料不一定都需要有 label ，如果 context 本身或加上句子就不需要了。例外是在規格表上則需要 label。
- h1 不一定要最大，要看 app 的需求
- weight 跟 對比的平衡: icon 通常沒 weight，只能降低對比。匡線若淺色太不明顯，可以 weight 粗一點
- 按鈕設計: 次要按鈕可用低對比顏色、不重要按鈕只用連結就好了
Layout & Space
- 留白很重要，秘訣是先多留空，再砍空白。而不是先不留白，再加空白
- spacing 要有系統: 4,8,12,16,24,32,48,64,96, 128,192,256,384,512,640,748
- 不需要填滿整個螢幕。如果內容就沒這個多，不如內容就限制 max-width，這樣比較好閱讀。hedaer 沒關係仍可以 full-width
- 也可以用 RWD 雙欄設計
- Grid 系統不是萬能，例如側欄 sidebar 內容就沒這個多，應該固定寬度，而不是用浮動
- 元素的大小在桌機、手機上不是每個都 Scale 一樣的。例如標題 2.5em 在桌機OK、手機上就太大了。按鈕大小跟裡面的字型大小也有一樣的考量。
- 用上下留白不同來區隔內容
Text
- 文字大小要有系統，建議 12, 14, 16, 18, 20, 24, 30, 36 ,48 ,60, 72px
- 不要用 em 你會得到小數px，用 px 或 rem，
- 文章的文字寬度要限制，建議 20-35em (45~75 characters)。即使文字混著圖片或其他元件也一樣。
- 字型大小不同的文字，應用 baseline 對齊
- line-height 行高有比例的，一般來說是 1.5，但不是絕對的：
- 內容比較寬、可以考慮用 2 倍
- 字型大小越小，則需要大一點例如 1.75 來讓眼睛能看到。如果字很大例如標題，則 1 倍就夠清楚區隔了
- 不是說連結都需要有顏色: 在幾乎每個都可以點的內容之中，可以用不同字型、深一點的顏色、或是一點 weight、或 underline、或 hover 變色或 underline 即可
- 文字對齊一般是 置左
- 置中對標題或短字很好，但長文章不要置中。還是想要置中的話，可以把字改短到兩行。
- 數字要置右
- 模仿印刷設計(雜誌、新聞等)的 justified text 要用 hyphenate，不然會留白會很奇怪
- Letter spacing 文字間距。通常字型設計的時候有偏好適合標題或內文、原本適合內文字型拿來放標題，會太寬，要調小
- 原本適合標題的字型，通常不適合內文，即使調大間距
- 全部大小的字，文件間距適合大一點
Color
- Hex, RGB 常見，但推薦用 HSL
- 光靠 color palette 選幾個顏色是不夠的，你需要很多顏色，分成
- 灰色，用在文字、背景、表單等等: 8-10 種
- 主色調: 1~2種，深淺 5-10種，用在 active 導覽元素、overall look
- 強調色: 黃色、粉紅、藍綠色 來強調刪除、緊告、成功訊息
- 是先定義好 shades，先找到最深、最淺
- 別讓亮度蓋過飽和度。顏色的感知亮度 != HSL 的亮度
- 灰色不一定要純灰，加上顏色飽和度會更cool
- 親和力設計不代表會很醜
- 不要只依賴顏色，可以加上 icon 或是 contrast，照顧色盲用戶
Depth
- 如何設計浮起或凹下的元素
- 用陰影傳達浮起要注意: 小陰影for按鈕、中陰影for dropdown、大陰影 for modal dialog。設計陰影系統，五種就好。
- 陰影可以搭配互動，例如用戶點擊按鈕、拖拉
- 兩層陰影效果
- flat designs 不用陰影也可以創造深度，用跟背景顏色的深淺差異、或是 solid 陰影線
- 用圖層重疊的方式也可以創造深度
Images
- 用好照片: 請專業拍、或是買圖庫
- 如何拯救設計標題文字在圖片時，文字看不清楚: 圖片加黑色半透明、或是降低圖片對比、或是單色調圖片、或是文字加陰影
- 東西有大小 : 不要放大 icon、不要縮小 screenshot (可截圖 smaller screen 或 partial，或是移除文字用示意圖)、不要縮小 icon (for favicon)
- 小心用戶上傳的內容: 控制大小比例裁切、小心 avatar 背景，例如剛好白色跟背景一樣 (可加上 box 陰影 或半透明匡線)
Touches
- 可以讓預設樣式更有設計感，例如 bullets 改用 icon、blockquote 加上 quote 視覺、特別 link 加上特別樣式、表單的 checkbox, radio buttons 客製化
- 用簡單的顏色 border 就可以加強重點，例如 上匡線、active navigation 的下匡線、警告的左匡線、layout 上匡線等等
- 設計太平的話，可以裝飾背景加上顏色或 patterns 或特別圖片，特別是 panel
- 設計 empty state
- 表格匡線 borders 用少一點: 可用不同的背景色、加上額外的間隔，就可以拿到 border 線
- 跳出固定思維:
- dropdown 可以分欄、加上文字描述跟顏色 icon
- 表格如果不需要排序，可以加上 第二列文字、可以有圖片、顏色label
- radio button 可以變成 button groups 按鈕
Leveling Up
- 觀察別人的設計
- 重建自己的 UI