一月 7, 2022 | 最新網頁設計

5大站內搜尋框(Search Bar)設計時必要功能元素

懶人瀏覽網站時必備的站內工具!
Google已經養成網站瀏覽者用搜尋功能的好習慣,進入Google的網站只看到大大的一個搜尋Bar。而「Google 一下」也成了找網路找資料的代言詞。所以在設計網站時,我們該如何設計出一個好用的搜尋功能呢? 讓聖誕老人的設計團隊娓娓道來!!!

5大站內搜尋框

搜尋功能是否每個網站都需要?

當我們在規劃客戶的網站架構時,如果客戶的內容不多,我們通常建議用分類與列表的方式來規劃網站,最重要的是容易讓瀏覽者找到想要看的內容。

如果客戶的內容多,基本上文章超過20篇,商品或服務超過30篇以上,我們就會建議在網站中加上站內搜尋(Search Bar)的功能,當站內有自己的搜尋Bar,瀏覽者就能在眾多文章中,輕鬆的搜尋到要看的內容。

確認需要設計搜尋框後,我們需要注意哪些元素呢?

5大站內搜尋框

五大搜尋框設計必備元素

既然確認您的網站中要有站內搜尋的功能了,那有什麼在設計與規劃Search Bar時要注意的事項呢?

  1. 不要隱欌Search Bar的功能
  2. 一看就知道是搜尋功能的設計
  3. 輸入時的即時提示
  4. 預填文字提示
  5. 在搜尋框下建議熱搜字詞

不要隱藏Search Bar的功能

許多設計師為了讓畫面變得好看,反而把Search Bar Ui 隱藏起來,這樣就失去了讓瀏覽者能容易找到資訊的方式! 因此建議,既然客戶需要做站內搜尋,就把搜尋框做的容易找得到。

HelloSanta首頁
顯眼的搜尋Bar

一看就知道是搜尋功能的設計

相信沒有人應該不知道,點選放大鏡,就表示可以搜尋你已填入的關鍵字。因此放大鏡的ICON已經是搜尋功能的指定代言人了。因此建議設計師在設計搜尋Bar的時候,千萬不要突發奇想,用奇怪的icon來設計,這樣只會讓瀏覽者容易找不到搜尋功能了。

免費的ICON下載網站特色
FlaticonAccess +6.3M vector icons & stickers
 
Icons8Icons, illustrations, photos, music, and design tools
fontawesomeGet vector icons and social logos on your website with Font Awesome, the web's most popular icon set and toolkit.
iconshockThe biggest icon pack: 2 million professional icons library
icomoonBrowse 5500+ free vector icons
heroiconsBeautiful hand-crafted SVG icons,
by the makers of Tailwind CSS.
 

輸入時的即時提示

如果要讓瀏覽者更容易搜尋到資訊,可以製作即時提示功能,讓瀏覽者填寫文字時,就能逐字提供相關的搜尋內容。

即時提示

預填文字提示

這個功能可以引導瀏覽者點選你指定的內容,這是做產品或服務推廣時很有效的方式。

輸入及時提示

在搜尋框下設計建議熱搜字詞

這樣的設計,也能夠引導瀏覽者,直接點選搜尋bar下方的關鍵字,而直接引導瀏覽者瀏覽您指定的搜尋結果

如果客戶在網站規劃時,有確認需要製作站內搜尋的功能,那以上五大搜尋框設計必備元素會是在設計上重要的考量。

在搜尋框下設計建議熱搜字詞