第 1 章 UI 入門必修課 1

1.1　UI、UE 和 ID   1 

1.1.1　UI( 用戶界面 )  2 

1.1.2　UE( 用戶體驗(yàn) )  2 

1.1.3　ID( 交互設(shè)計(jì) )  2 

1.2　用戶體驗(yàn)的一般設(shè)計(jì)流程 2 

1.2.1　原型   2 

1.2.2　模型   3 

1.2.3　演示版   4 

1.2.4　中間步驟    4 

1.3　iOS 和 Android 的設(shè)計(jì)特色  4 

1.3.1　iOS 的設(shè)計(jì)特色 4 

1.3.2　Android 的設(shè)計(jì)特色  8 

1.4　移動 UI 的基本常識 11 

1.4.1　移動 UI 設(shè)計(jì)中用到的單位   11 

1.4.2　iOS 的界面設(shè)計(jì)規(guī)范 12 

1.4.3　Android 的界面設(shè)計(jì)規(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　繪制計(jì)步 APP 線框圖首頁 54 

3.1.1　新建并保存文件 55 

3.1.2　繪制線框圖的狀態(tài)條 57 

3.1.3　繪制計(jì)步圖標(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è)計(jì)圖標(biāo)  80 

4.1　繪制簡潔 iOS 功能圖標(biāo)  80 

4.1.1　繪制指南針圖標(biāo) 83 

4.1.2　繪制時鐘和相機(jī)圖標(biāo)  87 

4.1.3　繪制計(jì)算器和拍攝圖標(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　繪制飛機(jī)圖標(biāo) 114 

4.3　本章小結(jié)   117 

第 5 章 按鈕設(shè)計(jì) 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　繪制選擇、撤銷、隨機(jī)和退出按鈕 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è)計(jì) 149 

6.1　繪制計(jì)步 APP 界面 149 

6.1.1　繪制計(jì)步 APP 首頁計(jì)步顯示區(qū)    150 

6.1.2　繪制計(jì)步 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è)計(jì) 174 

7.1　設(shè)計(jì)制作 PC 端支付網(wǎng)頁 174 

7.1.1　繪制 PC 端支付網(wǎng)頁購物車界面   176 

7.1.2　繪制 PC 端支付網(wǎng)頁其他界面   181 

7.2　設(shè)計(jì)制作家居網(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è)計(jì) 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)出點(diǎn)九切圖   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)建和刪除項(xiàng)目   232 

9.4　為旅游 APP 的跳轉(zhuǎn)頁面制作點(diǎn)擊效果   239 

9.5　制作完整的天氣 APP 運(yùn)行效果   243 

9.6　本章小結(jié)   248 

通關(guān)必讀 

什么是 Sketch   26 

為什么選擇 Sketch   26 

Sketch 快捷鍵   37 

Sketch 是否能替代 Photoshop 41 

圖標(biāo)的源文件格式   52 

Sketch 漢化   52 

線框圖的基本概念   55 

繪制線框原型的注意事項(xiàng)    66 

畫好 APP 線框圖流程圖的要點(diǎn)   78 

線框原型的優(yōu)勢   79 

iOS 和 iOS 圖標(biāo)的特點(diǎn)   81 

圖標(biāo)設(shè)計(jì)的必要性   81 

UI 圖標(biāo)的分類   82 

不同系統(tǒng)圖標(biāo)的更換方法    91 

圖標(biāo)集的制作流程   95 

圖標(biāo)的源文件格式   104 

了解圖標(biāo)的屬性   115 

UI 設(shè)計(jì)中最常見的按鈕如何設(shè)計(jì) 119 

移動界面中色彩的應(yīng)用   133 

按鈕是用戶體驗(yàn)的重要因素   139 

陰影和內(nèi)陰影的設(shè)置   142 

為什么界面設(shè)計(jì)大多喜歡用藍(lán)色   152 

iOS 應(yīng)用界面設(shè)計(jì)規(guī)范    162 

移動界面中文字的使用技巧   168 

APP 界面配色原則   168 

網(wǎng)頁設(shè)計(jì) PC 端和移動端的區(qū)別 175 

扁平化設(shè)計(jì)在 UI 設(shè)計(jì)中的應(yīng)用   179 

理解以用戶為中心   191 

界面設(shè)計(jì)中的內(nèi)容與形勢統(tǒng)一   191 

網(wǎng)站常見設(shè)計(jì)風(fēng)格   199 

適配多分辨率移動界面    203 

交付給開發(fā)的文件   210 

了解移動設(shè)備的手勢   214 

移動交互動效設(shè)計(jì)的注意事項(xiàng)   217 

常見的交互動畫效果   231 

交互式動畫實(shí)現(xiàn)法則   236 

為什么在學(xué)習(xí) Sketch 之后要了解 Xcode    248 

操作指南 

安裝 Sketch   26 

啟動 Sketch   27 

自定義工具欄   31 

自定義快捷鍵   39 

修改參考線顏色   50 

使用內(nèi)置模板   58 

添加和刪除自定義模板   59 

設(shè)置填充和描邊選項(xiàng)   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è)置文本選項(xiàng)   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 

錨點(diǎn)和曲線的控制   112 

使用漸變   124 

圖案填充   127 

噪點(diǎn)填充   131 

布爾運(yùn)算   136 

模糊   145 

文本轉(zhuǎn)化為輪廓  158 

旋轉(zhuǎn)復(fù)制   162 

創(chuàng)建和編輯組件   170 

混合模式   184 

編輯位圖   186 

蒙版  197 

分享設(shè)計(jì)稿  205 

獲取和使用 Sketch 插件   208 

切片圖層檢查器   212 

為什么要使用點(diǎn)九切圖  217 

Xcode 的快捷鍵   220 

使用 Xcode 歡迎窗口   222 

交互設(shè)計(jì)與交互式動畫  222 

Xcode 中的應(yīng)用模板   234