精华总结！交互设计入门必读书籍《步步为赢》读书笔记

扫一扫
官方手机版

扫一扫
AI创作程序

扫一扫
木子公众号

扫一扫
AI公众号

“设计的美妙之处，在于它能点亮创意的天空。而交互设计是所有设计师都需要具备的一种意识和能力，它能够使你的设计方案便于用户理解和操作，从而快速达成目标，为用户、公司乃至社会创造更多价值。”这是《破茧成蝶》作者刘津给本书写的序里面的一句话。

拓展阅读：

入门基础！3分钟帮新手快速了解交互设计！

交互设计的内容大家对交互设计都有自己的理解，上游产品同学说是画原型做动效，下游 UI 同学说是画线框图，交互同学自嘲是“线框仔”…

我相信每一个 UI 设计师对“交互设计”这个词语都不陌生，可能很多人对它的理解还只是画原型、画线框图，但其实交互设计的知识，在我们制作作品集的时候就已经在运用了。我们去展示一个作品的时候，总少不了对用户画像、使用场景、设计目标和竞品的分析。但是你有没有想过，为什么我们要去讨论用户画像、使用场景、设计目标吗？讨论这些的目的是什么，对我们的设计又有什么帮助？

董尚昊《步步为赢，交互设计全流程解析》这本书，将会通过 9 个交互设计必备技能告诉你，交互设计是什么，交互设计应该怎么做。他在序言里说——希望这本书，可以为你带来价值。我已经收获了，所以也想把这份收获分享给你。

这本书讲了什么？

1. 什么是交互设计？

设计的目的

在没有读这本书之前，其实我对交互设计的概念很模糊。因为长期创业的缘故，工作非常杂，除了不写代码，我感觉自己其他事情都在干。所以这是我第一次理解交互设计的概念，而当我读完以后，我才发现，其实我干的一直都是交互设计的活儿。

在了解交互设计之前，作者抛出了一个问题，那就是——设计的目的是什么？说实话，这在我第一次阅读的时候，给了我很大的冲击。我们在过去的工作中，可能大部分人对设计的工作内容的理解都是完成原型图的设计，做出高端大气的页面，精致的图标等等，但你可能很少去思考，设计的目的是什么？

作者举了一个很经典的案例。在二战时期为英国空军立下汗马功劳的蚊式轰炸机，看上去很不起眼，甚至有点丑。但是当时这个飞机的英国设计师，充分考虑了生产飞机的材料“铝”非常匮乏，于是采用了木材代替铝材，正是这个看上去不起眼的改变，摆脱了大型冶炼工厂和专业机械的限制，减少了战略资源的消耗，降低了制造难度和成本。最终，这款“身轻如燕”的木制轰炸机出动近 4 万架次，投下 10 多万颗炸弹，仅有 254 架被击落，平均每 2000 架次行动才会损失 1 架，战损率只有一般轰炸机的 1/3。

这是一个充分体现设计学科特性的生动案例：设计有着强烈的目的性，而设计师需要考虑现实情况，在一定的限制条件下进行创作。这一点也使设计与艺术有了鲜明的区别。设计的目的是满足需要，而艺术的目的是表达艺术家对世界的看法。

所以如果你们认真看大侦探的产品拆解报告，你们会发现我每次都会在用户需求分析这个章节，反复强调一句话——设计的本质是解决需求。

交互设计的定义

交互设计中“交互”一词，英文是 interaction，其中 inter 是“互相”的意思，action 就是“行动”，所以 interaction 直观上解释就是“互相的行动”，也就是主体行动一下，客体再行动一下，彼此往复，你来我往。交互设计之父艾伦·库伯在其经典著作《About Face 4：交互设计精髓》里对交互设计如此定义——交互设计是设计可互动的数字产品、环境、系统和服务的实践。这个定义其实有点难理解，不是很具象，但这个定义告诉我们，交互设计覆盖了很多领域，它和很多设计都有重叠、交集。作者他也整理了一个图，从这个图里我们对交互设计会有更直观的了解。

其次，作者他举了一个很接地气的例子告诉我们交互设计是什么。那就是我们大家无比熟悉的银行 ATM 取款机。你有注意过吗，当你去取款的时候，这个流程是非常直观的。插卡、输入密码、选择取钱、输入金额，等待出钞，取卡结束。这就是一个完整的 ATM 取现流程，这就是交互设计，它是有流程的，有动作的，需要用户和机器一起协作完成的。

