超全面的 UI 工作流程指南（二）：原型设计

编者按：完 UI 设计流程到底是怎样的？从需求到产品上，要经历少个阶段，每个阶段有哪应该掌握的基础识，次优设独家题为你从零开始梳理出 UI 工作流程，合新手阅读学习。

原型设计的主要用，是用户验设计师与 PM、网站开工程师沟通最初的产品设想的重要工具，展示产品内容和结构及粗略的局，说明用户将何与产品进行互，而不是视设计。

在大中，职位分工更为细致明确，大原型是由产品经理的，而中小企业里，更的是设计师也要具备原型的能力。原型图阶段中设计师需要和产品经理沟通需求，并不是产品经理向设计师下需求，而是需要相互就自己擅长的方面进行沟通。

原型类型区别

设计时原型的类别也需要关注，每个项目启动时对原型的需求不一定相同，流的对象也有能对原型的类别产生混淆，以为框图（Wireframe）、原型（Prototype）和视稿（Mockup）是一个东西，设计开始前最先与产品经理/甲方确认要绘什么类型的原型。

三种类别虽产出效果不同，但在质上是一样的，为设计开服务，所以在产品研时，并没有硬规定一定先产出哪一个类别的原型图，一切以际研程中的要求为准。

交互设计原则

互设计为原型设计里的重要节，互设计原则，给互设计提供更设计支持。

1. Fitts’ Law / 菲茨定律（费茨法则）

目标离的越远，到达就越是费劲。目标越小，就越难点中。果我们要想鼠标比快速地命中目标以采取两个措施，要么减少鼠标与目标之间的距离，要么使目标够大。

2. Hick’s Law / 席克定律（希克法则）

一个人面临的选择越，所需要出决定的时间就越长。在人机互中界面中选项越，意味着用户做出决定的时间越长。

3. 神奇数字7±2法则

人类头脑最的状态能忆含有7（±2）项信息块，在忆 5-9 项信息就开始出错。与席克定律类似，神奇数字 7±2 法则也经常被应用在移动应用互设计上，应用的选项卡不超 5 个。

4. The Law Of Proximity 接近法则

根据式塔（Gestalt）心理学：当对象离得太近的时，意识认为它们是相关的。在互设计中表现为一个提按钮紧挨着一个文框，因此当相互靠近的功能块是不相关的，就说明互设计能是有问题的。

5. Tesler’s Law 泰思勒定律（复守定律）

该定律认为每一个程有其固有的复，存在一个临界点，超个点程就不能简化，你只能将固有的复从一个地方移动到另外一个地方。对邮箱的设计，收件人地址是不能简化的，而对件人却以通客户端的集成来转移它的复。

6. 新重夫：防错原则

防错原则认为大部分的意外是由设计的疏忽，而不是人为操疏忽。通改变设计以把失降到最低。该原则最初是用工业管理的，在硬件设计上的 USB 插槽。而在界面互设计中也是以经常看到，当使用条件没有满时，常常通使功能失效来表示（一般按钮变为灰无法点击），以避免误按。

7. Occam’s Razor 奥卡姆剃刀原理（简单有效原理）

个原理被称为「无必要，勿增」，即有两个功能相等的设计，么选择最简单的。

8. Steering Law 转向定律

触控技术（Touch）应用：

• 0° 方向利于操作者移动的方向，具较好的视觉反馈，功率相对高；
• 120° 方向用户在操时最为困难，在用户界面互设计中应尽少使用；
• 用户手指在各个运动，宽度低于 14 像素 Touch 是用户体验最。

9. 帕累托律（80/20原则）

任何系统中，部分的效果仅少数几项变决。用户 80% 的时间花了 20% 的功能。

其互定律看来有点枯燥，生搬硬套其并不一定能套上去，列举以上的设计原则更的是为设计做参考，结合设计原则，是提升设计说服力的有效方法。

更多详细设计法则和完案例请查看优设专题 → 《19条经典理论让你设计更有说服力！》

完整的原型图

套完专业原型图，除了按照需求文档设计出所有页，串联页以，括些让容易疏忽地，为原型图所交付并不有需求，有设计师与开发员。

1. 原型图标注，画开发看得懂的图

原型图于设计师来说，是为了查看品功能页与逻辑路径。于开发员来说，除了品框架搭，他们最关心内容是品使用边界条件、页跳转关系。原型设计时需要画出功能所有交互状态，此原型图标注括：定义好个标注含义和事件，梳理所有象和逻辑关系，状态、模块化区分和标记。

定义好个标注含义和事件

在做交互稿标记前，定义规范好个标记含义，形成统规范，使团队成员易于理解。如，用滴表示标注功能，用圆圈+箭头形来标识页跳转关系。

梳理所有对象和逻辑关系、状态

下面的原型图标注以饿么家详情页结订单为例，先用思脑图梳理功能状态，样能避免遗漏一边界条件。

模块化区分标记

梳理好状态后再原型图写产品用例，每功能一模块，利于往后的维护迭。

2. 在同一个页面展示所有的交互状态

当项目开始一段间后，型的标注会逐渐变多，多的开发和计，没有耐心型图上的各种标注，所以尽量能一个页面上显示出所有的交互状，避免计开发漏。

3. 流程图，梳理业务逻辑关系

流程图梳产务的逻辑系，的流程图分为单向流程图和泳道图（涉及到多个角色）。

向流程图一描述一角色完成某个任的整体过程，如登录注册过程、支付流程、填写资料等。

绘制流程图需注意以下几点：

• 确保产品流程的理性；
• 效传达需求；
• 检验异常分支。

以上简的梳理了一下日常工作计型图中容易让人忽略的内容。

设绘制专业的原型图，可参阅这两篇文章：

• 《超全面总结！如何画出专业的型图？（上）》
• 《超全面总结！如何画出专业的原型图？（下）》

4. 关于原型工具

Axure

官网链接：http://www.axure.com/

很有名的原设计工具，算是日工作中最的原工具，成名很早，很多设计师、产经都有它。它除了够效率制作产原，快速绘制线框图、流程图、架构图、示意图、HTML 模外，还支持 java script 交互的实现，并生成 Web 格式上传到 Axure share 分享浏览。

当然，目前面上有很多种原工具，例如墨刀、摩客、ProtoPie 等，都适合于原交互设计。当然择哪个工具要看你自己，你的需求是么，最适合自己工作流程的工具是哪种，有没有电脑系统的要求等等。

5. 推荐设计应用Figma

官链接：https://www.figma.com/

Figma 是一个完全免费的在线计软件，支持 Windows 和 macOS 等多个，是可以让整个队的成员同查并修改协作的。使用过 Sketch后，上 Figma 乎没有难度。

原设计

在 figma 里面，你可无缝成从设计到原演示的切换，需要反复同步设计图到第方平台，并且可利 Figma Mirror 在手机上预览效果。单击播放图标将进入演示模式，可在中实时查看已成的原。

实时协作+置评论

在 Figma 里，设计和协作可是同时进行的，任何人都可在设计图的任何地方添评论，你可在评论中@他人或将评论标记为已解决。

欢迎添加作者交流：