交互设计的方法

发布日期：2010年8月03日
作者：judyyifanji类别：交互设计, 设计与交互 | 评论(41)

 

长期以来我就有对几年来交互设计的心得进行总结整理的想法。回到中国来亲身体会到不少同行，主要是交互设计师和视觉设计师对于交互设计的困惑，以及其他行业对于交互设计的误解和滥用。后来我在小范围内开设了一个关于交互设计的讲座；现在把它整理成文，希望与同行切磋，共同进步。

 这篇文章是我几年来在美国从事交互设计工作的一个经验总结。当时我们遵循以用户为中心（User-Centered-Design, 简称UCD）的设计原则，每一个项目都是不折不扣的按所有UCD的步骤进行。下面总结的交互设计的方法，是从UCD的过程中提炼出来，也就是说，同样适用于任何非UCD的设计过程。


交互设计的流程

如果一提到交互设计，你就想到画线框图或原型图，那你只对了五分之一。交互设计是一个过程，从开始到结束有一套系统的流程。原型图只是其中的一个环节。

 当接到一个设计项目，怎么开始？都应该做哪些工作？怎样尽可能的保证交付物满足既定的功能以及用户体验层面的易用性？

第一步，是任务分析，列出界面所要完成的所有任务。第二步按各任务确定页面流程，建立信息架构。接下来是创建统一的页面布局包括分区等。然后在页面布局的基础上进行原型设计，可以是低保真和高保真的原型图。最后编写设计说明。

下面以设计一款动感相册界面为例，逐步讲解各个环节。

 

1. 任务分析

第一步任务分析。这里要做的是对于将要设计的这个新界面的所有任务的分析，也就是用户在界面上能进行的所有操作。这个分析在功能需求的基础上进行，需求方一般提供一个功能点的列表。

任务分析最常见的是任务列表，另外有任务流程和任务场景等。下面以任务列表为例。

列出所有主要任务，以及每个主要任务的子任务。再把子任务细分到各个步骤。形成下面这个列表。

          主要任务1

                             子任务1

                                             步骤1

                                             步骤2

                               子任务2

                                               步骤1

                                                步骤2

           主要任务2

                              …



以动感相册为例，任务分析列表如下： 

              1.   浏览相册

                     1)       浏览相册列表

                     2)       选择相册

                     3)       浏览照片

              2.    创建新相册

                      1)       添加照片

                                  a)       选择已有相册

                                  b)       选择照片

                                  c)       排列顺序

                                  d)       添加字幕文字

                                  e)       选择动画效果

                      2)       添加模板

                                  a)       浏览模板

                                  b)       选择模板

                      3)       添加音乐

                                   a)       浏览音乐列表

                                                              I.      试听音乐

                                                              II.      选择音乐

                                   b)       增加新音乐

                                                               I.      打开本地文件

                                                                II.      选择音乐

                    4)       预览（略）…

                    5)       命名（略）…

                    6)       保存（略）…

            3.    修改相册（略）…

任务列表包括所有功能点，并对每一个功能点的逻辑关系进行整合。必要时会对各任务的使用频率和其它影响设计的重要因素进行分析，这里不做解释了。


2. 页面流程

任务分析完成后，进入设计的第一步，即设计页面流程。页面流程是设计的开始，也是重要的一环。它决定整个界面的信息架构和操作逻辑。

页面流程是上一步任务分析的自然转化。一般来说，一个主要任务就是一个页面，其它子任务也可以转化为页面。

以动感相册为例，页面流程如下：

  

页面几乎是把任务分析照搬过来了。所以上一步做好了，这一步很轻松，而且越往后越轻松。

注意这个流程图应该包括所有将要设计的新页面，一个不少，一个不多。它不仅确定页面内容，页面数量，还确定各页面之间的关系。如果在后来设计具体页面原型时，发现这个流程图多了或少了页面，或者页面关系发生了变化，说明你的功夫不到家（这个比较难，我一般不苛求我们的设计师）。根据原型图来创建或者修改页面流程图，不是在做设计，而是在写设计说明。


3. 页面布局

第三步页面布局是具体页面设计的开始，在上一步知道有哪些页面需要进行设计后，这里对页面进行划分，对内容进行组织。最重要的一点是确定页面分区。

