寫給設計師的技術書：從智能終端到感知交互

第 1 章 設計師為什麼要懂技術

1.1　原因一：行業的改變和進步 2

1.1.1　海外懂技術的設計師好像有點多 2

1.1.2　我們期待你是全鏈路設計師 2

1.1.3　因特網泡沫、新一代設計師和人工智能同時帶來的挑戰 3

1.1.4 AR/VR、車聯網、智能硬件等新賽道的出現 4

1.1.5　政策對於設計師的影響 5

1.2　原因二：技術和設計之間有著密切的關系 5

1.2.1　技術、設計和創新之間的關系 6

1.2.2　技術、設計和用戶之間的關系 8

1.2.3　自然無感交互的背後都是技術和設計的融合 10

1.3　原因三：設計過程中需要考慮技術 11

1.3.1　前期調研 11

1.3.2　方案設計 12

1.3.3　設計評審和開發跟進 

第 2 章 必須掌握的計算思維

2.1　計算思維是什麼 16

2.1.1　抽象 17

2.1.2　分解 18

2.1.3　模式識別 20

2.1.4　算法 21

2.2　設計過程中如何運用計算思維 23

2.2.1　同理心 24

2.2.2　定義問題 24

2.2.3　創意構思 25

2.2.4　原型製作 26

2.2.5　測試 26

2.3　計算思維對於設計師的重要性 28

第 3 章 學會從架構的角度理解技術

3.1　利用 MVC 架構模式思考界面的設計 32

3.1.1　應用的軀殼—視圖 33

3.1.2　應用的核心—模型 34

3.1.3　交互的決策—控制器 36

3.2　如何結合技術提升應用的用戶體驗 38

3.2.1　從接口的角度構建用戶體驗 38

3.2.2　從控件的角度設計用戶體驗 41

3.2.3　從設計的角度解決性能問題 43

3.2.4　如何看待應用的啟動和狀態恢復 50

第 4 章 如何為跨設備交互進行設計

4.1　設計界面佈局時的註意事項 54

4.1.1　應用設計需要考慮的平臺和狀態 54

4.1.2　看不見的“邊界” 62

4.1.3　動態佈局的設計要點 64

4.2　如何針對不同平臺的特點進行設計 69

4.2.1　基於不同平臺的特點和規範去設計 69

4.2.2　構建靈活的動態佈局框架 72

4.2.3　動態佈局中的界面層級變化 75

4.2.4　以平板電腦為橋梁打通移動端和桌面端的設計 83

4.2.5　兼容不同平臺、設備的差異和特點 88

4.3　動態佈局中的交互方式 90

4.3.1　關註不同的交互方式 90

4.3.2　數據互通的重要性 96

4.3.3　淺談跨設備和跨應用之間交互的基礎體驗要求 97

第 5 章 基於人工智能的設計

5.1　人工智能基礎知識 101

5.1.1　人工智能模型，有多少人工就有多少智能 101

5.1.2　基於預測的人工智能 103

5.1.3　人工智能模型的註意事項 106

5.2　人工智能如何影響界面設計 110

5.2.1　搜索、製作素材和內容 110

5.2.2　人工智能對界面的影響 113

5.3　基於意圖的交互設計 117

5.3.1　蘋果對於智能交互的理解 117

5.3.2　蘋果的 Intelligence 和 Donate 121

5.3.3　蘋果的其他計劃 123

5.4　基於人工智能的設計事項 124

5.4.1　合理地收集數據和優化模型 124

5.4.2　基於可解釋性構建合理的人機信任 125

5.4.3　交互過程的註意事項 126

5.5　智能設計：基於“準確率”和“兜底”的設計 129

第 6 章 姿態和手勢識別

6.1　電腦視覺 135

6.1.1　電腦視覺的重要性 135

6.1.2　簡單瞭解電腦視覺背後的技術細節 136

6.2　姿態和手勢識別在不同領域的作用 138

6.2.1　體感遊戲和健身 138

6.2.2　控制智能設備 139

6.2.3　智能座艙 140

6.3　實現姿態識別的不同技術 140

6.3.1　攝像頭 140

