這5種搜索頁面的樣式設計

用戶進行搜索的首要目的就是：快速找到自己想要的結果！

搜索頁面是用戶進行搜索的第一站，最理想的狀態就是用戶不用打字就能夠進行搜索，所以搜索頁承擔着增強用戶搜索效率的作用。

我們以線上產品進行歸納總結，看一下各個產品是通過什么方式為用戶提高搜索效率。

目錄

1. 搜索頁面的構成
2. 標簽式
3. 列表式
4. Tab 欄
5. 卡片式
6. 條件篩選
7. 注意事項
8. 畫重點

一、搜索頁面的構成

搜索頁面主要有三大部分構成：搜索框、推薦內容、鍵盤組成。

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

二、標簽式

1. 設計樣式

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

2. 優點

1. 信息簡潔，提取用戶最關注的核心關鍵詞；
2. 展示效率高，同比其他形式區域內展示標簽數量多；
3. 設計成本低，僅有關鍵詞和背景組成；
4. 通俗易懂，主要通過關鍵詞傳遞信息，用戶易接受。

3. 缺點

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

三、列表式

1. 設計樣式

列表式推薦內容在設計樣式一般由多個橫向列表單元組成，列表單元內主要分為“純文字”和“圖標+文字”兩種設計形式；

在細節上，由於列表在 Y 軸上可以無限延伸，所以在字體大小、列表單元格高度、圖標大小等設計細節各個產品暫無統一規律可循，設計上遵循各自產品的設計規范為主。

2. 優點

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

3. 缺點

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

四、Tab欄

1. 設計樣式

Tab 欄式推薦內容的設計頂部由頂部 Tab 選項和推薦列表組成，兩者有強烈的依附關系。在設計細節上通常會添加排名、標簽、圖標、二級文案等方式作為輔助性信息，用以增強用戶的點擊欲望。

2. 優點

1. 展示信息維度廣，Tab 欄可以同時展示多維度的選項；
2. 用戶場景更加精細化，Tab 選項的分類將推薦內容限定在范圍內；
3. 引導性強，通過 Tab 欄引導用戶選擇推薦內容方向；
4. 信息展示效率高，通過 Tab 切換展示不同緯度的推薦內容。

3. 缺點

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

五、卡片式

1. 設計樣式

卡片在設計上主要以圖片和標題文字組成，在設計細節上會添加標簽、圖標、推薦文案等輔助性信息。

2. 優點

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

3. 缺點

1. 信息展示效率低，圖片面積占比過大；
2. 閱讀體驗較差，標題文字被弱化識別成本高；
3. 圖片容易造成理解偏差，相對於文字圖片傳遞的信息不夠精准；
4. 維護成本高，需要找到和標題釋義一致的圖片要耗費較高的人力成本。

六、條件篩選

1. 設計樣式

設計上主要文字為主，部分產品也會添加圖標輔助用戶快速識別。

2. 優點

條件篩選優勢：搜索指定內容，范圍小、更加精准；信息簡潔、易識別。

3. 缺點

條件篩選缺點：交互成本高，想要精准搜索先要點選搜索類型；視覺沖擊力弱，易被忽視；缺乏具像關鍵詞推薦，用戶無法直接點擊跳轉。

七、注意事項

不同形式的推薦搜索內容在設計上都有各自的優缺點，選擇某一種形式取決於頁面當前承擔核心業務是什么，我們在實際設計當中可以有選擇的進行多種形式的搭配（最好不要超過兩種），取長補短。

例如網易雲音樂中歷史搜索用的是標簽式推薦，而熱搜榜則是用的列表式推薦。

因為歷史搜索都是用戶主動搜索的結果，所以不需要再加以贅述；而熱搜榜則是產品主動推送給用戶的內容，列表式推薦的話可以利用更多的空間添加推薦理由，刺激用戶點擊。

為了更好的顯示推薦的搜索信息，避免信息展示密度過大情況出現，我們可以借助交互來隱藏多余的信息內容，避免給用戶造成較大閱讀負擔，同時能夠節省空間，更好引出下面的內容，常見的形式有“點擊收放信息”和“滑動交互”兩種方式。

例如淘寶和網易雲音樂，淘寶的歷史搜索默認顯示兩行，點擊展開顯示更早的歷史搜索標簽；網易雲音樂則是通過橫軸交互來顯示隱藏信息。

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

八、畫重點

1. 想要提高推薦搜索內容的信息展示率優選標簽式推薦；
2. 想要展示更全面的推薦信息優選列表式推薦；
3. 想要全面多維度推薦優選 Tab 欄推薦；
4. 想要增強感染力優選卡片式推薦；
5. 想要精准化搜索可以添加條件篩選；
6. 想要最大化的發揮搜索推薦的優勢，可以選擇兩種形式相互搭配，取長補短。

#參考鏈接#

 轉載：http://www.woshipm.com/pd/2910340.html