移動互聯網之路：Sketch+Xcode移動UI與交互動效設計從入門到精通

第 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

前 言

《移動互聯網之路——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 教學課件等資源，掃一掃下方的二維碼，推送到自己的郵箱後即可下載獲取。

編 者