步步為贏

本書以互聯網公司中交互設計的完整流程為基礎，涵蓋了設計師在設計方案過程中的所有環節。本書將交互設計理論知識和設計方法與真實案例結合，系統介紹應用性較強的交互設計方法論，共分為4篇12章，在每章的末尾都設置了思考題，幫助讀者更好地理解所學內容，希望讀者能夠真正做到學以致用。思考題的答案，請關注“沐風與體驗設計”，在底部菜單“步步為贏→參考答案”中獲取，亦可在公眾號回覆關鍵詞“參考答案”。

本書融合了國內外的交互設計理論知識與作者作為交互設計師的多年工作經驗，適合初級交互設計師及希望學習、掌握交互設計知識的視覺設計師、產品經理和運營人員閲讀。

本書可供從事交互設計及相關專業的人員進行產品設計時學習使用，也可作為高等院校相關專業的教材和參考書。 ^[1] 

第一篇　理解交互設計

第1章　初學乍練——幫你把握大方向 / 002

1.1 設計中的交互設計 / 003

1.1.1 設計的目的：滿足需要 / 003

1.1.2 什麼是交互設計 / 006

1.2 如何學習交互設計 / 010

1.2.1 互聯網產品開發流程 / 010

1.2.2 交互設計師的必備技能 / 013

1.2.3 交互設計的學習方法 / 016

1.2.4 大型公司交互設計師招聘職位分析 / 017

思考題 / 019

第2章　登堂入室——目標用户和場景 / 021

2.1 確定目標用户 / 022

2.2 場景思維 / 025

2.2.1 什麼是場景 / 025

2.2.2 描述場景的公式 / 027

2.2.3 場景的分類 / 028

2.3 用户場景地圖 / 031

思考題 / 036

第3章　漸入佳境——心智模型和習慣 / 037

3.1 心智模型 / 038

3.1.1 什麼是心智模型 / 038

3.1.2 心智模型與表現模型 / 040

3.1.3 心智模型的概括方法 / 043

3.2 用户習慣 / 045

思考題 / 046

第二篇　設計分析

第4 章　駕輕就熟——設計目標面面觀 / 047

4.1 什麼是設計目標 / 048

4.1.1 產品目標 / 048

4.1.2 用户目標 / 056

4.2 為什麼需要設計目標 / 057

4.2.1 設計時有的放矢 / 057

4.2.2 更容易得到團隊和用户的認可 / 057

4.2.3 設計效果更容易驗證 / 058

4.3 案例分析——如何確定設計

目標 / 059

思考題 / 060

第5 章　取長補短——競品分析有方法 / 061

5.1 為什麼要做競品分析 / 062

5.2 競品分析的維度 / 062

5.3 如何選擇競品 / 063

5.4 競品分析的方法 / 063

5.4.1 流程走查法 / 064

5.4.2 表格法 / 066

5.4.3 借鑑法 / 068

思考題 / 068

第6 章　略有小成——設計流程有公式 / 070

6.1 如何畫流程圖 / 071

6.1.1 畫流程圖的原則 / 071

6.1.2 畫流程圖的工具 / 072

6.2 設計流程的萬能公式 / 073

6.2.1 發現 / 077

6.2.2 瞭解 / 081

6.2.3 操作 / 084

6.2.4 跟進 / 085

6.2.5 案例 / 086

思考題 / 087

第7 章　心領神會——設計原則有遵循 / 089

7.1 一致性 / 090

7.1.1 一致性原則對於用户的作用 / 090

7.1.2 一致性原則對於產品的作用 / 091

7.1.3 一致性原則的運用 / 091

7.2 容錯性 / 094

7.2.1 操作前的預防 / 094

7.2.2 操作中的提醒 / 095

7.2.3 操作後的解決辦法 / 097

7.3 使用正確的意符 / 098

7.3.1 意符的概念 / 098

7.3.2 注意文案的運用 / 099

7.4 即時反饋 / 101

7.5 通用設計原則 / 104

思考題 / 108

第8 章　融會貫通——設計規範有標準 / 109

8.1 提示框 / 110

8.1.1 Material Design 設計規範 / 110

8.1.2 iOS 設計規範 / 111

練習題 / 113

8.2 警告框 / 113

8.2.1 Material Design 設計規範 / 114

8.2.2 iOS 設計規範 / 116

練習題 / 117

8.3 底部模態浮層 / 117

8.3.1 Material Design 設計規範 / 117

8.3.2 iOS 設計規範 / 120

練習題 / 123

8.4 底部固定浮層 / 123

8.4.1 Material Design 設計規範 / 123

8.4.2 iOS 設計規範 / 125

練習題 / 127

8.5 簡易菜單、簡易對話框和

彈出框 / 127

8.5.1 Material Design 設計規範 / 127

8.5.2 iOS 設計規範 / 131

練習題 / 132

8.6 確認彈框和全屏彈框 / 132

練習題 / 136

8.7 模態 / 136

練習題 / 139

8.8 彈出類控件對比總結 / 139

練習題 / 143

8.9 搜索 / 143

8.9.1 Material Design 設計規範 / 143

8.9.2 iOS 設計規範 / 145

練習題 / 147

8.10 滑動器 / 148

8.10.1 Material Design 設計規範 / 148

8.10.2 iOS 設計規範 / 150

練習題 / 151

8.11 按鈕 / 151

8.11.1 Material Design 設計規範 / 151

8.11.2 iOS 設計規範 / 156

練習題 / 157

8.12 標籤導航和分段控件 / 157

8.12.1 Material Design 設計規範 / 157

8.12.2 iOS 設計規範 / 160

練習題 / 160

8.13 底部導航欄 / 161

8.13.1 Material Design 設計規範 / 161

8.13.2 iOS 設計規範 / 164

練習題 / 165

8.14 抽屜導航 / 165

練習題 / 166

8.15 手勢 / 167

8.15.1 Material Design 設計規範 / 167

8.15.2 iOS 設計規範 / 168

練習題 / 169

8.16 導航設計總結 / 169

8.16.1 Material Design 設計規範 / 170

8.16.2 iOS 設計規範 / 171

練習題 / 173

思考題 / 173

第9 章　登峯造極——原型製作有技巧 / 174

9.1 什麼是交互原型 / 175

9.2 交互原型的作用 / 176

9.3 交互原型的製作 / 176

9.3.1 項目概述 / 176

9.3.2 方案展示 / 177

9.3.3 設計分析 / 180

思考題 / 180

第10 章　出神入化——可用性測試見真章 / 181

10.1 可用性測試介紹 / 182

10.2 正式的可用性測試 / 183

10.2.1 測試前的思考 / 183

10.2.2 製作測試原型 / 184

10.2.3 撰寫測試腳本 / 184

10.2.4 招募測試者 / 185

10.2.5 設置測試環境 / 186

10.2.6 預測試和正式測試 / 187

10.2.7 測試結果統計分析 / 187

10.2.8 可用性測試報告 / 188

10.3 敏捷的可用性測試 / 190

10.3.1 媒介即信息 / 190

10.3.2 設計師自測 / 190

10.3.3 尋找用户進行敏捷測試 / 192

思考題 / 192

第四篇　設計師的自我修養

第11 章　超凡入聖——人人羨慕作品集 / 194

11.1 核心原則 / 195

11.2 作品集示例 / 196

思考題 / 199

第12 章　返璞歸真——活出自己最優秀 / 200

12.1 勤於總結歸納 / 201

12.2 收集優秀案例 / 201

12.3 為自己而工作 / 203

思考題 / 203

參考文獻 / 204 ^[1]