《動靜之美——Sketch移動UI與互動動效設計詳解》全面、細緻地介紹了Sketch軟體的使用方法，以及和Sketch軟體無縫銜接的幾款互動動效軟體的使用方法。本書不局限於軟體本身的使用方法，更多的是設計思路和設計規範等內容的分享，讓讀者在掌握UI設計和互動動效設計精髓的同時徹底掌握Sketch，並能用Keynote、Principle和Pixate等軟體進行互動動效設計。
基本介紹
- 書名：動靜之美 Sketch移動UI與互動動效設計詳解
- 作者：黃方聞
- ISBN：9787115426208
- 頁數：299
- 定價：CNY 88.00
- 出版社：人民郵電出版社
- 出版時間：2016-7-1
- 裝幀：平裝
CHAPTER 01 移動UI設計師的入門 011
1.1 移動UI的發展 012
1.1.1 第一階段：移動UI設計的目的是保證軟體的可用 012
1.1.2 第二階段：從可用到易用 012
1.1.3 第三階段：內容為王的設計追求減法和好用 013
1.2 移動UI設計師的工作流程 014
1.3 不同移動平台之間的差異 015
1.4 移動UI設計師應了解的基本常識 018
1.4.1 移動UI設計中用到的單位 019
1.4.2 常用移動設備的尺寸 019
1.4.3 文字設計注意事項 021
1.4.4 為觸控而設計 022
1.4.5 從iOS9的特點看設計趨勢 023
1.5 本章小結 024
========================================================
CHAPTER 02 初識Sketch 025
2.1 Sketch的安裝 026
2.2 Sketch的界面介紹 027
2.2.1 歡迎界面 028
2.2.2 Sketch的主界面 029
2.3 Sketch的快捷鍵 032
2.3.1 Sketch的快捷鍵列表 033
2.3.2 自定義快捷鍵 036
2.4 Sketch的常見問題 037
2.5 本章小結 038
========================================================
CHAPTER 03 從線框原型開始 039
3.1 線框原型的基本概念 040
3.2 繪製線框原型的注意事項 041
3.2.1 導航選單的樣式 041
3.2.2 線框原型中的層次 042
3.2.3 線框原型風格對設計的影響 043
3.3 使用Sketch繪製線框原型 044
3.3.1 註冊頁線框原型的繪製 044
引申知識點01——回到Sketch文檔的歷史版本 045
引申知識點02——Sketch的畫板預設 046
引申知識點03——畫板的檢查器 048
引申知識點04——圖層面板 049
引申知識點05——模板 052
引申知識點06——圖層組的檢查器 054
引申知識點07——形狀圖層的檢查器 055
引申知識點08——文字圖層的檢查器 057
3.3.2 內容列表頁線框原型的繪製 059
3.3.3 完整線框原型的繪製 061
3.3.4 繪製線框原型的思考 062
3.4 本章小結 062
========================================================
CHAPTER 04 移動UI界面的設計 063
4.1 iOS套用界面設計規範思考 064
4.2 安卓套用界面及Material Design設計規範思考 067
4.3 移動界面中文字的設計思考 069
4.4 移動界面中顏色的設計思考 071
引申知識點09——Sketch的顏色面板 072
引申知識點10——Sketch的外掛程式及安裝 076
4.5 使用Sketch設計移動界面 080
4.5.1 註冊登錄頁面和註冊頁面的設計 081
引申知識點11——Sketch輸入框的運算 081
引申知識點12——文本共享樣式 082
引申知識點13——符號 084
引申知識點14——點陣圖圖層的檢查器 086
引申知識點15——點陣圖的插入 086
引申知識點16——毛玻璃效果 087
引申知識點17——圖層共享樣式 089
4.5.2 內容頁面的設計 092
引申知識點18——內容填充外掛程式Content-generator-sketch-plugin 097
4.5.3 使用Sketch設計移動界面的注意事項 098
4.6 移動界面的多解析度適配 100
引申知識點19——自適應設計外掛程式Fluid for Sketch 101
4.7 本章小結 102
========================================================
CHAPTER 05 移動UI圖示的設計 103
5.1 移動UI中圖示設計的思考 104
5.1.1 功能型圖示設計的思考 104
5.1.2 展示型圖示設計的思考 106
5.2 功能型圖示的繪製 107
5.2.1 繪製功能型圖示之前 108
5.2.2 使用Sketch進行功能型圖示的設計 108
引申知識點20——鋼筆工具 110
引申知識點21——像素視圖模式 113
引申知識點22——布爾運算 115
引申知識點23——剪刀工具 118
5.3 展示型圖示的繪製 120
5.3.1 繪製展示型圖示之前 120
5.3.2 使用Sketch進行展示型圖示的繪製 121
5.4 圖示資源的獲取和使用 124
5.4.1 專業的圖示網站 124
5.4.2 圖示的源檔案 125
5.5 本章小結 126
========================================================
CHAPTER 06 設計稿的後續處理 127
6.1 在移動設備上實時預覽 128
6.2 將設計稿進行分享 129
6.3 交付給開發的檔案 130
6.4 使用Sketch進行切圖、標註和導出 131
6.4.1 Sketch畫板和圖層的導出 131
6.4.2 使用Sketch的切片工具進行切圖 133
引申知識點24——切片圖層檢查器 134
6.4.3 使用Sketch進行標註 135
6.5 展示型圖示的導出 141
6.6 本章小結 142
========================================================
CHAPTER 07 Apple Watch界面的設計 143
7.1 了解Apple Watch 144
7.2 使用Sketch設計Apple Watch的圖示 147
7.2.1 主螢幕圖示 148
7.2.2 選單圖示 151
7.3 使用Sketch設計Apple Watch的通知界面 153
7.3.1 Short Look界面 153
7.3.2 Long Look界面 154
7.4 使用Sketch設計Apple Watch的速覽界面 157
7.5 使用Sketch設計Apple Watch的App界面 159
7.5.1 Page-based導航方式的設計 159
7.5.2 Hierarchical導航方式的設計 161
引申知識點25——蒙版 162
7.6 Apple Watch中常見界面內容設計方法 165
7.6.1 圓形進度條的設計方法 165
引申知識點26——Sketch中圖層的旋轉 168
7.6.2 錶盤的設計方法 170
7.7 展示Apple Watch中的界面 173
7.7.1 扁平風格界面展示 173
7.7.2 模擬真實使用場景 175
7.8 本章小結 178
========================================================
CHAPTER 08 Sketch知識點補充及使用技巧 179
8.1 Sketch知識點的補充 180
8.1.1 Sketch的系統偏好設定 180
8.1.2 Sketch的標尺、參考線、格線和布局 183
8.1.3 Sketch工具的補充介紹 186
8.2 Sketch的使用小技巧 194
8.2.1 靈活運用描邊屬性 194
8.2.2 複製圖層的CSS屬性 196
8.2.3 Sketch對點陣圖檔案的處理 197
8.2.4 按一定規律複製圖層 200
8.2.5 背景模糊 200
8.2.6 路徑文本 203
8.2.7 按指定尺寸導出 204
8.3 本章小結 204
========================================================
CHAPTER 09 移動互動動效設計基礎知識 205
9.1 從AE來看動畫是怎么形成的 206
9.2 更加真實的動效 210
9.3 理解移動互動動效設計 213
9.3.1 移動互動動效設計的概念 213
9.3.2 移動設備的手勢 213
9.4 移動互動動效設計的注意事項 217
9.5 本章小結 220
========================================================
CHAPTER 10 讓界面動起來 221
10.1 常見UI動效軟體介紹 222
10.1.1 快速互動原型的動效軟體 222
10.1.2 時間軸為設計導向的動效軟體 224
10.1.3 信號流式的動效軟體 225
10.1.4 編程類動效軟體 227
10.2 使用Keynote進行動效設計 229
10.2.1 Keynote的基礎入門 229
10.2.2 Keynote設計UI動效的初始化設定 234
10.2.3 元素變形——Keynote的神奇移動 235
10.2.4 Keynote和Sketch的無縫銜接 238
10.3 使用Principle進行動效設計 244
10.3.1 Principle的基礎入門 244
10.3.2 Principle的動效設計 250
10.3.3 Principle的導出和分享 264
10.4 使用Pixate進行動效設計 266
10.4.1 Pixate的基礎入門 267
10.4.2 使用Pixate設計動效 273
10.4.3 Pixate的導出和共享 281
10.5 探索更多的互動動效設計軟體 282
10.5.1 值得期待的Silver Flows 282
10.5.2 快速上手全新的設計軟體 287
10.6 本章小結 290
========================================================
CHAPTER 11 移動UI設計師的成長 291
11.1 設計參考資源的收集和對Sketch源檔案的分析 292
11.2 動效資源的獲取和對動效圖的分析 296
11.3 UI設計思維的提升 298
後記 300
1.1 移動UI的發展 012
1.1.1 第一階段：移動UI設計的目的是保證軟體的可用 012
1.1.2 第二階段：從可用到易用 012
1.1.3 第三階段：內容為王的設計追求減法和好用 013
1.2 移動UI設計師的工作流程 014
1.3 不同移動平台之間的差異 015
1.4 移動UI設計師應了解的基本常識 018
1.4.1 移動UI設計中用到的單位 019
1.4.2 常用移動設備的尺寸 019
1.4.3 文字設計注意事項 021
1.4.4 為觸控而設計 022
1.4.5 從iOS9的特點看設計趨勢 023
1.5 本章小結 024
========================================================
CHAPTER 02 初識Sketch 025
2.1 Sketch的安裝 026
2.2 Sketch的界面介紹 027
2.2.1 歡迎界面 028
2.2.2 Sketch的主界面 029
2.3 Sketch的快捷鍵 032
2.3.1 Sketch的快捷鍵列表 033
2.3.2 自定義快捷鍵 036
2.4 Sketch的常見問題 037
2.5 本章小結 038
========================================================
CHAPTER 03 從線框原型開始 039
3.1 線框原型的基本概念 040
3.2 繪製線框原型的注意事項 041
3.2.1 導航選單的樣式 041
3.2.2 線框原型中的層次 042
3.2.3 線框原型風格對設計的影響 043
3.3 使用Sketch繪製線框原型 044
3.3.1 註冊頁線框原型的繪製 044
引申知識點01——回到Sketch文檔的歷史版本 045
引申知識點02——Sketch的畫板預設 046
引申知識點03——畫板的檢查器 048
引申知識點04——圖層面板 049
引申知識點05——模板 052
引申知識點06——圖層組的檢查器 054
引申知識點07——形狀圖層的檢查器 055
引申知識點08——文字圖層的檢查器 057
3.3.2 內容列表頁線框原型的繪製 059
3.3.3 完整線框原型的繪製 061
3.3.4 繪製線框原型的思考 062
3.4 本章小結 062
========================================================
CHAPTER 04 移動UI界面的設計 063
4.1 iOS套用界面設計規範思考 064
4.2 安卓套用界面及Material Design設計規範思考 067
4.3 移動界面中文字的設計思考 069
4.4 移動界面中顏色的設計思考 071
引申知識點09——Sketch的顏色面板 072
引申知識點10——Sketch的外掛程式及安裝 076
4.5 使用Sketch設計移動界面 080
4.5.1 註冊登錄頁面和註冊頁面的設計 081
引申知識點11——Sketch輸入框的運算 081
引申知識點12——文本共享樣式 082
引申知識點13——符號 084
引申知識點14——點陣圖圖層的檢查器 086
引申知識點15——點陣圖的插入 086
引申知識點16——毛玻璃效果 087
引申知識點17——圖層共享樣式 089
4.5.2 內容頁面的設計 092
引申知識點18——內容填充外掛程式Content-generator-sketch-plugin 097
4.5.3 使用Sketch設計移動界面的注意事項 098
4.6 移動界面的多解析度適配 100
引申知識點19——自適應設計外掛程式Fluid for Sketch 101
4.7 本章小結 102
========================================================
CHAPTER 05 移動UI圖示的設計 103
5.1 移動UI中圖示設計的思考 104
5.1.1 功能型圖示設計的思考 104
5.1.2 展示型圖示設計的思考 106
5.2 功能型圖示的繪製 107
5.2.1 繪製功能型圖示之前 108
5.2.2 使用Sketch進行功能型圖示的設計 108
引申知識點20——鋼筆工具 110
引申知識點21——像素視圖模式 113
引申知識點22——布爾運算 115
引申知識點23——剪刀工具 118
5.3 展示型圖示的繪製 120
5.3.1 繪製展示型圖示之前 120
5.3.2 使用Sketch進行展示型圖示的繪製 121
5.4 圖示資源的獲取和使用 124
5.4.1 專業的圖示網站 124
5.4.2 圖示的源檔案 125
5.5 本章小結 126
========================================================
CHAPTER 06 設計稿的後續處理 127
6.1 在移動設備上實時預覽 128
6.2 將設計稿進行分享 129
6.3 交付給開發的檔案 130
6.4 使用Sketch進行切圖、標註和導出 131
6.4.1 Sketch畫板和圖層的導出 131
6.4.2 使用Sketch的切片工具進行切圖 133
引申知識點24——切片圖層檢查器 134
6.4.3 使用Sketch進行標註 135
6.5 展示型圖示的導出 141
6.6 本章小結 142
========================================================
CHAPTER 07 Apple Watch界面的設計 143
7.1 了解Apple Watch 144
7.2 使用Sketch設計Apple Watch的圖示 147
7.2.1 主螢幕圖示 148
7.2.2 選單圖示 151
7.3 使用Sketch設計Apple Watch的通知界面 153
7.3.1 Short Look界面 153
7.3.2 Long Look界面 154
7.4 使用Sketch設計Apple Watch的速覽界面 157
7.5 使用Sketch設計Apple Watch的App界面 159
7.5.1 Page-based導航方式的設計 159
7.5.2 Hierarchical導航方式的設計 161
引申知識點25——蒙版 162
7.6 Apple Watch中常見界面內容設計方法 165
7.6.1 圓形進度條的設計方法 165
引申知識點26——Sketch中圖層的旋轉 168
7.6.2 錶盤的設計方法 170
7.7 展示Apple Watch中的界面 173
7.7.1 扁平風格界面展示 173
7.7.2 模擬真實使用場景 175
7.8 本章小結 178
========================================================
CHAPTER 08 Sketch知識點補充及使用技巧 179
8.1 Sketch知識點的補充 180
8.1.1 Sketch的系統偏好設定 180
8.1.2 Sketch的標尺、參考線、格線和布局 183
8.1.3 Sketch工具的補充介紹 186
8.2 Sketch的使用小技巧 194
8.2.1 靈活運用描邊屬性 194
8.2.2 複製圖層的CSS屬性 196
8.2.3 Sketch對點陣圖檔案的處理 197
8.2.4 按一定規律複製圖層 200
8.2.5 背景模糊 200
8.2.6 路徑文本 203
8.2.7 按指定尺寸導出 204
8.3 本章小結 204
========================================================
CHAPTER 09 移動互動動效設計基礎知識 205
9.1 從AE來看動畫是怎么形成的 206
9.2 更加真實的動效 210
9.3 理解移動互動動效設計 213
9.3.1 移動互動動效設計的概念 213
9.3.2 移動設備的手勢 213
9.4 移動互動動效設計的注意事項 217
9.5 本章小結 220
========================================================
CHAPTER 10 讓界面動起來 221
10.1 常見UI動效軟體介紹 222
10.1.1 快速互動原型的動效軟體 222
10.1.2 時間軸為設計導向的動效軟體 224
10.1.3 信號流式的動效軟體 225
10.1.4 編程類動效軟體 227
10.2 使用Keynote進行動效設計 229
10.2.1 Keynote的基礎入門 229
10.2.2 Keynote設計UI動效的初始化設定 234
10.2.3 元素變形——Keynote的神奇移動 235
10.2.4 Keynote和Sketch的無縫銜接 238
10.3 使用Principle進行動效設計 244
10.3.1 Principle的基礎入門 244
10.3.2 Principle的動效設計 250
10.3.3 Principle的導出和分享 264
10.4 使用Pixate進行動效設計 266
10.4.1 Pixate的基礎入門 267
10.4.2 使用Pixate設計動效 273
10.4.3 Pixate的導出和共享 281
10.5 探索更多的互動動效設計軟體 282
10.5.1 值得期待的Silver Flows 282
10.5.2 快速上手全新的設計軟體 287
10.6 本章小結 290
========================================================
CHAPTER 11 移動UI設計師的成長 291
11.1 設計參考資源的收集和對Sketch源檔案的分析 292
11.2 動效資源的獲取和對動效圖的分析 296
11.3 UI設計思維的提升 298
後記 300
