从表格入手，减少B端产品改稿压力

 

众所周知，B端产品（To Business）是面向企业、商家等，根据战略目标或工作需要，逐渐将原本繁琐复杂的线下流程系统化、平台化、体系化，从而提高办事效率，降低沟通成本，实现战略目标。

那么听上去如此高端大气上档次的B端产品，在实际的设计工作中，存在哪些直击设计师们内心深处的问题呢？

 

怀揣艺术家梦想的视觉设计师们，在“严谨、严肃、严格”的三大原则下，绞尽脑汁发挥着自己对配色无限的遐想，奋战三天三夜，最终还是只能硬着头皮以科技蓝作为自己第n+1个B端产品的收场；以拥有强大的底层逻辑为傲的交互设计师们，在拿到需求的第一天看到无数漏洞后感到兴奋不已，想了无数功能强大、自认完美的解决方案，最终都还是败给了技术限制、字符限制，并且在调整间距排版的路上，一去不复返。

说到调间距、调排版，就不得不提一提……

 

·那些年我们改过的表格·

提到改表格，相信不少设计B端产品的小伙伴们都能为之一颤。就连sketch强大的组件库功能，都无法动摇改表格在改稿界的社会地位。

 

当然，今天小编不是给大家普及什么是sketch组件库（懵懂期的同学们可以度娘一下，有很多关于组件库的概念文章及基础教程），在研究了很多大厂设计系统、规范、组件库的源文件后，发现了普遍存在的缺口，那就是B端系统最常出现的表格，只有规范，并无可直接调用的组件。亲自创建过组件库的同学们可能也都知道，虽然组件库的建立会使设计工作的效率提升一大步，但它固然有它的局限性，自然关于chart组件的创建就是被大大局限的一种。

 

不过小编没有被现实情况所屈服，大厂素材没有提供难道我们就不做不用了吗？

 

当然不行！

 

作为一个新时代女性，我们要学会经济独立……啊不不不，作为一个新时代设计师，我们要学会资源独立！我们要具备自己为自己的工作创建便利条件、提升工作效率的能力。

·建立适应产品的chart组件·

像做产品一样做适应产品适合自己的组件，以下小编就以表格组件的建立举个栗子。

一、分析建稿/改稿（表格）痛点

    表格需具备随页面做适应性变化的特点，大量的文字元素、图形元素让图层负担过重，所以建稿/改稿时，无论是行的选中/拖拽，还是列的选中/拖拽，都是让人头痛不已。

比如，像这样一个简单的仅三行四列的表格，图层可达几十层甚至更多。无论是视觉设计还是交互设计，在建稿/改稿时，都有可能因为各种各样的原因导致改错或漏改，甚至是1px细微的位置偏移。

 

二、明确组件要解决的问题

    1.行/列选择移动、对齐；
    2.支持根据字段长短进行适应性拉伸；
    3.行/列文字颜色变化；
    4.表格适应页面高度；
    5 .icon的跟随；

 

三、根据产品定性，创建适合自己使用的组件库

表格存在的样式多种多样，我们首先要确定好表格样式，就像做视觉时首先要定风格一样，接下来再根据实际情况去确定我们的组件需要包括的组成部分以及各部分的参数。

 

1、基础素材组件

首先建立好表格用基础素材的组件，包括字号、字体、粗细、颜色、表头底色、表格底色、单行数据底色、描边色、单行过渡色、状态icon等。

2、表格组成拆分

以“列”为单位（带四周描边），分为：左、中、右三部分，其中左侧除了数据列还可能是复选框列，右侧还可能是操作列。利用上述基础素材组件，按照拆分好的表格组成部分，逐一建立组件。

 

3、建立表格列（参数以个人实际应用为准）

以表格左侧边列为例：

步骤一：

选取「color/描边」建立宽为201px的矩形为图层a，选取「color/white」建立宽为200px，高为40px的矩形为图层b，与图层a的左边及上边各留出1px作为描边，并向下复制排列多个间距为1px的图层b，具体数量根据实际情况而定，建议多复制几个。

步骤二：

将图层a底边拉伸至超出最后一个「color/white」1px的高度。

步骤三：

选取「text/normal」排列放置多个图层b中，左对齐。（也可以放置其他素材，如icon等）

步骤四：

将除图层a以外的全部图层打包成组1。置入一个矩形于图层a之上，作为组1的蒙版，蒙版矩形大小刚好与图层a上、左、下边缩减1px。

步骤五：将图层a及蒙版矩形按照下图左侧卡片调整尺寸，将图层b及全部text图层按照下图右侧卡片调整尺寸。

以此类推做出表格其他组成部分的组件，根据需要进行组合即可。经过这样的尺寸调整，将希望固定的元素固定，就能实现表格的任意横向、纵向拉伸拖拽，并且描边始终可以跟随。可见图层清晰程度也大大有所不同。

由于每个人的工作习惯以及软件使用习惯都不同，小编的栗子是根据小编自己的工作习惯来提供给大家一个思路，目的还是要创建一个，属于你们自己的工作“帮手”，甚至不仅仅局限于数据表格，都需要大家在摸索中慢慢开发。