导读：本文是节选自新书《A Practical Guide to Web App Success》的第15章。作者Dan Zambonini在本文中将向我们阐述Web应用在原型阶段的设计与测试工作的重要性，并从实际执行的角度出发，介绍一些经验方法和常用工具。

　　产品在原型阶段的设计与测试工作，是决定一款移动应用能否成功的重要因素。提到原型设计和用户测试，人们往往容易产生厌倦与回避的感觉。这也不奇怪，在很多实际项目中，这方面的工作似乎就是“随意性强”，“耗时”，“高成本”一类的代名词。

　　不过在我看来，它们其实是整个设计流程里最重要的环节。无论你或你的团队在用户界面视觉设计等方面有多高的造诣，我都建议各位对原型环节的相关工作提高重视。基于高保真原型的用户测试，可以让很多关于需求、功能、界面设计等方面的潜在问题尽早暴露出来；这类问题往往直接关乎着产品的成败。

　　另外，原型阶段的工作非但不代表“耗时”与“高成本”，实际上正相反。从整个项目的角度讲，在原型的设计与测试过程中发现问题并加以解决，比将问题留到视觉设计和开发流程中再处理，要省时省力的多。

　　原型设计

　　原型设计工作需要相关人员具备交互设计、构图、网格系统、风格继承等方面的知识技能。如果你在一个小团队内工作，尽量让相关同事也参与到原型设计的工作中，从每个职能角度提出意见和建议。如果你们在为客户开发移动应用，那么在这个阶段要与他们尽可能多的进行需求沟通，保证及时有效的反馈与迭代。

　　不过有一点需要注意，在参与原型设计的人员范围方面要做好把握。参与者应该包括与产品功能决策相关的产品及设计等上下游职能人员。我在实际项目中碰到过很多次这样的情况，就是开发部门的技术人员在原型设计阶段进行了过多的介入，除了常规的技术评审之外，还提出了很多以技术开发为中心的原型设计建议，这显然是本末倒置的。

　　1、选择最重要的视图界面

　　如果你有足够多的时间及技术资源去为每个视图界面都创建对应的线框原型，这也不坏。不过通常情况下，你只需要搞几个最重要的、最具代表性的界面就OK了；其他多数可以通过同一张原型图去代表。

　　举例说，Twitter和Facebook的首页动态与用户个人界面在形式上是很相似的，用一个原型就可以解决了。对这两个应用来说，真正必要的关键视图界面原型只有大约4个的样子，包括用户注册、动态列表、用户搜索和用户搜索结果等。

　　对于“最小可用产品”（Minimum Viable Product，MVP），那么4到5个关键屏已经足够多了。在后续的功能开发和迭代的过程中，可以再继续为那些相对独立的、非最简化核心的功能界面设计新的原型。

　　2、列出视觉元素

　　接下来，列出所有需要用到的视觉元素，包括文本、按钮、表单、图形、菜单等；不要忘记那些默认不会显示出来的元素，比如警告和出错信息、状态提示、操作反馈等。对于简单的项目，使用纸和笔来完成这步工作就够了。

　　由于这些UI元素是需要被复用的，所以在使用它们构建原型的时候，我们可以从最重要的视图界面入手，也就是包含了最多内容结构和功能的、用户会花很多时间进行浏览和操作的界面。这样可以尽早确保UI元素的功能合理性。

　　回到我们的烹调app上（贯穿本书前几章的演示案例），从“最小可用产品”的角度，我们只需要一个主要功能：查找食材。在主界面中，包含的视觉元素及模块大致有：

　　● 搜索框

　　● 搜索失败的提示

　　● 热门搜索关键词

　　● 随用户输入而显示的搜索建议

　　● 饮食分类，包括素食、健康、低糖等

　　● app的功能服务简述

　　● 添加食材的入口链接

　　● 用户的最近搜索关键词

　　● logo