当前位置:首页 >教程首页 > U I 设计 > AI+UX设计大师班 >搜索栏的设计逻辑是怎样实现的?

搜索栏的设计逻辑是怎样实现的?

发布时间:2020-11-11 11:44:46

推荐算法出现之前,寻找信息的主场景是通过搜索获取。

用户通过搜索框,输入目标的关键词进行查询。这一过程是用户的主动行为。

推荐算法出现之后,平台算法主动给用户想要的信息。寻找信息的方式,从用户的主动行为变成了被动接受行为。

用户不需要主动操作就轻易地获得想要的信息。

推荐算法越精准越成功,用户搜索行为就越低。

推荐算法的日益成熟并降低用户搜索的行为,搜索是如何逐步实现业务创新的?本文大纲如下:

1、搜索形态创新

2、搜索框入口创新

3、搜索词展示创新

搜索栏的设计逻辑是怎样实现的?

1、搜索形态创新

传统意义上的搜索功能都是通过输入关键词进行搜索。

为了减少用户输入,在搜索过程中,加入历史搜索记录。如下图所示:

搜索栏的设计逻辑是怎样实现的?

为了提升搜索功能的竞争力,在搜索页加入搜索发现或猜你喜欢的功能,这是推荐算法的加入帮助用户更好的找到想找信息。也有一些产品为了商业化收入,混杂着广告热词,如下图所示:

搜索栏的设计逻辑是怎样实现的?

为了增加更多用户感兴趣的点,排行榜的加入可以更大限度的触达用户感兴趣点。如下图所示。

搜索栏的设计逻辑是怎样实现的?

总结:随着搜索功能的迭代升级,搜索已经从单纯的搜索功能,逐步演化为通过推荐给用户推荐想找的信息,搜索中的承接页承担着搜索+推荐的使命,这样的搜索形态,只是为了让用户更加便捷找到想找的内容。

2、搜索入口创新

搜索入口,一共有4种设计形态。

①图标为入口

用户点击搜索图标,进入搜索页面,这种设计形式的入口,展示给用户的视觉呈现感最弱。如下图所示:

搜索栏的设计逻辑是怎样实现的?

这种入口设计,是Android设计指南比较提倡的,由于视觉感知弱,目前绝大部分产品均抛弃了这种入口形式,仅部分产品遵循Android规范在使用。

②搜索框为入口

如下图所示。通过展示搜索框,并通过提示语告知用户可在搜索框内搜索想要的信息。

搜索栏的设计逻辑是怎样实现的?

③搜索框+新闻/热搜词轮播

为了更加吸引用户,促使用户使用搜索功能,现在的产品通常都是在搜索框里面放置基于用户行为感兴趣(或最热)的词/新闻,促使用户看到后,触发搜索行为。

搜索栏的设计逻辑是怎样实现的?

④搜索框+新闻/热搜词轮播+搜索按钮

加入搜索按钮,是为了提升搜索功能的视觉抢点,由于传统PC端搜索,都是搜索框加搜索按钮,所以在移动端也加入搜索按钮,会使得搜索功能更加被用户所注意到。如下图所示。

搜索栏的设计逻辑是怎样实现的?

3、搜索词展示创新

搜索结果页,搜索词的展示有两种形态,一种是文本展示,另一种是标签展示。

①文本展示

文本展示是比较常见的设计。用户如果想要重新输入关键词,需要激活输入框,点击叉号图标,全部删除。

搜索栏的设计逻辑是怎样实现的?

②标签展示

用户只需要点击标签上的叉号,即可完成全部删除关键词。如下图所示:

10.png

标签展示的优点除了能快速删除外,还能添加多个关键词进行筛选。

总结:

本文主要是搜索形态创新、搜索框入口创新和搜索词展示创新以及其创新背后的逻辑。不涉及到搜索过程中的关键词匹配联想和搜索结果的设计。

(本文来源于微信公众号@Echo的设计笔记,作者:Echo)

学员作品赏析
  • 2101期学员李思庭作品

    2101期学员李思庭作品

  • 2104期学员林雪茹作品

    2104期学员林雪茹作品

  • 2107期学员赵凌作品

    2107期学员赵凌作品

  • 2107期学员赵燃作品

    2107期学员赵燃作品

  • 2106期学员徐正浩作品

    2106期学员徐正浩作品

  • 2106期学员弓莉作品

    2106期学员弓莉作品

  • 2105期学员白羽新作品

    2105期学员白羽新作品

  • 2107期学员王佳蕊作品

    2107期学员王佳蕊作品

专业问题咨询

你担心的问题,火星帮你解答

微信扫码在线答疑

扫码领福利1V1在线答疑

点击咨询
添加老师微信,马上领取免费课程资源

1. 打开微信扫一扫,扫描左侧二维码

2. 添加老师微信,马上领取免费课程资源

×

同学您好!

您已成功报名0元试学活动,老师会在第一时间与您取得联系,请保持电话畅通!
确定