交互设计简介

合集下载
  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
• 旧石器时代
– 简单的 – 单一的

机器大工业时代
– – – – 复杂的 繁琐的 出错率高的 危险的

信息时代
– 效率 – 易用性
交互设计行业的发展
• 1959年,美国学者B.Shackel提出了人机界面的第一篇文献《关于计算机控制台设计的人机工程学》 初创期 (19291970) • 1960年,Liklider JCK首次提出“人机紧密共栖的概念,被视为人机界面学的启蒙观点 • 1969年,召开了第一次人机系统国际大会,同年第一份专业杂志"国际人机研究(IJMMS)"创刊。 • 从1970年到1973年出版了四本与计算机相关的人机工程学专著 奠基期
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、……
• 人机交互的研究重点放在了智能化交互,多模态(多通道)-多媒体交互,虚拟交互以及人机协同交
提高期 (1996- ) 互等方面,也就是放在"以人为在中心"的人机交互技术方面。
交互设计的范畴
学科
人类工程学 心理学 认知科学 信息学 工程学 计算机科学 软件工程 社会学 人类学 语言学 美学
设计
图形设计 产品设计
有意图的, 能帮助用户实现他们的目标和渴望 注重实效,帮助委托的组织实现它们的目标 优雅的
– – – 最简单的完整方案 拥有内部的一致性 合适的容纳和情感
交互设计师的基础技能要求
Numal做完整个项目后,团队对其专业性和技能都很满意,于是让 他传授一下自己的经验。
常用的交互设计工具
Visio Axure illustrator Fireworks Word Photoshop
目标

用户目标
• • • 生活目标:一种新的消遣方式 体验目标:容易使用、方便、舒适 最终目标:撰写浏览书评,找到自己兴趣相同的人 市场:聚集文化人群,创建文化交流社区

产品目标

角色
• 简单的说,角色就是为我们的产品虚拟的一个典型用户。我们在设计 是,就可以专门为“他”设计。
角色是一种强有力的交互设计工具 角色的确定给设计带来的好处:
(19701979)
• 1970年成立了两个HCI研究中心:一个是英国的Loughbocough大学的HUSAT研究中心,另一个 是美国Xerox公司的Palo Alto研究中心
• 理论方面,从人机工程学独立出来,更加强调认知心理学以及行为学和社会学等学科的理论指导 发展期
(19801995)
• 实践范畴方面,从人机界面拓延开来,强调计算机对于人的反馈交互作用。"人机界面"一词被"人机 交互"所取代。HCI中的"I",也由"Interface(界面/接口)"变成了"Interaction(交互)"。
交互设计
商业美术
电影产业
服务业
人机交互 (HCI)
……
……
交互设计的一些理论
交互的三个要素
机器/ 系统
界面

可是,Numal发现在人机工程的介绍中,三要素是另外的三个……
交互三个要素
机器 环境

基础的交互方式
– 交互过程是一个输入和输出的过程,人通过人机界面向计算机输入指令, 计算机经过处理后把输出结果呈现给用户。人和计算机之间的输入和输出 的形式是多种多样的,因此交互的形式也是多样化的。
目标
• 用户 • 产品
角色
• 筛选 • 分类
脚本
• 任务 • 场景
目标
•目标是行动的驱动力,产品的功能和行为必须通过任务来解决目标
•产品成功的关键是目标,而不是特性 •成功的交互设计师应该对目标高度敏感 • 用户目标
• • • 生活目标 体验目标 最终目标 利润 市场

