目我主深耕于B端设计中，深知B端表格设计与C端有很大的不同，无论是表格的展示形式以及承载内容上都有非常大的差异。而现在网上有不少关于表格如何计的文章，但要真正落实的少之少，因此今就来聊聊表格，探讨一下B端表格究竟应该如何计。
由表组件类型复，因此分为上下两篇，上篇主要讲基础识点，下篇主要针对流群中的20个问题进行答，欢迎持续关注～
在我们B端表页中，由导航、筛选、表几大模块构成，因为表面积占比最大，页面呈现最为重要，直接影响用户的使用验。
在我们对表格的设计思考过程中，需要注意两项原则：易读与易
者提升使用者表格浏览时的体验，主从信息密度、色彩分隔、以及视觉节奏三方面去理解；后者使用表格时的操作感受，比如捷操作、多数据编辑方面去理解。无论B端的任何页面，表格都必不可少的部分。
把这三种形式讲透，需将数据的形式结合起，我会从展示形式、数据结构、端标签 三方面去解释三者的区别。
表单拥一对一的数据结构，能够让用户明白数据间的对应关系。同时使用表单的门槛低，拥合理的录入形式，比如常见的问卷调查、登陆注册都采取表单的形式。
端展示方面，表单采用的标签一般会包含：text、password、radio、checkbox、button、submit、reset、image、file属性，我们也针对不同的属性行相应的设区分。
列表够将数据在一列中井然有序的展示，保持数据的有序与整洁。列表拥有一对多的数据结构，够户清一条数据的多个对应系，并且多个对应系是相互并列。如在见地待办事项、走查清单中里，就是使单维数据进行列。
在前端展示上，列表中的标签分为有序与无序。
序列表：即顺序的列表，其各列表项按照一的规则排列义，端标签采取的结构。
常有序列表般为数序号（1、2、3、4…）或者母序号（a、b、c、d）
无序列表：无序列表的各个列表项之间没有顺序别之，为并列关系。前端标签上采取的结构。
在多维度数据分析，你是永远逃离不了表格，使用多维度数据进统结构化展示，让用户晰看到在主题下多条数据比，使数据能够进多维度展示，保证数据完性。
在前端，表格都是采取标签进展示，时表格与列分用与标签，我们常说表头，则为标签。要注意，在前端眼表格永远没有列概念，列都是拼接而成。
式始之，我们先义一下表格～
表格是常见信息展现形，它是所有B端组件信息展示密度最高，时涵盖了B端所有场景，此是B端设计个要组件。
在常见的B端产品改版，除了页流程调以，更多是围绕表格而展开系列优化。此表格设计，做为B端设计师基础能力，也是检验个B端设计师是否合格关键素。
1. 表格痛点
形式单一
表格属于形式十分单一的组件，对于没有经验的设计师来说，会认为够调整的地方实在太，往往在思考层面就会有足。对于一个B端表格来说，它需要具备数据浏览、数据增、数据操作、数据统计，因此功多而全，很难思考解决问题思路。
组件联多
通设计师设计单个组件，都会有较好的全量意识。而到了多组件的联时，就会现问题。
比如表格中，除了表格本身，还会搜索、筛选、视图、分页操作，如果不对多组件的交叉使用行思考，也会缺少对于这些场景的设。
数据形式多
在表格中，会承载多种多样的字类，而每一个字类都会有相应的差异。形式的同落到表格上就会有同的呈现形式，在键数值的处上，会差强人意。因此看上简单的一个表格，实会有很多需要设计的点。
深入到表格的内部中，会发能的远远不止于此，如果刚始对表格行梳理，那么设的过程中，对于反复出的表格将束手无策，了让家能够对表格深的理解，我将表格行系统的拆解，结合实际案例，能够让表格浅显易懂。
2. 表格拆解
首先问家一问题，觉得表格一共几部分组，分别什么？给家五秒钟时间思考～
在我看来，表格共分为五部分：
标题
概括整表格的内信息，让用户一眼就知道该表格的用途否符合自己中的预。
在实场景，除了过标题文去形，你可以为个表格去设计不类型图标，这样能够让用户看到图标能联想到内容，这也是现在代码开发平台常见处理。
工具栏
在工具栏排列会有常多讲究，在市上操作区域般可分为单与双状态，可根据自身品要求特进随意变化，会在文章后半部分具体讲到工具栏设计思路，这里不再过多赘述。
表头
概括列主要信息，在用户使用表格，起到数据解释作用，让数据能与进匹配，使用户能够看懂数据。时在表头处会拥有些操作，比如冻结、筛选、排序都会放于此，此需要进留意。
单元格
承载用户条数据，也是个表格核心。单元格大小高都会接影响用户使用表格体验，单元格设计上也会有很多设计思路，在后半部分也他家提供了我自己看法，与大家进探讨，在这个先按下不表。
分页
严格意义上讲，分页是不属于表格，数据过用户所设定阈值时，需要使用分页拆解数据，所以分页和表格是经常联系在起。分页共有：基础型、迷你型、完型三类型。
而如何进行跨页的操作，一直都是页在B端中的难点，需要有好的思路逻辑，在页模块中大家聊聊。
你知表格类型多少决定你了设计表格下限。
虽然在大多数业景中都是使用基础表格，但在B端产品中业的多性使得多殊的表格有它独发挥的空间。
我现在我的B端流群有着类似的问题，他们不道表还存在么的类型，时你与别人之间的认的差距就是你设计优势所在。
1. 基础表格
基础表是根基，是由行与列的单元组成。在使用面上能满用户度查看数据的需求。因为大家很熟，在一章节并不是主角，我们就不做赘述。
2. 树形表格 – 包含关系
当表中的数据为包含与被包含的结构时，采取树形表。
通过逐级大纲的形式来展现数据间的层级系，整个信息结构变得一目了然。这一表格形式现于项目管工具中，如 Teambition、Tapd、飞蛾都有这样的设计。
Tapd
为腾最重要的项目管理工具，在产品设计之初，就考虑到类似情况，你能够在Tpad单列数据编辑点击口，创建子数据，样在项目管理的场下，有着为的互验。
Teambition
前段间，Teambition正式成为阿旗下的公套件，而钉钉的云钉一体化，或许证这庞大的市仍然还要等待间的挖掘。期待资本对于B端行业的更多动作
我们回到设计上，Teambition在9月份经历的改版，变化很，有机以总结一个改版分析分享给大家，为一个项目管理软件，Teambition也拥有树形表的样一共功能，它的添加口出现在每个数据详情页的最下方，同时在视图面，也以筛选展示为：所有任务、仅父任务、仅子任务四种场，更能满用户的需求～
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计模式。在计底层思路上截然不同，产品思路定制化产品思路存在多截然不同的做法，今简聊聊大家遇过的表格工栏计，不做深挖～
在表工具栏的设计中，信息分区与页面透气是非常重要的两个设计核心。
信息分区：
因为工具栏是由标题、筛选、搜索、视图、新建等操组成，而功能间的区分是工具栏设计的一个关键。
当一个工具栏中，需要将此的元素进行组合排列时，必有其排序的规则，时我们就以通亲密原则，对工具栏中的信息进行相应区分
在设计的亲密性原则中，我们可将功相的工具放在一起，如：搜索与筛都是数据过滤的操作，应该放在同一分区；
同样，具栏也会存一些功能点不太相近操作，我们就应该通过分区将其间隔，比如下图中，每功能都将其用线条区分。
然，在信息去区分上，也有强弱两不，是过线条接分割；另是将工具栏进空上区分。此可以过信息区分去检查你工具栏设计是否合理。
内呼吸：
一制化项目中，设师一让自己的页面具呼吸感。B端业务中，信息本身就已足够庞，页面的中的疏密关系就显得尤重。
常列表都承载着繁杂、冗余数据，是个信息密；工具栏作为与表格关联上部分，呼吸感便成为表格要素。常在表头处要将空尽量分散开，这样才能满足体疏密关系。
3. 表格设计
经常看到些十分冗杂表头，甚至它丧失了表头真正含义。在实情况下，尽可能明确、简单讲出表头内容，以免造成表格宣兵夺主。然也会存在些专业术语，这时候，个Tooltips再合适不过。
4. 单元格设计
表格中，单元格的行高一直都一难以控制的变，因行高会直接控制表格中的信息密度，信息密度永远一无法化的元素。我们设过程中，需采取盒子模型的方式，让的设加落。
知识点补充：盒子模型
从端发言，单元格一基础的盒子模型。HTML中的所元素都可以看作一盒子。我们所设的页面也由这样的原理去还原出。
- Margin(外边距)：清除边框外的区域，外边距是透明的。
- Border(边框)：围绕在边距和容外的边框。
- Padding(内距)：清除内周围的区域，内距透明的。
- Content(内容)：盒子内容，显示文本和图像。
单元格容
容一般为字、图标、头像等等，而对于数据中你想要格外突的容，这里称为键数据标识别。从盒子模的角来看，它就是当中的Connect，但单元格容中，一般会有一些处技巧：
键数据标识：
户在使表格时，会经留意一些键的数据。如数据的状态、变的多…
如果系统中，能够很明确知道用户了解的数据时，便可关键数据行标识。这样能够帮用户速到自己的信息，减少数据寻找所化的时间。但如果对关键数据标识出误判，这条数据便一条十分扰的数据，因此这里的设，需慎重考虑。
比如飞书的员与部门中，对于账状态就一关键数据的标识，一方面用户可以速了解到已激活的员，另一方面对于未激活状态的行突出展示，同时给予用户未激活后的再次发送提醒的操作，对用户使用的优化提升。但，如果将不重的数据行标识，例如手机，那么这将会一令人痛苦的设。
人员角色展示
人员角色展示表格中十分常见，通常会以用户称+的形式展示。
在真实场景表格，头像需要予默认形，比如钉钉、飞书是以用户“姓”作为头像默认值，而在多个员色展示时，需要考虑特殊情况，论是极值省略展示与获取全量数据，都需要我们进设计上处理。
度条
度条属于关键数据的一种，它所涉及到的功能与图表表格类似，能够直观展示数据的占比，方便用户对于多条数据间的行判断。度条常见于“、使用”的数据中。
表格空白处理
表格中常出空数据的况，表格的留白对于用户言会造一些困扰，特别存与页面中的面积留白，感觉数据加载出。因此表格空白数据处理，可以使用“-”行默认展示。
单元格行
单元格行一般由：字大小、字行、左右上边距共同组成。
从盒子模型的角度看，它就其中Padding。因此行高的确，由方四条件共同组。
- 文字大小：一般出现在表中的文字大小在12-16px之间，通常13、14px最为常见，建议大家设计也在此范畴内。
- 字行： 行是一行本垂直方向的，这个和字无，字容水平中。可设置为字号的1.2-1.8倍，字与分割线间距离可设定为字号的1-1.5倍。
- 距（Padding）：表格中的距分左右下四方向，左右下恰好就对应端去编写Padding码的顺序，对页面验收时，便可采取这样的形式。
- 单元格高可配：单元格高接影响着信息排列密度，而在实业务，真正落地也有着不做法。
对制化项目的发中，通常会设一套设师认加合理的单元格高度，一般32px-56px区间内，很多通用化产品中，存多设备屏幕分辨率的差异，了让每一分辨率下的产品都能够较好的展示效果，于乎将选择权交给用户，表格左下角会设置舒、标准、紧凑三种高度满足需求，使得表格加落合理。
结：个单元格高，是由这三部分组成，它们嵌套与组合，所形成了单元格高
表格分割
在表格设计，条线都有着它存在意义。
当表格中展示横线；隐藏纵线。
用户的横向阅读验更佳，强一条数据的完整，能够让用户进行快速的对应。
当表格中展示纵线；隐藏横线。
用户的纵向阅读体验，强调数据下间的对比，能够让用户找到同一纬度数据下的对比。
比如一组织架构的员列表中，我相信家都设过类似页面，同样的设方式，一采取展示横线、一展示纵线，结果明显，员需阅读完整条数据，因此横线会加合理。
当然，我们日常的设中，展示横线的场景显然会多，但我们日常使用时，数据对应的场景还会多，这需强的设形式：
行、列冻结
当表格的行与列的数量过多时，会导致一屏展示，而表格中的键信息与操作是需要在任何时候都展示，这是采取行、列冻结，户快速触达。
- 表头冻结：通常出现在垂直滚动时，通固定表头的信息，能够让用户阅读时对应不同的数据，使用户更理数据。
- 首尾冻结：通现在水平滚，通过固定首列的属性字及尾列的数据操作，来满足户对于一列数据的认知，从而使户进行快速操作。
5. 分页设计
在分页设计分析，我们需要分页元素进拆解，才能明白分页类型所带来不。
表格信息：会展示表格信息数据量、更新时、默认排序等…
数据总量主要展示用户需要浏览的内容的总量；常见于管理后搜索、筛选符条件的数据记录，搜索结果页通常会展示这个息，这让销人员在操作有心理预期。
更新时间主要是展示用户当前表所操时的期时间；常见金融类产品中，他们对表中数据的时效尤为关注，样以方便用户对表数据中的有效进行判断
默认序方式要是展示表格中是按照哪一个字进行的序；通这种做法多现于表头直接展示icon，但对于可配置的产而言，随着列数的增多，你越来越到你想要的默认序方式，因此在表格的固定位置展示，就再好过（记住，只针对特定场景）
页面展示数：结构「X条/页」
它能控制个页展示多少条数据；在系统有很多数据时，你可以接过「页展示数据 * 分页数」 接算出个表格数据和。
上一页和下一页翻页：页中基本组成素通过用户点击上一页、下一页的按钮，实现表格的翻页功能。翻页通常会根据景不同，去略翻页中的不同素，比如在下面马上那个讲的三种翻页类型，但是上一页和下一页是绝对不可略的。翻页也如同你翻书一，可以进行对数据的逐页阅读，遵从用户之前的使用习惯。
当前页码：当前页码说明页面中数据当前所处的位置，方便用户进行翻页的操。
相邻页码展示：相邻页码通展示前后两页，如你在第6页时，页面需要展示：4、5、6、7、8；但页码在第1页时，就需要展示：1、2、3、4、5；页尾同。
多分页：当表格数据过多时，就需使用分页，同样，当分页过多时，我们需行处理，就省略，采用多分页，去展示多余的分页况，当用户需查看多的分页，点击多图标即可。
页数：代表大概会有多少页此类数据，过使用页数才能让用户知
总页数说了内容一共有多少页，就像一本纸质书有总页数，一本有声书有总长；通过这个素，用户才能了解内容的多少，对整理内容有个把握。
页码跳转：页码跳转帮助用户从当前页面跳转到其他某个页面；比用户在搜索某件品，按销量排序，时浏览到15页，满意度越来越低；是打从前5页选一个，时就能通页码跳转快速跳转到1-5页。
简洁型：
当页数量较少，通常在7页以内，就只有最基础的展示：上一页、页数量、下一页。
迷你型：
当页面空间不足或者降低页的视觉响，可以采用迷你型，主要为当前页/总页数，可以直跳转某页面。
完整型：
当表格数据较多，为了足更多的用户需求，可以根据需求选择页类型。比较完整的页还包括如下功能：显示总数、调整每页显示条数、直跳转某页。完整型的虽然足各种功能需求，但是所占空间较大，所以要根据的需求理拆使用。
页固定：
在表格中使用页，除了选择理的页类型外，还需要注当数据过多的候，是否要固定页。这个需要根据需求来决定，如果用户翻页频繁，表格数据别长，就可以考虑页固定在底部，免得每次用户翻页都要跑表格的最底部才能页，还可以在表头也放迷你型页。但通常在计表格的候就没有固定，也少使用表头页，所以根据需求来定。同按钮的计也会存在类似的情况。、
另外就是当数量过少，只有一页或者无数据的候，是不需要页的，这个候最好去掉页，展示在这没有什义了。但多候计没有做，开发也就不管了。
老读者道，我反复去强“场”一概念（比在导航菜单、筛选、弹窗、图标中经常提到一词），因为你只有明白用户正的业务场，才能够正的明白用户的痛点。我们回到表中，在表的场主要分为类不同场：数据浏览、数据新增、数据操、数据统计与通用场。我通不同场的梳理分析我们在不同场中存在哪优化点，以进行深探讨。
1. 数据浏览
在数据浏览的场中，质上是对大量数据进行寻找与确认。用户需要在此场下进行高效准确的数据查找。而伴随着用户的寻找，就需要使用表当中的工具进行辅助查找，比筛选、搜索，工具的出现，能够帮助用户进行数据的清洗，使得用户想要的数据能够快速的被找到。
如：我们公司的销售人员在每天早上，都需要 check in 今天自己要跟进、访的客户，销售人员就会通过表格中的各种工具，帮助销售人员到自己想要的那分数据。
常见行及设点：
数据筛选浏览：过自己数据定了解，结合各筛选条件，配合到用户想要筛选结。
数据多选：用户可以通过多选，为寻找的数据进行标记，方便之后的操作。
2. 数据新增
数据新增本质上是将复杂的数据结构，通过系统字段类型的相应规则，录入保存系统中。这也就常说的增删改查的“增”
比：销售人在对新增的客户进行登时，需要登司名称，联系人，联系方式，跟进录等等。且需要不断更新跟进录，因此销售人在表上的新增是一个非常高频操～
3. 数据操作
数据操分为对单个数据的操、单行数据的操、行数据的操三种情况
单个数据的操作，就是我们见的快捷编辑，可点击快捷编辑按钮，对单个数据进行录入，
何需捷编辑，售使用场景中，使用表格去编辑一条信息一循序渐的过程，比如对客户行沟通时，数据的不断改，内也不停修改，导致用户需每次入用户详点击编辑之后能行操作，表格内行捷编辑直接满足实时编辑的需求，交互层面这一非常OK的需求
落到开发层上，意味着要在用户进入表格去判断权限，才能让用户知是否能够击，击过后需要判断段属性，明确该段是与哪些段进联动
条数据主要通常会采取种路径进行操作：进入用户详情页界面，对一整列数据进行编辑，这种情况通常都需要多个数据进行理，因此进入编辑页面更容易寻找，同也是最为正常的一种做法
行数据操主要采取选的操方式：当用户想要对条数据进行操时，就需要对个数据进行checkbox 的勾选，从而满行操的需求
4. 数据统计
数据统计主要针对用户需要审查分析。目的是在通大量的数据分析去得出自己的某一结论，由关注的数据有主次之分，数据与数据之间也有内在联系，用户更加跳跃地扫视页面，而且更加反复地审查数据。例，销售人需要查阅月的销售情况，进到品销售明细表中，分析月的经营状况
了解了表格的使场景过后，针对同的场景，在设计上它的思路就会有同
使用就会不同的设思。由于篇幅原因，我们主了解了表格的基本形态，如果对于表格的场景还不太清楚，我会下篇中与家通过20问题，了解B端表格中究竟应该如何设～
欢迎关注作者微信公众号：CE青年
浙公网安备33011002017549号