【产品设计】TO B 搜索和筛选的多种使用场景

:随着B端项目越来越普及,企业也逐渐意识到产品的视觉效果、功能的好用性及用户体验的友好性等等。

在这里插入图片描述
最近B端一词在互联网中的呼声很高,对于B端和C端而言,面向的用户是不一样的,常用的硬件设备也有所区分,C端移动端偏多,B端则是网页端偏多,当然也会有移动端的B端项目。

而现在随着B端项目越来越普及,企业也逐渐意识到产品的视觉效果、功能的好用性以及用户体验的友好性等等,多方面地考虑一个产品的实现,从多维度做好产品,使用户使用达到能用性、好用性、易用性的效果。

B端项目更多的是针对实际业务情况而展开设计和研发的,所以一个需求的制定是会提前与对应的客户讨论,一个需求的开发是需要多次确认需求后而进行的。定制化开发的需求,对于用户来说,自己也会有一个预期的结果;而对于企业研发的普遍使用的B端项目而言,需求是需要通过用户调研以及市场调研等多方面考量。

今天我将会通过自身在工作中的实战经验,分享关于B端产品中的搜索以及筛选的不同使用场景,看似简单的功能,实际上也并不简单,下面我们一起来看看吧!

一、搜索和筛选的定义

搜索是用户指定任意条件(文本、语音等),平台对此条件进行检索后,展示对应内容。

筛选是平台为用户提供指定条件,用户可以选择查看符合一类或多类条件下的内容。
在这里插入图片描述

二、搜索的使用场景

搜索功能一般来说是用户在自己有目标的情况下,知道想要查询的目标(准确的目标或者模糊的目标),通过输入文本关键词实现查询目标。搜索的样式基本一致,只是在交互上会略有不同,使用的场景有两类。

1. 使用场景:在特定的页面搜索

特定的页面指的是在摸一个模块加入搜索的功能,例如在数据列表页面加入搜索的功能,搜索的目标只在该模块该内容中进行搜索,搜索的信息具有局限性,当然也是更加准确的搜索用户想要的目标信息。

案例分享:

下图是一个关于部门管理的列表页面,此页面加入了搜索的功能,搜索是通过输入部门关键词,这里的搜索有限定输入特定的字段信息,对于列表中的字段类型会有很多,在搜索的时候,可以通过控制某个字段或者某几个字段的信息来展开搜索。

交互场景01:搜索后面带有“搜索”按钮,代表输入关键词信息后,需要点击“搜索”按钮,列表中的数据才会发生变化,才会真正的搜索目标信息,这种情况对于列表数据多的情况下会采用。

交互场景02:搜索只有一个文本输入框,没有按钮可点击,这样的搜索交互是通过输入关键词后,列表中的信息会根据输入的关键词实时查询,搜索结果更快更及时,这种交互一般对于数据信息比较少的情况下会比较友好,加载的速度更快。
在这里插入图片描述

2. 使用场景:全局搜索

对于系统中模块分类较多,所涉及到的内容比较全面的,B端系统也会选择全局搜索,全局搜索在C端很常见,只需要在全局搜索框中输入自己模糊的目标信息,系统会根据输入的关键信息搜索出各个模块所对应的目标字段,如果分类较多,界面还可以根据分类tab分别归类不同模块的内容。

案例分享:

下图是一个关于B端系统全局搜索的界面,需求是根据关键词搜索出所有权责清单中的事项,界面中搜索框作为显眼的模块,通过输入的关键词搜索出所有带有关键词的事项,事项分别处于不同的清单,采用标签区分,因为此项目中只对不同清单中的事项做搜索,所以没有采用tab标签的形式。
在这里插入图片描述
带有tab分类的搜索结果案例也有很多,例如google、百度搜索,以及飞书里面的全文检索等等。
在这里插入图片描述
在这里插入图片描述

三、筛选的使用场景

我们最常见的筛选是给出特定的条件,用户直接选择对应的条件即可实现筛选,也就是现在常用的普通筛选,但是随着B端业务的复杂性逐渐增强,简单的筛选已经无法满足现在复杂的业务需求了,后面开始引进高级筛选的功能,在不同的需求情况下会选择采用不同的筛选模式,以便于更好地实现功能,满足用户的不同需求。

1. 普通筛选

普通的筛选是直接给出固定的条件,用户只需要选择一个条件或者多个条件,实现数据筛选的目的。所给的条件是数据中一些特定的值,是用户高频筛选的值,客户也会提出对某类条件进行筛选的功能,在B端项目中,这些筛选条件客户本身是更熟悉需求的,所以这类条件一般由客户提供。

案例分享:

如下图是关于人员管理的数据列表页面,页面中有“部门”和“状态”两个筛选条件,是通过点击出现下拉框出现对应的条件的值,当选中对应的条件值,列表中就会出现对应的目标值,这里的筛选和搜索功能是一起使用的,当然也可以单独分开使用,也是需要根据实际业务场景区分搭配使用搜索和筛选的功能。

