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

第 1章 網(wǎng)頁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)頁UI設(shè)計(jì)的制作流程　9

1.2.1　產(chǎn)品調(diào)研階段　10

1.2.2　UI視覺設(shè)計(jì)　10

1.2.3　產(chǎn)品技術(shù)開發(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)頁配色基本概念　18

知識(shí)點(diǎn)講解——網(wǎng)頁主色　18

知識(shí)點(diǎn)講解——網(wǎng)頁背景色　19

知識(shí)點(diǎn)講解——網(wǎng)頁輔色　19

知識(shí)點(diǎn)講解——網(wǎng)頁點(diǎn)綴色　20

1.4.2　網(wǎng)頁配色基本方法　20

知識(shí)點(diǎn)講解——根據(jù)產(chǎn)品內(nèi)容確定網(wǎng)頁主色　20

知識(shí)點(diǎn)講解——根據(jù)網(wǎng)頁主色確定配色方案　21

1.4.3　網(wǎng)頁色彩搭配技巧　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ī)登錄頁　45

2.2.1　新建和保存Sketch文件　45

知識(shí)點(diǎn)講解——文件的新建和保存　45

操作案例——設(shè)置Sketch　的標(biāo)尺　47

2.2.2　使用Sketch 畫板　48

知識(shí)點(diǎn)講解——畫板預(yù)設(shè)　48

知識(shí)點(diǎn)講解——畫板檢查器　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)講解——線框原型視覺特性　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è)頁面線框圖　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ù)制和刪除頁面　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 音樂播放器界面　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)頁

重新設(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ì)過程中的要點(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)頁設(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)站首頁　219

7.2.1　PC 端UI 設(shè)計(jì)原則　220

知識(shí)點(diǎn)講解——以用戶為中心　223

知識(shí)點(diǎn)講解——視覺美觀　224

知識(shí)點(diǎn)講解——主題明確　224

知識(shí)點(diǎn)講解——內(nèi)容與形式統(tǒng)一　26

知識(shí)點(diǎn)講解——有機(jī)整體　227

操作案例——繪制“休閑空間”啟動(dòng)頁①　227

7.2.2　PC 端UI 設(shè)計(jì)要點(diǎn)　229

知識(shí)點(diǎn)講解——設(shè)計(jì)與技術(shù)相結(jié)合　231

知識(shí)點(diǎn)講解——視覺導(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)頁②　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é)　2522100433B

本書通過大量的案例制作,詳細(xì)地向用戶介紹了Sketch在設(shè)計(jì)網(wǎng)頁界面時(shí)的使用方法。分別針對(duì)Sketch繪制線框原型、設(shè)計(jì)圖標(biāo)、Android界面設(shè)計(jì)、iOS界面設(shè)計(jì)、PC端網(wǎng)站UI和UI的輸出與交互進(jìn)行了講解。通過學(xué)習(xí)讀者應(yīng)該熟悉移動(dòng)UI設(shè)計(jì)和PC端UI設(shè)計(jì)的規(guī)范和設(shè)計(jì)要點(diǎn)。同時(shí)掌握網(wǎng)頁界面的輸出以及交互動(dòng)效的添加方法。

《移動(dòng)UI設(shè)計(jì)三大利器：Photoshop Illustrator Sketch》一書主要闡述了UI設(shè)計(jì)必備的三大軟件：眾所周知的繪圖軟件Photoshop、矢量圖形繪制軟件Illustrator、蘋果系統(tǒng)專用的繪圖軟件Sketch。本書立足于互聯(lián)網(wǎng)行業(yè)，對(duì)三大UI設(shè)計(jì)軟件進(jìn)行了全面的講解。本書內(nèi)容結(jié)合UI設(shè)計(jì)制作中常用的繪圖工具及繪圖手法，并將其落實(shí)到每一個(gè)工具中，一一分析講解，從而引出UI設(shè)計(jì)方法論。 《移動(dòng)UI設(shè)計(jì)三大利器：Photoshop Illustrator Sketch》適合UI界面視覺設(shè)計(jì)師，以及想從事這個(gè)方向的讀者學(xué)習(xí)使用。

