双廊地图优先级指南：除了线框图外你还可以这样做产品设计-PrivateMorron

优先级指南：除了线框图外你还可以这样做产品设计-PrivateMorron囚歌的意思
本文2018年5月3日刊登于 A LIst Apart
原作者：Heleen van Nues, Lennart Overkamp
翻译：PJ
提图：PJ
原文链接：
https://alistapart.com/article/priority-guides-a-content-first-alternative-to-wireframes

摘要
老板老要你改原型(线框图)？
线框图是一个我们习以为常的交付物，所以很多同行已经忽视了它的不足。但是线框图的这些不足，其实会干扰我们围绕用户去展开工作。举例来说，笔者工作中就曾囿于线框图，在该讨论功能和内容的阶段，迷失在细节中。导致项目早期无法充分发现问题，项目后期反复修改原型，加班成狗。
这也是为什么我们引入了优先级指南来代替线框图。优先级指南将页面的内容和功能以一维的方式按照重要性从上而下排列，提供足够的信息，以便和关键干系人(老板)沟通方案，又能避免过早在细节中迷失。
它不仅促使我们围绕用户做设计，同时也改善了团队协作和产品设计流程。
线框图的缺点
线框图是描述产品形态的草图，从手绘的到通过原型工具创建的逼近产品最终形态的高保真线框图你可能都接触过。

低保真(左)和高保真(右)线框图的示例
因为线框图很直观，用来验证产品点子、借助它与干系人沟通都很不错。用Axure和Sketch绘制线框图也蛮方便的，画完可以用来在项目早期拿来做用户测试，及早发现一些易用性的问题。不过虽然有这些好处襄垣秧歌，线框图也有一些显著的不足。
定稿的幻觉
线框图常让人觉得这就是最终方案了。干系人很难意识到这其实还只是草图。有的产品经理会故意不上色，或者导出手绘风格的预览文件等等，但是无论怎么强调，我们的客户或者干系人还是常常会问：这个按钮的位置我觉得应该在这里....而错失及时就页面流或逻辑表达意见的机会。
限制创造力和参与度
线框图一出来，视觉设计师或者UI设计师基本上就被框住了。最后画出来的设计稿和线框图大体上还是一样的。
失焦
画线框图的时候很容易就迷失在对齐啊、尺寸啊这些细节里了。这些时间和精力本该花在功能和内容这些对用户有价值的思考上。
不是响应式的
像Axure这些常见的线框图实际上是做不了响应式设计的。一般我们是针对典型的屏幕尺寸去单独画页面，这样往往拘泥于所设计的页面尺寸。
对研发和功能测试来说并不方便
研发和功能测试都是和代码打交道的，线框图包含的功能和逻辑的信息太少了。光看线框图，对于线框图中无法包含的信息，研发和测试要么去脑补，要么来来回回和产品确认。对于成熟的团队，研发对业务较熟悉，这样的问题会不那么突出应州大捷，但是很多时候这种额外的协作负担还是会浪费宝贵的时间。
为了避免上述这些线框图带来的坑帝王蝶，大概五年前，我们的首席交互设计师Paul Versteeg把优先级指南引入了Mirabeau，从那以后我们不断优化工作方法，收效不错。
什么是优先指南？
据我们所知，优先级指南是Drew Clemens发明的。他第一次在Smashing Magazine的网站上介绍了这个概念。不过好像一直没有流行起来。
简明扼要地说，一个优先级指南包含一个页面中的内容和元素，按照一维的方式从上而下的方式排列，而不包含任何布局信息。由上而下，最上面的是对用户来说的价值，对实现用户（以及公司）目标最关键的内容。它可以用N次贴或者纸笔做，也可以用数字化工具做（我们一般用Sketch）金丝蓉。最重要的是一个优先级指南始终是内容驱动、用户驱动的。

一个页面的优先级指南的结构
下图就是此前线框图所描述的页面的优先级指南。里面包含了真实的内容（我们连免责信息都放上去了）和关于功能与组件的备注尊贵囚徒。

