交互设计史论文

毕业原型交互设计论文(如何创建更好的交互原型)

1.如何创建更好的交互原型

尽管很多谈及交互的书上都已经回答过了：发现用户需要，建立明确需求提出设计方案制作设计原型用户测试和评估还是有很多对交互设计有兴趣的朋友会问我这个问题，并希望我能回答得详细，具体到我工作中的每个细节。

其实交互设计需要做什么，会随每个交互设计师的工作内容差异而不同，具体到每个项目也会有区别。下面分享下我是怎样做交互，方式不一定是最合适，希望大家多指点，共同学习进步。

发现用户需要的方式有很多种，我们可以在用户反馈里收集到许多用户提出的想法，他们希望我们能提供帮助解决问题的产品；我们也可以主动去观察一些生活中的信息，为灵感的迸发做储备。比如说日程管理项目，有不少用户跟我们的邮箱反应说，他们忙碌的时候会忘记一些重要的事情，比如一些会议或者约会，所以希望网易邮箱能提供一个专业的日程管理功能，能够帮助他们有效的管理和安排每天的日程。

确认了用户的这一需要，我们的产品同事就会组织立项，把用研和设计组的同事呼唤过来一起进行调研，确定我们的目标用户。用研组会通过问卷调查等方式尽可能多的去收集信息，交互设计师也会参与分析调研，组织会议帮助用研组完善信息，我们会采取一些有趣的方式，比如一堆人在一起头脑风暴，大家回忆各种相关的生活场景，然后把一些关键词记录下来。

这一步我们的目的是要知道：用户想要什么？通过这些步骤我们提炼出一些最重要的功能需求，接着产品组会整理出需求文档，设计师就位。通过调研，我们得到了大量数据信息，并建立了明确的需求，下一步就是开始提设计方案。

这个阶段我会做一些概念设计，类似于做实物产品时设计一个水杯，我会描述它说：我要设计一个旅行用的水杯，它能叠成一个小圆盘，喝水的时候只需要把小圆盘的圆心部分往下按，就能变成一个杯子。互联网产品也是这样，需要赋予它一个概念，例如日程管理：这是一个专业的日程管理功能，通过使用它，我们可以有效的管理自己每天的日程和时间，以提高工作效率，并且不会再错过每个重要的约会！这些文字并不一定非是交互设计师所总结，但是交互设计师必须要做到对产品心里有数，明确我们要做什么。

同时需要进行的还有初稿设计，在这里我所谓的初稿，并不一定是严格要求中的交互原型，可以是用Axure把主要的页面流程做出来，也可以手绘草图，只要能清晰表达设计构思的，什么样的方式都可以。制作设计原型，也就是常说的交互稿，区别于做设计方案时的初稿，这份交互稿我会尽可能细致的把流程和具体操作形式表达出来。

考虑到做交互是一个迭代过程，我会在设计稿的首页为设计的产品做一份交互更新日志，记录下交互更新时间、版本名称、更新类型、更新内容、参考需求文档与交互负责人。这份更新日志的意义在于：更新时间-便于全程跟踪记录项目，掌握每个时间点版本名称-便于项目参与人员查找上一版本的交互稿更新类型-了解每次更新需求的性质更新内容-清晰呈现每一次更新的内容，并提供一个直接去到更新页面的链接，这样在进行迭代时我们的伙伴不用一页页去寻找更新点参考需求文档-便于项目参与人员查找对应的需求文档交互负责人-记录每次迭代的交互负责人，并能方便工作交接交互稿的制作过程，一般是用Axure做原型，像邮箱这样视觉比较成熟且相对稳定的产品，我会偏向做高保真模型，我们会整理一个控件库，这样能提高制作效率；做一个全新项目时，黑白稿线稿都是可用的方式，如果交互设计师能对大概的视觉效果有把握，也能做得精致些。

这些我想大家都很了解，所以不多说了。之所以把这部分内容提出来单独写一段，是因为之前和很多做交互的朋友讨论过该怎样做好交互说明，大家各有看法，很难找到这部分工作的衡量标准。

