原型设计：UED和PD对于线框图不同的定位

互联网的一些事

本周和PD们进行了一次《线框图以及Axure入门》培训。这是应几位PD的需求，他们也要学习如何设计线框图，所以想更加高效进行入门。 互联网的一些事

在场的有UED，有PD，我发现，对于两者都要画线框图，引发了一些讨论，这也是我事先预想到可能会引发争议的部分。 互联网的一些事

其中有个PD讲，有一次，老板是要求她来画线框图给他看的，她花了很多心思在线框图上，结果交付给交互设计师的时候，交互设计师不知道如何进行发挥 了，交互设计师说：你都画这么好了，我不知道画什么了。之后，交互设计师进行了“润色”后，交付给视觉设计师，结果视觉设计师发现自己也无从发挥了，因为 视觉稿已经出来了，都上了色了。

yixieshi.com

如果能够提升项目效率，这样倒真的也是好事。PD直接画出确认版的线框图，然后直接给视觉设计师，交互就不需要了。在很多小公司，也确实如此运作，也蛮好的嘛。 yixieshi.com

交互设计师说：交互设计师承担了一种需求翻译的工作，将PD的商业需求，进行具象化，并加入一些用户的视角，帮助优化产品，之后翻译成视觉设计师能够理解的语言，最后产生视觉稿。这也只讲到了一部分，如果PD也能够具象化，并传达得很好，为何还需要交互呢？ yixieshi.com

但是，在实际的工作环境里，我们必须得承认一个前提：术业有专攻，每个人的精力是有限的。 互联网的一些事

所以，PD，交互，以及视觉，虽然都在画图，究竟画得有什么不同呢?

yixieshi.com

yixieshi.com

 这是在这个PPT里其中的一页，也得到了在场的PD以及UED的认可。

 PD画线框图有时是不可以避免的，他们需要： yixieshi.com

 1. 细化思路，帮助自己写需求文档

互联网的一些事

 2. 更好传达自己的需求给其他人，比如交互 互联网的一些事

 3. 一些预研型的项目，需要据此让老板认可并拍板

互联网的一些事

 但是做为PD，同样也担心之后交付给交互，会影响交互的发挥。而且，人人都有追求完美的倾向，在做了一个简陋版的线框图后，总是觉得太简陋，总是 不由自主增加很多细节，以使之先得更加专业。但是，PD需要将重点放到“辅助表达想法”上，对“有用”负责，比如，功能点、内容块、业务流程，而那些打着 叉叉的方面，不是说绝对不关注，绝对不表达，而是需要加上“仅供参考”。

yixieshi.com

做为PD，你认为版块A非常重要，比版块B重要得多，你可以在线框图上把版块A放大，放到首要位置，但是“位置”和“结构”不是你主要要控制的，你 要传达给交互的是：版块A非常重要，以及为什么，而你所做的处理，仅供参考。聪明的交互会理解你的需求，且不会因为你妨碍了他的表达。

同样，交互和视觉，虽然是一个团队的，也经常发生因为边界问题，比如：交互不由自主加了很多颜色和质感，视觉不知道如何处理。视觉更改了线框图的结构，导致交互认为和自己传达的逻辑不相符。

yixieshi.com

所以，作为交互，请注意那些必须要关注的东西： 互联网的一些事

1. 任务流——根据用户需求、行为，分析用户的任务，以及任务流程，简化任务。 yixieshi.com

2. 布局/结构——信息分几类，什么样的布局更加易用

yixieshi.com

3. 位置/顺序——各个版块之间按照什么样的位置进行排列，引导用户的顺序是怎么样的

yixieshi.com

4. 层次/轻重——版块之间、文本之间的层次如何

yixieshi.com

请注意，在表达位置/顺序以及层次时，交互会忍不住为线框图加注颜色，进行字体的设计，但是在交付时，这些也是“仅供参考”的。要传达给视觉设计师的，仍然是“这些比哪些更重要，更应该被强化，以及为什么”。聪明的视觉设计师自然知道如何去表达而不是会觉得受到束缚。 yixieshi.com

到了视觉阶段，视觉设计师不管接到多么像视觉的稿子，也需要重新进行思考定位，需要输入目标用户特征，需求，进行产品的风格定位。 互联网的一些事

我建议，在改变线框图结构的时候，要和交互设计师保持沟通。上次，我在做线框图的时候，和几个PD，以及我们的几个UED争论了很久，确认的面包屑 和搜索筛选的位置，结果到了视觉设计的时候，视觉设计师将我的面包屑调整到了不同的位置，为此还起了纠纷。因为这些位置的调整，是会影响之前确认的功能逻 辑的。 互联网的一些事