B端ui设计文章及欣赏 - 设计每日一贴-专注优秀UI设计与软件开发-北京兰亭妙微

首页

262024-4

【万字干货】B端进阶｜表格数据过滤分析

一、为什么需要数据过滤

在B端（Business to Business，即企业对企业）应用中，表格数据过滤功能是一项非常重要的功能。它能够帮助企业用户更方便地管理和查询表格数据，提高工作效率和数据准确性。因此一个体验感良好的数据筛选功能有助于用户的任务处理效率。帮助系统更加友好、易用，从而增加用户的满意度和使用频率。

在确定过滤类型之前，首先，需要确定哪些字段需要进行筛选。这需要根据业务需求和用户习惯来确定。例如，在销售系统中，可能需要对产品名称、销售日期、销售数量等字段进行过滤；在人力资源系统中，可能需要对员工姓名、部门、职位等字段进行过滤。

二、数据过滤的类型

根据确定的过滤条件，需要设计合适的过滤方式。常见的过滤方式包括：1）搜索；2）页签导航；3）条件筛选。不同类型的过滤方式对应不同的用户目标及数据特点

三、搜索

搜索是一种通过输入关键词或短语在大量数据中寻找相关信息的过程。在互联网时代，搜索已成为获取信息的主要途径之一。通过搜索引擎，用户可以快速地找到自己需要的内容。

3.1 搜索类型

3.1.1 单条件模糊搜索

介绍：用户在搜索框中输入一个关键词，然后搜索引擎返回与该关键词相关的结果。

优点

：简单易用，用户只需要输入一个关键词即可快速找到相关信息；
缺点

：搜索方式可能不够精确，因为用户可能没有提供足够的上下文信息，导致搜索引擎返回的结果与用户的期望不符

3.1.2 多条件模糊搜索

介绍：指用户在搜索框中输入或选择多个关键词，然后搜索引擎返回与这些关键词都相关的结果。可选择是后台配置查询条件还是用户配置。

优点

：更加精确，因为用户提供了更多的上下文信息，可以帮助搜索引擎更好地理解用户的意图；
缺点

：需要用户输入更多的关键词，增加了用户的输入成本。

3.1.3 搜索条件切换

介绍：指用户在搜索框中输入一个关键词后，可以手动切换到另一个关键词进行搜索。

优点

：灵活性和自由度更高，用户可以根据自己的需要随时切换关键词进行搜索；
缺点

：需要用户手动操作，增加了用户的操作成本。

3.2 触发方式

3.2.1 实时触发

介绍：实时触发是指当用户在搜索框中输入关键字时，搜索功能会立即进行匹配并返回相关结果。这种触发方式可以为用户提供实时的搜索体验，方便用户快速找到所需信息。通常需要后端服务器的支持。

优点

：当用户在搜索框中输入文字时，搜索功能会立即提供搜索结果。这种方式可以提供快速反馈，让用户更快地找到所需信息。此外，实时触发搜索还可以帮助用户逐步缩小搜索范围，提高搜索效率。
缺点

：可能会对服务器造成较大的负担，因为每次用户输入都会触发一次搜索请求。其次，实时触发搜索可能会干扰用户的输入过程，因为用户需要不断地观察搜索结果并根据结果进行调整。

3.2.2 手动触发

介绍：指用户需要手动触发搜索功能，通常是通过点击搜索按钮或按下回车键来执行搜索操作。这种触发方式可以避免用户在输入过程中频繁触发搜索，提高用户体验

优点

：用户需要点击一个搜索按钮或使用特定的快捷键才能触发搜索功能。这种方式可以减少对服务器的负担，并且不会干扰用户的输入过程。
缺点

：可能会让用户感到不便，因为他们需要手动触发搜索功能。此外，如果用户忘记触发搜索功能，他们可能会浪费时间在输入过程中。

3.3 理解用户的搜索意图

提高用户的搜索效率和满意度。通过提供相关的关键词建议和展示之前的搜索历史，搜索引擎可以帮助用户更快地找到所需信息，并减少用户的搜索时间和成本。此外，这些功能还可以增加用户的忠诚度和满意度，因为它们能够提供更加个性化和智能化的搜索体验。

3.3.1 关键字联想

介绍：用户在输入一个关键词时，搜索引擎能够自动推荐与该关键词相关的其他关键词，以帮助用户更快地找到所需信息。

3.3.2 搜索历史

介绍：记录了用户之前搜索过的关键词和搜索结果，以便用户在以后的搜索中更快地找到之前查找过的信息。

四、导航

使用场景：标签切换一般用于和时间、状态的流转有关，且没有交集的数据内容；主要样式有基础、卡片、胶囊等。

4.1 页签导航（tabs）

通过点击不同的标签页来切换不同页面或视图的功能。在许多应用程序中，页签导航可以帮助用户快速地找到自己需要的功能或页面。例如，在浏览器中，页签导航可以帮助用户同时打开多个网页，并在不同的标签页之间进行切换。

优点：

直观易用：页签导航简单明了，用户可以快速理解并使用

节省空间：页签导航可以在有限的屏幕空间内展示多个页面或部分内容，提高了页面的利用率。

便于浏览：用户可以通过页签快速切换到不同的页面或内容，提高了浏览效率。

缺点：

导航深度限制：页签导航通常只适用于一级或两级导航，对于多级导航可能会显得过于复杂。

内容展示限制：由于页签的空间有限，可能无法展示所有需要的内容，需要用户点击后才能查看全部内容。

4.2 卡片导航

优点：

内容丰富：卡片导航可以展示更多的内容和信息，用户可以通过卡片了解更多详情

直观性强：卡片导航以视觉化的方式展示内容，更加直观和易于理解

交互性强：用户可以通过滑动或点击卡片进行操作，增强了交互性和体验感

缺点：

占用空间大：卡片导航需要占用更多的屏幕空间，可能会影响页面的整体布局和美观度；

操作复杂度较高：对于一些用户来说，卡片导航的操作可能会比较复杂，需要一定的学习成本

五、条件筛选

筛选是一种对搜索结果进行过滤和排序的过程，以便用户能够更快地找到自己需要的信息。筛选可以根据不同的标准进行，例如相关性、时间、重要性等。在许多应用程序中，筛选功能可以帮助用户缩小搜索范围，提高搜索效率。

5.1 页面布局

5.1.1 上下布局

特点：筛选条件和表格数据分别位于页面上方和下方，用户可以逐行查看数据，同时看到筛选条件。

使用建议：适用于筛选条件较少，且数据量较大的情况。用户可以快速浏览数据，同时方便对筛选条件进行修改。

5.1.2 左右布局

特点：筛选条件和表格数据分别位于页面左侧和右侧，用户可以同时看到筛选条件和数据。

使用建议：适用于筛选条件较多，且数据量较小的情况。用户可以在筛选条件和数据之间进行快速切换，提高操作效率。

5.1.3 浮层（弹窗/抽屉）

特点：仅展示筛选图标按钮，以浮层形式呈现。可以在当前页面的上方或侧边以浮动的形式展示，不会占用太多页面空间。

使用建议：当页面的空间利用率要求比较高，非高频操作场景时可使用浮层的模式，节省页面空间。

5.2 筛选类型

B端表格的筛选类型主要有平铺式、收折式和下拉式三种：

5.2.1 平铺式

介绍：平铺式是将所有筛选项罗列出来平铺在页面上，可以兼容多种数据格式，如数字、文本、标签、枚举值、布尔值等，包含但不限于日期选择期、标签切换、单选框、复选框等多种控件。

优点

直观明了：平铺式筛选将所有选项平铺展示，方便用户快速找到所需选项；

易于操作：平铺式筛选通常采用简单的点击或拖拽操作，方便用户进行筛选。

缺点

占用空间较大：平铺式筛选需要展示所有选项，因此可能会占用较多的页面空间；