第1章初識(shí)Sketch

1.1擁抱變化，交互設(shè)計(jì)師的蛻變之旅

1.2Sketch簡(jiǎn)介

1.2.1Sketch是什么

1.2.2Sketch的優(yōu)勢(shì)

1.2.3Sketch對(duì)于團(tuán)隊(duì)特別是交互設(shè)計(jì)師的價(jià)值

1.2.4Sketch的應(yīng)用前景

1.2.5Sketch和Photoshop對(duì)比

1.3Sketch獲取

1.3.1Sketch下載

1.3.2Sketch安裝

1.3.3Sketch激活

1.3.4Sketch定價(jià)策略

1.4Sketch界面介紹

1.4.1菜單欄

1.4.2工具欄

1.4.3頁面

1.4.4圖層

1.4.5畫布

1.4.6檢查器

1.5Sketch上手試用

1.6團(tuán)隊(duì)項(xiàng)目介紹

1.6.1項(xiàng)目背景說明

1.6.2項(xiàng)目功能需求

1.6.3項(xiàng)目產(chǎn)品架構(gòu)

知識(shí)拓展

動(dòng)腦思考

動(dòng)手操作

第2章快速入門

2.1交互設(shè)計(jì)入門

2.1.1認(rèn)識(shí)交互設(shè)計(jì)

2.1.2認(rèn)識(shí)交互設(shè)計(jì)師

2.1.3交互設(shè)計(jì)師需要具備的素質(zhì)

2.1.4交互設(shè)計(jì)師的職責(zé)

2.1.5交互設(shè)計(jì)師的專業(yè)背景要求

2.1.6交互設(shè)計(jì)師需要的知識(shí)體系

2.1.7交互設(shè)計(jì)師常用的工具

☆重點(diǎn)2.1.8了解交互設(shè)計(jì)流程

2.2明確目標(biāo)和產(chǎn)出物

2.2.1流程圖

2.2.2低、高保真原型

2.2.3交互說明

2.2.4視覺規(guī)范

2.2.5視覺標(biāo)注稿

2.2.6規(guī)范切圖

2.2.7動(dòng)效參數(shù)

2.3學(xué)習(xí)基本工具使用

☆重點(diǎn)2.3.1線條工具

☆重點(diǎn)2.3.2幾何工具

☆重點(diǎn)2.3.3文字工具

2.4學(xué)習(xí)高級(jí)工具使用

2.4.1剪刀工具

2.4.2變形工具

2.5學(xué)習(xí)其他工具使用

2.5.1插入類工具

2.5.2組織類工具

2.5.3編輯類工具

2.5.4輔助類工具

2.6學(xué)會(huì)版本管理

2.6.1使用多個(gè)Sketch文件管理

2.6.2使用Sketch自動(dòng)保存歷史

版本

2.7了解原型尺寸和命名規(guī)范

☆重點(diǎn)2.7.1原型尺寸

2.7.2命名規(guī)范

2.8掌握交互設(shè)計(jì)方法論

2.8.1交互設(shè)計(jì)方法論的概念

2.8.2交互設(shè)計(jì)方法論——5W2H

2.8.3其他交互設(shè)計(jì)方法論

知識(shí)拓展

實(shí)戰(zhàn)教學(xué)

動(dòng)腦思考

動(dòng)手操作

第3章基礎(chǔ)運(yùn)用

3.1創(chuàng)作空間

3.1.1畫布

☆重點(diǎn)3.1.2Artboard（畫板）

☆重點(diǎn)3.1.3柵格布局

3.2框架設(shè)計(jì)

3.2.1發(fā)散思維

3.2.2人物角色

3.2.3故事板

3.2.4流程設(shè)計(jì)

3.2.5信息架構(gòu)

3.3界面設(shè)計(jì)

3.3.1界面設(shè)計(jì)原則

