不一樣的交互組件（中）

2010-02-06 16:02:00

二、組合搜索框的創(chuàng)新【組合法】

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

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

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

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

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

豆瓣與Flickr的搜索按鈕后面加了一個下拉箭頭，按鈕與下拉選擇操作合二為一（flickr這個設(shè)計與它網(wǎng)站主導(dǎo)航條體驗一致，豆瓣用這種設(shè)計在其整站看來則略顯突兀）

三、文件上傳組件的創(chuàng)新【瘦身法】

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

使用標準文件上傳組件經(jīng)常會出現(xiàn)兩個提交按鈕，以上圖為例，最經(jīng)常的誤操作就是：選完文件后，直接點擊“保存頭像設(shè)置”，于是杯具了。

Gmail附件上傳的設(shè)計對文件上傳組件做了兩次瘦身手術(shù)。

過去的gmail附件上傳步驟是：1、點擊“添加附件”（點擊后出現(xiàn)一個不帶提交按鈕的上傳組件），2、選擇文件（選完后自動開始上傳）。去掉了那個提交按鈕。

現(xiàn)在的gmail附件上傳步驟是：1、點擊“添加附件”（點擊后自動開始上傳，且有上傳進度條）。去掉了輸入框和提交按鈕，只剩下一個瀏覽按鈕，上傳只需要一次點擊操作。

不一樣的交互組件（上）

不一樣的交互組件（下）

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

上一篇：不一樣的交互組件（上）

下一篇：不一樣的交互組件（下）