不一樣的交互組件(中) - 網頁設計 |
http://webdesign.zoapcon.com
|
|
二、組合搜索框的創新 【組合法】
常見的帶條件搜索框是“輸入框+下拉菜單+按鈕”三個控件組成的,合適的控件組合可以帶來更好的效果。 1、【輸入框+下拉菜單】組合
新浪微博的搜索框,將下拉選項融合到輸入框提示里,選擇搜索范圍的操作更加便利。
Google reader這樣的帶輸入操作的下拉菜單,讓下拉菜單更加易用。(這種控件組合在word、photoshop等軟件里很常見,如字體選擇控件) 2、【按鈕+下拉菜單】組合
豆瓣與Flickr的搜索按鈕后面加了一個下拉箭頭,按鈕與下拉選擇操作合二為一 (flickr這個設計與它網站主導航條體驗一致,豆瓣用這種設計在其整站看來則略顯突兀) 三、文件上傳組件的創新 【瘦身法】
標準的文件上傳組件是由“輸入框(偽)+瀏覽按鈕+提交按鈕”組成。之說以稱之為“偽輸入框”是因為它主要承擔顯示文件路徑的作用,于是Firefox下點擊這個輸入框是開始文件選擇操作,chrome更是把偽輸入框改造成了按鈕,還原控件最原始的作用。
使用標準文件上傳組件經常會出現兩個提交按鈕,以上圖為例,最經常的誤操作就是:選完文件后,直接點擊“保存頭像設置”,于是杯具了。 Gmail附件上傳的設計對文件上傳組件做了兩次瘦身手術。
過去的gmail附件上傳步驟是:1、點擊“添加附件”(點擊后出現一個不帶提交按鈕的上傳組件),2、選擇文件(選完后自動開始上傳)。去掉了那個提交按鈕。
現在的gmail附件上傳步驟是:1、點擊“添加附件”(點擊后自動開始上傳,且有上傳進度條)。去掉了輸入框和提交按鈕,只剩下一個瀏覽按鈕,上傳只需要一次點擊操作。 不一樣的交互組件(上) 不一樣的交互組件(下)
TAG: 網頁設計 | web design |
|
- Nov 26 Sat 2011 15:03
不一樣的交互組件(中)_網頁設計
文章標籤
全站熱搜
留言列表
發表留言