3.3.2界面設(shè)計(jì)理論

3.3.3界面設(shè)計(jì)實(shí)踐

3.4圖像處理

3.4.1圖像導(dǎo)入

☆重點(diǎn)3.4.2圖像處理方式

3.4.3Mask（蒙版）處理

3.5圖標(biāo)設(shè)計(jì)

☆重點(diǎn)3.5.1認(rèn)識(shí)圖標(biāo)

3.5.2圖標(biāo)繪制規(guī)范

☆重點(diǎn)3.5.3圖標(biāo)繪制

3.5.4圖標(biāo)引用

3.6測(cè)距和對(duì)齊

3.6.1測(cè)距

3.6.2對(duì)齊

知識(shí)拓展

實(shí)戰(zhàn)教學(xué)

動(dòng)腦思考

動(dòng)手操作

第4章高級(jí)運(yùn)用

4.1快速原型設(shè)計(jì)

4.1.1快速復(fù)制

4.1.2批量復(fù)制

4.1.3一級(jí)頁面設(shè)計(jì)

☆重點(diǎn)4.2歸類整理

4.2.1圖層整理

4.2.2頁面整理

4.2.3圖層查找

4.3原型演示

4.3.1SketchMirror

4.3.2SketchMirrorforiPhone

4.3.3需求驗(yàn)證

4.3.4二級(jí)頁面設(shè)計(jì)

4.4Symbol（符號(hào)）

☆重點(diǎn)4.4.1Symbol的介紹及應(yīng)用

場(chǎng)景

☆重點(diǎn)4.4.2Symbol基礎(chǔ)教程

☆重點(diǎn)☆難點(diǎn)4.4.3Symbol

嵌套教程

☆重點(diǎn)☆難點(diǎn)4.4.4夜視Symbol庫

制作

4.5StyledText（樣式庫）

4.5.1StyledText的概念

4.5.2TextStyle（字體樣式）

4.5.3ShareStyle（共享樣式）

4.5.4夜視項(xiàng)目樣式庫

4.6細(xì)節(jié)設(shè)計(jì)

☆重點(diǎn)4.6.1交互邊界

☆重點(diǎn)4.6.2特殊狀態(tài)

☆重點(diǎn)4.6.3場(chǎng)景設(shè)計(jì)

4.6.4首頁及播放頁設(shè)計(jì)

知識(shí)拓展

實(shí)戰(zhàn)教學(xué)

動(dòng)腦思考

動(dòng)手操作

第5章團(tuán)隊(duì)協(xié)作

5.1Sketch和團(tuán)隊(duì)協(xié)作

5.1.1團(tuán)隊(duì)協(xié)作基礎(chǔ)

5.1.2Sketch協(xié)作流程

5.2使用Libraries減少重復(fù)勞作

☆重點(diǎn)☆新功能5.2.1Libraries

介紹

☆重點(diǎn)5.2.2Libraries制作和

導(dǎo)入

☆重點(diǎn)5.2.3Libraries使用和

更新

☆重點(diǎn)5.2.4Libraries云協(xié)作

5.3使用堅(jiān)果云構(gòu)建協(xié)作環(huán)境

5.3.1構(gòu)建前的準(zhǔn)備工作

5.3.2創(chuàng)建團(tuán)隊(duì)文件夾

5.3.3設(shè)置本地同步文件夾

5.3.4查看歷史版本

動(dòng)腦思考

動(dòng)手操作

第6章交付輸出

6.1交互設(shè)計(jì)輸出物

6.1.1交互方案和交互原型

☆重點(diǎn)6.1.2交互說明

☆重點(diǎn)6.1.3交互規(guī)范

6.2視覺設(shè)計(jì)輸出物

6.2.1視覺風(fēng)格探索

6.2.2視覺頁面

☆重點(diǎn)6.2.3視覺規(guī)范

☆重點(diǎn)6.2.4視覺標(biāo)注

☆重點(diǎn)6.2.5切圖資源

知識(shí)拓展

