移動UI交互設(shè)計與動效制作（微課版）

第1章　移動UI交互設(shè)計基礎(chǔ)　001
1.1　了解UI設(shè)計 /　001
1.1.1　什么是UI設(shè)計 /　001
1.1.2　移動UI設(shè)計 /　001
1.1.3　移動UI設(shè)計的特點 /　002
1.2　了解移動UI交互設(shè)計 /　003
1.2.1　什么是交互 /　003
1.2.2　什么是交互設(shè)計 /　003
1.2.3　移動UI交互的特點 /　004
1.2.4　了解交互設(shè)計師 /　005
1.3　移動UI交互設(shè)計需要考慮的內(nèi)容和用戶因素 /　006
1.3.1　需要考慮的內(nèi)容 /　006
1.3.2　需要考慮的用戶因素 /　006
1.3.3　交互設(shè)計與用戶體驗 /　007
1.4　移動 UI 交互設(shè)計的基本流程 /　008
1.5　需求分析 /　008
1.5.1　主動需求與被動需求 /　008
1.5.2　需求分析的流程 /　009
1.6　操作流程設(shè)計 /　010
1.6.1　操作流程的分類 /　010
1.6.2　操作流程的設(shè)計原則 /　011
1.7　信息架構(gòu)設(shè)計 /　013
021　CONTENTS
1.7.1　信息架構(gòu)概述 /　013
1.7.2　信息架構(gòu)的設(shè)計方法 /　013
1.8　原型設(shè)計 /　015
1.8.1　原型設(shè)計概述 /　015
1.8.2　原型設(shè)計的流程 /　016
1.9　練習題 /　017
第2章　UI元素交互設(shè)計　018
2.1　文字 /　018
2.1.1　關(guān)于文字交互 /　018
2.1.2　UI中的字體應(yīng)用 /　019
2.1.3　控制字體數(shù)量 /　020
2.1.4　體現(xiàn)文字的層次感 /　020
2.1.5　文字排版方式 /　021
2.2　圖標 /　023
2.2.1　圖標的作用 /　023
2.2.2　圖標的表現(xiàn)形式及其適用場景 /　024
2.2.3　實戰(zhàn)——設(shè)計相機應(yīng)用圖標 /　027
2.3　圖標的意義 /　030
2.3.1　預見性 /　030
2.3.2　美觀性 /　031
2.3.3　統(tǒng)一性 /　031
2.3.4　保持圖標統(tǒng)一的方法 /　032
2.3.5　實戰(zhàn)——設(shè)計線框功能圖標 /　033
2.4　按鈕 /　037
2.4.1　真正的按鈕與偽按鈕 /　038
2.4.2　常見交互按鈕樣式及其
應(yīng)用場景　/　038
2.4.3　設(shè)計出色的交互按鈕的方法 /　040
2.4.4　實戰(zhàn)——設(shè)計微漸變按鈕 /　042
2.5　圖片 /　045
2.5.1　常用的圖片比例 /　045
2.5.2　常見的圖片排版方式 /　046
2.5.3　實戰(zhàn)——設(shè)計圖片展示界面 /　048
2.6　導航 /　052
2.6.1　底部標簽式導航 /　052
2.6.2　舵式導航 /　052
2.6.3　選項卡式導航 /　053
2.6.4　側(cè)邊式導航 /　055
2.6.5　實戰(zhàn)——設(shè)計側(cè)邊交互導航界面 /　055
2.7　表單 /　058
2.7.1　文本輸入表單元素 /　058
2.7.2　搜索表單的常見表現(xiàn)形式 /　060
2.7.3　搜索表單的不同交互狀態(tài) /　062
2.7.4　實戰(zhàn)——設(shè)計登錄界面 /　064
2.8　練習題 /　067
第3章　交互設(shè)計與用戶體驗　069
3.1　用戶體驗與交互設(shè)計的
基本知識　/　069
3.1.1　用戶體驗概述 /　069
3.1.2　基礎(chǔ)體驗類型 /　069
3.1.3　交互設(shè)計的作用 /　071
3.1.4　交互設(shè)計的5個要素 /　072
3.2　界面交互設(shè)計 /　073
3.2.1　交互設(shè)計模式 /　073
3.2.2　提升轉(zhuǎn)化率 /　074
3.2.3　獨特的UI交互技巧 /　076
3.3　可用性設(shè)計 /　077
3.3.1　什么是可用性 /　077
3.3.2　可用性的表現(xiàn) /　078
3.3.3　實戰(zhàn)——使用Adobe XD設(shè)計影視App
界面　/　078
3.4　沉浸感設(shè)計 /　083
3.4.1　什么是沉浸感 /　083
3.4.2　沉浸感的設(shè)計原則 /　083
3.4.3　實戰(zhàn)——使用Adobe XD設(shè)計美食App
界面　/　085
3.5　情感化設(shè)計 /　089
3.5.1　什么是情感化設(shè)計 /　089
3.5.2　互聯(lián)網(wǎng)產(chǎn)品的情感化設(shè)計 /　090
3.5.3　UI情感化設(shè)計細節(jié) /　091
3.5.4　實戰(zhàn)——使用Adobe XD設(shè)計音樂App界面 /　094
3.6　 UI 交互設(shè)計具有的特點 /　101
3.6.1　明確系統(tǒng)狀態(tài) /　101
3.6.2　有觸感 /　101
3.6.3　有意義的轉(zhuǎn)場動效 /　102
3.6.4　引導用戶 /　103
3.6.5　強調(diào)界面的變化 /　103
3.6.6　需要注意的細節(jié) /　103
3.7　網(wǎng)站 UI 與移動 UI 的差異 /　104
3.7.1　設(shè)備尺寸不同 /　104
3.7.2　交互方式不同 /　105
3.7.3　使用環(huán)境不同 /　106
3.7.4　網(wǎng)絡(luò)環(huán)境不同 /　106
3.7.5　基于位置服務(wù)的精細度不同 /　106
3.7.6　實戰(zhàn)——使用Adobe XD設(shè)計家具
App界面　/　107
3.8　練習題 /　116
第4章　UI元素交互動效　117
4.1　交互動效 /　117
4.1.1　交互動效概述 /　117
4.1.2　 交互動效具有的特點 /　118
4.1.3　交互動效的優(yōu)點 /　118
4.1.4　功能型動效和展示型動效 /　120
4.2　使用動效表現(xiàn) UI 交互 /　121
4.2.1　轉(zhuǎn)場過渡 /　121
4.2.2　層級展示 /　122
4.2.3　空間擴展 /　122
4.2.4　關(guān)注聚焦 /　123
4.2.5　內(nèi)容呈現(xiàn) /　123
4.2.6　操作反饋 /　124
4.3　開關(guān)按鈕交互動效 /　124
4.3.1　開關(guān)按鈕的功能與特點 /　124
4.3.2　實戰(zhàn)——制作開關(guān)按鈕交互動效 /　125
4.4　加載交互動效 /　130
4.4.1　了解加載交互動效 /　130
4.4.2　加載交互動效的常見表現(xiàn)形式 /　131
4.4.3　實戰(zhàn)——制作加載等待動效 /　132
4.5　文字交互動效 /　136
4.5.1　文字交互動效的表現(xiàn)優(yōu)勢 /　136
4.5.2　文字交互動效的常見表現(xiàn)形式 /　137
4.5.3　實戰(zhàn)——制作動感遮罩文字
交互動效　/　139
4.6　圖標交互動效 /　146
4.6.1　圖標交互動效的常見表現(xiàn)方法 /　146
4.6.2　實戰(zhàn)——設(shè)計相機App啟動圖標的
動效　/　148
4.6.3　實戰(zhàn)——制作線框圖標的動效 /　155
4.7　導航菜單交互動效 /　161
4.7.1　導航菜單交互動效的優(yōu)勢 /　161
4.7.2　導航菜單交互動效的設(shè)計要點 /　162
4.7.3　實戰(zhàn)——制作側(cè)滑式導航菜單交互動效 /　163
4.8　練習題 /　169
第5章　界面交互動效　171
5.1　設(shè)計界面交互動效 /　171
5.1.1　擁有一個出色的想法 /　171
5.1.2　實現(xiàn)想法 /　172
5.1.3　實戰(zhàn)——制作智能家居App界面的轉(zhuǎn)場動效 /　173
5.2　界面交互動效的表現(xiàn)形式 /　180
5.2.1　界面交互動效的常見表現(xiàn)形式 /　180
5.2.2　實戰(zhàn)——制作界面功能展開動效 /　184
5.3　界面轉(zhuǎn)場交互動效 /　190
5.3.1　界面轉(zhuǎn)場交互動效的常見形式 /　190
5.3.2　界面轉(zhuǎn)場交互動效的設(shè)計要求 /　193
5.3.3　實戰(zhàn)——制作登錄轉(zhuǎn)場交互動效 /　196
5.4　界面交互動效的設(shè)計規(guī)范 /　204
5.4.1　界面交互動效的設(shè)計要點 /　204
5.4.2　通過交互動效設(shè)計提升用戶體驗 /　207
5.4.3　實戰(zhàn)——制作圖片翻頁交互動效 /　210
5.5　練習題 /　219