交互设计的能力模型

在传统的互联网产品开发流程中，交互设计处于产品需求和界面设计的中间。大家对他的理解呢，一般都是画原型，画线稿。但事实上画原型只是交互设计师的一小部分工作，和产品经理一起分析从中挖掘需求，制定产品的规划，跟随产品整个生命周期的设计，以及验收最终的产品研发，才是交互设计师真正的工作。我个人认为，交互设计师是需求的设计翻译官，把产品需求通过设计软件绘制出来，从而让产品、研发理解，最终上线给用户使用，他就是这样一个非常重要的角色。

交互设计师需要掌握什么能力？作者整理了 9 个必备技能，分别是场景思维、用户习惯和心智模型、设计目标、竞品分析、流程设计、设计原则、设计规范、原型制作和可用性测试。这 9 个技能，其实也是本书的核心内容，我们在后面会慢慢讲解。其次大家可以通过这个模型来作为交互学习参考的工具，比如你现在只能画原型，那么你需要培养场景思维、学习竞品分析，这样你就能拥有了一个学习阶梯，不断提升自己实力。

互联网大公司对交互设计师的要求

这一节其实挺有意思，作者他分析了阿里巴巴、腾讯、网易等大厂的 20 多个交互设计师招聘岗位。从岗位描述和岗位需求的分析，他如此总结道：

对于初级设计师，主要要求设计师能够对某个功能做出合理、有效的交互方案。对于高级甚至专家级设计师，则需要从更宏观的角度对 App 的交互设计进行支持，例如设计策略的制订、设计规范的制订、框架的制订、成员能力的提高等。无论何种情况，交互设计基础知识都是设计师不断成长的根基。

说到这里，我想起小时候学打球的时候，体育老师的第一件事就是教你如何拍球。很多人觉得无聊，拍球谁不会啊。但你最后发现，真正打得好的球员一定基础功非常扎实的球员，而做设计，也是同样的道理。如果对设计的基础知识毫无概念，对不起，未来你一定会被淘汰。

2. 设计分析技能

这是本书的最重要、最核心的部分，作者针对交互设计需要掌握的设计分析能力模型做了全面的介绍，其中有很多非常形象的案例，当你读完，你就会发现交互设计无处不在，交互设计真的非常重要。

目标用户和场景

“理解用户的期望、需要、动机是进行设计的基础准备工作，它为设计方案指明前进的方向，奠定成功的基础。”任何一个产品，如果我们忽略了用户真实的需求，那么最终这个产品就会导致无人用的窘境。这对于 B 端、SAAS 的产品设计来说，体会更深。

用户的痛点是什么，我们的产品如何设计解决？如果对用户的需求挖掘不够深，那么这很可能就是一个伪需求。作者提供了一个制作用户画像的步骤，非常实用，你可以按照调查用户、寻找关键变量、数据归类的方式，最终形成一个清晰的用户画像。

作者分享了一个描述场景的公式，这是一个非常有价值的知识点。通过这个公式，在以后做用户调研、产品分析的时候，我们可以直接套用，它可以帮你把用户的使用场景描述得很清晰。

“场景=特定类型的用户（Who）在某时间（When），某地点（Where），周围出现了某些事物时（With What），萌发了某种需求（Desire），会想到通过某种手段（Method）来满足需求。”
举个简单的例子：知生（用户）在周五晚上（时间），在自己的卧室（地点），收到了设计大侦探直播的公告（出现某物），发现今天分享的是一直困扰他如何设计作品集的难题（需求），于是打开电脑（手段）进入直播间进行收听。

最后作者还分享了用户体验地图和用户场景地图的制作，这是对这两种展示模型非常详细的介绍，需要各位去细读。

心智模型

心智模型是指一个人对某事物运作方式的思维过程，即一个人对世界的理解。

如何掌握用户心智模型？收下这篇4000字的干货！

产品设计中挖掘用户心智，是打造产品良好用户体验的关键一步。

怎么来理解心智呢，比如你在顶楼按电梯的时候，你会按好几下，仿佛这样电梯会上来的更快；再比如，你在浏览某个产品的时候，你发现有相机的图标你就会下意识的明白他可以上传拍照或者上传图片；还有像音乐产品的播放器页，他们会设计成一个黑胶唱片的风格，让用户从听觉和视觉都有沉浸式的体验。