實(shí)戰(zhàn)教學(xué)

動(dòng)腦思考

動(dòng)手操作

第7章動(dòng)效設(shè)計(jì)Principle

7.1需要?jiǎng)有гO(shè)計(jì)的原因

☆重點(diǎn)7.1.1為用戶創(chuàng)造愉悅的

體驗(yàn)

7.1.2驗(yàn)證心中的想法和可行性

7.1.3與開發(fā)工程師溝通動(dòng)態(tài)效果

7.2選擇Principle的原因

7.2.1Principle簡(jiǎn)介

7.2.2Principle的優(yōu)勢(shì)

7.2.3Principle的獲取、安裝與

激活

7.3Principle初體驗(yàn)

7.3.1初識(shí)界面

☆重點(diǎn)7.3.2交互形態(tài)

☆重點(diǎn)7.3.3事件

☆重點(diǎn)7.3.4動(dòng)畫

7.4Principle制作原型

7.4.1準(zhǔn)備工作

7.4.2制作翻頁效果

7.4.3制作轉(zhuǎn)場(chǎng)效果

7.4.4制作滾動(dòng)效果

7.4.5原型演示

7.5Principle制作動(dòng)畫

☆重點(diǎn)☆難點(diǎn)7.5.1動(dòng)畫構(gòu)思

☆重點(diǎn)7.5.2動(dòng)畫制作

☆重點(diǎn)☆難點(diǎn)7.5.3交付開發(fā)

實(shí)現(xiàn)

實(shí)戰(zhàn)教學(xué)

動(dòng)腦思考

動(dòng)手操作

第8章完整后臺(tái)設(shè)計(jì)實(shí)現(xiàn)

8.1后臺(tái)設(shè)計(jì)目標(biāo)

8.1.1業(yè)務(wù)功能

8.1.2設(shè)計(jì)目標(biāo)

8.2后臺(tái)框架設(shè)計(jì)

8.2.1角色場(chǎng)景

8.2.2權(quán)限設(shè)計(jì)

8.2.3流程設(shè)計(jì)

8.3后臺(tái)界面設(shè)計(jì)

8.3.1菜單導(dǎo)航設(shè)計(jì)

8.3.2內(nèi)容列表設(shè)計(jì)

8.3.3流程頁面設(shè)計(jì)

8.3.4頁面細(xì)節(jié)設(shè)計(jì)

8.3.5創(chuàng)建最小化Symbol庫

8.4后臺(tái)交互說明

8.4.1學(xué)會(huì)講故事

8.4.2時(shí)刻警惕權(quán)限和安全

8.5學(xué)習(xí)建議

8.5.1Sketch學(xué)習(xí)建議

8.5.2交互設(shè)計(jì)學(xué)習(xí)建議

結(jié)語

參考文獻(xiàn) 2100433B

序

前言

第1章 移動(dòng)互聯(lián)網(wǎng)UI設(shè)計(jì)

1.1 移動(dòng)端UI設(shè)計(jì)概念

1.2 移動(dòng)UI的特性

1.3 移動(dòng)產(chǎn)品界面設(shè)計(jì)的常用工具

1.4 UI設(shè)計(jì)尺寸

第2章 什么是Photoshop

2.1 初識(shí)UI設(shè)計(jì)軟件之Photoshop

2.2 Photoshop應(yīng)用領(lǐng)域

2.2.1 在UI設(shè)計(jì)領(lǐng)域上的一把手

2.2.2 在數(shù)碼圖像處理上的佼佼者

2.2.3 在動(dòng)畫與圖像后期制作上的認(rèn)可

2.3 色彩模式的認(rèn)識(shí)

2.3.1 RGB色彩模式

2.3.2 CMYK色彩模式

2.3.3 灰度色彩模式

2.3.4 通道色彩模式

2.3.5 色彩模式的選擇2.3.6色彩模式的切換

2.4 基本單位的認(rèn)識(shí)

2.4.1 像素

2.4.2 分辨率

2.4.3 位圖圖像

