【笔记】荷兰交互设计师的新方法：Priority Guides

由宝珠 · 发布日期 2020-01-14 · 已更新 2020-01-14

2019年12月22日，UXRen联合UX Beijing在北京DRC举办了《荷兰交互设计师的新方法：Priority Guides》的主题沙龙分享会，本文基于嘉宾Joren Bredman（高知/Cognizant 荷兰设计中心高级交互设计师）的现场主题分享总结而成。感谢樂儿同学的细致整理。

活动笔记：

今天要给大家介绍的是 Priority Guides 设计方法，这个方法在国外、在荷兰应用的也不多，我们公司在几年前发现了介绍priority guides设计方法的文章，然后我们的首席交互设计师开始接受这个方式。我们试用下来发现效果挺好的，因为我们团队中交互、视觉和开发合作得比较好，因此在工作中广泛地使用这种方式。我们在荷兰尝试对外推广这种方式，不敢说对所有团队都很有效，因为不同的团队工作模式不同，但是期望你们可以开始尝试一下。

我叫白尤恩，我原来在阿姆斯特丹大学当老师，教心理学、统计学。后来我去了一家叫Wordoor的创业公司做用户研究，后来相继在TCL和联想工作过，工作内容涉及软硬件，工作职责包括用户研究和设计。再后来我去了Mirabea，担任首席交互设计师。这是我的工作环境：

因为我们是一个乙方设计公司，需要的是帮助客户找到最大的价值点，然后从一个小的点入手做MVP，然后快速迭代，因此我们的设计方法论是“Think big，Start small，Grow fast”。

我们的大部分项目是按照Double Diamante的方法论来推进的。当客户来找到我们，希望我们帮他们解决一个问题，这时候我们对于用户所面临的问题以及最后产出的设计形态是一无所知的，也就是图中的A点。通常需要花一到两周的时间来挖掘甲方的真实需求。我发现每一次经过深度挖掘后得到的真实需求与甲方最初直接给到我们的方案都是不相符的。甲方各个层面的关键决策者的想法各不相同，我们需要与甲方各个层面的关键决策者深入地沟通，无论他们需要一个App还是需要一个网站，我们要深入地了解他们为什么需要这个东西，他们的真实需求是什么。

然后我们要开展用户研究，这里所说的用户研究不是指针对产品的可用性研究，而是深入到目标用户的生活中，观察他们的日常生活，找到他们在真实场景下真实的问题所在。

到这里我们经过发散已经透彻地了解了甲方的真实需求和用户的真实痛点，在第一个菱形的中间，我们可以定义这一次我们真正需要解决的问题是什么。从这点开始，我们开始收敛聚焦。左边的菱形所描述的流程都只是产品设计阶段，还没有到交互和视觉。

从两个菱形交叉的点开始，我们围绕左侧菱形工作流程的产出，再次发散出各种解决方案，然后开始快速迭代。

这是我们完整的工作流程，看起来很复杂，大家不需要记这么多细节，只需要记住，左边这部分是“Doing the right thing”，右边这部分是“Doing things right”。我发现在国外很多设计公司在“Doing things right”方面做得非常好，如果一个甲方公司找到设计公司，希望他们做一个App，他们可以在交互设计、视觉设计、开发方面都执行得非常好，但是最终产品上线后，没有人用。

这个流程跟Double Diamante是差不多的，也是我们的工作流程。这里面我们关注第一步 Define goal，当我们确定目的时，不但要知道甲方公司的KPI是什么，还要知道关键决策人的KPI是什么。从KPI可以理解甲方提出初始方案背后的原因。

确定目的后，就可以开始用户研究了。我们关注一下用户研究之后有一个Creative Brief的阶段。Creative Brief 是指跟甲方沟通，我们原来认为需要解决的问题是A，但是经过我们完整的调研，发现其实真正的问题是B，为什么是B而不是A。这个阶段强调双方就目的和概念达成共识。

