打造交互设计狮“最强大脑”，高效绘制交互原型的方法

如果有人问你，交互设计狮是做啥？可以简单来说，就是绘制交互原型。

那么不就是画画图吗？

然而，其实对于交互设计狮来说，在动手的同时，还要考虑到这些，如下：

交互设计表现的难点在于将上面负责内容有效的、规范的、和谐的、可扩展的组织起来，使用户能迅速知道自己要做什么、怎么做、而操作时能很爽地完成这个步骤并进入下一个步骤。

交互设计狮的“最强大脑”，就在于高效地解决上述所说的难点，这里提供高效绘制交互原型的方法论，以腾讯游戏为例。

 

 

还是那句老话：学海无涯，方法是岸。

以下是交互设计的一般步骤：本文主要围绕着流程规划，界面规划→绘制主框架，绘制主要界面，绘制交互细节这几个部分展开（如下图绿色部分）。

内容包括：

1、绘制原型前的准备工作；

2、游戏场景/主框架的绘制方法；

3、功能场景的绘制方法；

4、细节的绘制方法；

5、界面与界面间关系的表达；

6、绘制原型的要点。

————————————————————————————————分割线

绘制原型前的准备工作

假设需求分析，场景分析和用户分析已经明确了，

1、设计产品功能的主任务流程，规划任务之间的关联方式，如下：

以上为腾讯欢乐斗地主的主任务流程，这里不用将流程分的太细，按照主功能来进行流程切分。

2、规划所有主要界面及之间的关系，规划个界面上需要的内容、功能、动态事件。
①首先可以利用思维导图工具来对界面信息进行整合，如下图：

②然后再对每个界面内容的板块进行细化，如下图：

③确认各场景界面的目标和重点，

步骤如下：

1、过一遍用户体验地图；

2、用KANO模型来定义好你的服务类型；

3、分析竞品；

4、进行设计评估。

这里可以参考我之前总结的一篇文章：开始设计之前，如何检查

如下图：

④咨询视觉设计师关于情景化设计的方向，包括布局，风格等，这样也有助于交互方案视觉设计上达成一致。

⑤游戏布局的分类包括：游戏场景的布局，功能场景的布局，细节的布局。

PS：对于流程化的电商布局分类包括：购买主流场景的布局（首页，列表页，商品详情，购物车，结算页），功能场景的布局，细节的布局。

 

⑥常见的布局结构：

游戏场景，主框架的绘制方法

游戏场景布局的设计目标：促成玩游戏，结构清晰，其一般步骤是：

• 确认游戏核心玩法内容及其样式——按玩法设计或按模拟现实布局
• 确认必须要放在某处的元素及其形式——按照规范和行业规则布局
• 确认重要的元素的位置——按照重要程度和需要频率布局
• 合理的见缝插针，补齐剩余元素——合理权衡、补齐元素

1、根据游戏核心玩法制定样式布局：

按玩法设计布局，例如消除类游戏为格状布局，攻防类游戏为曲线散点布局等。

按模拟现实场景布局， 复杂的游戏多采用环绕式布局，例如德州扑克为圆桌环绕型布局，clash of clan为自定义部落型布局等。

2、遵循常规和规范，减少用户学习成本：

按照设备或平台规范放置软件层级通用内容，比如IOS设计规范，PC界面常规等：

按照对应游戏通用设计方式放置，观察市面上主流的游戏，基本上能从界面设计上看到共同之处，如网页游戏通常将常用功能入口和玩家重要信息放在页面左上角，将少用功能入口放在右上角等：

3、将界面要素按重要程度和需要频率放置：

3.1、设计要点，频繁眼动时，向下看优于向上

PS：根据费兹定律，从一个起始位置移动到一个最终目标所需的时间由两个参数来决定，到目标的距离和目标的大小（上图中的 D与 W），用数学公式表达为时间 T = a + b log2(D/W+1)。

它是 1954 年保罗.菲茨首先提出来的，用来预测从任意一点到目标中心位置所需时间的数学模型，在人机交互（HCI）和设计领域的影响却最为广泛和深远。 新的 Windows 8 中由开始菜单到开始屏幕的转变背后也可以看作是该定律的应用。

菲茨定律的启示：

• 按钮等可点击对象需要合理的大小尺寸。
• 屏幕的边和角很适合放置像菜单栏和按钮这样的元素，因为边角是巨大的目标，它们无限高或无限宽，你不可能用鼠标超过它们。即不管你移动了多远，鼠标最终会停在屏幕的边缘，并定位到按钮或菜单的上面。
• 出现在用户正在操作的对象旁边的控制菜单（右键菜单）比下拉菜单或工具栏可以被打开得更快，因为不需要移动到屏幕的其他位置。

3.2、高频操作集中在中间和下方，即时变化的信息最好跟随当前视觉焦点，如下图，绿色为低频区域，从左到右重要性依次降低，而红色区域为高频区域，下方和右侧主要是高频操作，中间为视觉焦点。

下图也符合高频操作集中在中间和下方，即时变化的信息跟随当前视觉焦点。

4、合理权衡，补齐元素

