网站交互设计方法和原则.ppt

《网站交互设计方法和原则.ppt》由会员分享，可在线阅读，更多相关《网站交互设计方法和原则.ppt（60页珍藏版）》请在三一办公上搜索。

1、会员分享,目录,会员分享,先介绍一个人,8年前，Numal高中毕业，朋友告诉他注册一个电子邮箱就可以方便的给人写信，让他也去弄一个。于是他就去上网了。他看到注册页面时，脑袋完全不清楚面前是什么东西。他有了一串疑问：电子邮箱是什么东西？新用户是什么？邮箱名是什么？他发现自己很笨，什么都不懂，非常的懊恼。,两年前，Numal推荐一个不常上网的人去使用自己设计的网站：豆瓣他朋友说发现豆瓣的注册很简洁。他朋友说很清楚自己要做什么事情他朋友说很放心他朋友说没有出错他朋友说很快完成了注册整个过程他朋友很愉快，很有安全感,是什么让网站体验几年间变得这么好？是什么让Numal的朋友如此愉悦有安全感？,Numa

2、l大学上的是设计专业。在大学最后两年，他的方向转向了交互设计。通过学习，他了解了很多交互设计的基本概念。,交互设计定义（一）,简单的说，交互设计是人工制品、环境和系统的行为，以及传达这种行为的外形元素的设计与定义。不像传统的设计学科主要关注形式，最近则是关注内容和内涵，而交互设计首先旨在规划和描述事物的行为方式，然后描述传达这种行为的最有效形式。,艾兰.库珀(alan cooper),VB之父交互设计之父微软视窗先锋奖软件梦幻奖得主库伯交互设计公司创始人,交互设计定义（二）,设计支持人们日常工作与生活的交互式产品。具体地说，交互设计就是关于创建新的用户体验的问题，其目的是增强和扩充人们工作、通

3、信及交互的方式。Winnogard（1997）把交互设计描述为“人类交流和交互空间的设计”,Helen Sharp,从用户角度来说，交互设计是一种如何让产品易用，有效而让人愉悦的技术，它致力于了解目标用户和他们的期望，了解用户在同产品交互时彼此的行为，了解“人”本身的心理和行为特点，同时，还包括了解各种有效的交互方式，并对它们进行增强和扩充。交互设计还涉及到多个学科，以及和多领域多背景人员的沟通。,DeDream,Numal在学习时，接触到了几个很容易混淆的概念。后来经过辨析，他这样理解了,几个概念,交互设计设计行为，偏向于计算机的人机交互人与机器相互信息交换交互一种行为,几个概念,可用性标准

4、用户体验目标UCD原则方法,交互的广义发展历程,旧石器时代简单的单一的机器大工业时代复杂的繁琐的出错率高的危险的信息时代效率易用性,交互设计行业的发展,学科人类工程学心理学认知科学信息学工程学计算机科学软件工程社会学人类学语言学美学,设计图形设计产品设计商业美术电影产业服务业,交互设计,人机交互（HCI）,交互设计的范畴,交互的三个要素,可是，Numal发现在人机工程的介绍中，三要素是另外的三个,交互三个要素,交互过程是一个输入和输出的过程，人通过人机界面向计算机输入指令，计算机经过处理后把输出结果呈现给用户。人和计算机之间的输入和输出的形式是多种多样的，因此交互的形式也是多样化的。,基础的交

5、互方式,平衡5E法,有效(Effective)效率(Efficient)易学(Easy To Learn)吸引人(Engaging)容错性(Error Tolrant),Numal了解过了交互设计的相关知识后，想在工作中实践一下，可是怎么下手呢？接下来他开始研究交互设计的方法,UCD设计理想流程,简单说明：1.创造一些用户2.找出重要的活动3.找出用户模型-用户期望如何完成这些活动4.草拟出初版的设计5.一直反复把设计修改得更容易,直到虚构用户能轻易使用为止6.找真人来看着他们试用你的软件,交互设计所做的事情,交互设计的核心要素,精确描述我们的用户以及用户希望达到的目标，定义几个典型角色，并用

6、故事的形式表达出来,目标,用户目标生活目标体验目标最终目标产品目标利润市场,目标是行动的驱动力，产品的功能和行为必须通过任务来解决目标产品成功的关键是目标，而不是特性成功的交互设计师应该对目标高度敏感,Numal在思考，那么豆瓣的目标是什么呢？,目标,用户目标生活目标：一种新的消遣方式体验目标：容易使用、方便、舒适最终目标：撰写浏览书评，找到自己兴趣相同的人产品目标市场：聚集文化人群，创建文化交流社区,角色,简单的说，角色就是为我们的产品虚拟的一个典型用户。我们在设计是，就可以专门为“他”设计。角色是一种强有力的交互设计工具角色的确定给设计带来的好处：该做什么便于沟通提高效率解决边缘设计,角色