在我们公司，用户研究阶段更多的是由交互设计师参与进来一起做的。因为我认为完全由用户研究人员执行用户研究，并最终以报告的形式输出结论给设计，会导致很多细节的丢失，缺乏说服力。

我们每一次做用户研究都是真的“Go into the field”，这是我们真实的用研案例，我们去到了农场观察真正的用户的生活状态或者使用状态。

也要真的“Find real context of User”，这是由交互研究员和用户研究员一起参与的用户研究项目，我们在现场观察用户操作，然后问用户你为什么要这么做，或者为什么这么思考。

我经历过好几个公司，发现大致的流程都是跟这个图差不多。首先是跟甲方进行沟通，然后开始研究。研究结果以报告的形式给到交互设计师，这里面会丢失很多细节，然后交互设计师根据报告内容做交互设计，再将画好的线框图给到视觉设计，视觉设计师就开始在线框图上“涂颜色”，最后这个涂好颜色的作品交给开发。

在这里，我想讨论一下线框图。

我们常用的线框图有低保真的也有高保真的。这两种线框图在各位的工作中都很常见。

这样的线框图有它的优势：

优势1：快速地将想法可视化，有利于快速地进行探索；
优势2：是很好的沟通想法的方式；
优势3：可以早点和用户进行测试。

但是它也有缺点：

缺点1：大家会感觉这是已经确定的设计
最初我们只是想把我们一些不确定的想法呈现在纸上，来达成与同事或甲方的交流，但是当大家拿着这个线框图来沟通的时候，容易陷入细节或样式的讨论。并且当甲方认可某个方案之后，就很难再对这个方案进行改动了。
缺点2：会抹杀创造性
当把一个相当完善的线框图交给视觉设计师的时候，他只能在这个框架内进行局部的设计，也就是俗称“涂颜色”，而没有办法做更多有创造性的事情。
缺点3：对开发和测试不好
为了体现交互细节，需要做很多页面，写很多的交互说明，增加开发和测试的阅读量。

根据上述流程，如果在开发过程中出现了问题或修改，需要开发反馈给视觉，视觉再反馈给交互设计，整个反馈路径太长了。

因此我们公司现在的项目流程变成了如下这样。

在这样的模式下配合priority guides工作可以获得一个比较好的效率。

那么priority guides是什么呢？

Priority Guides 包含了一个页面的内容和元素，按优先级由高到低排列，但不呈现具体布局。

回到刚才的航空公司的例子，左图是刚才我们讨论的线框图，右图是用Priority Guides方法做的原型图。

比如说，这是一个【飞行准备页面】的Priority Guides。首先第一部分是一个关闭按钮，和页面的title“crew on flight（机组成员）”，因为这是一个弹层，用户可能想要快速跳过这一页，所以关闭按钮相当重要。然后是一个包含4个内容的轮播组件，然后依次显示每个机组人员的姓名、职位和工号等等。

通过这个原型，大家就可以了解到在这个页面中最重要的内容是是什么，然后是什么。在这个阶段不需要关心图片的大小，或者按钮的位置。

我们通过一些简要的页面来快速展示交互的流程，让整个团队了解我们要做的事情是什么，但是在这里，我们还不需要定义具体的交互形式或解决方案。最重要的是我们不要将一整个完整的流程都设计好了，再交给开发，我们应该采取小步快跑，快速迭代的方式。

再看一个例子，这是一个带有跳转交互的页面说明。首先在第一个页面中，优先级最高的内容是加入文章的信息，然后第二部分需要输入名字，然后后面有一些分类的选项，虽然在这里是以CheckBox的形式展现的，但是最终应该由视觉设计师来确定展示形式。

这是一个从Priority Guides原型到视觉图的例子。左图第一部分，是设计者认为最重要的内容——title“4 Tips for efficient laundry drying”+ 图片。在这里，我们只需要知道最高优先级的内容是一段文字和一个配图，但是这时候并不关心具体是哪一张图，也不关注图片和文字的位置关系是如何的，这个由视觉设计来定义。

