天天看點

互動設計細節——搜尋

一    推薦字 

關于推薦關鍵詞放置位置的問題:

  • 推薦字在框下::普遍認為放在下面好一些,從版面美觀度考慮,從給使用者的沖擊力和幹擾程度考慮;
  • 推 薦字在框上:有時搜尋框上面會放分類等tab,推薦關鍵字易被認為作分類;但具體放在上面給使用者帶來的幹擾程度,是 否會讓很多使用者很讨厭,筆者認為來搜尋的使用者普遍目的性較強,會下意識自動過濾掉自己不需要的内容,此時的使用者是很難被幹擾到的,可放心放到搜尋框之上; 但可能喜歡清爽一些或有潔癖的使用者比較希望什麼都不要放。
互動設計細節——搜尋

(圖為 迅雷看看官網,http://www.xunlei.com/)

互動設計細節——搜尋

(圖為 淘寶首頁搜尋,http://www.taobao.com/)

互動設計細節——搜尋

(圖為 國美網上商城,http://www.gome.com.cn/)

  • 推薦字放在搜尋框後:幹擾性最小,橫向空間擴充性差;
互動設計細節——搜尋

(圖為 中關村線上,http://www.zol.com.cn/)

  • 關于關鍵字個數:普遍認為不易過長,最好不長于輸入框的長度,個數在5——9個之間。

二    框内的文本

建議放一些有意義的文字,

  • 提示文本:比如直接告訴使用者可以輸入的内容來引導,語氣友好些,文本簡短明确些;否則使用者會以為你的搜尋框内可以随便搜東西,但實際是輸入某些内容是搜不出結果的,然後使用者會很懊惱,覺得你的搜尋做的不行;
互動設計細節——搜尋

(圖為 美麗說首頁,http://www.meilishuo.com/)

  • 推薦内容,留住浏覽型使用者;
互動設計細節——搜尋

(圖為 迅雷看看電影頻道,http://movie.xunlei.com/)

  • 單純放一些客套話如‘您需要找什麼?’能增加些許網站親切性,看多了就覺得‘虛僞’了。
互動設計細節——搜尋

(圖為 淘寶店鋪街,http://jie.taobao.com/)

三    聯想關鍵字

關于搜尋建議送出内容有兩種觀點,

  • 認為無論搜尋建議中是否已經高亮第一項,送出時都要預設送出輸入框裡的内容;
互動設計細節——搜尋
  • 認為如果高亮了搜尋建議第一項,可以預設送出高亮的内容,因為目前來說高亮内容最符合使用者輸入預期,否則,使用者會自行選擇其他項或繼續進行輸入,不會預設送出,是以既然使用者選擇預設送出了,說明認可了第一項高亮的内容;
互動設計細節——搜尋

(圖為 浏覽器,輸入框搜尋)

  • 輸 入法與聯想關鍵字——關系一:目前輸入法比較進階,在你輸入拼音的時候搜尋框内也會同時顯示你正在輸入的拼音,但是很多搜尋框也很進階,隻要有拼音輸入也 會自動給你顯示漢字的相關搜尋建議,如果此時使用者想要的東西在搜尋建議中出現了,他該怎麼辦呢?會産生困惑,也會很着急:一是,若不先送出輸入法中的内 容,如果直接單擊輸入法外的任何空間,搜尋框内是什麼内容都沒有輸入的,可是要送出搜尋框内容,要點選送出按鈕,送出按鈕卻是輸入法外的空間啊;
互動設計細節——搜尋
  • 輸入法與聯想關鍵字——關系二:假如搜尋建議第一項此時高亮了,如果按enterEnter鍵送出,是送出的輸入法内容進搜尋框呢or送出高亮的第一項,
  • 輸入法與聯想關鍵字——關系三:如果使用者滑鼠自行點選輸入框内的内容,輸入法内的内容怎麼辦呢?迅雷的産品設定為:使用者點選搜尋建議中的内容時,搜尋送出的是選中的内容,輸入法内的内容會自行消失;

四    搜尋前的篩選

關于搜尋條件預設分類的位置:         

  • 可以放在搜尋框前後,
互動設計細節——搜尋

(圖為 amazon首頁,http://www.amazon.cn/)

互動設計細節——搜尋

(圖為 鳳凰網首頁,http://www.ifeng.com/)

  • 也可以放在搜尋框上下,
互動設計細節——搜尋

(圖為 淘寶網,http://s.taobao.com/search?q=%CD%E2%CC%D7&keyword=&commend=all&ssid=s5-e&search_type=item&atype=&tracelog=&sourceId=tb.index)

但樣式随位置不同而有所變化。

 五   清空功能

互動設計細節——搜尋

(圖為 移動産品截圖)

  • 關于搜尋框内添加【清空】功能,此種情況最适用于搜尋框輸入的内容較長,避免使用者手動框選or逐個删除,或移動端産品逐個觸擊删除;
  • 當預設輕按兩下or單擊,全選中搜尋框内全部内容時,這個功能可以不放;
  • 關于清空按鈕出現時間,一般是在搜尋框内有輸入内容之後出現;
  • 關于清空按鈕位置,一般是在搜尋框内靠後位置(也有放在搜尋框外的後面位置),當搜尋框後有送出按鈕,特别按鈕icon為‘放大鏡圖示’時,要處理兩者之間的關系,避免使用者誤操作。
互動設計細節——搜尋

六    搜尋符号

  • 單擊搜尋框内提示文本消失,符号跟着消失時,認為符号是文本的一部分,符号與提示文本樣式應統一;
  • 單擊符号不消失代表符号不是文本,那麼符号的樣式應與文本有所區分;
  • 當符号為文本,但後面又用了符号作為送出按鈕時,是否有沖突?
互動設計細節——搜尋

(圖為 視覺中國首頁,http://www.chinavisual.com/)

互動設計細節——搜尋

(圖為 IBM官網首頁,http://www.ibm.com/us/en/)

七    兩個送出按鈕

互動設計細節——搜尋

(圖為 淘寶女鞋市場,http://www.taobao.com/market/ladyshoes/lady_shoes.php?ad_id=&am_id=&cm_id=1400606053fa0788c3ac&pm_id=)

互動設計細節——搜尋

(圖為 口碑網首頁,http://shenzhen.koubei.com/)

繼續閱讀