Transcript
乐乘 （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、成为标准的创新（输入框提示）
案例一 > 案例二 > 案例三 > 案例四 > 总结 > 创新的阻力 > 创新的境界
top related