当前位置:肇兴新闻网科技这5种搜索页面的样式设计,你必须知道

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

以网络产品为例,作者总结了五种搜索页面设计风格,并与大家分享。

用户搜索的主要目的是快速找到他们想要的结果!

搜索页面是用户进行搜索的第一站,最理想的状态是用户无需键入即可进行搜索,因此搜索页面在提高用户搜索效率方面发挥了作用。

我们总结在线产品,看看每种产品如何提高用户的搜索效率。

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

在正常情况下,搜索框默认情况下会有推荐内容和右侧的辅助功能。推荐内容主要包括“历史搜索”和“热门推荐”。底部的键盘通常带有辅助功能,如语音和扫描。

标签类型的推荐内容通常由设计表单中的“文本”和“背景”组成。在@2x图形下,标签文本的大小通常为24px,标签背景通常为浅灰色圆角矩形。

列表式推荐内容一般由设计风格的多个水平列表单元组成,列表单元主要分为“纯文本”和“图标+文本”两种设计形式;

在细节方面,由于列表可以在Y轴上无限扩展,因此在字体大小、列表单元格高度、图标大小等设计细节方面没有统一的规则。设计主要基于每个产品的设计规格。

选项卡栏推荐设计的顶部由顶部选项卡选项和推荐列表组成,两者紧密相连。排名、标签、图标、二次拷贝和其他方法通常作为辅助信息添加到设计细节中,以增强用户的点击欲望。

卡片的设计主要由图片和说明组成,设计细节中将添加标签、图标和推荐文件等补充信息。

设计中以正文为主,有些产品还会添加图标来帮助用户快速识别。

条件筛选的优点:搜索特定内容,范围小,准确度高;信息简明易懂。

条件筛选的缺点:交互成本高,选择搜索类型是准确搜索的第一步;视觉冲击很弱,容易被忽略。缺少关键词推荐,所以用户不能直接点击跳转。

不同形式的推荐搜索内容在设计上各有利弊。选择某种形式取决于页面目前从事的核心业务。我们可以选择在实际设计中匹配各种形式(最好不超过两种),以相互补充。

例如,网易云音乐使用基于标签的推荐进行历史搜索,而热门搜索列表使用基于列表的推荐。

因为历史搜索是用户主动搜索的结果,所以没有必要重复它们。热门搜索列表是产品主动推给用户的内容。如果提出了列表推荐,它可以使用更多的空间来添加推荐原因并刺激用户点击。

为了更好地显示推荐的搜索信息,避免信息显示密度过高的情况,我们可以利用交互来隐藏多余的信息内容,避免给用户带来更大的阅读负担,同时可以节省空间,更好地引出以下内容。常见的形式是“点击并发布信息”和“幻灯片交互”。

例如,淘宝和网易云音乐。淘宝的历史搜索默认显示两行。单击展开显示早期历史搜索标签。网易云音乐通过横轴互动显示隐藏信息。

这样,可以有效节省界面空间,降低用户的阅读成本。

如何设计一个更好理解用户的搜索页面?https://zhuanlan.zhihu.com/p/51061379

这篇文章最初由@姜正发表,每个人都是产品经理。未经允许禁止复制。

主题地图来自unsplash,基于cc0协议。

  • 上一篇:风景美如画 这样的园林景观在渭南相当少见
  • 下一篇:房屋面积应该怎么算?多大的房屋面积够用?
  • 栏目资讯
    进击的京东方

    进击的京东方

    肇兴新闻网 · 2019-10-30 20:28:58
    当心!部分用户升级iOS 13.2变砖,苹果急抢救

    当心!部分用户升级iOS 13.2变砖,苹果急抢救

    肇兴新闻网 · 2019-11-22 08:21:37
    “小胖机器人”获5亿融资

    “小胖机器人”获5亿融资

    肇兴新闻网 · 2019-10-21 11:34:49
    价格实惠性能强,这几款高性价比手机了解下

    价格实惠性能强,这几款高性价比手机了解下

    肇兴新闻网 · 2019-11-03 08:23:18
    俄罗斯魔术师体验黑科技 看中国AI人工智能“变戏法”

    俄罗斯魔术师体验黑科技 看中国AI人工智能“变戏法”

    肇兴新闻网 · 2019-11-14 14:20:30
    iPhone 11全系列电池容量确认:最高3500mAh

    iPhone 11全系列电池容量确认:最高3500mAh

    肇兴新闻网 · 2019-11-08 10:20:48
    512GB大内存只是小意思,Redmi K20 Pro尊享版

    512GB大内存只是小意思,Redmi K20 Pro尊享版

    肇兴新闻网 · 2019-11-02 14:05:26
    B2B行业的CRM业务长啥样?

    B2B行业的CRM业务长啥样?

    肇兴新闻网 · 2019-10-24 15:29:49
    手机电量耗尽都为了看吃播!看人吃饭为什么这么火?

    手机电量耗尽都为了看吃播!看人吃饭为什么这么火?

    肇兴新闻网 · 2019-10-17 18:33:43
    手机充电的各种“黑历史”,现在终于可以翻篇了

    手机充电的各种“黑历史”,现在终于可以翻篇了

    肇兴新闻网 · 2019-11-11 09:30:32
    晚报:微信版“花呗”曝光 iPhone11配4GB内存

    晚报:微信版“花呗”曝光 iPhone11配4GB内存

    肇兴新闻网 · 2019-11-24 18:06:22
    8月空调市场月报:美的格力难分伯仲 海尔局部反超

    8月空调市场月报:美的格力难分伯仲 海尔局部反超

    肇兴新闻网 · 2019-11-06 12:11:46
    留学生租房痛点仍然明显,「Hooli 」从租房服务切入租房后

    留学生租房痛点仍然明显,「Hooli 」从租房服务切入租房后

    肇兴新闻网 · 2019-11-09 15:52:17
    这7样智能家居,我劝你想好了再买

    这7样智能家居,我劝你想好了再买

    肇兴新闻网 · 2019-12-20 20:05:09
    又一家日企引入中国无人店技术,日媒:力争实现“反攻”

    又一家日企引入中国无人店技术,日媒:力争实现“反攻”

    肇兴新闻网 · 2019-11-07 18:09:40
    4000万测试为何输给1600万

    4000万测试为何输给1600万

    肇兴新闻网 · 2019-10-24 19:07:26
    拒绝付费!照片、视频、资料存储自己说了算

    拒绝付费!照片、视频、资料存储自己说了算

    肇兴新闻网 · 2019-11-04 07:18:04
    经济学人全球早报:95后夜猫子报告,小米环绕屏手机,茅台市值

    经济学人全球早报:95后夜猫子报告,小米环绕屏手机,茅台市值

    肇兴新闻网 · 2019-10-25 18:03:27
    《到站秀》:华为 HUAWEI Mate 30 Pro 智能

    《到站秀》:华为 HUAWEI Mate 30 Pro 智能

    肇兴新闻网 · 2019-10-21 10:14:03
    蒋尚义率领武汉弘芯进军7nm?

    蒋尚义率领武汉弘芯进军7nm?

    肇兴新闻网 · 2019-11-02 11:16:32
    Copyright 2018-2019 kvsstudios.com 肇兴新闻网 Inc. All Rights Reserved.