6.3.2　慣性傳感器 144

6.4　實現手勢識別的不同技術 146

6.4.1　攝像頭 146

6.4.2　數據手套 147

6.4.3　肌電傳感器 148

6.4.4　毫米波雷達、超聲波和其他 149

6.5　實現姿態和手勢識別的設計註意事項 152

6.5.1　為什麼選擇手勢識別和姿態識別 152

6.5.2　隱私是否為第一考慮對象 152

6.5.3　算力是否足夠 153

6.5.4　檢測距離和安裝位置 153

6.5.5　場景對模型的挑戰 154

6.5.6　關鍵點的缺失和抖動 154

6.5.7　基於人體工程學進行設計 155

6.5.8　姿態識別需要考慮不同人群身體細節的不同 155

6.5.9　部分手勢的初始態很重要 156

6.5.10　反復運動帶來的問題 156

6.5.11　考慮文化的差異 157

6.6　設計拆解：AI 健身的實現和優化 157

6.7　姿態和手勢識別的設計工具箱 163

第 7 章 人臉識別和追蹤

7.1　人臉識別的不同作用 166

7.1.1　身份識別 166

7.1.2　臉部復刻 166

7.1.3　表情識別和交互 168

7.1.4　其他作用 168

7.2　人臉追蹤和識別的技術細節 169

7.2.1　人臉追蹤 169

7.2.2　人臉識別 173

7.3　實時人臉識別的設計註意事項 175

7.3.1　環境等因素的影響 175

7.3.2　表情互動存在的問題 177

7.4　設計拆解：人臉識別閘機的設計 178

7.5　設計拆解：表情設計和互動 180

7.6　人臉識別和追蹤的設計工具箱 184

第 8 章 眼動追蹤

8.1　眼動追蹤在不同領域的作用 188

8.1.1　用戶研究 188

8.1.2　智能座艙 189

8.1.3　虛擬現實和增強現實 190

8.1.4　信息無障礙 191

8.2　眼動追蹤的技術原理和區別 191

8.3　眼動追蹤的設計註意事項 195

8.3.1　攝像頭擺放位置和用戶穿著打扮的影響 195

8.3.2　使用前需要校準 195

8.3.3　頭部運動的影響 197

8.3.4　眼動追蹤誤差帶來的影響 197

8.3.5　視線運動不代表用戶想要的 198

8.4　設計拆解：Tobii 眼動儀和 GUI 的配合 199

8.5　眼動追蹤的設計工具箱 203

第 9 章 感知、互聯和追蹤

9.1　不同的技術方案和案例 208

9.1.1 RFID 和 NFC 208

9.1.2 Wi-Fi 和藍牙 211

9.1.3 UWB 213

9.1.4　紅外線和 ZigBee 214

9.1.5 SLAM 215

9.2　設備感知、互聯和追蹤的設計註意事項 216

9.2.1　硬件的約束條件 216

9.2.2　如何綁定新設備 218

9.2.3　信號強弱和精度 219

9.2.4　基於場景的觸發 220

9.3　設計拆解：蘋果的設備互聯是如何實現的 223

9.4　設備感知、互聯和追蹤的總結 227

第 10 章 未來設計方向存在的挑戰

10.1　智能座艙 229

10.1.1　算力是體驗的最大瓶頸 229

10.1.2　難以遍歷完整的駕駛任務 230

10.1.3　人因工程學的幫助和挑戰 233

10.2　虛擬現實 237

10.2.1 20 毫秒的制約 237

10.2.2　錯誤的細節都會引起不適 239

10.3　基於頭戴設備的增強現實 240

10.3.1　配準誤差難以完全控制 240

10.3.2　深度知覺帶來的影響 241

10.4　數字人 243

10.4.1　建模和渲染之間的平衡 243

10.4.2　如何驅動數字人是關鍵 245

10.5　空間交互 248

10.5.1　攝像頭、傳感器的精度是否支撐設備的交互行為 248

10.5.2　隱私問題帶來的影響 249

10.5.3　場景的復雜度 250

10.5.4　普適計算幾時能到來 253

10.6　結語：實現元宇宙的難度有多大 254