從零開始學UI設計：思路與技法

第1章UI介紹
1.1什麼是UI 1
1.2 UI設計師就業前景2
1.3 UI設計的思路/遵循原則4

第2章圖標設計基礎
2.1圖標的概念8
2.2圖標的分類9
2.2.1啟動圖標9
2.2. 2功能圖標9
2.3圖標設計原則10
2.3.1識別性原則10
2.3.2統一性原則11
2.3.3差異性原則12
2.3.4原創圖標13
2.3.5 “潛規則” 14
2.4常見圖標設計風格14
2.4.1剪影圖標14
2.4.2扁平圖標16
2.4.3微扁平和輕寫實圖標17
2.4.4寫實風格圖標17
2.5圖標網格系統18

第3章圖標設計進階
3.1啟動圖標21
3.1.1啟動圖標的靈感來源22
3.1.2常見的幾種啟動圖標設計手法24
3.2功能圖標的靈感來源26
3.2.1吉祥物27
3.2.2啟動圖標特徵28
3.2.3 VI色29
3.2.4直接引用29
3.3建立統一風格的圖標30
3.3.1描邊樣式30
3.3.2色值31
3.3.3圓角半徑32
3.3.4圖標大小32
3.3.5使用相同的元素32
3.3.6其他細節33
3.4字體圖標33
3.4.1什麼是字體圖標33
3.4.2如何繪製字體圖標34
3.5評估圖標的設計質量39
3.5.1識別性39
3.5.2統一性40
3.5.3吸引力40

第4章圖標設計實戰
4.1 PS中的設置41
4.1.1工具設置41
4.1.2單位與標尺42
4.1.3對齊邊緣42
4.1.4鋼筆工具43
4.1.5網格和參考線43
4.1.6新建文檔44
4.2布爾運算45
4.2.1新建圖層45
4.2.2合併形狀45
4.2.3減去頂層形狀46
4.2.4與形狀區域相交46
4.2.5排除重疊形狀46
4.2.6合併形狀組件46
4.3圖標設計流程47
4.3.1設定需求，明確創作方向47
4.3.2頭腦風暴，列舉關鍵字47
4.3.3從關鍵字中聯想造型，尋找靈感47
4.3.4手繪草圖48
4.3.5軟件繪製初稿48
4.3.6確定風格48
4.3.7視覺設計，完善細節49
4.3.8切圖輸出50
4.4剪影圖標的繪製及設計思路50
4.5扁平圖標的繪製及設計思路51
4.6微扁平圖標/輕寫實圖標的繪製及設計思路53
4.7寫實圖標的繪製及設計思路63
4.8節日圖標87
4.9關於創作89
4.9.1利用品牌視覺元素89
4.9.2 “參考”和“模仿” 89
4.10 AI導入PS沒有虛邊91

第5章UI設計基礎
5.1產品思維導圖92
5.2主流設計界面介紹93
5.3 App頁麵類型94
5.3.1聚合類94
5.3.2列表類95
5.3.3內容類95
5.3.4功能類96
5.4 App包含哪些界面97
5.4.1啟動頁97
5.4.2引導頁97
5.4.3首頁99
5.4.4登錄/註冊100
5.4.5無數據界面100
5.4.6出錯界面101
5.4.7反饋界面102
5.5 UI界面設計的佈局105
5.5.1狀態欄106
5.5.2導航欄106
5.5.3主體內容106
5.5.4標籤欄106
5.5.5圖標設計的規範107
5.6 UI界面設計的字體108
5.7 UI界面設計的間距110
5.7.1全局邊距110
5.7.2卡片間距111
5.7.3內容間距112
5.8 UI界面設計的顏色113
5.8.1通過各類App採集色彩113
5.8.2通過Dribbble等網站採集色彩113
5.8.3通過攝影作品採集色彩113
5.8.4從電影中採集色彩115
5.8.5提高審美，增強個人賞析力116
5.9從低保真到高保真116
5.10 UI界面的邏輯關係122
5.11 UI切圖規則124
5.11.1馬克鰻124
5.11 .2 Parker 124
5.11.3 CUTTERMAN—免費的PS切圖插件124
5.11.4 Design Mirror—最好用的設計稿手機預覽工具126
5.11.5命名規則127
5.11.6 Android切圖129
5.11.7 iOS切圖130
5.12信息架構130
5.12.1減少目錄級數132
5.12.2功能的排布要有邏輯，分類要清晰，命名要準確、易懂132
5.12.3減少操作次數、減少界面跳轉層級132
5.12.4操作要順暢，界面跳轉符合用戶心理預期133
5.13視覺層次134
5.14用戶研究137
5.14.1用戶畫像138
5.14.2用戶畫像製作138
5.14.3用戶討論139
5.14.4前期調查139
5.14.5可行性測試140
5.14. 6大數據分析和用戶的反饋140
5.14.7使用場景140
5.14.8操作手勢140
5.14.9格式塔心理學142
5.14.10情感化設計144
5.15 UI交互八原則145