以动感相册为例，页面布局如下：

总布局，即通用布局，适合所有页面。

 

具体页面布局，在不与总布局冲突的情况下，有更细节的布局。

  

页面布局赋予零碎的内容以逻辑性，以分区的形式把页面各区域所对应的功能区确定下来，减少具体设计时的随意性。这是设计严谨与否的表现所在。把类似的操作放在一起，对于用户来说是可以预见的，用户能够判断哪个操作在哪个区域，减少盲目寻找带来的困难和疑惑。


4. 原型设计

这一步是大家熟知的，即具体页面的设计。这一步设计把所有的界面元素表现出来。可以有低保真和高保真原型图。低保真即是线框图，高保真多是接近最终效果图。

下面是动感相册的低保真原型图。


 5. 设计说明

最后一步需要做的是对所有页面进行详细的描述，包括对页面上所有元素进行说明，比如默认状态，跳转页面，字号字体，尺寸等。这里就不解释了。这是交给开发人员的文档，以及测试人员进行测试的依据。


小结

交互设计是一个过程，它不仅仅是画线框图。交互设计最关键的两个环节是页面流程和页面布局，前者建立清晰的架构和严密的逻辑，后者整合零散的信息并确定分明的主次关系。这一切都是为了我们的终极目标——让我们的界面符合用户的预期，不带给他们任何的意外。一切都在用户的意料之中。