预定航班页面的优先级指南示例
和线框图一比较就会发现各个部分的次序是不一样的。例如进度，在优先级指南里是放在最下面的，因为设计师觉得它并不重要。而航班信息和价格放到了顶部。
备注也是优先指南中的重要组成，可以对功能和页面行为作解释，说明组件的类型，把页面流串起来。在上面提及的例子里你会发现备注说明了用户点击按钮或链接之后会发生什么。譬如弹出一个遮罩层等等。
优先级指南的优点
对上述例子中优先级的取舍大家不一定认同，不过我们这篇文章不讨论这个问题。接下来我们讲一讲相较于线框图，优先级指南的几个突出的优点。
适合响应式设计
线框图如果要做响应式设计，要针对典型的屏幕尺寸做几个版本。优先级指南是内容和功能的概览，和屏幕尺寸没关系（前提是不同尺寸的设备上用户要实现的目标是一致的）。即使Mirabeau有标准化的响应式设计流程，优先级指南仍然是我们关键的一项工具。
专注解决问题与满足需求
做优先级指南的时候，往往会本能地专注于用户的痛点，满足他们的需求，帮助他们达成目标。界面上始终放的是对用户有用的内容斧头帮舞蹈。这种内容驱动的设计方法可以促使你专注于用户。
不浪费时间纠结美观和布局
做产品设计的时候不应该过早浪费时间考虑美观和布局。优先级指南可以防止我们掉进追求视觉完美的坑。
让视觉设计师发挥创造力
优先级指南给了UI设计师充足的空间去探索视觉上如何更好地服务用户、让用户愉悦。不用受制于交互设计师的交付物。线框图的框框是很难打破的，即使你是团队里唯一的设计师，又做UI又做UE。
研发和测试能较早洞悉功能
我们觉得优先级指南的结构蛮接近HTML的，让研发能提前开始做些准备工作。测试也可以了解到测试的要点，提前开始写用例。这样我们能尽早获得设计可行性的反馈。我们在Mirabeau发现优先级指南显著提升了产品设计和研发之间的协作流程。
如何创建优先级指南
我们有一些觉得有益的基本原则和步骤想与大家分享。我们在项目中引入这个方法的这几年来不断根据实际情况去优化它，并且举办工作坊向荷兰的设计群体介绍这一方法。
基本原则
优先级指南里始终应该包含真实的信息，没有意义的占位假文没办法说明页面是如何帮助用户达成目标的。不要包含任何布局元素，只能包含内容和功能。切记，优先级指南不是交付物囹圄怎么读，它是促进团队成员、干系人之间讨论和达成共识的工具。
优先级指南一定要有移动版的格式。当你给自己加了这样的限制，你就能自动的按移动优先的方式去思考什么信息是最重要的（在指南的最顶部）。此外因为一般各个页面的菜单都是一样的，我们建议不要包含在优先级指南中。这样你能专注于你要设计的屏幕，指南也不会挤满冗余的元素。
第一步：决定目标
别急着提方案，先考虑下建立这一优先级指南的初衷。这一个页面的目的是什么？用户要实现的目标是什么？我们公司的目标是什么？这些问题的答案能指导你做用户研究，并且决定哪些内容会给用户和公司带来更多价值，对应的也应该有更高的优先级。
第二步：研究和理解用户
用户研究的方法很多，选用哪些方法很大程度取决于你所在的组织和项目。不过在建立优先级指南的过程中，我们发现用户画像，亲和图，体验地图对于建立直观的研究结果很有帮助。
第三步：决定内容主题
这一步是利用你对用户和公司的了解，决定哪些特定的内容最适合用户流程的特定阶段。我们的经验是，和用户等干系人一起创建这个提纲很有好处。这一步得到的是一份每个页面应该包含哪些内容的提纲。
第四步：建立粗略的优先级指南
基于上一步得到的提纲，可以开始建立粗略的指南。哪个点最重要？将它放在最顶部。其次呢？以此类推。直到提纲中的点都已经在指南中有位置了。虽然这时候是在排相对次序，还是要去想想每个点本身是否应该出现在这个页面上。在这个环节，用数字绘图工具可能会花时间对齐、排版等等的，用纸笔的话能很好地避免这个问题。

一个优惠活动发现页面的粗略的优先级指南(虚构)
第五步：创建详细的优先级指南
把上一步粗略的指南中的每个点填充、替换成需要在页面上呈现的真实、具体的内容。同时也要思考该页面上应有的功能。等有了多个页面的优先级指南以后，要用类似站点地图的方式把他们连接起来。
我们常常借助它去识别产品流程，宫宝田验证设想是否完备，判断当前的内容和优先级是不是能满足用户需求，解决他们的问题。我们好几次发现为了实现我们预期的目标，方案需要修改。因为优先级指南做起来很便捷，在这个时期迭代给我们省了大量的时间。
第六步：用户测试并进一步迭代
最后一步涉及指南的测试和迭代。问问用户对于你在指南中呈现的内容有什么意见，双廊地图听取干系人
的反馈。这些反馈可以用来验证和重排内容，也可以增加和调整功能，按需再安排后续的测试。
找到适合你的方法
这套方法，我们几年来见识过各种各样的操作。有的设计师全用纸笔和N次贴，有的全程用数字绘图工具。有的也就止步于概括的优先级指南，有的则会用详细的指南去指导整个项目。
多尝试，慢慢找到适合你和你团队的方法。无论实际怎么操作，重要的是要专注于服务用户和商业的目标，添加的每一项内容或功能都要服务于目标。
结论
对于我司来说，优先级指南已经是个很有效的工具了，我们用它去做用户驱动、内容驱动，移动有优先的设计，克服了很多原本只使用线框图时遇到的坑。不是说线框图一无是处，很多时候把想法形象地描绘出来和团队成员、客户等干系人讨论时，线框图仍然很有用。把概念落实成线框图去验证产品点子也是很有效的手段。有时候我们甚至利用线框图去探索新点子，来优化优先级指南。
总之我们发现优先级指南在项目早期龚箭，还在决定各个页面的内容和功能的时候用处很大。而线框图在形象地描绘和沟通产品点子的时候用处很大。就是别一开始就画线框图，确保不忘初心冲囍。
关于作者

Heleen van Nues
Heleen是一位交互设计师，她对于抽丝剥茧定义问题、为用户和公司设计最佳的方案充满热情。她加入了innogy成立的Garage，致力于世界范围内的能源变革。

Lennart Overkamp
Lennart Overkamp是一位富于洞见的交互和服务设计师，他坚信主动倾听的力量。对于设计真正为用户带来价值的产品有一种使命感。闲暇时他喜欢阅读，聚餐，聊有营养的天，骑行探索大自然的美景。
点击原文链接可以找到A-LIst-Apart上的英文原文。本文对一些约定俗成的表达做了改写。