筆者以線上產(chǎn)品為例，歸納總結(jié)了五種搜索頁(yè)面的樣式設(shè)計(jì)形式，與大家分享。

用戶進(jìn)行搜索的首要目的就是：快速找到自己想要的結(jié)果！

搜索頁(yè)面是用戶進(jìn)行搜索的第一站，最理想的狀態(tài)就是用戶不用打字就能夠進(jìn)行搜索，所以搜索頁(yè)承擔(dān)著增強(qiáng)用戶搜索效率的作用。

我們以線上產(chǎn)品進(jìn)行歸納總結(jié)，看一下各個(gè)產(chǎn)品是通過(guò)什么方式為用戶提高搜索效率。

目錄

1. 搜索頁(yè)面的構(gòu)成
2. 標(biāo)簽式
3. 列表式
4. Tab 欄
5. 卡片式
6. 條件篩選
7. 注意事項(xiàng)
8. 畫重點(diǎn)

一、搜索頁(yè)面的構(gòu)成

搜索頁(yè)面主要有三大部分構(gòu)成：搜索框、推薦內(nèi)容、鍵盤組成。

一般情況下搜索框內(nèi)會(huì)默認(rèn)帶有推薦內(nèi)容，右側(cè)會(huì)帶有輔助功能；推薦內(nèi)容主要包括“歷史搜索”和“熱門推薦”兩部分內(nèi)容；底部的鍵盤通常也會(huì)伴隨著輔助功能，例如語(yǔ)音、掃一掃等功能。

二、標(biāo)簽式

1. 設(shè)計(jì)樣式

標(biāo)簽式推薦內(nèi)容在設(shè)計(jì)形式一般有“文字”和“背景”組成，標(biāo)簽文字在 @2x 圖下一般是 24px 大小，標(biāo)簽背景一般以淺灰色的圓角矩形為主。

2. 優(yōu)點(diǎn)

1. 信息簡(jiǎn)潔，提取用戶最關(guān)注的核心關(guān)鍵詞；
2. 展示效率高，同比其他形式區(qū)域內(nèi)展示標(biāo)簽數(shù)量多；
3. 設(shè)計(jì)成本低，僅有關(guān)鍵詞和背景組成；
4. 通俗易懂，主要通過(guò)關(guān)鍵詞傳遞信息，用戶易接受。

3. 缺點(diǎn)

1. 展示信息密集，識(shí)別困難；
2. 展示信息單一，推薦理由不充分；
3. 缺乏感染力，單純的文字卡片展示；
4. 位于頂部遠(yuǎn)離拇指區(qū)，操作不便。

三、列表式

1. 設(shè)計(jì)樣式

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

在細(xì)節(jié)上，由于列表在 Y 軸上可以無(wú)限延伸，所以在字體大小、列表單元格高度、圖標(biāo)大小等設(shè)計(jì)細(xì)節(jié)各個(gè)產(chǎn)品暫無(wú)統(tǒng)一規(guī)律可循，設(shè)計(jì)上遵循各自產(chǎn)品的設(shè)計(jì)規(guī)范為主。

2. 優(yōu)點(diǎn)

1. 承載內(nèi)容多，可借助縱軸交互無(wú)線下拉展示；
2. 展示信息內(nèi)容全面，通常以短句的形式展示核心內(nèi)容，根據(jù)產(chǎn)品類型的不同還會(huì)伴有頭像、圖標(biāo)、標(biāo)簽、輔助文案等輔助信息展示；
3. 符合用戶的閱讀習(xí)慣，列表流的設(shè)計(jì)符合用戶自上到下、自左到右的閱讀習(xí)慣。

3. 缺點(diǎn)

1. 展示效率低，列表單元格幾乎占整個(gè)屏幕橫軸面積，一屏之內(nèi)顯示的內(nèi)容遠(yuǎn)少于標(biāo)簽式推薦內(nèi)容；
2. 閱讀成本高，在伴隨頭像、圖標(biāo)、標(biāo)簽、輔助文案的情況下，用戶的閱讀視線需要多次跳轉(zhuǎn)；
3. 列表單元格內(nèi)空間利用率低，左右兩邊的間隙空間較大。

四、Tab欄

1. 設(shè)計(jì)樣式

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

2. 優(yōu)點(diǎn)