分众传媒创始人江南春有本书叫《抢占心智》，他在那本书里这样解释心智——只有拥有了人心，占据了用户的心智，品牌才能够长盛不衰。我对本章心智模型的理解就是对用户需求的挖掘。他们关心什么、喜欢什么、习惯什么，如果你不去深入挖掘、研究，那么你的设计就很有可能让用户不理解，成为了自嗨型的设计。

网易云音乐的负责人王诗沐曾经在《幕后产品》里发表过这么一个观点——产品设计最忌讳的是只了解自己熟悉领域的用户，而对其他用户群视而不见。如果你不研究年轻用户喜欢的二次元、娱乐时尚圈还有城乡接合部的流行文化，那你很难体会到大众用户的需求。所以研究用户，就是一个很大、需要长期持续性坚持的工作。

设计目标

我不知道你们有没有这种感觉，当你没有学习目标时候，你会焦头烂额，不知道学什么，怎么学，即便你在 BAT，你也会烦恼如何提升自己。但是当你有清晰的学习目标时候，哪怕公司再小，工资再低，你也会有非常强的动力。其实我们做设计，也是这样的。

大厂出品！手把手教你制定设计目标和设计策略

缘起为了避免设计师们接到需求就画方案，在 VMIC UED，我们会通过设计模板的方式（见图 1）。

作为设计师，想要解决问题、满足需要，首先需要明确问题是什么，而确立设计目标就是在设计之初，把要解决的问题用设计目标的形式确立下来。设计目标又分为产品目标和用户目标，产品目标是从业务的角度出发，根据业务需求归纳得出的对需求的期望效果。用户目标是设计师对用户在使用某个功能时，希望满足的需要的总结。

我早些年做商业设计的时候，没有设计目标这意识，只关心甲方有多少钱，以及我能做多少事。但随着竞争越来越大，客户的选择越来越多，你会发现，大家打出来的口号都是“帮助客户成功”。而在分析客户需求时候，帮助客户梳理好业务目标特别重要。他的产品在生命周期的哪个阶段，有多少预算，MVP 版本需要达到什么效果，只有设定好设计目标，项目才能推进。而且不同的设计目标，设计方案也会不一致。

竞品分析

我相信任何设计师在做设计的时候，对竞品的调研都是必不可少的步骤。说难听点，大家都需要学会如何去“抄”，但这个“抄”不是让你生搬硬套把别人的东西直接搬过来，而是从其他优秀产品身上取长补短。竞品分析最大的作用，就是帮助我们，通过调研、拆解、分析去获取优秀产品的设计经验。如果你对顺丰的拆解还有印象，我当时整理了一个快递行业的产品功能图谱，其实那就属于竞品分析的一个方法。

从3个阶段，由浅入深帮你完全掌握竞品分析

本文结合自己多年的工作和学习经验，由浅入深向大家介绍在工作中如何进行竞品分析。

作者提供了三个常见的竞品分析方法，对每个方法都做了详细的介绍，各位只要花点时间，认真读一下，就能轻松上手。张再旺老师写过有一本书叫《有效竞品分析》，那本书里总结了很多竞品分析的方法，后面我会分享，让大家全面了解和提升竞品分析的能力。

3. 原型制作技能

设计流程

其实现在越来越多的 UI 设计师在关注 B 端，转型到 B 端。其实做好 B 端的设计，核心的关键点就是要了解业务流程。比如一个医疗 ERP，他的用户角色有几类，当用户从前端提交报告，这个订单如何流转，后端怎么分配，这就是业务流程。

作者总结了一个画流程图的万能公式：发现→了解→操作→跟进。其实我自己并不擅长画流程图，但是通过这个公式，我发现降低了我的学习成本，对流程图的绘制更清晰了。对流程图的绘制工具，有Axure、Process On等专业工具，但其实我会直接使用Sketch等设计软件直接上手，记住，工具不重要，掌握绘制流程图的方法，以及看懂一个产品的业务流程是最重要的。

设计原则

这一章所分享的设计原则，其实和我们上次分享的《UI 设计那些事儿》的 12 个设计基础理论特别像。无论你是做 UI 设计还是交互设计，你的设计一定要遵循设计原则。比如一致性，这就是要保证整个产品的设计统一，为什么我们要建立文本样式、颜色样式？这就是保证整个设计样式统一的基础。再比如容错性，为什么注册的按钮在你没有输入手机号码的时候是置灰的，它就是通过这个细节告诉你，这个时候是不能点击的。再比如你在支付宝输入一个数字，它就会提示你是不是要转账，这就是预判用户的预判，提醒用户。