这篇文章有41个评论

  1. naruto 说：
    八月 3, 2010于1:30 下午

    很不错,学习:)

  2. 神秘人 说：
    八月 3, 2010于1:32 下午

    狂顶

  3. dahua 说：
    八月 3, 2010于1:32 下午

    顶啊~ 慢慢学习 呵呵

  4. blueui 说：
    八月 3, 2010于1:34 下午

    已经推荐给组内交互设计师学习了。

  5. Jon 说：
    八月 3, 2010于1:36 下午

    嗯
    现在做的时候很容易忽视前面几步的工作，或者很弱化了前面的几步，往往在头脑中进行构思。
    不过有时候，将思路具象实体化，能更好的指导具体的线框图设计~

    赞~

  6. UFO99 说：
    八月 3, 2010于1:46 下午

    哈哈，好文章！好经验以后还要多多拿出来分享啊：）

  7. elya妞 说：
    八月 4, 2010于11:32 上午

    学习了~

  8. iCan 说：
    八月 4, 2010于3:04 下午

    好文，转了。

  9. psyduck 说：
    八月 4, 2010于3:49 下午

    学习~

  10. azero 说：
    八月 4, 2010于6:02 下午

    非常好的总结。
    值得只知道鼓捣界面布局与控件细节的“交互设计师”好好学习。

  11. 可乐加糖 说：
    八月 5, 2010于9:00 上午

    学习中,这篇文章写还是蛮有质量的.在线框图的基础上又深入了一层.

  12. chefsu 说：
    八月 5, 2010于9:38 上午

    请问 为什么看不到图片。

  13. seaman320 说：
    八月 5, 2010于11:38 上午

    很好的范例，要好好学习，刚吃了一堑，没有做前面两步的工作，以后一定要长一智

  14. jame 说：
    八月 5, 2010于1:32 下午

    不错，这种做法思路清晰，后期很好控制

  15. 风扬 说：
    八月 5, 2010于4:19 下午

    不错，以前总是把前面的步奏给弱化了，强调了后面的修改，这也是因为没有好好的做任务分析，以及流程图的设计。

  16. jasperzhao 说：
    八月 6, 2010于10:37 上午

    很好的东西，支持

  17. 欲望豌豆芽 说：
    八月 6, 2010于11:02 上午

    感谢分享哈~

  18. Fengchun 说：
    八月 6, 2010于11:35 上午

    之前的任务分析和页面流程在2007年的时候我们尝试加入我们的项目流程，但是发现对于项目来说，这种方法不太使用，因为这样做
    1.任务分析和页面流程，原型之间的相似度很高，很难明确每一部分做到什么程度

    2.三者之间的继时性导致一个修改了其他几个都要修改。增加很多工作量，而即使分开，未必能达到预期的设计效果。

    3.整体的这几步如果软件开发过程。任务分析以及页面流程等其实已经和算法密切相关了，而算法一般直接体现在代码上。可以在项目前期多讨论，没必要把它具体化为一个流程

    任务分析的方法，感觉还是在研究上用的比较多一些。

  19. artec 说：
    八月 6, 2010于11:53 上午

    我觉得架构清晰了，
    就知道如何去做调研了
    现在设计前期的用户调研，都是比较盲目，原因是设计师不知道问题在哪，研究人员更不知道如何去解决问题。
    比如，任务阶段
    就可以针对任务去做调研
    确定目标和任务，对于架构设计至关重要

  20. 优惠券 说：
    八月 6, 2010于1:05 下午

    学习，不过好像还是有些细节没凸显出来

  21. hanyan 说：
    八月 7, 2010于8:10 上午

    交互设计所涉及的范围很广，开篇整得很大，下文……

  22. 阿刘 说：
    八月 8, 2010于5:54 下午

    那用户调查,是谁的工作呢?是用研吗吗？

  23. Davis 说：
    八月 9, 2010于8:23 上午

    好文章，感谢分享。

  24. 瀚予来袭 说：
    八月 9, 2010于9:51 上午

    不错哦值得借鉴。

  25. Alite 说：
    八月 9, 2010于2:54 下午

    很简析的一篇文章,把交互设计师基本要做的事情都写出来了.如果能分析的更具体点就好了,比如原型也分很多种:如果按低保真/高保真纬度来分:每个纬度下又有很多种原型工具(如低保中的纸上原型);说到原型也应该讲讲制作原型的工具,每个制作工具和交付物在不同阶段也有不同的应用等……

  26. 斗式提升机 说：
    八月 10, 2010于12:57 上午

    来过，看了。歇息分享。

  27. 石头 说：
    八月 12, 2010于9:17 上午

    真是好文，少走弯路了，谢LZ！

  28. waltz 说：
    八月 16, 2010于2:17 下午

    一直有在用，但對裏面的含義還是會有些模糊~看完這文章後會感覺清楚一點~

  29. 晨霜 说：
    八月 17, 2010于2:18 下午

    这篇文章已经将交互设计需要完成那里事情，怎么去做已经做了一个概括，表达也通俗易懂，很期待您有下文写的更加详尽，跟大家一起分享。

  30. Oscar 说：
    八月 26, 2010于4:57 下午

    很实用，很好，增强了说服力

  31. feelingmm 说：
    十月 9, 2010于11:41 上午

    好文，理清自己思路的好方法~增强说服力的利器

    [WORDPRESS HASHCASH] The poster sent us ‘0 which is not a hashcash value.

  32. www.5ibay.com 说：
    十月 18, 2010于3:39 下午

    小公司只会告诉你：明天就把页面做出来！

  33. www.baiduux.com 说：
    十月 20, 2010于3:52 下午

    Awesome. Greetings from the Speedy DNS.

  34. 肉丁 说：
    十月 27, 2010于10:42 上午

    架构很清晰，非常有指导意义

  35. 麻利蛙 说：
    十一月 29, 2010于4:59 下午

    流程写得很详细，但你只提到常用设计方法中的其中一种

    常用的交互设计方法有四种：以用户为中心的设计、以活动为中心的设计、系统设计、天才设计

  36. zhkzyth 说：
    十二月 3, 2010于12:44 下午

    感谢lz的文章，不过提点看法：文章里面少了具体的功能的交互流程说明，比如选择添加照片的时候的一些操作流程。任务分析那里虽然部分替代了操作流程的描述，但还是需要的吧。

  37. jk 说：
    一月 19, 2011于11:29 上午

    高人！ 写的好的 学习了。。。多写点这样的学习学习。

  38. 康城 说：
    五月 5, 2011于8:58 上午

    嗯，学习了

  39. 北京微微冰冰 说：
    六月 30, 2011于5:40 下午

    任务分析作为交互的第一步，再任务分析之前，是不是还有一些用研的过程，包括人物角色的设计，然后再到任务分解，以及情景分析的过程

  40. hoo 说：
    九月 16, 2011于10:28 上午

    看不懂