圖解互動設計：UI設計師的必修課

《圖解互動設計：UI設計師的必修課》是化學工業出版社出版圖書。

基本介紹

• 書名：《圖解互動設計：UI設計師的必修課》
• 作者：陳根
• 出版社：化學工業出版社
• 出版時間：2021年3月1日
• 頁數：422 頁
• 開本：16 開
• 裝幀：精裝
• ISBN：9787122367495

內容簡介

本書緊扣用戶界面設計趨勢，主要包括互動設計理論、互動設計的理念與方法、用戶體驗設計、互動設計心理學、用戶需求研究、互動設計的視覺界面設計、網站UI互動設計、移動端互動設計、互動設計團隊等方面的內容。本書旨在普及用戶界面設計的相關理念，全面闡述用戶界面設計在網頁及移動端兩大主流設計領域的具體表現和所需掌握的專業技能。

本書可供UI設計師、互動設計師、用戶體驗專家、網頁設計師等專業人士提高設計技能、開闊視野，也可幫助他們打開創意靈感之門；本書也適合想要從事UI設計相關工作的讀者學習使用；本書還可作為高校和培訓機構平面設計和網頁設計等相關專業的教材和參考書。

目錄

第1章 從“惱人的互動設計”說起001

1.1　淋浴花灑和水龍頭之間的切換003

1.2　洗手間的標誌004

1.3　開關的一致性005

1.4　智慧型手機的接聽按鈕位置007

1.5　“確定”按鈕008

第2章 互動設計理論概述011

2.1　互動設計的“初心”012

2.1.1　互動設計的前世012

2.1.2　互動設計的今生015

2.2　與互動設計相關的一些基本概念017

2.2.1　互動設計的概念017

2.2.2　互動設計體系018

2.2.3　UE——用戶體驗設計019

2.2.4　interaction——互動設計020

2.2.5　HCI——人機互動021

2.2.6　UI——用戶界面022

2.3　互動系統的5個要素024

2.3.1　用戶025

2.3.2　行為和目標025

2.3.3　媒介026

2.3.4　場景026

第3章 互動設計的理念與方法027

3.1　前田約翰（John Maeda）的10個精簡定律028

3.1.1　縮減028

3.1.2　組織與安排029

3.1.3　差異029

3.1.4　感情030

3.1.5　信任031

3.1.6　時間031

3.1.7　學習032

3.1.8　失敗033

3.1.9　脈絡033

3.1.10　唯一033

3.2　本·施耐德（Ben Shneiderman）界面互動設計的8大黃金法則034

3.2.1　一致性034

3.2.2　常用用戶使用快捷操作034

3.2.3　“完結”設計034

3.2.4　提供有用信息的反饋035

3.2.5　提供簡單的錯誤操作的解決方案035

3.2.6　允許撤銷操作035

3.2.7　給用戶掌控感035

3.2.8　減少短時記憶負擔035

3.2.9　本·施耐德的8大黃金法則在蘋果產品設計中的套用036

3.3　互動設計的8大策略支柱039

3.3.1　制約040

3.3.2　反饋042

3.3.3　關聯對應044

3.3.4　能見度046

3.3.5　慣例048

3.3.6　一致性050

3.3.7　個性化051

3.3.8　脆弱環節053

3.4　成功的互動設計要縝密考量的5個“W”因子053

3.4.1　Who——給誰用054

3.4.2　Why——為何用055

3.4.3　Where——在哪裡用056

3.4.4　When——何時使用057

3.4.5　What——如何用058

第4章 用戶體驗設計061

4.1　用戶體驗設計的概念062

4.2　用戶體驗設計的4個基礎062

4.2.1　獨特性063

4.2.2　可實現性066

4.2.3　關聯066

4.2.4　空間066

4.3　用戶體驗設計的5個層面067

4.3.1　用戶體驗設計的5個層面067

4.3.2　5個層面的關係069

4.3.3　需求和問題管理的3個要點071

4.3.4　案例　知乎App用戶體驗設計層次分析071

4.4　用戶體驗的衡量指標078

4.4.1　行為忠誠派079

4.4.2　態度忠誠派079

4.4.3　綜合派081

第5章 互動設計的心理學083

5.1　互動設計的5個認知因素084

5.1.1　感知因素084

5.1.2　視覺因素085

5.1.3　注意因素086

5.1.4　記憶因素087

5.1.5　思維因素088

5.2　記憶與互動設計089

5.2.1　記憶的基本類型089

5.2.2　2個記憶定律091

5.2.3　記憶特點與互動設計原則093

5.2.4　心智模型096

5.2.5　創造利於記憶的用戶體驗的7種訣竅099

5.3　affordance——互動設計界最夯的字103

5.4　產品體驗設計的3大心理效應105

5.4.1　鳥籠效應105

5.4.2　福格行為模型106

5.4.3　心流理論108

5.4.4　沉浸感119

5.5　巴萊特的圖式理論124

5.5.1　圖式理論124

5.5.2　圖式理論的要點125

5.5.3　圖式理論有助於提升遊戲的趣味性126

5.6　普拉切克的情緒心理進化論129

5.7　評估互動設計三個“E”指標131

5.7.1　Effective131

5.7.2　Easy134

5.7.3　Enjoyable140

5.8　障礙設計的4種方法142

5.8.1　可以有效組織用戶思考的障礙143

5.8.2　幫助用戶更好地學習技能的障礙143

5.8.3　能讓用戶感覺更好的障礙144

