縱觀互動設計發展史，就是創新的互動模式被廣為接受後成為標準，舊的互動模式不斷被淘汰的歷史。所以互動模式發展也是一個「物競天擇，優勝劣汰」的過程。本文是09年在碳酸飲料會上做過的分享，當時創新的東西現在已經被廣泛應用了。因為主題跟現在UX平台鼓勵創新的目標一致，所以再貼一次:)
互動設計是一個創造性的工作，利用創新的方式漂亮地解決產品問題，是一個互動設計師價值的體現。當創新的互動設計被使用者認可、被業界同行學習，更是一種巨大的職業滿足感。這種創新不一定是驚天地泣鬼神的革命性設計，一個小小的互動組件的創新就可以讓產品體驗增色不少。今天就透過一些案例聊聊互動組件創新的四種常見方式，與大家共勉。
一、滾動條的創新【重建法】
我們先來回想一下閱讀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、【輸入框+下拉式選單】組合
新浪微博的搜尋框，將下拉選項融合到輸入框提示裡，選擇搜尋範圍的操作更加方便。
Google reader這樣的帶有輸入操作的下拉式選單，讓下拉式選單更加好用。 (這種控制組合在word、photoshop等軟體裡很常見，如字體選擇控制)
2、【按鈕+下拉式選單】組合
豆瓣與Flickr的搜尋按鈕後面加了一個下拉箭頭，按鈕與下拉選擇操作合二為一(flickr這個設計與它網站主導航條體驗一致，豆瓣用這種設計在其整站看來則略顯突兀)
三、文件上傳組件的創新【瘦身法】
標準的文件上傳元件是由「輸入框(偽)+瀏覽按鈕+提交按鈕」組成。之說以稱為「偽輸入框」是因為它主要承擔顯示檔案路徑的作用，於是Firefox下點擊這個輸入框是開始檔案選擇操作，chrome更是把偽輸入框改造成了按鈕，還原控制項最原始的作用。
使用標準文件上傳元件經常會出現兩個提交按鈕，以上圖為例，最經常的誤操作就是：選完文件後，直接點擊“儲存頭像設定”，於是杯具了。
Gmail附件上傳的設計對檔案上傳元件做了兩次瘦身手術。
過去的gmail附件上傳步驟是：1、點選「新增附件」(點選後出現一個不含提交按鈕的上傳元件)，2、選擇檔案(選完後自動開始上傳)。去掉了那個提交按鈕。
現在的gmail附件上傳步驟是：1、點選「新增附件」(點選後自動開始上傳，且有上傳進度條)。去掉了輸入框和提交按鈕，只剩下一個瀏覽按鈕，上傳只需要一次點擊操作。
四、翻頁的創新【替代法】
傳統的翻頁方式是“上一頁+頁碼+下一頁”，大家最熟悉的設計。
Bing圖片搜尋
Google reader
看圖購而近年興起的這種“無盡滾動翻頁”的翻頁方式，即滾動條拖動到最底部後開始加載後面的內容，而不再有“上一頁+頁碼+下一頁”這樣的連結。
相對而言twitter、Iphone app store這樣的「遞進式翻頁」則沒那麼激進，保留了一個翻頁按鈕，是介於傳統翻頁與無盡滾動翻頁的一種折中方式。
上圖是Google book search一個巧妙的翻頁設計，滑鼠懸停在文件底部一個局部區域(高度約50px)時，出現一個半透明的層，點擊這個層開始翻頁。這個巨大的輔助翻頁按鈕，大大提升了翻頁的便利性，且對介面影響很小。
這裡講到的翻頁組件創新，是用新的翻頁方式取代傳統翻頁組件。從資訊的架構來看，傳統翻頁是將訊息分段，而「無盡滾動翻頁」屬於資訊滾動。這兩種方式對應現實生活中的原型是：書籍和電影膠片，書籍把資訊拆分到每頁裡去翻動，電影膠片的信息則一幀幀的滾動而過。
從資訊流動速度和翻頁便利性來看，「資訊滾動」遠大於「資訊分段」。這兩種翻頁方式應該如何選擇?我想這應該取決於用戶對後面內容的需求強度，像google搜尋結果頁這種越往後資訊品質越低的場景，用戶對翻頁需求並不那麼強烈。 Google reader這樣不是依照資訊品質排序的場景，提供高速的翻頁方式是個相對必要的做法。需要注意的是，滾動翻頁不利於內容準確定位和資訊回溯。
資訊流動速度對資訊接受者心態有很大影響，流動速度越快資訊吸收量相對越小，所以閱讀pdf文檔比閱讀紙質書籍心情急躁，忍不住去翻頁，是在「掃描」而不是「閱讀」(個人主觀感受，如有雷同純屬必然)
由此也延伸出一點，互動設計師的工作職責除了架構訊息，還要控制訊息的流動速度和供給量。
總結
最後，以一張圖片總結互動組件創新的四種方式，一家之言希望對大家有所啟發。