2.4.4 矢量圖圖像

2.4.5 位圖與矢量圖的區(qū)別

2.5 儲(chǔ)存格式的應(yīng)用

2.5.1 PSD格式

2.5.2 JPEG格式

2.5.3 GIF格式

2.5.4 PNG格式

第3章 界面設(shè)定

3.1 界面介紹

3.1.1 界面組成部分

3.1.2 活動(dòng)面板的使用

3.1.3 圖層面板初識(shí)3.2文檔基本操作

3.2 文檔基本操作

3.2.1 新建空白畫布

3.2.2 存儲(chǔ)使用格式

第4章 建立選區(qū)

4.1 建立正常規(guī)則選框

4.1.1 矩形選框組

4.1.2 移動(dòng)變換選框

4.1.3 選框布爾運(yùn)算

4.1.4 選框快捷鍵組合

4.2 建立隨意不規(guī)則選區(qū)

4.2.1 套索和多邊形套索工具的使用

4.2.2 磁性套索的使用及摳圖

4.2.3 iWatch摳圖案例詳解

4.2.4 人物復(fù)雜邊緣摳圖案例詳解

4.2.5 魔棒工具使用方法

4.2.6 容差值設(shè)定

4.2.7 手機(jī)摳圖之魔棒操作

4.2.8 快速選擇工具

4.3 羽化和消除鋸齒

4.3.1 選定羽化范圍

4.3.2 羽化參數(shù)設(shè)置

4.3.3 羽化的使用方法

4.3.4 優(yōu)化選區(qū)參數(shù)操作

第5章 圖層深度剖析

5.1 圖層組成

5.1.1 圖層的使用

5.1.2 圖層的分類

5.1.3 新建圖層的快捷方式

5.1.4 刪除圖層的快捷方式

5.1.5 圖層的隱藏與顯示

5.2 圖層填色

5.2.1 前（背）景色填充快捷操作

5.2.2 選區(qū)的優(yōu)先級(jí)填色

5.2.3 圖層不透明度的調(diào)整

5.3 圖層順序調(diào)整

5.3.1 圖層層級(jí)關(guān)系

5.3.2 圖層置底操作

5.3.3 圖層置頂操作

5.4 層編組使用

5.4.1 新建組與子圖層

5.4.2 編組方式的快捷運(yùn)用

第6章 矢量路徑操作

6.1 路徑和錨點(diǎn)初識(shí)

6.1.1 繪制開放路徑

6.1.2 繪制閉合路徑

6.2 錨點(diǎn)的刪除與添加

6.2.1 錨點(diǎn)的添加

6.2.2 錨點(diǎn)的刪除

6.3 曲線路徑的繪制

6.3.1 把手初識(shí)

6.3.2 曲線繪制

6.4 曲線路徑分類

6.4.1 直線繪制

6.4.2 貝塞爾S形曲線繪制

6.4.3 貝塞爾C形曲線繪制

6.4.4 貝塞爾U形曲線繪制

6.4.5 Z形曲線繪制

6.4.6 對(duì)稱水滴形曲線繪制

6.5 路徑選擇

6.5.1 路徑選擇工具

6.5.2 直接選擇工具

6.5.3 把手及錨點(diǎn)的調(diào)整使用

6.6 路徑應(yīng)用

6.6.1 路徑轉(zhuǎn)選區(qū)

6.6.2 路徑轉(zhuǎn)蒙版

6.6.3 路徑轉(zhuǎn)形狀

6.7 路徑摳圖方法

6.7.1 瓷器路徑摳圖

6.7.2 家具路徑摳圖

第7章 形狀操作

7.1 形狀工具組

7.1.1 矩形工具

7.1.2 圓角矩形工具

7.1.3 橢圓工具

7.1.4 多邊形工具

7.1.5 直線工具

7.1.6 自定義形狀工具

7.2 形狀工具布爾運(yùn)算

7.2.1 加法運(yùn)算

7.2.2 減法運(yùn)算

7.2.3 相交運(yùn)算

