第 1章 APP UI設(shè)計(jì)與交互概述 1
1.1 UI設(shè)計(jì)概述及行業(yè)發(fā)展前景 2
1.1.1 UI設(shè)計(jì)概述 2
1.1.2 交互設(shè)計(jì)概述 2
1.1.3 用戶體驗(yàn)概述 4
1.1.4 移動(dòng)端UI的操作系統(tǒng) 4
1.1.5 就業(yè)前景 5
1.2 如何學(xué)習(xí)UI設(shè)計(jì) 6
1.2.1 UI設(shè)計(jì)師常用軟件介紹 6
1.2.2 UI設(shè)計(jì)師設(shè)計(jì)理論的知識(shí)儲(chǔ)備 8
1.3 UI設(shè)計(jì)理論基礎(chǔ) 8
1.3.1 色彩三要素 9
1.3.2 UI設(shè)計(jì)配色基礎(chǔ) 10
1.3.3 配色組合推薦 11
1.3.4 小試牛刀（繪制APP功能界面） 13
1.4 APP UI界面設(shè)計(jì)的流行趨勢(shì) 14
1.4.1 極簡(jiǎn)設(shè)計(jì) 15
1.4.2 玻璃擬態(tài) 15
1.4.3 3D元素 16
1.4.4 玻璃擬態(tài)元素的制作（玻璃卡片） 17
1.5 淺析APP產(chǎn)品開發(fā)流程 19
1.6 職場(chǎng)經(jīng)驗(yàn)分享 21
1.6.1 作品集 21
1.6.2 團(tuán)隊(duì)的合力 21
1.6.3 學(xué)以致用 22
1.6.4 設(shè)計(jì)師應(yīng)具備的視野 22
1.7 學(xué)習(xí)反思 23
1.7.1 本章小結(jié) 23
1.7.2 課后練習(xí) 23
第 2章 UI基礎(chǔ)知識(shí) 24
2.1 APP頁(yè)面分類解析 25
2.1.1 啟動(dòng)頁(yè)、閃屏和引導(dǎo)頁(yè) 25
2.1.2 首頁(yè) 28
2.1.3 導(dǎo)航 30
2.1.4 詳情頁(yè) 32
2.1.5 注冊(cè)登錄頁(yè) 32
2.2 APP框架布局與基礎(chǔ)概念 33
2.2.1 認(rèn)識(shí)APP框架布局 33
2.2.2 常見術(shù)語(yǔ) 34
2.3 iOS設(shè)計(jì)規(guī)范 36
2.3.1 iOS界面尺寸 36
2.3.2 iOS界面的框架尺寸 37
2.3.3 iOS界面的圖標(biāo)尺寸 38
2.3.4 iOS字體規(guī)范 38
2.3.5 制作iOS標(biāo)準(zhǔn)界面（列表界面） 39
2.4 Android設(shè)計(jì)規(guī)范 41
2.4.1 Android界面尺寸 41
2.4.2 Android圖標(biāo)尺寸與字體規(guī)范 42
2.4.3 制作Android標(biāo)準(zhǔn)界面 42
2.5 其他設(shè)計(jì)規(guī)范 43
2.5.1 邊距與間距 43
2.5.2 內(nèi)容布局 45
2.5.3 常用顏色 45
2.6 學(xué)習(xí)反思 46
2.6.1 本章小結(jié) 46
2.6.2 課后練習(xí) 46
第3章 圖標(biāo)設(shè)計(jì) 47
3.1 UI圖標(biāo)設(shè)計(jì) 48
3.1.1 圖標(biāo)的分類 48
3.1.2 常見存儲(chǔ)格式與圖標(biāo)尺寸 49
3.1.3 APP啟動(dòng)圖標(biāo)的常見創(chuàng)意設(shè)計(jì)方法 50
3.2 線性圖標(biāo) 51
3.2.1 線性圖標(biāo)概述 51
3.2.2 線性圖標(biāo)的制作（Wi-Fi圖標(biāo)） 51
3.2.3 課堂鞏固練習(xí)（Keep圖標(biāo)） 53
3.3 剪影類圖標(biāo) 54
3.3.1 剪影類圖標(biāo)概述 54
3.3.2 剪影類圖標(biāo)的制作（抖音APP圖標(biāo)） 54
3.3.3 課堂鞏固練習(xí)（微信圖標(biāo)） 57
3.4 扁平化與長(zhǎng)陰影圖標(biāo) 57
3.4.1 扁平化與長(zhǎng)陰影圖標(biāo)概述 57
3.4.2 扁平化與長(zhǎng)陰影圖標(biāo)的制作（指南針圖標(biāo)） 58
3.4.3 課堂鞏固練習(xí)（一組扁平化圖標(biāo)） 61
3.5 擬物化圖標(biāo) 61
3.5.1 擬物化圖標(biāo)概述 61
3.5.2 擬物化圖標(biāo)的制作（木紋質(zhì)感翻頁(yè)日歷） 62
3.5.3 課堂鞏固練習(xí)（擬物齒輪） 66
3.6 學(xué)習(xí)反思 66
3.6.1 本章小結(jié) 66
3.6.2 課后練習(xí) 67
第4章 常見APP組件的設(shè)計(jì)與實(shí)現(xiàn) 68
4.1 UI Kit概述 69
4.2 按鈕 69
4.2.1 按鈕概述 69
4.2.2 按鈕的按壓狀態(tài) 70
4.2.3 按鈕的種類 71
4.2.4 按鈕的設(shè)計(jì)要點(diǎn) 72
4.2.5 扁平化按鈕的制作 73
4.2.6 質(zhì)感按鈕的制作 74
4.2.7 課堂鞏固練習(xí)（水晶質(zhì)感按鈕） 77
4.3 滑動(dòng)條 77
4.3.1 扁平滑動(dòng)條的制作 77
4.3.2 質(zhì)感滑動(dòng)條的制作 78
4.3.3 課堂鞏固練習(xí)（QQ音樂播放器） 80
4.4 表單 80
4.4.1 表單結(jié)構(gòu)與設(shè)計(jì)要點(diǎn) 80
4.4.2 單選按鈕與復(fù)選框的制作 82
4.4.3 文本框與下拉框的制作 83
4.4.4 課堂鞏固練習(xí)（反饋?lái)?yè)表單） 84
4.5 數(shù)據(jù)圖表 84
4.5.1 數(shù)據(jù)圖表概述 84
4.5.2 數(shù)據(jù)圖表的制作 86
4.5.3 課堂鞏固練習(xí)（環(huán)形數(shù)據(jù)圖表） 89
4.6 Banner 89
4.6.1 Banner概述 89
4.6.2 Banner組件的制作 90
4.6.3 課堂鞏固練習(xí)（通欄Banner） 91
4.7 卡片 92
4.7.1 卡片概述 92
4.7.2 卡片組件的制作 92
4.7.3 課堂鞏固練習(xí)（信息卡片） 93
4.8 學(xué)習(xí)反思 94
4.8.1 本章小結(jié) 94
4.8.2 課后練習(xí) 94
第5章 交互設(shè)計(jì)與原型圖繪制 95
5.1 初識(shí)交互設(shè)計(jì) 96
5.1.1 交互設(shè)計(jì)概述 96
5.1.2 產(chǎn)品開發(fā)中的層級(jí)關(guān)系 97
5.1.3 相關(guān)工作經(jīng)驗(yàn) 98
5.2 初識(shí)產(chǎn)品原型 99
5.3 原型制作工具Axure RP 100
5.3.1 Axure RP界面認(rèn)知 100
5.3.2 Axure RP基本操作 101
5.3.3 繪制手機(jī)原型并存放于自己的元件庫(kù) 103
5.3.4 多頁(yè)面鞏固練習(xí)（繪制金融類APP原型圖） 104
5.4 Axure RP常見的交互應(yīng)用 105
5.4.1 頁(yè)面跳轉(zhuǎn) 105
5.4.2 引導(dǎo)頁(yè)左右滑動(dòng)效果 106
5.4.3 長(zhǎng)頁(yè)面上下滾動(dòng)效果 108
5.4.4 彈出消息框效果 110
5.4.5 側(cè)邊欄菜單滑入效果 113
5.4.6 表單驗(yàn)證與登錄交互 114
5.5 學(xué)習(xí)反思 118
5.5.1 本章小結(jié) 118
5.5.2 課后練習(xí) 118
第6章 APP界面設(shè)計(jì)與實(shí)戰(zhàn) 119
6.1 APP項(xiàng)目實(shí)戰(zhàn)UI社APP產(chǎn)品設(shè)計(jì)與實(shí)現(xiàn) 120
6.1.1 產(chǎn)品定位與背景簡(jiǎn)要分析 120
6.1.2 競(jìng)品分析 120
6.1.3 UI社APP產(chǎn)品架構(gòu)梳理 125
6.1.4 繪制低保真原型圖 125
6.1.5 UI社APP的視覺規(guī)范 126
6.1.6 APP產(chǎn)品啟動(dòng)圖標(biāo)的制作 128
6.1.7 引導(dǎo)頁(yè)效果圖的制作 128
6.1.8 登錄頁(yè)效果圖的制作 129
6.1.9 首頁(yè)效果圖的制作 129
6.1.10 發(fā)現(xiàn)頁(yè)效果圖的制作 129
6.1.11 上傳頁(yè)效果圖的制作 130
6.1.12 動(dòng)態(tài)頁(yè)與動(dòng)態(tài)詳情頁(yè)效果圖的制作 130
6.1.13 我的頁(yè)效果圖的制作 131
6.1.14 其他頁(yè)面效果圖 132
6.2 學(xué)習(xí)反思 133
6.2.1 本章小結(jié) 133
6.2.2 課后練習(xí) 133
第7章 標(biāo)注與切圖 135
7.1 標(biāo)注 136
7.1.1 標(biāo)注工具概述 136
7.1.2 Markman的使用方法 137
7.1.3 標(biāo)注的內(nèi)容 138
7.1.4 UI社APP項(xiàng)目引導(dǎo)頁(yè)標(biāo)注 139
7.1.5 UI社APP項(xiàng)目登錄頁(yè)標(biāo)注 139
7.1.6 UI社APP項(xiàng)目首頁(yè)標(biāo)注 140
7.1.7 UI社APP項(xiàng)目教程功能列表頁(yè)標(biāo)注 141
7.2 切圖 141
7.2.1 切圖概述 141
7.2.2 圖片資源命名規(guī)范 142
7.2.3 切圖工具Cutterman 142
7.2.4 iOS平臺(tái)與Android平臺(tái)下的切圖 143
7.2.5 點(diǎn)9圖 145
7.3 學(xué)習(xí)反思 147
7.3.1 本章小結(jié) 147
7.3.2 課后練習(xí) 147
第8章 職業(yè)技能實(shí)訓(xùn)指導(dǎo) 148
8.1 實(shí)訓(xùn)意義和目的 149
8.2 實(shí)訓(xùn)要求與考核標(biāo)準(zhǔn) 149
8.2.1 實(shí)訓(xùn)的總體要求 149
8.2.2 考核標(biāo)準(zhǔn) 149
8.3 實(shí)訓(xùn)步驟引導(dǎo) 150
8.3.1 確定項(xiàng)目題材 150
8.3.2 確定色彩、字體與間距標(biāo)準(zhǔn) 150
8.3.3 繪制確定圖標(biāo) 151
8.3.4 制作各級(jí)頁(yè)面 152