B端系统界面通用设计

不同系统面向不同用户，其设计也会有所不同。本篇文章以B端系统为例，分析其中的界面设计。希望能对产品设计的你提供一些参考。

B端系统主要是面向企业用户，追求高效、便捷，是在拉通业务流程的基础上进行提效，缩短业务的处理周期。

在这样背景下的B端系统，界面设计上，更偏重于简单高效，今天就简单谈谈我对B端系统界面的一些通用设计。

一、按钮

放置位置一般没有特殊要求，可放左边也可放右边，但是一定要遵循一个原则就是全部界面尽量做到统一。即要么统一放在左边，要么统一放在右边，尽量不要出现部分界面按钮放左边，部分界面按钮放右边的情况。

目前个人涉及到的系统按钮大概率都放在左边。依次按照操作频繁排列，即从左至右，使用频率由高到低。

二、搜索条件

搜索条件：搜索条件以三个搜索条件为一个分界线，界面的一行的空间刚好可放三个搜索条件加上查询按钮，如果大于三个则需要再放入下一行，所以是以三个搜索条件为一个分界线。

小于等于三个的情况是属于搜索条件少的，一行就可以放完，这种情况就没有什么可讨论的。

这里只讨论一下大于三个的情况：

单查询框+组合搜索弹框：即只放一个查询框，查询框可以将列表所有字段作为查询条件，但是一次只能选择一个字段作为查询条件。

如果存在多个条件的组合搜索场景，则用组合搜索功能，组合搜索支持单字段和多字段的搜索，多字段的搜索是并且的关系，即同时满足设置的多个条件。

组合搜索的设置功能包含条件的新增删除还有保存，保存功能是可将设置的多条件进行保存，以便下一次使用。

界面设计如下：

全字段放开+默认收缩：即将全部的查询条件展示在界面，但是在初始状态下，默认只展示首行的查询条件，首行的查询条件一般是三个，三个都是使用频率较高的字段，其他行默认收起。

如果有需求就点开展示全部查询条件。

界面设计如下：

三、查询

1. 默认查询

基于当前界面数据量，进入当前界面时，如果数据量较小，可以直接进行全量查询。

如果数据量较大，且查询时间较长，有两种方式：

• 第一种就是进入界面默认不做查询，由用户自行设置查询条件进行查询，这种方式适用于数据量大且不同用户有不同的查询需求的场景。
• 第二种方式默认设置查询条件，一般默认查询条件为时间周期+单据状态，例如近期三个月+用户需要处理的单据状态，这种方式既能提高查询效率，又能直接查询出用户需要筛选的数据。

2. 查询优化

数据基数比较大的情况下，尽量使用使用精确查询，少使用模糊查询。

如果确实有场景需要进行模糊查询，则需要与一般的查询进行分开，尽量非模糊查询条件一个查询接口，模糊查询是一个查询接口，或者后台执行查询时做区分，这样尽量做到模糊查询不影响到非模糊查询条件的查询效率。

另外关于查询分页，做查询的时候默认查询第一页，其他的页的数据在用户请示相应页数的时候再做查询，这样可以也可以提高首次查询的效率。

3. 查询其他说明

查询条件除了排版与设计之外，还需要注明具体的查询方式。例如精确查询还是模糊查询，或者是否需要支持批量查询，针对参照选择的查询条件，是否也需要支持多选查询。

另外为了提高用户体验，还可以做一些锦上添花的功能，例如查询框内容可一键复制，一键删除等。

四、列表

列表页除了显示字段外，需要提供一些提高用户体验的功能。

• 设置显示字段：设置哪些字段默认展示，哪些字段不作展示。
• 显示列的宽度设置：列宽大小设置可通过鼠标拉动进行设置。
• 列字段排序：列字段提供排序功能，单击列自动进行降序和升序排列。

五、导入导出

导入导出功能单独提出来说明，主要是针对大批量数据的场景，如果是数据量较少，则一般的导入导出功能就可。这里的设计主要是针对大数据量。

1. 导入

大数据量采用异步导入的方式，即用户操作导入后，将导入的文件存入临时表；然后后端将临时表的数据进行校验与导入，校验内容包含数据是否正常填写、格式是否正确、是否符合业务规则；当校验完成后再执行写入，完成真正的导入。

整个导入过程状态包含导入中、导入完成、校验中、校验完成、写入中、完成、终止。

2. 导出

导出分为模板的导出与数据的导出。模板的导出只是一个文件模块，不存在数据大小的问题，直接导出即可。数据的导出，包含导出数据范围和导出方式两个方面。

导出数据范围：

1. 导出查询条件的结果集。
2. 导出选择的数据范围。

导出的方式：小批量数据是直接导出就可，大批量的数据导出建议做异步导出。即确定导出后，将导出的条件传到后端，由后端异步执行导出，然后提供单独的数据下载页面下载结果集，结果集的界面需要做数据权限，用户只能查看和下载自己导出的文件。

​Read More