然后第二部分是几个图标与文案的搭配，图标的样式以及元素的位置在这个阶段也暂时不需要关注，后续由视觉设计师来定义。

视觉设计师拿到左侧的原型图后，根据所列举的内容、元素以及优先级，产出右侧的视觉图。

Priority Guides原型图7优势：

优势1：可以在原型阶段专注于问题和需求上。

可以脱离了界面细节去关注用户的问题是什么、他们为什么要用这个App，他们最关心的信息是什么，哪些内容是必须有的，哪些内容是不必要的。如果用线框图来去跟用户沟通需求，当用户在页面中遇到阻碍时，我们可能不容易分辨到底是内容错了还是内容的展示方式不恰当。

优势2：响应式的设计。

我们总是要为移动端和web端做两套设计方案，但如果你用的是Priority Guides，这个优先级列表对于用户而言无论在哪个平台上都是适用的，然后视觉设计师再按照优先级列表和各个平台的特性来发挥视觉创意，就可以节省一些时间。

优势3：视觉设计可以更自由地发挥。

正如前面所说，如果我们给到视觉的是一个线框图，那么视觉设计师可能只能在局部进行细微的调整，他们的创造力就被抹杀了。如果我们只给视觉设计师一个list，他们可以自由地发挥创意。

优势4：不在原型阶段浪费时间在小细节上。

在产品最后的阶段，细节非常重要，但是在研究探索阶段，一个按钮一个位置的细节并没有那么重要，如果使用传统的线框图原型，我们不得不花费很多时间在原型图的细节上。但是如果用Priority Guides，我们可以在这个阶段将更多时间花在“Do the right thing”上。

优势5：开发可以更早地开始布局页面结构。

因为优先级的确定，开发在视觉界面出来之前就可以围绕内容和优先级开始着手搭建页面结构了（这里特指网页开发）。

优势6：Priority Guides 对于测试工程师而言就是一个天然的 Checklist，这样就可以更有效地降低少测、漏测的情况了。

优势7：更高效地与团队成员合作。

当有了Priority Guides之后，后续的视觉设计和开发团队就可以围绕着Priority Guides来沟通了。在各个环节出现某些小问题的时候，以Priority Guides为指导，他们可以获得更多的自主处理的空间。

交互设计师输出 Priority Guides，视觉设计师根据Priority Guides输出最重要的页面的视觉效果，并在这个视觉方案的基础上整理出视觉设计规范体系。开发可以根据Priority Guides和视觉设计规范来构建界面。这时候绝大部分内容都可以由开发自行解决，因为原来他们拿到的是设计完善的方案，但不知道用户为什么需要这个。而现在他们知道用户为什么需要这个，也了解了设计规范，他们就可以有更自由的空间来发挥和创造。

再来回顾一下Priority Guides怎么做。

最重要的是：

用真实的内容去跟用户测试，确定内容的优先级；
用手机的大小来装载内容；
不要给内容排版。

详细步骤：

第一步：了解甲方公司、甲方关键决策者的目的，了解用户目的。
第二步：用足够多的方法了解你的用户。
第三步：确定内容的主题。
在这一步需要注意的是，第一，一定要基于目的和研究结果。第二，一定要各利益相关方参与到这一环节，这样才有可能在最终方案输出时得到各方的支持，否则可能会面临各相关方的挑战。
第四步：流程设计
如果是在敏捷开发的话，可以在这一步给到OP一个比较好的stories来说明我们即将要做什么，但是在这一阶段不需要确定详细的交互流程。
第五步：建立优先级
定义在这个页面我们想要做什么，用户的目的是什么，在这个页面可以做什么，但还不需要定义详细的内容。根据上述内容确定各项优先级。
第六步：给每一项填入真实的文字内容及功能区域