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

Sponsor

在UI设计中，原型设计并非是自己可有可无的工作环节。很多UI设计师存在一个误区，认为原型设计是他人的工作，而自己是负责实现的。事实上，这种想法不利于自己的成长和职业发展。今天设计达人和大家分享原型设计的概念和意义，以及如何做出好的原型设计，希望大家对原型设计有更为全面的认识。

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

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

一、基础认知

01. 什么是原型

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

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

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

02. 为什么要画原型

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

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

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

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

二、进阶理念

01. 从最简单的开始

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

1. 页面上要放置什么功能或内容；
2. 排列这些功能的优先级；
3. 如何表现这些功能的优先级；
4. 依次设计每个部分的具体内容，逐渐增加细节；

02. 不要过分追求精致

设计精致的原型图固然很好，我们都喜欢精细打磨的设计。但是在设计初期，最好不要陷入 作图的细节里，人的注意力是有限的，我们应该重点关注功能的位置、类别、顺序、层次， 页面的逻辑关系。有很多优秀的设计师是使用纸和笔快速开始的，在初始的阶段，最重要的 是想法，而线框图的精致程度，不应当成为这一阶段所追求的目标。

03. 目的是讨论和优化

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

我相信大部分设计师，都不喜欢改稿，但是我们制作原型的目的就是以此为依据进行讨论、 修改。否则到了视觉设计、甚至到开发阶段再修改，成本会比修改原型大很多。其实设计原 型的阶段，有一大半时间是要花在讨论、评审和优化上，这也是原型设计的意义所在。

04. 人人都要画原型图

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

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

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

而作为交互设计师，在画原型图是需要重点关注一下几点：

1. 目标和流程——根据需求和目标，分析用户的操作流程，并且尽可能地简化操作流程；
2. 布局和结构——内容或功能分为几类，应该采用哪种布局，使其更加易用；
3. 位置和顺序——各个版块内容应该按照怎样的顺序进行排列，来引导用户的行为；
4. 层次和轻重——各版块、内容的层次该怎样区分，优先级应该如何排序。

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

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

三、设计实践

01. 原型设计的步骤

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

① 建立控件库

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

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

② 建立组件库

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

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

③ 绘制流程图

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

④ 设计关键页面

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

⑤ 设计辅助页面

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

⑥ 设计关键功能故事板

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

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

⑦ 原型注释与交互说明

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

02. 原型设计的注意事项

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

1. 使用灰度线框图：颜色和视觉效果会影响大家对易用性的判断；
2. 清晰地展示流程：顺畅的操作流程是产品易用性最基本的标准。
3. 关键功能要有故事板：角色、场景、情节，使团队人员更快、更好地理解产品。
4. 要有注释和说明：图文并茂更能准确传达设计方案与想法。
5. 一致性和规范性：优秀原型的元素、组件、页面甚至是文案用语的调性都规范一致的。

四、结语

本文从原型设计的基础认知到进阶理念，最后到设计实践，从多方面探讨了原型设计在整个 产品研发流程中的重要意义，以及该如何做出好的原型设计。写到最后，我发现还有很多要 展开详细讲的内容。在之后的文章中，我会持续地产出更多关于产品、交互方面的知识，以 及作为一名优秀的UI设计师应具备的多种设计能力。让我们一起成长进阶吧。

感谢阅读~

作者：UX_Milk，个人主页：https://www.zcool.com.cn/u/2296261

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。