Sketch 移動(dòng)UI與交互設(shè)計(jì)（視頻講解版）

第1章 網(wǎng)頁(yè)UI設(shè)計(jì)入門
1．1　UI設(shè)計(jì)發(fā)展史　2
1．1．1　早期UI設(shè)計(jì)的風(fēng)格　3
1．1．2　中期UI設(shè)計(jì)的興起　3
1．1．3　后期UI設(shè)計(jì)的發(fā)展　5
知識(shí)點(diǎn)講解——iOS系統(tǒng)　6
知識(shí)點(diǎn)講解——Android系統(tǒng)　6
知識(shí)點(diǎn)講解——Windows　系統(tǒng)　7
知識(shí)點(diǎn)講解——擬物化風(fēng)格設(shè)計(jì)　8
知識(shí)點(diǎn)講解——扁平化風(fēng)格設(shè)計(jì)　8
1．2　網(wǎng)頁(yè)UI設(shè)計(jì)的制作流程　9
1．2．1　產(chǎn)品調(diào)研階段　10
1．2．2　UI視覺(jué)設(shè)計(jì)　10
1．2．3　產(chǎn)品技術(shù)開(kāi)發(fā)　11
1．2．4　BUG測(cè)試　12
1．2．5　產(chǎn)品上線　12
1．2．6　產(chǎn)品迭代　13
1．3　UI設(shè)計(jì)的注意事項(xiàng)　13
1．3．1　圖稿一致性原則　13
知識(shí)點(diǎn)講解——字體　13
知識(shí)點(diǎn)講解——表單錄入　14
知識(shí)點(diǎn)講解——鼠標(biāo)手勢(shì)　14
1．3．2　圖稿準(zhǔn)確性原則　15
1．3．3　布局合理化原則　16
1．3．4　操作合理性原則　17
1．3．5　系統(tǒng)響應(yīng)時(shí)間原則　18
1．4　配色對(duì)于UI設(shè)計(jì)的影響　18
1．4．1　網(wǎng)頁(yè)配色基本概念　18
知識(shí)點(diǎn)講解——網(wǎng)頁(yè)主色　18
知識(shí)點(diǎn)講解——網(wǎng)頁(yè)背景色　19
知識(shí)點(diǎn)講解——網(wǎng)頁(yè)輔色　19
知識(shí)點(diǎn)講解——網(wǎng)頁(yè)點(diǎn)綴色　20
1．4．2　網(wǎng)頁(yè)配色基本方法　20
知識(shí)點(diǎn)講解——根據(jù)產(chǎn)品內(nèi)容確定網(wǎng)頁(yè)主色　20
知識(shí)點(diǎn)講解——根據(jù)網(wǎng)頁(yè)主色確定配色方案　21
1．4．3　網(wǎng)頁(yè)色彩搭配技巧　22
知識(shí)點(diǎn)講解——同色系　23
知識(shí)點(diǎn)講解——鄰近色　23
知識(shí)點(diǎn)講解——對(duì)比色　25
知識(shí)點(diǎn)講解——互補(bǔ)色　25
1．5　本章小結(jié)　26
第2章　初識(shí)Sketch
2．1　繪制iOS 照片分享界面　28
2．1．1　Sketch的安裝與啟動(dòng)　28
操作案例——安裝與啟動(dòng)Sketch　28
2．1．2　了解Sketch界面　30
知識(shí)點(diǎn)講解——Sketch的主界面　31
知識(shí)點(diǎn)講解——菜單欄　31
知識(shí)點(diǎn)講解——工具欄　34
操作案例——自定義工具欄　34
2．1．3　設(shè)置Sketch的快捷鍵　35
知識(shí)點(diǎn)講解——Sketch的快捷鍵　35
操作案例——自定義快捷鍵　37
2．1．4　添加圖片、形狀　39
知識(shí)點(diǎn)講解——Sketch插入面板　39
知識(shí)點(diǎn)講解——插入圖片　40
知識(shí)點(diǎn)講解——插入形狀　41
2．1．5　添加文本　42
知識(shí)點(diǎn)講解——插入文本　43
2．2　繪制手機(jī)登錄頁(yè)　45
2．2．1　新建和保存Sketch文件　45
知識(shí)點(diǎn)講解——文件的新建和保存　45
操作案例——設(shè)置Sketch　的標(biāo)尺　47
2．2．2　使用Sketch 畫(huà)板　48
知識(shí)點(diǎn)講解——畫(huà)板預(yù)設(shè)　48
知識(shí)點(diǎn)講解——畫(huà)板檢查器　50
2．2．3　使用Sketch 模板　51
知識(shí)點(diǎn)講解——　“iOS 用戶界面設(shè)計(jì)”模板　52
2．3　本章小結(jié)　56
第3　章 繪制線框原型
3．1　繪制手機(jī)信息界面線框圖　58
3．1．1　線框原型的基本概念　58
知識(shí)點(diǎn)講解——線框原型概念　60
知識(shí)點(diǎn)講解——線框原型視覺(jué)特性　61
3．1．2　繪制線框原型的注意事項(xiàng)　61
知識(shí)點(diǎn)講解——巧用明暗對(duì)比　63
知識(shí)點(diǎn)講解——不使用截圖和顏色　64
知識(shí)點(diǎn)講解——標(biāo)記第一屏高度　64
知識(shí)點(diǎn)講解——合理的布局和間距　65
3．2　繪制注冊(cè)頁(yè)面線框圖　65
3．2．1　圖層面板　66
知識(shí)點(diǎn)講解——圖層面板簡(jiǎn)述　67
操作案例——添加和編輯圖層　68
知識(shí)點(diǎn)講解——選擇圖層　69
操作案例——移動(dòng)圖層　70
3．2．2　圖層類型　71
知識(shí)點(diǎn)講解——圖層類型詳解　73
操作案例——變換大小　75
3．2．3　圖層的調(diào)整　75
操作案例——新建、重命名、復(fù)制和刪除頁(yè)面　78
知識(shí)點(diǎn)講解——復(fù)制、剪切和粘貼圖層　79
知識(shí)點(diǎn)講解——圖層組的檢查器　80
3．3　繪制完整的線框原型圖　83
3．3．1　計(jì)步App 線框圖的繪制01　84
3．3．2　計(jì)步App 線框圖的繪制02　87
3．4　本章小結(jié)　91
第4　章 使用Sketch 繪制圖標(biāo)
4．1　繪制iOS 11 提醒事項(xiàng)圖標(biāo)　93
4．1．1　矢量工具　93
知識(shí)點(diǎn)講解——矢量圖形（形狀）　95
知識(shí)點(diǎn)講解——點(diǎn)模式　95
知識(shí)點(diǎn)講解——編輯矢量圖形　96
操操作案例——矢量工具繪制箭頭圖標(biāo)　97
4．1．2　路徑的使用　98
知識(shí)點(diǎn)講解——路徑　100
4．2　繪制Android 照相機(jī)圖標(biāo)　101
4．2．1　使用“形狀”繪制圖標(biāo)　102
操作案例——使用布爾運(yùn)算繪制照相機(jī)圖標(biāo)　106
知識(shí)點(diǎn)講解——布爾運(yùn)算　107
4．2．2　使用“蒙板”繪制圖標(biāo)　108
知識(shí)點(diǎn)講解——蒙板命令　109
操作案例——使用透明度蒙板制作簡(jiǎn)易圖標(biāo)　110
4．2．3　添加陰影效果為圖標(biāo)添加質(zhì)感　112
知識(shí)點(diǎn)講解——圖標(biāo)基本屬性　113
4．3　繪制極簡(jiǎn)化的Android圖標(biāo)　116
4．3．1　Android 圖標(biāo)設(shè)計(jì)準(zhǔn)則　116
知識(shí)點(diǎn)講解——圖標(biāo)設(shè)計(jì)準(zhǔn)則　118
4．3．2　圖標(biāo)設(shè)計(jì)的三大原則　120
知識(shí)點(diǎn)講解——三大原則　122
4．3．3　極簡(jiǎn)化設(shè)計(jì)　123
知識(shí)點(diǎn)講解——極簡(jiǎn)化設(shè)計(jì)風(fēng)格　126
操作案例——繪制記事本圖標(biāo)　127
4．4　本章小結(jié)　128
第5章　Android UI 設(shè)計(jì)
5．1　繪制Android 音樂(lè)播放器界面　130
5．1．1　組件的編輯及使用　130
知識(shí)點(diǎn)講解——?jiǎng)?chuàng)建組件　133
知識(shí)點(diǎn)講解——更換文本　133
知識(shí)點(diǎn)講解——管理組件　134
操作案例——使用組件工具繪制導(dǎo)航欄　135
5．1．2　應(yīng)用軟件UI 設(shè)計(jì)　136
知識(shí)點(diǎn)講解——什么是應(yīng)用軟件UI設(shè)計(jì)　137
知識(shí)點(diǎn)講解——應(yīng)用軟件UI設(shè)計(jì)規(guī)范　138
知識(shí)點(diǎn)講解——軟件啟動(dòng)UI設(shè)計(jì)　139
5．1．3　移動(dòng)App UI 設(shè)計(jì)　140
知識(shí)點(diǎn)講解——什么是App　142
知識(shí)點(diǎn)講解——移動(dòng)UI的設(shè)計(jì)趨勢(shì)　143
知識(shí)點(diǎn)講解——移動(dòng)UI和平面UI的區(qū)別　145
5．1．4　Android 系統(tǒng)UI設(shè)計(jì)　146
知識(shí)點(diǎn)講解——Android系統(tǒng)文字規(guī)范設(shè)計(jì)　148
操作案例——繪制返回或菜單按鈕　149
知識(shí)點(diǎn)講解——Android　系統(tǒng)UI 設(shè)計(jì)特色　150
5．2　繪制Android 信息界面　151
5．2．1　“文本”命令　152
知識(shí)點(diǎn)講解——添加文本　154
知識(shí)點(diǎn)講解——文本框　154
5．2．2　“文本”檢查器　155
知識(shí)點(diǎn)講解——文本的編輯　157
知識(shí)點(diǎn)講解——共享樣式　159
操作案例——使用共享樣式
繪制界面　160
5．2．3　“文本”選項(xiàng)　161
知識(shí)點(diǎn)講解——文本路徑　163
知識(shí)點(diǎn)講解——文本轉(zhuǎn)換輪廓　164
操作案例——轉(zhuǎn)化為輪廓繪制
界面元素　164
知識(shí)點(diǎn)講解——導(dǎo)出文字　165
知識(shí)點(diǎn)講解——應(yīng)用樣式　166
知識(shí)點(diǎn)講解——混合模式　168
5．3　本章小結(jié)　169
第6　章 iOS UI 設(shè)計(jì)
6．1　繪制iPhone X App 界面　171
6．1．1　iOS 系統(tǒng)UI 用戶元素　171
知識(shí)點(diǎn)講解——頂部導(dǎo)航欄　173
知識(shí)點(diǎn)講解——標(biāo)簽欄和搜索欄　173
操作案例——繪制iPhone　X啟動(dòng)界面　174
知識(shí)點(diǎn)講解——表格視圖　176
6．1．2　iOS 系統(tǒng)UI 設(shè)計(jì)要求　177
知識(shí)點(diǎn)講解——確保程序可行　178
知識(shí)點(diǎn)講解——確保App　可以在
iPhone　和iPad 中通用　178
知識(shí)點(diǎn)講解——基于Web　網(wǎng)頁(yè)
重新設(shè)計(jì)　179
6．1．3　iOS 系統(tǒng)UI 設(shè)計(jì)原則　179
知識(shí)點(diǎn)講解——美觀性　182
知識(shí)點(diǎn)講解——一致性　183
知識(shí)點(diǎn)講解——控制可行性　184
知識(shí)點(diǎn)講解——及時(shí)性　184
知識(shí)點(diǎn)講解——暗喻性　184
知識(shí)點(diǎn)講解——自主性　185
6．1．4　iPhone X 的App UI 設(shè)計(jì)　185
知識(shí)點(diǎn)講解——編輯位圖　188
知識(shí)點(diǎn)講解——iPhone　X 的屏幕尺寸　190
知識(shí)點(diǎn)講解——iPhone　X 的布局　190
6．2　繪制iPhone 8 App 界面　191
6．2．1　iOS App UI 設(shè)計(jì)模板　192
知識(shí)點(diǎn)講解——iPhone　8 的組件　193
操作案例——繪制iPhone　系統(tǒng)視頻播放界面　194
知識(shí)點(diǎn)講解——iPhone　X 的組件　195
6．2．2　iOS UI 設(shè)計(jì)規(guī)范　195
知識(shí)點(diǎn)講解——界面尺寸　198
知識(shí)點(diǎn)講解——圖標(biāo)尺寸　198
知識(shí)點(diǎn)講解——內(nèi)部設(shè)計(jì)　199
6．2．3　移動(dòng)App 設(shè)計(jì)過(guò)程中的要點(diǎn)　199
知識(shí)點(diǎn)講解——App　UI設(shè)計(jì)流程　202
操作案例——繪制系統(tǒng)發(fā)生錯(cuò)誤界面　203
知識(shí)點(diǎn)講解——App　UI配色原則　204
6．3　本章小結(jié)　206
第7　章 PC 端UI 設(shè)計(jì)
7．1　繪制網(wǎng)站登錄界面　208
7．1．1　PC 端和移動(dòng)端UI 設(shè)計(jì)的區(qū)別　208
知識(shí)點(diǎn)講解——網(wǎng)頁(yè)設(shè)計(jì)PC　端和
移動(dòng)端的區(qū)別　211
7．1．2　鉛筆工具和剪刀工具　213
知識(shí)點(diǎn)講解——鉛筆工具　215
知識(shí)點(diǎn)講解——剪刀工具　216
操作案例——設(shè)計(jì)制作設(shè)置按鈕①　216
知識(shí)點(diǎn)講解——旋轉(zhuǎn)復(fù)制　217
設(shè)置按鈕②　218
知識(shí)點(diǎn)講解——變形工具　219
7．2　繪制醫(yī)學(xué)網(wǎng)站首頁(yè)　219
7．2．1　PC 端UI 設(shè)計(jì)原則　220
知識(shí)點(diǎn)講解——以用戶為中心　223
知識(shí)點(diǎn)講解——視覺(jué)美觀　224
知識(shí)點(diǎn)講解——主題明確　224
知識(shí)點(diǎn)講解——內(nèi)容與形式統(tǒng)一　26
知識(shí)點(diǎn)講解——有機(jī)整體　227
操作案例——繪制“休閑空間”啟動(dòng)頁(yè)①　227
7．2．2　PC 端UI 設(shè)計(jì)要點(diǎn)　229
知識(shí)點(diǎn)講解——設(shè)計(jì)與技術(shù)相結(jié)合　231
知識(shí)點(diǎn)講解——視覺(jué)導(dǎo)向性　232
7．2．3　PC 端UI 設(shè)計(jì)風(fēng)格　233
知識(shí)點(diǎn)講解——大眾化設(shè)計(jì)風(fēng)格　234
知識(shí)點(diǎn)講解——個(gè)性化設(shè)計(jì)風(fēng)格　234
操作案例——繪制“休閑空間”啟動(dòng)頁(yè)②　235
7．3　本章小結(jié)　236
第8　章 UI 的輸出與交互設(shè)計(jì)
8．1　UI 圖像的輸出　238
8．1．1　圖標(biāo)的輸出　238
知識(shí)點(diǎn)講解——適配設(shè)備　238
知識(shí)點(diǎn)講解——導(dǎo)出圖層　240
知識(shí)點(diǎn)講解——導(dǎo)出和切片　241
8．1．2　界面的輸出　241
知識(shí)點(diǎn)講解——切片工具　242
操作案例——為切片重命名　245
8．2　UI 設(shè)計(jì)的交互　245
知識(shí)點(diǎn)講解——了解移動(dòng)設(shè)備的手勢(shì)　245
知識(shí)點(diǎn)講解——移動(dòng)交互動(dòng)效設(shè)計(jì)的注意事項(xiàng)　248
知識(shí)點(diǎn)講解——使用Xcode　模擬交互效果　249
8．3　Sketch 插件的安裝與使用　250
知識(shí)點(diǎn)講解——實(shí)用的插件　251
8．4　本章小結(jié)　252