注:如果你正在閱讀這篇文章,那么你一定正在設(shè)計一個有搜索功能的網(wǎng)站或應用程序。在這篇文章中,我將介紹 5 個最佳實踐,這些實踐可以幫助大家設(shè)計了更好、更實用的搜索機制。
最佳實踐
1.視覺線索
無論創(chuàng)建任何類型的用戶界面,為用戶提供快速掃描屏幕所需的工具是你設(shè)計的一部分。這樣做可以確保你的用戶知道在什么地方找到他想要的東西,何時需要使用以及與其交互后會發(fā)生什么。
放大鏡圖標
使用放大鏡圖標,我無法保證這樣會加快了搜索欄查找的速度。但是圖標越簡單越好,較少的細節(jié)可以讓用戶更快地瀏覽。雖然,一個圖標本身沒有輸入容器或按鈕,實際上會使搜索更加困難。
極簡主義搜索圖標的示例
人們通常認為放大鏡圖標表示搜索工具,即使它沒有標簽說明。但是,只顯示圖標的搜索框會使搜索變得更加困難。(言論來自NNG凱蒂謝爾文的“搜索設(shè)計中的放大鏡圖標”)
一個實際的搜索按鈕
不是所有用戶都是資深網(wǎng)民,這也就意味著并不是每個用戶都知道,一旦在輸入框里輸入查詢內(nèi)容,按下回車鍵就可以得到相關(guān)信息。因此,在搜索輸入旁邊設(shè)計一個實際的按鈕可以幫助用戶確認他們的下一個動作,從而減少用戶所需的認知負荷。
注意:避免將按鈕放在輸入框的左側(cè),上方或下方。
提示:
在文本輸入獲得焦點前,你可以隱藏輸入按鈕。
確保按鈕的大小適中,以便點擊起來感覺自然。
2.輸入特性
有時候,越是閃亮,強大或面積大的東西也不一定能引起人們的注意,搜索模式也一樣。不如將它改為你理想的風格!但切記搜索框的設(shè)計必須與你的網(wǎng)站或應用程序的主題相吻合,并同時確保它足夠引人注目。
Youtube新的(令人驚嘆的)黑色主題通過保持搜索模式與其他元素的一致性就完美地闡述了這一點。
“搜索框也并不是越長越好”
但也要確保輸入長度也不要過短。據(jù)NNG的研究表明:擁有能夠容納 27 個字符的輸入,可以滿足90%的用戶的需求。
如圖:一個常見的 5 詞 26 個字符搜索的例子。
3.透明占位符
為輸入的占位符文本使用適當?shù)母北竞苤匾鼈兺ǔJ前凳居脩艨梢运阉鞯膬?nèi)容。 這確保了他們知道要搜索什么,并且不會因編寫錯誤導致查詢失敗而感到沮喪。最近,Web工具可以通過在HTML5 中添加提示作為占位符來輕松完成此操作。
添加占位符可以幫助用戶過濾查詢的內(nèi)容。