中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

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

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

目錄

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

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

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

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

二、標簽式

1. 設(shè)計樣式

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

2. 優(yōu)點

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

3. 缺點

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

三、列表式

1. 設(shè)計樣式

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

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

2. 優(yōu)點

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

3. 缺點

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

四、Tab欄

1. 設(shè)計樣式

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

2. 優(yōu)點

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

3. 缺點

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

五、卡片式

1. 設(shè)計樣式

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

2. 優(yōu)點

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

3. 缺點

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

六、條件篩選

1. 設(shè)計樣式

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

2. 優(yōu)點

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

3. 缺點

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

七、注意事項

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

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

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

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

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

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

八、畫重點

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

#參考鏈接#

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

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

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