本書詳細介紹了Sketch在UI設計中的應用，使讀者熟悉移動端UI設計規範及設計要點。本書共15章，首先介紹了UI設計及Sketch入門知識。然後通過一個完整的音樂類App設計，採用循序漸進的方式，引導讀者逐漸了解Sketch的基礎操作，以及整個App的交互設計、靜態界面設計、圖標設計。最後介紹如何配合常用插件進行App設計完成後的輸出，以及利用Principle軟件對App進行動效設計。
本書適合移動端UI設計師、設計愛好者閱讀，也可以作為移動端UI設計師、交互設計師、UI設計愛好者的參考用書。
張怡琪，筆名張小碗兒，曾就職於騰訊、青果靈動，網絡熱門教程《30分鐘擬物圖標速成記》作者，站酷超人氣作者，曾獲得站酷推薦設計師、UI中國推薦設計師等頭銜。
站酷超人氣作者張小碗傾力打造。本書從UI設計的基礎入手，結合Sketch+Principle兩款軟件，通過大量實例和針對性實戰（原型圖、圖標、界面、頭像等），深入細致的講解了UI設計、動效設計的方法。
手機解鎖，是最常見的交互設計，解鎖成功後，會顯示手機主界面，主界面中會顯示各種圖標。從用戶開始點擊電話圖標到最後將電話撥通，這一連串的步驟不能太煩瑣。要用流暢、簡潔的交互形式，盡量使整體的視覺效果符合大眾的審美，造型不能過於丑陋，配色不能過於艷麗或暗淡。換句話說，用戶在操作手機的過程中，心情是否愉悅，都取決於UI 設計師的能力。
當然，UI 設計不能獨立存在，它需要硬件設備作為載體。載體主要有移動端和非移動端兩類。移動端包括手機、平板計算機、智能車載設備、手持遊戲機等，非移動端包括臺式計算機、銀行ATM 機、快遞存儲機等。在這些常見的設備中，交互界面設計都屬於UI 設計的範疇。
第1章
初識UI設計
1．1?什麼是UI 002
1．1．1?認識UI設計 002
1．1．2?UI設計存在的理由 002
1．1．3?什麼是好的UI設計 003
1．2?UI設計師的工作內容 004
1．2．1?頭腦風暴 004
1．2．2?交互設計 005
1．2．3?界面設計 008
1．2．4?動效設計 009
1．2．5?切圖與標注 010
1．2．6?輔助研發 011
1．3?設計師常用軟件 012
第2章
Sketch設計入門
2．1?初識Sketch 016
2．1．1?Sketch是什麼 016
2．1．2?Sketch在UI設計中的優勢 017
2．1．3?Sketch的團隊價值 019
2．1．4?Sketch未來的發展空間 020
2．2?如何獲取Sketch 021
2．2．1?下載Sketch 021
2．2．2?安裝Sketch 023
2．2．3?激活Sketch 023
2．3?初見Sketch 024
2．4?了解Sketch 主界面 025
2．4．1?菜單欄 025
2．4．2?工具欄 026
2．4．3?頁面 029
2．4．4?圖層 030
2．4．5?畫布 031
2．4．6?檢查器 031
2．4．7?導出 033
第3章
發現音樂App交互原型圖設計
3．1?發現音樂App產品需求文檔解讀 036
3．1．1?了解產品需求文檔 036
3．1．2?了解用戶群體 036
3．1．3?產品功能解讀 037
3．2?設計產品交互原型圖 038
3．2．1?為什麼要做交互原型圖 038
3．2．2?交互原型圖的展示方式 039
3．3?在Sketch中繪製交互原型圖所需要的工具 040
3．3．1?Insert（添加）工具 040
3．3．2?Group（編組）工具 043
3．3．3?Radius（圓角半徑）工具 044
3．3．4?測量功能 045
3．3．5?對齊功能 045
3．3．6?元件的創建 048
3．4?利用Sketch繪製產品交互原型圖 052
3．4．1?創建文檔 052
3．4．2?創建畫板 053
3．4．3?標記非設計區域 053
3．4．4?選擇交互稿色系及明度 056
3．4．5?繪製首頁交互稿 057
3．4．6?繪製“喜歡”界面交互原型圖 076
3．4．7?繪製“朋友”界面交互原型圖 082
3．4．8?繪製“播放界面”交互原型圖 085
3．4．9?繪製“音樂列表”界面交互原型圖 087
3．4．10?繪製“電臺界面”交互原型圖 089
3．5?交互原型圖動效初體驗 090
3．5．1?Sketch的Link原型功能介紹 091
3．5．2?通過原型功能進行產品原型初體驗 094
3．6?作業：繪製產品原型圖 097
第4章
功能圖標設計
4．1?了解功能圖標 100
4．2?功能圖標的設計思路及技巧 100
4．3?功能圖標的點擊範圍及顯示範圍 103
4．4?功能圖標的尺寸規範 103
4．5?功能圖標的視覺平衡 103
4．5．1?為什麼要遵守視覺平衡 104
4．5．2?計算視覺平衡縮進值 104
4．5．3?計算各基本形尺寸 105
4．6?Sketch的布爾運算工具 107
4．7?利用Sketch繪製功能圖標 108
4．7．1?繪製“側邊欄icon” 109
4．7．2?繪製“添加icon” 111
4．7．3?繪製“音樂列表icon” 112
4．7．4?繪製““icon/返回”” 114
4．7．5?繪製“循環播放icon” 116
4．7．6?繪製“下載icon” 120
4．7．7?繪製“留言icon” 122
4．7．8?繪製“點讚icon” 125
4．8?作業：繪製產品內的功能圖標 131
第5章
應用圖標設計
5．1?當下同類App圖標設計風格分析 134
5．2?應用圖標的傳導含義 135
5．3?為應用圖標選擇元素 136
5．4?為應用圖標選擇顏色 137
5．5? Sketch的STYLE（樣式）功能 139
5．5．1?Fills（填充） 139
5．5．2?Borders（描邊） 143
5．5．3?Shadows（陰影）和InnerShadows（內陰影） 144
5．5．4?Blurs（模糊） 145
5．5．5?刪除未使用的樣式 146
5．5．6?復制與粘貼樣式 146
5．6?利用Sketch繪製應用圖標 147
5．6．1?繪製圖標的扁平狀態 147
5．6．2?繪製圖標的 輕擬物狀態 149
5．6．3?繪製圖標的擬物狀態 152
5．7?作業：繪製應用圖標 153
第6章
發現音樂App主界面設計
6．1?競品分析（音樂App界面設計風格） 156
6．2?Sketch文本處理功能介紹 157
6．2．1?創建文本 157
6．2．2?文本檢查器 157
6．2．3?文本Alignment（對齊）功能 157
6．2．4?Text Options（文本選項） 158
6．2．5?文本樣式的復制與粘貼 158
6．2．6?創建文本樣式 158
6．2．7?在圖層中應用文本樣式 159
6．2．8?路徑上的文本 159
6．2．9?將文本轉換為路徑 160
6．2．10?解決缺少字體的問題 160
6．3?Sketch中的Mask（蒙版）功能 161
6．4?利用Sketch繪製產品主界面 162
6．4．1?首頁設計 162
6．4．2?“喜歡-界面”設計 171
6．4．3?“朋友-界面”設計 175
6．4．4?“播放-界面”設計 179
6．5?作業：設計產品主界面 181
第7章
發現音樂App二級界面設計
7．1?回顧二級界面交互設計稿 184
7．2?利用Sketch及插件繪製產品二級界面 185
7．2．1?“音樂列表-界面”設計 185
7．2．2?“電臺-界面”設計 186
7．2．3?搜索系列界面設計 187
7．2．4?搜索歌手系列界面設計 196
7．3?作業：完成產品二級界面繪製 201
第8章
頭像設計
8．1?頭像的位置 204
8．2?主流頭像設計風格分析 204
8．3?頭像設計思路分析 205
8．3．1?了解需求 205
8．3．2?尋找特點 205
8．3．3?元素設計 206
8．3?利用Sketch設計產品內的小頭像 207
8．4?作業：繪製小頭像 215
第9章
產品切圖與標注
9．1?產品的切圖 218
9．1．1?切圖的存儲方式 218
9．1．2?了解切圖結構 218
9．1．3?了解切圖的命名 219
9．2?產品設計稿標注 221
第10章
養成設計好習慣
10．1?如何在Sketch中添加庫 228
10．2?如何使用庫與更新庫 229
10．3?文件整理 231
第11章
UI設計動效入門
11．1?初識Principle 234
11．1．1?為什麼要學習動效製作 234
11．1．2?為什麼要選擇Principle（Sketch的好搭檔） 234
11．2?如何獲取Principle 235
11．2．1?Principle的下載 235
11．2．2?Principle的安裝 236
11．2．3?Principle的激活 237
11．3?了解Principle 主界面 237
11．3．1?菜單欄 238
11．3．2?工具欄 238
11．3．3?檢查器 238
11．3．4?圖層 238
11．3．5?畫布 239
11．3．6?預覽窗口 239
11．4?Sketch文件的導入 240
11．4．1?Sketch文件的整理 241
11．4．2?導入文件該注意的事項 241
11．5?導出視頻文件和GIF文件 242
第12章
Principle Animation
12．1?Principle補間動畫的圖層命名 247
12．2?Principle補間動畫中的關鍵幀 247
12．3?Principle中的動畫速度曲線 249
12．4?發現音樂App的動效製作 249
12．4．1?發現音樂App的動效結構分析 249
12．4．2?發現音樂App的動效設計 252
12．4．3?發現音樂App列表頁動效設計 254
12．4．4?作業：通過Principle Animation製作界面動效 255
第13章
Principle Drivers
13．1?了解Principle Drivers 258
13．2?Principle Drivers ―― Page（翻頁）動畫 258
13．3?首頁banner翻頁動畫設計製作 262
13．3．1?聯動動畫――Scroll（滾動） 266
13．3．2?音樂列表動畫設計 270
13．4?聯動動畫――Drag（拖動） 271
13．4．1?聯動動畫――Drag（拖動）動畫製作 272
13．4．2?電臺界面拖動動畫設計 277
第14章
Mirror預覽
14．1?Sketch Mirror的使用方法 282
14．2?Principle Mirror的使用方法 283
第15章
UI設計進階之路
15．1?時刻了解行業設計風格的趨勢和變化 286
15．2?全鏈路設計師 286
15．3?大量練習 286
15．4?突破瓶頸期 287
大陸出版品因裝訂品質及貨運條件與台灣出版品落差甚大，除封面破損、內頁脫落等較嚴重的狀態，其餘商品將正常出貨。
特別提醒：部分書籍附贈之內容(如音頻mp3或影片dvd等)已無實體光碟提供，需以QR CODE 連結至當地網站註冊“並通過驗證程序”，方可下載使用。
無現貨庫存之簡體書，將向海外調貨：
海外有庫存之書籍，等候約45個工作天;
海外無庫存之書籍，平均作業時間約60個工作天，然不保證確定可調到貨，尚請見諒。
為了保護您的權益，「三民網路書店」提供會員七日商品鑑賞期(收到商品為起始日)。
若要辦理退貨，請在商品鑑賞期內寄回，且商品必須是全新狀態與完整包裝(商品、附件、發票、隨貨贈品等)否則恕不接受退貨。
