交互设计UX ’ 目录归档

[收藏]交互设计的流程

2013041221

最近整理了下自己关于交互设计具体工作方法流程的资料,也是在项目中的一点心得,一点感触,谨写出来,与大家一起分享下。

ps:因为各家公司情况不一样,所以,里面的具体步骤,也是根据各家略有调整,但大的方法应该基本一样的。

我们大概从两大块来介绍,首先是具体的交互设计流程,还有就是在这个过程中要用到的具体工具及方法方式。

2013041222

交互设计流程中,基本按照以下3步骤进行:

2013041223

第一:初步的需求分析

在初步的需求分析当中,你需要做的是什么呢?

1、与需求方沟通,获取最直接的信息来源;

2、与PM沟通,了解产品的信息重点(PM负责产品的整个规划运筹,了解这些信息,有助于架构整理设计方向的筹划)

3、尽可能的方式,了解一些项目目标、背景、原因等方面的外部因素(在一些项目中,可能是由公司高层来决定项目的方向,所以尽可能的去了解多方的需求)

这个过程中,可能是在产品规划的时候,去参会了解,或者是在更前期的头脑风暴中了解产品大致的方向,有很多不确定及变化因素,这个时候,项目还没有真正的到交互设计阶段,但交互设计师要积极参与到项目中去,在前期就对项目有所了解。

忌讳,这样……….

1、需求拿来即做。——需求没有经过初步分析过滤,交互设计师拿来就开始进行。导致的最终结果:交互设计师直接沦为产品经理讨论产品方向的工具。

应该怎么做?——交互设计师应该基于前期的参与了解,及个人的经验(有必要甚至可以叫上对应产品线的用研分析师一起),对这个产品进行初步的判断,这个产品的可行性及合理性,如果根本不合理,这个产品就可以返回进行产品重新规划中………

2、需求不加分析。——需求没有经过中级的分析,交互设计师就开始着手进行。导致的最终结果,交互设计师陷入汪洋的产品规划讨论中。

应该怎么做?——基于前一步的判断,产品比较合理,可以接收进行。但是,这个产品给过来的需求,缺失了哪方面的东西,这些东西在我们具体架构中起着重要的作用。交互设计师应该对这个产品进行中级的分析,提取我们需要的东西,让需求方进行提前准备。

ps:其实在有些公司,如果有比较强大的PM的总体把控组织的话,这个初步需求分析,可能会在立项及相关的沟通中解决掉。但在PM不够强大的时候,IA其实分担着这部分工作,而且这个过程中,发现交互设计师的前期判断沟通还是很重要的。以上两种情况,在项目中也见到有人遇到类似的情况,在前期纠结了1个月,还是裹足不前,其实,这些在前期的分析中都可以避免掉。

第二:具体架构设计

前提:需求方已经确定通过了产品前期规划,并且具体的需求已经80%完备,就可以开始着手进入到具体的架构设计阶段了。

一定要记得:Think first,Design next!

其实,在做一个需求或者产品的时候,我们动手做的时间只占了10%——20%,80%——90%的时间在前面的阶段。

前期遇到一个“手机定时提醒”的一个需求,当时对应人员的处理,只是根据需求方的描述在具体页面加一个输入框及链接,而没有分析对应的业务需求及相关任务联系,导致只做出来了20%的东西,漏掉了80%的东西,反复修改调整了4次。

20130412242013041225

只见树木,不见森林,在具体的元素中迷失了…………..

1、详细需求分析阶段

确定着手做具体的产品了,就需要进行详细的需求分析阶段了,在这个阶段,我们需要做的:

1、梳理需求,找到最核心最真实的业务场景、功能。

2、了解业务功能逻辑,有助于进行交互流程设计

3、对信息进行初步的整理、筛选、分析

倾听业务的心声,分析讨论业务的逻辑、目的、内容,梳理业务特殊需求及模拟用户的逻辑。

2、任务流程阶段(Task Flow )

