什么是原型设计？请看这份简明指南设计达人

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

有人会说：“UI设计师不需要画原型，那是是产品经理或交互设计师的工作。”这其实是非常错误的观点。如果想要做出优秀的UI设计，画原型这一环节也是必不可少的。本文就从多方面来探讨一下原型设计的重要性以及怎样做出好的原型设计。

01.什么是原型

原型是对一个产品的可视化呈现，主要传达一个产品的信息架构、内容、功能和交互方式。

它是产品功能和内容的示意图，一般包括线框图以及交互说明。原型是产品设计初期供整个团队参考、讨论、评估的主要依据。之前讲过的需求文档也包含对功能和内容的说明，但原型并不是简单地把需求文档图形化。

如果在需求分析的前期，设计师能够和产品经理等人员一同进行产品定位、竞品分析和用户研究等工作，再根据研究结果、项目资源等情况来筛选和分析需求，加上自己的思考和设计方法，把需求转化为设计方案，再细化成线框图和交互说明，最后形成一份能让双方达成共识的原型文档。那么设计师接下来的工作就会比较顺利地进行下去，并且在团队中的话语权也会逐步提升。

原型具有快速创建、聚焦易用性、修改成本低等不可取代的优势。

快速创建是指设计师不需要考虑太多细节和视觉表现手法，可以快速出图；聚焦易用性是指将产品设计的重点放到功能的易用性上，不会被视觉设计所干扰；修改成本低，是指线框图比视觉设计稿更容易、更快速地修改，耗时短，效率高。

对于设计师来说，一个好的设计想法，如果没有清晰、标准的表达方式，其效果会大打折扣。由于原型可以被快速创建、快速修改的特性，使得产品设计团队能够把多种设计方案种做直观的对比试验，可以快速地进行可用性测试并直接地获得反馈，轻松修改或者放弃某些设计方案。

对于项目组来说，原型是项目开发的标准和依据，通过设计原型，项目组人员能够更高地理解产品逻辑，将需求具体化，从而可以量化地评估视觉设计与开发的排期。在这里要注意的是，原型的使用者不仅仅是视觉设计师和开发工程师，还有测试人员，可能有市场人员、甚至法务人员等各种不同职能的人员，为了让这么多种不同的角色都能理解你的设计方案，原型务必要表达得直观、清楚、规范。

01.从最简单的开始

很多设计师，当接到一个庞大需求的时候，总是没有思路，以至于迟迟不想打开软件。由于需求太多太复杂，给了设计师太多的压力。其实，万丈高楼平地起，任何复杂的产品，都是从基本功能开始的。在这里，有一些很简单的步骤，可以让你快速起步：

02.不要过分追求精致

03.目的是讨论和优化

几年之前，我参加了阿里某产品设计师的一次讲座，他的观点之一就是：在产品设计的前期不要怕改稿，原型图就是用来修改的。

04.人人都要画原型图

一般的产品部门有产品经理、交互设计师、UI设计师这三个角色。当然很多公司没有专职的交互设计，只有产品经理和UI设计师，UI设计师同时承担着交互设计的工作。

产品经理进行需求确认，交互设计师其实在做一种需求翻译的工作，将产品的商业需求，进行具象化，并加入一些用户视角，设计线出框图。最后由UI设计师产出高保真视觉图。这三种角色，在实际工作中，都应该通过画原型图，来优化自己的设计。但是，他们画原型图的重点是不同的。

作为产品经理，画原型图有时是不可以避免的，产品经理需要通过画原型来细化思路，理清产品的功能点、内容块和业务流程，帮助自己写好需求文档，以便更好传达自己的需求给其他人员。还有一些概念性项目，需要根据原型来让老板认可并做决定。

到了视觉阶段，UI设计师不管接到多么精致的线框图原型，也需要重新进行思考，不要当原型上色师。我们需要结合目标用户特征、需求以及当下设计趋势，进行产品的风格定位。有些时候要改变原型的位置和结构，以达到更好的效果。

要注意的是在修改之前，要同产品经理和交互设计师保持沟通，通过一些自己画的视觉原型图，向他们表达一些视觉设计上的想法，毕竟每个角色都会有自己的知识盲区。当你的修改意见取得了其他人的认可，就可以根据这一版本的原型，进入视觉设计的阶段。

01.原型设计的步骤

①建立控件库

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

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

②建立组件库

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

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

③绘制流程图

④设计关键页面

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

⑤设计辅助页面

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

⑥设计关键功能故事板

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

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

⑦原型注释与交互说明

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

02.原型设计的注意事项

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