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

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

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

　　一個(gè)完整的搜索過(guò)程大體分為三部分：尋找搜索入口、進(jìn)入頁(yè)面搜索、查看搜索結(jié)果。接下來(lái)將從這3點(diǎn)來(lái)講述：
 

　　一、搜索入口
 

　　搜索入口樣式常見(jiàn)的可分為2種：1搜索框、2搜索icon
 

　　搜索框類(lèi)根據(jù)位置分類(lèi)常見(jiàn)的有三種：
 

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

 

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

 

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

 

　　2搜索icon 樣式：
 

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

 

　　二、搜索頁(yè)面
 

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

　　2.1頂部搜索區(qū)
 

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

 

　　2.2中間輔助區(qū)
 

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

　　1標(biāo)簽式：
 

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

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

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

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

 

　　2.列表式：
 

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

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

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

　　適合場(chǎng)景：需要全面展示推薦信息的頁(yè)面。

 

　　3.Tab欄式：
 

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

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

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

　　適合場(chǎng)景：需要全面多維度展示的頁(yè)面。

 

　　4.圖片式：
 

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

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

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

　　適合場(chǎng)景：需要增強(qiáng)頁(yè)面感染力，激發(fā)用戶(hù)點(diǎn)擊欲望的頁(yè)面。

 

　　5.條件篩選：
 

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

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

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

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

 

　　6.組合樣式：
 

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

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

 

　　2.3底部鍵盤(pán)
 

　　底部的鍵盤(pán)通常也會(huì)伴隨著輔助功能，例如語(yǔ)音、掃一掃等功能，例如淘寶的鍵盤(pán)頂部功能。

 

　　2.4實(shí)時(shí)搜索
 

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

 

　　三、搜索結(jié)果
 

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

　　1.常規(guī)列表
 

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

 

　　2.篩選排序
 

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

 

　　3.結(jié)果為空
 

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

 

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