一张报表拿到手里,最先被感受到的,往往是版式。边框的粗细、区块的划分、整体的秩序,决定了这份报表"像不像一份成品"。设计一份表单、排一张薪资单的过程,很大程度上是在画区块——把信息归拢成一个个有边界的区域,再让这些区域在视觉上各安其位。SpreadJS 的边框能力一向齐全:四周的每一条边都可以单独设置颜色与线型,粗细、虚实、双线都在选项之内,单元格里还能绘制斜线,网格线的显示与否也可以随时调整。数据内容的表达手段,此前已经相当完备。真正缺的,是版式上的一处细节——圆角。
表格里的矩形区块天然是直角。四四方方的单元格是表格的常态,也是表格秩序感的来源。可到了报表这一步,需求就变了。表单里的信息卡片、薪资单上的分组区域、报表上的关键数据块,设计上都倾向于用圆角的矩形来呈现,看起来更柔和,也更有"成品"的观感。过去要做到这一点,通常要靠额外的图形对象叠在表格之上,或者干脆导出后在设计软件里加工。表格本身,并不具备画圆角的能力。
圆角,边框上的新一环
SpreadJS 新版本为边框补上了圆角这一环。单元格、单元格区域、合并区域乃至表头区域,都可以设置圆角边框。设置的方式不改变既有边框的使用习惯——在原有边框样式的基础上,指定圆角的半径即可。边框的线型、颜色如何搭配,依旧沿用原有规则,圆角只是在这些规则之上,再给拐角一个弧度。既可以作为样式属性随样式一起落地,也可以在单元格、区域上直接设置,用法与边框体系里其他能力保持一致。
圆角半径的设定,遵循一套简单清晰的规则。一个半径值,四个角相同;两个值,对角成对——第一个管左上与右下,第二个管右上与左下;三个值、四个值,则分别对应不同位置的角度,从左上角起按顺序排列。想给某个区块统一圆角,给一个值就行;想让左上与右下圆一点、另两角保持直角,两个值即可。规则只有一组,理解成本低,表达的空间却不小。配合既有边框的线型,圆角边框可以做出各种质感的矩形区块——细线的、粗线的、虚线的,拐角处的圆弧随线型自然呈现。相邻的单元格若使用了不同样式的边框,圆角会遵循原有的边框优先级规则,以优先级更高的边框为准来呈现拐角,不会在交界处出现样式打架的情况。
整体与单格,各有分寸
在作用范围上,圆角边框考虑到了"整块"与"单格"两种需要。对一个多行多列的区域,可以给区域内每一个单元格都加上圆角,也可以只让区域外圈可见的角呈现圆角,把整个区域呈现为一个完整的圆角矩形。后一种方式在处理报表分区时尤其有用——一组数据形成一个圆角卡片,卡片内部仍然是规整的表格。这两种方式的取舍,由使用者按版式需要决定。
圆角边框对内容的处理,也经过一番考量。单元格的背景色、主内容等原本被单元格边界约束的部分,会随圆角一同裁切,内容不会越出圆角之外。而原本就允许溢出单元格的内容,比如溢出的文字、外部图标,则保持原有的溢出行为,不会被圆角误伤。裁切与保留各按各的规则,不会因为加了圆角而破坏表格原有的显示习惯。遇到隐藏的行列,外圈圆角的计算也会跳过它们,只以可见的单元格为准。
当然,任何能力都有边界。圆角边框对旋转文字等少数既有场景暂不生效,某些与表头、版式组合的特殊情况也不在支持之列,圆角区域之外、仍处于单元格之内的那一小片区域,背景也保持默认样式。对绝大多数常规版式而言,这些限制并不构成阻碍,但了解它们,能让使用者在设计报表时对预期更有把握——哪些设计可以放手去做,哪些场合要另寻他法,心里有数。写明边界,本身也是对使用者负责任的做法。
圆角用在哪里
把这层能力放到真实的设计需求里,几个场景随之清晰起来。
业务表单是第一个。员工信息表、客户资料卡、审批单据,这类表单讲究卡片式的呈现。把每条记录放进一个圆角卡片区域,视觉上每条信息各自独立,界面清爽,也更容易阅读。表单的设计者不再需要借助额外的图形对象,表格本身就能完成这份版式。
分组报表是第二个。薪资单、费用报表、生产统计,这类报表经常按部门、按类别分成若干区块。每个区块用一个圆角矩形框起来,区块之间的边界一目了然,整体又保持表格的秩序。区分的目的是让读者快速定位到所属的组,圆角在这里承担的,是"分区而不散乱"的职责——分块清楚,又不破坏整张表的整体感。
仪表盘与看板是第三个。数据看板上的指标卡,几乎是圆角矩形的天下。单元格圆角边框让表格直接充当看板的载体,指标数据、进度信息与圆角卡片融为一体,报表与看板的界限被模糊,一份文件里既能看数据明细,也能当看板展示。
还有一类场景是整体的视觉统一。同一套系统里的报表,如果都采用一致的圆角风格,交付物的质感是成体系的。圆角边框作为样式能力的一部分,可以随报表模板一起落地,让不同报表呈现出统一的视觉语言。模板设计一次,后续报表沿用相同的圆角规则,整套交付物的一致性就有了保障。
在导出层面,圆角边框也不会打折扣。表格的边框样式本就支持完整的导入导出与打印输出,圆角边框作为边框体系的一部分,同样可以随文件导出、随打印呈现。设计好的圆角版式,交付出去是什么样,打印出来、导出为文件之后依旧是什么样。版式设计的成果,能完整地抵达最终的读者手中。
表格样式的演进,往往就在补齐一个个缺口之间。边框、网格线、斜线,这些能力一点点累积,表格的表现力一点点完整。圆角边框的加入,填补的是版式表达上的一个空白:当一张报表需要"再精致一点"的时候,设计者不必再跳出表格去想办法。过去要绕行到图形对象、绕行到外部设计工具的步骤,如今在表格里就能完成。数据在表格里,版式也在表格里,这份完整,正是报表工具一直在补齐的方向。