動靜有法 Sketch+Principle UI設計基礎教程

張怡琪，筆名張小碗兒，曾就職於騰訊、青果靈動，網絡熱門教程《30分鐘擬物圖標速成記》作者，站酷超人氣作者，曾獲得站酷推薦設計師、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