你必须知道的5种搜索页面的样式设计

前言

用户搜索的目的是为了快速找到自己想要的结果！搜索页面则是用户进行搜索的第一站，最理想的状态就是用户不需要进行打字或者语音、扫描输入等交互操作，直接点选即可，所以搜索页中推荐内容承接着提高用户搜索效率的重任。我们通过对线上产品进行归纳总结分析，看一下各个产品是通过什么形式为用户提供便利，提高用户的搜索效率。

目录

1.搜索页面的构成

2.标签式

3.列表式

4.Tab 栏

5.卡片式

6.条件筛选

7.注意事项

8.画重点

1.搜索页面的构成

搜索页面主要有三大部分构成 : 搜索框、推荐内容、键盘组成。

FEVTE编注：更多平面设计理论学习请访问飞特网平面设计理论知识栏目，地址：https://www.fevte.com/plan/shejililun/

一般情况下搜索框内会默认带有推荐内容，主要以关键词的形式显示，右侧通会伴有辅助功能；推荐内容主要包括“历史搜索”和“热门推荐”两部分内容。底部的键盘通常也会伴随着辅助功能，例如语音、扫一扫等功能，例如淘宝和当当的键盘顶部功能：

2.标签式

a.设计样式

标签式推荐内容在设计形式一般有“文字”和“背景”组成，标签文字在 @2x 图下一般是 24px 大小，标签背景一般以浅灰色的圆角矩形为主。

b.优点

信息简洁，提取用户最关注的核心关键词；展示效率高，同比其他形式区域内展示标签数量多；设计成本低，仅有关键词和背景组成；通俗易懂，主要通过关键词传递信息，用户易接受。

c.缺点

展示信息密集，识别困难；展示信息单一，推荐理由不充分；缺乏感染力，单纯的文字卡片展示；位于顶部远离拇指区，操作不便。