交互设计是一个创造性的工作，利用创新的方式漂亮地解决产品问题，是一个交互设计师价值的体现。当创新的交互设计被用户认可、被业界同行学习，更是一种巨大的职业满足感。这种创新不一定是惊天地泣鬼神的革命性设计，一个小小的交互组件的创新就可以让产品体验增色不少。今天就通过一些案例聊聊交互组件创新的四种常见方式，与大家共勉。

一、滚动条的创新【重构法】

    我们先来回想一下阅读PDF文档的两种滚动方式：1、手型工具拖动 2、滚动条。

    要翻看后面的信息，用手型工具向上拖动，用滚动条则是向下拖动，两种操作方式的原理是什么呢？

    把文档分成可视区域A和整体区域B。滚动条滑块对应的是文档的可视区域A。因此滚动条拖动的是可视区域A，而手型工具拖动的是整体区域B，两种操作方式拖动的主体不一样，所以方向恰好相反。

    滚动条可以理解为文档在垂直方向上的缩略图，滑块可以表示可视区域当前位置，可视区域占整体区域的比例。随着文档整体区域不断增高，可视区域所占的比例越小，因此滑块高度不断变小。统计过IE、FF、Office等常用软件，一般滑块高度到8px时就不再缩小。当滑块高度只剩8px时，滚动条的拖动体验就相当的差。

    Google wave对滚动条做了大胆的创新。

    1、 上下按钮与滑块连在一起（好处：从滑块到上下按钮的鼠标运动距离变短；问题：点击上下按钮，滑块无法跟随运动）

    2、 滚动条的滑块高度固定不变（好处：解决了滑块极小的问题；问题：无法表示可视区域的比例）

    这两处修改优化了传统滚动条的问题，却引发滚动条基本属性（“位置”与“比例”）问题。为解决引发的新问题，google wave的滚动条引入了两个新元素：

    1、 半透明灰色块 （点击上下按钮，滑块无法跟随运动，则半透明灰色块运动――解决位置问题）

    2、 终止条 （wave内容不断增多，终止条位置不断向下，用来表示内容整体高度――解决比例问题。可惜这个终止条视觉效果让人以为是可拖动的，容易引起疑惑。）

    Google Wave花了这么大心思创新滚动条，也面临着滚动条复杂化后引发的用户习惯问题。个人认为这个滚动条创新是因产品需要而做的，wave一个页面可能同时存在4个滚动条，当4个传统滚动条同时出现在一个页面上效果可想而知。Wave滚动条无论视觉还是交互上都是很“轻”的设计，与产品整体上还算贴切。

    ====================================================

    苹果对滚动条的改进则简单有效：加锚点。

    mac官网： 加锚点横向滚动条，点击锚点，滑块滚动到相应位置

    iphone音乐专辑列表：加锚点的滚动条，轻触字母，列表滚动到相应位置

    加锚点的方式让滚动条增加了导航和准确定位功能，变得更加易用。

    不一样的交互组件（中）

    不一样的交互组件（下）

建议继续学习：

1. Mac下使用SecureCRT的一些记录    (阅读：6709)
2. 手机产品设计方向    (阅读：6444)
3. 也说 Mac 的不好    (阅读：6428)
4. mac系统更换硬盘及初始化开发环境的记录    (阅读：5559)
5. iPhone下的libcurl with SSL for iOS    (阅读：5085)
6. 在Mac OS X中运行Apache ＋ PHP ＋ MySQL    (阅读：4419)
7. Macbook Air换电池教程    (阅读：4280)
8. Mac 锁屏的各种方法    (阅读：3902)
9. php获取网卡MAC地址类    (阅读：3658)
10. IPhone上的邮件推送    (阅读：3295)