不适合大量选项：如果选项数量过多，平铺式筛选可能会显得拥挤，影响用户体验。

使用建议

适用于选项数量适中的情况：平铺式筛选适合选项数量适中，且用户需要直观看到所有选项的情况；

可以结合其他筛选方式：如果选项数量过多，可以考虑结合其他筛选方式，如收折式筛选或表单式筛选。

5.2.2 收折式

介绍：收折式筛选通常以收折的状态展示筛选条件，只有在用户触发搜索后才会完全展开。一般筛选条件少于6个，可以通过1行或者2行展示筛选项的结果。

优点

节省空间：收折式筛选可以将不常用的选项折叠起来，节省页面空间；

易于查找：收折式筛选通常会提供搜索或筛选条件，方便用户快速找到所需选项。

缺点

操作相对复杂：收折式筛选需要用户展开或折叠选项，操作相对复杂一些；
不适合所有场景：如果用户需要直观看到所有选项，或者需要快速筛选大量选项，收折式筛选可能不太适合。

使用建议

适用于选项数量较多的情况：收折式筛选适合选项数量较多，且用户需要节省页面空间的情况；

可以结合其他筛选方式：如果用户需要直观看到所有选项，或者需要快速筛选大量选项，可以考虑结合其他筛选方式，如平铺式筛选或表单式筛选。

5.2.3 表单式

介绍：表单式是在系统中页面中的筛选区设置下拉筛选条件，用户通过下拉选择筛选条件中的值对数据进行筛选操作。当然筛选区中可能除了下拉选择之外还有输入筛选，下拉筛选和数据筛选共同组成筛选区。

优点

直观明了：表格形式的筛选方式可以让用户直观地看到各个字段和对应的数据，方便用户进行对比和筛选；

操作简单：用户可以通过简单的点击、输入等方式进行筛选，操作简便，提高了筛选效率；

灵活性高：表格形式的筛选方式可以支持多种筛选条件和筛选方式，用户可以根据自己的需求进行筛选，灵活性较高。

缺点

界面拥挤：如果表格中的字段较多，会导致界面拥挤，影响用户的使用体验；

数据量大时筛选性能不佳：对于大量数据，表格形式的筛选方式可能需要较长时间才能得出结果，影响筛选效率；

不易展示复杂数据关系：表格形式的筛选方式更适合展示简单的数据关系，对于复杂的数据关系可能难以直观地展示。

使用建议

根据实际需求选择筛选方式：在选择筛选方式时，需要根据实际需求和数据量的大小来选择适合的筛选方式。对于简单的筛选需求，可以使用表格形式的筛选方式；对于复杂的筛选需求，可能需要考虑使用其他筛选方式，如条件语句等；

优化表格布局：为了提高用户的使用体验，可以对表格的布局进行优化，如对字段进行排序、隐藏不必要的字段等；

限制筛选条件数量：为了提高筛选效率，可以限制用户可以设置的筛选条件数量，避免过多的筛选条件导致筛选性能下降。

5.2.4 浮层弹出式

介绍：页面中仅展示筛选按钮，点击后以气泡或抽屉的方式去承载筛选内容。

优点

用户友好：浮层式的筛选条件提供了一种直观的方式来展示筛选选项，用户可以轻松地查看和选择，无需在页面之间切换或变动页面布局；

节省空间：通过将筛选条件放在浮层中，主页面可以保持简洁，不受到过多的干扰元素影响，同时也可以避免筛选条件过多导致的页面拥挤；

灵活性高：浮层式的筛选条件可以方便地调整和修改，以适应不同的筛选需求和业务变化。

缺点

可能会引起混淆：如果用户不熟悉这种交互方式，可能会对浮层式筛选条件感到困惑，需要额外的引导和说明；

可能会影响用户体验：浮层式的筛选条件需要用户手动关闭或选择选项，如果操作不够便捷或流畅，可能会影响用户体验；

可能会影响页面性能：如果筛选条件过多或数据量较大，浮层式的筛选条件可能会导致页面加载速度变慢，影响用户体验。

使用建议

提供清晰的引导：在应用中使用浮层式的筛选条件时，需要提供清晰的引导和说明，帮助用户更好地理解和使用；

优化关闭和选择操作：为了提高用户体验，需要优化筛选条件的关闭和选择操作，使其更加便捷和流畅；

考虑数据量和性能：在应用中使用浮层式的筛选条件时，需要考虑数据量和页面性能等因素，采取相应的优化措施。

5.2.5 表头筛选

介绍：位于表格表头区域，每一列表头可做单列筛选，也可多列同时筛选。

优点

直观明了：表头筛选将筛选条件直接展示在表格的表头位置，方便用户直观看到所有可用的筛选条件；

提高效率：表头筛选可以减少用户的操作步骤和时间成本，提高筛选效率。

缺点

适用范围有限：表头筛选通常适用于简单的单字段筛选或单列筛选，对于多字段或多列的复杂筛选需求可能不太适用；

可能影响表格美观度：在表格中添加多个表头可能会影响表格的美观度，需要权衡设计和用户体验之间的平衡。

使用建议

适用于简单筛选需求的情况：表头筛选适合简单的单字段或单列的筛选需求，如根据姓名、性别等进行筛选；

可以结合其他筛选方式：如果用户需要复杂的筛选需求，可以考虑结合其他筛选方式，如平铺式、收折式或表单式等。

5.2.6 已选条件

介绍：将已经录入的条件展示在查询条件的下方，可快速删除

优点

用户体验：显示已选条件可以帮助用户更好地理解筛选结果，提高用户体验。用户可以直观地看到哪些条件已被选中，从而更好地理解数据的筛选结果；

可视化效果：在筛选区显示已选条件，可以增强表格的可读性和可视化效果。筛选条件的显示可以提供一种直观的方式，帮助用户更好地理解数据和筛选结果；

筛选灵活性：如果筛选区显示已选条件，用户可以根据需要轻松地修改或删除已选条件，提高筛选的灵活性；

筛选逻辑清晰度：通过显示已选条件，用户可以更好地理解筛选的逻辑。这有助于用户更好地理解数据之间的关系和关联，提高数据分析的准确性；
筛选操作效率：对于大量数据的筛选，显示已选条件可以帮助用户更快地定位和调整筛选条件，提高筛选操作效率。

六、优化过滤性能

表格过滤是用户在处理大量数据时常用的功能之一。如果过滤性能不佳，用户需要等待很长时间才能看到结果，这将严重影响用户体验。优化表格过滤性能可以减少用户等待时间，提高用户体验。

6.1 索引优化

通过创建索引来提高查询过滤的效率。通过创建模版的方式更快地定位到特定的数据行，通过创建合适的索引，可以显著减少查询过滤所需的时间，提高查询性能。

6.1.1 查询条件模版

将常用的查询方案保存为模版，通过快速切换模版的方式批量替换查询条件，达到快速查询的效果，方便用户快速筛选出所需的数据。

6.1.1 查询值模版

将常用的查询方案连同值一起设置为模版，在下次切换查询方案时，自动根据预置的值进行自动查询，查询结果保存至浏览器，方便下次调用。

6.2 缓存机制

介绍：（浏览器前端）将已经过滤过的数据缓存起来，避免重复查询。

6.3 分页加载

介绍：采用分页加载的方式，减少一次性加载的数据量，提高加载速度。

七、总结

在本文中，我们探讨了B端表格数据过滤功能的类型和实现。通过了解用户需求和使用场景，我们提出了表格数据过滤方案。以上方案需要结合实际场景合理配置和选择。同时，我们还介绍了表格数据过滤的实际案例，以及一些性能优化技巧。通过实际应用案例的展示，证明了以上方案的有效性和实用性。

在未来的工作中，我们可以进一步探索表格数据过滤功能的扩展和优化。例如，可以增加对异步数据的支持，提高表格数据的实时性；还可以引入机器学习算法，实现智能过滤和推荐功能。此外，我们还可以考虑与其他系统的集成和交互，以实现更广泛的应用。

