SlideShare a Scribd company logo
乐乘 (yuecheng)
为什么聊这个话题? 上层:创新 交互设计 底层:交互组件
主要内容 ·交互组件创新案例 ·总结方式和方法 ·交互创新的阻力 ·交互创新的境界
案例一 > 案例二 > 案例三 > 案例四 > 总结 > 创新的阻力 > 创新的境界 1. 滚动条的创新
案例一 > 案例二 > 案例三 > 案例四 > 总结 > 创新的阻力 > 创新的境界 手型拖动 vs 滚动条
案例一 > 案例二 > 案例三 > 案例四 > 总结 > 创新的阻力 > 创新的境界 标准滚动条 ·标准滚动条:滑块+上下按钮 ·滑块=可视区域 ·手型工具:拖动内容 ·内容区域越高,滑块越小 当滑块只剩8px时…
案例一 > 案例二 > 案例三 > 案例四 > 总结 > 创新的阻力 > 创新的境界 案例:滚动条的创新 1、滚动条+锚点 iphone OS http://www.apple.com/mac/
案例一 > 案例二 > 案例三 > 案例四 > 总结 > 创新的阻力 > 创新的境界 案例:滚动条的创新 2、滚动条变形    google wave
案例一 >案例二 > 案例三 > 案例四 > 总结 > 创新的阻力 > 创新的境界 2. 组合搜索框的创新
案例一 >案例二 > 案例三 > 案例四 > 总结 > 创新的阻力 > 创新的境界 案例:组合搜索框的创新 ·标准组合搜索框:输入框+下拉菜单+按钮
案例一 >案例二 > 案例三 > 案例四 > 总结 > 创新的阻力 > 创新的境界 案例:组合搜索框的创新 1、【输入框+下拉菜单】组合
案例一 >案例二 > 案例三 > 案例四 > 总结 > 创新的阻力 > 创新的境界 案例:组合搜索框的创新 2、【下拉菜单+按钮】组合
案例一 > 案例二 >案例三 > 案例四 > 总结 > 创新的阻力 > 创新的境界 3. 文件上传组件的创新
案例一 > 案例二 >案例三 > 案例四 > 总结 > 创新的阻力 > 创新的境界 案例:文件上传组件的创新 ·标准上传组件:输入框(伪)+浏览按钮+提交按钮 ·Firefox下的输入框: ·Chrome下的输入框:
案例一 > 案例二 >案例三 > 案例四 > 总结 > 创新的阻力 > 创新的境界 当出现两个“提交”按钮时,杯具在所难免…
案例一 > 案例二 >案例三 > 案例四 > 总结 > 创新的阻力 > 创新的境界 案例:文件上传组件的创新 gmail附件上传(过去)
案例一 > 案例二 >案例三 > 案例四 > 总结 > 创新的阻力 > 创新的境界 案例:文件上传组件的创新 gmail附件上传(现在)
案例一 > 案例二 > 案例三 >案例四 > 总结 > 创新的阻力 > 创新的境界 4. 翻页组件的创新
案例一 > 案例二 > 案例三 >案例四 > 总结 > 创新的阻力 > 创新的境界 案例:翻页组件的创新 ·标准翻页:上一页+页码+下一页+跳转 ·传统翻页方式:信息分段
案例一 > 案例二 > 案例三 >案例四 > 总结 > 创新的阻力 > 创新的境界 案例:翻页组件的创新 1、无尽滚动条翻页 Bing图片搜索      Google reader      看图购
案例一 > 案例二 > 案例三 >案例四 > 总结 > 创新的阻力 > 创新的境界 案例:翻页组件的创新 2、递进式翻页 Twitter Iphone app store
案例一 > 案例二 > 案例三 >案例四 > 总结 > 创新的阻力 > 创新的境界 案例:翻页组件的创新 3、翻页辅助 Google book search
案例一 > 案例二 > 案例三 >案例四 > 总结 > 创新的阻力 > 创新的境界 两种翻页模型 信息分段 信息滚动
案例一 > 案例二 > 案例三 > 案例四 > 总结 > 创新的阻力 > 创新的境界 回顾一下组件创新的几种方式 1、重构 2、组合 3、减法 4、忘掉组件
案例一 > 案例二 > 案例三 > 案例四 > 总结 > 创新的阻力 > 创新的境界 交互组件创新的阻力 1、用户学习成本      标准交互组件也有学习成本        radio button 与 checkbox
案例一 > 案例二 > 案例三 > 案例四 > 总结 > 创新的阻力 > 创新的境界 交互组件创新的阻力 2、挑战用户习惯      体验的频率 (注册页与登录页) 产品成熟度
案例一 > 案例二 > 案例三 > 案例四 > 总结 > 创新的阻力 > 创新的境界 交互创新的境界 1、可被理解的创新
案例一 > 案例二 > 案例三 > 案例四 > 总结 > 创新的阻力 > 创新的境界 交互创新的境界 2、潜移默化的创新(chrome浏览器地址栏) 地址栏+google搜索框+收藏夹+历史记录
案例一 > 案例二 > 案例三 > 案例四 > 总结 > 创新的阻力 > 创新的境界 交互创新的境界 3、成为标准的创新(输入框提示)
不一样的交互组件 乐乘

