美文网首页
搜索框倒底是什么东东,让我为伊消得人憔悴

搜索框倒底是什么东东,让我为伊消得人憔悴

作者: W燚鑫 | 来源:发表于2019-01-17 23:34 被阅读9次

一、根据业务需求定是否需要搜索功能

一个产品是否需要搜索功能取决于该产品的业务需求,大致分为不需要和需要两种状态。

搜索虽然是一个提升用户体验的利器功能,但是如果不考虑产品实际情况,不管什么App都增加搜索功能的话,首先会增加开发成本,其次会增加用户的理解成本和打乱用户使用的流程。

比如:Amazfit手表和摩拜这两款工具型App,两者都是搭配硬件使用的,旨在连接硬件并获得使用数据,数据和场景都比较单一,所以不需要搜索功能。

二、查找搜索功能

确定了产品需要搜索功能后,就进入到下一个环节的设计,如何让用户找到搜索功能。搜索框的入口一般有几种:一级tab、搜索框、搜索icon、隐藏式搜索框。

1. 快速找到

以内容类产品为主的APP,千万不要尝试因为追求差异化(图二),而把搜索功能放在页面的其他角落,这绝对是是一个失败的产品。

2. 快速识别

在用户潜意识的位置中放置搜索功能,还有一个要求是降低用户的识别成本,让用户一眼就能看出是搜索功能,而不用经过判断。

搜索框的样式总的来说有矩形和圆角两种,配合内部默认文案,有多种组合。

三、进入搜索功能

图一 图二 图三

进入搜索功能主要指的是用户发现并点击搜索功能后的交互及页面,虽然各种类型的App有所区别。

但是大致也分为两种:

        一是进入新的页面;

        二是在当前页面进行搜索。

四、使用搜索功能

1. 推荐内容

推荐内容包括几个方面,搜索框置灰关键词,页面显示的历史搜索,热搜词以及提前搜索并展示的内容。在搜索页面放置历史搜索和热搜词是大部分App最常用的方式,比如:内容类和电商类产品。

热搜词是根据算法展示搜索次数最高的关键词,对于进入搜索页面但没有强目的的用户来说,热搜词可以降低用户思考成本,提高产品/内容的查看次数,但是一定要注意热搜词的更新算法,热搜词本身就有引流的功能,如果单独按照搜索次数来决定是否上热搜,会出现热搜词榜非常稳定的情况。

2. 搜索方式

在输入搜索内容时关键词匹配有两种处理方式:一个是输入过程匹配;一个是输入完成匹配。

输入过程匹配:在输入时,每输入一个字符,就进行一次匹配,同时更新页面信息。这里更新的信息,可以是针对输入内容进行推荐的信息,也可以是搜索结果。

这种方式可以对搜索结果做出即时反馈,引导性强,效率非常高,但是输入过程匹配对于计算能力要求比较高,可以根据自己的产品和实际情况考虑是否需要此功能,否则需要加载等待,影响体验。

输入完成匹配:仅在输入完成后,点击【搜索】按钮时,才开始进行搜索、匹配,直接展示搜索结果。这种方式省去了对输入过程实时分析、引导的过程,适用于对搜索功能要求不高的情况。类似的产品如起点学院,输入关键词后不会做出反馈,需要执行搜索才会展示相关内容。

3. 搜索/取消按钮

搜索按钮一般放置在搜索框的右侧,那么左侧就一定会保留返回icon,这样才能正常实现App的跳转路径。这种方式虽然比较规矩,同时减少输入框可显示的字符长度,但是用户识别成本会降低很多,返回和搜索按钮非常明确。

五、得到搜索结果

先分类再搜索有个很明显的特征就是搜索目的明确,用户已经自己想要查找什么样的内容。比如:Boss直聘这款产品,用户在使用搜索功能时,会非常明确的知道自己想要搜索的信息维度,所以先分类再搜索可以提高搜索准确率,减少用户搜索后筛选的成本。

先搜索再分类则可以减少用户使用搜索功能的成本,但是会增加对结果筛选的难度。

这种方式对于用户无目的搜索的体验会更好,一般多见于电商、知识类等信息和分类明确的产品中,比如:知乎的搜索逻辑,就是先根据搜索词匹配结果,展示所有信息,提供用户、话题、想法、专栏等分类搜索切换。

近期整改项目,参考了原文连接作者的总结,等不忙了再好好转化自己的思维复盘下,感激作者让我有了更新的认识,对于搜索框开始学习交互及用户体验方面的知识体系,慢慢总结中

参考链接:https://www.jianshu.com/p/384386860229

相关文章

  • 搜索框倒底是什么东东,让我为伊消得人憔悴

    一、根据业务需求定是否需要搜索功能 一个产品是否需要搜索功能取决于该产品的业务需求,大致分为不需要和需要两种状态。...

  • 目标

    我今天要意识的点是—— 倒底什么样目标才可以让我心甘情愿,义无反顾呢? 倒底是什么样的目标才可让我放下所有其他的杂...

  • 艾灸,倒底是什么

    艾灸过的人,认可艾灸的人,都会不由自主地爱上艾灸。很多艾友知道身体舒服了,疾患好了,但是不清楚为什么。 从没试过艾...

  • jsp局部刷新

    以防大家不懂下面的拙劣代码是个什么东东,我先说一下这个思路。我在页面上需要局部刷新一个表格,这个表格是根据搜索框点...

  • 搜索框控制器问题总结

    最简易的搜索框控制器 设置搜索框uisearchBar的背景色 设置搜索框弹出的背景色 去掉搜索框的黑线 修改光标颜色

  • 子类控件-快捷代码

    按钮 搜索框 点击跳转 搜索框 点击搜索 KVO 保存图片 判断viewLoad是否加载 for 循环

  • 《蝇王》 ——人性倒底是什么?

    在文学作品里,有很多关于荒岛生存的故事,但在大多数这类的故事中,总是讲人们如何团结并战胜恶劣的环境从而被救。《蝇王...

  • 搜索框

    #import "RootViewController.h" //编辑搜索框需要遵守两个协议: //UISearc...

  • 搜索框

    来一张效果图看看,在这里不能传视频,(鼠标放置时,搜索框变长,背景颜色改变): 先来看一下HTML代码,很简单,就...

  • 搜索框

    https://my.oschina.net/u/2340880/blog/509756 (搜索框的详细属性方法)...

网友评论

      本文标题:搜索框倒底是什么东东,让我为伊消得人憔悴

      本文链接:https://www.haomeiwen.com/subject/mcnwdqtx.html