总之，B端表格数据过滤功能是提高数据处理效率和准确性的重要工具。通过不断优化和完善该功能，我们可以更好地满足用户需求，提升用户体验，为B端业务的发展提供有力支持。

蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。

关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司

银行金融软件 UI界面设计、能源及监控软件 UI界面设计、气象行业 UI界面设计、轨道交通界面设计、地理信息系统 GIS UI界面设计、航天军工软件 UI界面设计、医疗行业软件 UI界面设计、教育行业软件 UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发

作者：姚_Yale
链接：https://www.zcool.com.cn/article/ZMTYwNTc0OA==.html
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

评论(0) 浏览(442)

252024-4

B端基础 | 聊聊B端基础设计知识

前端达人

这篇文章应该是最初先写的。只是在我开始写的时候没有想过自己会把这个系列的文章写完。现在基本写完了。总觉得缺了一篇开始的文章。所以做一件事总要圆满的所以现在把这篇文章补上来。希望能够帮助你。

1、B端设计

资深B端体验设计师、当然也是一步一步走过来的。这几年因为多方面的原因、B端设计比较吃香了。这一现象从我刚工作到现在薪资翻了几倍意识到了。这个细分类别有搞头吗、我觉得可能有吧。至少我现在还在这里面狗刨。设计狗嘛、刨才是正常的。

1.1、什么是b端设计

如果你不了解B端设计是什么那我来给你讲一下。这个B是Business的缩写、他的意思是商业。所以b端设计就是面向企业和商业用户的界面设计。

1.2、b端设计的价值

做为B端设计师、你有没有想过我们的价值体现在哪里。当我们明白这个的时候我们的工作才能更好的开展，更好的为我们产品提供一份力量。

1.2.1、视觉设计与交互体验优化

通过精心设计的视觉语言和信息布局，增强信息传达的清晰度和效率，确保品牌形象的统一，提升用户对产品的认知和接受度。

优化用户与系统的交互流程，去除冗余步骤，提高操作便捷性，降低用户学习成本，提升工作效率。

1.2.2、建立与维护设计规范

为B端产品搭建一套强大且统一的UI设计规范，确保不同模块、不同版本之间的视觉一致性，提升用户体验，同时也方便团队协作和后续迭代。

1.2.3、业务流程优化与降本增效

B端设计师深入理解业务流程，通过设计手段对现有工作流程进行梳理、简化或自动化，消除冗余环节，提高业务执行效率，帮助企业降本增效。

1.2.4、降低研发成本

建立标准化的设计规范和可复用的设计组件库，能够显著提高设计和开发的一致性、效率和质量，减少重复劳动，缩短产品研发周期，降低整体的研发成本。

不仅对外部客户产品进行设计，B端设计师还会为内部各种支持系统制定设计规则，通过构建适用于多个应用系统的统一设计规范，实现跨部门、跨项目的研发效能提升。

1.2.5、丰富的专业知识助力快速落地

凭借丰富的经验和深厚的专业知识，B端设计师能在面对复杂项目时，迅速提炼出适用的设计模型作为参照，确保设计方案的准确性和落地可行性，避免设计偏差导致的返工或项目延期。

2、B端设计和C端有什么区别

我个人感觉B端C端的区别是很大，但是C端设计师如果转B端还是相对很轻松的一件事。只要完善一下自己对B端业务的理解哪里。产品的使用场景的熟悉和对设计目标的改变就行。毕竟现在B端C化的趋势很明显。他们具体的区别也很明显。

2.1、C端

严格意义的说对于我来说并没有做过太多的C端项目。基本都是在B端项目中可能会设计到C端的产品或者项目做一些。也只是做过几个小的APP和小程序。

C端设计（Consumer-to-Consumer Design），即面向消费者的设计，主要关注的是直接服务于大众用户的产品或服务的用户体验设计。

2.2、BC的区别

C端产品和B端产品的使用场景导致了需求差异。C端产品，解决的是用户在生活场景中的需求痛点；B端产品服务于组织，组织的需求不是从单个用户需求点出发，而是一种生产关系的连接和延伸。

2.2.1、目标用户

B端面向的是企业或组织等机构用户，而C端则是面向广大普通消费者用户。

2.2.2、行业与场景

B端业务场景复杂，角色多且业务场景也多，不同行业不同客户需要不同的专业解决方案。而C端业务场景和业务逻辑则相对简单，流程也较为标准化。

2.2.3、盈利模式

B端多以项目招投标进行单次或持续性收费，也可能通过提供SaaS解决方案收费，如果有额外的定制化需求，还需再付费。C端则通常是通过广告变现、增值服务、佣金抽成等方式盈利。

2.2.4、产品设计

B端产品设计以业务为中心，目标是提升效率、降低成本、控制风险等，需要考虑不同角色的需求，且更注重实用性和服务性。C端产品设计则以用户为中心，目标是让用户充分使用产品，更注重用户体验和产品创新。

3、我们应该具备什么能力

上面我们说了我们作为设计师我们的价值都在那些方面。那我们想要完成这些价值，那么我们一定要有相应的能力。B端设计通常更侧重于效率、可扩展性、数据可视化和复杂工作流程的支持。能力够了你到哪里都会发光发亮。每个B端设计师都是小半个产品经理。加油设计师。

3.1、应具备的能力

由于B端业务和逻辑相对复杂。B端设计师需要具备深厚的业务理解力、强大的逻辑组织能力、出色的数据可视化技巧、良好的技术素养，以及出色的协作与沟通能力，以应对B端产品设计的复杂性和专业化需求。

3.1.1、深入理解业务流程

熟悉企业内部运作逻辑，能够解析复杂的业务规则和工作流程。能够与业务专家、产品经理紧密协作，准确把握用户角色、权限层级、任务目标和痛点。

3.1.2、用户研究与测试

运用用户调研、访谈、问卷调查等方法，了解企业用户的真实需求和使用场景。设计并执行可用性测试，评估设计方案的效果，持续迭代优化。

3.1.3、设计规范

遵循企业级设计语言和品牌指南，确保设计的一致性和专业性。

3.1.4、组件化与模块化设计

掌握组件化设计原则，创建和维护一套适用于B端产品的UI组件库，确保界面一致性与开发效率。能够设计可复用、可配置的模块，适应不同企业用户的定制化需求。

3.1.5、数据敏感与数据可视化设计

理解数据在企业决策中的重要性，擅长设计各类数据报表、仪表板和数据分析工具。能够运用图表、表格、图形等元素，将大量复杂数据转化为易于理解和行动的可视化信息。

3.1.6、持续学习与行业洞察

关注B端设计趋势、新兴技术（如AI人工智能、低代码/无代码平台等）及其对设计的影响。不断更新知识结构，提升自身在特定行业（如金融、医疗、供应链等）的专业素养。

3.2、如果持续学习

我持续学习的方法其实还挺简单的、看大厂的项目总监。在项目做完后自己做复盘做总结。然后不断的沉淀做输出。用输出来倒逼输入。关注新的知识、如最近一年爆火的AI技术。

还有就是和大牛交流学习。

4、常见的一些系统介绍

身为B端人我们要了解我们会做到那些系统的设计工作。在过往的工作经历是我做过、SaaS、OA、CRM、后台管理系统等。那还有那些B端系统呢。这里我从网上搜了一下，我没做过的系统还真多。

4.1、B端管理系统的10种类型

B端管理系统是指面向企业客户的管理系统，也称为B2B管理系统。这些系统旨在帮助企业管理其各种业务流程和资源，包括客户关系、供应链、人力资源、财务、生产、项目管理等方面。

4.1.1、企业资源计划系统（ERP, Enterprise Resource Planning）

整合企业内部的财务、供应链、制造、人力资源、销售、采购、库存、项目管理等各个业务环节，提供一体化的信息管理和决策支持。