交互说明书在整个设计过程中，也许只会占用小部分工作量，但是作用不小，它能帮助我们减少沟通成本，辅助交互稿描述设计理念，表达交互流程，更细致的展现我们的设计。与做设计稿不同，个人认为，交互说明这部分工作，需要我们更多了解它作说明的对象，即产品经理、视觉设计师、开发人员的需求，从而达到真正的“辅助”效果，而不是盲目凭自己主观去长篇大论，否则我们要为此花费时间，而且这部分工作只能沉积为一堆我们自己欣赏毫无意义的文字。

为此我曾与合作过的各组同事进行沟通，提炼出一些他们对交互说明的需求，不求全面，但求能说明一些问题。1.交互说明最好是图文并茂（all）便于阅读和理解。

2.页面跳转的说明（产品&程序）页面跳转是涉及多个页面关系的操作，产品人员在看交互稿时，会更多去关注多个目的性的任务操作流程，而对页面跳转的记忆是有限的，所以需要页面跳转说明。3.交互说明能否考虑与产品需求文档结合（产品）开发文档会涉及产品概念、技术方案、业务执行角色等内容，和交互设计稿有着紧密关联，所以交互说明书与开发文档是可以相互做补充，整理成一份文档，这样也能避免工作内容重复。

4.对交互稿中不明显的交互动作或隐藏的设置项作说明（产品&视觉&页面构架）细节和动作需要描述清楚，比如说鼠标focus、click的动作，或。

2.如何创建更好的交互原型

4.对交互稿中不明显的交互动作或隐藏的设置项作说明（产品&视觉&页面构架）细节和动作需要描述清楚，比如说鼠标focus、click的动作，或clic。

3.交互设计案例

Ⅰ、先了解一下交互设计的基本概念：

交互设计是一种目标导向设计，所有的工作内容都是在围绕着用户行为去设计的。交互设计师通过设计用户的行为，让用户更方便更有效率的去完成产品业务目标，获得愉快的用户体验。

Ⅱ、交互设计在项目流程中的位置和任务：

项目前期的流程和节点：

职能的细化就是为了让产品在每个专业环节都做到极致，提高竞争力。如果是为了走流程，每个环节都是任务式的交付，臃肿的分工除了增加成本和拖慢项目进度，没有实际意义。所以交互设计需要做的足够好，才能将这份工作做的有意义。

Ⅲ、交互设计的具体职能：

从上图中可以看出，交互设计主要干三件事：

①定义部分需求 ②定义信息架构和操作流程 ③ 组织页面元素，制作原型demo

①定义部分需求

以前的惯性思维是需求应该由产品人员负责，设计人员只是实现和改善界面体验。而产品的真正需求不仅仅来源于业务，还包括使用者的情感需求。在情感分析方面，交互专业是具有优势的，举个例子：

一个增值服务的宣传模块，业务模型可能是这样子：

考虑到情感因素后，需求模型会不断完善：

上图仅仅是举个例子，真正的产品人员不会将业务模型想的如此简单。举这个例子就是想说明一下产品的需求设计不仅仅是业务模型，还需要考虑用户情感、用户行为和运营数据。当产品人员考虑不周全的时候，交互设计师有责任对需求进行修订和完善，这样的目标导向设计才是完整的。

②定义框架

这部分的内容属于交互设计师的核心工作内容，也就是我上一章节所讲的框架设计阶段。这个阶段的产出质量直接影响到业务目标和转化率。如果框架混乱，接下来的界面怎么优化都是无效的。这好比大型超市的走道设计，如果路线规划的不好，再多再大的指引图标都是低效的。交互设计做什么？让用户快速完成目标，提升操作效率，这才是框架设计的意义所在。

破洛洛文章简介：本章主要详述一下交互设计的职能——交互设计师具体做哪些内容？

什么是框架设计呢？这要分成两部分内容：

1.关于结构导航的设计

把我们的产品想象成一个巨大的图书馆，我们需要帮助用户（有目的性的、目的不明确的，无目的性的）寻找他们感兴趣的图书，怎么帮助用户准确的寻找完成目标任务，这就是导航设计。导航的设计任务一般在新项目或重构项目。

