看似一模一樣的搜索框,在設計師眼里有這么多細節! - 優設網 - UISDC

看似一模一樣的搜索框,在設計師眼里有這么多細節!

2017/08/06 8553評論區

彬彬:搜索幾乎是現在所有網站,APP甚至操作系統的標配,不論是電商還是論壇等等。它是一個站內給用戶直接到達目的地的通道,起到了一個引導用戶走向的重要作用。在不同的系統,不同用途的網站上搜索呈現的方式都有所不同。

用搜索的原因

使用搜索時,用戶可以自己掌握瀏覽該網站的路徑,從哪一頁進入到哪一頁,自己控制如何使用這個網站。沒有必要根據網站的頁面設計來決定瀏覽頁面的先后順序。這也是為什么很多網站用戶一進入就直接使用搜索功能的原因。

另一個原因是,當用戶瀏覽網頁到一半不知道接下去該干什么的時候,往往會使用搜索直接去找到自己想找的內容。

不使用搜索的原因

相對于搜索,用戶根據類目,或者從功能模塊的入口進入各個頁面其實是跟著頁面的導向進行的下一步操作。

網頁的設計者會根據網站的不同需求從而設計不同的頁面布局。根據這些頁面布局進而引導用戶一步一步的達成網站設計者的目的。這些目的可能就是買一件商品,參加一個活動等等。用戶可以根據設計者創建的引導流程一步步的查看網站內容。

不同用戶群

根據搜索是否主動搜索這點來分,可以把用戶分成3種類型:任務型,鏈接型,混合型。

任務型:

任務型的用戶就是前面說的直接使用搜索功能的用戶。大部分用戶都是任務型的用戶。這些用戶往往是帶著某種目的來,例如已經知道了自己要購買的商品,就直接搜索商品名稱進入搜索列表頁。

使用搜索的場景可以再細化一點,通常用戶已經想好了具體要搜索的關鍵詞,同時他使用的網站可以搜索到非常大量的搜索結果時,用戶會使用搜索功能。例如在手機里找一個聯系人的號碼,如果手機里只存了10個號碼,那很可能就直接打開聯系人的APP,從這10個人的姓名中找到一個號碼;另一種情況,如果手機里存了500個號碼,這時候要逐個瀏覽來找某個聯系人效率就會相對低,這是大家會做的是在聯系人里找到搜索框,輸入要找的人的姓名或者拼音,定位到要找的人,最后找到電話號碼。

鏈接型:

鏈接型的用戶打開一個頁面之后會找各個功能的鏈接(首頁廣告,功能入口,鏈接),即使他們已經想好了要找某些信息,他們還是會通過點擊入口而不是輸入關鍵字來找頁面。通常這類用戶知道自己要買麥片,但是沒有考慮好什么品牌的麥片,哪個國家的麥片,那這個時候,他們會做的是找到網站的類目入口,在類目里找到“麥片”的分類,點擊進入,而不是直接搜索關鍵詞“麥片”。

鏈接型的用戶只有當他們在頁面上找不到自己需要的相關信息鏈接時,才會選擇使用搜索框。

混合型:

混合型的用戶行為其實以上兩種都有,有時候會直接搜索關鍵詞,有時候會在頁面上尋找鏈接,沒有使用以上哪種偏好的傾向性,只是用當下他們覺得最好的方式。

搜索入口的設計

不同功能,不同需求的界面會影響到搜索框入口的設計。

△ iOS系統的搜索框只有在用戶下拉頁面時才會出現。

對于一個系統界面來說,給用戶提供各個APP,功能入口是一個系統的重要功能,所以對于搜索,系統做了隱藏處理。

YouTube有針對用戶的喜好在首頁提供不同的視頻,是一個對每個用戶個性化的訂制內容, YouTube希望用戶瀏覽查看他們對于用戶推薦的視頻。所以他們沒有把搜索框直接展開而是只顯示一個icon,點擊之后出現單獨的搜索頁。

△ 電商類APP搜索框一般直接露出在首頁的最頂端。

前面有說到在電商網站中,當用戶不知道接下去該做什么的時候,會使用搜索操作來直接到達自己想要到達的頁面。所以,通常電商網站中,搜索往往是固定在頂部Global上的,以便用戶無論在哪一頁都能找到。

類似于Google,百度,Bing,搜索是他們的主營業務,自然希望用戶所要查看的大部分頁面都是通過搜索來獲得。所以把搜索框做為用戶的唯一使用路徑放在首頁,不論是APP還是網頁。

這4個例子里對用戶對搜索的需求依次增強,所以搜索在頁面上的表現形式也依次增強。

作為一個用戶大量使用的工具:搜索,它的位置,呈現形式直接關系到制作者對產品的預期,也直接關系到用戶會用什么形式使用當前的界面。有的用戶瀏覽界面知道自己要找什么,有的用戶是來頁面上逛逛的,針對不同用戶,不同的搜索設計方案可以幫助設計者達到設計目的,也能幫助用戶更好的使用體驗。

以上是對搜索表現形式的一些基本見解。

搜索之時

搜索之時指的是點擊搜索框之后到點擊“搜索“按鈕或者按”回車“之間發生的事。是不是覺得間隔時間很短?短到平時都忽略了這個過程,但是這里面的故事不少,各個平臺都花了不少心思在這中間過程的設計上。

點擊搜索框

