交互设计的方法「」.docx

《交互设计的方法「」.docx》由会员分享，可在线阅读，更多相关《交互设计的方法「」.docx（5页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、交互设计的方法最新交互设计的方法最新交互设计是一个过程，它不仅仅是画 线框图。下面是YJBYS我整理的交互设计的方法，希望对你 有帮助！交互设计的流程如果一提到交互设计，你就想到画线框图或原型图，那 你只对了五分之一。交互设计是一个过程，从开始到结束有 一套系统的流程。原型图只是其中的一个环节。当接到一个设计项目，怎么开始?都应该做哪些工作?怎 样尽可能的保证交付物满足既定的功能以及用户体验层面 的易用性？第一步，是任务分析，列出界面所要完成的所有任务。 第二步按各任务确定页面流程，建立信息架构。接下来是创 建统一的页面布局包括分区等。然后在页面布局的基础上进 行原型设计，可以是低保真和高保真

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

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

4、。一般来说，一 个主要任务就是一个页面，其它子任务也可以转化为页面。以动感相册为例，页面流程如下：页面几乎是把任务分析照搬过来了。所以上一步做好了, 这一步很轻松，而且越往后越轻松。注意这个流程图应该包括所有将要设计的新页面，一个 不少，一个不多。它不仅确定页面内容，页面数量，还确定 各页面之间的关系。如果在后来设计具体页面原型时，发现 这个流程图多了或少了页面，或者页面关系发生了变化，说 明你的功夫不到家（这个比较难，我一般不苛求我们的设计 师）。根据原型图来创建或者修改页面流程图，不是在做设 计，而是在写设计说明。3 .页面布局第三步页面布局是具体页面设计的开始，在上一步知道 有哪些页面需

5、要进行设计后，这里对页面进行划分，对内容 进行组织。最重要的一点是确定页面分区。以动感相册为例，页面布局如下：总布局，即通用布局，适合所有页面。具体页面布局，在不与总布局冲突的情况下，有更细节的布局。页面布局赋予零碎的内容以逻辑性，以分区的形式把页 面各区域所对应的功能区确定下来，减少具体设计时的随意 性。这是设计严谨与否的表现所在。把类似的操作放在一起， 对于用户来说是可以预见的，用户能够判断哪个操作在哪个 区域，减少盲目寻找带来的困难和疑惑。4 .原型设计这一步是大家熟知的，即具体页面的设计。这一步设计 把所有的界面元素表现出来。可以有低保真和高保真原型图。 低保真即是线框图，高保真多是接近最终效果图。下面是动感相册的低保真原型图。5 .设计说明最后一步需要做的是对所有页面进行详细的描述，包括 对页面上所有元素进行说明，比如默认状态，跳转页面，字 号字体，尺寸等。这里就不解释了。这是交给开发人员的文 档，以及测试人员进行测试的依据。【交互设计的方法最新】