编辑导语：在B端产品设计中，涉及到比较多的就是数据展示列表。那么，数据展示应该怎样进行设计，在设计过程中有需要考虑哪些因素呢？本文作者结合真实场景下，以实际需要找合适的控件匹配方案。通过实际的操作和分析，为我们总结了数据展示控件的应用方法，与大家分享。

上两篇说到模态框和输入控件的应用，将数据查询的条件、逻辑、方式，整理清楚后，那么下一步的内容就是如何将查询后的数据更好的展示给使用者看。到这一步设计师或是产品应该思考的是如何将众多分散的信息，有序的、直观的展示出来，并且辅助使用者解决问题，为产品提效。

数据展示主要以表格为主，由业务需要对表格进行扩展，结合其他组件使用；其次是列表，列表与卡片样式结合的较多。

依然要牢记的一些设计原则，即：简洁清晰、灵活高效

• 简洁清晰：剔除不必要的装饰元素，避免过度；
• 灵活高效：在现有的规范指导下，根据不同业务的不同需求，快速组合多种样式的表格，提升设计效率，也要兼顾减少开发代码冗余；

一、表格

基础表格包括几点基本要素：表名、列名、数据、翻页，这些构成了表格的主体框架，而在真实场景里使用的表格都是升级版本，补充了更多功能作为辅助，比如排序、筛选、操作、导入导出……

• 数据筛选：不同于查询模块的筛选方式，直接在表头标签操作，一般会以“倒三角形”图标展示，通常应用在这一条数据处在哪种状态，例如：进行中、未开始、已完成、已取消、审核中；
• 排序：现在比较少的应用，因为排序大多是对时间上的排序，而一般一个新的数据也是按照时间倒序展示，在第一行展示；
• 操作：对某一条数据的操作，或查看或编辑或删除；
• 导入导出：对超过一定量的数据，会进行导入数据，导出数据，当然会有遵循一定的规则，才能和线上表格数据类型一一对应上；

实际工作中，我们都是根据产品需求和业务需要对表格进行补充辅助功能的，在设计表格的时候，总结下来通常会遇到下列几类问题：

• 有层级关系的数据该怎么展示？
• 一条数据有父子关系，该如何展示？
• 一条数据类型太多，表格容不下怎么展示？
• 一些数据其中的一类型字段较长，其他类型字段段，甚至只有几个字，该怎么展示？
• 一组数据，数据不全，类型不全，部分数据是共同的主体，该怎么展示？

除此之外还有树表结合的、表格套娃

对于这些常见的问题，在设计时会充分考虑这一领域的专业操作者，特别是从事医疗行业的专业人士，严谨的数据要求会比较高。