1. 展示信息維度廣，Tab 欄可以同時(shí)展示多維度的選項(xiàng)；
2. 用戶場(chǎng)景更加精細(xì)化，Tab 選項(xiàng)的分類將推薦內(nèi)容限定在范圍內(nèi)；
3. 引導(dǎo)性強(qiáng)，通過(guò) Tab 欄引導(dǎo)用戶選擇推薦內(nèi)容方向；
4. 信息展示效率高，通過(guò) Tab 切換展示不同緯度的推薦內(nèi)容。

3. 缺點(diǎn)

1. 交互成本高，需要用戶先點(diǎn)擊 Tab 欄再選擇具體的推薦關(guān)鍵詞；
2. 感染力弱，相比較圖片而言文字的感染力弱；
3. 操作門檻高，對(duì)于非主流用戶群體（幼兒、老年）識(shí)別成本高。

五、卡片式

1. 設(shè)計(jì)樣式

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

2. 優(yōu)點(diǎn)

1. 圖片自帶敘事性，感染力強(qiáng)，相比于文字更加吸引用戶的注意力；
2. 圖片視覺沖擊力強(qiáng)，識(shí)別成本低；
3. 展示信息全面，通常卡片中會(huì)包含圖片、標(biāo)簽、圖標(biāo)、輔助性文案等信息。

3. 缺點(diǎn)

1. 信息展示效率低，圖片面積占比過(guò)大；
2. 閱讀體驗(yàn)較差，標(biāo)題文字被弱化識(shí)別成本高；
3. 圖片容易造成理解偏差，相對(duì)于文字圖片傳遞的信息不夠精準(zhǔn)；
4. 維護(hù)成本高，需要找到和標(biāo)題釋義一致的圖片要耗費(fèi)較高的人力成本。

六、條件篩選

1. 設(shè)計(jì)樣式

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

2. 優(yōu)點(diǎn)

條件篩選優(yōu)勢(shì)：搜索指定內(nèi)容，范圍小、更加精準(zhǔn)；信息簡(jiǎn)潔、易識(shí)別。

3. 缺點(diǎn)

條件篩選缺點(diǎn)：交互成本高，想要精準(zhǔn)搜索先要點(diǎn)選搜索類型；視覺沖擊力弱，易被忽視；缺乏具像關(guān)鍵詞推薦，用戶無(wú)法直接點(diǎn)擊跳轉(zhuǎn)。

七、注意事項(xiàng)

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

例如網(wǎng)易云音樂中歷史搜索用的是標(biāo)簽式推薦，而熱搜榜則是用的列表式推薦。

因?yàn)闅v史搜索都是用戶主動(dòng)搜索的結(jié)果，所以不需要再加以贅述；而熱搜榜則是產(chǎn)品主動(dòng)推送給用戶的內(nèi)容，列表式推薦的話可以利用更多的空間添加推薦理由，刺激用戶點(diǎn)擊。

為了更好的顯示推薦的搜索信息，避免信息展示密度過(guò)大情況出現(xiàn)，我們可以借助交互來(lái)隱藏多余的信息內(nèi)容，避免給用戶造成較大閱讀負(fù)擔(dān)，同時(shí)能夠節(jié)省空間，更好引出下面的內(nèi)容，常見的形式有“點(diǎn)擊收放信息”和“滑動(dòng)交互”兩種方式。

例如淘寶和網(wǎng)易云音樂，淘寶的歷史搜索默認(rèn)顯示兩行，點(diǎn)擊展開顯示更早的歷史搜索標(biāo)簽；網(wǎng)易云音樂則是通過(guò)橫軸交互來(lái)顯示隱藏信息。

這樣的話可以有效的節(jié)省界面的空間，并能減輕用戶的閱讀成本。

八、畫重點(diǎn)

1. 想要提高推薦搜索內(nèi)容的信息展示率優(yōu)選標(biāo)簽式推薦；
2. 想要展示更全面的推薦信息優(yōu)選列表式推薦；
3. 想要全面多維度推薦優(yōu)選 Tab 欄推薦；
4. 想要增強(qiáng)感染力優(yōu)選卡片式推薦；
5. 想要精準(zhǔn)化搜索可以添加條件篩選；
6. 想要最大化的發(fā)揮搜索推薦的優(yōu)勢(shì)，可以選擇兩種形式相互搭配，取長(zhǎng)補(bǔ)短。

#參考鏈接#

如何設(shè)計(jì)出更懂用戶的搜索頁(yè)？https://zhuanlan.zhihu.com/p/51061379

本文由 @ 姜正 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議