产品目标
• •
Numal在思考,那么豆瓣的目标是什么呢?
动作交互
数据交互
声音交互
图像交互
平衡5E法
有效(Effective) 效率(Efficient) 易学(Easy To Learn) 吸引人(Engaging) 容错性(Error Tolrant)
交互设计的方法和原理
Numal了解过了交互设计的相关知识后,想在工作中实践一下,可 是怎么下手呢? 接下来他开始研究交互设计的方法……
交互设计师需具备的项目意识
时间
成果 质量
QBT
交互设计师需了解流程
流程的重要性 • 预防研究、设计、评估过程中的遗漏; • 规范研究、设计、评估的步骤; • 明确与公司研发流程的衔接; • 解决整个过程中责任不明、任务不清的问题
智能体系
公司组织结构 组织划分 研发流程 跨系统流程
….
公司级流程
系统流程
艾兰.库珀(alan cooper)
VB之父 交互设计之父 微软视窗先锋奖软件梦幻奖得主 库伯交互设计公司创始人
交互设计定义(二)
设计支持人们日常工作与生活的交互式产品。具体地说,交互设计就是关于创建 新的用户体验的问题,其目的是增强和扩充人们工作、通信及交互的方式。 Winnogard(1997)把交互设计描述为“人类交流和交互空间的设计”
Numal感觉角色设计很有兴趣,于是就针对自己负责的产品,制定 了一个角色
一个定义角色的例子
小翠 学历 女 大学本科 22岁
公司以及职业 性格
爱好 补充
政府文员 活泼,爱开玩笑,但很有礼貌
读书、旅行、写blog 小翠的单位可以上网,他每天的工作比 较轻松,经常上网看看电子版的小说、 散文、诗歌等。 她是文科的学生,对电脑知识了解很少, 对网络的认识很浅。 她喜欢交朋友,跟人属于自来熟的那种。
Numal做完角色设计后,整个项目组都很认可。Numal还发现有了 角色之后项目组成员间的讨论变得简单和高效了。
一段经典对话
定义角色之前 • 莫名(产品经理):我想豆瓣用户 需要打印功能 • Numal:我想他们不会需要打印功 能的,打印功能对豆瓣的用户没有 什么意义吧 • 莫名:但是也许有人会希望要打印 功能呢? 定义角色之后 • 莫名(产品经理):我想豆瓣用户 需要打印功能 • Numal:小翠不需要打印功能
8年前,Numal高中毕业,朋友告诉他注册一个电子邮箱就可以方便的给人写 信,让他也去弄一个。于是他就去上网了。 他看到注册页面时,脑袋完全不清楚面前是什么东西。他有了一串疑问: 电子邮箱是什么东西? 新用户是什么? 邮箱名是什么? …… 他发现自己很笨,什么都不懂,非常的懊恼。
两年前,Numal推荐一个不常上网的人去使用自己设计的网站:豆瓣 他朋友说发现豆瓣的注册很简洁。 他朋友说很清楚自己要做什么事情 他朋友说很放心 他朋友说没有出错 他朋友说很快完成了注册 整个过程他朋友很愉快,很有安全感
• •
基于任务的脚本 基于场景的脚本
一个场景脚本的例子
1.早上,小翠来到办公室,拿起电话给朋友打了个电话,然后打开电脑, 打开邮箱,开始一天的工作
2.在开始工作之前,她上了一下豆瓣,看看是否有朋友给他留言或者回复
了她的评论。 3.小翠收到一封邮件,来此办公室主任的,告知 同事strong今天请假可 能来不了,如果有事情帮忙处理一下。 4.如往常一样,把邮件中的一些事情处理一下,需要打印的就打印,需要 盖章的就盖章。 5.在工作过程中,她总是开着QQ,经常有朋友给他发个链接让她看。当 她正在阅读一封刚收到的邮件时,一个好友给她发来了豆瓣的一个网址, 她便会放下手头的工作开始浏览网页。 ......
返回与活动相关的信息,以便用户能够继续下一步操作 在特定时刻显示用户操作,以防误操作 准确表达控制及其效果之间的关系 保证同一系统的同一功能的表现及操作一致 充分准确的操作提示
反馈 限制 映射 一致性

启发性

