写给设计师的技术书：从智能终端到感知交互

随着人机交互和AI技术的快速发展，设计师需要从基于屏幕的图形用户界面设计思维，转变为空间交互及智能交互的设计思维。

本书从设计师要懂技术的原因讲起，引导设计师结合技术去思考设计，并针对跨设备交互设计、基于AI的设计及各种传感技术（姿态和手势识别、人脸识别和追踪、眼动追踪等）进行解读与案例分析，帮助设计师更好地应对未来的工作挑战。

本书适合设计师及相关专业的学生阅读，也可供想往新领域转行的人士学习参考。

大家好，我是《AI改变设计》和《前瞻交互》的作者薛志荣，这次带来的是我的第三本书《写给设计师的技术书》。写这本书的初衷是我在工作初期有一个较大的困惑：为什么身边的设计师在做方案时不考虑技术是否支持自己的设计？

很多产品经理和设计师给到的回复是：先不用管技术能不能做到，优先把最佳方案设计出来，再推动工程师实现这个方案就行。当时，拥有计算机背景的我对这个回复是持怀疑态度的，既然我知道这个设计方案技术难度大或者实现成本高，工程师没时间也不太愿意做出来，那我为什么要坚持这个设计方案？

在后续的工作经历里我几乎每天都在和上下游打交道，随着时间的推移，我发现在做设计方案时考虑技术实现方案和成本，让我的设计稿能比其他设计师更顺利地通过评审，原因在于开发人员不会在评审阶段告知我做不了（当然前提是我的设计方案得到了产品经理和设计师的认可），这有效提升了我的工作效率，可以不再花大量时间改稿和沟通。因此，设计师懂技术还真的挺好的。

在2020—2022年，我去了一家企业的人机交互实验室做设计与研究，这才发现如果实验室里的设计师不懂技术，那基本做不出什么东西来。为什么？因为各种设计创新的背后都需要有技术的支撑，而且在日常工作中我们都需要经常和技术人员进行交流。如果不懂技术盲目做设计方案，结果大概率只有两个：无从下手和自娱自乐。所以，设计师懂技术真的很重要。

因此，写这本书的第一个目的是帮助设计师更好地理解技术，让设计师在做方案时更有理有据；第二个目的是告诉设计师其实技术并不可怕，并不是懂代码才算懂技术；第三个目的是希望有更多设计师能发现技术带来的乐趣，这说不定能激发出更多的灵感。

接下来我介绍一下这本书的大概内容：本书前两章介绍了设计师为什么要懂技术，以及最需要掌握的计算思维是什么；第3、4章重点介绍软件开发以及跨设备交互设计中有哪些技术细节需要设计师关注；第5～9章重点介绍智能设计中各种算法和传感器的技术基础和设计注意事项；第10章列举了智能座舱、虚拟现实、数字人等领域未解决的技术难题，这些问题在未来数年里都会影响设计和体验。

我认为，2023年对于设计师来说是开启新篇章的一年，无论是AICG、Web 3还是XR都将为设计师带来新的机会点，只是看我们有没有能力抓住这些机会点。尤其是XR方向，2022年11月1日工业和信息化部、教育部、文化和旅游部、国家广播电视总局、国家体育总局联合发布了《虚拟现实与行业应用融合发展行动计划（2022—2026年）》，这大大增强了XR从业人员对未来的信心。报告指出感知交互技术对于关键技术融合创新工程的重要性，而感知交互技术中涉及的全身动捕、手势追踪、表情追踪和眼动追踪技术会在第6～8章介绍，希望这些内容能对读者有所启发和帮助。

薛志荣

2022年12月8日

第 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