Sketch移動UI與互動設計（視頻講解版）

《Sketch移動UI與互動設計（視頻講解版）》是2018年8月人民郵電出版社出版的圖書，作者是夏志麗。

基本介紹

• 中文名：Sketch移動UI與互動設計（視頻講解版）
• 作者：夏志麗
• ISBN：9787115485342
• 定價：79.8元
• 出版社：人民郵電出版社
• 出版時間：2018年8月
• 裝幀：平裝
• 開本：16開

內容簡介

本書通過大量的案例製作,詳細地向用戶介紹了Sketch在設計網頁界面時的使用方法。分別針對Sketch繪製線框原型、設計圖示、Android界面設計、iOS界面設計、PC端網站UI和UI的輸出與互動進行了講解。通過學習讀者應該熟悉移動UI設計和PC端UI設計的規範和設計要點。同時掌握網頁界面的輸出以及互動動效的添加方法。

圖書目錄

第 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