体验的历程 afooli
DESCRIPTION
阿里巴巴用户体验百家讲堂第7期TRANSCRIPT
![Page 1: 体验的历程 Afooli](https://reader030.vdocuments.pub/reader030/viewer/2022012305/5484d6fdb47959050d8b4cff/html5/thumbnails/1.jpg)
体验的历程 @afooli
![Page 2: 体验的历程 Afooli](https://reader030.vdocuments.pub/reader030/viewer/2022012305/5484d6fdb47959050d8b4cff/html5/thumbnails/2.jpg)
今天的主题:
• 互联网产品与设计的发展
• 体验设计的思路
• 案例分享:
- 视觉设计
- 交互设计
- 用户研究
- 广告研究与设计
- 文字优化
• 体验设计的体会
• Q&A
![Page 3: 体验的历程 Afooli](https://reader030.vdocuments.pub/reader030/viewer/2022012305/5484d6fdb47959050d8b4cff/html5/thumbnails/3.jpg)
1999年 新浪网首页
![Page 4: 体验的历程 Afooli](https://reader030.vdocuments.pub/reader030/viewer/2022012305/5484d6fdb47959050d8b4cff/html5/thumbnails/4.jpg)
2002年 中华网首页
![Page 5: 体验的历程 Afooli](https://reader030.vdocuments.pub/reader030/viewer/2022012305/5484d6fdb47959050d8b4cff/html5/thumbnails/5.jpg)
2005年 新浪博客首页
![Page 6: 体验的历程 Afooli](https://reader030.vdocuments.pub/reader030/viewer/2022012305/5484d6fdb47959050d8b4cff/html5/thumbnails/6.jpg)
2008年 校内网首页
![Page 7: 体验的历程 Afooli](https://reader030.vdocuments.pub/reader030/viewer/2022012305/5484d6fdb47959050d8b4cff/html5/thumbnails/7.jpg)
2011年 微博
![Page 8: 体验的历程 Afooli](https://reader030.vdocuments.pub/reader030/viewer/2022012305/5484d6fdb47959050d8b4cff/html5/thumbnails/8.jpg)
2011年 移动互联网
![Page 9: 体验的历程 Afooli](https://reader030.vdocuments.pub/reader030/viewer/2022012305/5484d6fdb47959050d8b4cff/html5/thumbnails/9.jpg)
问题?
什么是用户体验?
如何做到好的体验?案例?
![Page 10: 体验的历程 Afooli](https://reader030.vdocuments.pub/reader030/viewer/2022012305/5484d6fdb47959050d8b4cff/html5/thumbnails/10.jpg)
用户
环境
分析
洞察
概念
图形化
原型
测试
现实
抽象
了解 行动
By guoyu: http://hi.bidu.com/madesign
设计的思路
![Page 11: 体验的历程 Afooli](https://reader030.vdocuments.pub/reader030/viewer/2022012305/5484d6fdb47959050d8b4cff/html5/thumbnails/11.jpg)
视觉的故事~
![Page 12: 体验的历程 Afooli](https://reader030.vdocuments.pub/reader030/viewer/2022012305/5484d6fdb47959050d8b4cff/html5/thumbnails/12.jpg)
主色 功能色
辅助色
辅助色
文字色
提 示 色 系
成功提示
功能、操作及帮助提示
一级警示色、激活色
二级警示色
主 色 系
视觉引导系统
![Page 13: 体验的历程 Afooli](https://reader030.vdocuments.pub/reader030/viewer/2022012305/5484d6fdb47959050d8b4cff/html5/thumbnails/13.jpg)
图标指示
![Page 14: 体验的历程 Afooli](https://reader030.vdocuments.pub/reader030/viewer/2022012305/5484d6fdb47959050d8b4cff/html5/thumbnails/14.jpg)
产品体系化设计
一致 精致 和谐 商务 清晰 清新
![Page 15: 体验的历程 Afooli](https://reader030.vdocuments.pub/reader030/viewer/2022012305/5484d6fdb47959050d8b4cff/html5/thumbnails/15.jpg)
产品体系化设计
![Page 16: 体验的历程 Afooli](https://reader030.vdocuments.pub/reader030/viewer/2022012305/5484d6fdb47959050d8b4cff/html5/thumbnails/16.jpg)
动画
![Page 17: 体验的历程 Afooli](https://reader030.vdocuments.pub/reader030/viewer/2022012305/5484d6fdb47959050d8b4cff/html5/thumbnails/17.jpg)
原型 流程图 设计规范
交互的故事~
![Page 18: 体验的历程 Afooli](https://reader030.vdocuments.pub/reader030/viewer/2022012305/5484d6fdb47959050d8b4cff/html5/thumbnails/18.jpg)
用户研究的故事~
![Page 19: 体验的历程 Afooli](https://reader030.vdocuments.pub/reader030/viewer/2022012305/5484d6fdb47959050d8b4cff/html5/thumbnails/19.jpg)
![Page 20: 体验的历程 Afooli](https://reader030.vdocuments.pub/reader030/viewer/2022012305/5484d6fdb47959050d8b4cff/html5/thumbnails/20.jpg)
VS
![Page 21: 体验的历程 Afooli](https://reader030.vdocuments.pub/reader030/viewer/2022012305/5484d6fdb47959050d8b4cff/html5/thumbnails/21.jpg)
角色定义与需求挖掘
![Page 22: 体验的历程 Afooli](https://reader030.vdocuments.pub/reader030/viewer/2022012305/5484d6fdb47959050d8b4cff/html5/thumbnails/22.jpg)
例行用户调研 围绕搜索、网盟主要产品,开展用户研究
促进设计师对产品的理解、了解用户角色和日常行为 建立客户资料库,分析高低端客户,提炼经验,优化产品设计
行为日志与数据挖掘
45” 1” 1”
打酱油路过?! 认知有困难?
![Page 23: 体验的历程 Afooli](https://reader030.vdocuments.pub/reader030/viewer/2022012305/5484d6fdb47959050d8b4cff/html5/thumbnails/23.jpg)
例行用户调研 围绕搜索、网盟主要产品,开展用户研究
促进设计师对产品的理解、了解用户角色和日常行为 建立客户资料库,分析高低端客户,提炼经验,优化产品设计
定性
定量
行为 目标&态度
焦点小组 卡片分类
参与式设计
实地研究
可用性测试
眼动实验
问卷调查 网站流量及日志分析
A/B测试
用户访谈
自动化可用性测试
文化探针 用户访谈+行为数据
![Page 24: 体验的历程 Afooli](https://reader030.vdocuments.pub/reader030/viewer/2022012305/5484d6fdb47959050d8b4cff/html5/thumbnails/24.jpg)
广告的故事~
![Page 25: 体验的历程 Afooli](https://reader030.vdocuments.pub/reader030/viewer/2022012305/5484d6fdb47959050d8b4cff/html5/thumbnails/25.jpg)
1 2
3 4
哪个好?
![Page 26: 体验的历程 Afooli](https://reader030.vdocuments.pub/reader030/viewer/2022012305/5484d6fdb47959050d8b4cff/html5/thumbnails/26.jpg)
2
1
哪个好?
![Page 27: 体验的历程 Afooli](https://reader030.vdocuments.pub/reader030/viewer/2022012305/5484d6fdb47959050d8b4cff/html5/thumbnails/27.jpg)
![Page 28: 体验的历程 Afooli](https://reader030.vdocuments.pub/reader030/viewer/2022012305/5484d6fdb47959050d8b4cff/html5/thumbnails/28.jpg)
消费行为分析
图片来自全景: quanjing.com
![Page 29: 体验的历程 Afooli](https://reader030.vdocuments.pub/reader030/viewer/2022012305/5484d6fdb47959050d8b4cff/html5/thumbnails/29.jpg)
转化是一个过程,不仅仅是广告
图片来自全景: quanjing.com
![Page 30: 体验的历程 Afooli](https://reader030.vdocuments.pub/reader030/viewer/2022012305/5484d6fdb47959050d8b4cff/html5/thumbnails/30.jpg)
文字的故事~
![Page 31: 体验的历程 Afooli](https://reader030.vdocuments.pub/reader030/viewer/2022012305/5484d6fdb47959050d8b4cff/html5/thumbnails/31.jpg)
当年注册一个EBAY的帐户,第三步:
“你只要在你的邮件确认一下你就成功了”
“快要成功了” 提升了10%以上的注册率。
![Page 32: 体验的历程 Afooli](https://reader030.vdocuments.pub/reader030/viewer/2022012305/5484d6fdb47959050d8b4cff/html5/thumbnails/32.jpg)
把百度设为首页 or 设百度为首页
![Page 33: 体验的历程 Afooli](https://reader030.vdocuments.pub/reader030/viewer/2022012305/5484d6fdb47959050d8b4cff/html5/thumbnails/33.jpg)
A
B
左侧首屏 or 左侧前三
![Page 34: 体验的历程 Afooli](https://reader030.vdocuments.pub/reader030/viewer/2022012305/5484d6fdb47959050d8b4cff/html5/thumbnails/34.jpg)
信息修改后,点击“提交”,系统会自动提交修改申请, 再审核通过后(会有邮件通知),信息即会更改…
![Page 35: 体验的历程 Afooli](https://reader030.vdocuments.pub/reader030/viewer/2022012305/5484d6fdb47959050d8b4cff/html5/thumbnails/35.jpg)
设计是为了让信息更好的传递
图片来自全景: quanjing.com
![Page 36: 体验的历程 Afooli](https://reader030.vdocuments.pub/reader030/viewer/2022012305/5484d6fdb47959050d8b4cff/html5/thumbnails/36.jpg)
关亍体验设计的体会
![Page 37: 体验的历程 Afooli](https://reader030.vdocuments.pub/reader030/viewer/2022012305/5484d6fdb47959050d8b4cff/html5/thumbnails/37.jpg)
T字型人才
![Page 38: 体验的历程 Afooli](https://reader030.vdocuments.pub/reader030/viewer/2022012305/5484d6fdb47959050d8b4cff/html5/thumbnails/38.jpg)
一致性原则 模块原则 8/2原则 能辨度原则 信-噪比原则 渐次呈现原则 形式追随功能 包容原则 图标 图片优势效应 邻近原则 对齐 反馈 色彩
掌握原则与规范
![Page 39: 体验的历程 Afooli](https://reader030.vdocuments.pub/reader030/viewer/2022012305/5484d6fdb47959050d8b4cff/html5/thumbnails/39.jpg)
能辨度原则:对比度
![Page 40: 体验的历程 Afooli](https://reader030.vdocuments.pub/reader030/viewer/2022012305/5484d6fdb47959050d8b4cff/html5/thumbnails/40.jpg)
善用集体的智慧
![Page 41: 体验的历程 Afooli](https://reader030.vdocuments.pub/reader030/viewer/2022012305/5484d6fdb47959050d8b4cff/html5/thumbnails/41.jpg)
< End >