一招教你让交互方案更靠谱！超好用的目标导向设计法

对于一枚交互设计师，设计水平的重要判断标准之一，是看设计师能否产出足够靠谱的方案。对内，方案要能帮助产品不断向前发展，提升产品的数据，为公司带来收益；对外，方案要能满足用户的使用需要，方便用户的操作，提供良好的用户体验。对于交互的同学来说，这些是我们的天职，要想尽一切办法去做好。那么问题来了，如何才能做好这些天职呢？下面我将分三个阶段介绍一个很好用的设计方法：目标导向设计法。掌握了这个设计方法，可以帮你设计出团队内部认可、用户也喜欢的方案。

设计目标

要理解目标导向设计法，首先要理解最核心的元素——设计目标。这就绕不开设计的鼻祖——包豪斯。包豪斯是世界上第一所完全为发展设计教育而建立的学院，在设计史上占据着非常重要的地位。她从1919年创立开始，一直到今天都对设计界有着很大的影响。现在我们看到的很多建筑风格，都依然是包豪斯的老师所创立的国际主义风格。

△  包豪斯第三任校长米斯先生于1958年设计完成的西格拉姆大厦，典型的国际主义风格

现在整个世界范围内的建筑，大面积都是这种极简风，包豪斯的影响可谓波及全球。包豪斯学校之所以伟大，是因为包豪斯首次将理性思维的光辉注入了设计活动中。她首次提出要为大工业生产而设计。包豪斯主动将学校和企业界、工业界联系起来，使学生能够体验工业生产与设计的关联。这样的做法，让学生能够设计出真正符合生产标准的作品，而避免了产出只是看起来美好、却无法量产的作品。其次，包豪斯奠定了现代设计教育的结构基础。包豪斯把课程分为“对平面和立体结构的研究”、“对材料的研究”、“色彩研究” 三个方面，使视觉教育第一次比较牢固的建立在科学的基础上。

在这之前，设计都是被划分在艺术的门类下面，设计本身，也被认为是靠感性来进行创作的一项活动。最后，包豪斯首次提出了“以解决问题为中心”的设计理念。设计是为了解决问题，这是设计的终极目标。不论是设计一个水壶，还是一个视频列表，我们的设计方案一定是为了达到某个目标，解决某个问题。设计是为了解决问题，而艺术是为了表达内心。这是两者本质上的区别。从包豪斯开始，设计开始能够真正的为生产服务，发挥了它的最大价值。

以上帮我们明确了设计的本质是解决问题。具体到交互设计领域，我们是靠“设计目标”帮我们理清项目需要解决的问题。交互设计的设计目标由两部分构成：产品目标和用户目标。产品目标一般由产品经理提出（通常包含在需求文档里），也可以由设计师提出（通过分析得出）。常见的产品目标如“提升XX功能的转化率”、“提高XX页面的使用时长”等等。而用户目标，可以概括为“用户通过做XXX的操作，可以满足XXX的需要”，一般需要设计师来分析总结。为了更好的理解设计目标，我们来举个例子。例如现在有一个需求是优化app的登录页面：数据显示很多用户没有完成操作就离开了页面，因此需要立项优化。我们来分析一下这个项目的设计目标。从需求中得知，很多用户没有完成操作就离开了，页面的转化率低，因此这里的产品目标就是“提升登录页面的转化率”。下面来分析用户目标，用户其实是不愿意登录的，因为登录操作麻烦，用户也没有这个习惯。那么，当用户来到这个页面，他的需要是什么呢？答案是快速登录。用户希望登录越简单越好，越快越好。这里需要注意的是，在确定用户目标时，应从用户的角度出发，发现他们的需要。千万不能把用户目标变成了给用户的任务。比如下面这个注册页，就是布置给了用户一堆输入任务。

△  让用户在注册时提供如此多的信息，真不知道是注册还是查户口。

设计目标

设计的本质是解决问题，所以做交互设计要有设计目标，而设计目标包含产品目标和用户目标。现在来说说如何确定设计目标。

先说产品目标。这里分两种情况：

1. 如果产品需求是由产品经理提出的，那么先看产品需求文档里有没有写明产品目标。有的文档会写的很清楚，比如"提升登录的转化率"。有的没有那么清楚，这时候就需要我们充分理解产品需求，提炼出产品目标。这个过程往往需要设计师跟产品经理充分的沟通，保证需求理解得清楚、准确。在沟通的过程中有时会发现产品自己也没把这个需求想清楚，这时候一个优秀的交互就得帮产品一起理清需求，明确做这个需求的目的。

