人人彩票让分胜负规则

前言

用戶進行搜索的首要目的就是:快速找到自己想要的結果!搜索頁面是用戶進行搜索的第一站,最理想的狀態就是用戶不用打字就能夠進行搜索,所以搜索頁承擔著增強用戶搜索效率的作用。我們以線上產品進行歸納總結,看一下各個產品是通過什么方式為用戶提高搜索效率。

 

目錄

  • 搜索頁面的構成
  • 標簽式
  • 列表式
  • Tab 欄
  • 卡片式
  • 條件篩選
  • 注意事項
  • 畫重點

 

1.搜索頁面的構成

搜索頁面主要有三大部分構成:搜索框、推薦內容、鍵盤組成。一般情況下搜索框內會默認帶有推薦內容,右側會帶有輔助功能;推薦內容主要包括“歷史搜索”和“熱門推薦”兩部分內容;底部的鍵盤通常也會伴隨著輔助功能,例如語音、掃一掃等功能。

 

2.標簽式

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

 

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

 

缺點
標簽式推薦內容缺點:展示信息密集,識別困難;展示信息單一,推薦理由不充分;缺乏感染力,單純的文字卡片展示;位于頂部遠離拇指區,操作不便。

 

3.列表式

設計樣式
列表式推薦內容在設計樣式一般由多個橫向列表單元組成,列表單元內主要分為“純文字”和“圖標+文字”兩種設計形式,在細節上,由于列表在 Y 軸上可以無限延伸,所以在字體大小、列表單元格高度、圖標大小等設計細節各個產品暫無統一規律可循,設計上遵循各自產品的設計規范為主。

 

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

 

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

 

4.Tab欄

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

 

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

 

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

 

5.卡片式

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

 

優點
卡片推薦內容優勢在于:圖片自帶敘事性,感染力強,相比于文字更加吸引用戶的注意力;圖片視覺沖擊力強,識別成本低;展示信息全面,通常卡片中會包含圖片、標簽、圖標、輔助性文案等信息。

 

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

 

6.條件篩選

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

 

優點
條件篩選優勢:搜索指定內容,范圍小、更加精準;信息簡潔、易識別。

 

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

 

7.注意事項

不同形式的推薦搜索內容在設計上都有各自的優缺點,選擇某一種形式取決于頁面當前承擔核心業務是什么,我們在實際設計當中可以有選擇的進行多種形式的搭配(最好不要超過兩種),取長補短。
例如:網易云音樂中歷史搜索用的是標簽式推薦,而熱搜榜則是用的列表式推薦。因為歷史搜索都是用戶主動搜索的結果,所以不需要再加以贅述;而熱搜榜則是產品主動推送給用戶的內容,列表式推薦的話可以利用更多的空間添加推薦理由,刺激用戶點擊。
為了更好的顯示推薦的搜索信息,避免信息展示密度過大情況出現,我們可以借助交互來隱藏多余的信息內容,避免給用戶造成較大閱讀負擔,同時能夠節省空間,更好引出下面的內容,常見的形式有“點擊收放信息”和“滑動交互”兩種方式。
例如:淘寶和網易云音樂,淘寶的歷史搜索默認顯示兩行,點擊展開顯示更早的歷史搜索標簽;網易云音樂則是通過橫軸交互來顯示隱藏信息。這樣的話可以有效的節省界面的空間,并能減輕用戶的閱讀成本。

 

8.畫重點

1.想要提高推薦搜索內容的信息展示率優選標簽式推薦。2.想要展示更全面的推薦信息優選列表式推薦。

3.想要全面多維度推薦優選 Tab 欄推薦。

4.想要增強感染力優選卡片式推薦。

5.想要精準化搜索可以添加條件篩選。

6.想要最大化的發揮搜索推薦的優勢,可以選擇兩種形式相互搭配,取長補短。

 

參考鏈接:

如何設計出更懂用戶的搜索頁?
https://zhuanlan.zhihu.com/p/51061379

 

原文地址:海鹽社(公眾號)
作者:姜正

轉載請注明:學UI網 » 你必須知道的5種搜索頁面樣式

登錄收藏
 
你可能喜歡的:
原來折疊屏是這樣設計適配的(附案例實戰)原來折疊屏是這樣設計適配的(附案例實戰)
測試產品可用性的關鍵技巧——啟發式評估測試產品可用性的關鍵技巧——啟發式評估
Apple 的設計哲學 · UI 篇Apple 的設計哲學 · UI 篇
為什么它總是能讓你的界面變得不精致為什么它總是能讓你的界面變得不精致
橫滑or豎滑?教你如何選擇正確的交互方式橫滑or豎滑?教你如何選擇正確的交互方式
Material Design Component behavior 組件的適配Material Design Component behavior 組件的適配
移動端設計規范 — 操作類移動端設計規范 — 操作類
真正的設計達人,都知道這1種技巧真正的設計達人,都知道這1種技巧
產品體驗日記 | 發現優秀的設計-04期產品體驗日記 | 發現優秀的設計-04期
關于基金申購流程的一些思考關于基金申購流程的一些思考
?
人人彩票让分胜负规则 股票融资低于多少要强制平仓 宜人配资 福建11选5 七星彩 中首投资 趣富配资 电竞比分网666 球探体育比分4.8 黑龙江11选5 大连股票配资 股票配资余额 易宝配资 美牛配资 日本女优个人简历 日本一本道强奸电影 贵州11选5