UI設計必修課：Sketch移動界面設計教程

內容簡介

本書通過大量的案例分析，詳細介紹了Sketch 4在設計移動UI中的套用，分別針對凶拒Sketch繪製線框原型、設計圖示、設計移動UI、設計網站UI和UI的輸出與互動進行了講解。通過學習讀者應該熟悉移動UI設計的規範和設計要點。同時掌握移動UI的輸出以及互動拔重微動效的添加方法。本書在每一章中都根據該章節內容添加專家支招，為讀者解答一些與實際工作相關的疑難問題。

圖書目錄

Chapter 01　移動UI設計師的入門

1.1 移動榆嚷漿UI的發展 ...................................................................... 2

1.1.1　早期設計保證軟體可用性 ............................................................. 2

1.1.2　中期設計保證軟體易用性 ............................................................. 2

1.1.3　後期設計保證軟體實用性 ............................................................. 4

1.1.4　未來UI設計的展望 ......................................................................... 5

1.2 移動UI設計師的工作流程 .................................................. 6

1.3 iOS和Android設嚷辣重計特色 ...................................................... 7

1.3.1　iOS的設計特色 ............................................................................... 7

1.3.2　Android的設計特色 ...................................................................... 11

1.4　移動UI設計師應了解的基本常識 .....................................14

1.4.1　移動UI設計中用到剃閥設捆的單位 ........................................................... 14

1.4.2　iOS的界面設計規範 ..................................................................... 16

1.4.4　Android的界面設計規範 .............................................................. 18

1.4.5　為觸控而設計 ............................................................................... 20

1.4.6　從iOS10的特點看設計趨勢 ......................................................... 20

1.5 專家支招 .............................................................................22

1.5.1　移動UI設計師常用的設計工具有哪些？ ................................... 22

1.5.2　鞏己立享什麼是螢幕密度？ ....................................................................... 23

1.6 本章小結 ..............................................................................23

Chapter 02　漿茅戀初識Sketch

2.1　Sketch的安裝和啟動 ...........................................................26

2.1.1　實戰——安裝Sketch .................................................................... 26

2.1.2　實戰——啟動Sketch .................................................................... 27

2.2　Sketch的歡迎介紹 ...............................................................28

2.3　Sketch的主界面 ...................................................................29

2.3.1　選單欄 ........................................................................................... 29

2.3.2　工具列 ........................................................................................... 31

實戰——自定義工具列 ........................................................................... 32

2.3.3　工具介紹 ....................................................................................... 33

2.3.4　畫布 ............................................................................................... 33

2.3.5　檢查器 ........................................................................................... 35

2.3.6　圖層面板 ....................................................................................... 36

2.3.7　畫板 ............................................................................................... 36

2.3.8　蒙板 ............................................................................................... 37

2.3.9　布爾運算 ....................................................................................... 37

2.3.10　符號與共享樣式 ......................................................................... 37

2.4　Sketch的快捷鍵 ...................................................................38

2.4.1　Sketch的快捷鍵列表 .................................................................... 39

2.4.2　實戰——自定義快捷鍵 ............................................................... 43

2.5　Sketch的系統偏好設定 .......................................................44

2.5.1　通用選項卡 ................................................................................... 45

2.5.2　畫布選項卡 ................................................................................... 46

2.5.3　圖層選項卡 ................................................................................... 47

2.5.4　外掛程式選項卡 ................................................................................... 48

2.5.5　預設選項卡 ................................................................................... 49

2.5.6　Cloud選項卡 ................................................................................. 49

2.6　Sketch的標尺、參考線和格線 ................................................ 49

2.6.1　標尺 ............................................................................................... 49

2.6.2　參考線 ........................................................................................... 50

2.6.3　格線 ............................................................................................... 51

2.7　Sketch的常見問題 ...............................................................53

2.7.1　Sketch是否支持Windows系統？ ................................................. 53

2.7.2　Sketch能否替代Photoshop？ ....................................................... 53

2.7.3　Sketch是否有漢化版 .................................................................... 53

2.7.4　Sketch如何升級？ ........................................................................ 53

2.7.5　Sketch價格能不能優惠？ ............................................................ 54

2.8　專家支招 ..............................................................................54

2.8.1　Sketch怎么兼容低版本檔案？ .................................................... 54

2.8.2　Sketch是否有類似Axure的組件庫的功能？ .............................. 55

2.9　本章小結 ..............................................................................55

Chapter 03　從線框原型開始

3.1　線框原型的基本概念 ..........................................................58

3.2　繪製線框原型的注意事項 ..................................................59

