网站交互设计方法培训教材

目录,6351.com会员分享,先介绍一个人,8年前，Numal高中毕业，朋友告诉他注册一个电子邮箱就可以方便的给人写信，让他也去弄一个。于是他就去上网了。 他看到注册页面时，脑袋完全不清楚面前是什么东西。他有了一串疑问： 电子邮箱是什么东西？ 新用户是什么？ 邮箱名是什么？ 他发现自己很笨，什么都不懂，非常的懊恼。,两年前，Numal推荐一个不常上网的人去使用自己设计的网站：豆瓣 他朋友说发现豆瓣的注册很简洁。 他朋友说很清楚自己要做什么事情 他朋友说很放心 他朋友说没有出错 他朋友说很快完成了注册 整个过程他朋友很愉快，很有安全感,是什么让网站体验几年间变得这么好？ 是什么让Numal的朋友如此愉悦有安全感？,Numal大学上的是设计专业。 在大学最后两年，他的方向转向了交互设计。 通过学习，他了解了很多交互设计的基本概念。,交互设计定义（一）,简单的说，交互设计是人工制品、环境和系统的行为，以及传达这种行为的外形元素的设计与定义。不像传统的设计学科主要关注形式，最近则是关注内容和内涵，而交互设计首先旨在规划和描述事物的行为方式，然后描述传达这种行为的最有效形式。,艾兰.库珀(alan cooper),VB之父 交互设计之父 微软视窗先锋奖软件梦幻奖得主 库伯交互设计公司创始人,交互设计定义（二）,设计支持人们日常工作与生活的交互式产品。具体地说，交互设计就是关于创建新的用户体验的问题，其目的是增强和扩充人们工作、通信及交互的方式。Winnogard（1997）把交互设计描述为“人类交流和交互空间的设计”,Helen Sharp,从用户角度来说，交互设计是一种如何让产品易用，有效而让人愉悦的技术，它致力于了解目标用户和他们的期望，了解用户在同产品交互时彼此的行为，了解“人”本身的心理和行为特点，同时，还包括了解各种有效的交互方式，并对它们进行增强和扩充。交互设计还涉及到多个学科，以及和多领域多背景人员的沟通。,DeDream,Numal在学习时，接触到了几个很容易混淆的概念。后来经过辨析，他这样理解了,几个概念,交互设计 设计行为，偏向于计算机的 人机交互 人与机器相互信息交换 交互 一种行为,几个概念,可用性 标准 用户体验 目标 UCD 原则 方法,交互的广义发展历程,旧石器时代 简单的 单一的 机器大工业时代 复杂的 繁琐的 出错率高的 危险的 信息时代 效率 易用性,交互设计行业的发展,学科 人类工程学 心理学 认知科学 信息学 工程学 计算机科学 软件工程 社会学 人类学 语言学 美学 ,设计 图形设计 产品设计 商业美术 电影产业 服务业 ,交互设计,人机交互 （HCI）,交互设计的范畴,交互的三个要素,可是，Numal发现在人机工程的介绍中，三要素是另外的三个,交互三个要素,交互过程是一个输入和输出的过程，人通过人机界面向计算机输入指令，计算机经过处理后把输出结果呈现给用户。人和计算机之间的输入和输出的形式是多种多样的，因此交互的形式也是多样化的。,基础的交互方式,平衡5E法,有效(Effective) 效率(Efficient) 易学(Easy To Learn) 吸引人(Engaging) 容错性(Error Tolrant),Numal了解过了交互设计的相关知识后，想在工作中实践一下，可是怎么下手呢？ 接下来他开始研究交互设计的方法,UCD设计理想流程,简单说明： 1. 创造一些用户 2. 找出重要的活动 3. 找出用户模型 - 用户期望如何完成这些活动 4. 草拟出初版的设计 5. 一直反复把设计修改得更容易, 直到虚构用户能轻易使用为止 6. 找真人来看着他们试用你的软件,交互设计所做的事情,交互设计的核心要素,精确描述我们的用户以及用户希望达到的目标，定义几个典型角色，并用故事的形式表达出来,目标,用户目标 生活目标 体验目标 最终目标 产品目标 利润 市场,目标是行动的驱动力，产品的功能和行为必须通过任务来解决目标 产品成功的关键是目标，而不是特性 成功的交互设计师应该对目标高度敏感,Numal在思考，那么豆瓣的目标是什么呢？,目标,用户目标 生活目标：一种新的消遣方式 体验目标：容易使用、方便、舒适 最终目标：撰写浏览书评，找到自己兴趣相同的人 产品目标 市场：聚集文化人群，创建文化交流社区,角色,简单的说，角色就是为我们的产品虚拟的一个典型用户。我们在设计是，就可以专门为“他”设计。 角色是一种强有力的交互设计工具 角色的确定给设计带来的好处： 该做什么 便于沟通 提高效率 解决边缘设计 ,角色,一般不超过两个人 一男一女 一般将用户定义为初级用户和中级用户。特殊产品才定义高级用户。 角色描述中应该包含： 一张相片 人物基本特征 于产品相关的性格、能力、爱好等介绍 会用到的产品、功能介绍,Numal感觉角色设计很有兴趣，于是就针对自己负责的产品，制定了一个角色,一个定义角色的例子,Numal做完角色设计后，整个项目组都很认可。Numal还发现有了角色之后项目组成员间的讨论变得简单和高效了。,一段经典对话,脚本,人和他们的活动组成的故事 使用具体的故事来构造模拟用户的可能行为或者讲述设计方案 关注人物角色以及其心智模型，目标和活动，有可能包括对环境的考虑,基于任务的脚本 基于场景的脚本,一个场景脚本的例子,1.早上，小翠来到办公室，拿起电话给朋友打了个电话，然后打开电脑，打开邮箱，开始一天的工作 2.在开始工作之前，她上了一下豆瓣，看看是否有朋友给他留言或者回复了她的评论。 3.小翠收到一封邮件，来此办公室主任的，告知 同事strong今天请假可能来不了，如果有事情帮忙处理一下。 4.如往常一样，把邮件中的一些事情处理一下，需要打印的就打印，需要盖章的就盖章。 5.在工作过程中，她总是开着QQ，经常有朋友给他发个链接让她看。当她正在阅读一封刚收到的邮件时，一个好友给她发来了豆瓣的一个网址，她便会放下手头的工作开始浏览网页。 ,一个场景脚本的例子,该脚本提纲试图解决的问题： 1.产品使用时的设置是什么？ 2.是否会被使用。角色最终期望的结果很长时间？ 3.人物角色是否经常被打断？ 4.和它一起使用的其他产品是什么？ 5.人物的技巧使用频繁程度有多高？ 6.为了满足人物角色的目标，角色需要完成哪些主要活动是什么？,交互设计时需关注的可用性指标,ISO9241/11中的定义是：可用性是一个多因素概念，涉及到容易学习、容易使用、系统的有效性、用户满意，以及把这些因素与实际使用环境联系在一起针对特定目标的评价。,常用交互设计原则,可视性 功能可性越好，越方便用户发现和了解使用方法 反馈 返回与活动相关的信息，以便用户能够继续下一步操作 限制 在特定时刻显示用户操作，以防误操作 映射 准确表达控制及其效果之间的关系 一致性 保证同一系统的同一功能的表现及操作一致 启发性 充分准确的操作提示,交互设计准则,设计方案属性： 伦理的（能体谅人，有帮助） 不伤害 改善人的状况 有意图的， 能帮助用户实现他们的目标和渴望 注重实效，帮助委托的组织实现它们的目标 优雅的 最简单的完整方案 拥有内部的一致性 合适的容纳和情感,Numal做完整个项目后，团队对其专业性和技能都很满意，于是让他传授一下自己的经验。,常用的交互设计工具,Visio Axure illustrator Fireworks Word Photoshop,交互设计师需具备的项目意识,交互设计师需了解流程,流程的重要性 预防研究、设计、评估过程中的遗漏； 规范研究、设计、评估的步骤； 明确与公司研发流程的衔接； 解决整个过程中责任不明、任务不清的问题,国内部分人机交互学术机构,北京大学计算机系人机交互与多媒体研究室 清华大学工业工程系人因工程实验室 中国科学院软件研究所人机交互技术与智能信息处理实验室 欧盟可用性中国中心 微软亚洲研究院交互设计中心 UPA中国,业界公司信息,IBM： 500人，25个可用性实验室 微软： 200人，30个可用性实验室 Philips：100多人 西门子：100人 Oracle：约70人 韩国三星：100多人 Adobe：21人 eBay：20人 Tencent ：30 HP、Yahoo、Nokia、AOL、Intel、GE、TI、 CISCO、,推荐书籍,内容：针对软件让用户感到“难用”的现状，提出软件设计的新理念和新方法，以及交互设计，目标导向，角色分析以及脚本提纲等一系列设计概念。,内容：介绍了交互设计的理论，目标，原则，以及设计方法。并介绍了系列关于原型制作，可用性评估，用户测试，调查的操作方法。,推荐书籍,内容： 用户研究 界面设计 可用性评估,推荐书籍,内容： 以本能，行为和反思三个设计的不同纬度为基础，阐述了情感在设计中所处的地位和重要作用。并分析如何把情感效果融入产品设计中。,推荐书籍,内容 对于交互相关概念的清晰界定，并对于软件姿态和设计准则进行了深入剖析，试图回答设计中why的问题,推荐书籍,内容： 设计符合用户期望的产品,推荐书籍,内容 对软件人机界面的形式和标准，特别是weindows界面标准，网页设计标准等进行了详细描述，可以让设计师少犯低级错误,推荐书籍,内容 本书是AJAX之父的经典之作。本书用简洁的语言系统化地诠释了设计、技术和商业融合是最重要的发展趋势。全书共8章，包括关于用户体验以及为什么它如此重要，认识这些要素、战略层、范围层、结构层、框架层、表现层以及要素的应用。,推荐书籍,Thanks all !,