根据必须直接展示的内容数量布局，注意要考虑到极限的情况。

功能场景的绘制方法

功能场景布局的设计目标：营造情景，实现功能，其一般步骤是：

• 引导目标
• 呈现结构层级
• 表达使用流程

1.1 引导目标——利用对比设计呈现界面目标

对比要明显，否则就不要做区分；注意不要过度使用，规律应尽量简单，少量。

如左下图：我们可以看到通过对“开始游戏”这个框进行依次进行尺寸大小，明暗，色彩，厚度的调整，拉大了对比程度。如右下图：通过动静，色彩，明暗等调整，“自由模式”和“闯关模式”的相互对比就非常明显。

 

1.2、引导目标——利用布局样式呈现界面目标

例如：

1.3、引导目标——利用心智模式呈现界面目标：

 

 

2、呈现结构层级——利用分栏分组的设计，从上自下的分组效果依次增强，如下图：

然而，这里要注意的是，分栏分组不意味着效果越强越好，因为其带来的视觉压力也在增强，这里要根据具体应用来进行平衡，如下图：

3、表达使用流程，如下包括：

这里需要注意的包括:

①除非带来绝对优势,否则不要轻易破坏基本规则，如左下图，Tab放在下方不符逻辑认知（应该放在上方），而右下图，Tab放在右边则影响较弱，而且有利于频繁切换。

②体现最合理的逻辑关系，适当使用强化规则加强逻辑表达。例如：

细节布局的绘制方法

细节布局的目标在于因地制宜，和谐美观，其制约因素包括：可用空间形状、大小；外显元素尺寸、数量。

1、寻找可用区域、按空间尺寸和形状灵活调配。

2、根据可用空间大小，大则显，小则藏，不要因为堆砌而显得页面杂乱。

3、根据需要外显的元素数量灵活组合，简洁为主。

4.1、细节布局也需要分栏分组，从而降低用户认知负担，使界面划分明确且和谐。

4.2、 有关的进行群组，无关的要分开，然而由于分栏过多会零散，所以要利用好上文的对比和归类来进行平衡。

如下图：根据玩法将其功能分组，但如果只是通过接近分开来划分的话，则会出现太散的情况，因此可以通过颜色区分来进行分组。

界面和界面间关系的表达

界面和界面间关系的设计目标在于明确表达结构关系，符合用户认知，其一般为：

• 切换关系
• 进出关系
• 从属关系

1.1、切换关系——用导航来表示当前的位置，如下图

1.2、切换关系——模拟现实（传送点），如下图

2.1、进出关系——退出/关闭控件，如下图

2.2、进出关系——模拟现实（入口/出口），如下图

3.1、从属关系——弹出子面板，利用阴影和蒙版表达层级关系，如下图

3.2、从属关系——接近/指向性浮层，利用阴影和蒙版表达层级关系，如下图

绘制原型的要点

1、使界面元素有序排布，尽可能降低视觉上的杂乱，如下图，同个页面不要出现类似内容不同样式，灵活运用重复的特性，避免使用超过三种以上不同的特性（比如颜色和字体，字号等），注意对齐和规整。

2、注意视觉平衡，要考虑美术填充后的平衡感。

3、考虑实际表现情况，以大部分人将看到的界面去布局。如下图：虽然存在少数人会拥有很多的“赵飞燕”，但更多人其实就是有凑不到1行的几个，所以这里是没必要设计那么多的放置格位的，只要满足本身可扩展就可以了。

4、如果时间允许，要精确到像素，尽量用真实，准确的像素，并考虑到元素的极限尺寸。

5、考虑好极限情况的样式，如下图：

6、预想视觉设计可能的方式，并提前咨询视觉设计师的想法和建议，否则可能会出现原型和视觉效果不匹配的情况。

 

7、使用色彩时要保持谨慎，避免过度的视觉设计，如下图则颜色过多，显得杂乱。

PS：可以采用常用色彩搭配手法：互补色系，类似色系，三色系，分隔互补色系，矩形色系，正方形色系。具体的可以Google，下次再展开来谈。

8、避免使用深色线条和色块，避免使用对比度强烈的颜色。

9、通过明暗对比来描述模块之间的视觉优先级。

10、注意控件和模板的整理收集，对以后的效率提升很有帮助。

11、其他要点：

①不要过早绘制细节，应先用草图与相关人进行充分讨论；

②不要过早制作动态原型，否则一个小改动也可能牵动整个方案；

③交互图中不要过多追求视觉设计，以免偏离重点；

④绘制过程中经常用用户分析和场景分析的要点来检查方案；（参考我之前总结的文章，体验经济时代的“设计心理学”）

⑤只能出一个通用方案，又要保证多个分辨率都适应，此时比较高效的设计顺序是：先绘制主要分辨率的几个重点界面，以保证大部分人看到的效果最佳，再以需要顾及的最小分辨率来绘制所有原型，在绘制过程中估算最佳效果）

写在最后：本文为腾讯游戏的@Maxjma 的分享，结合自己的理解来进行整合，感谢Maxjma的分享，转载请注明出处。

个人微信号：cloudaddy，欢迎交流。