動(dòng)靜有法 Sketch+Principle UI設(shè)計(jì)基礎(chǔ)教程

第1章
初識(shí)UI設(shè)計(jì)
1．1?什么是UI 002
1．1．1?認(rèn)識(shí)UI設(shè)計(jì) 002
1．1．2?UI設(shè)計(jì)存在的理由 002
1．1．3?什么是好的UI設(shè)計(jì) 003
1．2?UI設(shè)計(jì)師的工作內(nèi)容 004
1．2．1?頭腦風(fēng)暴 004
1．2．2?交互設(shè)計(jì) 005
1．2．3?界面設(shè)計(jì) 008
1．2．4?動(dòng)效設(shè)計(jì) 009
1．2．5?切圖與標(biāo)注 010
1．2．6?輔助研發(fā) 011
1．3?設(shè)計(jì)師常用軟件 012
第2章
Sketch設(shè)計(jì)入門(mén)
2．1?初識(shí)Sketch 016
2．1．1?Sketch是什么 016
2．1．2?Sketch在UI設(shè)計(jì)中的優(yōu)勢(shì) 017
2．1．3?Sketch的團(tuán)隊(duì)價(jià)值 019
2．1．4?Sketch未來(lái)的發(fā)展空間 020
2．2?如何獲取Sketch 021
2．2．1?下載Sketch 021
2．2．2?安裝Sketch 023
2．2．3?激活Sketch 023
2．3?初見(jiàn)Sketch 024
2．4?了解Sketch 主界面 025
2．4．1?菜單欄 025
2．4．2?工具欄 026
2．4．3?頁(yè)面 029
2．4．4?圖層 030
2．4．5?畫(huà)布 031
2．4．6?檢查器 031
2．4．7?導(dǎo)出 033
第3章
發(fā)現(xiàn)音樂(lè)App交互原型圖設(shè)計(jì)
3．1?發(fā)現(xiàn)音樂(lè)App產(chǎn)品需求文檔解讀 036
3．1．1?了解產(chǎn)品需求文檔 036
3．1．2?了解用戶(hù)群體 036
3．1．3?產(chǎn)品功能解讀 037
3．2?設(shè)計(jì)產(chǎn)品交互原型圖 038
3．2．1?為什么要做交互原型圖 038
3．2．2?交互原型圖的展示方式 039
3．3?在Sketch中繪制交互原型圖所需要的工具 040
3．3．1?Insert（添加）工具 040
3．3．2?Group（編組）工具 043
3．3．3?Radius（圓角半徑）工具 044
3．3．4?測(cè)量功能 045
3．3．5?對(duì)齊功能 045
3．3．6?元件的創(chuàng)建 048
3．4?利用Sketch繪制產(chǎn)品交互原型圖 052
3．4．1?創(chuàng)建文檔 052
3．4．2?創(chuàng)建畫(huà)板 053
3．4．3?標(biāo)記非設(shè)計(jì)區(qū)域 053
3．4．4?選擇交互稿色系及明度 056
3．4．5?繪制首頁(yè)交互稿 057
3．4．6?繪制“喜歡”界面交互原型圖 076
3．4．7?繪制“朋友”界面交互原型圖 082
3．4．8?繪制“播放界面”交互原型圖 085
3．4．9?繪制“音樂(lè)列表”界面交互原型圖 087
3．4．10?繪制“電臺(tái)界面”交互原型圖 089
3．5?交互原型圖動(dòng)效初體驗(yàn) 090
3．5．1?Sketch的Link原型功能介紹 091
3．5．2?通過(guò)原型功能進(jìn)行產(chǎn)品原型初體驗(yàn) 094
3．6?作業(yè)：繪制產(chǎn)品原型圖 097
第4章
功能圖標(biāo)設(shè)計(jì)
4．1?了解功能圖標(biāo) 100
4．2?功能圖標(biāo)的設(shè)計(jì)思路及技巧 100
4．3?功能圖標(biāo)的點(diǎn)擊范圍及顯示范圍 103
4．4?功能圖標(biāo)的尺寸規(guī)范 103
4．5?功能圖標(biāo)的視覺(jué)平衡 103
4．5．1?為什么要遵守視覺(jué)平衡 104
4．5．2?計(jì)算視覺(jué)平衡縮進(jìn)值 104
4．5．3?計(jì)算各基本形尺寸 105
4．6?Sketch的布爾運(yùn)算工具 107
4．7?利用Sketch繪制功能圖標(biāo) 108
4．7．1?繪制“側(cè)邊欄icon” 109
4．7．2?繪制“添加icon” 111
4．7．3?繪制“音樂(lè)列表icon” 112
4．7．4?繪制““icon/返回”” 114
4．7．5?繪制“循環(huán)播放icon” 116
4．7．6?繪制“下載icon” 120
4．7．7?繪制“留言icon” 122
4．7．8?繪制“點(diǎn)贊icon” 125
4．8?作業(yè)：繪制產(chǎn)品內(nèi)的功能圖標(biāo) 131
第5章
應(yīng)用圖標(biāo)設(shè)計(jì)
5．1?當(dāng)下同類(lèi)App圖標(biāo)設(shè)計(jì)風(fēng)格分析 134
5．2?應(yīng)用圖標(biāo)的傳導(dǎo)含義 135
5．3?為應(yīng)用圖標(biāo)選擇元素 136
5．4?為應(yīng)用圖標(biāo)選擇顏色 137
5．5? Sketch的STYLE（樣式）功能 139
5．5．1?Fills（填充） 139
5．5．2?Borders（描邊） 143
5．5．3?Shadows（陰影）和InnerShadows（內(nèi)陰影） 144
5．5．4?Blurs（模糊） 145
5．5．5?刪除未使用的樣式 146
5．5．6?復(fù)制與粘貼樣式 146
5．6?利用Sketch繪制應(yīng)用圖標(biāo) 147
5．6．1?繪制圖標(biāo)的扁平狀態(tài) 147
5．6．2?繪制圖標(biāo)的 輕擬物狀態(tài) 149
5．6．3?繪制圖標(biāo)的擬物狀態(tài) 152
5．7?作業(yè)：繪制應(yīng)用圖標(biāo) 153
第6章
發(fā)現(xiàn)音樂(lè)App主界面設(shè)計(jì)
6．1?競(jìng)品分析（音樂(lè)App界面設(shè)計(jì)風(fēng)格） 156
6．2?Sketch文本處理功能介紹 157
6．2．1?創(chuàng)建文本 157
6．2．2?文本檢查器 157
6．2．3?文本Alignment（對(duì)齊）功能 157
6．2．4?Text Options（文本選項(xiàng)） 158
6．2．5?文本樣式的復(fù)制與粘貼 158
6．2．6?創(chuàng)建文本樣式 158
6．2．7?在圖層中應(yīng)用文本樣式 159
6．2．8?路徑上的文本 159
6．2．9?將文本轉(zhuǎn)換為路徑 160
6．2．10?解決缺少字體的問(wèn)題 160
6．3?Sketch中的Mask（蒙版）功能 161
6．4?利用Sketch繪制產(chǎn)品主界面 162
6．4．1?首頁(yè)設(shè)計(jì) 162
6．4．2?“喜歡-界面”設(shè)計(jì) 171
6．4．3?“朋友-界面”設(shè)計(jì) 175
6．4．4?“播放-界面”設(shè)計(jì) 179
6．5?作業(yè)：設(shè)計(jì)產(chǎn)品主界面 181
第7章
發(fā)現(xiàn)音樂(lè)App二級(jí)界面設(shè)計(jì)
7．1?回顧二級(jí)界面交互設(shè)計(jì)稿 184
7．2?利用Sketch及插件繪制產(chǎn)品二級(jí)界面 185
7．2．1?“音樂(lè)列表-界面”設(shè)計(jì) 185
7．2．2?“電臺(tái)-界面”設(shè)計(jì) 186
7．2．3?搜索系列界面設(shè)計(jì) 187
7．2．4?搜索歌手系列界面設(shè)計(jì) 196
7．3?作業(yè)：完成產(chǎn)品二級(jí)界面繪制 201
第8章
頭像設(shè)計(jì)
8．1?頭像的位置 204
8．2?主流頭像設(shè)計(jì)風(fēng)格分析 204
8．3?頭像設(shè)計(jì)思路分析 205
8．3．1?了解需求 205
8．3．2?尋找特點(diǎn) 205
8．3．3?元素設(shè)計(jì) 206
8．3?利用Sketch設(shè)計(jì)產(chǎn)品內(nèi)的小頭像 207
8．4?作業(yè)：繪制小頭像 215
第9章
產(chǎn)品切圖與標(biāo)注
9．1?產(chǎn)品的切圖 218
9．1．1?切圖的存儲(chǔ)方式 218
9．1．2?了解切圖結(jié)構(gòu) 218
9．1．3?了解切圖的命名 219
9．2?產(chǎn)品設(shè)計(jì)稿標(biāo)注 221
第10章
養(yǎng)成設(shè)計(jì)好習(xí)慣
10．1?如何在Sketch中添加庫(kù) 228
10．2?如何使用庫(kù)與更新庫(kù) 229
10．3?文件整理 231
第11章
UI設(shè)計(jì)動(dòng)效入門(mén)
11．1?初識(shí)Principle 234
11．1．1?為什么要學(xué)習(xí)動(dòng)效制作 234
11．1．2?為什么要選擇Principle（Sketch的好搭檔） 234
11．2?如何獲取Principle 235
11．2．1?Principle的下載 235
11．2．2?Principle的安裝 236
11．2．3?Principle的激活 237
11．3?了解Principle 主界面 237
11．3．1?菜單欄 238
11．3．2?工具欄 238
11．3．3?檢查器 238
11．3．4?圖層 238
11．3．5?畫(huà)布 239
11．3．6?預(yù)覽窗口 239
11．4?Sketch文件的導(dǎo)入 240
11．4．1?Sketch文件的整理 241
11．4．2?導(dǎo)入文件該注意的事項(xiàng) 241
11．5?導(dǎo)出視頻文件和GIF文件 242
第12章
Principle Animation
12．1?Principle補(bǔ)間動(dòng)畫(huà)的圖層命名 247
12．2?Principle補(bǔ)間動(dòng)畫(huà)中的關(guān)鍵幀 247
12．3?Principle中的動(dòng)畫(huà)速度曲線 249
12．4?發(fā)現(xiàn)音樂(lè)App的動(dòng)效制作 249
12．4．1?發(fā)現(xiàn)音樂(lè)App的動(dòng)效結(jié)構(gòu)分析 249
12．4．2?發(fā)現(xiàn)音樂(lè)App的動(dòng)效設(shè)計(jì) 252
12．4．3?發(fā)現(xiàn)音樂(lè)App列表頁(yè)動(dòng)效設(shè)計(jì) 254
12．4．4?作業(yè)：通過(guò)Principle Animation制作界面動(dòng)效 255
第13章
Principle Drivers
13．1?了解Principle Drivers 258
13．2?Principle Drivers ―― Page（翻頁(yè)）動(dòng)畫(huà) 258
13．3?首頁(yè)banner翻頁(yè)動(dòng)畫(huà)設(shè)計(jì)制作 262
13．3．1?聯(lián)動(dòng)動(dòng)畫(huà)――Scroll（滾動(dòng)） 266
13．3．2?音樂(lè)列表動(dòng)畫(huà)設(shè)計(jì) 270
13．4?聯(lián)動(dòng)動(dòng)畫(huà)――Drag（拖動(dòng)） 271
13．4．1?聯(lián)動(dòng)動(dòng)畫(huà)――Drag（拖動(dòng)）動(dòng)畫(huà)制作 272
13．4．2?電臺(tái)界面拖動(dòng)動(dòng)畫(huà)設(shè)計(jì) 277
第14章
Mirror預(yù)覽
14．1?Sketch Mirror的使用方法 282
14．2?Principle Mirror的使用方法 283

第15章
UI設(shè)計(jì)進(jìn)階之路
15．1?時(shí)刻了解行業(yè)設(shè)計(jì)風(fēng)格的趨勢(shì)和變化 286
15．2?全鏈路設(shè)計(jì)師 286
15．3?大量練習(xí) 286
15．4?突破瓶頸期 287