2. 如果产品需求是由设计师主动发起的，那么在发起需求的时候，我们要明确这个需求要解决什么问题。设计师发现一个需求，可以从以下三个方面着手：研究数据、进行用户调研/查看用户的反馈、进行可用性测试。以研究数据为例，下面是我在网易的时候，发现的一组后台数据：

第一个曲线图，是网易新闻视听tab的点击量变化图，从中可以看出，在把抽屉导航改成了底导航之后（红线所示），视听tab获得了大量新增点击；第二个图展示的是视听tab里视频的点击量，改版后点击量整体上依然在原位摆动。这样的数据很有问题：更多的用户来到这个tab，但平均看的视频却少了。因此我当时发起一个需求：优化视听tab，在设计上加强优质视频的展示，以提升视频tab的活跃度。此时的产品目标很简单咯，就是提升视听tab的活跃度。

下面说说确定用户目标的方法：主要是从这个功能的场景出发，来明确用户的需要。如何确定场景？这里提供一个模板：

用户场景：在某时间（when），某某地点（where），周围出现了某些事物时（with what），特定类型的用户（who）萌发了某种欲望（desire），会想到通过某种手段（method）来满足欲望。

假设我们在新闻列表里，要插入登录领红包的卡片。这时候，用户的场景可以描述为：在用户浏览新闻列表（地点）的时候（时间），看到了“登录领5元红包”的卡片（出现某物），未登录的用户（特定类型用户）萌发了登录的欲望（欲望），会点击卡片的登录按钮（手段）来登录。通过描述场景，这里的用户目标就可以总结为“登录领红包”。

为了更好地理解如何确定设计目标，我们来再举个例子 ：

某理财应用要做一个续约的功能，主要针对购买的理财产品将要到期的用户，提醒他们可以续约。提供的续约信息包括用做续约的本金、续约方式（本息续约）、预期增加收益、续约期限、续约后的到期日、续约说明。续约操作后需要审核，审核一般需要1~2小时，通过后会有短信通知。由于续约能够给公司带来不少收益，因此希望用户在操作上比较流畅，保证不会因为操作而流失用户。

分析一下，从这段需求描述中，产品目标和用户目标是什么？

需求里提到“针对理财产品将要到期的用户，提醒他们可以续约”，所以提醒用户续约是一个目标。需求里还提到好多概念词：“预期增加收益”、“续约期限”等等，这些概念词会增加用户的理解成本，如果用户不能很好的理解，完成续约操作的概率就会降低；而像需求中“希望用户在操作上比较流畅”也是为保证用户不会半路流失。所以第二个产品目标，是保证流程的转化率。

那么，用户目标呢？套用刚刚的模板，这里的场景是：在收到续约推送或者看到理财单里的理财产品可以续约时，购买的理财产品将要到期的用户萌发了想要续约赚取更多收益的欲望，通过续约操作来满足。分析一下这个场景，我们可以得到用户目标是了解续约信息，完成续约操作。

对于续约这类流程性比较强的需求，跟大家分享一个我总结的“流程四阶段”，即“发现、了解、操作、跟进/记忆”。在每一个阶段，都有每一个阶段需要注意的重点，在设计的时候要特别注意。比如在续约这个例子中，发现阶段，重点是“引起注意”；了解阶段的重点是“续约的规则和好处”；操作阶段的重点是符合用户的心理模型，不能让用户觉得不安全；跟进/记忆阶段，主要是注意结果的反馈。

由于发现部分，我们使用push和理财单中的肩标提示，相对来说容易一些。

主要的心思，要花在了解和操作部分上。而这里面的重点，是心理模型。

啥是心理模型？这是我在百度百科上找到的答案：

“心理模型指相互关联的言语或表象的命题集合，是人们作出推论和预测的深层知识基础”。

这是一个比较书面语的定义。通俗一点讲，心理模型就是大家对于事物普遍的认知。

再来一个例子：假设我们来到一个会议室，室内温度13度。我们想通过空调把温度升到24度。在调空调温度的时候，很多人会下意识地把温度调到26，甚至28度，因为人有一种“温度越高，空调会更努力地工作”的认知。

这种认知，就是人的心理模型。而实际上，即使你把温度调得再高，空调也没有为你加速一点点。

