交互设计方法

《交互设计方法》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、交互设计的方法长期以來我就有对儿年來交互设计的心得进行总结整理的想法。冋到中国來亲身体会到不少同行，主耍是交互设计师和视觉设计师对于交互设计的困惑，以及其他行业对于交互设计的误解和滥用。后來我在小范围内开设了一个关于交互设计的讲座；现在把它整理成文，希望与同行切磋，共同进步。这篇文章是我儿年来在美国从事交互设计工作的一个经验总结。当时我们遵循以用户为中心(User-Centered-Design,简称UCD)的设计原则,每一个项目都是不折不扣的按所有UCD的步骤进行。下面总结的交互设计的方法，是从UCD的过程小提炼出来，也就是说，

2、同样适用于任何非UCD的设计过程。交互设计的流程如果一提到交互设计，你就想到眩线框图或原型图，那你只对了五分之一。交互设计是一个过程，从开始到结束有一套系统的流程。原型图只是其中的一个坏节。当接到一个设计项目，怎么开始？都应该做哪些工作？怎样尽可能的保证交付物满足既定的功能以及用户休验层面的易用性？第一步，是任务分析，列岀界面所要完成的所有任务。第二步按各任务确定页面流程，建立信息架构。接下來是创建统一的页面布局包括分区等。然后在页面布局的基础上进行原型设计，可以是低保真和高保真的原型图。最后编写设计说明。下而以设计一款动感相册界

3、而为例，逐步讲解各个环节。1.任务分析第一步任务分析。这里要做的是对于将要设计的这个新界面的所有任务的分析，也就是用户在界面上能进行的所有操作。这个分析在功能需求的基础上进行，需求方一般提供一个功能点的列农。任务分析最常见的是任务列表，另外冇任务流程和任务场景等。下而以任务列表为例。列出所有主要任务，以及每个主要任务的了任务。再把了任务细分到各个步骤。形成下面这个列表。主要任务1子任务1步骤1子任务2步骤2步骤1步骤2主要任务2以动感相册为例，任务分析列表如下：1.浏览相册1)浏览相册列表2)选择相册3)浏览照片2.创建新相册1)

4、添加照片a)选择已有相册b)选择照片c)排列顺序d)添加字幕文字e)选择动画效果2)添加模板a)浏览模板a)选择模板a)浏览音乐列表试听音乐I.选择音乐b)增加新音乐II.打开本地文件I.选择音乐4)预览（略）…II.5)命名（略）…6)保存（略）…3.修改相册（略）・・•3)添加咅乐任务列表包括所冇功能点，并对每一个功能点的逻辑关系进行整合。必要时会对各任务的使用频率和其它影响设计的重要因素进行分析，这里不做解释了。1.页面流程任务分析完成后，进入设计的第一步，即设计页面流程。页面流程是设计的开始,也是重要的一环。它决定整个界面

5、的信息架构和操作逻辑。页面流程是上一步任务分析的口然转化。一般来说，一个主要任务就是一个页面,其它子任务也可以转化为页面。以动感相册为例，页面流程如下:页面儿乎是把任务分析照搬过来了。所以上一步做好了，这一步很轻松，而且越往后越轻松。注意这个流程图应该包括所有将要设计的新页面，一个不少，一个不多。它不仅确定页面内容，页面数量，还确定各页面Z间的关系。如杲在后來设计具体页面原型时，发现这个流程图多了或少了页而，或者页而关系发生了变化，说明你的功夫不到家（这个比较难，我一般不苛求我们的设计师）。根据原型图来创建或者修改页面流程图，不是

6、在做设计，而是在写设计说明。1.页面布局第三步页面布局是具体页面设计的开始，在上一步知道有哪些页面需要进行设计后，这里对页面进行划分，对内容进行组织。最重要的一点是确定页面分区。以动感相册为例，页面布局如下：总布局，即通用布局，适合所有页面。Logo登录全局导航快速链接内容展示，操作具体页而布局，在不与总布局冲突的情况下，冇更细节的布局。登录Logo全局导航预览选择编辑操作页而布局赋予零碎的内容以逻辑性，以分区的形式把页而各区域所对应的功能区确定下来，减少具体设计时的随意性。这是设计严谨与否的表现所在。把类似的操作放在一起，对于用

7、户來说是可以预见的，用户能够判断哪个操作在哪个区域,减少盲目寻找带來的困难和疑惑。1.原型设计这一步是大家熟知的，即具体页面的设计。这一步设计把所有的界面元索表现出來。可以有低保真和高保真原型图。低保真即是线框图，高保真多是接近最终效果图。卜•而是动感相册的低保真原型图。动静相册logo我的XX首页＞＞动碍相册＞创建新相册欢迎你，雾中花！退出1.设计说明最后一步需要做的是对所有页面进行详细的描述，包括对页面上所有元素进行说明，比如默认状态，跳传页而，字号字体，尺寸等。这里就不解释了。这是交给开发人员的文档，以及测试人员进行测试的依

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