实现跨部门数据共享、业务流程自动化，提升企业运营效率和决策准确性。

好用的ERP系统

-金蝶ERP

金蝶ERP是国内最好的ERP系统之一，功能全面，适合各种企业规模，易于部署和使用，支持移动端，定制开发能力强。虽然价格相对较高，实施周期较长，需要专业人员支持，但作为国内领先的ERP软件，金蝶ERP在国内市场上具有一定的竞争力。

-用友ERP

用友ERP是亚太地区较大的管理软件，也是中国最大的独立软件厂商之一。它以集成的信息管理为基础，以规范企业运营，改善经营成果为目标。用友ERP拥有较为完善的本地化服务体系，能够快速响应客户需求并提供定制化服务。然而，由于定制化程度较高，一些功能可能比较复杂，需要较高的维护成本。总体而言，用友ERP是国内最好的ERP系统之一。

-浪潮ERP

浪潮ERP是国内最好的ERP系统之一，是中国企业管理软件领域的领先者。浪潮的ERP软件以项目运作为主，成熟度较高，产品线丰富。虽然产品线定位不够清晰，但平台化程度高，可以配置性强，且整合了物流和商业智能软件。此外，浪潮的ERP软件还具有较强的整合能力，可以配置不同行业的软件和解决方案。总的来说，浪潮ERP是国内最好的ERP系统之一。

4.1.2、客户关系管理系统（CRM, Customer Relationship Management）

管理与客户相关的所有活动，包括销售线索管理、市场营销、客户服务、订单处理、客户数据分析等。

提升客户满意度，优化销售策略，增强客户忠诚度，助力企业实现持续增长。

好用的CRM系统

-ZOHO

ZOHO 上榜理由:ZOHO成立于1996年美国,企业运行和管理的一站式云平台,提供CRM、在线Office、邮箱、项目管理、团队协作、人事管理、财务管理、BI商业智能、应用开发平台等SaaS软件产品。目前,ZOHO在全球100多个国家和地区拥有7000多万用户。

-纷享销客

国内排名第一的CRM管理系统:纷享销客通过百度指数、IDC等报告显示,纷享销客在国内CRM市场占有率多年稳居第一,同时也是增速第一的CRM厂商,连续多年登上胡润全球独角兽榜单。同时,纷享销客也是国内最为老牌CRM管理系统之一,具备非常成熟的产品功能,比如客户管理、拜访管理、商机、合同、数据分析、公海池等等,他几乎能够满足大部分大、中、小企业对于CRM管理的想象。同时,纷享销客的价格也是国内产品中性价比最高的几个产品之一,支持私有部署、定制化开发、SaaS等购买方案,且提供一定人数规模的免费使用。

-销售易

销售易是专注销售服务管理平台的CRM提供商,致力于通过新型互联网技术,打造符合数字化时代下企业需求的新一代CRM产品,将企业同客户互动的全过程数字化、智能化,帮助企业转型为真正以客户为中心的数字化运营组织。

4.1.3、供应链管理系统（SCM, Supply Chain Management）

协调供应商、制造商、分销商、零售商之间的物流、信息流和资金流，涵盖采购、生产计划、库存控制、订单履行、运输、仓储等环节。

实现供应链透明化，降低库存成本，提升响应速度，确保供需平衡。

好用的SCM系统

-金蝶K/3供应链管理系统

金蝶K/3供应链管理系统是一款面向中小型企业的供应链管理系统软件。它提供了完整的计划、执行和监控功能，包括需求计划、物料需求计划、采购、库存管理、销售和客户服务等。此外，它还支持多种不同的生产和物流业务模式，如按订单生产、按库存生产等。

-用友U8供应链管理系统

用友U8供应链管理系统是一款面向中型企业的供应链管理系统软件。它提供了完整的计划、执行和监控功能，包括需求计划、物料需求计划、采购、库存管理、销售和客户服务等。此外，它还提供了丰富的可视化和报告功能，帮助企业更好地了解供应链的运行情况。

-智邦国际供应链管理系统

智邦国际供应链管理系统是一款面向中小型企业的供应链管理系统软件。它提供了完整的计划、执行和监控功能，包括需求计划、物料需求计划、采购、库存管理、销售和客户服务等。此外，它还提供了丰富的可视化和报告功能，帮助企业更好地了解供应链的运行情况。

4.1.4、人力资源管理系统（HRM, Human Resource Management）

包括招聘、入职、培训、绩效管理、薪酬福利、员工发展、考勤、离职管理等功能。

提高人力资源管理效率，确保合规性，支持人才战略决策，提升员工满意度和组织效能。

好用的HRM系统

-北森人事云

北森算是老品牌了，做人才测评起家的，近些年也开始做人力系统，业内口碑较好，价格偏贵，是比较偏向于大型企业的HRSaaS服务平台，深入中大型企业HR业务提供从招聘、测评到人事、假期、薪酬再到绩效、继任、学习、敬业度调查的全场景解决方案。

-金蝶人力云

金蝶人力云是金蝶企业专为企业HR信息化管理提供的解决方案，可以有效帮助全员互联、高效协作，有效打通内外部人才供应链条、为组织HR战略决策提供精确量化分析。

-i人事

以劳动力管理与智能薪酬为核心的一体化HR SaaS系统，以“软件+服务+生态”赋能方式，促动集团化人效提升。

功能覆盖人力资源管理6大模块、贯穿员工“选用育留”全流程，助力企业一个平台搭建智能HR管理闭环，提升管理效率；

4.1.5、酒店管理系统（PMS, Project Management System）

店管理系统PMS(Property Management System)是一个集成了多个功能模块的软件系统，旨在帮助酒店管理者更好地组织和协调各项业务活动。

PMS的核心功能包括客房预订、前台接待、账务管理、报表分析等。通过PMS，酒店可以实现信息共享、自动化处理和实时监控，从而提高工作效率和服务质量。

好用的PMS系统

-西软

石基旗下的西软，在国内四五星级酒店市场占有率超过80%，稳居国内市场占有率第一。做为opera在中国的唯一代理商，可以说一定程度上石基垄断着中国高星级酒店的酒店管理系统。进入2020年，石基西软践行“云+移动”战略，全面升级云XMS平台，除了PMS功能以外，云XMS还集成了POS、移动产品、ITF等模块，广泛适用于单店、集团用户。

-金天鹅

“北有西软，南有天鹅”。17年的行业积淀，国内首倡导“7×24”小时售后服务体系，功能齐全操作简单的PMS系统，为金天鹅积累了10万+酒店投资人的口碑。2020年，金天鹅整合PMS系统到云平台，自主开发核心产品——2号店长，打造酒店商业数据化服务解决方案，涵盖IT、供应链和运营三大版块，彻底解决酒店降本增收的难题。可以说，如今的金天鹅已经成为酒店投资者首选的SaaS软件之一。

4.1.6、办公自动化系统（OA, Office Automation）

提供邮件、日程、文档、审批、公告、知识管理、即时通讯等日常办公所需的功能。

提高工作效率，规范工作流程，促进团队协作，实现无纸化办公。

好用的OA系统

-致远OA系统

致远软件是一家专注于协同管理软件领域的高新技术企业，其OA系统以流程管理为核心，提供了丰富的功能模块，如公文管理、会议管理、知识管理等。该系统界面友好，操作简便，适用于各种规模的企业和机构。

-蓝凌OA系统

蓝凌是中国知名的企业级移动办公平台提供商，其OA系统以移动办公为核心特点。该系统提供了全面的移动办公解决方案，包括移动审批、移动签到、移动会议等。蓝凌OA系统的优势在于其优秀的用户体验和高效的移动办公能力。

4.1.7、商业智能系统（BI, Business Intelligence）

收集、整理、分析企业内外部数据，生成各类报表、仪表盘、数据可视化图表。

