ixdc 中国交互设计体验日-b1_欧阳灿、张佳佳_从人物角色到设计呈现
DESCRIPTION
在这个低成本就能抄袭的互联网时代,如何创新是越来越多公司考虑的问题。如何从拍脑袋就决定想法的方式,转移到系统的创新方式是这个workshop要带领大家体验的。 "人物角色"很多产品都有,但是如何使用,如何融入到设计中是设计师在实际工作中比较棘手的。在此workshop大家将能体验完整而合理的新产品诞生流程。 课程参与者将学到 1、了解人物角色的创建过程 2、了解当项目需要时,如何根据人物角色进行设计 3、了解如何在人物角色上进行创新设计 4、了解信息表达对交互的设计的影响。 工作坊环节安排 1、人物角色与交互设计的介绍:介绍网易这个两个工作的现状,以及工作方法和流程; 2、互动环节:分步进行人物角色-用户需求-交互设计-设计程序; 3、提问环节; 2010年首届中国交互设计体验日,是以“赢在互动”为主题的大型交互设计会议盛宴。大会包括交互设计演讲、论坛、展览及工作坊。通过互动、交流体验的方式,将“交互设计”的理念在中国设计产业中进行高层次、深度、广泛的推广与传播。 我们希望通过这次大会,聚集国内外交互设计先驱者;展示中国交互设计优秀成果;为交互设计教育与企业搭建一个交流的平台; 促进中国交互设计产业与国际设计前沿的同步发展。TRANSCRIPT
![Page 1: IxDC 中国交互设计体验日-B1_欧阳灿、张佳佳_从人物角色到设计呈现](https://reader031.vdocuments.site/reader031/viewer/2022012304/556164bbd8b42a5f4b8b4f3a/html5/thumbnails/1.jpg)
![Page 2: IxDC 中国交互设计体验日-B1_欧阳灿、张佳佳_从人物角色到设计呈现](https://reader031.vdocuments.site/reader031/viewer/2022012304/556164bbd8b42a5f4b8b4f3a/html5/thumbnails/2.jpg)
1. 自我介绍
2. 什么是人物觊色
3. 为什么要做人物觊色
4. 如何构建人物觊色
5. 创建场景剧本和需求
6. 通过需求构建交互框架
7. 通过觊色完善交互设计
8. 提问时间
关于我们 和你的组员相互介绍 请帮我们介绍一下你右边的人
![Page 3: IxDC 中国交互设计体验日-B1_欧阳灿、张佳佳_从人物角色到设计呈现](https://reader031.vdocuments.site/reader031/viewer/2022012304/556164bbd8b42a5f4b8b4f3a/html5/thumbnails/3.jpg)
1. 自我介绍
2. 什么是人物觊色
3. 为什么要做人物觊色
4. 如何构建人物觊色
5. 创建场景剧本和需求
6. 通过需求构建交互框架
7. 通过觊色完善交互设计
8. 提问时间
![Page 4: IxDC 中国交互设计体验日-B1_欧阳灿、张佳佳_从人物角色到设计呈现](https://reader031.vdocuments.site/reader031/viewer/2022012304/556164bbd8b42a5f4b8b4f3a/html5/thumbnails/4.jpg)
![Page 5: IxDC 中国交互设计体验日-B1_欧阳灿、张佳佳_从人物角色到设计呈现](https://reader031.vdocuments.site/reader031/viewer/2022012304/556164bbd8b42a5f4b8b4f3a/html5/thumbnails/5.jpg)
The personas are archetypes built after a preceding exhaustive observation of the
potential users.
?
![Page 6: IxDC 中国交互设计体验日-B1_欧阳灿、张佳佳_从人物角色到设计呈现](https://reader031.vdocuments.site/reader031/viewer/2022012304/556164bbd8b42a5f4b8b4f3a/html5/thumbnails/6.jpg)
The personas are archetypes built after a preceding exhaustive observation of the
potential users.
![Page 7: IxDC 中国交互设计体验日-B1_欧阳灿、张佳佳_从人物角色到设计呈现](https://reader031.vdocuments.site/reader031/viewer/2022012304/556164bbd8b42a5f4b8b4f3a/html5/thumbnails/7.jpg)
?
![Page 8: IxDC 中国交互设计体验日-B1_欧阳灿、张佳佳_从人物角色到设计呈现](https://reader031.vdocuments.site/reader031/viewer/2022012304/556164bbd8b42a5f4b8b4f3a/html5/thumbnails/8.jpg)
Persona
![Page 9: IxDC 中国交互设计体验日-B1_欧阳灿、张佳佳_从人物角色到设计呈现](https://reader031.vdocuments.site/reader031/viewer/2022012304/556164bbd8b42a5f4b8b4f3a/html5/thumbnails/9.jpg)
1. 自我介绍
2. 什么是人物觊色
3. 为什么要做人物觊色
4. 如何构建人物觊色
5. 创建场景剧本和需求
6. 通过需求构建交互框架
7. 通过觊色完善交互设计
8. 提问时间
人人皆是设计师 ——Don Norman
![Page 10: IxDC 中国交互设计体验日-B1_欧阳灿、张佳佳_从人物角色到设计呈现](https://reader031.vdocuments.site/reader031/viewer/2022012304/556164bbd8b42a5f4b8b4f3a/html5/thumbnails/10.jpg)
![Page 11: IxDC 中国交互设计体验日-B1_欧阳灿、张佳佳_从人物角色到设计呈现](https://reader031.vdocuments.site/reader031/viewer/2022012304/556164bbd8b42a5f4b8b4f3a/html5/thumbnails/11.jpg)
fossilized adj. 变成化石的
foster v. 培养,养育,促进,鼓励
foul adj. 邪恶的;违规的
fowl n. 鸡;家禽
fraction n. 片断;分数
fracture n./v. 断裂;骨折
fragile adj. 体质弱的;脆的
fragment n. 碎片,破片
fragmentary adj. 碎片的;丌连续的
fragrant adj. 香的,芬芳的
![Page 12: IxDC 中国交互设计体验日-B1_欧阳灿、张佳佳_从人物角色到设计呈现](https://reader031.vdocuments.site/reader031/viewer/2022012304/556164bbd8b42a5f4b8b4f3a/html5/thumbnails/12.jpg)
foul 拉登foster了大量的飞行员,他们劫持了美国的民用飞机,撞击
了世贸大楼,到处fragment 横飞,伴随着清脆的骨骼fracture的声音,
fragrant香水瓶炸裂的声音,厨房里fowl飞狗跳,fragile的老年人的呻吟,
fragmentary爆炸声,如同灾难片的fraction,这一天将是美国人民难忘的
日子,即使fossilized死人,也丌应该忘记。
![Page 13: IxDC 中国交互设计体验日-B1_欧阳灿、张佳佳_从人物角色到设计呈现](https://reader031.vdocuments.site/reader031/viewer/2022012304/556164bbd8b42a5f4b8b4f3a/html5/thumbnails/13.jpg)
![Page 14: IxDC 中国交互设计体验日-B1_欧阳灿、张佳佳_从人物角色到设计呈现](https://reader031.vdocuments.site/reader031/viewer/2022012304/556164bbd8b42a5f4b8b4f3a/html5/thumbnails/14.jpg)
1. 自我介绍
2. 什么是人物觊色
3. 为什么要做人物觊色
4. 如何构建人物觊色
5. 创建场景剧本和需求
6. 通过需求构建交互框架
7. 通过觊色完善交互设计
8. 提问时间
![Page 15: IxDC 中国交互设计体验日-B1_欧阳灿、张佳佳_从人物角色到设计呈现](https://reader031.vdocuments.site/reader031/viewer/2022012304/556164bbd8b42a5f4b8b4f3a/html5/thumbnails/15.jpg)
![Page 16: IxDC 中国交互设计体验日-B1_欧阳灿、张佳佳_从人物角色到设计呈现](https://reader031.vdocuments.site/reader031/viewer/2022012304/556164bbd8b42a5f4b8b4f3a/html5/thumbnails/16.jpg)
![Page 17: IxDC 中国交互设计体验日-B1_欧阳灿、张佳佳_从人物角色到设计呈现](https://reader031.vdocuments.site/reader031/viewer/2022012304/556164bbd8b42a5f4b8b4f3a/html5/thumbnails/17.jpg)
![Page 18: IxDC 中国交互设计体验日-B1_欧阳灿、张佳佳_从人物角色到设计呈现](https://reader031.vdocuments.site/reader031/viewer/2022012304/556164bbd8b42a5f4b8b4f3a/html5/thumbnails/18.jpg)
• 解决什么问题,达到什么目的?
• 头脑风暴——solution mode
• 界定需求 :功能需求,体验需求,信息需求……
![Page 19: IxDC 中国交互设计体验日-B1_欧阳灿、张佳佳_从人物角色到设计呈现](https://reader031.vdocuments.site/reader031/viewer/2022012304/556164bbd8b42a5f4b8b4f3a/html5/thumbnails/19.jpg)
目标 pain-point
可能的功能不内容 我们的目标? 商业目的? 品牌定位? 想让用户将什么样的体验特质和我们的产品联系在一起
![Page 20: IxDC 中国交互设计体验日-B1_欧阳灿、张佳佳_从人物角色到设计呈现](https://reader031.vdocuments.site/reader031/viewer/2022012304/556164bbd8b42a5f4b8b4f3a/html5/thumbnails/20.jpg)
![Page 21: IxDC 中国交互设计体验日-B1_欧阳灿、张佳佳_从人物角色到设计呈现](https://reader031.vdocuments.site/reader031/viewer/2022012304/556164bbd8b42a5f4b8b4f3a/html5/thumbnails/21.jpg)
1. 自我介绍
2. 什么是人物觊色
3. 为什么要做人物觊色
4. 如何构建人物觊色
5. 创建场景剧本和需求
6. 通过需求构建交互框架
7. 通过觊色完善交互设计
8. 提问时间
什么是交互框架? 怎样做交互框架? 需要注意的是?
![Page 22: IxDC 中国交互设计体验日-B1_欧阳灿、张佳佳_从人物角色到设计呈现](https://reader031.vdocuments.site/reader031/viewer/2022012304/556164bbd8b42a5f4b8b4f3a/html5/thumbnails/22.jpg)
什么是交互框架?
![Page 23: IxDC 中国交互设计体验日-B1_欧阳灿、张佳佳_从人物角色到设计呈现](https://reader031.vdocuments.site/reader031/viewer/2022012304/556164bbd8b42a5f4b8b4f3a/html5/thumbnails/23.jpg)
什么是交互框架?
高层次上的屏幕布局。 是对产品流程,行为和组织的定义 能够承载人物觊色所需功能的实现 具有良好的拓展性
![Page 24: IxDC 中国交互设计体验日-B1_欧阳灿、张佳佳_从人物角色到设计呈现](https://reader031.vdocuments.site/reader031/viewer/2022012304/556164bbd8b42a5f4b8b4f3a/html5/thumbnails/24.jpg)
想想你常用的元素
很多很多……
![Page 25: IxDC 中国交互设计体验日-B1_欧阳灿、张佳佳_从人物角色到设计呈现](https://reader031.vdocuments.site/reader031/viewer/2022012304/556164bbd8b42a5f4b8b4f3a/html5/thumbnails/25.jpg)
从人物角色的场景剧本中想象理想的用户交互
交互框架
限制
元素 需求
![Page 26: IxDC 中国交互设计体验日-B1_欧阳灿、张佳佳_从人物角色到设计呈现](https://reader031.vdocuments.site/reader031/viewer/2022012304/556164bbd8b42a5f4b8b4f3a/html5/thumbnails/26.jpg)
1)确定外形不产品的使用姿态: 你在人物觊色,场景剧本来找到了什么样的外形?
![Page 27: IxDC 中国交互设计体验日-B1_欧阳灿、张佳佳_从人物角色到设计呈现](https://reader031.vdocuments.site/reader031/viewer/2022012304/556164bbd8b42a5f4b8b4f3a/html5/thumbnails/27.jpg)
台式机
移劢存储
笔记本
web
手机
ipad
制作 存储 管理 查看 分享
网络存储产品的主要用户行为
![Page 28: IxDC 中国交互设计体验日-B1_欧阳灿、张佳佳_从人物角色到设计呈现](https://reader031.vdocuments.site/reader031/viewer/2022012304/556164bbd8b42a5f4b8b4f3a/html5/thumbnails/28.jpg)
台式机
移劢存储
笔记本
web
手机
ipad
制作 存储 管理 查看 分享
1
2
4
3 5
网络存储产品的主要用户行为
![Page 29: IxDC 中国交互设计体验日-B1_欧阳灿、张佳佳_从人物角色到设计呈现](https://reader031.vdocuments.site/reader031/viewer/2022012304/556164bbd8b42a5f4b8b4f3a/html5/thumbnails/29.jpg)
2)提為功能元素(属性)找到觋决方案 表现为一些内容和数据 如文件、邮件、联系人;视觉、大小、数量、记录等。 功能元素来自于功能需求。
![Page 30: IxDC 中国交互设计体验日-B1_欧阳灿、张佳佳_从人物角色到设计呈现](https://reader031.vdocuments.site/reader031/viewer/2022012304/556164bbd8b42a5f4b8b4f3a/html5/thumbnails/30.jpg)
![Page 31: IxDC 中国交互设计体验日-B1_欧阳灿、张佳佳_从人物角色到设计呈现](https://reader031.vdocuments.site/reader031/viewer/2022012304/556164bbd8b42a5f4b8b4f3a/html5/thumbnails/31.jpg)
元素/属性 行为需求
相册
相册名
相册中照片数
更新时间
相册隐私属性
上传/添加
管理相册-下载、删除、改名等
发送
预览
分享
![Page 32: IxDC 中国交互设计体验日-B1_欧阳灿、张佳佳_从人物角色到设计呈现](https://reader031.vdocuments.site/reader031/viewer/2022012304/556164bbd8b42a5f4b8b4f3a/html5/thumbnails/32.jpg)
场景1:备份培训课件
公司的新员工培训马上要开始了。开诼前一天下班时,马文辉已经做好了
ppt课件。按照习惯,他拷了一份到u盘中,然后用outlook把课件作为附
件发到自己的公司邮箱,再登录163邮箱,把课件上传到网盘中。 晚上回
到家,他突然想起课件有个地方需要修改。修改好以后,他丌得丌再次更
新u盘的课件,重新发邮件到公司邮箱,并登录163邮箱网盘,把下午的文
件删除,再上传修改后的课件。 第二天上诼,他提前半小时到培训课件,
准备把课件拷到电脑上。但是电脑的usb接口有点问题,识别出u盘但没法
打开。好在电脑能联网,他登录163邮箱,把课件下载下来打开,看到能正
常播放,他这才放心。
![Page 33: IxDC 中国交互设计体验日-B1_欧阳灿、张佳佳_从人物角色到设计呈现](https://reader031.vdocuments.site/reader031/viewer/2022012304/556164bbd8b42a5f4b8b4f3a/html5/thumbnails/33.jpg)
元素/属性 行为需求
文件
邮件
类型(格式)
时间
大小
上传地点
上传/添加
下载
删除
修改
发送
预览
分享
![Page 34: IxDC 中国交互设计体验日-B1_欧阳灿、张佳佳_从人物角色到设计呈现](https://reader031.vdocuments.site/reader031/viewer/2022012304/556164bbd8b42a5f4b8b4f3a/html5/thumbnails/34.jpg)
上传/添加
分享
点上传按钮,用flash上传
从附件中直接转到相册
手机中直接上传
从桌面上拖劢图片到相册
……
发邮件
传到微博
发彩信
做明信片
……
![Page 35: IxDC 中国交互设计体验日-B1_欧阳灿、张佳佳_从人物角色到设计呈现](https://reader031.vdocuments.site/reader031/viewer/2022012304/556164bbd8b42a5f4b8b4f3a/html5/thumbnails/35.jpg)
如何找到最合适的方案和组合?
0
5
10有效
符合设计原则
适合技术不成本
其他需求
![Page 36: IxDC 中国交互设计体验日-B1_欧阳灿、张佳佳_从人物角色到设计呈现](https://reader031.vdocuments.site/reader031/viewer/2022012304/556164bbd8b42a5f4b8b4f3a/html5/thumbnails/36.jpg)
3)决定功能组合不功能层次 将功能分组——丌是将视觉分组
大致的感觉 查看数据不功能 完善戒重新划分
是否有需求是相关联的(前后关系,戒者同时需要的关系)
![Page 37: IxDC 中国交互设计体验日-B1_欧阳灿、张佳佳_从人物角色到设计呈现](https://reader031.vdocuments.site/reader031/viewer/2022012304/556164bbd8b42a5f4b8b4f3a/html5/thumbnails/37.jpg)
添加任务
添加分类
快速添加任务
删除任务 删除分类
分享 排序
编辑 视图显示 标记重要
移劢
搜索
完成任务
刷新
提炼的功能
![Page 38: IxDC 中国交互设计体验日-B1_欧阳灿、张佳佳_从人物角色到设计呈现](https://reader031.vdocuments.site/reader031/viewer/2022012304/556164bbd8b42a5f4b8b4f3a/html5/thumbnails/38.jpg)
添加任务
添加分类
快速添加任务 删除任务
删除分类
编辑
标记重要
搜索
完成任务
刷新
编辑分类
分组后的功能
分享
排序 视图显示
移劢
![Page 39: IxDC 中国交互设计体验日-B1_欧阳灿、张佳佳_从人物角色到设计呈现](https://reader031.vdocuments.site/reader031/viewer/2022012304/556164bbd8b42a5f4b8b4f3a/html5/thumbnails/39.jpg)
4)勾画大致的框架——外粗内精,丌拘细节
![Page 40: IxDC 中国交互设计体验日-B1_欧阳灿、张佳佳_从人物角色到设计呈现](https://reader031.vdocuments.site/reader031/viewer/2022012304/556164bbd8b42a5f4b8b4f3a/html5/thumbnails/40.jpg)
画的丌是外观,而是你的思考过程
![Page 41: IxDC 中国交互设计体验日-B1_欧阳灿、张佳佳_从人物角色到设计呈现](https://reader031.vdocuments.site/reader031/viewer/2022012304/556164bbd8b42a5f4b8b4f3a/html5/thumbnails/41.jpg)
4)构建关键情景剧本 描述每个主要的任务
![Page 42: IxDC 中国交互设计体验日-B1_欧阳灿、张佳佳_从人物角色到设计呈现](https://reader031.vdocuments.site/reader031/viewer/2022012304/556164bbd8b42a5f4b8b4f3a/html5/thumbnails/42.jpg)
草图 关键任务 可行度
![Page 43: IxDC 中国交互设计体验日-B1_欧阳灿、张佳佳_从人物角色到设计呈现](https://reader031.vdocuments.site/reader031/viewer/2022012304/556164bbd8b42a5f4b8b4f3a/html5/thumbnails/43.jpg)
6)验证:思维方式可以是:如果……将会…… 需要注意的是: 必须有但是丌会经常发生的情况
特点是:可能会忘记上一次怎么用
实现方式和入口丌用太多
没有必要提供定制的服务
一些边缘和极限的场景需要考虑
![Page 44: IxDC 中国交互设计体验日-B1_欧阳灿、张佳佳_从人物角色到设计呈现](https://reader031.vdocuments.site/reader031/viewer/2022012304/556164bbd8b42a5f4b8b4f3a/html5/thumbnails/44.jpg)
The devil is in the details
1. 自我介绍
2. 什么是人物觊色
3. 为什么要做人物觊色
4. 如何构建人物觊色
5. 创建场景剧本和需求
6. 通过需求构建交互框架
7. 通过觊色完善交互设计
8. 提问时间
魔鬼都在細節裡
![Page 45: IxDC 中国交互设计体验日-B1_欧阳灿、张佳佳_从人物角色到设计呈现](https://reader031.vdocuments.site/reader031/viewer/2022012304/556164bbd8b42a5f4b8b4f3a/html5/thumbnails/45.jpg)
铭记你的人物觊色,
丌要让繁冗的功能让他反感
• 认知负荷 • 记忆负荷 • 视觉负荷 • 物理负荷
![Page 46: IxDC 中国交互设计体验日-B1_欧阳灿、张佳佳_从人物角色到设计呈现](https://reader031.vdocuments.site/reader031/viewer/2022012304/556164bbd8b42a5f4b8b4f3a/html5/thumbnails/46.jpg)
给用户一个
周到、体贴、富有人情味、省事
的服务
![Page 47: IxDC 中国交互设计体验日-B1_欧阳灿、张佳佳_从人物角色到设计呈现](https://reader031.vdocuments.site/reader031/viewer/2022012304/556164bbd8b42a5f4b8b4f3a/html5/thumbnails/47.jpg)
你知道我从哪里来的吗? 为什么让我返回?
![Page 48: IxDC 中国交互设计体验日-B1_欧阳灿、张佳佳_从人物角色到设计呈现](https://reader031.vdocuments.site/reader031/viewer/2022012304/556164bbd8b42a5f4b8b4f3a/html5/thumbnails/48.jpg)
![Page 49: IxDC 中国交互设计体验日-B1_欧阳灿、张佳佳_从人物角色到设计呈现](https://reader031.vdocuments.site/reader031/viewer/2022012304/556164bbd8b42a5f4b8b4f3a/html5/thumbnails/49.jpg)
Q&A
完整的ppt下载:http://uedc.163.com/
1. 自我介绍
2. 什么是人物觊色
3. 为什么要做人物觊色
4. 如何构建人物觊色
5. 创建场景剧本和需求
6. 通过需求构建交互框架
8. 提问时间
7. 通过觊色完善交互设计