UI設(shè)計中搜索頁設(shè)計指南

　　在開始之前，我們先來想一個問題，用戶為什么要使用搜索功能呢? 今天AAA教育郭老師帶大家一起來探討一下UI搜索頁面的一些設(shè)計方法。
 

　　用戶搜索的目的是為了快速找到自己想要的結(jié)果!搜索頁是用戶進行搜索的第一站，最理想的狀態(tài)就是用戶不需要輸入文字或者語音等交互操作就可以點擊查看搜索結(jié)果，所以搜索頁中推薦內(nèi)容對提高用戶搜索效率有著非常重要的作用。
 

　　一個完整的搜索過程大體分為三部分：尋找搜索入口、進入頁面搜索、查看搜索結(jié)果。接下來將從這3點來講述：
 

　　一、搜索入口
 

　　搜索入口樣式常見的可分為2種：1搜索框、2搜索icon
 

　　搜索框類根據(jù)位置分類常見的有三種：
 

　　1.位于頁面頂部(導(dǎo)航欄中間或下方) ，比較常見的樣式。

 

　　2.位于頁面中間，搜索功能作為核心部分展示。

 

　　3.位于頁面底部作為獨立的Tab存在。常見與發(fā)現(xiàn)頁面或應(yīng)用商店等內(nèi)容類APP中。

 

　　2搜索icon 樣式：
 

　　一般位于頁面導(dǎo)航欄左右兩邊，可與其他icon并類存在。

 

　　二、搜索頁面
 

　　搜索頁面一般由三部分組成：1頂部搜索區(qū) 2中間輔助區(qū) 3底部鍵盤，有些產(chǎn)品也支持實時搜索，我們一一來看：
 

　　2.1頂部搜索區(qū)
 

　　頂部搜索區(qū)：包括輸入框，有些也會伴隨拍照、語音等輔助功能。

 

　　2.2中間輔助區(qū)
 

　　中間輔助區(qū)：主要包括“歷史搜索”和“熱門推薦”兩部分內(nèi)容。常見樣式有以下幾種：
 

　　1標(biāo)簽式：
 

　　在設(shè)計形式上一般采用“文字”+“背景”形式，標(biāo)簽文字在 @2x 圖下一般是 24px 大小，標(biāo)簽背景一般以淺灰色的圓角矩形為主。
 

　　優(yōu)點：提取用戶最關(guān)注的核心關(guān)鍵詞，相比其他形式區(qū)域內(nèi)展示標(biāo)簽數(shù)量多，展示效率高。
 

　　缺點：展示信息密集且樣式單一，缺乏感染力。
 

　　適合場景：需要高效展示搜索內(nèi)容的信息頁面。

 

　　2.列表式：
 

　　在設(shè)計樣式一般由多個橫向列表單元組成，列表單元內(nèi)主要分為“純文字”和“圖標(biāo)+文字”兩種設(shè)計形式
 

　　優(yōu)點：可借助縱軸交互無限下拉展示，通常以短句的形式展示核心內(nèi)容，展示信息更全面，根據(jù)產(chǎn)品類型的不同還會伴有圖標(biāo)、輔助文案等信息展示;列表流的設(shè)計符合用戶自上到下、自左到右的閱讀習(xí)慣。
 

　　缺點：一屏之內(nèi)顯示的內(nèi)容遠(yuǎn)少于標(biāo)簽式能展示的內(nèi)容，展示效率低;在伴隨圖標(biāo)、輔助文案的情況下，用戶的閱讀視線需要進行多次跳轉(zhuǎn)，閱讀成本高。
 

　　適合場景：需要全面展示推薦信息的頁面。

 

　　3.Tab欄式：
 

　　由頂部 Tab 選項和推薦列表組成，兩者有強烈的依附關(guān)系。在設(shè)計細(xì)節(jié)上通常會添加排名、標(biāo)簽、圖標(biāo)等作為輔助性信息，增強用戶點擊欲望。
 

　　優(yōu)點：通過Tab 欄可以展示多維度的推薦內(nèi)容，展示信息維度廣，間接地提高了信息展示效率。
 

　　缺點：交互成本高，需要用戶先點擊 Tab 欄再選擇具體的推薦關(guān)鍵詞;操作門檻高，對于幼兒、老年等非主流用戶群體學(xué)習(xí)成本高。
 

　　適合場景：需要全面多維度展示的頁面。

 

　　4.圖片式：
 

　　在設(shè)計上主要以圖片和標(biāo)題文字組成，在設(shè)計細(xì)節(jié)上會添加標(biāo)簽、圖標(biāo)、推薦文案等輔助性信息。
 

　　優(yōu)點：圖片相比于文字更加能吸引用戶的注意力，視覺沖擊力強，識別成本低;通常圖片中會包含標(biāo)簽、圖標(biāo)、說明文案等輔助信息，展示信息全面。
 

　　缺點：圖片面積占比大，信息展示效率低;需要找到和標(biāo)題釋義一致的圖片要耗費較高的人力成本，后期維護成本高。
 

　　適合場景：需要增強頁面感染力，激發(fā)用戶點擊欲望的頁面。

 

　　5.條件篩選：
 

　　設(shè)計上主要以文字為主，部分產(chǎn)品也會添加圖標(biāo)輔助用戶快速識別。
 

　　優(yōu)點：限定搜索維度，更加精準(zhǔn)。
 

　　缺點：交互成本高，想要精準(zhǔn)搜索必須先點擊篩選條件。
 

　　適合場景：需要精準(zhǔn)化搜索的頁面。

 

　　6.組合樣式：
 

　　不同形式的推薦搜索內(nèi)容在設(shè)計上都有各自的優(yōu)缺點，選擇某一種形式取決于頁面當(dāng)前承擔(dān)核心業(yè)務(wù)是什么，我們在實際設(shè)計當(dāng)中可以有選擇的進行多種形式的組合(最好不要超過兩種)，進行取長補短。
 

　　適合場景：最大化的發(fā)揮搜索推薦的優(yōu)勢。

 

　　2.3底部鍵盤
 

　　底部的鍵盤通常也會伴隨著輔助功能，例如語音、掃一掃等功能，例如淘寶的鍵盤頂部功能。

 

　　2.4實時搜索
 

　　用戶在輸入關(guān)鍵詞時，下方頁面會實時更新內(nèi)容，一種是實時呈現(xiàn)搜索結(jié)果，一種是呈現(xiàn)聯(lián)想詞列表。

 

　　三、搜索結(jié)果
 

　　搜索結(jié)果通常分為常規(guī)列表、帶有篩選排序功能的結(jié)果列表以及搜索為空的頁面。
 

　　1.常規(guī)列表
 

　　簡易結(jié)果列表，有些也帶有分類標(biāo)簽和關(guān)鍵詞高亮顯示。

 

　　2.篩選排序
 

　　可進一步對結(jié)果做篩選或排序，如電商、旅游等類型產(chǎn)品較多使用此功能。

 

　　3.結(jié)果為空
 

　　當(dāng)無搜索結(jié)果時，可用展位圖+提示語來告知用戶，也可在此頁面上推薦其他內(nèi)容，給用戶多一點選擇。

 

　　希望這篇文章能幫助大家在拿到設(shè)計需求沒有什么想法的時候，可以快速產(chǎn)出一套搜索頁設(shè)計方案 。而其中的細(xì)節(jié)確定需要大家結(jié)合自身產(chǎn)品特點，選擇適合自己的部分。因此，您現(xiàn)在已經(jīng)了解了與UI設(shè)計師的工作相關(guān)的主要技能。如果您想了解更多信息，請訪問AAA教育，包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。