《動靜之美——sketch移動UI與互動動效設計詳解》是2016年人民郵電出版社出版的圖書，作者是黃方聞。
基本介紹
- 中文名：《動靜之美——sketch移動UI與互動動效設計詳解》
- 作者：黃方聞
- 類別：UI設計 動效設計
- 出版社：人民郵電出版社
- 出版時間：2016年7月
- 頁數：300 頁
- 定價：88 元
- 開本：16 開
- 裝幀：膠裝
- ISBN：978-7-115-42620-8
內容簡介,目錄,前言,出版背景,
內容簡介
《動靜之美——sketch移動UI與互動動效設計詳解》向讀者全面細緻地介紹了Sketch的使用方法，以及和Sketch無縫銜接的幾款互動動效軟體的使用方法本書不局限於軟體本身的使用，更多的是設計思路和設計規範等內容的分享，讓讀者在掌握UI設計和互動動效設計精髓的同時徹底掌握Sketch，並能用keynote、principle和pixate等軟體進行互動動效設計。本書語言平直簡單，書中的配套學習資源包括案例源檔案和專門錄製的教學視頻，幫助讀者快速理解書中的知識點。讀者可通過線上方式獲取這些資源，具體方法請參看本書前言。
《動靜之美——sketch移動UI與互動動效設計詳解》適合廣大初、中級UI設計師、互動設計師和產品經理等相關從業人員閱讀使用，同時也適合需要學習Sketch軟體的設計愛好者閱讀。
目錄
目錄
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
前言
隨著移動網際網路的迅速崛起，對移動產品界面的設計質量和疊代速度都有了更高的要求，市面上開始湧現出一批專門針對移動UI設計的軟體，Sketch便是其中的佼佼者。Sketch因其強大的功能以及極低的入門門檻已經成為越來越多UI設計師和互動設計師的首選設計工具。UI設計和互動設計相對於其他設計而言已經不僅僅是視覺層面的需求，更多的是從用戶需求和用戶心理去分析思考，並在工作中經常需要將界面“動”起來。
在Sketch出現之前，我使用Photoshop作為主要的UI設計工具，當時設計一個界面，需要拉各種輔助參考線，每次新設計一個界面又得重新創建一個檔案，切圖也需要花很長時間……可是當時覺得一切都很自然，直到Sketch的出現。
接觸到Sketch是一個偶然的機會，得益於我天生較強的好奇心，喜歡嘗試一切新的事物，當時國內知道Sketch的人少之又少，但當我試著使用Sketch設計完第一個界面的時候，發現再也離不開它了。慢慢地我習慣向周圍的人介紹Sketch的各種優點，從同事到朋友；也習慣在使用Sketch的幾年內不斷在網際網路上獲取和Sketch相關的一切資源，從國內到國外。
到2016年，Sketch在國內的普及度已經非常高了，關於Sketch的特點以及這款軟體在UI設計方面所具備的優勢，我相信隨著大家對本書的深入閱讀，心中會有一個答案，但是我想說的是，非常感謝選擇了Sketch的你，你也應該要感謝勇於嘗試新軟體的自己，可以確定的是，學完Sketch，你所得到的將遠大於你所付出的。
本書在編寫過程中嘗試使用一種不同於市面上一般軟體教程的寫作順序，即採用實際工作中的設計順序去寫作，讓大家在學習過程中，不僅可以掌握軟體的使用方法，同時可以明白不同功能會在什麼情況下使用。我希望大家在閱讀完本書後不僅能掌握使用軟體的技能，更能成為一名合格的UI設計師。
本書內容分為兩部分：第一部分是UI界面的設計教程，大家可以在該部分中學習如何使用Sketch進行移動UI界面、圖示和Apple Watch界面的設計；第二部分是互動動效教程，大家可以在該部分學習如何將幾款優秀的互動動效設計軟體和Sketch搭配進行動效的設計。
本書適合剛從事UI設計行業的新人、在校學生以及所有想學習Sketch和互動動效的朋友們。在本書的編寫過程中，因時間和個人水平有限，如果有錯漏之處敬請各位讀者和前輩批評指正！另外，特別感謝本書的編輯佘戰文先生，沒有你的幫助和支持，本書不可能完成；衷心感謝史晨旭、onez、張漢東、陶振興、張鈺、湯微、王鐸、張玲、閣樓妖怪和慕歌為本書寫的推薦語。還需要感謝我的父母和我的妻子劉女士，在本書寫作過程中，是你們給了我堅持下去的信心。
本書獻給所有勇於嘗試的你們。
出版背景
寫書其實是一種很微妙的感覺，想想在這個世界，自己的文字可以變成紙製品而留下，確實是一件很幸運的事情。
每天寫書的時間固定在晚上7點到凌晨2點，每天7個小時，四個月的時間，寫出近600頁的書稿，為了保證儘快出版，當時是每寫一章發給編輯一章，然後編輯會很認真細緻的看稿子的每個字，然後在word里標註出需要修改的內容，發給我進行修改。
在寫這本書的226個日日夜夜中，Sketch等軟體也在不斷的疊代升級，所以經常寫到後面發現前面的內容需要更新，又會回過頭去對前面內容進行修改，儘量保證內容的最新。
書的排版過程中遇到最多的問題是插圖，為了保證書內插圖具有Retina級的清晰的清晰度，我們只要發現插圖有模糊的可能，就會全部替換。
錄製視頻的過程雖然沒有寫書那樣需要一個字一個字的敲打出來，但是也絕對不是輕鬆的事情，再加上是第一次錄製視頻，難免會有緊張的情況，所以最開始錄10分鐘，需要花上3~4個小時，並且錄製過程環境需要保持絕對的安靜，經常是整個房子就我一個人的聲音，然後媳婦兒在旁很小心翼翼避免發出任何聲音，所以特別感謝她的支持。
當然這個時候出版的編輯正在抓緊時間對全書進行紙稿校對，而且據說需要校對三次，比之前的Word審核更加嚴格。在這個過程中，編輯會經常發一些需要修改內容的截圖過來，看著上面滿滿的批註覺得編輯們實在是太辛苦了。裡面每個有疑問的地方都再三斟酌後進行修改，儘量保證了本書內容的嚴謹性。
書名和封面是在最後才確定，需要根據內容來定——和UI設計的過程一樣，一個APP的icon往往是最後才確定，因為icon的風格往往需要和APP界面整體風格保持一致，如果先確定了icon，在界面設計時就會非常被動。
考慮到本書的內容實際上更多的是講UI設計的內容，而不局限於軟體本身，並且講了靜態界面的設計和動效的製作，最終將書名確定為《動靜之美——Sketch移動UI與互動動效設計詳解》。而到了封面設計時，因為是自己的第一本書，還是決定自己動手。
書的清晰度非常高，色彩十分飽和，插圖中的每個數字都非常清晰。
本書是正16開，下圖是一個印張，16開意味著一個印張可以印刷出16頁的內容。
非常感謝一路過來幫助我的朋友，我並非大牛，只是一個十分熱愛也願意付出十分努力在這個行業的從業者，能有機會寫這樣的一本書實在是一件幸運的事情。這本書也算是我這幾年經驗的總結，如果能幫助到大家，將會是我最開心的事情。最後，特別感謝各媒體和同行朋友們為本書所做的推薦。
為了大家能更好的學習本書，大家有任何問題可以直接與我交流，如果在書中發現任何問題也請批評指正，我們會在下一版中進行更正。謝謝大家看完！
精彩書插