More Related Content

Viewers also liked

Another World
Another WorldAnother World
Another World
Héctor Rguez.
 
Lucene2 4 Demo
Lucene2 4 DemoLucene2 4 Demo
Lucene2 4 Demoyiditushe
 
Making%20R%20Packages%20Under%20Windows
Making%20R%20Packages%20Under%20WindowsMaking%20R%20Packages%20Under%20Windows
Making%20R%20Packages%20Under%20Windows
tutorialsruby
 
Jackie Ramstedt Webinar - Top Resident Retention Strategies To Get Customers ...
Jackie Ramstedt Webinar - Top Resident Retention Strategies To Get Customers ...Jackie Ramstedt Webinar - Top Resident Retention Strategies To Get Customers ...
Jackie Ramstedt Webinar - Top Resident Retention Strategies To Get Customers ...
Multifamily Insiders
 
Salesforce_Certified_Administrator
Salesforce_Certified_AdministratorSalesforce_Certified_Administrator
Salesforce_Certified_Administrator
Jackie Stuart ☁
 
Cloud-based IT Services - The Future
Cloud-based IT Services - The FutureCloud-based IT Services - The Future
Cloud-based IT Services - The Future
InTechnology Managed Services (part of Redcentric)
 
E-Coo Presentatie Feb 2010
E-Coo Presentatie Feb 2010E-Coo Presentatie Feb 2010
E-Coo Presentatie Feb 2010
jaccov
 
Saying of Prophet
Saying of ProphetSaying of Prophet
Saying of Prophet
rabubakar
 
Java安全性编程实例
Java安全性编程实例Java安全性编程实例
Java安全性编程实例yiditushe
 
New Study Of Gita Nov 11 Dr Shriniwas J Kashalikar
New Study Of Gita Nov 11 Dr  Shriniwas J  KashalikarNew Study Of Gita Nov 11 Dr  Shriniwas J  Kashalikar
New Study Of Gita Nov 11 Dr Shriniwas J Kashalikar
banothkishan
 

Viewers also liked (11)

Another World
Another WorldAnother World
Another World
 
Lucene2 4 Demo
Lucene2 4 DemoLucene2 4 Demo
Lucene2 4 Demo
 
Making%20R%20Packages%20Under%20Windows
Making%20R%20Packages%20Under%20WindowsMaking%20R%20Packages%20Under%20Windows
Making%20R%20Packages%20Under%20Windows
 
Jackie Ramstedt Webinar - Top Resident Retention Strategies To Get Customers ...
Jackie Ramstedt Webinar - Top Resident Retention Strategies To Get Customers ...Jackie Ramstedt Webinar - Top Resident Retention Strategies To Get Customers ...
Jackie Ramstedt Webinar - Top Resident Retention Strategies To Get Customers ...
 
