让你的产品原型demo更具说服力.pdfVIP

让你的产品原型 demo 更具说服力 说是每周一篇译文，不过这事儿确实不能算是非常容易。从阅读，到筛选，到试译，到最终确定本 周的文章并完成译文，主要还是依靠每天抽些时间来做。还好，毕竟是自主行为，爱过，也仍在 爱着，这就是 UX 从业者兼翻译票友的节操有木有。默，我们进入今次的正文。 我(英文原文作者 )参与过很多产品的线框原型设计，包括我自己独立完成的，还有与其他设计师、 产品经理甚至是业务分析人员一起合作的。这很棒，因为在这个过程中我见识到了很多优秀的项目 。不过慢慢的我也发现了一些问题，一些大家时常会在原型制作过程当中忽略掉的要素；如果能注 意并解决掉这些问题，我们的交互设计产出物就可以发挥更大的实战价值。 下图所展示的是一个很典型的例子，我们通常会将这种风格的线框稿交付给相关同事来跟进视觉设 计或原型测试的工作。 这种线框稿确实能比较清晰的描述出页面元素的布局方式，但也仅此而已。它所缺少的是与其他设 计师、开发人员以及被测用户之间的沟通能力。接下来，我们将一起看一看有哪些方法可以帮助我 们提升线框原型在这方面的表现。 1.通过明暗对比来描述模块之间的视觉优先级 哪些内容是需要用户在页面上最先注意到的？他们的视线应该聚焦到什么位置？我们希望用户执行 什么操作？这些问题不能简单的丢给视觉设计师来考虑，而上图所示的线框原型显然无法帮助交互 设计师传达这方面的信息。 首先，根据产品需求及用研方面的实际情况，作为产品人员或交互设计师，我们自身应该对以上这 些方面的信息了如指掌；在此基础上，为最原始的线框稿添加视觉优先级。具体实施起来其实很 简单，将所有的深色 线框“ ”移除掉，使用不同明度的灰色作为背景色来界定页面和模块的边缘，并籍 简单，将所有的深色 线框“ ”移除掉，使用不同明度的灰色作为背景色来界定页面和模块的边缘，并籍 此表达不同元素之间的视觉优先级。相比于之前纯粹线框风格的设计稿，我们可以在下图中明显的 感受到元素与模块之间的优先级关系，例如酒店信息推荐及右侧预定表单当中的操作按钮都可以在 很短的时间内抓住我们的目光。 这种方式并不意味着交互设计师正在扮演着视觉设计师的角色，我们并不是在表达 这个元素的背景“ 色要比另外一个元素的更深一些 ”，这些明暗关系所要体现的只是哪些元素需要突出，哪些元素要 相对弱化；而最终的视觉表现形式仍然应该由视觉设计师来掌控。 2.使用真实的数据内容 对于线框原型当中的范例内容，包括导航元素的标题、表单标签、介绍文案、图标等等，我们都应 该尽量使用最贴近生产环境的真实数据。这种方式可以更有效的帮助我们规划界面元素的布局，并 针对实际环境中有可能产生的极端数据情况制定预防性的方案，确保页面结构的坚固性。 更重要的是，使用真实数据作为范例内容的线框原型可以在接下来的可用性测试当中更具表现力和 说服力，被测用户不需要依靠主持人的描述或自己的猜测就可以在原型当中获取到比较准确的信息 。另外，真实数据也可以创造出一种更贴近实际产品的使用氛围，这可以使被测用户更加投入。对 于测试人员来说 (主持人、观察员 )，我们可以设计出更具有针对性的任务或问题，可以在测试过程 中对被测用户进行更加深入的观察；相应的，最终收集到的反馈信息也会更加真实有效。 仍以酒店的范例原型为例，诸如 你能找到这个酒店的特色服务信息吗？“ ”这样的问题是欠妥的，因 为这就相当于告诉被测用户，在页面当中的某个地方存在着这样的信息，他们接下来就只会根据这 条线索去寻找。多数情况下必然能够找到，但这样的反馈对于我们是没有意义的。 如果在测试当中使用由真实数据构建起来的原型，那么情况就会好很多，我们可以问被测用户 你对“ 这家酒店的感觉如何？ ”，这会使我们获取有效反馈的机会大大的增加。用户会根据这样的问题进行 更加自主的信息浏览行为，他们有可能会回答 这个酒店看上去不错，不过他们提供家庭泳池，我真“ 的不大喜欢小孩在酒店当中跑来跑去。 ” 通过这类反馈，我们可以了解到用户不仅注意到了页面当中的重要元素，而且他们对其中的具体内 容也做出了真实的思考。可以说，通过一套无真实数据内容的线框原型，我们能够测试产品的可 用性，而使用了真实数据作为范例内容线框原型则可以更加全面的帮助我们测验产品的用户体验。 要了解更多原型测