互联网产品的交互设计方法

目前交互设计在互联网产品中的应用状况
“交互设计可以提高产品可用性。”在国内的互联网行业中,建立在这个认识基础上,交互设计得到了普遍的接受。“产品设计开始的时候应该先交互啊~~”“你这个项目没交互过啊~~”这类的说法越来越多当然是好的信息,但是,交互设计工作到底应该怎么做才能提高产品可用性?通常的互联网产品研发中,交互设计工作是处于没有方法参照的状况。

理解交互设计

交互设计是一个设计工作。

交互设计是一门技术。

交互设计在目前阶段的主要使命是提高产品可用性。

通过对界面和操作行为的设计提高产品可用性。

互联网产品的特点

1.变化快;

2.质量低;

3.功能操作与信息传达并重;

4.高速创新从而带来的无标准;

那么,互联网产品的交互设计应该怎么做?

互联网产品的交互设计方法分享

经过长期的摸索、体会腾讯互联网产品,我们总结出了几个较为有效的设计方法:

方法一. 自然语言法。设计交互细节的方法;

方法二. 结构图法。设计产品信息构架的方法;

方法三. 任务走查法。对现有产品进行优化的方法,全面普查产品,包括对交互细节和信息构架;

这三个方法的思路,是基于对交互设计工作内容如下的分类:

1. 信息构架

2. 交互细节

严格来说,这样的理解是不对的。交互设计工作原本就是“交互细节”工作。另外有信息构架师来解决信息构架的问题。然而,上面提到了互联网产品快的特点,更多的研发步骤显然更容易将研发周期拖的更长,把信息构架工作和交互细节合并起来,减少一个环节,更适应互联网产品的研发特点。

“为什么不把信息构架工作交给产品经理来做呢?”如果说交互设计工作的核心是表达(这个观念,最后还会提到),那么信息构架和交互细节都是表达的重要手段。信息构架不清楚的产品,怎么会表达的清楚、明确呢?所以,交互设计的工作包含了两部分:信息构架和交互细节。下面我们就开始具体介绍这三个方法:

方法一. 自然语言法

使用自然的语言来表达页面信息,这是一个设计界面交互细节的方法。界面表达的要求是:清晰,明确,简洁,得体,想象着用面对面的交流来传达信息,再将面对面的传达变为书面表达,再用界面语言翻译书面表达。除了思路,我们还需要必备的原则、常用的表达方式和具体操作步骤。

页面表达原则:

1. 更少的信息量更好;

2. 结构化更易于理解;

3. 信息的表达应该清楚、明确、直接;

4. 操作可识别;

5. 操作前,结果可预知;

6. 操作时,操作有反馈;

7. 操作后,操作可撤销;

8. 让用户知道身处何地;

9. 避免内容看上去像广告;

10. 不提供多余的功能;

11. 相同的功能,在不同的页面中应保持一致性;

12. 措辞统一;

常用的页面表达方式:

1. 从左到右,从上到下;

2. 大字更突出;

3. 图形更吸引人;

4. 动画会被误认为是广告;

5. 内容逻辑:并列关系;从属关系;

6.多项并列的信息用(列表);

7.不同的排序方式(TAB标签)VS筛选内容(关键词);

具体操作:

第一步. 概括待表达的信息。描述应该是概括的,尽可能简短。

第二步. 将概括好的信息排序。有些时候排序会遇到困难,需要借助界面语言才能准确反应表达顺序。这正是界面设计的价值,它可以胜任一些单纯适用文字表达表达不好的情况。遇到这种问题时,记录下排序遇到的问题即可。在翻译过程中问题可能就解决掉了。

第三步. 使用界面语言翻译。与之前界面对比:

● 开头几句信息顺序需要整理,使上下文关系更清晰;

● 对过程的描述可简化;

● “说明”应更结构化;

这里所说的“与对比界面之前”只是因为之前的需求文档中有相对具象的页面原型,而这并不意味着这里的工作是“优化页面原型”。需求的传达总会有一定的形式,也许是简单的页面原型,也许是一份需求文档。甚至可以更简单。有时相对具象化的信息记录或之前的页面反而会是干扰设计者以明确的思路来设计,尤其需要小心。

