網站交互設計：下拉清單和搜索輸入框的二三事

仲介交易 HTTP://www.aliyun.com/zixun/aggregation/6858.html">SEO診斷 淘寶客 雲主機 技術大廳

下拉清單和搜索輸入框組合是頁面常用的標配之一，是串起獨立頁面的一種紐帶。 下拉清單和搜索輸入框的組合較多出現在行業性比較強的網站或是各種後臺系統，而且會在其頁面的的重要位置顯示，讓使用者能很容易找到查找產品的入口。 撇開其行業內容不談，下拉清單和搜索輸入框的組合順序和其每個獨立的下拉清單的內部順序對於是否能快速精確的定位使用者想要查找的內容起著至關重要的作用，同時，也將左右使用者的操作次數和思考次數。

就簡單的獨立下拉清單而言，其選項順序不同，對於使用者的眼球運動和滑鼠移動以及點擊次數也會有較大的影響。 我們來看圖A-一個簡單的例子：

圖 A

此為公司廣告後臺中一個關於廣告發布的部分表單，「部門」的選擇有「研究中心、家裝頻道、廣告中心」等等14個選項，設計師在選擇時，如要選擇「廣告中心」，則要點擊下拉清單，然後流覽到第9條再點擊選擇。

但是通過統計，80%以上的工作單都是由廣告中心發出，如果我們將「廣告中心」設為缺省選項，其他內容順序不變，那麼在這個下拉清單的操作中，設計師將減少80%的操作量，同時也會減少更多的操作失誤(下拉選項太多，失誤率也高)。

對於單個下拉清單的使用者體驗優化相對比較簡單，多個下拉清單+搜索輸入框的組合明顯增加了優化的複雜程度。 如果多個下拉清單的前後選項順序不同，可能造成使用者的下拉點擊操作次數和思考次數就不盡相同。 同時，搜索輸入框和下拉清單的位置也因各種情況而異。 我們來看圖B，幾大門戶搜索新房的例子：

圖 B

各個下拉清單的內容主要有「區屬+物業類型+均價」。 三者的順序基本是由使用者對於新房的搜索心理以及其內部的部分邏輯關係所決定的。

三個入口網站都將「區屬」放在第一個，這是符合使用者搜索新房的心理的，買新房首要條件是地段，同時地段決定了均價的大概區間。 兩個入口網站將「物業類型」放在其次，「物業類型」這個術語比較繞，實際上就是住宅寫字樓商鋪等分類。 最後是「價格」，已經由區屬決定了其大致區間，個人認為放在最後是合理的。 個人有一疑問：將「物業類型」與「區屬」是否可以調換位置?麻煩大家能給出專業意見~

同時，三個門戶中下拉清單和搜索輸入框的先後順序有兩種，一種將搜索輸入框放在下拉清單之後，另一種將搜索輸入框在下拉清單之前。 下拉清單一般是網站策劃定位各種區間來引導使用者搜索產品，而搜索輸入框則是讓使用者自主進行產品關鍵字輸入進行搜索。 是先讓使用者主動還是先引導使用者?這是網站策劃必須要考慮的的問題，這是要根據使用者對於產品的熟悉程度和自身對於產品的需求所決定。

所以，在策劃下拉清單和搜索輸入框組合模組時，對於使用者的調研是必不可少的，這樣，才能掌握使用者的需求，進行使用者需求的篩選、分析、總結，以最佳的模式來組合下拉清單和搜索輸入框模組。