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

《移動UI互動設計與動效製作（微課版）》是2023年人民郵電出版社出版的圖書。

基本介紹

• 中文名：移動UI互動設計與動效製作（微課版）
• 作者：劉倫，王璞
• 出版時間：2023年4月1日
• 出版社：人民郵電出版社
• ISBN：9787115609854

內容簡介

互動設計與動效製作可以拓展UI的空間內容，簡化引導流程，降低UI操作的學習成本，更重要的是能夠給用戶帶來意想不到的驚喜。 本書共分為5章，全書內容豐富、結構嚴謹、圖文並茂，循序漸進地講解了移動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