3.2.1　巧用明暗對比的運用 ................................................................... 59

3.2.2　不使用截圖和顏色 ....................................................................... 60

3.2.3　標記第一屏高度 ........................................................................... 60

3.2.4　合理的布局和間距 ....................................................................... 61

3.3　Sketch繪製線框原型 ...........................................................61

3.3.1　檔案的新建和保存 ....................................................................... 61

3.3.2　回到Sketch文檔的歷史版本 ........................................................ 63

3.3.3　畫板預設 ....................................................................................... 64

3.3.4　畫板檢查器 ................................................................................... 65

3.3.5　圖層面板 ....................................................................................... 66

3.3.6　關於模版 ....................................................................................... 70

3.3.7　圖層組的檢查器 ........................................................................... 71

3.3.8　形狀圖層的檢查器 ....................................................................... 73

3.3.9　文字圖層的檢查器 ....................................................................... 76

3.4　使用Sketch繪製線框原型 ...................................................78

3.4.1　實戰——計步APP線框圖的繪製 ................................................ 78

3.4.2　實戰——內容列表頁線框圖的繪製 ........................................... 82

3.5　完整線框原型的繪製 ..........................................................86

3.5.1　實戰——註冊頁1線框圖的繪製 ................................................. 86

3.5.2　實戰——註冊頁2線框圖的繪製 ................................................. 90

3.5.3　實戰——註冊頁3線框圖的繪製 ................................................. 92

3.5.4　實戰——註冊頁4線框圖的繪製 ................................................. 94

3.6　繪製線框原型的思考 ..........................................................95

3.7　專家支招 ..............................................................................96

3.7.1　畫好APP線框圖流程圖的要點有哪些？ .................................... 96

3.7.2　線框原型的優勢有哪些？ ........................................................... 97

3.8　本章小結 ..............................................................................97

Chapter 04　使用Sketch設計圖示

4.1　圖示的設計準則 ................................................................ 100

4.1.1　圖示設計的必要性 ..................................................................... 100

4.1.2　了解圖示的屬性 ......................................................................... 102

4.1.3　不同系統中的圖示格式 ............................................................. 105

4.1.4　不同系統圖示的更換方法 ......................................................... 105

4.2　圖示集的製作過程 ............................................................ 109

4.2.1　創建製作清單 ............................................................................. 109

4.2.2　設計草圖 ..................................................................................... 109

4.2.3　數字呈現 ..................................................................................... 110

4.2.4　確定最終效果 ............................................................................. 110

4.2.5　命名並導出 ..................................................................................111

4.3　使用Sketch插入面板 ......................................................... 111

4.3.1　插入矢量 ......................................................................................111

4.3.2　插入鉛筆 ..................................................................................... 115

4.3.3　插入形狀 ..................................................................................... 116

4.3.4　插入文本 ..................................................................................... 120

4.3.5　插入圖片 ..................................................................................... 121

4.4　圖形的布爾運算 ................................................................ 121

4.5　實戰——繪製iOS APP圖示 ............................................. 124

4.6　實戰——繪製音樂套用圖示 ............................................ 128

4.7　圖示的源檔案格式 ............................................................ 132

4.8　專家支招 ............................................................................ 133

4.8.1　iOS系統中圖示的尺寸 ............................................................... 133

4.8.2　如何獲得專業圖示 ..................................................................... 134

4.9　本章小結 ............................................................................ 134

Chapter 05　使用Sketch設計移動UI

5.1　移動UI的設計原則............................................................ 136

5.1.1　視覺一致性原則 ......................................................................... 136

5.1.2　視覺簡易性原則 ......................................................................... 137

5.1.3　從用戶的考慮角度出發 ............................................................. 137

5.2　移動界面的色彩搭配與視覺效果 .................................... 138

5.2.1　冷暖色調的對比 ......................................................................... 138

5.2.2　色彩的意向 ................................................................................. 138

5.2.3　色彩的搭配技巧 ......................................................................... 139

5.2.4　APP界面配色原則 ...................................................................... 140

5.2.5　APP UI設計的用色規範 ............................................................. 142

5.3　iOS套用界面設計規範...................................................... 142

5.3.1　Sketch的iOS UI模板 ................................................................... 143

5.3.2　模板使用的注意事項 ................................................................. 144

5.4　安卓界面及Material Design設計規範 .............................. 146

5.5　移動界面中色彩套用 ........................................................ 147

5.5.1　Sketch顏色面板的使用 .............................................................. 148

5.6　文字的創建與編輯 ............................................................ 157

