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