B端产品通用功能：web列表页设计
时间：2023-09-29 18:00:01 | 来源：网站运营
时间：2023-09-29 18:00:01 来源：网站运营
B端产品通用功能：web列表页设计：
B端产品有许多通用功能，例如：角色、权限管理、数据字典管理，列表，报表。这些功能模块在任何B端产品设计中都是相同的。看了杨堃老师的文章决定梳理下这些功能组件。
此前我在设计列表时，通常参照系统已有的列表，没有过多思考，直接复用，在体验市面上其他产品并阅读相关文章后，结合自己在实际工作中遇到的列表进行了总结，以供大家参考，希望能对大家有所帮助。
列表的作用简单来说就是帮助用户快速查询到想要的数据，我们将围绕此来展开讲述列表页的设计。
列表设计总结
操作
操作区通常页最顶部或者靠近列表页的地方，用来进行新增、审批、导入导出等操作。
导出可根据筛选条件导出相应数据，也可导出某条数据（例如账单：导出的excel内容通常来说相比列表页更加丰富）。
导入数据时通常采用新页面或者弹窗的形式引导用户上传文件。
步骤一：下载Excel模板，根据模板要求填写；
步骤二：上传，每次上传条数做限制，数据量大容易造成超时；
步骤三：若上传的文件有不符合格式的内容，将问题数据下载修改并重新上传；
合同大师
查询
查询区主要帮助用户快速定位数据，展现形式主要为tab页、时间选择器、单行输入框、下拉选择器、复选框等。
- tab页可以让用户快速定位到想查询的范围，无需过多思考
- 时间选择器可根据需要提供快捷选项：最近一周，最近一个月，最近三个月，精确到日期或者时分秒看具体需求
- 单行输入框
可对单据类、ID类、名称类等进行查询，通前两类为精准查询，名称类可模糊查询处理
使用下拉选择器时，如果枚举值交少，仅有2-3个，建议复选框的形式平铺，选项太多可使用有搜索功能的选择器，或者级联选择器。
在筛选项的选择上，需要结合列表数据进行综合考虑。一般来说检索项越多越能帮助用户精准定位数据，但是过多的检索项也会对用户造成干扰。此处结合用户使用场景即可。
列表
列表区是整体页面的核心区域，通常分为数据展示和数据操作两部分。
数据展示列表展示字段较少的情况下可全部展示，而字段较多的情况下，需要有所取舍，挑出关键数据项展示，如果展示过多字段用户需要横向滚动来查看数据，影响使用体验，此时可通过自定义表头解决，提供两种交互方式供大家参考。
合同大师
通过勾选显示想要的字段，利用拖拽的方式调整表头顺序，优点：拖拽的交互更利于排序 缺点：若表头较多，下拉框的形式去勾选不方便查找。
udesk
左侧显示全部可用字段，用户可以通过搜索筛选快速定位想要的字段，通过《 》按钮增加删减，右侧通过选中字段，点击上下箭头进行排序，优点：方便定位想显示的字段 缺点：排序不变，需要一下下点击上移或下移。
每个页面到底展示多少条数据合理呢，为了减轻数据加载压力，并减少用户上下滚动，可以采用分页解决，可默认展示10条数据，通过分页来自定义每页展示的条数，也可跳转到指定页数。
每页展示数量过多时可以选择冻结表头，便于用户知晓当前查阅的是什么数据，有些数据可以一眼看出，有些则需要对照表头，否则数据量过大时用户需要反复滑动。
排序通常来说，数值、时间这类数据需要进行排序，提供正序倒序功能即可，默认排序方式根据具体应用场景。
操作操作列通常放在列表最右侧，包含修改、删除、启用、禁用等相关操作。
文字链接、按钮或者icon的形式。文字链接与按钮比较常见，icon通常使用于用户熟悉且能望图生义的操作，例如：修改删除等，若操作项较多可折叠部分操作。
泛微
在线咨询
