不同的交互組件

 

 

 

 

 

 

連接：http://ued.taobao.org/blog/2010/02/interactive-controls-innovation1/

交互設計是一個創造性的工做，利用創新的方式漂亮地解決產品問題，是一個交互設計師價值的體現。當創新的交互設計被用戶承認、被業界同行學習，更是一種巨大的職業知足感。這種創新不必定是驚天地泣鬼神的革命性設計，一個小小的交互組件的創新就可讓產品體驗增色很多。今天就經過一些案例聊聊交互組件創新的四種常見方式，與你們共勉。

1、滾動條的創新【重構法】

 

咱們先來回想一下閱讀PDF文檔的兩種滾動方式：一、手型工具拖動 二、滾動條。

要翻看後面的信息，用手型工具向上拖動，用滾動條則是向下拖動，兩種操做方式的原理是什麼呢？

把文檔分紅可視區域A和總體區域B。滾動條滑塊對應的是文檔的可視區域A。所以滾動條拖動的是可視區域A，而手型工具拖動的是總體區域B，兩種操做方式拖動的主體不同，因此方向剛好相反。

滾動條能夠理解爲文檔在垂直方向上的縮略圖，滑塊能夠表示可視區域當前位置，可視區域佔總體區域的比例。隨着文檔總體區域不斷增高，可視區域所佔的比例越小，所以滑塊高度不斷變小。統計過IE、FF、Office等經常使用軟件，通常滑塊高度到8px時就再也不縮小。當滑塊高度只剩8px時，滾動條的拖動體驗就至關的差。

Google wave對滾動條作了大膽的創新。

一、  上下按鈕與滑塊連在一塊兒（好處：從滑塊到上下按鈕的鼠標運動距離變短；問題：點擊上下按鈕，滑塊沒法跟隨運動）

二、  滾動條的滑塊高度固定不變（好處：解決了滑塊極小的問題；問題：沒法表示可視區域的比例）

這兩處修改優化了傳統滾動條的問題，卻引起滾動條基本屬性（「位置」與「比例」）問題。爲解決引起的新問題，google wave的滾動條引入了兩個新元素：

一、  半透明灰色塊 （點擊上下按鈕，滑塊沒法跟隨運動，則半透明灰色塊運動——解決位置問題）

二、  終止條 （wave內容不斷增多，終止條位置不斷向下，用來表示內容總體高度——解決比例問題。惋惜這個終止條視覺效果讓人覺得是可拖動的，容易引發疑惑。）

Google Wave花了這麼大心思創新滾動條，也面臨着滾動條複雜化後引起的用戶習慣問題。我的認爲這個滾動條創新是因產品須要而作的，wave一個頁面可能同時存在4個滾動條，當4個傳統滾動條同時出如今一個頁面上效果可想而知。Wave滾動條不管視覺仍是交互上都是很「輕」的設計，與產品總體上還算貼切。

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

蘋果對滾動條的改進則簡單有效：加錨點。

mac官網： 加錨點橫向滾動條，點擊錨點，滑塊滾動到相應位置

iphone音樂專輯列表：加錨點的滾動條，輕觸字母，列表滾動到相應位置

加錨點的方式讓滾動條增長了導航和準肯定位功能，變得更加易用。

 

連接：http://ued.taobao.org/blog/2010/02/interactive-controls-innovation2/

2、組合搜索框的創新 【組合法】

常見的帶條件搜索框是「輸入框+下拉菜單+按鈕」三個控件組成的，合適的控件組合能夠帶來更好的效果。

 

一、【輸入框+下拉菜單】組合

新浪微博的搜索框，將下拉選項融合到輸入框提示裏，選擇搜索範圍的操做更加便利。

Google reader這樣的帶輸入操做的下拉菜單，讓下拉菜單更加易用。（這種控件組合在word、photoshop等軟件裏很常見，如字體選擇控件）

