B端列表页设计总结

列表页脑图

左侧导航栏

全局导航

1、导航栏可折叠收起菜单。

2、收起时，鼠标悬浮在图标上同时右侧弹出菜单栏，然后触发菜单文字。

顶部导航栏

• Tab摆放位置（什么时候在上，什么时候在下？）

1、根据tab的层级来确定位置，最高层级在上，不同流程层级在下。

Tab在上：用户明确自己想要查找的目标在哪个tab并且需要一眼看到所有概况（想要查找数据时，直接到对应的tab下查找）。

Tab在下：需要看到查询的结果在各tab下的分布情况。

筛选/搜索区

1、筛选区包括搜索项、查询、清除查询；如果搜索项超过一行时，需要「展开、收起」按钮。

2、折叠展开设计：默认显示一行将使用频率高、覆盖面广的1-3个显示出来其他的隐藏。（用户频繁使用的筛选条件能一眼找到）。

3、按钮固定在最右侧不变，搜索项可进行自适应。

4、筛选条件：

• 交叉筛选：选择筛选条件后，需点击「查询」按钮才能触发筛选条件。
• 实时筛选：筛选条件不存在交叉，可以实时筛选。像“流程状态”此类固定选项类，要不要提供“勾选即执行搜索”功能？用户可能还需要综合其他搜索条件一起查询，如果执行搜索可能会打断用户刚才的输入。
• 时间筛选：根据真实场景来提供快捷选项，比如：昨天、最近7天、最近30天...

全局操作

1、功能性按钮和批量操作（比如新增、导入、导出...）

2、根据使用频率进行排列新增＞导入＞导出；使用频率高的操作采用高亮显示。

3、如果按钮太多可进行操作项分类。

表格栏

表头

1、在能够概括的情况下，尽量简练、准确，一般可根据上下文关系进行简化，以达到节省表格头部空间和减轻视觉压力的作用，让用户注意力聚焦在数据本身。

2、对于比较复杂的表头，可以跟一个释义标识，鼠标悬停时出现该字段的详细解释。

3、表头筛选、排序功能

• 表头字段太多怎么办？

提供表头筛选功能，依据用户关注度最高的字段进行排列。

• 哪些字段需要排序功能？

需结合业务场景具体分析，一般来说，编号、时间、价格字段，提供正序、倒序功能。

• 默认排序

考虑用户第一次进入列表页的初始化状态，保证用户进入页面时大概率能直接看到自己想要的东西。

表体

包含多选列、数据列、操作列

• 哪些字段可以前置？

特殊处理操作的按钮、字段优先级、状态可以前置，方便一目了然。

• 表格字段太长该如何处理？

1、全部展示（缺点：利用滚轴滑动次数太多用户视觉容易疲惫）。

2、较长字段用“…”展示，防止字段重复，对重要字段进行快速区分、对比（优点：每行可显示较多的信息 缺点：想要看全信息，只能鼠标移入字段出现气泡显示完整信息）。

3、换行，保持行高不变，改变文字距单元格的上下间距，最好不要超过3行，多余字段用”…”显示（优点：尽可能显示全部内容 缺点：同2）。

4、字段优先级分类，做折叠展开设计（筛选信息层级较高的字段放在表格栏，次要信息放入二级表格）。

5、数据库中没有该字段，用“-”，数量用“0”后边有小数点、后位数保持上下单位一致。

• 表格设计如何降噪

1、让用户将注意力放在数据信息上，而不是表格底色、边框

2、不使用斑马线设计、分割线样式轻盈、去掉不必要的装饰和颜色

• 单行操作项位置如何处理？

基于业务、基于场景

比如用户以处理订单为主，操作项建议放在第一列，方便用户操作。

如果用户以查看信息为主，操作项一般放在最后一列。

• 如何处理由于用户权限不同或者状态不同这两种原因，使得每行的数据拥有不同的操作项？

可以采用下拉框设计

• 行高

1、行高=文字行高+上下间距

2、文字行高可以设定为字号的1.2~1.8倍，上下间距可以设定为字号的1~1.5倍；行高影响每行信息的易读性。

3、一般行高为32-56px

• 列间距、列数、对齐方式

1、采用8px网格作为基础单位，来定义各组件和模块间距，因为目前主流桌面设备屏幕分辨率在垂直和水平方向基本都可以被8整除，使用8px比较普适。

2、最好列数在7±2

3、对齐方式：文本采用左对齐，金额及跟金额相关的百分比、操作项采用右对齐

• 分页器
• 一页展示多少条合适？

一页最好能在一屏展示，避免用户来回上下滚动，比如固定为展示10条。

用户特殊使用需求，不适用以上规则，一页可能展示10条/20条，都可以。

视觉稿