原型与原型图

　　“原型”的最基本定义是“最终产品的仿真或样本版本，用于发布之前方便测试。”原型的目标是在花费大量时间和金钱进入开发产品前，让开发者快速的了解产品创意。

　　原型图简单的来说，就是一款产品成型之前的一个简单的框架，就是将页面的排版布局展现出来，每个功能键的交互，使产品的初步构思有一个可视化的展示。原型图对于是否能启动开发起着至关重要的作用。它还可以提前避免需要改进的地方。假设你用你的产品理念的草案给客户演示，你会如何想如何设计该产品。然后，您可以不断的调整您的初始猜测并修改原型。

　　原型设计是什么

　　原型设计是交互设计师与PD、PM、网站开发工程师沟通的最好工具。而该块的设计在原则上必须是交互设计师的产物，交互设计以用户为中心的理念会贯穿整个产品。利用交互设计师专业的眼光与经验直接导致该产品的可用性。

　　一个好产品，离不开好的原型设计。大到产品的整体架构，小到一个功能点的设计，都起源于原型设计。UI设计师的未来职业发展方向之一是全链路设计师或者产品设计师，而优秀的原型设计能力就是必备技能之一。

　　原型图的作用

　　1.探索与实验

　　原型的本质是一种测试工具，根据自己的需求探索网站功能或方向，从而实验一些想法是它最为主要的目的。我们不妨先搭建一个简单的网站原型开始，只将必备的基本信息和功能体现出来，然后开始测试，甚至可能在纸上绘制草图即可。当一个企业想开发一款产品时，那么绝大多数企业本身并不懂得互联网知识，与外包公司沟通清楚业务流程和需求后，其实并不知道想象得到，自己的产品的表现形态。

　　那么原型图就可以让自己提前看到，产品的界面样式，每个按钮的功能和效果，也可以看到产品的基本框架，和运作机制，获得比较真实的感受。

　　2.理解与验证

　　当我们接收到一个个分散的需求点时，我们需要做的是将分散的需求点具象成可视化的闭环，这时就可以通过绘制原型图来展示网站需求的视觉效果，直观的看到网站成品交付时的理想状态，因此越贴近理想状态的原型图，也就越合格。因为原型图不是最终设计稿，当有需求需要修改，或者逻辑交互不符合需求时，修改起来也是比较方便，不会很麻烦，能够在开发前排除相当一部分的潜在问题和故障。

　　就如很多时候你并不知道自己想要什么，可以试着绘制一个简单的原型图来展示自己的想法。或者在接收到不全面的需求，以及没有充分理解需求的真实意图时，通过原型图展示你对需求挖掘和分析的结果，可以有效验证该需求的可行性。

　　3.交付与对接

　　原型图是一个可以起到很好展示作用的有力工具，更是产品经理向执行团队进行阐述和说明需求的高效工具，可以借助原型图对网站布局和功能等进行一一说明，给开发团队提供一个清晰的概念，清楚各自的职责是要做什么，是怎样的一个逻辑，明确目标才能够根据各自的职责进行网站开发。在企业方确定了原型图后，接下来作为UI的设计人员，直接看原型图，根据原型图设计相关的界面和交互，因为UI设计人员，没有与企业方直接沟通过需求，不能理解产品的真实意图，给设计人员提供一份原型图，能很好的节省沟通成本。

　　开发人员也可以很快速的理解到产品的样式和需求，以及功能点，如果没有原型图，开发人员就会出现很多想当然的情况，结果做出来的功能不是自己想要的，最后就会出现需求和开发互相推卸的情况。

　　其实最后会发现，原型图让大家都能参与到项目中来，让产品往预期的方向推进，并能得出解决方案，也省去很多沟通的时间成本。

　　原型设计的步骤

　　在这里我简要地说明一下原型设计的步骤，在之后的文章中我会展开其中的某一项详细说明，请持续关注我之后的内容产出。

　　①建立控件库

　　控件是指界面中所有的最小元件。

　　例如：按钮、图标、文本框、单选框、复选框、开关、图片占位符等控件。

　　②建立组件库

　　组件是一种功能模块，它能够被重复使用，从而提升设计效率，并且可以保持界面的一致性和规范性。

　　例如：图文列表、图文卡片、表格、筛选条件、文件上传、系统反馈、弹出框等组件。

　　③绘制流程图

　　流程图表达的是一个用户的操作过程，通常我们基于普通用户，如果时间和资源允许，也可以绘制特殊用户的操作流程图。流程图的作用在于梳理和规范流程，在绘制流程图时，我们要注意逻辑的清晰和完整，每一个流程分支都代表着用户的一个决策节点，需要我们进行深入地思考和设计。

　　④设计关键页面

　　例如：首页、详情页、个人中心、设置等页面

　　⑤设计辅助页面

　　例如：注册登陆页、找回密码等页面

　　⑥设计关键功能故事板

　　故事板，顾名思义就是讲故事的板子。故事板可以帮助我们将用户角色，使用场景和使用流程串联起来，将抽象的体验过程具象成图文结合的形式，使团队成员可以通过某个角色来观察我们关键功能的使用场景，并观察用户的操作的流程，使产品设计师能够对用户体验进行更直观和深入的挖掘和思考。

　　故事板三要素：角色、场景、情节。角色要说明包含几类用户群体；场景要说明包括几种使用场景；情节要说明用户目标、触发事件、行为流程和行为结果。

　　⑦原型注释与交互说明

　　原型设计文档必须包含清晰的注释和交互说明。控件的不同状态、链接的指向、页面的跳转、操作的结果、报错信息及其展示方式等交互说明内容，都需要在原型注释中用文字准确的描述出来。

　　原型设计的注意事项

　　我们在做原型设计时，要把原型的阅读者想象成对产品和设计一无所知的人，该怎样图文并茂的展示产品的逻辑和功能，才能够让其通过原型来理解这个产品，需要注意以下几点：

　　使用灰度线框图：颜色和视觉效果会影响大家对易用性的判断；

　　清晰地展示流程：顺畅的操作流程是产品易用性最基本的标准。

　　关键功能要有故事板：角色、场景、情节，使团队人员更快、更好地理解产品。

　　要有注释和说明：图文并茂更能准确传达设计方案与想法。

　　一致性和规范性：优秀原型的元素、组件、页面甚至是文案用语的调性都规范一致的。