7.2.4 排除重疊形狀運(yùn)算

7.2.5 合并形狀組件

7.3 路徑的對(duì)齊操作

7.3.1 路徑的對(duì)齊方式

7.3.2 路徑的分布方式

7.4 移動(dòng)主題圖標(biāo)設(shè)計(jì)

7.4.1 計(jì)算機(jī)扁平圖標(biāo)設(shè)計(jì)

7.4.2 圖庫扁平圖標(biāo)設(shè)計(jì)

7.4.3 日歷扁平圖標(biāo)設(shè)計(jì)

第8章 UI設(shè)計(jì)中文字的應(yīng)用

8.1 文字工具初識(shí)

8.1.1 橫排文字

8.1.2 直排文字

8.1.3 橫排文字蒙版工具

8.1.4 直排文字蒙版工具

8.2 文字面板參數(shù)設(shè)置

8.2.1 字符面板

8.2.2 段落面板

8.2.3 文字調(diào)整快捷鍵

8.2.4 文字消除鋸齒方式

8.3 文字在畫冊(cè)排版中的應(yīng)用

8.3.1 標(biāo)題的排版

8.3.2 版式的設(shè)計(jì)

第9章 圖層樣式

9.1 混合選項(xiàng)組

9.1.1 斜面和浮雕

9.1.2 投影與內(nèi)陰影

9.1.3 內(nèi)發(fā)光與外發(fā)光

9.1.4 疊加

9.1.5 描邊

9.1.6 光澤

9.2 漸變的樣式

9.2.1 線性漸變

9.2.2 徑向漸變

9.2.3 角度漸變

9.2.4 對(duì)稱漸變

9.2.5 菱形漸變

9.3 創(chuàng)建剪貼蒙版

9.3.1 剪貼蒙版的定義

9.3.2 剪貼蒙版與圖層蒙版的區(qū)別

9.3.3 剪貼蒙版的作用機(jī)理

9.3.4 剪貼蒙版的使用方式

9.3.5 剪貼蒙版的使用技巧

9.3.6 剪貼蒙版的快捷操作

9.4 炫酷微擬物UI圖標(biāo)設(shè)計(jì)

9.4.1 手電筒圖標(biāo)設(shè)計(jì)

9.4.2 設(shè)置圖標(biāo)設(shè)計(jì)

9.4.3 鐘表圖標(biāo)設(shè)計(jì)

第10章 使用畫筆

10.1 畫筆的選用

10.1.1 硬度和大小的設(shè)置

10.1.2 畫筆的快捷鍵組合

10.1.3 畫筆的預(yù)設(shè)參數(shù)

10.2 超寫實(shí)破殼雞蛋繪制

第11章 圖層蒙版的應(yīng)用

11.1 初識(shí)圖層蒙版

11.1.1 圖層蒙版的定義

11.1.2 圖層蒙版的作用

11.1.3 圖層蒙版的建立與刪除

11.1.4 圖層蒙版的應(yīng)用與停用

11.2 城市夜景圖層蒙版合成案例

第12章 濾鏡的高級(jí)應(yīng)用

12.1 素描畫像制作

12.2 女人海報(bào)—3D

第13章 其他工具應(yīng)用

13.1 圖案的使用

13.1.1 圖案的定義

13.1.2 圖案的填充方式

13.2 修復(fù)工具組

13.2.1 修復(fù)畫筆工具

13.2.2 修補(bǔ)工具

13.2.3 污點(diǎn)修復(fù)畫筆工具

13.2.4 內(nèi)容感知移動(dòng)工具

13.2.5 紅眼工具

13.3 調(diào)整色彩

13.3.1 亮度與對(duì)比度

13.3.2 曲線和色階

13.3.3 色相/飽和度

13.3.4 色彩平衡

13.3.5 反相和去色

第14章 綜合案列應(yīng)用

14.1 圖像合成

14.1.1 制作逼真木質(zhì)紋理

14.1.2 制作禁煙公益海報(bào)