第6章UI設計進階
6.1開始做一個產品149
6.2和甲方鬥智斗勇150
6.3 UI設計的思路151
6.3.1顏色152
6.3.2字體（以下提到的是都在iPhone 5的尺寸下面設計的字號） 152
6.3.3分割線152
6.3.4圖標152
6.3.5排版153
6.4 UI設計配色153
6.4.1 UI色彩認知153
6.4.2配色原則154
6.4.3 App配色欣賞155
6.4.4配色工具155
6.4.5顏色搭配6-3-1法則156
6.4.6推薦幾款有用的顏色工具157
6.5和程序員溝通158
6.6什麼是UX 159
6.7物理尺寸與視覺尺寸161
6.8視覺對齊與形狀164
6.9視覺圓角167

第7章UI設計實戰
7.1繪製思維導圖170
7.2設計UI低保真界面171
7.3設計UI高保真界面175

第8章PS視頻時間軸動畫
8.1幀的概念180
8.2視頻時間軸面板介紹181
8.2.1播放控件181
8.2.2音頻播放控制按鈕181
8.2.3設置按鈕182
8.2.4在播放頭處拆分183
8.2. 5過渡效果183
8.2.6當前時間指示器184
8.2.7時間標尺185
8.2.8工作區域指示器185
8.2.9面板選項卡186
8.2.10向軌道添加媒體186
8.2.11圖層持續時間條187
8.2.12向軌道添加音頻187
8.2.13時間軸視圖縮放控件187
8.2.14幀速率188
8.2.15當前時間189
8.2.16渲染視頻189
8.2.17轉為幀動畫190
8.2.18關鍵幀導航器190
8.2.19啟用/移除關鍵幀190
8.2.20折疊/展開圖層關鍵幀選項191
8.3為什麼要做動畫？191
8.4小汽車動畫（位移動畫） 192
8.5消失的飛碟（不透明度動畫） 195
8.6凹陷的掌印（圖層樣式動畫） 198
8.7 loading加載（縮放動畫） 202
8.8找找找（蒙版動畫） 204
8.9鏡頭切換（過渡動畫） 208
8.10播放器動畫（綜合案例） 210
8.10.1思路構想210
8.10.2軟件實現211

第9章PS幀動畫
9.1面板介紹218
9.2 “吐司小哥”表情包設計219
9.2 .1思路構想219
9.2.2軟件實現220

第10章UI設計也要小插畫
10.1插畫的概念226
10.2插畫靈感的獲取226
10.2.1採集227
10.2.2重構228
10.3 Adobe Illustrator簡介228
10.3.1工作界面（本文中的AI版本為CC 2018） 229
10.3.2文檔新建和輸出229
10.3.3鋼筆工具231
10.3.4剪刀工具232
10.3.5形狀工具232
10.3.6吸管工具232
10.3.7混合工具233
10.3.8漸變工具234
10.3.9對齊面板238
10.3.10變換面板239
10.3.11路徑查找器241
10.3.12圖像描摹242
10.3.13實時上色245
10.4信手拈來的素材—寫生246
10.5寧波街景—重構在插畫中的運用259
10.6辦公室的愛戀—讓小插畫富有故事性262
10.7可愛的耳環—重構和寫生的結合264
10.8如何讓插畫形成系列272
10.8.1 《帶你去旅行》 274
10.8.2 《小紅帽的冰雪之旅》 275
10.8.3 《假如我是老闆》 276
10.8.4假面騎士Redesign（再設計） 280
10.9對插畫的補充281
10.9.1不可忽視的繪畫能力281
10.9.2練習手繪的好處282
10.9.3透視283

寫在結尾的一些話286

參考文獻288