注意:搜索和筛选多种功能同时使用时,需要考虑所过滤后的数据是求并集还是交集的问题。
在这里插入图片描述

2. 高级筛选

高级筛选是在基础筛选的基础上加入了自定义的功能,原理都是在特定的条件下选择目标值进行筛选,只是通过用户自定义需要添加的筛选的条件,这样的筛选方式更加灵活,可以满足很多复杂的筛选需求,并且一次开发,长久使用,后续新增筛选条件只需要在筛选中加入特定的条件即可,并且筛选的操作达到了一致性,操作位置集中管理,方便用户使用。

案例分享:

如下图(底部具体的清单详情页面我做了处理,不方便透露项目)在对应的功能模块添加一个筛选的按钮,点击筛选按钮出现设置筛选条件的下拉框,默认状态只有一个“添加条件”的按钮,点击“添加条件”上面会出现选择条件的框,会有不同的筛选值可选择,前后一一对应结果,且可以添加多个条件。

并且可选择|所选值包含与不包含的关系,在添加多个条件后,右上角有一个外加的筛选条件“符合以下——所有条件/任一条件”也就是对所设置的筛选的条件取值的关系,是选择取并集还是交集的。
在这里插入图片描述
这类高级筛选的实际案例中也有很多,例如飞书里面的筛选、黑帕云里面的筛选等等。

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

四、总结

在B端项目中,搜索和筛选基本上可以说是必不可少的功能,B端产品中大多数是对功能和数据的管理,数据一般会比较丰富,所以这两个功能常被使用。

随着B端业务的复杂性增强,传统的功能模式以及交互模式以及无法完全的满足现有的需求,所以需要在原来的基础上做更好的优化,使其更好的满足现有的需求,也是操作和管理更加简单,使开发更简单更容易维护。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/341946.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

java---多线程

多线程 线程:一个顺序的单一的程序执行流程就是一个线程。代码一句一句的有先后顺序的执行。 多线程:多个单一顺序执行的流程并发运行。造成"感官上同时运行"的效果。 并发: 多个线程实际运行是走走停停的。线程调度程序会将CPU运行时间划分为若干个时间片段并 尽可…

遍历子网所有ip地址,寻找空闲ip

在cmd窗口下输入如下代码: for /l %i in (1,1,255) do ping -n 1 -w 60 10.183.27.%i | find "Reply" >> d:\pingall27.log 得到如下结果 上图中,有reply的代表该IP已经被占用。但是观察红框中 22-->25之间缺少23 24 则说明23/24 是…

Python源码46:海龟画图turtle画坤坤

---------------turtle源码集合--------------- Python教程91:关于海龟画图,Turtle模块需要学习的知识点 Python源码45:海龟画图turtle画雪容融 Python源码44:海龟画图turtle,画2022卡塔尔世界杯吉祥物 Python教程…

90. 子集 II - 力扣(LeetCode)

