本書通過大量的案例制作,詳細地向用戶介紹了Sketch在設計網頁界面時的使用方法。分別針對Sketch繪制線框原型、設計圖標、Android界面設計、iOS界面設計、PC端網站UI和UI的輸出與交互進行了講解。通過學習讀者應該熟悉移動UI設計和PC端UI設計的規范和設計要點。同時掌握網頁界面的輸出以及交互動效的添加方法。
1.循序漸進指引設計者了解并掌握Sketch 4設計制作移動UI的方法和技巧。
2. 從UI到UX，讓界面由靜到動。
3. 隨書附贈案例源文件，另外贈送近600分鐘的輔助教學視頻。
藝術設計類暢銷書作者，編寫過多本設計類圖書，包括《7天精通Photoshop CS6 UI交互設計》、《網站用戶體驗設計全程揭秘》、《中文版Photoshop CS6完全自學一本通》等。
第1章 網頁UI設計入門
1.1 UI設計發展史 2
1.1.1 早期UI設計的風格 3
1.1.2 中期UI設計的興起 3
1.1.3 后期UI設計的發展 5
知識點講解iOS系統 6
知識點講解Android系統 6
知識點講解Windows 系統 7
知識點講解擬物化風格設計 8
知識點講解扁平化風格設計 8
1.2 網頁UI設計的制作流程 9
1.2.1 產品調研階段 10
1.2.2 UI視覺設計 10
1.2.3 產品技術開發 11
1.2.4 BUG測試 12
1.2.5 產品上線 12
1.2.6 產品迭代 13
1.3 UI設計的注意事項 13
1.3.1 圖稿一致性原則 13
知識點講解字體 13
知識點講解表單錄入 14
知識點講解鼠標手勢 14
1.3.2 圖稿準確性原則 15
1.3.3 布局合理化原則 16
1.3.4 操作合理性原則 17
1.3.5 系統響應時間原則 18
1.4 配色對于UI設計的影響 18
1.4.1 網頁配色基本概念 18
知識點講解網頁主色 18
知識點講解網頁背景色 19
知識點講解網頁輔色 19
知識點講解網頁點綴色 20
1.4.2 網頁配色基本方法 20
知識點講解根據產品內容確定網頁主色 20
知識點講解根據網頁主色確定配色方案 21
1.4.3 網頁色彩搭配技巧 22
知識點講解同色系 23
知識點講解鄰近色 23
知識點講解對比色 25
知識點講解互補色 25
1.5 本章小結 26
第2章 初識Sketch
2.1 繪制iOS 照片分享界面 28
2.1.1 Sketch的安裝與啟動 28
操作案例安裝與啟動Sketch 28
2.1.2 了解Sketch界面 30
知識點講解Sketch的主界面 31
知識點講解菜單欄 31
知識點講解工具欄 34
操作案例自定義工具欄 34
2.1.3 設置Sketch的快捷鍵 35
知識點講解Sketch的快捷鍵 35
操作案例自定義快捷鍵 37
2.1.4 添加圖片、形狀 39
知識點講解Sketch插入面板 39
知識點講解插入圖片 40
知識點講解插入形狀 41
2.1.5 添加文本 42
知識點講解插入文本 43
2.2 繪制手機登錄頁 45
2.2.1 新建和保存Sketch文件 45
知識點講解文件的新建和保存 45
操作案例設置Sketch 的標尺 47
2.2.2 使用Sketch 畫板 48
知識點講解畫板預設 48
知識點講解畫板檢查器 50
2.2.3 使用Sketch 模板 51
知識點講解 iOS 用戶界面設計模板 52
2.3 本章小結 56
第3 章 繪制線框原型
3.1 繪制手機信息界面線框圖 58
3.1.1 線框原型的基本概念 58
知識點講解線框原型概念 60
知識點講解線框原型視覺特性 61
3.1.2 繪制線框原型的注意事項 61
知識點講解巧用明暗對比 63
知識點講解不使用截圖和顏色 64
知識點講解標記第一屏高度 64
知識點講解合理的布局和間距 65
3.2 繪制注冊頁面線框圖 65
3.2.1 圖層面板 66
知識點講解圖層面板簡述 67
操作案例添加和編輯圖層 68
知識點講解選擇圖層 69
操作案例移動圖層 70
3.2.2 圖層類型 71
知識點講解圖層類型詳解 73
操作案例變換大小 75
3.2.3 圖層的調整 75
操作案例新建、重命名、復制和刪除頁面 78
知識點講解復制、剪切和粘貼圖層 79
知識點講解圖層組的檢查器 80
3.3 繪制完整的線框原型圖 83
3.3.1 計步App 線框圖的繪制01 84
3.3.2 計步App 線框圖的繪制02 87
3.4 本章小結 91
第4 章 使用Sketch 繪制圖標
4.1 繪制iOS 11 提醒事項圖標 93
4.1.1 矢量工具 93
知識點講解矢量圖形（形狀） 95
知識點講解點模式 95
知識點講解編輯矢量圖形 96
操操作案例矢量工具繪制箭頭圖標 97
4.1.2 路徑的使用 98
知識點講解路徑 100
4.2 繪制Android 照相機圖標 101
4.2.1 使用形狀繪制圖標 102
操作案例使用布爾運算繪制照相機圖標 106
知識點講解布爾運算 107
4.2.2 使用蒙板繪制圖標 108
知識點講解蒙板命令 109
操作案例使用透明度蒙板制作簡易圖標 110
4.2.3 添加陰影效果為圖標添加質感 112
知識點講解圖標基本屬性 113
4.3 繪制極簡化的Android圖標 116
4.3.1 Android 圖標設計準則 116
知識點講解圖標設計準則 118
4.3.2 圖標設計的三大原則 120
知識點講解三大原則 122
4.3.3 極簡化設計 123
知識點講解極簡化設計風格 126
操作案例繪制記事本圖標 127
4.4 本章小結 128
第5章 Android UI 設計
5.1 繪制Android 音樂播放器界面 130
5.1.1 組件的編輯及使用 130
知識點講解創建組件 133
知識點講解更換文本 133
知識點講解管理組件 134
操作案例使用組件工具繪制導航欄 135
5.1.2 應用軟件UI 設計 136
知識點講解什么是應用軟件UI設計 137
知識點講解應用軟件UI設計規范 138
知識點講解軟件啟動UI設計 139
5.1.3 移動App UI 設計 140
知識點講解什么是App 142
知識點講解移動UI的設計趨勢 143
知識點講解移動UI和平面UI的區別 145
5.1.4 Android 系統UI設計 146
知識點講解Android系統文字規范設計 148
操作案例繪制返回或菜單按鈕 149
知識點講解Android 系統UI 設計特色 150
5.2 繪制Android 信息界面 151
5.2.1 文本命令 152
知識點講解添加文本 154
知識點講解文本框 154
5.2.2 文本檢查器 155
知識點講解文本的編輯 157
知識點講解共享樣式 159
操作案例使用共享樣式
繪制界面 160
5.2.3 文本選項 161
知識點講解文本路徑 163
知識點講解文本轉換輪廓 164
操作案例轉化為輪廓繪制
界面元素 164
知識點講解導出文字 165
知識點講解應用樣式 166
知識點講解混合模式 168
5.3 本章小結 169
第6 章 iOS UI 設計
6.1 繪制iPhone X App 界面 171
6.1.1 iOS 系統UI 用戶元素 171
知識點講解頂部導航欄 173
知識點講解標簽欄和搜索欄 173
操作案例繪制iPhone X啟動界面 174
知識點講解表格視圖 176
6.1.2 iOS 系統UI 設計要求 177
知識點講解確保程序可行 178
知識點講解確保App 可以在
iPhone 和iPad 中通用 178
知識點講解基于Web 網頁
重新設計 179
6.1.3 iOS 系統UI 設計原則 179
知識點講解美觀性 182
知識點講解一致性 183
知識點講解控制可行性 184
知識點講解及時性 184
知識點講解暗喻性 184
知識點講解自主性 185
6.1.4 iPhone X 的App UI 設計 185
知識點講解編輯位圖 188
知識點講解iPhone X 的屏幕尺寸 190
知識點講解iPhone X 的布局 190
6.2 繪制iPhone 8 App 界面 191
6.2.1 iOS App UI 設計模板 192
知識點講解iPhone 8 的組件 193
操作案例繪制iPhone 系統視頻播放界面 194
知識點講解iPhone X 的組件 195
6.2.2 iOS UI 設計規范 195
知識點講解界面尺寸 198
知識點講解圖標尺寸 198
知識點講解內部設計 199
6.2.3 移動App 設計過程中的要點 199
知識點講解App UI設計流程 202
操作案例繪制系統發生錯誤界面 203
知識點講解App UI配色原則 204
6.3 本章小結 206
第7 章 PC 端UI 設計
7.1 繪制網站登錄界面 208
7.1.1 PC 端和移動端UI 設計的區別 208
知識點講解網頁設計PC 端和
移動端的區別 211
7.1.2 鉛筆工具和剪刀工具 213
知識點講解鉛筆工具 215
知識點講解剪刀工具 216
操作案例設計制作設置按鈕① 216
知識點講解旋轉復制 217
設置按鈕② 218
知識點講解變形工具 219
7.2 繪制醫學網站首頁 219
7.2.1 PC 端UI 設計原則 220
知識點講解以用戶為中心 223
知識點講解視覺美觀 224
知識點講解主題明確 224
知識點講解內容與形式統一 26
知識點講解有機整體 227
操作案例繪制休閑空間啟動頁① 227
7.2.2 PC 端UI 設計要點 229
知識點講解設計與技術相結合 231
知識點講解視覺導向性 232
7.2.3 PC 端UI 設計風格 233
知識點講解大眾化設計風格 234
知識點講解個性化設計風格 234
操作案例繪制休閑空間啟動頁② 235
7.3 本章小結 236
第8 章 UI 的輸出與交互設計
8.1 UI 圖像的輸出 238
8.1.1 圖標的輸出 238
知識點講解適配設備 238
知識點講解導出圖層 240
知識點講解導出和切片 241
8.1.2 界面的輸出 241
知識點講解切片工具 242
操作案例為切片重命名 245
8.2 UI 設計的交互 245
知識點講解了解移動設備的手勢 245
知識點講解移動交互動效設計的注意事項 248
知識點講解使用Xcode 模擬交互效果 249
8.3 Sketch 插件的安裝與使用 250
知識點講解實用的插件 251
8.4 本章小結 252
新書資訊