5.6.1　文本的添加 ................................................................................. 158

5.6.2　文本的編輯 ................................................................................. 158

5.6.3　文本路徑 ..................................................................................... 160

5.6.4　文本轉換輪廓 ............................................................................. 160

5.7　使用共享樣式 .................................................................... 161

5.8　文字的導出 ........................................................................ 163

5.9　實戰——繪製iOS音樂播放界面...................................... 164

5.10　實戰——繪製iOS社交APP界面 .................................... 168

5.11　實戰——繪製iOS支付APP界面 .................................... 172

5.12　專家支招 .......................................................................... 176

5.12.1　移動界面中的文字使用技巧 ................................................... 176

5.12.2　移動界面中的色彩選擇 ........................................................... 177

5.13　本章小結 .......................................................................... 178

Chapter 06　使用Sketch設計PC端網站UI

6.1　網頁設計PC端和移動端的區別 ....................................... 180

6.1.1　螢幕尺寸不同 ............................................................................. 180

6.1.2　操作方式不同 ............................................................................. 180

6.1.3　網路環境不同 ............................................................................. 181

6.1.4　感測器不同 ................................................................................. 181

6.1.5　使用場景和使用時間的不同 ..................................................... 181

6.1.6　軟體疊代時間和更新頻率不同 ................................................. 181

6.1.7　功能設計上的區別 ..................................................................... 181

6.2.1　圖示和徽章 ................................................................................. 182

6.2　扁平化設計在UI設計中的套用........................................ 182

6.2.2　圓角和折角 ................................................................................. 183

6.2.3　標籤和條紋 ................................................................................. 184

6.2.4　裝飾元素 ..................................................................................... 185

6.3.1　分組和取消分組 ......................................................................... 186

6.3　編輯繪製的圖形 ................................................................ 186

6.3.2　編輯和變換圖形 ......................................................................... 187

6.3.3　旋轉圖形 ..................................................................................... 187

6.3.4　蒙板 ............................................................................................. 189

6.3.4　剪刀與描邊寬度 ......................................................................... 192

6.4　點陣圖的編輯 ........................................................................ 192

6.4.1　編輯點陣圖 ..................................................................................... 193

6.4.2　色彩校正 ..................................................................................... 195

6.5.1　陰影 ............................................................................................. 195

6.5　套用樣式 ............................................................................ 195

6.5.2　內陰影 ......................................................................................... 196

6.5.3　模糊 ............................................................................................. 196

6.6　混合模式 ............................................................................ 198

6.7　組件 .................................................................................... 199

6.7.1　創建組件 ..................................................................................... 200

6.7.2　覆蓋文本 ..................................................................................... 200

6.7.3　管理組件 ..................................................................................... 201

6.8　實戰——繪製企業PC端網站界面 ................................... 202

6.9　實戰——繪製企業PC端網站界面 .................................. 205

6.10　專家支招 .......................................................................... 215

6.10.1　理解以用戶為中心 ................................................................... 215

6.10.2　界面設計中的內容與形式統一 ............................................... 215

6.11　本章小結 .......................................................................... 216

Chapter 07　UI的輸出與互動設計

7.1　適配多解析度移動界面 .................................................... 218

7.1.1　適配安卓設備 ............................................................................. 218

7.1.2　適配iOS設備 ............................................................................... 218

7.1.3　使用自適應設計外掛程式 ................................................................. 218

7.2　實現在設備上實時預覽 .................................................... 219

7.3　分享設計稿 ........................................................................ 219

7.4　交付給開發的檔案 ............................................................ 220

7.5　使用Sketch切圖 ................................................................. 221

7.5.1　切片圖層檢查器 ......................................................................... 223

7.5.2　點九切圖 ..................................................................................... 224

7.6　使用Sketch標註 ................................................................. 227

7.7　設計移動互動動效 ............................................................ 230

7.7.1　了解移動設備的手勢 ................................................................. 230

7.7.2　移動互動動效設計的注意事項 ................................................. 233

7.7.3　常見的動效製作軟體 ................................................................. 234

7.8　使用Sketch外掛程式 ................................................................. 237

7.8.1　外掛程式的安裝 ................................................................................. 237

7.8.2　實用的外掛程式 ................................................................................. 238

7.9　專家支招 ............................................................................ 240

7.9.1　如何多移動界面進行標註 ......................................................... 240

7.9.2　常見角度動畫效果 ..................................................................... 241

7.10　本章小結 .......................................................................... 242

UI設計必修課：Sketch移動界面設計教程

基本介紹

內容簡介

圖書目錄

相關詞條

熱門詞條