最后作者还提到罗宾·威廉姆斯的《写给大家看的设计书》，我觉得这本书真的值得所有产品设计师的朋友观看，哪怕你不做设计，但你掌握了最基础的设计原则真的对你非常有帮助。

设计规范

设计规范这个章节，作者介绍了谷歌和苹果各种常用的控件的使用方法，比如提示框、警告框、搜索、滑动器等等。这个部分偏实战操作，需要细读，大家可以当做一本词典使用，在工作中随时翻阅。

原型制作

我现在对交互原型有一个新的理解，那就是——对业务需求的设计翻译。我特别喜欢做从0到1的产品，特别是在完成需求分析、确立好设计目标以后，我觉得那个时候去做交互设计真的很享受，你就是这个产品的创造者，它的功能怎么实现，怎么和用户互动，完全是交互设计师去设计。

我认为，原型设计这个环节，真的特别重要。有些项目，如果交互设计师有经验，完全可以降低开发、运营的成本，降低产品的失败率。所以如果越想节约成本的外包或者产品公司，一定要找一个经验丰富的交互设计师，他可以帮你把产品开发周期、运营成本考虑进去。

可用性测试

在读这个章节的时候，其实之前有个问题一直困扰着我。在我们开发自己 SAAS 产品的时候，我发现测试这个环节的工作量真的特别大。而且由于不同的人的理解能力不同，很多细节我的同事几乎看不到，所以当我来体验产品的时候我非常抓狂，为什么这么弱智的 BUG 没有发现，为什么这个功能被忽略了。那是我第一次重新认识测试的重要性。

万字干货！9个方面帮你完整掌握可用性测试

设计师面试被提问可用性测试？

对于交互设计师来说，千万不要以为只是把设计做好就结束了。一个优秀、合格的设计师，一定要跟随这个产品的全生命周期研发，而且尤其要参与到可用性测试环节里面。虽然有些公司有专门的测试工程师，但是作为产品的设计者，有很多很多细节，只有交互设计师才能清楚。

作者在这个章节为我们详细介绍了可用性测试的方法，我读完以后，对我真的很有启发。我在随后的医疗项目设计中，就借鉴了他的很多方法，制作测试原型、撰写测试脚本等。

写在后面的话

我提倡以学以致用的方法去读书，那就是带着问题去读书，或者把读书的收获用来解决你当下的困惑，这样才不会因为书本的篇幅过长或晦涩而无法坚持。我之所以选择《步步为赢》这本书来分享学习交互设计，除了这本书的学习模型非常实用，还有一个原因是当我去读这本书的时候，我阅读起来真的非常轻松。整本书的内容、结构以及文笔的风格，都很容易看进去，由浅及深的方式，能让我快速的对交互设计有全面的了解。所以这本书真的非常适合平时一提起读书就毛骨悚然，但又很想学习提升的朋友。

如果你是一个传统的 UI 设计师，从今天起，不要去等产品或交互的原型，你要走向前去，看看他们如何讨论、分析需求，然后套用这个设计分析能力模型去思考，我们的产品目标用户是谁，在什么场景使用，最后再应用到界面设计上。如果你已经是一个交互设计师，那么你可以查缺补漏，看看自己所掌握的知识模型，有没有遗漏的，如果已经建立自己的方法论，那么恭喜你，你已经是一个非常优秀的交互设计师。如果你想制作一个设计作品集，那么你完全可以利用本书的设计模型，从用户分析到设计目标，从设计流程到原型制作，去把设计思路、洞察、细节，“翻译"给面试官、甲方。记住，再好的设计，如果缺乏深入的思考和有说服力的“翻译”，它不会值钱。

董尚昊在本书的结尾，谈到了设计师的自我修养，我个人非常认可。

“做设计是一个不断学习、持续积累的过程，尤其是在迅速变化的互联网行业。要为自己工作，才能真正获得成长，而当你持续成长的时候，你就会变得越来越值钱。”

如果你想学习提升，读书，是这个时代最不需要花钱、成本最低的学习方式，所以我把这本《步步为赢》分享给大家，希望你能有收获！