为企业决策者提供实时、准确、深入的业务洞察，支持数据驱动的决策制定。

好用的BI系统

-Power BI

Power BI来自大名鼎鼎的微软，其在办公软件领域本就是霸主地位，进入到商业智能行业自然也不遑多让，短短两年，就已经是Gartner魔力象限中最具有竞争力的BI软件了

-帆软BI

帆软BI提供了丰富的图表类型，让用户可以根据需求选择最适合的图表来展示数据。同时，它还具备智能图表推荐功能，能够根据用户输入的查询条件，自动推荐最合适的图表类型，从而让用户更加便捷地进行数据可视化。这种智能化的功能设计，不仅提高了数据可视化的效果，也大大提升了用户的工作效率。

4.1.8、财务管理软件（Financial Management Software）

负责企业会计核算、预算管理、成本控制、财务报告、税务管理等工作。

提供全面的财务视图，支持财务分析和决策，确保财务合规，降低财务管理成本。

好用的财务管理软件

-用友

用友是一款功能强大的财务管理软件，它不仅可以支持基本的财务会计功能，还具备总账、应收账款管理、应付账款管理、UFO报表、网上银行、票据链接、现金流量表、网上报销、报销中心、公司对账、财务分析等财务管理功能。因此，用友是一款非常好用的财务管理软件。

-金蝶易记账免费版

金蝶易记账免费版是一款免费的企业财务管理软件，具有记账、查账、报表制作以及发票导入验证等功能。该软件使用免费，没有套账数量限制，还拥有云端数据备份功能。相比其他财务软件，金蝶易记账免费版功能更加全面，使用更加方便。

-账有书

账有书是一款中小微企业专用收支流水记账软件，由易用性角度出发，操作简单方便。不管是有没有财务知识，有不懂财务术语，都可以通过账有书这个软件来记账，简单地记录收支流水。它提供了进销存模块，可以方便地管理企业的物品和原材料出入库，还可以统计实时库存信息。账有书还可以记账和报税，方便企业经营和税务管理。

4.1.9、资产管理软件（Asset Management Software）

管理企业固定资产、无形资产、租赁资产等的全生命周期，包括采购、登记、折旧、维修、处置等环节。

提高资产利用率，降低维护成本，确保资产账实相符，符合审计要求。

好用的资产管理软件

-易点固定资产管理云系统

易点固定资产管理云系统是一款SAAS系统，它是一种以租赁为主，也可以定制开发专属版的系统。云版功能定期迭代更新，用户每年交一定的年费即可。对于企业来说，会降低总体成本。免下载，浏览器登录即可。信息不回丢失，操作比较灵活。

-泛微固定资产管理系统

泛微是一家专门做中大型OA软件的厂商，功能比较全面。价格稍微贵一些。也有固定资产管理模块，但是固定资产管理模块不单独出售。对于中小企业而言，预算可能不够

4.1.10、

知识管理系统（KMS, Knowledge Management System）

收集、组织、存储、分享企业内部的知识、信息、最佳实践，促进知识传承与创新。

建立企业知识库，支持员工学习与成长，提升组织智力资本。

4.2、我有些话说

真的看了这么多平台后你会发现。作为B端设计师的我们还有很长的路要走。或者说有很多的企业并没有重视自己产品的设计和交互。

加油吧！这个行业未来大有前途。

最后

这篇文章应该是最初的第一篇0号文章的。只是期初没有想过我会完成这个B端基础扫盲的系列文章。所以这篇文章就在我完成前期几篇文章后。我觉得要写的。希望可以帮到你了解。整个B端设计。

我想很快我们能够再见。我也在准备我的下一个系列的设计知识分享文章。希望可以帮助在黑夜里一直前行的你。我们能够一起加油做到自己的最好。

我是KING国王、我们下次见。

作者：彪形大汉pro
链接：https://www.zcool.com.cn/article/ZMTYxNzg0NA==.html
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

评论(0) 浏览(486)

242024-4

分类页面界面革新——Category Interface Revamp

前端达人

导购模块【分类页-Category】

兼容方式：H5响应式、APP原生

模块呈现：分功能组件化设计

支持国家：印度、墨西哥、巴西、美国、英国、俄罗斯

综上所述，引人入胜的车载管理软件界面设计是提升驾驶体验、提高行车安全的重要因素。通过精心设计和持续优化，可以为驾驶者带来更加愉悦、便捷和安全的驾驶体验，助力智能汽车行业的发展和进步。

作者：StrawHatSL
链接：https://www.zcool.com.cn/work/ZNjgzNDQwMzY=.html
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

评论(0) 浏览(447)

242024-4

探索引人入胜的车载管理软件界面设计

前端达人

在汽车科技不断发展的今天，车载管理软件的界面设计越来越成为人们关注的焦点。一款出色的车载管理软件界面设计不仅能够提供便捷的操作体验，还能为驾驶者带来更加愉悦和安全的驾驶体验。

简洁直观的用户界面

：优秀的车载管理软件界面应该具有简洁直观的用户界面，让驾驶者能够快速定位和使用所需功能。通过合理的布局和清晰的图标设计，使界面信息呈现清晰易懂，降低驾驶员的认知负荷。

人性化的交互设计

：良好的交互设计是车载管理软件界面设计的关键之一。应该注重按钮大小、颜色对比度、交互反馈等方面的设计，确保驾驶者可以轻松操作，减少驾驶时的注意力分散。

多功能的导航系统

：车载管理软件通常包含导航系统功能，良好的导航界面设计可以为驾驶者提供准确、实时的路况信息，并能够根据驾驶者的需求智能规划最佳路线，提高驾驶效率和安全性。

个性化的定制功能

：为了满足不同驾驶者的需求，车载管理软件界面设计应该具备一定的定制化功能。提供个性化的设置选项，让驾驶者可以根据自己的喜好和习惯进行界面布局和功能设置，提升用户体验和满意度。

响应式设计与多屏互动

：随着智能汽车和智能设备的普及，车载管理软件界面设计也需要具备响应式设计和多屏互动的能力。确保在不同屏幕尺寸和设备上都能够良好展现，并保持一致的用户体验。

评论(0) 浏览(455)

232024-4

探索B端后台管理界面导航设计的精髓

前端达人

在当今数字化时代，B端后台管理界面的导航设计变得至关重要。作为企业管理和运营的核心工具之一，良好的导航设计不仅可以提高操作效率，还能提升用户体验，带来更高的工作效率和生产力。

简洁直观的布局

：一个优秀的B端后台管理界面应该具有简洁直观的布局，使用户能够轻松找到需要的功能和信息。通过合理的分类和分组，使导航结构清晰明了，降低用户的学习成本和操作复杂度。

功能导航的层级结构

：合理的层级结构可以帮助用户更快速地定位和访问功能。在设计中，应该考虑到不同用户群体的使用习惯和需求，将常用功能和重要信息放置在更显眼的位置，提高用户的操作效率。

响应式设计与自适应布局

：随着移动端的普及，B端后台管理界面的导航设计也需要具备响应式设计和自适应布局的特性。确保在不同的屏幕尺寸和设备上都能够良好地展现，并保持一致的用户体验。

交互设计的友好性

：良好的交互设计可以使用户的操作更加流畅和愉快。在导航设计中，应该注重按钮样式、动画效果、交互反馈等方面的细节，提升用户的使用感受和满意度。

多样化的定制功能

：针对不同行业和企业的需求，B端后台管理界面的导航设计应该具备一定的定制化能力。提供灵活的定制功能，让用户可以根据自己的需求进行个性化设置，提高用户的满意度和粘性。

综上所述，B端后台管理界面的导航设计在提高工作效率、优化用户体验方面发挥着重要作用。通过精心设计和持续优化，可以为企业提供更高效、便捷的管理工具，助力企业实现数字化转型和业务发展。

评论(0) 浏览(493)

232024-4

B端的10个设计方法

