交互设计师需具备的项目意识
时间
成果 质量
QBT
交互设计师需了解流程
流程的重要性 • 预防研究、设计、评估过程中的遗漏； • 规范研究、设计、评估的步骤； • 明确与公司研发流程的衔接； • 解决整个过程中责任不明、任务不清的问题
智能体系
公司组织结构 组织划分 研发流程 跨系统流程
….
公司级流程
系统流程
Helen Sharp
从用户角度来说，交互设计是一种如何让产品易用，有效而让人愉悦的技术，它 致力于了解目标用户和他们的期望，了解用户在同产品交互时彼此的行为，了解 “人”本身的心理和行为特点，同时，还包括了解各种有效的交互方式，并对它 们进行增强和扩充。交互设计还涉及到多个学科，以及和多领域多背景人员的沟 通。
Numal做完角色设计后，整个项目组都很认可。Numal还发现有了 角色之后项目组成员间的讨论变得简单和高效了。
一段经典对话
定义角色之前 • 莫名（产品经理）：我想豆瓣用户 需要打印功能 • Numal：我想他们不会需要打印功 能的，打印功能对豆瓣的用户没有 什么意义吧 • 莫名：但是也许有人会希望要打印 功能呢？ 定义角色之后 • 莫名（产品经理）：我想豆瓣用户 需要打印功能 • Numal：小翠不需要打印功能
有意图的， 能帮助用户实现他们的目标和渴望 注重实效，帮助委托的组织实现它们的目标 优雅的
– – – 最简单的完整方案 拥有内部的一致性 合适的容纳和情感
交互设计师的基础技能要求
Numal做完整个项目后，团队对其专业性和技能都很满意，于是让 他传授一下自己的经验。
常用的交互设计工具
Visio Axure illustrator Fireworks Word Photoshop
目标
•
用户目标
• • • 生活目标：一种新的消遣方式 体验目标：容易使用、方便、舒适 最终目标：撰写浏览书评，找到自己兴趣相同的人 市场：聚集文化人群，创建文化交流社区
•
产品目标
•
角色
• 简单的说，角色就是为我们的产品虚拟的一个典型用户。我们在设计 是，就可以专门为“他”设计。
角色是一种强有力的交互设计工具 角色的确定给设计带来的好处：
UCD设计理想流程
简单说明： 1. 创造一些用户 2. 找出重要的活动 3. 找出用户模型 -- 用户期望如何完
成这些活动
4. 草拟出初版的设计 5. 一直反复把设计修改得更容易, 直 到虚构用户能轻易使用为止 6. 找真人来看着他们试用你的软件
接收需求
调研分析
交互设计
视觉设计
可用性测试
上线
交互设计所做的事情
交互设计
商业美术
电影产业
服务业
人机交互 （HCI）
……
……
交互设计的一些理论
交互的三个要素
机器/ 系统
界面
人
可是，Numal发现在人机工程的介绍中，三要素是另外的三个……
交互三个要素
机器 环境
人
基础的交互方式
– 交互过程是一个输入和输出的过程，人通过人机界面向计算机输入指令， 计算机经过处理后把输出结果呈现给用户。人和计算机之间的输入和输出 的形式是多种多样的，因此交互的形式也是多样化的。
• 莫名（产品经理）：我想应该有人
会用到打印功能的。 • Numal：我我们是为小翠设计的这 个产品，不是为其他的人。我们不
• Numal ：当然有这种可能，但是
这种需求很少啊 • ……
需要做这个功能。
• 莫名：哦，那好吧
脚本
人和他们的活动组成的故事 使用具体的故事来构造模拟用户的可能行为或者讲述设计方案 关注人物角色以及其心智模型，目标和活动，有可能包括对环境的考虑
•是什么让网站体验几年间变得这么好？ •是什么让Numal的朋友如此愉悦有安全感？
Hale Waihona Puke 交互设计定义和发展Numal大学上的是设计专业。 在大学最后两年，他的方向转向了交互设计。 通过学习，他了解了很多交互设计的基本概念。
交互设计定义（一）
简单的说，交互设计是人工制品、环境和系统的行为，以及传达这种行为的外形 元素的设计与定义。不像传统的设计学科主要关注形式，最近则是关注内容和内 涵，而交互设计首先旨在规划和描述事物的行为方式，然后描述传达这种行为的 最有效形式。
交互流程
设计流程 视觉流程
用研流程
交互行业的信息
国内部分人机交互学术机构
北京大学计算机系人机交互与多媒体研究室 清华大学工业工程系人因工程实验室 中国科学院软件研究所人机交互技术与智能信息处理实验室 欧盟可用性中国中心 微软亚洲研究院—交互设计中心 UPA中国
业界公司信息
动作交互
数据交互
声音交互
图像交互
平衡5E法
有效(Effective) 效率(Efficient) 易学(Easy To Learn) 吸引人(Engaging) 容错性(Error Tolrant)
交互设计的方法和原理
Numal了解过了交互设计的相关知识后，想在工作中实践一下，可 是怎么下手呢？ 接下来他开始研究交互设计的方法……
• 旧石器时代
– 简单的 – 单一的
•
机器大工业时代
– – – – 复杂的 繁琐的 出错率高的 危险的
•
信息时代
– 效率 – 易用性
交互设计行业的发展
• 1959年，美国学者B.Shackel提出了人机界面的第一篇文献《关于计算机控制台设计的人机工程学》 初创期 （19291970） • 1960年，Liklider JCK首次提出“人机紧密共栖的概念，被视为人机界面学的启蒙观点 • 1969年，召开了第一次人机系统国际大会，同年第一份专业杂志"国际人机研究（IJMMS）"创刊。 • 从1970年到1973年出版了四本与计算机相关的人机工程学专著 奠基期
交互设计
目录
交互设计定义和发展
交互设计理论
交互设计方法和原则
交互行业信息
QA
先介绍一个人……
Numal 祖籍 学历 公司以及职业 性格 爱好
男 山东农村 大学本科
25岁
任职于知名互联网公司，从事设计相关 工作 活泼，爱开玩笑，有时候会多愁善感 足球、阅读、旅行、写blog
补充
由于生在农村，接触互联网的机会很少， 直到高中毕业才知道互联网是什么。 现在非常迷恋网络，每天闲暇的时候都 想在互联网上闲逛。
艾兰.库珀(alan cooper)
VB之父 交互设计之父 微软视窗先锋奖软件梦幻奖得主 库伯交互设计公司创始人
交互设计定义（二）
设计支持人们日常工作与生活的交互式产品。具体地说，交互设计就是关于创建 新的用户体验的问题，其目的是增强和扩充人们工作、通信及交互的方式。 Winnogard（1997）把交互设计描述为“人类交流和交互空间的设计”
8年前，Numal高中毕业，朋友告诉他注册一个电子邮箱就可以方便的给人写 信，让他也去弄一个。于是他就去上网了。 他看到注册页面时，脑袋完全不清楚面前是什么东西。他有了一串疑问： 电子邮箱是什么东西？ 新用户是什么？ 邮箱名是什么？ …… 他发现自己很笨，什么都不懂，非常的懊恼。
两年前，Numal推荐一个不常上网的人去使用自己设计的网站：豆瓣 他朋友说发现豆瓣的注册很简洁。 他朋友说很清楚自己要做什么事情 他朋友说很放心 他朋友说没有出错 他朋友说很快完成了注册 整个过程他朋友很愉快，很有安全感
返回与活动相关的信息，以便用户能够继续下一步操作 在特定时刻显示用户操作，以防误操作 准确表达控制及其效果之间的关系 保证同一系统的同一功能的表现及操作一致 充分准确的操作提示
反馈 限制 映射 一致性
•
启发性
–
交互设计准则
设计方案属性： • 伦理的（能体谅人，有帮助）
– – 不伤害 改善人的状况
• • •
可识别的
• 形状 • 布局 • 尺寸 • 色彩
可感知记忆的
• 语言的含义 • 色彩的隐喻 • 相对位置 • 层级、关系 • ……
可物理衡量的
• 流程 • 点击次数 • 移动距离 • 姿势 • 转换方式 • ……
交互设计的核心要素
精确描述我们的用户以及用户希望达到的目标，定义几个典型角色，并用故事的 形式表达出来
• 人机交互的研究重点放在了智能化交互，多模态（多通道）-多媒体交互，虚拟交互以及人机协同交
提高期 （1996- ） 互等方面，也就是放在"以人为在中心"的人机交互技术方面。
交互设计的范畴
学科
人类工程学 心理学 认知科学 信息学 工程学 计算机科学 软件工程 社会学 人类学 语言学 美学
设计
图形设计 产品设计
Numal感觉角色设计很有兴趣，于是就针对自己负责的产品，制定 了一个角色
一个定义角色的例子
小翠 学历 女 大学本科 22岁
公司以及职业 性格
爱好 补充
政府文员 活泼，爱开玩笑，但很有礼貌
读书、旅行、写blog 小翠的单位可以上网，他每天的工作比 较轻松，经常上网看看电子版的小说、 散文、诗歌等。 她是文科的学生，对电脑知识了解很少， 对网络的认识很浅。 她喜欢交朋友，跟人属于自来熟的那种。
• •
基于任务的脚本 基于场景的脚本
一个场景脚本的例子
1.早上，小翠来到办公室，拿起电话给朋友打了个电话，然后打开电脑， 打开邮箱，开始一天的工作
2.在开始工作之前，她上了一下豆瓣，看看是否有朋友给他留言或者回复
了她的评论。 3.小翠收到一封邮件，来此办公室主任的，告知 同事strong今天请假可 能来不了，如果有事情帮忙处理一下。 4.如往常一样，把邮件中的一些事情处理一下，需要打印的就打印，需要 盖章的就盖章。 5.在工作过程中，她总是开着QQ，经常有朋友给他发个链接让她看。当 她正在阅读一封刚收到的邮件时，一个好友给她发来了豆瓣的一个网址， 她便会放下手头的工作开始浏览网页。 ......