五分钟学会画交互原型(花火圆桌出品)

交互设计师到底是干啥的？

有的说是做动效的

有的说是画线框的

有的说是做控件的

之所以大家会有这样的认识，多数情况下是和交互同学接触的比较少，缺少沟通。大家看到的只是交互工作的表象，是部分产出物，没有看到交互设计背后的思考过程。

那么如何进行交互设计，这中间有没有套路呢？其实整个交互设计过程可以分成四个阶段 1、需求分析 2、搭建框架  3、原型绘制  4、原型走查。

  阶段一  

需求分析

需求分析阶段往往会按照产品需求和用户的需求两个角度进行挖掘。在产品角度，我们要清楚产品需求背后的目标是什么。是想增加活跃度、增加粘性、还是解决用户的某个痛点。达到这些目标我们需要在页面上呈现哪些内容和操作。

另外站在用户的角度挖掘用户背后的痛点也是需要重点考虑的，挖掘时我们可以先将用户分类，因为不同的人群面对相同的需求解决方法是不同的。常见的用户类群划分方法可以从用户的使用经验上进行划分：新手用户、中间用户、专家用户。当我们清楚用户的种类之后产出的设计方案就会更具针对性。

  阶段二  

搭建框架

搭建框架阶段需要我们具备全局视角，统筹大局。我们会根据app的定位不同，可以从三个角度搭建框架：信息、行为、场景。如新闻类的app包含了大量的信息内容，就可以从信息角度进行分类搭建框架。而工具类的app主要帮助用户完成任务，就可以从操作行为的角度进行分类搭建。而一些app的使用如果受场景影响比较大，则可以通过场景归类的方法搭建框架。

需求分析和框架搭建是绘制原型的先决条件，这直接决定你的交互稿是否经得起推敲。但这个过程费时费力，产出物较少，所以一些团队为了追求效率，经常将这部分工作省略掉。但是没有前期的研究直接绘制线框图，则体现不出交互的价值，有可能最终沦为线框崽。

  阶段三  

原型绘制

原型绘制的过程基本是在前期的框架基础之上进行的。我们需要定义清楚框架中的每个页面，所以页面如何绘制便是重中之重。绘制之前我们要知道页面的基本组成部分。页面自上而下可分为：状态栏、标题（导航）栏、内容区、标签栏。这几个部分。页面的内容区域由信息和操作行为构成。所以绘制原型页面的基础就是如何布局摆放信息及操作按钮。

放置信息时，因为考虑到信息应该及时有效的传达，所以我们从用户的浏览习惯入手。按照用户自上而下从左往右浏览的习惯，我们一般将重要的信息放置在页面的顶部，不重要的信息放置在底部。（重要的信息指影响用户做决策的信息）

放置操作按钮时，考虑到用户操作的便捷性，所以我们从人机工程学角度入手。按照移动端用户操作的数据进行分析得出结论，高频的操作需要放置在舒适操作区域 (绿色为舒适区，红色为困难区)

数据引自—How Do Users Really Hold Mobile Devices

针对单手操作时操作位置分析

为了方便大家理解，我们以最常见的购物app详情页为例，进行信息和操作的分析。

从信息的角度，要确定页面中哪些信息影响用户的购买决策(此处的信息重要程度可由用研得出)。同时也要兼顾到业务信息，商业价值的展现（由老板或产品提出）。

根据这两点问题我们将必要的信息分成两部分全部罗列出来，并对信息进行走查校验，补全缺失信息删除冗余信息。

如何判定页面中的信息是否完整？这需要我们根据用户的类型将信息进行分类。比如这里根据用户研究得出，商品名称、图片、价格信息属于核心用户群体关注的信息，这些信息一旦缺失,将影响大部分用户的购买决策。所以在页面上需要将这部分信息应重点呈现。而商品的销量、地址、评价等信息对用户的购买决策起不到决定性作用。所以展示时可以尽量弱化，甚至做适当的隐藏。另外商业价值的体现，可以在不影响用户的情况下进行巧妙的包装。比如天猫的标签、运费险、退款保障等。

常见的淘宝商品详情页

当信息分析完毕后，我们就需要确认用户需要执行什么操作。在购买详情页里，用户可以执行的操作有：放入购物车、购买、分享、收藏、选择优惠券等。基于上面提到的原则：重要且高频的操作应该容易被点按。所以我们需要将重要且高频的功能按钮放置在“舒适操作”区域，也就是页面的中下部。而低频且不重要的按钮至于页面的右上角。另外，结合“菲兹定律”为了让操作更便捷，也可考虑增加按钮的尺寸。

通过上述布局方法，初级交互设计师基本上能将页面布局的比较合理，剩下的就是将梳理出来的信息和操作，用规范化的控件进行包装即可。但是对于高级设计师来说，这仅是一个开始。后续还需结合用户的使用场景，将信息和操作进行灵活组合变化，来应对场景的变化。这里就会设计到更深层的的场景分析（本文不做重点讨论）。

  阶段四  

原型走查

交互原型绘制完毕后，为了保证原型的准确完善。我们还需要按照专业的方法对自己的原型进行全面的走查。比如绘制的过程中，是否考虑到网络状态的影响，导致页面加载失败？又或者一些信息字段长度超出了预期，导致摆放空间不足时如何应对？甚至由于用户自身权限发生变化，原来可用的功能不能使用时怎么处理…

这些我们在绘制原型中疏漏的地方都需要进行逐一的走查，才能让我们的交互原型更加专业。

最后我们简单总结一下原型绘制的流程

1.分析需求，确认真正要做的是什么。

2.根据app的特点搭建框架把控全局。

3.基于框架绘制每个页面完成交互原型。

4.走查原型查漏补缺。

如果你对绘制交互原型还有什么疑问，欢迎留言交流

ps.想要axure控件库和走查表同学

已加花火圆桌微信群的可向群天使索取

未入群的添加微信：huahuoguanli索取