前端达人

最近看了一些B端的书籍，重温了一些耳熟能详的设计方法论，在人机交互理论中，最著名和经典的理论当属人机交互大师雅各布.尼尔森博士在1995年提出的尼尔森十大可用性原则，该理论是针对PC端交互设计提出的。这个理论在我们日常的产品设计中提供了很好的指导意义，下面来聊聊他们分别运用在了日常产品的哪些地方。

反馈原则

反馈原则指出系统应在适当的时候向用户提供其当前状态的反馈。这包括操作的即时响应、进度指示、错误提示等。良好的反馈机制能够让用户了解操作的结果，增强控制感，减少不确定性和焦虑感。

系统应该在合理的时间、用正确的方式，向用户提示或反馈目前系统在做什么、发生了什么，反馈速度应与用户期待相符。

百度网盘每次在下载文件时，都会提示当前下载的进展，完成了百分之几，当前的一个传输速率是多少？以及还需要多长时间才能下载完成，很好的缓解了用户焦虑的情绪。

360安全卫士在进行软件杀毒的时候，也会展示出对应的杀毒进程，还需要多长时间才能杀毒完成，给了用户及时的反馈和满满的确定感。

隐喻原则

系统要采用用户熟悉的语句、短语、符号来表达意思，要遵循真实世界的认知、习惯，让信息的呈现更加自然，易于辨识和接受，减少用户的学习曲线。

在人机交互设计中，程序的沟通和表达、功能的呈现，都要用最自然的、用户容易理解的方式，避免采用计算机程序语言的表达方式。设计时要采用符合真实世界认知的方式，让用户通过联想、类比等方法轻松地理解程序想表达的含义；隐喻可以是视觉的，也可以是操作的，它能帮助用户通过已知的事物来理解新的概念或功能。

360安全卫士、嗨格式视频转换器、腾讯电脑管家中的图标都采用了人们易于理解的图形去表达，符合人们日常的认知习惯，很好的表达了业务场景，同时也不失美感。

回退原则

用户经常会不小心操作错误，需要有一个简单的功能，让程序迅速恢复到错误发生之前的状态。用户应能够控制自己的操作，包括撤销或重做之前的操作。回退原则提供了一种安全感，让用户知道他们可以从错误中恢复，从而更愿意尝试和探索系统的功能，减少用户误操作的焦虑。

QQ邮箱页面在设计时，下面有一个撤回的按钮，当发现自己发送邮件有问题的时候，可以点击撤回，将发出去的邮件收回来。

虎课网的个人头像，当用户不喜欢当前的头像时，在设置里面允许用户对个人信息和头像进行重新修改，也体现了回退原则，让用户可以对之前做的操作进行再次操作和修改。

微信也是，当用户发送出去的信息错误时，在3分钟内用户有撤回消息的权限，给用户提供了改错的机会，减少了用户误操作带来的挫败感。

一致原则

同样的场景、环境下，用户进行相同的操作，结果应该一致；系统和平台的风格、体验也应该保持一致。

一致性原则要求产品在不同情境下提供相同的操作反馈，保持风格和体验的一致性。这有助于用户建立直觉性的操作习惯，减少学习成本。一致性还体现在设计元素的使用上，如按钮、图标、颜色等，都应保持统一风格，避免用户产生混淆。

飞书在联系人、邮箱、日程、服务台、应用、消息等多个场景都保持了风格非常统一的空状态页面，整个产品的统一感很强，比较舒适。

防错原则

防错原则强调预防错误的发生优于错误发生后的补救。设计时，应考虑用户可能的错误操作，并设计机制来避免或减少这些错误。例如，通过禁用不可用的选项、提供清晰的指令和限制，以及在执行不可逆操作前设置确认步骤, 防错设计可提升用户效率, 降低错误几率。

EV录屏里面有个录制视频的列表，当用户点击需要删除的视频时，有一个二次确认的机会，以防止客户误删，很好的体现了防错原则。

天翼云电脑专家在设计学习模式按钮入口的时候，为了防止用户出错，把按钮设计了两种状态，一种是带插画头像的彩色按钮，一种是把插画头像置灰的按钮样式，让用户能很好的区分当前的一个状态，是防错原则的一个很好运用。

记忆原则

让系统的相关信息在需要的时候显示出来，减轻用户的记忆负担，帮助用户快速上手，提升产品的易用性。例如，自动保存用户的输入、提供历史记录、使用快捷方式等，可以减少用户需要记忆的信息量；当切换页面时，不应该让用户记住不同页面的内容，而应该在合适的地方积极地呈现或提示之前的信息。

花瓣、千图、哔哩哔哩平台在搜索栏都有搜索的历史记录功能，之前搜索的过的词，当用户再次想要搜索的时候，用户不需要再次输入，直接选择对应的历史标签就行。

灵活易用原则

灵活易用原则不仅是一个交互设计原则，也代表了一种软件产品设计理念；系统要做到简单易用，系统应为不同水平的用户提供灵活的使用方式。中级用户是大多数，设计应满足他们的需求，同时为初级用户提供易于上手的引导，为高级用户提供定制化选项，以提高效率。灵活设计可以提升用户满意度，个性化设置可以增加用户粘性，促进用户的探索。

腾讯电脑管家考虑到每个人有每个人的审美和喜好，设计了一键换肤的功能，提供了有足足12种之多的皮肤设计，用户可以在个性皮肤里面随时切换自己想要的皮肤背景。

简约设计原则

简约设计原则要求去除不必要的信息和功能，突出重点，避免信息过载。设计应追求简洁，同时保持功能的完整性和可用性，确保用户可以快速识别和使用最重要的功能。

联通应用商店的应用下载中，没有把对应程序的安装按钮直接显示出来，只有当鼠标点击到对应的图标上时，安装按钮才显示出来，简化了页面的信息流，通过动态的交互方式让页面看起来更加的简洁，是简约设计原则的很好应用。

飞书在一个信息层级，任务这么复杂的一个页面，每段任务通过任务的紧急情况做了颜色区分，并且还配合了对应的图标，整个页面设计清清爽爽，把一个很复杂的信息流，通过归类，让页面更加的简约。

容错原则

当错误不可避免时，系统应提供清晰的错误信息和解决方案。这意味着错误信息应易于理解，避免专业术语或错误代码，同时提供明确的解决步骤或建议，帮助用户从错误中恢复。

对于很多运行时错误或异常，计算机程序都会返回某个错误代码，但是用户看到这些错误代码时并不明白发生了什么，所以一定要将错误代码转换成用户能看懂的信息，并告诉用户解决的建议。

联想电脑管家客服页不见了，他给出了很明确的错误提示，并且还附上了一个可视化的插画设计，缓解了用户焦虑的情绪。

联想电脑商铺应用也是的，消息不能查看了，它告诉用户什么原因导致不能查看，给用户提出了很明确的指引和方向。

帮助原则

即使系统设计直观，提供易于检索的帮助信息也是必要的。帮助文档应清晰、简洁，并提供解决问题的明确步骤，避免过于复杂或冗长。

现在的软件产品，尤其是C端产品，普遍做了良好的交互设计，可以帮助用户快速学习使用，而不用阅读、理解复杂的说明文档。

然而，B端产品的复杂性比C端产品高很多。因为B端产品蕴含很多业务流程的规则，系统中的一个按钮可能代表了一个复杂的业务处理逻辑。如果不了解整个业务场景和处理规则，则很难理解按钮的操作含义的。

因此，对于B端产品，用户进行自助服务、自助操作的难度高很多，B端产品的帮助文档依然有存在的必要。产品设计人员要尽量在前端交互设计上做好引导提示，对于复杂的规则和逻辑，可以考虑通过帮助文档来指导。

菜鸟裹裹的邮寄页面，输入地址栏上方提供了输入信息的功能，并且通过一键识别按钮，就可以将粘贴进来的信息一键智能的填充到下方的信息栏中，给用户提供了很多的帮助和便捷。