14.2 肖像處理

14.2.1 歐美人物磨皮教程

14.2.2 人物素描效果制作

14.3 網(wǎng)頁設(shè)計(jì)應(yīng)用

14.3.1 網(wǎng)站設(shè)計(jì)的頁面構(gòu)成

14.3.2 網(wǎng)頁的設(shè)計(jì)原則

14.3.3 互聯(lián)網(wǎng)網(wǎng)頁的首頁設(shè)計(jì)

14.4 移動(dòng)App界面設(shè)計(jì)

14.4.1 移動(dòng)界面設(shè)計(jì)規(guī)范

14.4.2 移動(dòng)界面設(shè)計(jì)布局

14.4.3 UI界面設(shè)計(jì)方式

第15章 UI界面設(shè)計(jì)之Illustrator

15.1 初識(shí)AI

15.1.1 AI的界面認(rèn)識(shí)

15.1.2 AI的應(yīng)用領(lǐng)域

15.1.3 AI的快捷鍵

15.1.4 AI的文件格式與保存

15.2 矢量圖形的繪制

15.2.1 矩形與橢圓的繪制

15.2.2 矩形轉(zhuǎn)圓角

15.2.3 QQ郵箱圖標(biāo)的制作

15.3 描邊的應(yīng)用

15.3.1 剪刀工具的使用

15.3.2 刻刀工具的使用

15.3.3 MBE風(fēng)格圖標(biāo)的應(yīng)用

15.4 繪制多彩擬物圖標(biāo)

15.4.1 形狀、路徑查找器的應(yīng)用

15.4.2 漸變工具的應(yīng)用

15.4.3 制作漸變小圖標(biāo)

15.4.4 制作絢麗相冊(cè)

第16章 AI的高級(jí)應(yīng)用

16.1 扭曲、變換的使用

16.2 變形的使用

16.3 風(fēng)格化的使用

第17章 UI界面設(shè)計(jì)之Sketch進(jìn)階（一）

17.1 了解Sketch

17.1.1 界面認(rèn)識(shí)

17.1.2 Sketch圖層

17.2 Sketch圖形

17.2.1 圖形概述

17.2.2 矩形與圓角矩形

17.2.3 三角形

17.2.4 橢圓和直線

17.2.5 五角星和多邊形

17.2.6 圖形轉(zhuǎn)換點(diǎn)操作

17.2.7 布爾運(yùn)算

17.3 Text文本

17.3.1 文本概述

17.3.2 文本檢查器

17.3.3 文本渲染

17.3.4 文本樣式

17.4 Image圖片

17.4.1 圖片概述

17.4.2 位圖編輯

17.4.3 色彩矯正

17.5 Styling樣式

17.5.1 樣式概述

17.5.2 填充

17.5.3 邊框

17.5.4 陰影

17.5.5 模糊

17.5.6 漸變

第18章 UI界面設(shè)計(jì)之Sketch進(jìn)階（二）

18.1 Symbols符號(hào)定義

18.2 Styling樣式

18.3 UI界面中符號(hào)和樣式的重要應(yīng)用

18.4 前端開發(fā)導(dǎo)出

18.5 導(dǎo)出倍率關(guān)系適配

18.6 讓設(shè)計(jì)更加直觀、便捷

18.7 iOS Mirror概述

18.8 iOS Mirror設(shè)置及使用

第19章 三大利器結(jié)合應(yīng)用

19.1 AI與PS緊密銜接

19.1.1 字體設(shè)計(jì)（一）

19.1.2 字體設(shè)計(jì)（二）

19.1.3 AI中快速實(shí)現(xiàn)Low Poly制作

19.1.4 移動(dòng)界面中Low Poly界面設(shè)計(jì)應(yīng)用

19.2 AI與PS的跨軟件合作之麥克風(fēng)

19.3 Sketch實(shí)現(xiàn)電商類App界面設(shè)計(jì)

19.4 通過AI進(jìn)行l(wèi)ogo設(shè)計(jì)

后記2100433B