1.1 UI設(shè)計(jì)概述·····································1
1.1.1 什么是UI 設(shè)計(jì) ···································.1
1.1.2 UI 設(shè)計(jì)常用術(shù)語 ·································.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 移動端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 交互手勢規(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 移動端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 對比與調(diào)和 ······································.72
3.2.3 對稱與平衡 ······································.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)場動效 ·····························.86
3.5.4 幫助用戶開始 ···································.87
3.5.5 強(qiáng)調(diào)界面的變化 ································.87
3.5.6 需要注意的細(xì)節(jié) ································.87
3.6 本章小結(jié) ·····································88
I交互動畫設(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)形式及適用場景 ··················.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 良好的對比效果 ·································110
4.5.6 按鈕樣式需要統(tǒng)一 ······························111
4.5.7 明確告訴用戶按鈕的功能 ·····················111
4.5.8 注意按鈕的視覺層級 ···························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交互動效基礎(chǔ)
5.1 交互動效與UI設(shè)計(jì) ······················.127
5.1.1 UI 動效的發(fā)展 ·································.127
5.1.2 優(yōu)秀的交互動效具有哪些特點(diǎn) ·············.128
5.1.3 交互動效的優(yōu)勢是什么 ······················.129
5.1.4 功能型動效與展示型動效 ···················.130
5.2 哪些場合可以使用動效表現(xiàn)UI交互 ··.131
5.2.1 轉(zhuǎn)場過渡 ········································.131
5.2.2 層級展示 ········································.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ǔ)動效類型有哪些 ···················.134
5.3.1 基礎(chǔ)動效 ········································.134
5.3.2 屬性變化 ········································.135
5.3.3 運(yùn)動節(jié)奏 ········································.135
5.3.4 基礎(chǔ)動效組合應(yīng)用 ····························.136
5.4 認(rèn)識主流交互動效制作軟件
——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 交互動效制作基礎(chǔ) ······················.142
5.5.1 認(rèn)識“時間軸”面板 ·························.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 啟動界面動效 ·······.151
5.5.6 關(guān)于緩動效果 ··································.155
5.6 關(guān)于蒙版動效·····························.157
5.6.1 蒙版動效原理 ··································.157
5.6.2 創(chuàng)建蒙版的工具 ·······························.158
5.6.3 蒙版屬性 ········································.159
實(shí)戰(zhàn)練習(xí)03——制作界面蒙版顯示動效 ········.160
5.6.4 軌道遮罩 ········································.164
實(shí)戰(zhàn)練習(xí)04——制作iOS 系統(tǒng)解鎖文字
遮罩動效 ·························.164
5.7 交互動效的渲染輸出 ···················.167
5.7.1 渲染選項(xiàng)設(shè)置 ··································.167
5.7.2 使用Photoshop 將動效輸出為GIF 文件 ·.169
實(shí)戰(zhàn)練習(xí)05——將動效渲染輸出為GIF
動畫文件 ··························.169
5.7.3 將動效嵌入手機(jī)模板 ·························.172
實(shí)戰(zhàn)練習(xí)06——將動效嵌入手機(jī)模板 ···········.172
5.8 本章小結(jié)···································.174
計(jì)與實(shí)現(xiàn)
6.1 開關(guān)按鈕交互動效 ······················.175
6.1.1 開關(guān)按鈕的功能與特點(diǎn) ······················.175
6.1.2 制作開關(guān)按鈕交互動效 ······················.175
實(shí)戰(zhàn)練習(xí)01——制作開關(guān)按鈕交互動效 ········.175
6.2 加載進(jìn)度交互動效 ······················.179
6.2.1 了解加載等待動效 ····························.179
6.2.2 常見的加載進(jìn)度動效表現(xiàn)形式 ·············.180
6.2.3 制作矩形進(jìn)度條動效 ·························.181
實(shí)戰(zhàn)練習(xí)02——制作矩形進(jìn)度條動效 ···········.181
6.3 文字交互動效·····························.185
6.3.1 文字動效的表現(xiàn)優(yōu)勢 ·························.185
6.3.2 常見的文字動效表現(xiàn)形式 ···················.186
6.3.3 制作手寫文字動效 ····························.189
實(shí)戰(zhàn)練習(xí)03——制作手寫文字動效 ··············.189
6.4 圖標(biāo)交互動效·····························.194
6.4.1 常見的圖標(biāo)動效表現(xiàn)形式 ···················.194
6.4.2 制作圖標(biāo)路徑變換動效 ······················.197
實(shí)戰(zhàn)練習(xí)04——制作圖標(biāo)路徑變換動效 ········.197
6.4.3 圖標(biāo)工具欄交互動效 ·························.203
6.4.4 制作工具圖標(biāo)動感展開動效 ················.203
實(shí)戰(zhàn)練習(xí)05——制作工具圖標(biāo)動感展開動效 ··.204
6.5 導(dǎo)航菜單交互動效 ······················.208
6.5.1 交互式導(dǎo)航菜單的優(yōu)勢 ······················.208
6.5.2 交互式導(dǎo)航菜單的設(shè)計(jì)要點(diǎn) ················.209
6.5.3 制作側(cè)滑交互導(dǎo)航菜單動效 ················.210
實(shí)戰(zhàn)練習(xí)06——制作側(cè)滑交互導(dǎo)航菜單動效 ··.210
6.6 UI交互動效································.213
6.6.1 UI 交互動效的作用 ···························.213
6.6.2 常見的UI 交互動效表現(xiàn)形式 ··············.216
6.6.3 制作火箭加載等待動效 ······················.220
實(shí)戰(zhàn)練習(xí)07——制作火箭加載等待動效 ········.220
6.7 UI轉(zhuǎn)場交互動效··························.225
6.7.1 常見的UI 轉(zhuǎn)場動效形式 ····················.225
6.7.2 UI 轉(zhuǎn)場交互動效設(shè)計(jì)要求 ··················.229
6.8 UI交互動效設(shè)計(jì)規(guī)范 ···················.232
6.8.1 UI 交互動效設(shè)計(jì)要點(diǎn) ························.232
6.8.2 通過交互動效設(shè)計(jì)提升UI 用戶體驗(yàn) ·······.234
6.8.3 制作登錄轉(zhuǎn)場動效 ····························.237
實(shí)戰(zhàn)練習(xí)08——制作登錄轉(zhuǎn)場動效 ··············.237
6.9 本章小結(jié)···································.246__