二、【按鈕+下拉菜單】組合

豆瓣與Flickr的搜索按鈕後面加了一個下拉箭頭，按鈕與下拉選擇操做合二爲一 （flickr這個設計與它網站主導航條體驗一致，豆瓣用這種設計在其整站看來則略顯突兀）

3、文件上傳組件的創新 【瘦身法】

標準的文件上傳組件是由「輸入框（僞）+瀏覽按鈕+提交按鈕」組成。之說以稱之爲「僞輸入框」是由於它主要承擔顯示文件路徑的做用，因而Firefox下點擊這個輸入框是開始文件選擇操做，chrome更是把僞輸入框改形成了按鈕，還原控件最原始的做用。

使用標準文件上傳組件常常會出現兩個提交按鈕，以上圖爲例，最常常的誤操做就是：選完文件後，直接點擊「保存頭像設置」，因而杯具了。

Gmail附件上傳的設計對文件上傳組件作了兩次瘦身手術。

過去的gmail附件上傳步驟是：一、點擊「添加附件」（點擊後出現一個不帶提交按鈕的上傳組件），二、選擇文件（選完後自動開始上傳）。去掉了那個提交按鈕。

如今的gmail附件上傳步驟是：一、點擊「添加附件」（點擊後自動開始上傳，且有上傳進度條）。去掉了輸入框和提交按鈕，只剩下一個瀏覽按鈕，上傳只須要一次點擊操做。

不同的交互組件（上）

不同的交互組件（下）

 

連接:http://ued.taobao.org/blog/2010/02/interactive-controls-innovation3/

  

傳統的翻頁方式是「上一頁+頁碼+下一頁」，你們最熟悉的設計。

Bing圖片搜索

Google reader

看圖購

而近年興起的這種「無盡滾動翻頁」的翻頁方式，即滾動條拖動到最底部後開始加載後面的內容，而再也不有「上一頁+頁碼+下一頁」這樣的連接。

相對而言twitter、Iphone app store這樣的「遞進式翻頁」則沒那麼激進，保留了一個翻頁按鈕，是介於傳統翻頁與無盡滾動翻頁的一種折中方式。

上圖是Google book search一個巧妙的翻頁設計，鼠標懸停在文檔底部一個局部區域（高度約50px）時，出現一個半透明的層，點擊這個層開始翻頁。這個巨大的輔助翻頁按鈕，大大提高了翻頁的便利性，且對界面影響很小。

這裏講到的翻頁組件創新，是用新的翻頁方式替代傳統翻頁組件。從信息的結構來看，傳統翻頁是將信息分段，而「無盡滾動翻頁」屬於信息滾動。這兩種方式對應現實生活中的原型是：書籍和電影膠片，書籍把信息拆分到每頁裏去翻動，電影膠片的信息則一幀幀的滾動而過。

從信息流動速度和翻頁便利性來看，「信息滾動」遠遠大於「信息分段」。這兩種翻頁方式應該如何選擇？我想這應該取決於用戶對後面內容的需求強度，像google搜索結果頁這種越日後信息質量越低的場景，用戶對翻頁需求並不那麼強烈。Google reader這樣不是按信息質量排序的場景，提供高速的翻頁方式是個相對必要的作法。須要注意的是，滾動翻頁不利於內容準肯定位和信息回溯。

信息流動速度對信息接受者心態有很大影響，流動速度越快信息吸取量相對越小，因此閱讀pdf文檔比閱讀紙質書籍心情急躁，忍不住去翻頁，是在「掃描」而不是「閱讀」（我的主觀感覺，若有雷同純屬必然）

由此也延伸出一點，交互設計師的工做職責除了架構信息，還應該控制信息的流動速度和供給量。

總結

最後，以一張圖片總結交互組件創新的四種方式，一家之言但願對你們有所啓發。創新無定法，必然存在更多創新方式，歡迎交流補充: pigtwo#gmail.com