题目描述 给你一个整数数组 nums ,其中可能包含重复元素,请你返回该数组所有可能的子集(幂集)。 解集 不能 包含重复的子集。返回的解集中,子集可以按 任意顺序 排列。 输入示例 nums [1,2,2]输出示例 [[],[1],[1…

生命在于学习——Firewalled学习

一、Firewalld是什么? Firewalld是一种动态防火墙管理器服务,相较于传统的静态防火墙管理工具iptables,它具有更多优势。Firewalld可以实现无需重新加载所有规则,只需保存和更新变更部分即可生效,从而减少对系统的影响…

Message queue 消息队列--RabbitMQ 【基础入门】

🎉🎉欢迎来到我的CSDN主页!🎉🎉 🏅我是平顶山大师,一个在CSDN分享笔记的博主。📚📚 🌟推荐给大家我的博客专栏《Message queue 消息队列--RabbitMQ 【基础入门…

FPGA高端项目:Xilinx Zynq7020 系列FPGA纯verilog图像缩放工程解决方案 提供3套工程源码和技术支持

目录 1、前言版本更新说明给读者的一封信FPGA就业高端项目培训计划免责声明 2、相关方案推荐我这里已有的FPGA图像缩放方案本方案在Xilinx Kintex7 系列FPGA上的应用本方案在Xilinx Artix7 系列FPGA上的应用本方案在国产FPGA紫光同创系列上的应用本方案在国产FPGA高云系列上的应…

【Linux】vim配置

我们普通用户打开未配置的vim的时候,和Windows中的vs界面差别很大,使用不是很便捷 这里我们可以配置一下vim,便于我们的操作 我们可以在gitee中搜索vimforcpp VimForCpp: 快速将vim打造成c IDE (gitee.com) curl -sLf https://gitee.com/HGt…

基于YOLOv8的目标识别、计数、电子围栏的项目开发过程

0 前言 用于生产环境中物体检测、识别、跟踪,人、车流量统计,越界安全识别 1 YOLOv8概述 YOLOv8 是Ultralytics的YOLO的最新版本。作为一种前沿、最先进(SOTA)的模型,YOLOv8在之前版本的成功基础上引入了新功能和改进,以提高性…

【Obsidian】【Git】使用gitee同步/保存obsidian笔记

Obisidian是一款markdown软件,使用它可以方便地记笔记、记录科研日常。然而如果在多个设备上使用obsidian,会牵扯到笔记/vault/仓库同步问题。下面来介绍如何用git管理obsidian。 1.创建gitee账号 略 2.下载Obsidian 略 3.新建git仓库 3.1在gitee上…

《WebKit 技术内幕》学习之九(1): JavaScript引擎

1 概述 1.1 JavaScript语言 说起JavaScript语言,又要讲一个典型的从弱小到壮大的奋斗史。起初,它只是一个非常不起眼的语言,用来处理非常小众的问题。所以,从设计之初,它的目标就是解决一些脚本语言的问题&#xff…

rancher和k8s接口地址,Kubernetes监控体系,cAdvisor和kube-state-metrics 与 metrics-server

为了能够提前发现kubernetes集群的问题以及方便快捷的查询容器的各类参数,比如,某个pod的内存使用异常高企 等等这样的异常状态(虽然kubernetes有自动重启或者驱逐等等保护措施,但万一没有配置或者失效了呢)&#xff0…

yum仓库和NFS文件共享服务

一、yum仓库简介: 1.yum仓库简介: yum是一个基于RPM包(是Red-Hat Package Manager红帽软件包管理器的缩写)构建的软件更新机制,能够自动解决软件包之间的依赖关系。解决了日常工作中的大量查找安装依赖包的时间 为什…

html 3D 倒计时爆炸特效

下面是代码&#xff1a; <!DOCTYPE html> <html><head><meta charset"UTF-8"><title>HTML5 Canvas 3D 倒计时爆炸特效DEMO演示</title><link rel"stylesheet" href"css/style.css" media"screen&q…

【Linux C | 进程】创建进程 | vfork函数+exec函数,以及system函数——文中很多C语言例子帮助理解

&#x1f601;博客主页&#x1f601;&#xff1a;&#x1f680;https://blog.csdn.net/wkd_007&#x1f680; &#x1f911;博客内容&#x1f911;&#xff1a;&#x1f36d;嵌入式开发、Linux、C语言、C、数据结构、音视频&#x1f36d; &#x1f923;本文内容&#x1f923;&a…

深入剖析Python最强大图片处理模块——Pillow

目录 一、引言 二、Pillow的功能与特点 三、Pillow的应用场景 四、代码示例 五、Pillow与其他图像处理库的对比 六、结论 一、引言 在Python中&#xff0c;Pillow是用于图像处理的最强大和最流行的库之一。它提供了丰富的功能&#xff0c;使得用户可以轻松地处理、编辑和…

【RT-DETR有效改进】 | 主干篇 | EfficientViT高效的特征提取网络完爆MobileNet系列(轻量化网络结构)

前言 大家好&#xff0c;我是Snu77&#xff0c;这里是RT-DETR有效涨点专栏。 本专栏的内容为根据ultralytics版本的RT-DETR进行改进&#xff0c;内容持续更新&#xff0c;每周更新文章数量3-10篇。 专栏以ResNet18、ResNet50为基础修改版本&#xff0c;同时修改内容也支持Re…

HTTPS基本概念

HTTP 与 HTTPS 有哪些区别&#xff1f; HTTP 是超文本传输协议&#xff0c;信息是明文传输&#xff0c;存在安全风险的问题。HTTPS 则解决 HTTP 不安全的缺陷&#xff0c;在 TCP 和 HTTP 网络层之间加入了 SSL/TLS 安全协议&#xff0c;使得报文能够加密传输。HTTP 连接建立相…

国家急救日倡议活动暨120急救大课堂公益培训在京成功举办

2024年1月20日&#xff0c;由国家卫生健康委员会等多个相关部门指导&#xff0c;中国医院协会急救中心&#xff08;站&#xff09;分会主办&#xff0c;北京急救中心承办的“国家急救日”倡议活动暨急救科普大课堂公益培训系列活动&#xff0c;在全国范围内启动。 健康中国行动…

Kotlin程序设计 扩展篇(一)

Kotlin程序设计&#xff08;扩展一&#xff09; **注意&#xff1a;**开启本视频学习前&#xff0c;需要先完成以下内容的学习&#xff1a; 请先完成《Kotlin程序设计》视频教程。请先完成《JavaSE》视频教程。 Kotlin在设计时考虑到了与Java的互操作性&#xff0c;现有的Ja…