空调的制热功能，有自己的一套运作模型，不论你是设置的24度，还是30度，空调把温度升到24度所花的时间都是一样的。

回到续约的例子，人们在花钱购买东西的时候，都希望能有一个类似订单页的确认页面，告诉我我买的是什么，花了多少钱，何时生效。因此，在流程中设计一个这样的页面，就是符合用户心理模型的。

设计目标后

确定了设计目标之后，可以按照这个通用的流程继续进行：竞品分析→流程图→原型图。竞品分析是一个较大的话题，以后有机会另辟一篇文章跟大家分享。本文重点说一下流程图和原型图。

把一个流程图画出来，需要两步：第一步将需求涉及的元素列出来，并进行归类；第二步根据心理模型进行排序。

画完了流程图，需要根据设计目标找出流程中每一步的设计重点。我们来举个例子 ：

【需求】新建视频列表：用户在手机客户端里新建一个视频列表，加入选定的视频。这其中涉及的元素有：列表名称、简介、封面、选择视频（包括上传新的视频和选择已上传过的视频）、标签。

分析一下这些元素：名称、简介、封面和标签是关于视频介绍的，可归为一类；选择视频是为列表添加内容，归为一类。

然后根据心理模型，也就是人们普遍的认知，来为它们排序。人们一般是先为列表取个名字，设置好封面这些基本信息，再为其选择内容。所以这里的流程设计为：填写列表信息→选择视频。

请思考一下：由于这个需求涉及的功能点比较简单，可否把这两步流程放在同一个页面呢？这就需要用到我们这次系列文章的核心：设计目标。

分析一下这个需求的设计目标：产品目标是这个功能的完成率尽可能高；用户目标，是快速、准确完成这个任务。由于这个需求是为手机客户端提出的，而手机屏幕的尺寸较小，流程的两步如果放在一个页面，这个页面会变得很长。同时因为该需求需要操作的点比较多（输入名称、设置封面、选择标签、选择视频等都需要操作），如果放在同一个页面，这个页面会变得比较重。因此这里较好的做法是把选择视频这一步挪到第二个页面，从而使页面轻盈，减少用户负担。

流程有了，我们来分析每一步的设计重点。在第一步，涉及输入操作，联系我们的用户目标，因此这里的重点是输入尽可能方便。而选择视频的那一步，迅速找到用户想找的视频很关键，所以这是重点。

带着这些重点，我们来设计原型。在设计填写列表信息页的时候，我希望让这个页面清晰、简单。在没填写内容时，我们使用默认文字来告知用户这里应当填写的内容，并且把标题和简介只用一条线分开。为了使输入方便设计了一个细节：在用户输入标题之后，在下简介区域会自动匹配和标题相关的内容，然后后面有一个“使用”按钮，用户点击“使用”就可以添加上这些内容，减少了用户的输入。同时，标签部分也会为用户根据标题进行自动匹配。所有这些设计，都是为了达到方便用户输入的目的。

在选择视频页面，设计的重点是迅速找到视频。因此，方案采用了一行两个视频的展现方式，方便用户通过封面图迅速辨识视频；同时一行两个的排布方式，并按照视频名称的字幕顺序进行排列，用户浏览效率比较高。在选择了视频之后，页面底部会有提示栏提示用户选择了几个视频，点击可以查看，方便确认。另外，需求里是没有提搜索功能的。但是考虑到如果用户有很多视频，这个列表会很长，不容易找到列表后部的视频。所以方案里增加了搜索功能，帮助用户快速找到视频。

可以看出，一切的设计，都在围绕产品目标和用户目标来进行。

最后提一下，在完成了一个设计稿，我们可以对照设计目标，然后通过数据和反馈来看我们的设计有没有达到设计目标。这对我们的成长有很大的帮助，成功的设计可以变成我们的经验，没有达到设计目标的方案，我们可以从中分析原因，避免以后再犯。

获取数据方面，我们可以跟数据分析师沟通需要的数据变化情况，或者自己寻求数据权限来分析结果。获取反馈反面，有两种方式：一是可以通过用户的反馈，比如后台用户的留言，用户调研的结果获取方案的反馈；二是可以通过同事和领导的反馈来检验自己的设计。

欢迎关注作者微信公众号：新设计青年

「设计师思维好文」

1. 让你脑洞大开的创新思维方法系列：水平思维
2. 让你脑洞大开的创新思维方法系列：奔驰法
3. 为什么设计师需要理解产品业务？聊聊结构化思维的应用