交互設(shè)計(jì)是一個(gè)創(chuàng)造性的工作，利用創(chuàng)新的方式漂亮地解決產(chǎn)品問題，是一個(gè)交互設(shè)計(jì)師價(jià)值的體現(xiàn)。當(dāng)創(chuàng)新的交互設(shè)計(jì)被用戶認(rèn)可、被業(yè)界同行學(xué)習(xí)，更是一種巨大的職業(yè)滿足感。這種創(chuàng)新不一定是驚天地泣鬼神的革命性設(shè)計(jì)，一個(gè)小小的交互組件的創(chuàng)新就可以讓產(chǎn)品體驗(yàn)增色不少。今天就通過一些案例聊聊交互組件創(chuàng)新的四種常見方式，與大家共勉。

一、滾動(dòng)條的創(chuàng)新【重構(gòu)法】

我們先來回想一下閱讀PDF文檔的兩種滾動(dòng)方式：1、手型工具拖動(dòng) 2、滾動(dòng)條。

要翻看后面的信息，用手型工具向上拖動(dòng)，用滾動(dòng)條則是向下拖動(dòng)，兩種操作方式的原理是什么呢？

把文檔分成可視區(qū)域A和整體區(qū)域B。滾動(dòng)條滑塊對(duì)應(yīng)的是文檔的可視區(qū)域A。因此滾動(dòng)條拖動(dòng)的是可視區(qū)域A，而手型工具拖動(dòng)的是整體區(qū)域B，兩種操作方式拖動(dòng)的主體不一樣，所以方向恰好相反。

滾動(dòng)條可以理解為文檔在垂直方向上的縮略圖，滑塊可以表示可視區(qū)域當(dāng)前位置，可視區(qū)域占整體區(qū)域的比例。隨著文檔整體區(qū)域不斷增高，可視區(qū)域所占的比例越小，因此滑塊高度不斷變小。統(tǒng)計(jì)過IE、FF、Office等常用軟件，一般滑塊高度到8px時(shí)就不再縮小。當(dāng)滑塊高度只剩8px時(shí)，滾動(dòng)條的拖動(dòng)體驗(yàn)就相當(dāng)?shù)牟睢?/P>

Google wave對(duì)滾動(dòng)條做了大膽的創(chuàng)新。

1、  上下按鈕與滑塊連在一起（好處：從滑塊到上下按鈕的鼠標(biāo)運(yùn)動(dòng)距離變短；問題：點(diǎn)擊上下按鈕，滑塊無法跟隨運(yùn)動(dòng)）

2、  滾動(dòng)條的滑塊高度固定不變（好處：解決了滑塊極小的問題；問題：無法表示可視區(qū)域的比例）

這兩處修改優(yōu)化了傳統(tǒng)滾動(dòng)條的問題，卻引發(fā)滾動(dòng)條基本屬性（“位置”與“比例”）問題。為解決引發(fā)的新問題，google wave的滾動(dòng)條引入了兩個(gè)新元素：

1、  半透明灰色塊 （點(diǎn)擊上下按鈕，滑塊無法跟隨運(yùn)動(dòng)，則半透明灰色塊運(yùn)動(dòng)——解決位置問題）

2、  終止條 （wave內(nèi)容不斷增多，終止條位置不斷向下，用來表示內(nèi)容整體高度——解決比例問題。可惜這個(gè)終止條視覺效果讓人以為是可拖動(dòng)的，容易引起疑惑。）

Google Wave花了這么大心思創(chuàng)新滾動(dòng)條，也面臨著滾動(dòng)條復(fù)雜化后引發(fā)的用戶習(xí)慣問題。個(gè)人認(rèn)為這個(gè)滾動(dòng)條創(chuàng)新是因產(chǎn)品需要而做的，wave一個(gè)頁面可能同時(shí)存在4個(gè)滾動(dòng)條，當(dāng)4個(gè)傳統(tǒng)滾動(dòng)條同時(shí)出現(xiàn)在一個(gè)頁面上效果可想而知。Wave滾動(dòng)條無論視覺還是交互上都是很“輕”的設(shè)計(jì)，與產(chǎn)品整體上還算貼切。

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

蘋果對(duì)滾動(dòng)條的改進(jìn)則簡(jiǎn)單有效：加錨點(diǎn)。

mac官網(wǎng)： 加錨點(diǎn)橫向滾動(dòng)條，點(diǎn)擊錨點(diǎn)，滑塊滾動(dòng)到相應(yīng)位置

iphone音樂專輯列表：加錨點(diǎn)的滾動(dòng)條，輕觸字母，列表滾動(dòng)到相應(yīng)位置

加錨點(diǎn)的方式讓滾動(dòng)條增加了導(dǎo)航和準(zhǔn)確定位功能，變得更加易用。

不一樣的交互組件（中）

不一樣的交互組件（下）

原文：http://ued.taobao.com/blog/2010/02/05/interactive-controls-innovation1/