Salesforce_Certified_Administrator
Salesforce_Certified_AdministratorSalesforce_Certified_Administrator
Salesforce_Certified_Administrator
 
Cloud-based IT Services - The Future
Cloud-based IT Services - The FutureCloud-based IT Services - The Future
Cloud-based IT Services - The Future
 
E-Coo Presentatie Feb 2010
E-Coo Presentatie Feb 2010E-Coo Presentatie Feb 2010
E-Coo Presentatie Feb 2010
 
Saying of Prophet
Saying of ProphetSaying of Prophet
Saying of Prophet
 
Java安全性编程实例
Java安全性编程实例Java安全性编程实例
Java安全性编程实例
 
New Study Of Gita Nov 11 Dr Shriniwas J Kashalikar
New Study Of Gita Nov 11 Dr  Shriniwas J  KashalikarNew Study Of Gita Nov 11 Dr  Shriniwas J  Kashalikar
New Study Of Gita Nov 11 Dr Shriniwas J Kashalikar
 
Project
ProjectProject
Project
 

More from 碳酸饮料会

I os 视觉分享
I os 视觉分享I os 视觉分享
I os 视觉分享
碳酸饮料会
 
Png还是jpg,这是个问题
Png还是jpg,这是个问题Png还是jpg,这是个问题
Png还是jpg,这是个问题
碳酸饮料会
 
错位的体验
错位的体验错位的体验
错位的体验
碳酸饮料会
 
设计中的一致性——界面篇
设计中的一致性——界面篇设计中的一致性——界面篇
设计中的一致性——界面篇
碳酸饮料会
 
Accessibility jane zhou
Accessibility jane zhouAccessibility jane zhou
Accessibility jane zhou
碳酸饮料会
 
世界杯推广设计分享会
世界杯推广设计分享会世界杯推广设计分享会
世界杯推广设计分享会碳酸饮料会
 
超级旺铺产品体验设计
超级旺铺产品体验设计超级旺铺产品体验设计
超级旺铺产品体验设计碳酸饮料会
 
适时帮助Ppt
适时帮助Ppt适时帮助Ppt
适时帮助Ppt
碳酸饮料会
 
用户体验量化方法研究 碳酸分享
用户体验量化方法研究 碳酸分享用户体验量化方法研究 碳酸分享
用户体验量化方法研究 碳酸分享
碳酸饮料会
 
基于生活形态的用户分群研究
基于生活形态的用户分群研究基于生活形态的用户分群研究
基于生活形态的用户分群研究
碳酸饮料会
 
Information visualization
Information visualizationInformation visualization
Information visualization
碳酸饮料会
 
商家管理平台后台 后台菜单纸原型测试
商家管理平台后台 后台菜单纸原型测试商家管理平台后台 后台菜单纸原型测试
商家管理平台后台 后台菜单纸原型测试
碳酸饮料会
 
卖家后台菜单项分类调研报告
卖家后台菜单项分类调研报告卖家后台菜单项分类调研报告
卖家后台菜单项分类调研报告
碳酸饮料会
 
0414 旧城改造 我是卖家改版心得
0414 旧城改造 我是卖家改版心得0414 旧城改造 我是卖家改版心得
0414 旧城改造 我是卖家改版心得
碳酸饮料会
 
简洁清晰,自然易懂
简洁清晰,自然易懂简洁清晰,自然易懂
简洁清晰,自然易懂
碳酸饮料会
 
如何架构和管理个人的知识体系
如何架构和管理个人的知识体系如何架构和管理个人的知识体系
如何架构和管理个人的知识体系
碳酸饮料会
 

More from 碳酸饮料会 (20)

2011亚美利加
2011亚美利加2011亚美利加
2011亚美利加
 
2011亚美利加
2011亚美利加2011亚美利加
2011亚美利加
 