當用戶點擊頁面上的搜索框之后,如果在PC端通常會給出歷史搜索詞和推薦的關鍵詞;如果是在手機端除了兩種搜索詞外還會同時彈出鍵盤。歷史搜索針對的是近期多次瀏覽對比同一個搜索結果的用戶。可能是用戶在電商平臺挑選商品,可能是用戶在視頻類網站追電視劇。于是設計者們就把內容前置,可以讓用戶在不輸入關鍵詞的情況下直接得到想要的搜索結果。

推薦的關鍵詞有幾種可能,有其他用戶近期的熱搜詞(最近流行的電視劇,流行的網絡詞),有平臺推薦的搜索結果(給某些類目拉流量用的),有廣告(金主給錢的),有針對用戶的推薦詞(根據用戶最近的操作習慣精準化推薦的)。這其中近期的網絡熱搜詞效果最好,針對用戶的推薦詞次之,之后分別是平臺推薦詞和廣告。另外,也有對用戶的輸入行為預判并且分類的。這時內容前置給出的就是這些分類的名稱,而不是某幾個關鍵字。

輸入關鍵詞

用戶在輸入搜索關鍵詞的時候,不管已完全輸入了要搜索的關鍵詞還是只輸入了部分,各個搜索頁面這時通常會給出關鍵詞的聯想搜索結果。有些平臺在用戶輸入了一半的時候就根據用戶的歷史搜索記錄和自己的數據庫猜想出了用戶想要輸入的完整關鍵詞。

有些平臺甚至可以定位到某一部指定的影片:

或是指定的地址,并且可以直接開始導航。

這也是一種信息前置的很好的方式:在用戶輸完所有關鍵詞之前就給出搜索答案,給出下一步的操作。

關鍵詞

現在大部分用戶在搜索框輸入要找的內容時已經不會再輸入“黑色27寸戴爾高清4K顯示器”這么長的關鍵詞,而是中間會用空格把每個修飾語隔開。因為當用戶用幾個詞語代替一長串字的偏正短語會得到更多的搜索結果。其實這樣的長關鍵詞更符合日常生活中的自然語言,把一個長短語拆解為幾個詞,加上空格再輸入實際上是我們幫程序做了一步翻譯的工作。

現在由于技術的進步,我們又可以搜索“黑色27寸戴爾高清4K顯示器”了,程序會自動解析這一長串的字,先給出匹配所有關鍵詞(黑色,27寸,戴爾,高清,4K,顯示器)關聯度最高的搜索結果,之后再給出去掉一個或者兩個關鍵詞的搜索結果。這樣最大化的滿足用戶的需求,而不是尷尬的來一句“沒找到相關內容”。

更高級的搜索方式

在可以搜索長關鍵詞的基礎上,現在有些平臺已經可以語音輸入搜索內容了。因為“黑色27寸戴爾高清4K顯示器”也不是我們自然的溝通方式,“我想買黑色27寸戴爾高清4K顯示器”才是。

只是語音輸入并不適用于很多生活場景中,例如大家不會在辦公室對著電商APP說我要買什么;而車載導航的場景就比較合適,封閉的空間,幾個人相同的目的地,但是很多地址因為名字取的很尷尬,也不是那么容易搜到。

大家在做的搜索優化都是在簡化搜索的過程,更精準的提前給出搜索結果。從點擊搜索框給出歷史搜詞和推薦詞,到輸入部分文字給出部分匹配的搜索結果,到點擊搜索按鈕之后給出精確的搜索結果,是一個從模糊猜測到精確定位的過程。由于技術越來越完善,在模糊猜測的階段我們現在就能抓到一些用戶的需求,把搜索結果前置,縮短了搜索的流程。相信今后語音搜索可以更貼近自然語言,讓搜索的過程更加高效。

歡迎關注點融設計中心DDC微信公眾號:「ID:DR_DDC」

ddcqr

搜索框設計指南」

  1. 《設計一個完美的搜索框,你需要注意這9個要素》
  2. 《這10個關鍵點,讓你的搜索結果頁看起來足夠專業》

【優設網 原創文章 投稿郵箱:yuan@uisdc.com】

================明星欄目推薦================

優優教程網 UiiiUiii.com 是優設旗下優質中文教程網站,分享了大量PS、AE、AI、C4D等中文教程,為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章,按照我們的專欄一步步學習,一定可以迅速上手并制作出酷炫的視覺效果。

設計導航:國內人氣最高的設計網址導航,設計師必備:http://hao.uisdc.com

非特殊說明,本文版權歸原作者所有,轉載請注明出處
本文地址:http://www.dbw33.com/search-bar-design

發表評論 加載中....

評論加載中....

uisdc

評論區都快餓癟了,看看我期盼的小眼神...

設計圈干貨 界面設計 排版布局 版式設計 職場 優設專訪 優設大課堂 設計師干貨 設計達人 配色 web前端開發 視覺設計 素材下載 AI教程 設計理論 設計流程 神器下載 字體下載 設計師專訪 psd下載 海報設計 設計規范 設計趨勢 用戶體驗設計 動效設計 logo設計 平面設計 圖標設計 ICON 產品設計 神器推薦 App設計 字體設計 職場規劃 酷站推薦 交互設計 ui設計 優秀網頁設計 設計師職場 ps技巧 酷站 用戶體驗 PS教程 網頁設計 經驗分享

您還沒有登錄

優設啟用更安全省心的 微信掃碼登錄

微信掃碼

300萬設計師聚集地!優設網是極具人氣的設計師平臺
2012年成立至今,一直專注于設計師的學習成長交流

把好文章收藏到微信

打開微信,掃碼分享
學設計 優設網 在這里

久播电影网伦理片