移動UI交互設計與動效製作（微課版）

交互設計與動效製作可以拓展UI的空間內容，簡化引導流程，降低UI操作的學習成本，更重要的是能夠給用戶帶來意想不到的驚喜。 本書共分為5章，全書內容豐富、結構嚴謹、圖文並茂，循序漸進地講解了移動UI交互設計基礎、UI元素交互設計、交互設計與用戶體驗、UI元素交互動效和界面交互動效的相關內容，並且通過對大量案例的講解，使讀者能夠輕松掌握UI設計和交互動效的設計與製作方法，全面提升讀者的交互設計水平，達到學以致用的目的。本書不但提供了本書所有實例的源文件和素材，還提供了所有案例的多媒體教學視頻，以幫助讀者更好地學習並掌握本書所講解的內容。 本書適合作為數字媒體、藝術設計相關專業的教材，也可以作為各類在職設計人員在實際UI設計工作中的參考用書。

张晓景,资深数字媒体专家,具有多年UI设计相关的教学经验，写作经验丰富，出版过多本UI相关教材，受到了广大院校师生的好评。

第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