指南|B端设计指南06——表格（上）( 三 ) 表单|组件|指南|前端|设计|表格

同时在视图层面，也可以筛选展示为：所有任务、仅父任务、仅子任务四种场景，更能满足用户的需求～

文章插图
3. 子表格 – 嵌套关系当一条主数据下有多条数据结构不同的关联数据进行嵌套时，这时候就可以用子表格进行创建。它能够对主数据进行更加细致的解释，详细的了解主数据中数据的含义。
从表象上看，就是在一个表格中还嵌套着另一个表格比如在对某集团对旗下子公司的销售表格中，它能够通过嵌套子表格的形式，将每一个子公司下的销售人员的销售记录进行记录，从而能够更加细的了解到每一个公司、每一个人员的具体情况。
在国外报表中，这类表格很少出现，而在中国的报表中，嵌套子表格算是一种不折不扣的中国式报表。当然这里我们依旧可以深入理解，比如在两个表格之间，用户是通过什么样的方式建立一个父子的关系？
表格中当父数据删除时，子数据如何处理？
设计上对父子之间的关联有着何种限制，这都是我们需要思考的，因为这里牵涉到业务实在太多，我也无法抽象出一个规律供大家学习，因此只有具体问题具体分析。

文章插图
4. 交叉表格/表头分组 – 两条数据在形式上有交叉当一个表格里面有多条数据在同一个小范围的维度进行展示时，它就是交叉表格。从表象上看，就是表头有很多分组进行区分，因此它也叫做表头分组。
它能够通过硬拆分将数据进行切割，但是这样数据的易读性就是有很大的差距。
比如在2010-2020公司年度收支表格中，需要同时展示每一年份的收入、支出与利润，使用交叉报表能够让用户一眼就是看清数据，而基础表格却不行。交叉表格也算是中国式表格中的一种，能够满足具体业务上的需求。

文章插图
5. 图表表格表格数据的另一种展现形式当一个表格里面有多种图表数据进行展示时，他就是图表表格。
在对一些项目做定制化开发时，这是十分常见的场景。用户点击某一数据后，直接跳出数据的统计图，方便用户进行对比。同时这一功能也可以通过仪表盘这样的功能去解决，也就说到国内最爱做的数据可视化。
三、表格的设计1. 表格尺寸这是很多人都会忽略的一个点，主要是大家对于表格的理解各不相同，也没有具体的文章对于表格尺寸有个非常明确的限制，在这里分享一个我常用的数据点，用于判断表格设计的优劣：表占比。
表占比：表占比是指在1920×1080的屏幕大小下，表格占整个页面的比例即：表格面积 / 页面面积 = 表占比这里需要指出，这里的表格面积是指，表头+单元格+分页（不包含工具栏）。

文章插图
在我对十几款主流B端软件的总结分析中，惊奇的发现大多数产品「表占比」都是在65-70%之间，而一些不注重交互设计上的产品则会有所偏差，那为何65-70%是一个更为合理的数据？
因为只要在页面中出现表格，就代表这个页面一定是以表格作为核心。
而表占比低于65%，代表页面中的表格不处于内容的核心，你需要重新审视这个页面所需要传达的功能。如果表占比高于80 %，则代表表格出现面积过大，要考虑用户是否能够接受如此大的占比。
因此，设计的合理性来说，占比在65-70%之间能够保证数据展示的合理性，同时这主要是针对CRM产品，大家可以使用这个占比去衡量自己设计的B端产品～
当然这样的情况并不是一尘不变的，B端最大的魅力便是业务逻辑，我们来看一个看起来像是反面的例子：在销帮帮中，表占比为：61.2% ，看似是一个并不合格的成绩，而且数据十分异常，让我想要深挖，为何会如此的低。

文章插图
通过进一步的分析，发现销帮帮是一款与钉钉生态深度绑定的产品，其产品只能通过钉钉软件进行使用，而钉钉本身默认并不是1080px的宽度，用户打开并且全屏的尺寸偏小。
默认尺寸大小的不同，最终让销帮帮选择去满足业务而牺牲表占比去换取更多的功能。
2. 工具栏设计因为在B端的工具栏的设计中，市面上缺少思路与方法的指导，会出现非常多的问题，因此我展开讲讲工具栏的设计，就不出单独系列进行讲解～
首先，对于工具栏，不同的产品，会对它有着不同的定义。比如在Apple MacOS 系统当中经常提到的Toolbars和Toolbar Items；又或者是Microsoft 产品中采取的Ribbon设计模式。