您目前的位置:主页 > 香港旺角 >   正文

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

来源:本站原创发表时间:2019-10-06

  搜索页面是用户进行搜索的第一站,最理想的状态就是用户不用打字就能够进行搜索,所以搜索页承担着增强用户搜索效率的作用。

  我们以线上产品进行归纳总结,看一下各个产品是通过什么方式为用户提高搜索效率。

  一般情况下搜索框内会默认带有推荐内容,右侧会带有辅助功能;推荐内容主要包括“历史搜索”和“热门推荐”两部分内容;底部的键盘通常也会伴随着辅助功能,例如语音、扫一扫等功能。

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

  列表式推荐内容在设计样式一般由多个横向列表单元组成,列表单元内主要分为“纯文字”和“图标+文字”两种设计形式;

  在细节上,由于列表在 Y 轴上可以无限延伸,所以在字体大小、列表单元格高度、图标大小等设计细节各个产品暂无统一规律可循,设计上遵循各自产品的设计规范为主。

  Tab 栏式推荐内容的设计顶部由顶部 Tab 选项和推荐列表组成,香港神算33346开奖结果最快,两者有强烈的依附关系。在设计细节上通常会添加排名、标签、图标、二级文案等方式作为辅助性信息,用以增强用户的点击欲望。

  卡片在设计上主要以图片和标题文字组成,在设计细节上会添加标签、图标、推荐文案等辅助性信息。

  条件筛选缺点:交互成本高,想要精准搜索先要点选搜索类型;视觉冲击力弱,易被忽视;缺乏具像关键词推荐,用户无法直接点击跳转。

  不同形式的推荐搜索内容在设计上都有各自的优缺点,选择某一种形式取决于页面当前承担核心业务是什么,我们在实际设计当中可以有选择的进行多种形式的搭配(最好不要超过两种),取长补短。

  因为历史搜索都是用户主动搜索的结果,所以不需要再加以赘述;而热搜榜则是产品主动推送给用户的内容,列表式推荐的话可以利用更多的空间添加推荐理由,刺激用户点击。

  为了更好的显示推荐的搜索信息,避免信息展示密度过大情况出现,我们可以借助交互来隐藏多余的信息内容,避免给用户造成较大阅读负担,同时能够节省空间,更好引出下面的内容,常见的形式有“点击收放信息”和“滑动交互”两种方式。

  例如淘宝和网易云音乐,淘宝的历史搜索默认显示两行,点击展开显示更早的历史搜索标签;网易云音乐则是通过横轴交互来显示隐藏信息。


Copyright © 2002-2011 DEDECMS. 织梦科技 版权所有 Power by DedeCms

济公心水板| 小财神推荐四肖| 曾道人高手论坛| 香港马会开奖结果论坛| 香港马会蓝波红波绿波| 小龙女心水高手论坛| 香港马会开奖结果118| 通天报官方网站| 香港苹果报正版彩图| 六和釆平码公式计算|