乐乘 (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、递进式翻页
Iphone app store
案例一 > 案例二 > 案例三 > 案例四 > 总结 > 创新的阻力 > 创新的境界
案例:翻页组件的创新
3、翻页辅助
Google book search
案例一 > 案例二 > 案例三 > 案例四 > 总结 > 创新的阻力 > 创新的境界
两种翻页模型
信息分段 信息滚动
案例一 > 案例二 > 案例三 > 案例四 > 总结 > 创新的阻力 > 创新的境界
回顾一下组件创新的几种方式
案例一 > 案例二 > 案例三 > 案例四 > 总结 > 创新的阻力 > 创新的境界
2、组合1、重构
3、减法 4、忘掉组件
交互组件创新的阻力
1、用户学习成本
标准交互组件也有学习成本
radio button 与 checkbox
案例一 > 案例二 > 案例三 > 案例四 > 总结 > 创新的阻力 > 创新的境界
交互组件创新的阻力
2、挑战用户习惯
体验的频率 (注册页与登录页)
产品成熟度
案例一 > 案例二 > 案例三 > 案例四 > 总结 > 创新的阻力 > 创新的境界
交互创新的境界
1、可被理解的创新
案例一 > 案例二 > 案例三 > 案例四 > 总结 > 创新的阻力 > 创新的境界
交互创新的境界
2、潜移默化的创新(chrome浏览器地址栏)
案例一 > 案例二 > 案例三 > 案例四 > 总结 > 创新的阻力 > 创新的境界
地址栏+google搜索框+收藏夹+历史记录
交互创新的境界
3、成为标准的创新(输入框提示)
案例一 > 案例二 > 案例三 > 案例四 > 总结 > 创新的阻力 > 创新的境界