导航大概可以分为三种类型：结构导航、关联导航、可用性导航

在框架设计的阶段，交互设计师主要关注于结构导航的设计。

结构导航分两种：全局导航与局部导航。全局导航一般是指无联系的信息结构做的一级大分类，方便用户以最快速的方式了解整个网站有什么大概内容。而局部导航则关注于用户最方便的快捷操作和业务引导操作。

交互设计师的首要任务就是将业务内容信息组织分类，划分出主次关系，根据业务目的和用户习惯定义规划全局导航和局部导航的设计。那应该怎么规划呢？

回到第一个增值服务页面的例子（虚拟案例，非真实案例）：

将需求梳理后（怎么梳理，请google抽屉整理法），我们可以确认全局导航：

再详细规划局部导航：

局部导航的层级可以不断往下延伸，通过树形目录或面包屑的方法帮助用户浏览时不至于迷路。

2. 关于流程的设计

之前的案例我们已经基本上确认了模块需求有哪些页面，页面大概会放什么内容。但真实的用户任务并不是在一个页面上完成的，这时候我们就需要通过流程的方式把任务变得清晰和包容用户的各种误操作。

虚拟案例：

在流程的规划设计中要遵循：1.以业务目的为主要导向；2.兼容到用户的习惯；3.尽量让流程做减法，多一个流程就会丢一部分用户；4.任务是连贯和清晰的；5.考虑实现方式的复杂程度；欢迎补充…

③组织页面元素，制作原型demo

经过了需求的完善和框架的设计，之前的这些工作还是停留在抽象的想法阶段，怎么把想法转达给项目组的其他人员呢？交互还需要把想法和规划表达出来，那么最好的方式就是制作原型Demo。把Demo做出来，让产品，开发，测试直观的看到产品的雏形，再广泛的接受意见，对原型进行不断的修正，改进，做简单的用户测试继续挖掘情感需求。

4.交互设计中原型图和线框图

原型指的是软件或网站的原型，一般可分为：低保真原型和高保真原型，低保真原型包括线框图、卡片类的纸质原型、在白板上勾画的线框图等，高保真原型包括：用flash制作的含丰富交互功能的原型，html高保真原型等。

之所以要制作原型，除了为客户和领导展示功能外，还有一个重要的原因是原型可以用作测试评估、需求确认、需求调研。

低保真原型的特点就是制作简单，可快速制作，成本低，在软件需求调研的初期，可以根据调研的结果快速画出软件原型，提供给目标用户，看是否能满足用户的需求（可能要作较多的解释）；在进行需求讨论时，则可在白板上快速画出有争议的原型，根据眼前的原型来讨论效果肯定好过于大家根据自己的想象中的原型来讨论，也可以避免因为大家对需求理解不同而产生的讨论（每个人的心智模型不一样，对同一描述有不同理解是很正常的）。低保真原型还可对软件（网站）的导航和交互进行设计，在线框图上画出用户的操作流程，可以方便地对软件的流程进行设计，根据卡片分类法，可对产品进行信息架构设计，使产品的信息组织、导航更自然，突出重点，使用户操作起来更舒服。

5.交互设计中原型图和线框图

之所以要制作原型，除了为客户和领导展示功能外，还有一个重要的原因是原型可以用作测试评估、需求确认、需求调研。低保真原型的特点就是制作简单，可快速制作，成本低，在软件需求调研的初期，可以根据调研的结果快速画出软件原型，提供给目标用户，看是否能满足用户的需求（可能要作较多的解释）；在进行需求讨论时，则可在白板上快速画出有争议的原型，根据眼前的原型来讨论效果肯定好过于大家根据自己的想象中的原型来讨论，也可以避免因为大家对需求理解不同而产生的讨论（每个人的心智模型不一样，对同一描述有不同理解是很正常的）。

低保真原型还可对软件（网站）的导航和交互进行设计，在线框图上画出用户的操作流程，可以方便地对软件的流程进行设计，根据卡片分类法，可对产品进行信息架构设计，使产品的信息组织、导航更自然，突出重点，使用户操作起来更舒服。