原型图设计指南：从基础到精通

大家好，欢迎来到IT知识分享网。

用户体验设计师和原型设计的主要功能 PM、网站开发工程师通过展示产品内容、结构和粗略布局来沟通最初产品设想的重要工具，说明用户将如何与产品互动，而不是视觉设计。在大厂中，岗位分工更加细致明确，大部分原型都是产品经理做的，而在中小企业中，设计师更应该具备制作原型的能力。在原型图阶段，设计师需要与产品经理沟通，而不是产品经理向设计师发出需求，而是他们需要在自己擅长的方面相互沟通。如果有一个好用的原型图设计工具，那么无论是设计师还是产品经理们制作原型图的效率都会大大提升。

不同类型的原型

设计中还需要注意原型的类别。每个项目启动时，对原型的需求可能不一样，交流的对象可能会混淆原型的类别，认为线框图（Wireframe）、原型（Prototype）和视觉稿（Mockup）这是一件事，在设计开始之前，最好先和产品经理/甲方确认要画什么样的原型。

虽然三类输出效果不同，但本质上是一样的，服务于设计和开发。因此，在产品研发中，没有硬性规定哪个类别的原型图必须先输出，一切以实际研发过程中的要求为准。

交互式设计原则

在原型设计中，交互设计是一个重要环节，了解交互设计原则，能够为交互设计提供更多的设计支持。

Fitts’ Law / 菲茨定律(费茨定律)

目标越远，越难到达。目标越小，越难点中。如果我们想让鼠标快速命中目标，我们可以采取两种措施，要么减少鼠标与目标的距离，要么使目标足够大。

Hick’s Law / 席克法则(希克法则)

一个人面临的选择越多，他需要做出决定的时间就越长。人机交互界面中的选项越多，用户做决定的时间就越长。

神奇数字7±2法则

人的头脑最佳状态可以记忆7（±2)信息块，在记忆中 5-9 项目信息后开始出错。类似于席克定律，神奇的数字 7±2 规则也常用于移动应用交互设计，例如应用的选项卡不会超过 5 个。

The Law Of Proximity 接近法则

根据格式塔（Gestalt）心理学：当对象离得太近时，意识会认为它们是相关的。在交互设计中，提交按钮会紧挨着一个文本框架，所以当相互靠近的功能块不相关时，就意味着交互设计可能有问题。

Tesler’s Law 泰思勒定律(复杂守恒定律)

该定律认为，每个过程都有其固有的复杂性，并且有一个临界点。如果超过这个点，过程就不能简化。你只能把固有的复杂性从一个地方移到另一个地方。例如，对于电子邮件地址的设计，收件人的地址不能简化，但发件人可以通过客户端的整合来转移其复杂性。

新乡重夫：防错原则

防错原则认为，大多数事故都是由设计疏忽引起的，而不是人为操作疏忽引起的。通过改变设计，可以最大限度地减少错误。这个原则最初是用于工业管理的，比如硬件设计，USB 插槽。在界面交互设计中，经常可以看到。例如，当使用条件不符合要求时，它经常表示功能故障(通常按钮会变成灰色，不能点击)，以避免误按。

Occam’s Razor 奥卡姆剃刀原理(简单有效原理)

这就是所谓的原则「如果没有必要，就不要增加实体」，也就是说，如果有两个功能相等的设计，那么选择最简单的。

Steering Law 转向定律

触控技术（Touch）应用：

• 0°方向是最有利于操作者移动的方向，具有较好的视觉反馈，成功率相对较高；
• 120°用户操作方向最困难，在用户界面交互设计中应尽量少用；
• 在各个方向的运动中，用户的手指宽度低于 14 像素的 Touch 这是最糟糕的用户体验。

帕累托定律(80/20原则)

在任何一个大系统中，大多数效果只是由几个变量决定的。用户 80% 时间花在了这里 20% 的功能上。

事实上，交互法则看起来有点无聊，但生搬硬套可能无法应用。列出以上设计原则更多的是参考设计，结合设计原则是提高设计说服力的有效途径。

完整的原型图

除了根据需求文档设计所有页面和串联页面之外，一套完整而专业的原型图还包括一些容易被忽视的地方，因为原型图交付的不仅仅是需求方，还有设计师和开发人员。

原型图标，绘画开发可以理解的图标。

对于设计师来说，原型图是查看产品功能页面和逻辑路径。对于开发者来说，除了产品框架的构建，他们最关心的是产品使用中的边界条件和页面跳转关系。原型设计中需要绘制功能的所有交互状态，因此原型图标记包括:定义每个标记点的含义和事件，梳理所有对象和逻辑关系，区分和标记状态和模块化。

定义每一个标记点的含义和事件

在标记交互稿之前，对每个标记的含义进行定义和规范，形成统一的规范，使团队成员容易理解。例如，标记功能用水滴表示，页面跳转关系用圆形+箭头表示。

模块化区分和标记

对状态进行梳理后，再将产品用例写在原型图上，每一个功能都做成一个模块，有利于以后的维护和迭代。

所有的交互状态都显示在同一页面上。

当项目开始一段时间后，原型中的标记会逐渐增加。很多开发设计都没有耐心看到原型图上的各种标记，所以在设计开发的时候尽量把所有的交互状态都显示在一个页面上，避免看到遗漏。

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

对产品业务的逻辑关系进行流程图梳理，常用的流程图分为单向流程图和泳道图(涉及多个角色)。单向流程图一般描述单个角色完成某项任务的整个过程，如登录登记流程、支付流程、填写资料等。

绘制过程图应注意以下几点：保证产品流程的合理性；有效地传达需求；检验异常分支。

以上就是简单梳理的日常工作设计原型图中容易被忽略的内容。