1.1 UI設(shè)計(jì)概述·····································1
1.1.1 什么是UI 設(shè)計(jì) ···································.1
1.1.2 UI 設(shè)計(jì)常用術(shù)語(yǔ) ·································.2
1.1.3 UI 設(shè)計(jì)的特點(diǎn) ····································.2
1.2 了解UI交互設(shè)計(jì)·······························5
1.2.1 什么是交互 ········································.5
1.2.2 什么是交互設(shè)計(jì) ··································.6
1.2.3 了解UI 交互設(shè)計(jì)師 ·····························.7
1.2.4 交互設(shè)計(jì)需要考慮的內(nèi)容 ····················.8
1.2.5 交互設(shè)計(jì)需要遵循的習(xí)慣 ······················.9
1.3 交互設(shè)計(jì)與用戶體驗(yàn)的關(guān)系 ···············9
1.3.1 什么是用戶體驗(yàn) ·································.10
1.3.2 六種基礎(chǔ)體驗(yàn) ····································.10
1.3.3 UI 交互設(shè)計(jì)的重要性 ························.12
1.3.4 交互設(shè)計(jì)的五要素 ·····························.13
1.4 交互設(shè)計(jì)的基本流程 ······················14
1.5 產(chǎn)品需求分析································15
1.5.1 需求分析的誤區(qū) ·······························.16
1.5.2 需求分析的路徑 ·······························.16
1.6 用戶行為流程設(shè)計(jì) ·························17
1.6.1 用戶行為流程的分類 ··························.18
1.6.2 用戶行為流程的設(shè)計(jì)原則 ····················.18
1.7 產(chǎn)品信息架構(gòu)設(shè)計(jì) ·························20
1.7.1 什么是產(chǎn)品信息架構(gòu) ·························.20
1.7.2 如何進(jìn)行產(chǎn)品信息架構(gòu)設(shè)計(jì) ·················.21
1.8 產(chǎn)品原型設(shè)計(jì) ·······························23
1.8.1 什么是原型設(shè)計(jì) ································.23
1.8.2 原型設(shè)計(jì)的流程 ································.23
1.9 移動(dòng)端App與網(wǎng)站的交互差異 ··········24
1.9.1 設(shè)備尺寸不同 ···································.24
1.9.2 交互方式不同 ····································.25
1.9.3 使用環(huán)境不同 ····································.27
1.9.4 網(wǎng)絡(luò)環(huán)境不同 ····································.27
1.9.5 基于位置服務(wù)的精細(xì)度不同 ··················.27
1.10 本章小結(jié) ····································28
2.1 了解iOS系統(tǒng)·································29
2.1.1 iOS 系統(tǒng)的屏幕分辨率 ·······················.29
2.1.2 邏輯點(diǎn)與倍圖 ···································.30
2.2 iOS系統(tǒng)UI設(shè)計(jì)規(guī)范 ·······················31
2.2.1 iPhone 常用屏幕尺寸和分辨率 ··············.31
2.2.2 界面元素尺寸規(guī)范 ·····························.32
2.2.3 字體規(guī)范 ·········································.35
2.2.4 圖標(biāo)規(guī)范 ·········································.37
2.2.5 按鈕規(guī)范 ·········································.39
2.2.6 版式布局規(guī)范 ···································.39
2.2.7 邊距和間距設(shè)置規(guī)范 ··························.42
2.2.8 交互手勢(shì)規(guī)范 ···································.45
2.2.9 設(shè)計(jì)適配 ·········································.49
2.3 iOS系統(tǒng)UI設(shè)計(jì)三大原則 ·················49
2.3.1 視覺層——清晰 ································.49
2.3.2 交互層——遵從 ·································.50
2.3.3 結(jié)構(gòu)層——深度 ·································.51
2.4 了解Android系統(tǒng) ···························52
2.4.1 Android 系統(tǒng)的發(fā)展 ··························.52
2.4.2 Android 系統(tǒng)常用單位 ·······················.52
2.4.3 單位換算 ········································.53
2.4.4 Android 系統(tǒng)常用分辨率 ····················.54
2.5 Android系統(tǒng)UI設(shè)計(jì)規(guī)范 ·················54
2.5.1 界面基本元素的尺寸設(shè)置 ··················.54
2.5.2 字體設(shè)計(jì)規(guī)范 ·································.55
2.5.3 圖標(biāo)設(shè)計(jì)規(guī)范 ·································.56
2.5.4 色彩應(yīng)用標(biāo)準(zhǔn) ·································.58
2.5.5 設(shè)計(jì)適配 ·······································.61
2.6 本章小結(jié) ·····································62
3.1 移動(dòng)端UI的布局設(shè)計(jì) ······················63
3.1.1 UI 版面布局的特征 ····························.63
3.1.2 UI 常見布局形式 ·······························.65
3.1.3 無框設(shè)計(jì)與卡片式設(shè)計(jì) ·······················.69
3.2 UI設(shè)計(jì)中的平面構(gòu)成 ······················71
3.2.1 統(tǒng)一與變化 ······································.71
3.2.2 對(duì)比與調(diào)和 ······································.72
3.2.3 對(duì)稱與平衡 ······································.72
3.2.4 節(jié)奏與韻律 ····································.73
3.3 界面的格式塔原理 ·························74
3.3.1 什么是格式塔原理 ·····························.74
3.3.2 格式塔原理的七大法則 ·······················.75
3.4 UI的交互設(shè)計(jì) ·······························80
3.4.1 用戶青睞的交互設(shè)計(jì)模式 ····················.80
3.4.2 如何提升產(chǎn)品轉(zhuǎn)化率 ··························.81
3.4.3 三種新穎的UI 交互技巧 ·····················.82
3.5 優(yōu)秀的UI交互具有哪些特點(diǎn) ·············85
3.5.1 明確系統(tǒng)狀態(tài) ···································.85
3.5.2 讓按鈕和操控?fù)碛杏|感 ·······················.86
3.5.3 有意義的轉(zhuǎn)場(chǎng)動(dòng)效 ·····························.86
3.5.4 幫助用戶開始 ···································.87
3.5.5 強(qiáng)調(diào)界面的變化 ································.87
3.5.6 需要注意的細(xì)節(jié) ································.87
3.6 本章小結(jié) ·····································88
I交互動(dòng)畫設(shè)計(jì)
第4章　界面元素的交互設(shè)計(jì)
4.1 UI設(shè)計(jì)元素——文字 ······················89
4.1.1 襯線字體與無襯線字體 ························.89
4.1.2 UI 中的字體應(yīng)用 ································.90
4.1.3 在界面中盡可能只使用一種字體 ············.91
4.1.4 如何體現(xiàn)文字的層次感 ························.92
4.1.5 文字適配的四種方式 ···························.92
4.2 UI設(shè)計(jì)元素——圖標(biāo) ······················94
4.2.1 圖標(biāo)的功能 ·······································.94
4.2.2 圖標(biāo)的類型 ·······································.96
4.2.3 圖標(biāo)的表現(xiàn)形式及適用場(chǎng)景 ··················.97
4.3 圖標(biāo)交互的意義 ····························99
4.3.1 預(yù)見性 ·············································.99
4.3.2 美觀性 ···········································.100
4.3.3 統(tǒng)一性 ···········································.101
4.4 UI設(shè)計(jì)元素——按鈕 ···················.103
4.4.1 按鈕的功能與表現(xiàn) ····························.103
4.4.2 常見的按鈕形狀 ·······························.104
4.4.3 交互按鈕的樣式與應(yīng)用 ······················.106
4.5 如何設(shè)計(jì)出色的交互按鈕 ·············.108
4.5.1 按鈕需要看起來可點(diǎn)擊 ······················.108
4.5.2 按鈕的色彩很重要 ····························.109
4.5.3 按鈕的尺寸 ·····································.109
4.5.4 合適的擺放位置 ·································110
4.5.5 良好的對(duì)比效果 ·································110
4.5.6 按鈕樣式需要統(tǒng)一 ······························111
4.5.7 明確告訴用戶按鈕的功能 ·····················111
4.5.8 注意按鈕的視覺層級(jí) ···························111
4.6 UI設(shè)計(jì)元素——圖片 ···················.112
4.6.1 圖片比例 ··········································112
4.6.2 常見的圖片排版方式 ···························113
4.6.3 UI 中圖片的應(yīng)用技巧 ··························115
4.7 UI設(shè)計(jì)元素——導(dǎo)航 ···················.116
4.7.1 底部標(biāo)簽式導(dǎo)航 ·································116
4.7.2 舵式導(dǎo)航 ··········································117
4.7.3 選項(xiàng)卡式導(dǎo)航 ····································118
4.7.4 抽屜式導(dǎo)航 ·····································.120
4.8 UI設(shè)計(jì)元素——表單 ···················.120
4.8.1 文本輸入表單元素 ····························.120
4.8.2 搜索表單的常見表現(xiàn)形式 ···················.122
4.8.3 搜索表單的不同交互狀態(tài) ···················.123
4.9 本章小結(jié) ··································.126
第5章　UI交互動(dòng)效基礎(chǔ)
5.1 交互動(dòng)效與UI設(shè)計(jì) ······················.127
5.1.1 UI 動(dòng)效的發(fā)展 ·································.127
5.1.2 優(yōu)秀的交互動(dòng)效具有哪些特點(diǎn) ·············.128
5.1.3 交互動(dòng)效的優(yōu)勢(shì)是什么 ······················.129
5.1.4 功能型動(dòng)效與展示型動(dòng)效 ···················.130
5.2 哪些場(chǎng)合可以使用動(dòng)效表現(xiàn)UI交互 ··.131
5.2.1 轉(zhuǎn)場(chǎng)過渡 ········································.131
5.2.2 層級(jí)展示 ········································.132
5.2.3 空間擴(kuò)展 ········································.132
5.2.4 關(guān)注聚焦 ········································.132
5.2.5 內(nèi)容呈現(xiàn) ········································.133
5.2.6 操作反饋 ········································.133
5.3 基礎(chǔ)動(dòng)效類型有哪些 ···················.134
5.3.1 基礎(chǔ)動(dòng)效 ········································.134
5.3.2 屬性變化 ········································.135
5.3.3 運(yùn)動(dòng)節(jié)奏 ········································.135
5.3.4 基礎(chǔ)動(dòng)效組合應(yīng)用 ····························.136
5.4 認(rèn)識(shí)主流交互動(dòng)效制作軟件
——After Effects ·························.136
5.4.1 了解After Effects ·····························.136
5.4.2 After Effects 的工作界面 ·····················.137
5.4.3 After Effects 的基本操作 ·····················.138
5.4.4 導(dǎo)入素材 ········································.140
5.4.5 導(dǎo)入PSD 格式素材 ···························.140
實(shí)戰(zhàn)練習(xí)01——導(dǎo)入PSD 格式素材創(chuàng)建合成 ··.141
5.5 交互動(dòng)效制作基礎(chǔ) ······················.142
5.5.1 認(rèn)識(shí)“時(shí)間軸”面板 ·························.142
5.5.2 理解幀與關(guān)鍵幀 ·······························.145
5.5.3 創(chuàng)建關(guān)鍵幀 ·····································.146
5.5.4 編輯關(guān)鍵幀 ·····································.147
5.5.5 五種基礎(chǔ)“變換”屬性 ······················.149
實(shí)戰(zhàn)練習(xí)02——制作App 啟動(dòng)界面動(dòng)效 ·······.151
5.5.6 關(guān)于緩動(dòng)效果 ··································.155
5.6 關(guān)于蒙版動(dòng)效·····························.157
5.6.1 蒙版動(dòng)效原理 ··································.157
5.6.2 創(chuàng)建蒙版的工具 ·······························.158
5.6.3 蒙版屬性 ········································.159
實(shí)戰(zhàn)練習(xí)03——制作界面蒙版顯示動(dòng)效 ········.160
5.6.4 軌道遮罩 ········································.164
實(shí)戰(zhàn)練習(xí)04——制作iOS 系統(tǒng)解鎖文字
遮罩動(dòng)效 ·························.164
5.7 交互動(dòng)效的渲染輸出 ···················.167
5.7.1 渲染選項(xiàng)設(shè)置 ··································.167
5.7.2 使用Photoshop 將動(dòng)效輸出為GIF 文件 ·.169
實(shí)戰(zhàn)練習(xí)05——將動(dòng)效渲染輸出為GIF
動(dòng)畫文件 ··························.169
5.7.3 將動(dòng)效嵌入手機(jī)模板 ·························.172
實(shí)戰(zhàn)練習(xí)06——將動(dòng)效嵌入手機(jī)模板 ···········.172
5.8 本章小結(jié)···································.174
計(jì)與實(shí)現(xiàn)
6.1 開關(guān)按鈕交互動(dòng)效 ······················.175
6.1.1 開關(guān)按鈕的功能與特點(diǎn) ······················.175
6.1.2 制作開關(guān)按鈕交互動(dòng)效 ······················.175
實(shí)戰(zhàn)練習(xí)01——制作開關(guān)按鈕交互動(dòng)效 ········.175
6.2 加載進(jìn)度交互動(dòng)效 ······················.179
6.2.1 了解加載等待動(dòng)效 ····························.179
6.2.2 常見的加載進(jìn)度動(dòng)效表現(xiàn)形式 ·············.180
6.2.3 制作矩形進(jìn)度條動(dòng)效 ·························.181
實(shí)戰(zhàn)練習(xí)02——制作矩形進(jìn)度條動(dòng)效 ···········.181
6.3 文字交互動(dòng)效·····························.185
6.3.1 文字動(dòng)效的表現(xiàn)優(yōu)勢(shì) ·························.185
6.3.2 常見的文字動(dòng)效表現(xiàn)形式 ···················.186
6.3.3 制作手寫文字動(dòng)效 ····························.189
實(shí)戰(zhàn)練習(xí)03——制作手寫文字動(dòng)效 ··············.189
6.4 圖標(biāo)交互動(dòng)效·····························.194
6.4.1 常見的圖標(biāo)動(dòng)效表現(xiàn)形式 ···················.194
6.4.2 制作圖標(biāo)路徑變換動(dòng)效 ······················.197
實(shí)戰(zhàn)練習(xí)04——制作圖標(biāo)路徑變換動(dòng)效 ········.197
6.4.3 圖標(biāo)工具欄交互動(dòng)效 ·························.203
6.4.4 制作工具圖標(biāo)動(dòng)感展開動(dòng)效 ················.203
實(shí)戰(zhàn)練習(xí)05——制作工具圖標(biāo)動(dòng)感展開動(dòng)效 ··.204
6.5 導(dǎo)航菜單交互動(dòng)效 ······················.208
6.5.1 交互式導(dǎo)航菜單的優(yōu)勢(shì) ······················.208
6.5.2 交互式導(dǎo)航菜單的設(shè)計(jì)要點(diǎn) ················.209
6.5.3 制作側(cè)滑交互導(dǎo)航菜單動(dòng)效 ················.210
實(shí)戰(zhàn)練習(xí)06——制作側(cè)滑交互導(dǎo)航菜單動(dòng)效 ··.210
6.6 UI交互動(dòng)效································.213
6.6.1 UI 交互動(dòng)效的作用 ···························.213
6.6.2 常見的UI 交互動(dòng)效表現(xiàn)形式 ··············.216
6.6.3 制作火箭加載等待動(dòng)效 ······················.220
實(shí)戰(zhàn)練習(xí)07——制作火箭加載等待動(dòng)效 ········.220
6.7 UI轉(zhuǎn)場(chǎng)交互動(dòng)效··························.225
6.7.1 常見的UI 轉(zhuǎn)場(chǎng)動(dòng)效形式 ····················.225
6.7.2 UI 轉(zhuǎn)場(chǎng)交互動(dòng)效設(shè)計(jì)要求 ··················.229
6.8 UI交互動(dòng)效設(shè)計(jì)規(guī)范 ···················.232
6.8.1 UI 交互動(dòng)效設(shè)計(jì)要點(diǎn) ························.232
6.8.2 通過交互動(dòng)效設(shè)計(jì)提升UI 用戶體驗(yàn) ·······.234
6.8.3 制作登錄轉(zhuǎn)場(chǎng)動(dòng)效 ····························.237
實(shí)戰(zhàn)練習(xí)08——制作登錄轉(zhuǎn)場(chǎng)動(dòng)效 ··············.237
6.9 本章小結(jié)···································.246__