7、,一般不超过两个人一男一女一般将用户定义为初级用户和中级用户。特殊产品才定义高级用户。角色描述中应该包含：一张相片人物基本特征于产品相关的性格、能力、爱好等介绍会用到的产品、功能介绍,Numal感觉角色设计很有兴趣，于是就针对自己负责的产品，制定了一个角色,一个定义角色的例子,Numal做完角色设计后，整个项目组都很认可。Numal还发现有了角色之后项目组成员间的讨论变得简单和高效了。,一段经典对话,脚本,人和他们的活动组成的故事使用具体的故事来构造模拟用户的可能行为或者讲述设计方案关注人物角色以及其心智模型，目标和活动，有可能包括对环境的考虑,基于任务的脚本基于场景的脚本,一个场景脚本的例子

8、,1.早上，小翠来到办公室，拿起电话给朋友打了个电话，然后打开电脑，打开邮箱，开始一天的工作2.在开始工作之前，她上了一下豆瓣，看看是否有朋友给他留言或者回复了她的评论。3.小翠收到一封邮件，来此办公室主任的，告知 同事strong今天请假可能来不了，如果有事情帮忙处理一下。4.如往常一样，把邮件中的一些事情处理一下，需要打印的就打印，需要盖章的就盖章。5.在工作过程中，她总是开着QQ，经常有朋友给他发个链接让她看。当她正在阅读一封刚收到的邮件时，一个好友给她发来了豆瓣的一个网址，她便会放下手头的工作开始浏览网页。.,一个场景脚本的例子,该脚本提纲试图解决的问题：1.产品使用时的设置是什么？2

9、.是否会被使用。角色最终期望的结果很长时间？3.人物角色是否经常被打断？4.和它一起使用的其他产品是什么？5.人物的技巧使用频繁程度有多高？6.为了满足人物角色的目标，角色需要完成哪些主要活动是什么？,交互设计时需关注的可用性指标,ISO9241/11中的定义是：可用性是一个多因素概念，涉及到容易学习、容易使用、系统的有效性、用户满意，以及把这些因素与实际使用环境联系在一起针对特定目标的评价。,常用交互设计原则,可视性 功能可性越好，越方便用户发现和了解使用方法反馈返回与活动相关的信息，以便用户能够继续下一步操作限制在特定时刻显示用户操作，以防误操作映射准确表达控制及其效果之间的关系一致性保证

10、同一系统的同一功能的表现及操作一致启发性充分准确的操作提示,交互设计准则,设计方案属性：伦理的（能体谅人，有帮助）不伤害 改善人的状况有意图的，能帮助用户实现他们的目标和渴望注重实效，帮助委托的组织实现它们的目标优雅的最简单的完整方案拥有内部的一致性合适的容纳和情感,Numal做完整个项目后，团队对其专业性和技能都很满意，于是让他传授一下自己的经验。,常用的交互设计工具,VisioAxureillustratorFireworksWordPhotoshop,交互设计师需具备的项目意识,交互设计师需了解流程,流程的重要性预防研究、设计、评估过程中的遗漏；规范研究、设计、评估的步骤；明确与公司研发

11、流程的衔接；解决整个过程中责任不明、任务不清的问题,国内部分人机交互学术机构,北京大学计算机系人机交互与多媒体研究室清华大学工业工程系人因工程实验室中国科学院软件研究所人机交互技术与智能信息处理实验室欧盟可用性中国中心微软亚洲研究院交互设计中心 UPA中国,业界公司信息,IBM：500人，25个可用性实验室微软：200人，30个可用性实验室Philips：100多人西门子：100人Oracle：约70人韩国三星：100多人Adobe：21人eBay：20人Tencent：30HP、Yahoo、Nokia、AOL、Intel、GE、TI、CISCO、,推荐书籍,内容：针对软件让用户感到“难用”的

12、现状，提出软件设计的新理念和新方法，以及交互设计，目标导向，角色分析以及脚本提纲等一系列设计概念。,内容：介绍了交互设计的理论，目标，原则，以及设计方法。并介绍了系列关于原型制作，可用性评估，用户测试，调查的操作方法。,推荐书籍,内容：用户研究界面设计可用性评估,推荐书籍,内容：以本能，行为和反思三个设计的不同纬度为基础，阐述了情感在设计中所处的地位和重要作用。并分析如何把情感效果融入产品设计中。,推荐书籍,内容 对于交互相关概念的清晰界定，并对于软件姿态和设计准则进行了深入剖析，试图回答设计中why的问题,推荐书籍,内容：设计符合用户期望的产品,推荐书籍,内容 对软件人机界面的形式和标准，特别是weindows界面标准，网页设计标准等进行了详细描述，可以让设计师少犯低级错误,推荐书籍,内容本书是AJAX之父的经典之作。本书用简洁的语言系统化地诠释了设计、技术和商业融合是最重要的发展趋势。全书共8章，包括关于用户体验以及为什么它如此重要，认识这些要素、战略层、范围层、结构层、框架层、表现层以及要素的应用。,推荐书籍,Thanks all!,