交互设计准则
设计方案属性: • 伦理的(能体谅人,有帮助)
– – 不伤害 改善人的状况
• • •
• 莫名(产品经理):我想应该有人
会用到打印功能的。 • Numal:我我们是为小翠设计的这 个产品,不是为其他的人。我们不
• Numal :当然有这种可能,但是
这种需求很少啊 • ……
需要做这个功能。
• 莫名:哦,那好吧
脚本百度文库
人和他们的活动组成的故事 使用具体的故事来构造模拟用户的可能行为或者讲述设计方案 关注人物角色以及其心智模型,目标和活动,有可能包括对环境的考虑
可识别的
• 形状 • 布局 • 尺寸 • 色彩
可感知记忆的
• 语言的含义 • 色彩的隐喻 • 相对位置 • 层级、关系 • ……
可物理衡量的
• 流程 • 点击次数 • 移动距离 • 姿势 • 转换方式 • ……
交互设计的核心要素
精确描述我们的用户以及用户希望达到的目标,定义几个典型角色,并用故事的 形式表达出来
一个场景脚本的例子
该脚本提纲试图解决的问题: 1.产品使用时的设置是什么? 2.是否会被使用。角色最终期望的结果很长时间? 3.人物角色是否经常被打断? 4.和它一起使用的其他产品是什么?
5.人物的技巧使用频繁程度有多高?
6.为了满足人物角色的目标,角色需要完成哪些主要活动是什么?
交互设计时需关注的可用性指标
交互设计
目录
交互设计定义和发展
交互设计理论
交互设计方法和原则
交互行业信息
QA
先介绍一个人……
Numal 祖籍 学历 公司以及职业 性格 爱好
男 山东农村 大学本科
25岁
任职于知名互联网公司,从事设计相关 工作 活泼,爱开玩笑,有时候会多愁善感 足球、阅读、旅行、写blog
补充
由于生在农村,接触互联网的机会很少, 直到高中毕业才知道互联网是什么。 现在非常迷恋网络,每天闲暇的时候都 想在互联网上闲逛。
ISO9241/11中的定义是:可用性是一个多因素概念,涉及到容易学习、容易 使用、系统的有效性、用户满意,以及把这些因素与实际使用环境联系在一起 针对特定目标的评价。 易学习
安全性
容易使用
用户满意 度 有效性
容错性
常用交互设计原则
• • • • • 可视性

– – – –
功能可性越好,越方便用户发现和了解使用方法
UCD设计理想流程
简单说明: 1. 创造一些用户 2. 找出重要的活动 3. 找出用户模型 -- 用户期望如何完
成这些活动
4. 草拟出初版的设计 5. 一直反复把设计修改得更容易, 直 到虚构用户能轻易使用为止 6. 找真人来看着他们试用你的软件
接收需求
调研分析
交互设计
视觉设计
可用性测试
上线
交互设计所做的事情
DeDream
Numal在学习时,接触到了几个很容易混淆的概念。后来 经过辨析,他这样理解了……
几个概念
• 交互设计
– 设计行为,偏向于计算机的
• 人机交互
– 人与机器相互信息交换
• 交互
– 一种行为
几个概念
• 可用性
– 标准
• 用户体验
– 目标
• UCD
– 原则 – 方法
交互的广义发展历程
Helen Sharp
从用户角度来说,交互设计是一种如何让产品易用,有效而让人愉悦的技术,它 致力于了解目标用户和他们的期望,了解用户在同产品交互时彼此的行为,了解 “人”本身的心理和行为特点,同时,还包括了解各种有效的交互方式,并对它 们进行增强和扩充。交互设计还涉及到多个学科,以及和多领域多背景人员的沟 通。
交互流程
设计流程 视觉流程
用研流程
交互行业的信息
国内部分人机交互学术机构
北京大学计算机系人机交互与多媒体研究室 清华大学工业工程系人因工程实验室 中国科学院软件研究所人机交互技术与智能信息处理实验室 欧盟可用性中国中心 微软亚洲研究院—交互设计中心 UPA中国
业界公司信息
– – – – – 该做什么 便于沟通 提高效率 解决边缘设计 ……
• •
角色
• • • • 一般不超过两个人 一男一女 一般将用户定义为初级用户和中级用户。特殊产品才定义高级用户。 角色描述中应该包含:
– – – – 一张相片 人物基本特征 于产品相关的性格、能力、爱好等介绍 会用到的产品、功能介绍
•是什么让网站体验几年间变得这么好? •是什么让Numal的朋友如此愉悦有安全感?
交互设计定义和发展
Numal大学上的是设计专业。 在大学最后两年,他的方向转向了交互设计。 通过学习,他了解了很多交互设计的基本概念。
交互设计定义(一)
简单的说,交互设计是人工制品、环境和系统的行为,以及传达这种行为的外形 元素的设计与定义。不像传统的设计学科主要关注形式,最近则是关注内容和内 涵,而交互设计首先旨在规划和描述事物的行为方式,然后描述传达这种行为的 最有效形式。
相关文档
最新文档