B端表格排版设计：让数据控一眼看懂的3个细节
在B端设计里, 表格常见得如同吃饭一般, 到处都有它, 只要B端产品存续着, 这B端产品旨在为企业降低成本并增进效益, 有诸多数据得借助表格才能妥善地实现可视化呈现, 同时表格被普遍认定为展示结构化数据最为明晰、高效的形式, 很多B端用户是数据控以及性能控, 他们相当在意数据, 所以谈及B端, 就少不了会谈及表格, 因为表格是数据收纳的绝佳容器, 它的身影就会存在, 它得依附表格才能良好地存活, 下面我们要详细聊聊表格中存在哪些不曾被人留意的颗粒化要点。
一、 表格的含义
存在这样一种事物，它通常被称作表格, 其会把相关的数据以及信息, 按照行与列这种结构化的形式去进行排列, 目的在于获得清晰且准确还具备高效性的呈现效果。而在B端设计这个范畴里边, 表格属于是一种重要的信息展示以及处理工具, 它能够助力用户对数据展开有效的管理。
二、 表格在 B 端设计中作用
三、B 端表格 5 大组成部分
1. 筛选区
筛选区是由两部分予以构成的, 一部分是搜索, 另一部分是条件筛选, 其中搜索既能够是单属性的那种搜索, 又能够是多属性组合起来的搜索。
2. 标题
有相当大比例的表格, 都会存在一个标题, 而这个标题, 乃是针对表格内容所作的一种简要概括。
3. 表头
表头中含有列的标题, 其作用是对每列数据的含义以及属性予以说明；依据业务需求情形, 部分表头还得包含筛选的控件, 能够使无序的数据呈现变得更加有序。
① 无控件表头
没有用于控制的表头, 即表头之中不存在任何控件, 仅存有表示列信息的一个标题, 在样式层面具备三种呈现方式, 其一为标题展示采用强对比的方式, 其二为标题展示运用弱对比的方式, 其三为标题展示是带有图标的方式。
② 带排序和筛选控件的表头
表头带有控件, 其作用在于期望数据展示能够呈现出一定规律, 像是升序排列, 如降序排列, 像筛选特定数据的排列这样的；借助这些控件的运用, 它能够提高数据处理效率, 改善优化业务流程, 进而提升用户体验。
③ 分组表头
有着多条数据, 处于同一个小范围的维度, 在表格里进行展示, 表头方面存在很多分组实现区分, 这种时候, 能够借助硬拆分, 把数据予以切割分类。
4. 表体
① 行
表格中的横向数据单元，用于展示不同的数据记录。
② 列
表格中的纵向数据单元，根据数据的类型和属性进行划分。
③ 单元格
行和列的交叉处，用于填写具体的数据内容。
④ 滚动条
当表格之中的数据数量比较多, 多到超出了显示的区域范围的时候, 会用到用于上下方向或者左右方向滚动的方式来查看数据。
⑤ 操作列
包含编辑、删除、查看详情等对每行数据的操作或链接。
⑥ 选中标记
用于支持用户选择多行数据进行批量操作。
⑦ 总计行
在行或列信息方面, 倘若用户实际存在计算需求, 于这样的情形之下, 能够按照需求额外衍生出专门用来进行计算的一行。
5. 底栏
① 分页控件
要是数据量呈现出较大的状况, 那就需要进行分页显示, 在这个时候, 就必须运用分页控件来实现页面的切换操作了。
四、B 端设计中的 9 种表格
1. 基础数据表格：
对于用来呈现最为基础的数据方面的信息而言, 它适合那种内容项目数量比较少的表单, 且这类表单中的内容是不需要依据相关性进行划分组合的, 同时, 该类表单所适合的承载容器是弹窗。
2. 详情表格
当表格里的内容繁杂, 没办法仅靠表格来诠释之时, 我们能够把复杂的内容设计为有颜色的字体, 如此一来人们就晓得这样的表格内容里藏着信息, 得点击方可看到更全面的信息, 这种表格便是我们常谓之详情表格。
3. 可编辑表格
往往是在那种数据量比较小, 并且还需要经常进行更新的场景状况之下, 用户能够直接于表格之中对数据作出修改。下面所呈现的是自己项目里运用的一个存在着可编辑特性的表格的使用场景情况。
4. 树形表格
可应用于有着层级关系的数据展示情形, 借由缩进或者展开的办法来展现数据的层次结构。
5. 区域内分组表格
要填写的内容在单次任务表单里较多, 而这些内容当中有着一定能分类归纳的特性, 于这种时候, 建议采用区域内分组表单, 其能使信息体现得更为条理清晰、规整分明。
6. 动态表格
能够依据用户所进行的筛选、排序等操作, 实时对数据展示予以更新。它即为我在日常项目之中制作的一个动态表格, 表中的数据能够按照用户的需求实现动态呈现。数据能够以升序方式进行排列, 也能够以降序方式进行排列。
7. 分步骤复杂表格
要是信息有着逻辑上的先后顺序, 那我们能够采用分步表单, 分步能够让用户更优地去理解以及操作, 像某些复杂的购买流程就极为适配这类表单。
8. 多卡片分区表单
当场景之中存在着多种需求, 而凭借一个卡片表单已然没办法将其诉说清晰的时候, 此刻就需要运用多卡片分区表单了。下面所呈现的这个场景便是如此的, 于一个页面之内需要同时对 “IAAS 层诊断” 的情况进行检测、对 “PASS 层诊断” 的情况进行检测、对 “SAAS 层诊断” 的情况进行检测, 很明显单单一个卡片表单已经无法满足相应需求了, 在这个时候就必须要用到多卡片分区表单。
9. 页签类表格
要是信息既不存在逻辑上的先后顺序, 又不具备关联性, 在这种时候, 那就需要用到页签类表单, 如此一来, 会更便于用户去查看。
五、B 端表格设计中的 15 个注意事项
1. 标题固定
表格标题与表格内容要有显著区分, 接着一般而言表格是固定不变动的, 因为用户一直都得参照这些关键信息, 就如同下面这个表格, 需查看的信息极为众多, 倘若无限度往下滑动时, 要是标题不固定, 都会使当前内容相应的类型被混淆是什么。
2. 适度留白
表格, 其内容里的列项, 得要有恰当合适的留白, 以及间距才行。表格之中, 通常情况下都是文字, 还有参数。要是没有合适的间距来当作区分, 那就很容易混成一团, 变得难以区分开来。
3. 字体大小和行高合适
日常所运用的文字尺寸: 表头标题的字号大小当中, 存在 14px、15px、16px（其中 16px极少被使用）；列文字常用的尺寸为 12px、13px、14px, 规正常态化的文字是不可以低于 12px的, 一旦低于便会对识别造成影响, 进而产生阅读方面的障碍, 这是一个底线；针对年龄稍大一些的用户而言, 为了能够获得更好的识别效果, 列表文字应当采用 14px, 如此一来识别度将会更高。
表格的行高, 得处于合适的范围之内, 不然会对用户的阅读体验造成影响, 文字行高可以被设定成字号的1.2到-1.8倍, 文字与分割线的间距能够被设定成字号的1至1.5倍。
4. 文字规律对齐
位于表格里的文字, 需构建出具备规律性质的对齐方式情形, 一般而言存在左对齐以及居中对齐这两大类别, 在特定的特殊状况前提之下, 同样会有右对齐这种情况出现的。
当文字篇幅较长之际, 需采用左对齐方式, 这是由于左对齐的形式, 更契合用户的惯常使用习惯。在文字篇幅较短的情形时, 可作左对齐处理, 或者采用居中对齐的方式。对于金额数字而言, 要进行右对齐处置, 以此种对齐方式, 能够极为清晰地将每个金额的大小进行比较得出。
5. 表格中尽量多用可视化图形表达方式
在日常项目碰到的一个表格里, 主机CPU使用率以及主机内存使用率皆采用进度条形式予以表达, 这增加了数据的可理解性与表格的美观度, 不过表格中全篇文字会致使用户阅读时产生乏味感。
6. 表格设计要好操作
能让人快速定位所需数据, 进而做出良好决策, 有着导出、编辑等快捷操作的表格, 应当是具备可交互特性与易用特性被加以呈现的。
以下是我项目当中, 有一个改良的表格设计, 在这之前, 表格上方的操作按钮, 是以线性图标加上文字的形式呈现显示的, 这样就致使让使用者观看的时候不是特别清晰, 并且间距有一点儿小, 很容易误操作。
经过改良的表格, 好多了, 采用了带有明显图像化的图标, 还添加了文字, 间距变得更加舒展, 布局排列愈发清晰, 同时视觉上也更加美观。
7. 表格中数据没有时不要空着
倘若表格里部分内容不存在数据, 那么便用0或者--来占位, 尽可能不要空着, 以免让人萌生数据尚未加载完毕的错觉。
8. 表格中数据文字尽量不要换行
列表中的文字选择固定最大字数+省略号（气泡显示）
9. 设计表格的时要明确表格的目的和主题
在我们把目的以及主题确定清楚之后, 便能对我们选择表格的样式起到良好的协助作用, 当内容数量较少的时候, 并非只能选用斑马样式的表格, 还能够采用普通的以水平线进行分割的那种样式, 是这样的情况, 是这样的情况, 是这样的情况。
处于我们对数据存有排序、对比以及筛选需求的状况下, 就得使用表格标题里带有筛选、排序功能形式的表头。每一种表格样式的挑选, 均与我们的目的紧密相连。
每一种表格样式诞生, 是由其业务需求衍生的。每一种表头样式诞生, 也是由其业务需求衍生的。作为 B 端设计师, 我们多多跟客户交流总归没错, 这会给产品提效带来诸多帮助。
10. 在合理范围内，表格占比区域要尽量大，提升屏效
B端产品所处的数据占据主导地位的世界里, 要极尽所能地将那空间给予数据展示, 使得更多的数据能够在一屏之中呈现出来, 如此便会给用户带去更为良好的体验。
这是我参与设计的一款面向 B 端的产品 , 鉴于屏幕利用效率的相关考量 , 能够设计出被折叠的功能图标 , 当列表里的内容数量众多时 , 点击该折叠图标之后 , 列表的数据信息可实现最大化展示。
11. 表格标题要简短
表格标题, 是对整个表格信息内容所做的概括, 它要求简短, 并非长篇大论, 要给予更多空间给操作控件。
12. 要设置防错措施
将鼠标放置于某一行之际, 被选中的行需呈现高亮显示状态, 与其他行之间存在差异, 以此使用户能够清晰地知晓自己所选择的究竟是哪一行。
13. 数据为空时，要有图文说明
在整个表格呈现出不存在数据的情形下, 应当去设计空状态图标, 而非使整个页面全然处于空白状态, 要借助图形以及文字将当下的一种状况清晰地表述出来。
如下的这个表格, 当下是不存在数据的, 它借由一个空状态图标以及文字予以了说明, 如此一来用户便不会滋生焦虑情绪, 并且相较于空着的情况, 页面愈发美观。
14. 控制列数
“7加减2原则”身为心理学以及认知科学里的一个概念, 它表明人类短时记忆信息的处理能力大概处于5至9个信息块之间, 所以我们把控适宜的列数, 能够便利用户去记忆。
一同将用户更为着重关注的数据列举出来, 用户所需要的并非重点、属于辅助性的信息能够在详情里面进行展示。
15. 自定义列
不同的每个用户渴望看到的信息侧重点存在差异, 使得让用户能够自行定义列成为十分不错的处理方式。在默认情形之下, 仅仅展示尤为常用、特别重要的几个指标（如下所示的图）。如此这般处理具备的优点在于: 用户能够于表格的上方见到全部的指标名称, 规避了原本需要进行横向拖拽方可浏览到全部指标的状况；其次, 用户能够依据自身的需求, 自由自在地挑选需要予以显示的指标, 将不必要的指标进行隐藏, 进而减少干扰。
六、B 端表格样式的 4 个种类
1. 斑马条纹分割型表格
利用低饱和度颜色相互交替来针对行实施分割, 能够极为出色地对数据予以划分, 进而方便阅读。
2. 水平线分割型表格
只是针对行来做分割的操作, 通过借助间距以及对齐的办法, 在视觉层面上对列实施分割, 运用这样的方式能够很好地对数据予以划分, 有助于进行阅读。
3. 留白分割型表格
千万别用直接留白, 借助间距去划分的这种方式, 在数据量较多之际, 用户极易把行对应错, 进而造成混乱, 它极不建议哟。
4. 网格分割型表格
对于网格分割型表格而言, 它是类似 excel 的, 通过这样的方式, 能够很好地就所有行以及列展开分割, 然而, 网格极易给人致使形成视觉疲劳。
七、B 端表格设计 5 大原则
在B端产品里头, 表格的设计, 得遵循清晰可读的原则, 有一种结构化布局的条理, 要功能具备齐全之态, 呈现响应式设计的特性, 拥有可定制性, 达成性能优化目标, 这些原则会对提高表格的可用性产生帮衬作用, 进而提升用户体验。
1. 清晰可读
首先, 清晰可读性作为表格设计的基础, 要选对字体以及颜色, 确保对比度处于较高水平, 从而让眼睛在阅读时能够轻松些；其次, 列标题得简洁明了, 要避免术语的堆砌, 使得用户能够一眼就看明白，能够快速地把握其中的信息。最后, 设计表格这件事, 实际上就是在打造一个清晰的、易懂的数据展示舞台。
2. 结构化布局
表格布局清晰相当关键重要, 将关键重要信息放置于左侧或者顶部区域, 这契合符合大多数人的常规阅读习惯, 有利于便于用户能够迅速快速捕捉抓住重点要点, 保持维持合理恰当间距, 保证确保信息不会显得拥挤繁杂, 这对有助于提升提高阅读体验起着作用。另外此外, 运用采用对齐方式方法, 像是比如左对齐、右对齐或者居中对齐, 能够可以进一步增强提升表格的整洁整齐度和逻辑分明性。布局构筑设计需要要以人为本, 使得让数据呈现展示既直观直接又易于容易理解明白。
3. 功能齐全
有着全面功能的表格, 是能提升工作效率的利器, 排序能使数据变得井然有序, 筛选可帮用户聚焦关键的信息, 搜索可快速定位所需内容, 导出和打印能让数据便于保存与分享, 每个小工具都有很大用途, 让表格成为数据处理方面的得力助手。
4. 响应式布局
在B端产品里头, 表格设计得拥有灵活性才行, 响应式布局是重点所在, 它能让表格在不一样尺寸的屏幕以及设备上自行适应, 进行设计时, 得考虑范围最广的用户场景, 保证在任一种设备上面都可以给出一致的用户体验, 借由如此这般的设计, 表格可不只是一个用来展示数据的工具了, 更是一个在全域都能使用的解决办法。
5. 性能优化
处理数量巨大的数据之际, 表格的性能是极为关键重要的。在进行设计之时, 需要着重关注加载的速度, 对渲染的过程加以优化, 防止出现卡顿的现象。能够采用分页、延迟加载或者数据压缩的技术, 减轻服务器方面的负担, 提高响应的速度。其目标是使得用户在操作数据的时候, 体会到的是丝滑的感觉而不是卡顿, 保证在效率以及体验这两个方面都能够取得双赢的结果。
八、B 端表格中常见的 12 种操作
总结
不可随便对待小处, 不可轻率处理大事, 经由多方展开调研, 再加以整合自己平日里工作实战中的积累, 未料到小小的表格竟梳理出了将近 50 条设计细节, 自身对于表格设计愈发清晰、全面了, 书写是很好的学习方式, 还是很好的梳理自身思路的做法, 或许存在不够完善之处, 也欢迎大家伙在留言区进行补充讨论，大家一起共同进步。
请小编喝杯咖啡吧！