從零開始學(xué)UI設(shè)計(jì)：思路與技法

第1章 UI介紹
1.1 什么是UI 1
1.2 UI設(shè)計(jì)師就業(yè)前景 2
1.3 UI設(shè)計(jì)的思路/遵循原則 4

第2章圖標(biāo)設(shè)計(jì)基礎(chǔ)
2.1 圖標(biāo)的概念 8
2.2 圖標(biāo)的分類 9
2.2.1 啟動(dòng)圖標(biāo) 9
2.2.2 功能圖標(biāo) 9
2.3 圖標(biāo)設(shè)計(jì)原則 10
2.3.1 識(shí)別性原則 10
2.3.2 統(tǒng)一性原則 11
2.3.3 差異性原則 12
2.3.4 原創(chuàng)圖標(biāo) 13
2.3.5 “潛規(guī)則” 14
2.4 常見圖標(biāo)設(shè)計(jì)風(fēng)格 14
2.4.1 剪影圖標(biāo) 14
2.4.2 扁平圖標(biāo) 16
2.4.3 微扁平和輕寫實(shí)圖標(biāo) 17
2.4.4 寫實(shí)風(fēng)格圖標(biāo) 17
2.5 圖標(biāo)網(wǎng)格系統(tǒng) 18

第3章圖標(biāo)設(shè)計(jì)進(jìn)階
3.1 啟動(dòng)圖標(biāo) 21
3.1.1 啟動(dòng)圖標(biāo)的靈感來源 22
3.1.2 常見的幾種啟動(dòng)圖標(biāo)設(shè)計(jì)手法 24
3.2 功能圖標(biāo)的靈感來源 26
3.2.1 吉祥物 27
3.2.2 啟動(dòng)圖標(biāo)特征 28
3.2.3 VI色 29
3.2.4 直接引用 29
3.3 建立統(tǒng)一風(fēng)格的圖標(biāo) 30
3.3.1 描邊樣式 30
3.3.2 色值 31
3.3.3 圓角半徑 32
3.3.4 圖標(biāo)大小 32
3.3.5 使用相同的元素 32
3.3.6 其他細(xì)節(jié) 33
3.4 字體圖標(biāo) 33
3.4.1 什么是字體圖標(biāo) 33
3.4.2 如何繪制字體圖標(biāo) 34
3.5 評(píng)估圖標(biāo)的設(shè)計(jì)質(zhì)量 39
3.5.1 識(shí)別性 39
3.5.2 統(tǒng)一性 40
3.5.3 吸引力 40

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

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

第6章 UI設(shè)計(jì)進(jìn)階
6.1 開始做一個(gè)產(chǎn)品 149
6.2 和甲方斗智斗勇 150
6.3 UI設(shè)計(jì)的思路 151
6.3.1 顏色 152
6.3.2 字體（以下提到的是都在iPhone 5的尺寸下面設(shè)計(jì)的字號(hào)） 152
6.3.3 分割線 152
6.3.4 圖標(biāo) 152
6.3.5 排版 153
6.4 UI設(shè)計(jì)配色 153
6.4.1 UI色彩認(rèn)知 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 視覺對(duì)齊與形狀 164
6.9 視覺圓角 167

第7章 UI設(shè)計(jì)實(shí)戰(zhàn)
7.1 繪制思維導(dǎo)圖 170
7.2 設(shè)計(jì)UI低保真界面 171
7.3 設(shè)計(jì)UI高保真界面 175

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

第9章 PS幀動(dòng)畫
9.1 面板介紹 218
9.2 “吐司小哥”表情包設(shè)計(jì) 219
9.2.1 思路構(gòu)想 219
9.2.2 軟件實(shí)現(xiàn) 220

第10章 UI設(shè)計(jì)也要小插畫
10.1 插畫的概念 226
10.2 插畫靈感的獲取 226
10.2.1 采集 227
10.2.2 重構(gòu) 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 對(duì)齊面板 238
10.3.10 變換面板 239
10.3.11 路徑查找器 241
10.3.12 圖像描摹 242
10.3.13 實(shí)時(shí)上色 245
10.4 信手拈來的素材—寫生 246
10.5 寧波街景—重構(gòu)在插畫中的運(yùn)用 259
10.6 辦公室的愛戀—讓小插畫富有故事性 262
10.7 可愛的耳環(huán)—重構(gòu)和寫生的結(jié)合 264
10.8 如何讓插畫形成系列 272
10.8.1 《帶你去旅行》 274
10.8.2 《小紅帽的冰雪之旅》 275
10.8.3 《假如我是老板》 276
10.8.4 假面騎士Redesign（再設(shè)計(jì)） 280
10.9 對(duì)插畫的補(bǔ)充 281
10.9.1 不可忽視的繪畫能力 281
10.9.2 練習(xí)手繪的好處 282
10.9.3 透視 283

寫在結(jié)尾的一些話 286

參考文獻(xiàn) 288