第1章　移動UI交互設計基礎　001
1．1　了解UI設計 /　001
1．1．1　什么是UI設計 /　001
1．1．2　移動UI設計 /　001
1．1．3　移動UI設計的特點 /　002
1．2　了解移動UI交互設計 /　003
1．2．1　什么是交互 /　003
1．2．2　什么是交互設計 /　003
1．2．3　移動UI交互的特點 /　004
1．2．4　了解交互設計師 /　005
1．3　移動UI交互設計需要考慮的內容和用戶因素 /　006
1．3．1　需要考慮的內容 /　006
1．3．2　需要考慮的用戶因素 /　006
1．3．3　交互設計與用戶體驗 /　007
1．4　移動 UI 交互設計的基本流程 /　008
1．5　需求分析 /　008
1．5．1　主動需求與被動需求 /　008
1．5．2　需求分析的流程 /　009
1．6　操作流程設計 /　010
1．6．1　操作流程的分類 /　010
1．6．2　操作流程的設計原則 /　011
1．7　信息架構設計 /　013
021　CONTENTS
1．7．1　信息架構概述 /　013
1．7．2　信息架構的設計方法 /　013
1．8　原型設計 /　015
1．8．1　原型設計概述 /　015
1．8．2　原型設計的流程 /　016
1．9　練習題 /　017
第2章　UI元素交互設計　018
2．1　文字 /　018
2．1．1　關于文字交互 /　018
2．1．2　UI中的字體應用 /　019
2．1．3　控制字體數量 /　020
2．1．4　體現文字的層次感 /　020
2．1．5　文字排版方式 /　021
2．2　圖標 /　023
2．2．1　圖標的作用 /　023
2．2．2　圖標的表現形式及其適用場景 /　024
2．2．3　實戰——設計相機應用圖標 /　027
2．3　圖標的意義 /　030
2．3．1　預見性 /　030
2．3．2　美觀性 /　031
2．3．3　統一性 /　031
2．3．4　保持圖標統一的方法 /　032
2．3．5　實戰——設計線框功能圖標 /　033
2．4　按鈕 /　037
2．4．1　真正的按鈕與偽按鈕 /　038
2．4．2　常見交互按鈕樣式及其
應用場景　/　038
2．4．3　設計出色的交互按鈕的方法 /　040
2．4．4　實戰——設計微漸變按鈕 /　042
2．5　圖片 /　045
2．5．1　常用的圖片比例 /　045
2．5．2　常見的圖片排版方式 /　046
2．5．3　實戰——設計圖片展示界面 /　048
2．6　導航 /　052
2．6．1　底部標簽式導航 /　052
2．6．2　舵式導航 /　052
2．6．3　選項卡式導航 /　053
2．6．4　側邊式導航 /　055
2．6．5　實戰——設計側邊交互導航界面 /　055
2．7　表單 /　058
2．7．1　文本輸入表單元素 /　058
2．7．2　搜索表單的常見表現形式 /　060
2．7．3　搜索表單的不同交互狀態 /　062
2．7．4　實戰——設計登錄界面 /　064
2．8　練習題 /　067
第3章　交互設計與用戶體驗　069
3．1　用戶體驗與交互設計的
基本知識　/　069
3．1．1　用戶體驗概述 /　069
3．1．2　基礎體驗類型 /　069
3．1．3　交互設計的作用 /　071
3．1．4　交互設計的5個要素 /　072
3．2　界面交互設計 /　073
3．2．1　交互設計模式 /　073
3．2．2　提升轉化率 /　074
3．2．3　獨特的UI交互技巧 /　076
3．3　可用性設計 /　077
3．3．1　什么是可用性 /　077
3．3．2　可用性的表現 /　078
3．3．3　實戰——使用Adobe XD設計影視App
界面　/　078
3．4　沉浸感設計 /　083
3．4．1　什么是沉浸感 /　083
3．4．2　沉浸感的設計原則 /　083
3．4．3　實戰——使用Adobe XD設計美食App
界面　/　085
3．5　情感化設計 /　089
3．5．1　什么是情感化設計 /　089
3．5．2　互聯網產品的情感化設計 /　090
3．5．3　UI情感化設計細節 /　091
3．5．4　實戰——使用Adobe XD設計音樂App界面 /　094
3．6　優秀 UI 交互設計具有的特點 /　101
3．6．1　明確系統狀態 /　101
3．6．2　有觸感 /　101
3．6．3　有意義的轉場動效 /　102
3．6．4　引導用戶 /　103
3．6．5　強調界面的變化 /　103
3．6．6　需要注意的細節 /　103
3．7　網站 UI 與移動 UI 的差異 /　104
3．7．1　設備尺寸不同 /　104
3．7．2　交互方式不同 /　105
3．7．3　使用環境不同 /　106
3．7．4　網絡環境不同 /　106
3．7．5　基于位置服務的精細度不同 /　106
3．7．6　實戰——使用Adobe XD設計家具
App界面　/　107
3．8　練習題 /　116
第4章　UI元素交互動效　117
4．1　交互動效 /　117
4．1．1　交互動效概述 /　117
4．1．2　優秀交互動效具有的特點 /　118
4．1．3　交互動效的優點 /　118
4．1．4　功能型動效和展示型動效 /　120
4．2　使用動效表現 UI 交互 /　121
4．2．1　轉場過渡 /　121
4．2．2　層級展示 /　122
4．2．3　空間擴展 /　122
4．2．4　關注聚焦 /　123
4．2．5　內容呈現 /　123
4．2．6　操作反饋 /　124
4．3　開關按鈕交互動效 /　124
4．3．1　開關按鈕的功能與特點 /　124
4．3．2　實戰——制作開關按鈕交互動效 /　125
4．4　加載交互動效 /　130
4．4．1　了解加載交互動效 /　130
4．4．2　加載交互動效的常見表現形式 /　131
4．4．3　實戰——制作加載等待動效 /　132
4．5　文字交互動效 /　136
4．5．1　文字交互動效的表現優勢 /　136
4．5．2　文字交互動效的常見表現形式 /　137
4．5．3　實戰——制作動感遮罩文字
交互動效　/　139
4．6　圖標交互動效 /　146
4．6．1　圖標交互動效的常見表現方法 /　146
4．6．2　實戰——設計相機App啟動圖標的
動效　/　148
4．6．3　實戰——制作線框圖標的動效 /　155
4．7　導航菜單交互動效 /　161
4．7．1　導航菜單交互動效的優勢 /　161
4．7．2　導航菜單交互動效的設計要點 /　162
4．7．3　實戰——制作側滑式導航菜單交互動效 /　163
4．8　練習題 /　169
第5章　界面交互動效　171
5．1　設計界面交互動效 /　171
5．1．1　擁有一個出色的想法 /　171
5．1．2　實現想法 /　172
5．1．3　實戰——制作智能家居App界面的轉場動效 /　173
5．2　界面交互動效的表現形式 /　180
5．2．1　界面交互動效的常見表現形式 /　180
5．2．2　實戰——制作界面功能展開動效 /　184
5．3　界面轉場交互動效 /　190
5．3．1　界面轉場交互動效的常見形式 /　190
5．3．2　界面轉場交互動效的設計要求 /　193
5．3．3　實戰——制作登錄轉場交互動效 /　196
5．4　界面交互動效的設計規范 /　204
5．4．1　界面交互動效的設計要點 /　204
5．4．2　通過交互動效設計提升用戶體驗 /　207
5．4．3　實戰——制作圖片翻頁交互動效 /　210
5．5　練習題 /　219