B端中后台产品中，列表页和表单页占了80%以上的页面，设计师在设计过程中需要不断打磨，设计出符合自己产品特性的列表。
下面我会从两个方向：表格、查询，说说列表设计的一些细节，话不多说，让我们开始吧！
表格作为信息密度最大的组件，在设计的时候要考虑数据的可读性。可以从以下几点入手：
对齐方式：比较常用的是左对齐，数字金额百分比一般是右对齐，方便百分号、小数点和千分位的对齐。
斑马线：尤其是屏幕较宽的时候，两个字段隔的比较远，在眼睛移动过程中容易看错行，斑马线就是解决这个问题。
B端产品尤其是ERP这种数据密集程度很高的产品，对空间的利用要求是很高的，因此在设计的时候要充分考虑展示的 效率，可以从行高、列宽等角度去设计表的细节。
比如字段显示不完整，这时候就需要手动支持调节列宽，或者悬停tips展示全部内容。
再比如，想要复制某段内容，而文字展示不全，又不支持调整列宽，这时候要么在比较常用于复制的字段后跟个“复制”图标，要么悬停出现tips的时候鼠标移上去不会马上消失，这样用户就能框选文字复制了。
表格设计的时候不一定能够覆盖所有用户和场景，因此需要预留一些灵活调整的空间，下面介绍两个常用点：
调整字段宽度：表格内容有些长度是未知的，在使用的时候发现信息看不全，因此通过拖动可以快速调整字段宽度。
操作列的设计蕴含了太多内容需要考虑，设计师在设计的 时候很容易忽略。
形式：主要有图标按钮和文字按钮。图标按钮主要用于比较简单易懂的一些常规操作，优势是长度可控，容易对齐。劣势是，有时候需要悬停上去才知道含义，不够直接。文字按钮用的范围比较广，简单明白。缺点是长度不可控，不好对齐。
数量控制：一种是根据真实的操作数量设定固定列宽度规则，操作项超过一定数量或一定长度做“更多”按钮收纳。
另一种是默认不展示，鼠标悬停展示该条数据需要展示的操作，这样既可以解决信息展示面积问题，又不需要考虑和其它行数据的操作对齐，还不需要定操作列列宽规则。缺点是，不够直接，如果不悬停就不知道还有操作项。
只看已选：在选择数据的时候，为了便于一眼看到选中的数据，会做这么个操作。
已选数量：表格的选择，默认一般是不支持跨页选择的，所以产品或者设计需要要求开发支持跨页选择，而一旦支持跨页选择，就容易忘了到底选了多少条，因此会展示选中条数，以及一键清空选中。
查询条件和操作按钮放一行，一般只会放两三个查询条件，输入或选择后立即执行查询，不需要单独点击查询按钮。
这种方式的好处是省空间，缺点是默认展示的筛选项比较少，需要再点击“更多筛选”才能看到更多。
需要注意的是：输入查询一般是输入后立即执行查询，容易导致执行过于频繁（输入一个字符即执行了），因此会做防抖设置，可以在输入0.5s后执行；再一个，这种展开收起的情况，用户容易看不到隐藏的筛选，因此需要一些标记，比如展示已选择的数量。
将查询条件单独划出一个模块，可以一次性展示多个查询条件。
好处是，查询更便捷，还可以做更多的拓展性方案，如用户可以自定义高级查询方案；缺点是占空间，对于小分辨率电脑不是很友好。
想要把列表做的更强大，就要把很多能够做的细节做好，细节决定成败。以上就是今天的分享，我们下期再见！
注：以上文中配图均来自于网络或应用截图，仅作学习分享使用。