酷我音乐在设置里面，设置了提供帮助的入口，当用户需要帮助的时候，可以在里面提供反馈，然后平台就会给你提供帮助。

总结：

通过阅读结合自己日常的产品体验，会对这些设计原则产生一个深刻的印象和理解，光看这些文字描述，可能不能明显立体的体会到它的价值，但是当带着这些思考去生活中找证据的时候，发现这些设计方法论真的是个大宝藏，带着这种方法论思考的设计师能设计出很多合情合理的设计，方便了用户使用的同时也大大提高了页面的美感。

本文观点都为个人理解和总结，不足之处也欢迎大家留言区多多点评指正，大家共同进步！

作者：姝斐suphie
链接：https://www.zcool.com.cn/article/ZMTYxNzgwMA==.html
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

评论(0) 浏览(421)

222024-4

【万字干货】B端进阶｜表格数据过滤分析

前端达人

一、为什么需要数据过滤

二、数据过滤的类型

三、搜索

3.1 搜索类型

3.1.1 单条件模糊搜索

介绍：用户在搜索框中输入一个关键词，然后搜索引擎返回与该关键词相关的结果。

优点

：简单易用，用户只需要输入一个关键词即可快速找到相关信息；
缺点

：搜索方式可能不够精确，因为用户可能没有提供足够的上下文信息，导致搜索引擎返回的结果与用户的期望不符

3.1.2 多条件模糊搜索

介绍：指用户在搜索框中输入或选择多个关键词，然后搜索引擎返回与这些关键词都相关的结果。可选择是后台配置查询条件还是用户配置。

优点

：更加精确，因为用户提供了更多的上下文信息，可以帮助搜索引擎更好地理解用户的意图；
缺点

：需要用户输入更多的关键词，增加了用户的输入成本。

3.1.3 搜索条件切换

介绍：指用户在搜索框中输入一个关键词后，可以手动切换到另一个关键词进行搜索。

优点

：灵活性和自由度更高，用户可以根据自己的需要随时切换关键词进行搜索；
缺点

：需要用户手动操作，增加了用户的操作成本。

3.2 触发方式

3.2.1 实时触发

优点

：当用户在搜索框中输入文字时，搜索功能会立即提供搜索结果。这种方式可以提供快速反馈，让用户更快地找到所需信息。此外，实时触发搜索还可以帮助用户逐步缩小搜索范围，提高搜索效率。
缺点

：可能会对服务器造成较大的负担，因为每次用户输入都会触发一次搜索请求。其次，实时触发搜索可能会干扰用户的输入过程，因为用户需要不断地观察搜索结果并根据结果进行调整。

3.2.2 手动触发

优点

：用户需要点击一个搜索按钮或使用特定的快捷键才能触发搜索功能。这种方式可以减少对服务器的负担，并且不会干扰用户的输入过程。
缺点

：可能会让用户感到不便，因为他们需要手动触发搜索功能。此外，如果用户忘记触发搜索功能，他们可能会浪费时间在输入过程中。

3.3 理解用户的搜索意图

3.3.1 关键字联想

介绍：用户在输入一个关键词时，搜索引擎能够自动推荐与该关键词相关的其他关键词，以帮助用户更快地找到所需信息。

3.3.2 搜索历史

介绍：记录了用户之前搜索过的关键词和搜索结果，以便用户在以后的搜索中更快地找到之前查找过的信息。

四、导航

使用场景：标签切换一般用于和时间、状态的流转有关，且没有交集的数据内容；主要样式有基础、卡片、胶囊等。

4.1 页签导航（tabs）

优点：

直观易用：页签导航简单明了，用户可以快速理解并使用

节省空间：页签导航可以在有限的屏幕空间内展示多个页面或部分内容，提高了页面的利用率。

便于浏览：用户可以通过页签快速切换到不同的页面或内容，提高了浏览效率。

缺点：

导航深度限制：页签导航通常只适用于一级或两级导航，对于多级导航可能会显得过于复杂。

内容展示限制：由于页签的空间有限，可能无法展示所有需要的内容，需要用户点击后才能查看全部内容。

4.2 卡片导航

优点：

内容丰富：卡片导航可以展示更多的内容和信息，用户可以通过卡片了解更多详情

直观性强：卡片导航以视觉化的方式展示内容，更加直观和易于理解

交互性强：用户可以通过滑动或点击卡片进行操作，增强了交互性和体验感

缺点：

占用空间大：卡片导航需要占用更多的屏幕空间，可能会影响页面的整体布局和美观度；

操作复杂度较高：对于一些用户来说，卡片导航的操作可能会比较复杂，需要一定的学习成本

五、条件筛选

5.1 页面布局

5.1.1 上下布局

特点：筛选条件和表格数据分别位于页面上方和下方，用户可以逐行查看数据，同时看到筛选条件。

使用建议：适用于筛选条件较少，且数据量较大的情况。用户可以快速浏览数据，同时方便对筛选条件进行修改。

5.1.2 左右布局

特点：筛选条件和表格数据分别位于页面左侧和右侧，用户可以同时看到筛选条件和数据。

使用建议：适用于筛选条件较多，且数据量较小的情况。用户可以在筛选条件和数据之间进行快速切换，提高操作效率。

5.1.3 浮层（弹窗/抽屉）

特点：仅展示筛选图标按钮，以浮层形式呈现。可以在当前页面的上方或侧边以浮动的形式展示，不会占用太多页面空间。

使用建议：当页面的空间利用率要求比较高，非高频操作场景时可使用浮层的模式，节省页面空间。

5.2 筛选类型

B端表格的筛选类型主要有平铺式、收折式和下拉式三种：

5.2.1 平铺式

优点

直观明了：平铺式筛选将所有选项平铺展示，方便用户快速找到所需选项；

易于操作：平铺式筛选通常采用简单的点击或拖拽操作，方便用户进行筛选。

缺点

占用空间较大：平铺式筛选需要展示所有选项，因此可能会占用较多的页面空间；

不适合大量选项：如果选项数量过多，平铺式筛选可能会显得拥挤，影响用户体验。

使用建议

适用于选项数量适中的情况：平铺式筛选适合选项数量适中，且用户需要直观看到所有选项的情况；

可以结合其他筛选方式：如果选项数量过多，可以考虑结合其他筛选方式，如收折式筛选或表单式筛选。

5.2.2 收折式

优点

节省空间：收折式筛选可以将不常用的选项折叠起来，节省页面空间；

易于查找：收折式筛选通常会提供搜索或筛选条件，方便用户快速找到所需选项。

缺点

操作相对复杂：收折式筛选需要用户展开或折叠选项，操作相对复杂一些；
不适合所有场景：如果用户需要直观看到所有选项，或者需要快速筛选大量选项，收折式筛选可能不太适合。

使用建议

适用于选项数量较多的情况：收折式筛选适合选项数量较多，且用户需要节省页面空间的情况；

可以结合其他筛选方式：如果用户需要直观看到所有选项，或者需要快速筛选大量选项，可以考虑结合其他筛选方式，如平铺式筛选或表单式筛选。

5.2.3 表单式

优点

直观明了：表格形式的筛选方式可以让用户直观地看到各个字段和对应的数据，方便用户进行对比和筛选；

操作简单：用户可以通过简单的点击、输入等方式进行筛选，操作简便，提高了筛选效率；

灵活性高：表格形式的筛选方式可以支持多种筛选条件和筛选方式，用户可以根据自己的需求进行筛选，灵活性较高。

缺点

界面拥挤：如果表格中的字段较多，会导致界面拥挤，影响用户的使用体验；

数据量大时筛选性能不佳：对于大量数据，表格形式的筛选方式可能需要较长时间才能得出结果，影响筛选效率；

不易展示复杂数据关系：表格形式的筛选方式更适合展示简单的数据关系，对于复杂的数据关系可能难以直观地展示。

