不一样的交互组件乐乘

乐乘（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


两种翻页模型

信息分段信息滚动


回顾一下组件创新的几种方式


2、组合1、重构

3、减法 4、忘掉组件

交互组件创新的阻力

1、用户学习成本

标准交互组件也有学习成本

radio button 与 checkbox


交互组件创新的阻力

2、挑战用户习惯

体验的频率（注册页与登录页）

产品成熟度


交互创新的境界

1、可被理解的创新



2、潜移默化的创新（chrome浏览器地址栏）


地址栏+google搜索框+收藏夹+历史记录


3、成为标准的创新（输入框提示）


不一样的交互组件 乐乘

Design

不一样的交互组件乐乘