B端系统界面通用设计
人人都是产品经理
2023-07-07 12:14:10
不同系统面向不同用户，其设计也会有所不同。本篇文章以B端系统为例，分析其中的界面设计。希望能对产品设计的你提供一些参考。
B端系统主要是面向企业用户，追求高效、便捷，是在拉通业务流程的基础上进行提效，缩短业务的处理周期。
【资料图】
在这样背景下的B端系统，界面设计上，更偏重于简单高效，今天就简单谈谈我对B端系统界面的一些通用设计。
一、按钮放置位置一般没有特殊要求，可放左边也可放右边，但是一定要遵循一个原则就是全部界面尽量做到统一。即要么统一放在左边，要么统一放在右边，尽量不要出现部分界面按钮放左边，部分界面按钮放右边的情况。
目前个人涉及到的系统按钮大概率都放在左边。依次按照操作频繁排列，即从左至右，使用频率由高到低。
二、搜索条件搜索条件：搜索条件以三个搜索条件为一个分界线，界面的一行的空间刚好可放三个搜索条件加上查询按钮，如果大于三个则需要再放入下一行，所以是以三个搜索条件为一个分界线。
小于等于三个的情况是属于搜索条件少的，一行就可以放完，这种情况就没有什么可讨论的。
这里只讨论一下大于三个的情况：
单查询框+组合搜索弹框：即只放一个查询框，查询框可以将列表所有字段作为查询条件，但是一次只能选择一个字段作为查询条件。
如果存在多个条件的组合搜索场景，则用组合搜索功能，组合搜索支持单字段和多字段的搜索，多字段的搜索是并且的关系，即同时满足设置的多个条件。
组合搜索的设置功能包含条件的新增删除还有保存，保存功能是可将设置的多条件进行保存，以便下一次使用。
界面设计如下：
全字段放开+默认收缩：即将全部的查询条件展示在界面，但是在初始状态下，默认只展示首行的查询条件，首行的查询条件一般是三个，三个都是使用频率较高的字段，其他行默认收起。
如果有需求就点开展示全部查询条件。
界面设计如下：
三、查询1. 默认查询基于当前界面数据量，进入当前界面时，如果数据量较小，可以直接进行全量查询。
如果数据量较大，且查询时间较长，有两种方式：
第一种就是进入界面默认不做查询，由用户自行设置查询条件进行查询，这种方式适用于数据量大且不同用户有不同的查询需求的场景。第二种方式默认设置查询条件，一般默认查询条件为时间周期+单据状态，例如近期三个月+用户需要处理的单据状态，这种方式既能提高查询效率，又能直接查询出用户需要筛选的数据。2. 查询优化数据基数比较大的情况下，尽量使用使用精确查询，少使用模糊查询。
如果确实有场景需要进行模糊查询，则需要与一般的查询进行分开，尽量非模糊查询条件一个查询接口，模糊查询是一个查询接口，或者后台执行查询时做区分，这样尽量做到模糊查询不影响到非模糊查询条件的查询效率。
另外关于查询分页，做查询的时候默认查询第一页，其他的页的数据在用户请示相应页数的时候再做查询，这样可以也可以提高首次查询的效率。
3. 查询其他说明查询条件除了排版与设计之外，还需要注明具体的查询方式。例如精确查询还是模糊查询，或者是否需要支持批量查询，针对参照选择的查询条件，是否也需要支持多选查询。
另外为了提高用户体验，还可以做一些锦上添花的功能，例如查询框内容可一键复制，一键删除等。
四、列表列表页除了显示字段外，需要提供一些提高用户体验的功能。
设置显示字段：设置哪些字段默认展示，哪些字段不作展示。显示列的宽度设置：列宽大小设置可通过鼠标拉动进行设置。列字段排序：列字段提供排序功能，单击列自动进行降序和升序排列。五、导入导出导入导出功能单独提出来说明，主要是针对大批量数据的场景，如果是数据量较少，则一般的导入导出功能就可。这里的设计主要是针对大数据量。
1. 导入大数据量采用异步导入的方式，即用户操作导入后，将导入的文件存入临时表；然后后端将临时表的数据进行校验与导入，校验内容包含数据是否正常填写、格式是否正确、是否符合业务规则；当校验完成后再执行写入，完成真正的导入。
整个导入过程状态包含导入中、导入完成、校验中、校验完成、写入中、完成、终止。
2. 导出导出分为模板的导出与数据的导出。模板的导出只是一个文件模块，不存在数据大小的问题，直接导出即可。数据的导出，包含导出数据范围和导出方式两个方面。
导出数据范围：
导出的方式：小批量数据是直接导出就可，大批量的数据导出建议做异步导出。即确定导出后，将导出的条件传到后端，由后端异步执行导出，然后提供单独的数据下载页面下载结果集，结果集的界面需要做数据权限，用户只能查看和下载自己导出的文件。
本文由 @默忧 原创发布于人人都是产品经理，未经许可，禁止转载。
题图来自 Unsplash，基于CC0协议。
该文观点仅代表作者本人，人人都是产品经理平台仅提供信息存储空间服务。
