《UI設計必修課：Sketch移動界面設計教程》是2017年9月電子工業出版社出版的圖書，作者是李萬軍。
基本介紹
- 書名：UI設計必修課：Sketch移動界面設計教程
- 作者：李萬軍
- ISBN：9787121324109
- 頁數：252頁
- 定價：79.9元
- 出版社：電子工業出版社
- 出版時間：2017年9月
- 開本：16開
內容簡介,圖書目錄,
內容簡介
本書通過大量的案例分析，詳細介紹了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