5.8.4　對質量有提升的障礙145

第6章 用戶需求研究147

6.1　用戶148

6.1.1　用戶研究的目的148

6.1.2　用戶分類148

6.1.3　用戶特徵150

6.2　獲取用戶信息的18個有效方法151

6.2.1　用戶觀察151

6.2.2　問卷153

6.2.3　面談155

6.2.4　實地調查156

6.2.5　知覺地圖156

6.2.6　焦點小組158

6.2.7　親和圖159

6.2.8　拼貼161

6.2.9　關鍵事件法163

6.2.10　文化探測164

6.2.11　用戶模型165

6.2.12　場景描述170

6.2.13　故事板171

6.2.14　情緒板172

6.2.15　期望值測試173

6.2.16　卡片分類法175

6.2.17　眼動追蹤177

6.2.18　套用型用戶故事地圖178

第7章 互動設計的視覺界面設計183

7.1　視覺界面設計概述185

7.1.1　視覺設計的過程185

7.1.2　符號學相關知識187

7.1.3　視覺界面設計的7個組成要素190

7.1.4　視覺設計元素的整合194

7.2　版面編排197

7.2.1　版面編排的設計要點197

7.2.2　視覺界面排版設計4大原則204

7.2.3　案例Facebook改版前後的視覺界面設計對比206

7.3　文案211

7.3.1　互動文案設計的3個原則212

7.3.2　微文案的設計要點214

7.4　字型218

7.4.1　常用的幾種字型219

7.4.2　具有戲劇效果的5種字型222

7.4.3　常用的字號226

7.4.4　常用的字型顏色229

7.4.5　字型細節設計策略229

7.5　色彩233

7.5.1　色彩在互動中的作用233

7.5.2　互動設計中的色彩印象237

7.5.3　用戶界面互動設計的配色243

7.6　圖片262

7.6.1　圖片的位置262

7.6.2　圖片的數量262

7.6.3　圖片的面積264

7.6.4　圖片的組合265

7.6.5　圖片與文字的組合267

7.7　信息圖形設計268

7.7.1　信息圖形設計概述268

7.7.2　信息圖形設計的原因269

7.7.3　信息圖形的分類271

7.7.4　好的信息圖形設計的特點274

7.8　動效設計277

7.8.1　動效的概述277

7.8.2　動效的功能277

7.8.3　動效體驗的12條原則282

7.8.4　動效設計的四種趨勢294

7.9　隱喻300

7.9.1　隱喻的概述300

7.9.2　文案中的隱喻300

7.9.3　設計中的隱喻301

7.9.4　隱喻如何套用301

7.9.5　隱喻的學習303

7.10　套用在視覺界面設計中的10個用戶心理學原理304

7.10.1　80/20規則304

7.10.2　3秒原則307

7.10.3　防錯原則307

7.10.4　費茲定律309

7.10.5　操縱定律312

7.10.6　泰思勒定律315

7.10.7　奧卡姆剃刀原理317

7.10.8　馮·雷斯托夫效應320

7.10.9　系列位置效應320

7.10.10　認知負荷原理321

7.11　視錯覺在互動設計中的套用322

7.11.1　視錯覺的概念322

7.11.2　經典視錯覺與互動設計322

7.11.3　視錯覺在版面設計中的套用336

7.11.4　格式塔理論338

第8章 網站UI互動設計355

8.1　網頁基本概念356

8.2　網站UI設計原則356

8.2.1　以用戶為中心356

8.2.2　視覺美觀357

8.2.3　主題明確357

8.2.4　內容與形式統一361

8.2.5　有機的整體362

8.3　網站UI版式設計的形式美363

8.3.1　主次關係363

8.3.2　虛實對比364

8.3.3　比例尺度365

8.3.4　對稱與均衡365

8.3.5　對比與調和366

8.3.6　節奏和韻律367

8.3.7　量感369

8.3.8　空間感370

8.3.9　尺度感371

8.4　網站UI互動細節設計372

8.4.1　登錄頁372

8.4.2　“關於我們”375

8.4.3　彈窗376

8.4.4　404頁面384

第9章 移動端互動設計387

9.1　移動UI388

9.2　從桌面端到移動端的內容遷移時用戶體驗的最佳化388

9.2.1　每屏只完成一項任務388

9.2.2　精簡併最佳化導航體系389

9.2.3　基於搜尋引擎的設計模式389

9.2.4　更大的字型390

9.2.5　意義清晰的微文案390

9.2.6　去掉不必要的特效391

9.2.7　尺寸適配391

9.3　App的UI互動設計392

9.3.1　App的UI版式設計393

9.3.2　App互動細節設計案例404

第10章 互動設計團隊407

10.1　互動設計師的工作職責408

10.1.1　需求分析階段409

10.1.2　互動設計階段410

10.1.3　視覺設計階段411

10.1.4　開發與測試驗收階段412

10.1.5　蒐集用戶反饋階段412

10.2　互動設計師必備素質412

10.2.1　能力素質要求412

10.2.2　設計體驗感412

10.2.3　專注與激情413

10.2.4　團隊協作415

10.2.5　利用新技術415

10.3　設計記錄415

10.4　互動設計師要知道的問題清單417

10.4.1　召集開局會議時417

10.4.2　對利益關係人訪談時418

10.4.3　用戶調研時418

10.4.4　用戶測試時419

10.4.5　設計評審時420

10.4.6　接受利益關係人的反饋時421

參考文獻422