[收藏]交互设计的流程
最近整理了下自己关于交互设计具体工作方法流程的资料，也是在项目中的一点心得，一点感触，谨写出来，与大家一起分享下。
ps：因为各家公司情况不一样，所以，里面的具体步骤，也是根据各家略有调整，但大的方法应该基本一样的。
我们大概从两大块来介绍，首先是具体的交互设计流程，还有就是在这个过程中要用到的具体工具及方法方式。
交互设计流程中，基本按照以下3步骤进行：
第一：初步的需求分析
在初步的需求分析当中，你需要做的是什么呢？
1、与需求方沟通，获取最直接的信息来源；
2、与PM沟通，了解产品的信息重点（PM负责产品的整个规划运筹，了解这些信息，有助于架构整理设计方向的筹划）
3、尽可能的方式，了解一些项目目标、背景、原因等方面的外部因素（在一些项目中，可能是由公司高层来决定项目的方向，所以尽可能的去了解多方的需求）
这个过程中，可能是在产品规划的时候，去参会了解，或者是在更前期的头脑风暴中了解产品大致的方向，有很多不确定及变化因素，这个时候，项目还没有真正的到交互设计阶段，但交互设计师要积极参与到项目中去，在前期就对项目有所了解。
忌讳，这样……….
1、需求拿来即做。——需求没有经过初步分析过滤，交互设计师拿来就开始进行。导致的最终结果：交互设计师直接沦为产品经理讨论产品方向的工具。
应该怎么做？——交互设计师应该基于前期的参与了解，及个人的经验（有必要甚至可以叫上对应产品线的用研分析师一起），对这个产品进行初步的判断，这个产品的可行性及合理性，如果根本不合理，这个产品就可以返回进行产品重新规划中………
2、需求不加分析。——需求没有经过中级的分析，交互设计师就开始着手进行。导致的最终结果，交互设计师陷入汪洋的产品规划讨论中。
应该怎么做？——基于前一步的判断，产品比较合理，可以接收进行。但是，这个产品给过来的需求，缺失了哪方面的东西，这些东西在我们具体架构中起着重要的作用。交互设计师应该对这个产品进行中级的分析，提取我们需要的东西，让需求方进行提前准备。
ps：其实在有些公司，如果有比较强大的PM的总体把控组织的话，这个初步需求分析，可能会在立项及相关的沟通中解决掉。但在PM不够强大的时候，IA其实分担着这部分工作，而且这个过程中，发现交互设计师的前期判断沟通还是很重要的。以上两种情况，在项目中也见到有人遇到类似的情况，在前期纠结了1个月，还是裹足不前，其实，这些在前期的分析中都可以避免掉。
第二：具体架构设计
前提：需求方已经确定通过了产品前期规划，并且具体的需求已经80%完备，就可以开始着手进入到具体的架构设计阶段了。
一定要记得：Think first，Design next！
其实，在做一个需求或者产品的时候，我们动手做的时间只占了10%——20%，80%——90%的时间在前面的阶段。
前期遇到一个“手机定时提醒”的一个需求，当时对应人员的处理，只是根据需求方的描述在具体页面加一个输入框及链接，而没有分析对应的业务需求及相关任务联系，导致只做出来了20%的东西，漏掉了80%的东西，反复修改调整了4次。
只见树木，不见森林，在具体的元素中迷失了…………..
1、详细需求分析阶段
确定着手做具体的产品了，就需要进行详细的需求分析阶段了，在这个阶段，我们需要做的：
1、梳理需求，找到最核心最真实的业务场景、功能。
2、了解业务功能逻辑，有助于进行交互流程设计
3、对信息进行初步的整理、筛选、分析
倾听业务的心声，分析讨论业务的逻辑、目的、内容，梳理业务特殊需求及模拟用户的逻辑。
2、任务流程阶段（Task Flow ）
任务流程是根据前期PM提出的业务逻辑流程，根据用户的操作及心理模型搭建出来的任务流程图，任务流程图，是梳理主流程任务，了解核心功能目的，清楚不同的场景，业务流程直接关系着页面流程及场景页面的设计！
3、页面流程（Page Flow ）
页面流程，是架构必须的步骤，它能从整理角度把握整个架构，是整个架构的网站地图（sitmap），包括页面的整个流转，页面的入口、出口等。
在架构图交付物中，页面流程也是整个框架的第一步。
4、线框图（Wire frames）
在线框图中，基于前面的分析准备，为了展示信息结构、功能设置、用户操作使用习惯，我们要在里面做哪些呢？
1、展示主要的内容、功能
2、对整体的布局、结构进行考虑
3、考虑信息的位置、顺序
4、用不同的字体字号、颜色（黑白灰色）展示出其层次、轻重
在做具体的线框图中，一般按照这3个小步骤进行，其实，这种先后顺序在小的修改及项目中，可以一起进行，但涉及到较复杂的大项目，还是按照先后顺序好些，不然，把它们混杂在一起，往往容易遗漏很多东西。
第一步：最正常的状态展示——线框图
根据8/2原则，展示出80%用户能看到的最正常场景，确保它的信息操作顺畅、一致性。这样做，容易使你抓住主要用户，排除其他干扰信息，思路明了清晰；有助于能先从整体角度把握产品框架、流程，不至于陷入小细节的纠结中………..
第二步：全场景的状态展示——线框图
把正常场景设计出来以后，就要进行分模块的全场景架构设计了，如果场景甚多，建议，先列出全部清单，在逐个进行设计。上面示意图为购物车1、2的场景展示，其中只是列出了部分，因为属于操作型页面，所以要把全部的状态展示出来，整体有30多种，所以，用这种方式，就不怕漏掉了。
第三步：交互说明文档——线框图
交互说明文档，是基于全场景架构设计出来之后，最终要交互出来的交付件，这个文档更倾向于给具体的前端开发及后台开发人员的。里面主要包括的内容有：
1、异常状态（报错、提示位置、最长字符、报错文案场景）
2、全部页面跳转（链接、button、弹出框、新出窗口、原页刷新……）
3、列显示最多条目、输入框最多字数、
4、点击的交互前后展示状态，点击中的交互形式……
ps：在做架构中，会发现很多人在一些事情上迷失掉，花费了很多的时间，所以这些也是在交互设计中需要注意的问题：
1、精美细致并不重要！——把真正的视觉涂色交给UI去做吧，他们更专业。（但架构展示要易于理解主次、信息层级的排布）
2、选择性价比较高的工具——不要把时间花在学习工具上,工具只是辅助想法的实现，是为了提高我们工作效率。
3、从最简单的开始，逐渐补充细节——要培养全局观，再注重细节修改。
4、线框图不是“画”出来的，而是想出来的，是确认出来的——在做的过程中，多沟通，多交流。
第三：检查纠错
最终我们的交互架构，怎么确保产品符合用户的需求呢？这就需要我们架构后的检查纠错步骤。对架构的检查纠错，可以分两种：
1、基础自我检查。
这是做完架构之后自己的纠错检查。
包括：这是什么网站？（名称、logo、说明）；我在哪儿？（网站定位、面包屑、导航、操作入口明确）；有什么？（导航、目录、分类）；能回吗？（返回、新开窗口、导航、面包屑）；相同功能、文案统一、表达一致吗？
2、原型测试验证。
最终做出来的架构，需要设定一定的场景或者任务流，找用户进行测试，是否能按照正常的用户心智模型进行。——任务排查
交互设计的工具和方法
工具：
纸和笔、Axure、Endawer / Mindmap/ conceptdraw、OmniGraffle
方法：
概念图、可用性测试、卡片分类、角色模型、故事版、任务走查、任务流程、页面流程、交互设计说明等
近期评论