使用建议

根据实际需求选择筛选方式：在选择筛选方式时，需要根据实际需求和数据量的大小来选择适合的筛选方式。对于简单的筛选需求，可以使用表格形式的筛选方式；对于复杂的筛选需求，可能需要考虑使用其他筛选方式，如条件语句等；

优化表格布局：为了提高用户的使用体验，可以对表格的布局进行优化，如对字段进行排序、隐藏不必要的字段等；

限制筛选条件数量：为了提高筛选效率，可以限制用户可以设置的筛选条件数量，避免过多的筛选条件导致筛选性能下降。

5.2.4 浮层弹出式

介绍：页面中仅展示筛选按钮，点击后以气泡或抽屉的方式去承载筛选内容。

优点

用户友好：浮层式的筛选条件提供了一种直观的方式来展示筛选选项，用户可以轻松地查看和选择，无需在页面之间切换或变动页面布局；

节省空间：通过将筛选条件放在浮层中，主页面可以保持简洁，不受到过多的干扰元素影响，同时也可以避免筛选条件过多导致的页面拥挤；

灵活性高：浮层式的筛选条件可以方便地调整和修改，以适应不同的筛选需求和业务变化。

缺点

可能会引起混淆：如果用户不熟悉这种交互方式，可能会对浮层式筛选条件感到困惑，需要额外的引导和说明；

可能会影响用户体验：浮层式的筛选条件需要用户手动关闭或选择选项，如果操作不够便捷或流畅，可能会影响用户体验；

可能会影响页面性能：如果筛选条件过多或数据量较大，浮层式的筛选条件可能会导致页面加载速度变慢，影响用户体验。

使用建议

提供清晰的引导：在应用中使用浮层式的筛选条件时，需要提供清晰的引导和说明，帮助用户更好地理解和使用；

优化关闭和选择操作：为了提高用户体验，需要优化筛选条件的关闭和选择操作，使其更加便捷和流畅；

考虑数据量和性能：在应用中使用浮层式的筛选条件时，需要考虑数据量和页面性能等因素，采取相应的优化措施。

5.2.5 表头筛选

介绍：位于表格表头区域，每一列表头可做单列筛选，也可多列同时筛选。

优点

直观明了：表头筛选将筛选条件直接展示在表格的表头位置，方便用户直观看到所有可用的筛选条件；

提高效率：表头筛选可以减少用户的操作步骤和时间成本，提高筛选效率。

缺点

适用范围有限：表头筛选通常适用于简单的单字段筛选或单列筛选，对于多字段或多列的复杂筛选需求可能不太适用；

可能影响表格美观度：在表格中添加多个表头可能会影响表格的美观度，需要权衡设计和用户体验之间的平衡。

使用建议

适用于简单筛选需求的情况：表头筛选适合简单的单字段或单列的筛选需求，如根据姓名、性别等进行筛选；

可以结合其他筛选方式：如果用户需要复杂的筛选需求，可以考虑结合其他筛选方式，如平铺式、收折式或表单式等。

5.2.6 已选条件

介绍：将已经录入的条件展示在查询条件的下方，可快速删除

优点

用户体验：显示已选条件可以帮助用户更好地理解筛选结果，提高用户体验。用户可以直观地看到哪些条件已被选中，从而更好地理解数据的筛选结果；

可视化效果：在筛选区显示已选条件，可以增强表格的可读性和可视化效果。筛选条件的显示可以提供一种直观的方式，帮助用户更好地理解数据和筛选结果；

筛选灵活性：如果筛选区显示已选条件，用户可以根据需要轻松地修改或删除已选条件，提高筛选的灵活性；

筛选逻辑清晰度：通过显示已选条件，用户可以更好地理解筛选的逻辑。这有助于用户更好地理解数据之间的关系和关联，提高数据分析的准确性；
筛选操作效率：对于大量数据的筛选，显示已选条件可以帮助用户更快地定位和调整筛选条件，提高筛选操作效率。

六、优化过滤性能

6.1 索引优化

6.1.1 查询条件模版

将常用的查询方案保存为模版，通过快速切换模版的方式批量替换查询条件，达到快速查询的效果，方便用户快速筛选出所需的数据。

6.1.1 查询值模版

将常用的查询方案连同值一起设置为模版，在下次切换查询方案时，自动根据预置的值进行自动查询，查询结果保存至浏览器，方便下次调用。

6.2 缓存机制

介绍：（浏览器前端）将已经过滤过的数据缓存起来，避免重复查询。

6.3 分页加载

介绍：采用分页加载的方式，减少一次性加载的数据量，提高加载速度。

七、总结

作者：姚_Yale
链接：https://www.zcool.com.cn/article/ZMTYwNTc0OA==.html
来源：站酷
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

评论(0) 浏览(458)

222024-4

探索鼓舞人心的VR和AR界面设计:沉浸式体验之旅

前端达人

在当今数字化时代，虚拟现实（VR）和增强现实（AR）技术正逐渐成为我们日常生活和工作的一部分。从沉浸式游戏到实用的企业应用，VR 和 AR 界面设计的进步正在改变我们与数字世界互动的方式。在本文中，我们将探索一些令人振奋的 VR 和 AR 界面设计，探讨它们是如何塑造未来的互动体验的。

超现实的设计：

VR 和 AR 提供了无限的创意空间，可以超越传统的用户界面设计。通过AR眼镜，用户可以在现实世界中看到虚拟元素，而VR头盔则可以让用户沉浸在全新的虚拟环境中。超现实设计旨在将这两者融合，创造出无缝融合现实和虚拟的体验。例如，通过在用户周围的真实环境中添加虚拟对象来增强体验，或者在虚拟环境中嵌入真实世界数据以增强真实感。

用户体验的关键：

无论是 VR 还是 AR，用户体验始终是界面设计的核心。一个成功的 VR 或 AR 界面应该能够提供直观、流畅、令人愉悦的体验，同时充分利用技术的优势，使用户感觉到自己真正地融入到虚拟或增强的环境中。简洁的界面设计、直观的操作方式和高度可定制化的体验都是提升用户体验的关键因素。

沉浸式内容的创新：

VR 和 AR 界面设计不仅仅是关于界面本身，还涉及到展示的内容和体验。创新的内容设计可以极大地提升用户的沉浸感和参与度。这可能包括与虚拟物体的互动、沉浸式的故事叙述、虚拟场景的真实感以及与其他用户的实时互动等。通过结合视觉、听觉和触觉等多种感官，设计师可以创造出令人惊叹的沉浸式体验。

可持续性和可访问性：

随着 VR 和 AR 技术的普及，设计师们也越来越关注可持续性和可访问性的问题。在设计界面时，考虑到不同用户群体的需求和使用场景的多样性是非常重要的。同时，减少对资源的消耗、提高设备的能源效率以及通过设计使得内容更易于理解和使用，都是可持续性和可访问性的关键方面。

结语：

VR 和 AR 界面设计的迅速发展带来了前所未有的机遇和挑战。通过不断创新和关注用户体验，设计师们可以推动这一领域的进步，为用户带来更加丰富、沉浸和令人愉悦的数字体验。随着技术的不断发展和用户需求的不断演变，我们可以期待看到更多令人惊叹的 VR 和 AR 界面设计的出现，为我们的未来生活带来更多的可能性。

评论(0) 浏览(444)

182024-4

大数据的美学之旅：令人惊叹的可视化界面展示

前端达人

在当今数字化时代，大数据已经成为企业和组织的重要资产之一。然而，仅仅拥有海量的数据并不足以发挥其最大潜力，关键在于如何有效地分析和理解这些数据。在这方面，可视化界面发挥着至关重要的作用。通过图表、图形和其他视觉化工具，大数据可视化界面将抽象的数据转化为直观的、易于理解的形式，为决策者提供了更清晰、更全面的洞察力。