第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　優(yōu)秀 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　優(yōu)秀交互動效具有的特點 /　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