《移動互聯網之路Sketch Xcode移動UI與交互動效設計從入門到精通》分為9 章，分別為UI 入門必修課、初識Sketch、使用Sketch 繪制線框圖、使用Sketch 設計圖標、按鈕設計、移動端界面設計、PC 端網頁界面設計、UI 的輸出與交互設計、使用Xcode 制作交互效果。通過
《移動互聯網之路Sketch Xcode移動UI與交互動效設計從入門到精通》的學習，讀者可以熟悉移動UI 設計的規范和設計要點，同時掌握移動UI 的輸出及交互動效的添加方法。
《移動互聯網之路Sketch Xcode移動UI與交互動效設計從入門到精通》適用于UI 設計師、網站設計人員和網頁設計愛好者閱讀，也可作為網頁設計師、交互設計師、藝術院校師生及UI 設計愛好者的參考書。
《移動互聯網之路Sketch Xcode移動UI與交互動效設計從入門到精通》以案例帶動知識面的方式，以案例為主，詳細介紹并演示各種工具的使用方法并細化操作步驟，使讀者通過案例的學習，在實踐中熟練掌握Sketch 的使用方法。
《移動互聯網之路Sketch Xcode移動UI與交互動效設計從入門到精通》從布局上分為實戰案例、操作指南、通關必讀、知識鏈接、提示和技巧6 個主要部分。
每一個實戰案例都講解了實際工作中一個Sketch 作品的制作過程，步驟講解具體，過程講解清
晰且完善，通俗易懂。
本書的操作指南是在UI 設計過程中對常用的、典型的工具及方法的具體講解和分析，能夠使讀者掌握重點。《移動互聯網之路Sketch Xcode移動UI與交互動效設計從入門到精通》的知識鏈接是對實際UI 設計過程中的方法及軟件功能進行具體分析及理論性講解。本書的通關必讀中講解了UI 設計的基礎常識、設計理念及設計規范，讀者可以學習和參考，以掌握UI 設計中必不可少的理論知識。而通過提示和技巧，讀者可以在UI 設計過程中學習到更簡捷、更有效率的技巧和方法。
《移動互聯網之路Sketch Xcode移動UI與交互動效設計從入門到精通》*后介紹了Xcode 的使用，Xcode 和Sketch 一樣是iOS 系統的獨霸軟件。Xcode
是運行在操作系統Mac OS X 上的集成開發工具，在此著重講解了Xcode 移動端UI 設計常用的控件和功能，使讀者能夠通過Xcode 看到移動UI 設計*終的演示效果和交互體驗。
編寫本《移動互聯網之路Sketch Xcode移動UI與交互動效設計從入門到精通》的目的在于講解如何使用Sketch 軟件和使用Xcode 運行交互效果，使讀者了
解UI 設計的基礎常識和必要知識。本書語言簡潔、描述細致且全面，使讀者能夠輕松地學會Sketch 的操作，了解圖標和界面的繪制過程，在UI 的學習中起到事半功倍的效果。由于互聯網
的更新較快，書中所提供的網址僅供參考。
前 言
《移動互聯網之路Sketch Xcode移動UI與交互動效設計從入門到精通》共分9 章，從UI 設計必修課開始，逐步講解了Sketch 界面、使用Sketch 繪制線框圖、設計圖標、繪制按鈕、制作移動端界面、制作PC 端網頁、UI 的輸出與交互設計及使用Xcode。除了講解Sketch 和Xcode 的使用方法外，還穿插了UI 設計的理論知識，如圖標設計流程、圖標屬性、移動界面中的色彩運用、網站常見設計風格等，提供了原型設計的方法、圖標及界面設計規范、網頁布局原則、iOS 及Android 圖標和界面的設計規范與尺寸等UI 設計及應用中的核心內容。
通過《移動互聯網之路Sketch Xcode移動UI與交互動效設計從入門到精通》的學習，讀者不但可以使用Sketch 設計出漂亮的圖標、流行的界面，還能通過Xcode 制作出UI 的運行效果。從了解什么是UI 開始，到最終的交互體驗，以及UI 設計中不可忽略的行業知識，讀者將從《移動互聯網之路Sketch Xcode移動UI與交互動效設計從入門到精通》中獲得全面豐富的UI 設計內容及輕松的學習體驗。
《移動互聯網之路Sketch Xcode移動UI與交互動效設計從入門到精通》結構
第1 章 UI 入門必修課
本章主要講解了UI、UE 和ID 的基本概念，使讀者了解什么是UI 及UI、UE 和ID 的區別和聯系，講述了用戶體驗的一般設計流程、iOS 和Android 的設計特色、移動UI 的基本常識和網頁UI 的基本常識。
第2 章 初識Sketch
本章從介紹Sketch 軟件開始，講述了Sketch 的界面、Sketch 的設計優勢、Sketch 的安裝與啟動，通過制作Apple Watch 界面和iPhone 跳轉頁面，講解如何插入形狀和圖片，使讀者體驗Sketch 易于操作的特點。
第3 章 使用Sketch 繪制線框圖
本章以繪制線框原圖貫穿始終，從Sketch 文件的新建和保存，到插入文字、設置文字參數、插入形狀、在檢查器中調整形狀及圖層的基本應用。
第4 章 使用Sketch 設計圖標
圖標的繪制是UI 設計中最為重要的一個環節，一個好的圖標，需要有指代性、識別性和審美性。本章不僅詳細闡述了圖標的繪制過程，介紹了縮放工具、使用參考線和網格、使用檢查器、調整錨點和曲線的方法，還講述了UI 圖標的分類、圖標的更換方法、繪制流程和圖標屬性等理念與實際相結合的知識。
第5 章 按鈕設計
本章對UI 設計中的按鈕進行了詳細、具體的講解，闡明了按鈕設計在UI 中的地位和重要作用，介紹了按鈕設計的知識和規范，通過一組播放器按鈕和一組質感按鈕的繪制，詳細介紹了漸變、陰影、內陰影、模糊等工具在設計中的應用。
第6 章 移動端界面設計
本章以第3 章的兩個線框圖為基礎，在實際操作中講述了APP 界面設計，通過修改顏色、樣式、文字等參數，完成APP 界面設計的制作。
第7 章 PC 端網頁界面設計
本章結合前面章節講解的內容，使用Sketch 的各種工具完成PC 端網頁的制作，講解了PC端網頁設計的方法、PC 端和移動端網頁設計的區別、扁平化設計在UI 設計中的應用和網站常見設計風格等內容，對使用Sketch 進行UI 設計是一個概括。
第8 章 UI 的輸出與交互設計
本章通過導出APP 應用圖標導出移動端APP 界面為網頁劃分切片和導出點九切圖等案例，講解了Sketch 文件的輸出、適配分辨率、分享設計稿、移動交互設計事項等必要的理論知識，幫助讀者完成和歸納Sketch 應用與UI 設計的最后環節。
第9 章 使用Xcode 制作交互效果
本章講解了如何安裝并啟動Xcode 軟件，介紹了Xcode 的界面和主要功能，演示了Xcode 的基本操作，講解了如何使用Xcode 編輯從Sketch 中導出的圖片，通過編輯和使用控件、導入素材等一系列操作，最終實現模擬運行效果的過程。
《移動互聯網之路Sketch Xcode移動UI與交互動效設計從入門到精通》特點
《移動互聯網之路Sketch Xcode移動UI與交互動效設計從入門到精通》以案例帶動知識面的方式，以案例為主，詳細介紹并演示各種工具的使用方法并細化操作步驟，使讀者通過案例的學習，在實踐中熟練掌握Sketch 的使用方法。
《移動互聯網之路Sketch Xcode移動UI與交互動效設計從入門到精通》從布局上分為實戰案例、操作指南、通關必讀、知識鏈接、提示和技巧6 個主要部分。每一個實戰案例都講解了實際工作中一個Sketch 作品的制作過程，步驟講解具體，過程講解清晰且完善，通俗易懂。
《移動互聯網之路Sketch Xcode移動UI與交互動效設計從入門到精通》的操作指南是在UI 設計過程中對常用的、典型的工具及方法的具體講解和分析，能夠使讀者掌握重點。《移動互聯網之路Sketch Xcode移動UI與交互動效設計從入門到精通》的知識鏈接是對實際UI 設計過程中的方法及軟件功能進行具體分析及理論性講解。《移動互聯網之路Sketch Xcode移動UI與交互動效設計從入門到精通》的通關必讀中講解了UI 設計的基礎常識、設計理念及設計規范，讀者可以學習和參考，以掌握UI 設計中必不可少的理論知識。而通過提示和技巧，讀者可以在UI 設計過程中學習到更簡捷、更有效率的技巧和方法。
《移動互聯網之路Sketch Xcode移動UI與交互動效設計從入門到精通》最后介紹了Xcode 的使用，Xcode 和Sketch 一樣是iOS 系統的獨霸軟件。Xcode是運行在操作系統Mac OS X 上的集成開發工具，在此著重講解了Xcode 移動端UI 設計常用的控件和功能，使讀者能夠通過Xcode 看到移動UI 設計最終的演示效果和交互體驗。
編寫《移動互聯網之路Sketch Xcode移動UI與交互動效設計從入門到精通》的目的在于講解如何使用Sketch 軟件和使用Xcode 運行交互效果，使讀者了解UI 設計的基礎常識和必要知識。《移動互聯網之路Sketch Xcode移動UI與交互動效設計從入門到精通》語言簡潔、描述細致且全面，使讀者能夠輕松地學會Sketch 的操作，了解圖標和界面的繪制過程，在UI 的學習中起到事半功倍的效果。由于互聯網的更新較快，書中所提供的網址僅供參考。
《移動互聯網之路Sketch Xcode移動UI與交互動效設計從入門到精通》由張曉景編著，李曉斌、高鵬、胡敏敏、楊帆、楊陽、張國勇、賈勇、劉釗、魏華、林秋、夏志利、胡偉軍、董亮等也參與了《移動互聯網之路Sketch Xcode移動UI與交互動效設計從入門到精通》的編寫工作。由于作者水平所限，書中難免有疏漏和不足之處，懇請廣大讀者批評、指正。
《移動互聯網之路Sketch Xcode移動UI與交互動效設計從入門到精通》提供了書中案例的源文件、素材文件、教學視頻和PPT 教學課件等資源，掃一掃下方的二維碼，推送到自己的郵箱后即可下載獲取。
編 者
目 錄
第 1 章 UI 入門必修課 1
1.1 UI、UE 和 ID 1
1.1.1 UI( 用戶界面 ) 2
1.1.2 UE( 用戶體驗 ) 2
1.1.3 ID( 交互設計 ) 2
1.2 用戶體驗的一般設計流程 2
1.2.1 原型 2
1.2.2 模型 3
1.2.3 演示版 4
1.2.4 中間步驟 4
1.3 iOS 和 Android 的設計特色 4
1.3.1 iOS 的設計特色 4
1.3.2 Android 的設計特色 8
1.4 移動 UI 的基本常識 11
1.4.1 移動 UI 設計中用到的單位 11
1.4.2 iOS 的界面設計規范 12
1.4.3 Android 的界面設計規范 14
1.5 網頁 UI 的基本常識 17
1.5.1 安全網頁寬度與首屏高度 17
1.5.2 常見網頁布局形式 18
1.5.3 網頁布局原則 21
1.5.4 網頁中的配色方法 22
1.6 本章小結 24
第 2 章 初識 Sketch 25
2.1 繪制 Apple Watch 界面 25
2.1.1 插入 Apple Watch 畫板 28
2.1.2 繪制 Apple Watch 界面首頁 32
2.1.3 繪制 Apple Watch 界面 36
2.2 繪制 iOS 旅游 APP 跳轉頁面 41
2.2.1 iOS 旅游 APP 跳轉頁面 42
2.2.2 iOS 旅游 APP 跳轉頁面 48
2.2.3 iOS 旅游 APP 跳轉頁面 51
2.3 本章小結 53
第 3 章 使用 Sketch 繪制線框圖 54
3.1 繪制計步 APP 線框圖首頁 54
3.1.1 新建并保存文件 55
3.1.2 繪制線框圖的狀態條 57
3.1.3 繪制計步圖標線框 59
3.1.4 繪制睡眠狀態條 63
3.1.5 繪制底部標簽導航 66
3.2 繪制天氣 APP 線框圖 68
3.2.1 繪制線框圖首頁 68
3.2.2 繪制首頁下滑頁 73
3.2.3 繪制搜索頁和設置頁 76
3.3 本章小結 79
第 4 章 使用 Sketch 設計圖標 80
4.1 繪制簡潔 iOS 功能圖標 80
4.1.1 繪制指南針圖標 83
4.1.2 繪制時鐘和相機圖標 87
4.1.3 繪制計算器和拍攝圖標 90
4.1.4 繪制日記事圖標 94
4.2 繪制一組 APP 應用圖標 96
4.2.1 繪制旅行箱圖標 97
4.2.2 繪制輪船圖標 100
4.2.3 繪制帳篷和太陽傘圖標 103
4.2.4 繪制酒杯、救生圈、天氣、冰激凌圖標 105
4.2.5 繪制飛機圖標 114
4.3 本章小結 117
第 5 章 按鈕設計 118
5.1 繪制一組播放器按鈕 118
5.1.1 繪制循環按鈕 121
5.1.2 繪制播放和暫停按鈕 126
5.1.3 繪制語音和關閉按鈕 128
5.1.4 繪制喇叭按鈕 131
5.1.5 繪制選擇、撤銷、隨機和退出按鈕 134
5.1.6 繪制按鍵和滑桿按鈕 138
5.2 繪制質感按鈕 141
5.2.1 繪制金屬拉絲質感按鈕 141
5.2.2 繪制紋理質感按鈕 143
5.2.3 繪制水晶質感按鈕 146
5.3 本章小結 148
第 6 章 移動端界面設計 149
6.1 繪制計步 APP 界面 149
6.1.1 繪制計步 APP 首頁計步顯示區 150
6.1.2 繪制計步 APP 首頁其他部分 154
6.2 繪制天氣 APP 界面 159
6.2.1 繪制天氣 APP 首頁插畫背景 160
6.2.2 繪制天氣 APP 其他界面內容 164
6.3 本章小結 173
第 7 章 PC端網頁界面設計 174
7.1 設計制作 PC 端支付網頁 174
7.1.1 繪制 PC 端支付網頁購物車界面 176
7.1.2 繪制 PC 端支付網頁其他界面 181
7.2 設計制作家居網站頁面 185
7.2.1 繪制 PC 端家居頁面的整體結構 188
7.2.2 繪制 PC 端家居網頁廣告部分 192
7.3 本章小結 202
第 8 章 UI 的輸出與交互設計 203
8.1 導出 APP 應用圖標 203
8.2 導出移動端 APP 界面 206
8.3 為網頁劃分切片 211
8.4 導出點九切圖 215
8.5 本章小結 218
第 9 章 使用 Xcode 制作交互效果 219
9.1 Xcode 的安裝 219
9.2 認識 Xcode 界面 225
9.2.1 按區域劃分 Xcode 界面 225
9.2.2 工具欄 226
9.2.3 工具區 227
9.2.4 編輯區 229
9.2.5 導航區 230
9.2.6 調試區 231
9.3 創建和刪除項目 232
9.4 為旅游 APP 的跳轉頁面制作點擊效果 239
9.5 制作完整的天氣 APP 運行效果 243
9.6 本章小結 248
通關必讀
什么是 Sketch 26
為什么選擇 Sketch 26
Sketch 快捷鍵 37
Sketch 是否能替代 Photoshop 41
圖標的源文件格式 52
Sketch 漢化 52
線框圖的基本概念 55
繪制線框原型的注意事項 66
畫好 APP 線框圖流程圖的要點 78
線框原型的優勢 79
iOS 和 iOS 圖標的特點 81
圖標設計的必要性 81
UI 圖標的分類 82
不同系統圖標的更換方法 91
圖標集的制作流程 95
圖標的源文件格式 104
了解圖標的屬性 115
UI 設計中最常見的按鈕如何設計 119
移動界面中色彩的應用 133
按鈕是用戶體驗的重要因素 139
陰影和內陰影的設置 142
為什么界面設計大多喜歡用藍色 152
iOS 應用界面設計規范 162
移動界面中文字的使用技巧 168
APP 界面配色原則 168
網頁設計 PC 端和移動端的區別 175
扁平化設計在 UI 設計中的應用 179
理解以用戶為中心 191
界面設計中的內容與形勢統一 191
網站常見設計風格 199
適配多分辨率移動界面 203
交付給開發的文件 210
了解移動設備的手勢 214
移動交互動效設計的注意事項 217
常見的交互動畫效果 231
交互式動畫實現法則 236
為什么在學習 Sketch 之后要了解 Xcode 248
操作指南
安裝 Sketch 26
啟動 Sketch 27
自定義工具欄 31
自定義快捷鍵 39
修改參考線顏色 50
使用內置模板 58
添加和刪除自定義模板 59
設置填充和描邊選項 65
為圓角矩形設置不同的圓角半徑 71
調整圖層排列順序 72
設置縮放顯示 101
使用縮放工具 102
使用鋼筆工具繪制路徑 111
使用鋼筆工具繪制紅心形狀 113
設置重疊的填充樣式 120
使用動態模糊調整圖層 147
創建路徑文本 157
使用旋轉復制工具 163
自定義和使用文本樣式 172
使用蒙版并設置蒙版不透明度 198
獲取與安裝 Xcode 219
啟動 Xcode 221
導入和顯示圖片 234
知識鏈接
Sketch 的歡迎窗口 29
Sketch 的主界面 30
工具欄 31
Sketch 中的工具 35
畫布 41
Sketch 的系統偏好設置 44
其他新建和保存文件的方法 56
設置文件存儲標簽和存儲路徑 57
插入與設置文本選項 61
使用形狀檢查器 63
添加陰影和內陰影 65
插入圓角矩形 70
圖層面板 71
圖層類型 71
隱藏和鎖定圖層 72
復制、剪切和粘貼圖層 75
搜索圖層 76
在畫布中移動和選擇圖層 85
選擇并移動重疊圖層 86
在檢查器中精確設置對象大小 88
在檢查器中變換對象 89
iOS 系統中圖標的尺寸 91
編輯形狀 99
標尺和參考線 109
使用網格 110
Sketch 中的貝塞爾曲線 110
錨點和曲線的控制 112
使用漸變 124
圖案填充 127
噪點填充 131
布爾運算 136
模糊 145
文本轉化為輪廓 158
旋轉復制 162
創建和編輯組件 170
混合模式 184
編輯位圖 186
蒙版 197
分享設計稿 205
獲取和使用 Sketch 插件 208
切片圖層檢查器 212
為什么要使用點九切圖 217
Xcode 的快捷鍵 220
使用 Xcode 歡迎窗口 222
交互設計與交互式動畫 222
Xcode 中的應用模板 234
新書資訊