I os 视觉分享
I os 视觉分享I os 视觉分享
I os 视觉分享
 
Png还是jpg,这是个问题
Png还是jpg,这是个问题Png还是jpg,这是个问题
Png还是jpg,这是个问题
 
错位的体验
错位的体验错位的体验
错位的体验
 
设计中的一致性——界面篇
设计中的一致性——界面篇设计中的一致性——界面篇
设计中的一致性——界面篇
 
Accessibility jane zhou
Accessibility jane zhouAccessibility jane zhou
Accessibility jane zhou
 
知识管理交流
知识管理交流知识管理交流
知识管理交流
 
插画设计分享
插画设计分享插画设计分享
插画设计分享
 
世界杯推广设计分享会
世界杯推广设计分享会世界杯推广设计分享会
世界杯推广设计分享会
 
超级旺铺产品体验设计
超级旺铺产品体验设计超级旺铺产品体验设计
超级旺铺产品体验设计
 
适时帮助Ppt
适时帮助Ppt适时帮助Ppt
适时帮助Ppt
 
用户体验量化方法研究 碳酸分享
用户体验量化方法研究 碳酸分享用户体验量化方法研究 碳酸分享
用户体验量化方法研究 碳酸分享
 
基于生活形态的用户分群研究
基于生活形态的用户分群研究基于生活形态的用户分群研究
基于生活形态的用户分群研究
 
Information visualization
Information visualizationInformation visualization
Information visualization
 
商家管理平台后台 后台菜单纸原型测试
商家管理平台后台 后台菜单纸原型测试商家管理平台后台 后台菜单纸原型测试
商家管理平台后台 后台菜单纸原型测试
 
卖家后台菜单项分类调研报告
卖家后台菜单项分类调研报告卖家后台菜单项分类调研报告
卖家后台菜单项分类调研报告
 
0414 旧城改造 我是卖家改版心得
0414 旧城改造 我是卖家改版心得0414 旧城改造 我是卖家改版心得
0414 旧城改造 我是卖家改版心得
 
简洁清晰,自然易懂
简洁清晰,自然易懂简洁清晰,自然易懂
简洁清晰,自然易懂
 
如何架构和管理个人的知识体系
如何架构和管理个人的知识体系如何架构和管理个人的知识体系
如何架构和管理个人的知识体系
 

