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