本書內容分為兩部分：首部分是UI界麵的設計教程，遵循iOS、Material Design、Apple Watch設計規範，讀者可以在該部分中學習如何使用Sketch進行移動UI界麵、圖標和Apple Watch界麵的設計；第二部分是交互動效教程，讀者可以在該部分學習如何將Sketch、Keynote、Principle和Pixate四大交互設計軟件搭配進行動效設計，從UI到UX，讓界麵由靜到動。
隨書附贈案例源文件，另外贈送近600分鍾的輔助教學視頻。

內容簡介

《動靜之美——Sketch移動UI與交互動效設計詳解》全麵、細緻地介紹瞭Sketch軟件的使用方法，以及和Sketch軟件無縫銜接的幾款交互動效軟件的使用方法。本書不局限於軟件本身的使用方法，更多的是設計思路和設計規範等內容的分享，讓讀者在掌握UI設計和交互動效設計精髓的同時徹底掌握Sketch，並能用Keynote、Principle和Pixate等軟件進行交互動效設計。
《動靜之美——Sketch移動UI與交互動效設計詳解》的配套學習資源包括案例源文件和近600分鍾的輔助教學視頻，幫助讀者快速理解書中的知識點。讀者可通過在綫方式獲取這些資源，具體方法請參看本書前言。
《動靜之美——Sketch移動UI與交互動效設計詳解》適閤廣大初、中級UI設計師，交互設計師和産品經理等相關從業人員閱讀使用，同時也適閤需要學習Sketch軟件的設計愛好者閱讀。

作者簡介

黃方聞
高級交互設計師，國內早一批 Sketch 使用者，並緻力於該軟件的推廣與研究。
從 2007 年 iPhone 誕生起便專注於移動交互設計領域的研究，對移動交互設計領域有深刻的思考與獨到的見解，倡導設計師的工作高效率化，多次翻譯並分享國外前沿設計文檔及交互說明。

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