不一样的交互组件 乐乘

  • 3. 主要内容 ·交互组件创新案例 ·总结方式和方法 ·交互创新的阻力 ·交互创新的境界
  • 4. 案例一 > 案例二 > 案例三 > 案例四 > 总结 > 创新的阻力 > 创新的境界 1. 滚动条的创新
  • 5. 案例一 > 案例二 > 案例三 > 案例四 > 总结 > 创新的阻力 > 创新的境界 手型拖动 vs 滚动条
  • 6. 案例一 > 案例二 > 案例三 > 案例四 > 总结 > 创新的阻力 > 创新的境界 标准滚动条 ·标准滚动条:滑块+上下按钮 ·滑块=可视区域 ·手型工具:拖动内容 ·内容区域越高,滑块越小 当滑块只剩8px时…
  • 7. 案例一 > 案例二 > 案例三 > 案例四 > 总结 > 创新的阻力 > 创新的境界 案例:滚动条的创新 1、滚动条+锚点 iphone OS http://www.apple.com/mac/
  • 8. 案例一 > 案例二 > 案例三 > 案例四 > 总结 > 创新的阻力 > 创新的境界 案例:滚动条的创新 2、滚动条变形 google wave
  • 9. 案例一 >案例二 > 案例三 > 案例四 > 总结 > 创新的阻力 > 创新的境界 2. 组合搜索框的创新
  • 10. 案例一 >案例二 > 案例三 > 案例四 > 总结 > 创新的阻力 > 创新的境界 案例:组合搜索框的创新 ·标准组合搜索框:输入框+下拉菜单+按钮
  • 11. 案例一 >案例二 > 案例三 > 案例四 > 总结 > 创新的阻力 > 创新的境界 案例:组合搜索框的创新 1、【输入框+下拉菜单】组合
  • 12. 案例一 >案例二 > 案例三 > 案例四 > 总结 > 创新的阻力 > 创新的境界 案例:组合搜索框的创新 2、【下拉菜单+按钮】组合
  • 13. 案例一 > 案例二 >案例三 > 案例四 > 总结 > 创新的阻力 > 创新的境界 3. 文件上传组件的创新
  • 14. 案例一 > 案例二 >案例三 > 案例四 > 总结 > 创新的阻力 > 创新的境界 案例:文件上传组件的创新 ·标准上传组件:输入框(伪)+浏览按钮+提交按钮 ·Firefox下的输入框: ·Chrome下的输入框:
  • 15. 案例一 > 案例二 >案例三 > 案例四 > 总结 > 创新的阻力 > 创新的境界 当出现两个“提交”按钮时,杯具在所难免…
  • 16. 案例一 > 案例二 >案例三 > 案例四 > 总结 > 创新的阻力 > 创新的境界 案例:文件上传组件的创新 gmail附件上传(过去)
  • 17. 案例一 > 案例二 >案例三 > 案例四 > 总结 > 创新的阻力 > 创新的境界 案例:文件上传组件的创新 gmail附件上传(现在)
  • 18. 案例一 > 案例二 > 案例三 >案例四 > 总结 > 创新的阻力 > 创新的境界 4. 翻页组件的创新
  • 19. 案例一 > 案例二 > 案例三 >案例四 > 总结 > 创新的阻力 > 创新的境界 案例:翻页组件的创新 ·标准翻页:上一页+页码+下一页+跳转 ·传统翻页方式:信息分段
  • 20. 案例一 > 案例二 > 案例三 >案例四 > 总结 > 创新的阻力 > 创新的境界 案例:翻页组件的创新 1、无尽滚动条翻页 Bing图片搜索 Google reader 看图购
  • 21. 案例一 > 案例二 > 案例三 >案例四 > 总结 > 创新的阻力 > 创新的境界 案例:翻页组件的创新 2、递进式翻页 Twitter Iphone app store
  • 22. 案例一 > 案例二 > 案例三 >案例四 > 总结 > 创新的阻力 > 创新的境界 案例:翻页组件的创新 3、翻页辅助 Google book search
  • 23. 案例一 > 案例二 > 案例三 >案例四 > 总结 > 创新的阻力 > 创新的境界 两种翻页模型 信息分段 信息滚动
  • 24. 案例一 > 案例二 > 案例三 > 案例四 > 总结 > 创新的阻力 > 创新的境界 回顾一下组件创新的几种方式 1、重构 2、组合 3、减法 4、忘掉组件
  • 25. 案例一 > 案例二 > 案例三 > 案例四 > 总结 > 创新的阻力 > 创新的境界 交互组件创新的阻力 1、用户学习成本 标准交互组件也有学习成本 radio button 与 checkbox
  • 26. 案例一 > 案例二 > 案例三 > 案例四 > 总结 > 创新的阻力 > 创新的境界 交互组件创新的阻力 2、挑战用户习惯 体验的频率 (注册页与登录页) 产品成熟度
  • 27. 案例一 > 案例二 > 案例三 > 案例四 > 总结 > 创新的阻力 > 创新的境界 交互创新的境界 1、可被理解的创新
  • 28. 案例一 > 案例二 > 案例三 > 案例四 > 总结 > 创新的阻力 > 创新的境界 交互创新的境界 2、潜移默化的创新(chrome浏览器地址栏) 地址栏+google搜索框+收藏夹+历史记录
  • 29. 案例一 > 案例二 > 案例三 > 案例四 > 总结 > 创新的阻力 > 创新的境界 交互创新的境界 3、成为标准的创新(输入框提示)