我们有了一种成型的方法,但这并不意味着我们设计出的页面就只有一个样子了。实际上不同的设计者使用这个方法会设计出不同的页面。

总结“自然语言法”:自然语言法的基本思路是把界面表达转化为自然的人与人交流。人与人的交流是我们每天都会发生的,相对更容易,这个技能也更容易提高。

方法二. 结构图法

这个方法的思路:抛开页面细节只考虑信息的组织形式。抛开页面细节,只考虑信息的整体构架,而页面的细节留在确定了信息构架之后,用自然语言法来解决。

信息构架的原则:

1. 一个页面一个主要内容;

2. 个人信息&公共信息;

3. 网页基本内容有两种:列表和文档;

4. 更少的信息更好;

5. 一个用户自己生成内容的资料页,有两个状态:浏览状态&编辑状态;

6. 信息树应该尽量窄而浅,并且尽量保持平衡;

7. 与现实生活经验相符;

● 页面在网站中需要有一个固定的位置;

● 同等级的内容应表现成并列的样子;

……

信息构架的常见模型:

1. 列表+详情页+列表聚合页;

2. Wizard模式。第一步->第二步->第三步…;

3. 主页+若干个“临时”页面(以链接的形式,如详细介绍,更多等);

具体操作

第一步. 明确描述全部内容。总结归纳产品所需要表达的所有信息;

第二步. 画树状图;

第三步. 用纸画各页草图。草图中需要包含的关键元素:页面标题、导航、重要的链接和按钮;

第四步. 模拟演示网页操作行为(手绘原型或低保真原型);

这里需要强调:纸原型中应包括页面标题、模块的标题、导航、重要的链接和按钮,而不只是页面最顶端的导航。有了重要的链接和按钮才能清楚的演示出各个页面之间跳转的关系,确保整个流程的顺畅;

方法三. 任务走查法

这是一种优化现有产品的方法。成本低,见效快。对产品整体上影响小。

以用户任务为线索,以可用性准则为依据。 “用户任务”是指用户实际使用这个产品时需要完成的任务。这个方法中,需要操作者依据主观判断制定用户任务,而不是通过用户研究。这虽然有可能造成更大的误差,但同时节约了时间成本。实际工作中,参与这个产品设计的人坐在一起讨论一下,通常是可以比较准确的描述出用户任务的。

“可用性准则”在这个方法中是指:页面表达原则、信息构架原则、视觉表现规范,这三部分。页面表达原则和信息构架原则就是前面提到的,视觉表现规范是专门针对视觉设计而制定的。这个方法要处理的问题是现有产品,因此,不同于产品原型,更多了视觉表现这一环,在视觉设计过程中出现的问题也应该在走查中一起发现。

视觉表现规范

1. 滚动条看上去应该象滚动条

2. 表单的对齐方式

3. 重要的内容显示在第一屏

4. 导航应出现在第一屏上半部分

5. 尽量避免使用装饰性的图标

6. 避免内容看上去象广告

7. 光标样式

8. Tab需要有三种状态而不是两种

9. 红色表示警示,绿色表示ok,黄色表示提示

10. 灰色通常表示“暂不可用”(disabled)

具体操作

第一步. 分析并总结所有任务

第二步. 根据任务进行评估

评估中需要注意:

1. 不影响任务的问题不记录

2. 被记录的缺陷是有根据的(根据可用性准则),而不是根据自己的感觉。

总结任务走查法:

为什么要强调是“按任务”。 “按任务”是在确保评估更接近真实。

“按任务”很多时候与“按栏目”差不多的,但是按任务的优点在于:

1. 覆盖到了各个栏目之间跳转可能出现的问题。

2. 抓住了重点的问题,而放过了无关紧要的问题。

总结任务的过程实际是简化了的“人物角色-情景描述-任务分解”方法。

最后的总结

从狭义的交互设计的定义来看,交互设计的主要任务是:表达。通过清晰、准确、简洁的表达进而实现人机交互。互联网产品的交互设计应该怎么做的问题,就演化成了:互联网产品应该如何去表达。以上方法都紧紧围绕着“什么样的方法才能让产品的表达更有效”这个核心展开。



无觅相关文章插件,快速提升流量

评论已关闭!