新浪体育手机新浪网一
設計一個完美的搜索框,你需要注意這9個要素
技術文檔    發布日期:2017-03-02 09:24   來源:

搜索框是我們最常用到的UI控件之一,它幾乎存在于所有的網站和APP當中。許多人認為搜索框不需要設計,因為它似乎就是由兩個最簡單的元素構成的。在以內容為導向的網站中,搜索框的重要性會相對更明顯,用戶需要快速又無痛地找到他們想要的內容。而對于設計相對負責的網站而言,這個需求尤其明顯。搜索框的可用性設計,是整個設計的關鍵。

今天的文章我們來聊聊搜索框的設計,如何讓用戶盡量節省時間,搜到他們想要的內容。

1、使用放大鏡圖標

時至今日,搜索的概念和放大鏡圖標之間的關系已經深入人心,根深蒂固了。在日常最常用、最易于識別的幾個圖標當中,放大鏡所帶代表的搜索圖標就是其中之一。

即使在沒有文本標簽標識的情況下,用戶也能輕松地識別圖標的含義。

小貼士:使用最簡略直觀的放大鏡圖標,細節越少,越容易識別。

2、顯眼的搜索輸入框

如果搜索是你的網站或者APP的重要功能的話,你應當讓搜索框足夠顯眼,這樣的能設計讓用戶最快發現它的存在。

左邊:搜索功能隱藏在圖標之后

顯示完整的文本輸入框是很重要的,隱藏在按鈕背后的輸入框會讓用戶覺得不是那么明顯,不容易被快速發現。需要點擊之后用戶才能看到。

3、提供搜索按鈕

按鈕的存在讓用戶能夠明白搜索的觸發方式——也就是說通過觸發按鈕來完成這一操作。

小貼士:

·控制搜索按鈕的尺寸大小,讓用戶使用光標可以輕松找到并點擊,讓觸發區域大小合適。

·讓用戶可以通過回車鍵提交搜索,許多用戶仍然有通過點擊鍵盤按鍵來觸發搜索的習慣。

4、每頁都保留搜索輸入框

你應該為用戶擁有在每個頁面都能立刻進行搜索的權限,如果你的用戶在特定的頁面找不到他們想要的內容,可以立刻通過搜索獲取內容,無論他在網站的哪個地方。

5、讓搜索框盡量簡單

在你設計搜索框的時候,請盡量讓它看起來就是一個搜索框,并且簡單易用??捎瞇匝芯勘礱?,默認沒有顯示高級選項的搜索框看起來更加友好,所以,通常情況下給用戶提供的搜索框最好不要提供進階的搜索選項。

6、讓搜索框處于用戶預期的位置

當用戶想要搜索內容的時候還需要花費精力來尋找搜索框,這就非常尷尬了。這意味著搜索框本身就不容易被察覺。

下面這個圖表來自 A. Dawn Shaikh 和 Keisi Lenz 的一項研究,它展示出了 142 名被調查者對于網站的搜索框的預期的位置。這項研究表明,網站的左上角和右上角是用戶所期待的搜索框的位置,用戶在使用F型掃視法查看內容的時候,可以輕松找到搜索框。

這份研究還表明,右上角的區域是用戶搜尋輸入框的首選區域。

因此,將輸入框置于頂部靠右或者頂部居中的位置,用戶會主動在這個地方尋找搜索框。

小貼士:

·在理想情況下,搜索框的設計應當和整個網站的設計風格保持一致,同時在視覺上要略顯突出,便于用戶發覺它的存在。

·如果網站的內容足夠多,搜索框在設計上顯著程度應該越高,如果搜索功能對于你的網站至關重要,那么你應該采用較大的對比度,確保輸入框和按鈕從背景中脫穎而出。

?
地址:深圳市南山區創業路南光商務大廈2-1114    Email:[email protected]    Tel:0755-86176995    中國 · 深圳
Copyright ? 2006 -2020 深圳匯網在線 All Right Reserved.    粵ICP備14062458號-1


咨詢電話:0755-86176995
{ganrao} 单机麻将大全手机版 天天红包赛10元档 三级片mp4电影下载 上马麻里子 喷奶拍摄 怎么看股票k线图成 王中王一马中特 申城棋牌安卓 天津二手麻将机 p3开机号317期 广东十一选五历史 一分钟赛车计划网址 浙江十一选五走势 东方通信股票 上海哈灵麻将下载app 捕鱼大师现金版好玩 pk10最牛杀号在线计划