任务流程是根据前期PM提出的业务逻辑流程,根据用户的操作及心理模型搭建出来的任务流程图,任务流程图,是梳理主流程任务,了解核心功能目的,清楚不同的场景,业务流程直接关系着页面流程及场景页面的设计!

2013041226

3、页面流程(Page Flow )

页面流程,是架构必须的步骤,它能从整理角度把握整个架构,是整个架构的网站地图(sitmap),包括页面的整个流转,页面的入口、出口等。

2013041227

在架构图交付物中,页面流程也是整个框架的第一步。

4、线框图(Wire frames)

在线框图中,基于前面的分析准备,为了展示信息结构、功能设置、用户操作使用习惯,我们要在里面做哪些呢?

1、展示主要的内容、功能

2、对整体的布局、结构进行考虑

3、考虑信息的位置、顺序

4、用不同的字体字号、颜色(黑白灰色)展示出其层次、轻重

在做具体的线框图中,一般按照这3个小步骤进行,其实,这种先后顺序在小的修改及项目中,可以一起进行,但涉及到较复杂的大项目,还是按照先后顺序好些,不然,把它们混杂在一起,往往容易遗漏很多东西。

第一步:最正常的状态展示——线框图

2013041228

根据8/2原则,展示出80%用户能看到的最正常场景,确保它的信息操作顺畅、一致性。这样做,容易使你抓住主要用户,排除其他干扰信息,思路明了清晰;有助于能先从整体角度把握产品框架、流程,不至于陷入小细节的纠结中………..

第二步:全场景的状态展示——线框图

2013041229

把正常场景设计出来以后,就要进行分模块的全场景架构设计了,如果场景甚多,建议,先列出全部清单,在逐个进行设计。上面示意图为购物车1、2的场景展示,其中只是列出了部分,因为属于操作型页面,所以要把全部的状态展示出来,整体有30多种,所以,用这种方式,就不怕漏掉了。

第三步:交互说明文档——线框图

交互说明文档,是基于全场景架构设计出来之后,最终要交互出来的交付件,这个文档更倾向于给具体的前端开发及后台开发人员的。里面主要包括的内容有:

1、异常状态(报错、提示位置、最长字符、报错文案场景)

2、全部页面跳转(链接、button、弹出框、新出窗口、原页刷新……)

3、列显示最多条目、输入框最多字数、

4、点击的交互前后展示状态,点击中的交互形式……

ps:在做架构中,会发现很多人在一些事情上迷失掉,花费了很多的时间,所以这些也是在交互设计中需要注意的问题:

1、精美细致并不重要!——把真正的视觉涂色交给UI去做吧,他们更专业。(但架构展示要易于理解主次、信息层级的排布)

2、选择性价比较高的工具——不要把时间花在学习工具上,工具只是辅助想法的实现,是为了提高我们工作效率。

3、从最简单的开始,逐渐补充细节——要培养全局观,再注重细节修改。

20130412210

4、线框图不是“画”出来的,而是想出来的,是确认出来的——在做的过程中,多沟通,多交流。

第三:检查纠错

最终我们的交互架构,怎么确保产品符合用户的需求呢?这就需要我们架构后的检查纠错步骤。对架构的检查纠错,可以分两种:

1、基础自我检查。

这是做完架构之后自己的纠错检查。

包括:这是什么网站?(名称、logo、说明);我在哪儿?(网站定位、面包屑、导航、操作入口明确);有什么?(导航、目录、分类);能回吗?(返回、新开窗口、导航、面包屑);相同功能、文案统一、表达一致吗?

2、原型测试验证。

最终做出来的架构,需要设定一定的场景或者任务流,找用户进行测试,是否能按照正常的用户心智模型进行。——任务排查

20130412211

交互设计的工具和方法

工具:

纸和笔、Axure、Endawer / Mindmap/ conceptdraw、OmniGraffle

20130412212

方法:

概念图、可用性测试、卡片分类、角色模型、故事版、任务走查、任务流程、页面流程、交互设计说明等

return top