本文摘要：在UI设计中，原型设计并非是自己可有可无的工作环节。很多UI设计师存在一个误区，认为原型设计是他人的工作，而自己是负责实现的。事实上，这种想法不利于自己的成长和职业发展。今天...
在UI设计中，原型设计并非是自己可有可无的工作环节。很多UI设计师存在一个误区，认为原型设计是他人的工作，而自己是负责实现的。事实上，这种想法不利于自己的成长和职业发展。今天帝搜软件商学院就和大家分享原型设计的概念和意义，以及如何做出好的原型设计，希望大家对原型设计有更为全面的认识。
一个好产品，离不开好的原型设计。大到产品的整体架构，小到一个功能点的设计，都起源 于原型设计。UI设计师的未来职业发展方向之一是全链路设计师或者产品设计师，而优秀的原型设计能力就是必备技能之一。
有人会说：“UI设计师不需要画原型，那是是产品经理或交互设计师的工作。”这其实是非 常错误的观点。如果想要做出优秀的UI设计，画原型这一环节也是必不可少的。本文就从多 方面来探讨一下原型设计的重要性以及怎样做出好的原型设计。
一、基础认知
01. 什么是原型
原型是对一个产品的可视化呈现，主要传达一个产品的信息架构、内容、功能和交互方式。
它是产品功能和内容的示意图，一般包括线框图以及交互说明。原型是产品设计初期供整个 团队参考、讨论、评估的主要依据。之前讲过的需求文档也包含对功能和内容的说明，但原 型并不是简单地把需求文档图形化。
如果在需求分析的前期，设计师能够和产品经理等人员一同进行产品定位、竞品分析和用户 研究等工作，再根据研究结果、项目资源等情况来筛选和分析需求，加上自己的思考和设计 方法，把需求转化为设计方案，再细化成线框图和交互说明，最后形成一份能让双方达成共 识的原型文档。那么设计师接下来的工作就会比较顺利地进行下去，并且在团队中的话语权 也会逐步提升。
02. 为什么要画原型
原型具有快速创建、聚焦易用性、修改成本低等不可取代的优势。
快速创建是指设计师不需要考虑太多细节和视觉表现手法，可以快速出图；聚焦易用性是指 将产品设计的重点放到功能的易用性上，不会被视觉设计所干扰；修改成本低，是指线框图 比视觉设计稿更容易、更快速地修改，耗时短，效率高。
对于设计师来说，一个好的设计想法，如果没有清晰、标准的表达方式，其效果会大打折 扣。由于原型可以被快速创建、快速修改的特性，使得产品设计团队能够把多种设计方案种 做直观的对比试验，可以快速地进行可用性测试并直接地获得反馈，轻松修改或者放弃某些 设计方案。
对于项目组来说，原型是项目开发的标准和依据，通过设计原型，项目组人员能够更高地理解产品逻辑，将需求具体化，从而可以量化地评估视觉设计与开发的排期。在这里要注意的 是，原型的使用者不仅仅是视觉设计师和开发工程师，还有测试人员，可能有市场人员、甚 至法务人员等各种不同职能的人员，为了让这么多种不同的角色都能理解你的设计方案，原型务必要表达得直观、清楚、规范。
二、进阶理念
01. 从最简单的开始
很多设计师，当接到一个庞大需求的时候，总是没有思路，以至于迟迟不想打开软件。由于 需求太多太复杂，给了设计师太多的压力。其实，万丈高楼平地起，任何复杂的产品，都是 从基本功能开始的。在这里，有一些很简单的步骤，可以让你快速起步：
- 页面上要放置什么功能或内容；
- 排列这些功能的优先级；
- 如何表现这些功能的优先级；
- 依次设计每个部分的具体内容，逐渐增加细节；
02. 不要过分追求精致
设计精致的原型图固然很好，我们都喜欢精细打磨的设计。但是在设计初期，最好不要陷入 作图的细节里，人的注意力是有限的，我们应该重点关注功能的位置、类别、顺序、层次， 页面的逻辑关系。有很多优秀的设计师是使用纸和笔快速开始的，在初始的阶段，最重要的 是想法，而线框图的精致程度，不应当成为这一阶段所追求的目标。
03. 目的是讨论和优化
几年之前，我参加了阿里某产品设计师的一次讲座，他的观点之一就是：在产品设计的前期 不要怕改稿，原型图就是用来修改的。
我相信大部分设计师，都不喜欢改稿，但是我们制作原型的目的就是以此为依据进行讨论、 修改。否则到了视觉设计、甚至到开发阶段再修改，成本会比修改原型大很多。其实设计原 型的阶段，有一大半时间是要花在讨论、评审和优化上，这也是原型设计的意义所在。
04. 人人都要画原型图
一般的产品部门有产品经理、交互设计师、UI设计师这三个角色。当然很多公司没有专职的 交互设计，只有产品经理和UI设计师，UI设计师同时承担着交互设计的工作。
产品经理进行需求确认，交互设计师其实在做一种需求翻译的工作，将产品的商业需求，进 行具象化，并加入一些用户视角，设计线出框图。最后由UI设计师产出高保真视觉图。这三 种角色，在实际工作中，都应该通过画原型图，来优化自己的设计。但是，他们画原型图的 重点是不同的。
作为产品经理，画原型图有时是不可以避免的，产品经理需要通过画原型来细化思路，理清 产品的功能点、内容块和业务流程，帮助自己写好需求文档，以便更好传达自己的需求给其 他人员。还有一些概念性项目，需要根据原型来让老板认可并做决定。
而作为交互设计师，在画原型图是需要重点关注一下几点：
- 目标和流程——根据需求和目标，分析用户的操作流程，并且尽可能地简化操作流程；
- 布局和结构——内容或功能分为几类，应该采用哪种布局，使其更加易用；
- 位置和顺序——各个版块内容应该按照怎样的顺序进行排列，来引导用户的行为；
- 层次和轻重——各版块、内容的层次该怎样区分，优先级应该如何排序。
到了视觉阶段，UI设计师不管接到多么精致的线框图原型，也需要重新进行思考，不要当原 型上色师。我们需要结合目标用户特征、需求以及当下设计趋势，进行产品的风格定位。有 些时候要改变原型的位置和结构，以达到更好的效果。
要注意的是在修改之前，要同产品经理和交互设计师保持沟通，通过一些自己画的视觉原型 图，向他们表达一些视觉设计上的想法，毕竟每个角色都会有自己的知识盲区。当你的修改 意见取得了其他人的认可，就可以根据这一版本的原型，进入视觉设计的阶段。
三、设计实践
01. 原型设计的步骤
在这里我简要地说明一下原型设计的步骤，在之后的文章中我会展开其中的某一项详细说 明，请持续关注我之后的内容产出。
① 建立控件库
控件是指界面中所有的最小元件。
例如：按钮、图标、文本框、单选框、复选框、开关、图片占位符等控件。
② 建立组件库
组件是一种功能模块，它能够被重复使用，从而提升设计效率，并且可以保持界面的一致性 和规范性。
例如：图文列表、图文卡片、表格、筛选条件、文件上传、系统反馈、弹出框等组件。
③ 绘制流程图
流程图表达的是一个用户的操作过程，通常我们基于普通用户，如果时间和资源允许，也可 以绘制特殊用户的操作流程图。流程图的作用在于梳理和规范流程，在绘制流程图时，我们 要注意逻辑的清晰和完整，每一个流程分支都代表着用户的一个决策节点，需要我们进行深 入地思考和设计。
④ 设计关键页面
例如：首页、详情页、个人中心、设置等页面
⑤ 设计辅助页面
例如：注册登陆页、找回密码等页面
⑥ 设计关键功能故事板
故事板，顾名思义就是讲故事的板子。故事板可以帮助我们将用户角色，使用场景和使用流 程串联起来，将抽象的体验过程具象成图文结合的形式，使团队成员可以通过某个角色来观 察我们关键功能的使用场景，并观察用户的操作的流程，使产品设计师能够对用户体验进行 更直观和深入的挖掘和思考。
故事板三要素：角色、场景、情节。角色要说明包含几类用户群体；场景要说明包括几种使 用场景；情节要说明用户目标、触发事件、行为流程和行为结果。
⑦ 原型注释与交互说明
原型设计文档必须包含清晰的注释和交互说明。控件的不同状态、链接的指向、页面的跳 转、操作的结果、报错信息及其展示方式等交互说明内容，都需要在原型注释中用文字准确 的描述出来。
02. 原型设计的注意事项
我们在做原型设计时，要把原型的阅读者想象成对产品和设计一无所知的人，该怎样图文并 茂的展示产品的逻辑和功能，才能够让其通过原型来理解这个产品，需要注意以下几点：
- 使用灰度线框图：颜色和视觉效果会影响大家对易用性的判断；
- 清晰地展示流程：顺畅的操作流程是产品易用性最基本的标准。
- 关键功能要有故事板：角色、场景、情节，使团队人员更快、更好地理解产品。
- 要有注释和说明：图文并茂更能准确传达设计方案与想法。
- 一致性和规范性：优秀原型的元素、组件、页面甚至是文案用语的调性都规范一致的。
四、结语
本文从原型设计的基础认知到进阶理念，最后到设计实践，从多方面探讨了原型设计在整个 产品研发流程中的重要意义，以及该如何做出好的原型设计。写到最后，我发现还有很多要 展开详细讲的内容。在之后的文章中，我会持续地产出更多关于产品、交互方面的知识，以 及作为一名优秀的UI设计师应具备的多种设计能力。让我们一起成长进阶吧。
感谢阅读~
