后台界面设计之表格设计规范参考

表格是后台界面中占比十分之重的一个组件，表格中内容的布局、数据的展示、操作项的罗列……每一处设计都值得细细斟酌。

前言

表格是后台界面中占比十分之重的一个组件，常以为表格设计十分简单，仔细分析后，会发现表格合理化的设计、逻辑化的设计对于一个平台而言多么重要。

想设计出一款便捷好用、直观准确的系统，表格中内容的布局、数据的展示、操作项的罗列……每一处设计都值得细细斟酌。

表格的使用场景：

· 展现信息全面性：呈现大量信息，并展现数据间的复杂关系。

· 编辑性大于易读性：数据非固定，可进行增删改查。

· 需要对比数据：对比行与行之间的数据，了解两者差异。

表格的功能：

· 添加数据

· 编辑数据

· 删除数据

· 搜索与筛选

· 排序

· 对比

· 显示多字段

· 计算

组成

undefined

img

img

视觉

img

· 行

· 列

· 布局

· 对齐

· 数字处理

· 简洁

· 层级与重点信息

· 可视化趋势

1、行

界面在不同的设备上体验会有所差异。以腾讯云为例，使用腾讯云的用户的设备分辨率分布如右图所示。

可以看出1920×1020大屏占比最多，1366×768的小屏用户仅次第二。在1920×1020的尺寸下，以表格为例，首屏可以显示11行。大屏用户表示，他们对一屏显示多少行并没有多少感知。

但对于小屏用户，在表头和页脚固定的情况下，一次只能看到6行左右，对扫视的效率确实有所影响。但是如果不固定表头和页脚，滚动时不限定区域而是全屏滚动的话，一屏也可以看到10行的内容。

img

数据参考：https://www.uisdc.com/high-table-row-design#

影响行信息阅读的一个关键是行高的设置，在与开发沟通过程中因为表述不一常引起歧义，几个数值表达含义需了解一下。

img

在文字排版中，行高的选择一般为字号的1.2~1.8倍，段间距通常使用一个行高的距离。

在考虑表格的行高时，可以参考文字排版的常用做法，将整个表格的行高分成文字行高、文字与分割线间距离，即上下间距两部分来考虑，文字行高可以设定为字号的1.21.8倍，文字与分割线间距离可以设定为字号的11.5倍。分为这样的两部分也比较符合开发同学写代码时的习惯。

推荐几个常用的行高值。

① 字号12px，文字行高是字号的1.5倍即18px，上下间距是字号的1.2倍即15px，表格行高 48px。

这种行高整个表格最透气，在小屏下整屏可以显示9行，对于扫视效率影响不大。

② 字号12px，文字行高是字号的1.5倍即18px，上下间距是字号的1倍即12px，表格行高 42px。

这种行高的表格间距较为适中，在小屏下整屏可以显示10行。

③ 字号12px，文字行高是字号的1.3倍即16px，上下间距是字号的0.6倍即8px，表格行高 32px。

这种表格比较紧凑，在小屏下整屏可以显示12行。可以用于卡片中的小型表格等空间比较小的地方。

PS：自适应情况下，原本一行的文字在小屏下可能呈现出两行，即使有的文字仍只有一行，此时每行高度也要做到统一。

2、列

一行排列多少字段，每列字段宽度多少，也是设计时值得考虑的。

① 列与列之间去掉分隔线，更利于横向阅读。

② 给出默认宽度，字数多的时候用省略号，鼠标悬浮可展示全部文字。

③ 列宽支持自动拉伸，根据用户需要自行拖拽。

④ 横向滚动条，优先级高的展示出来，优先级低的滚动条展示。

img

⑤ 当表格信息很多且需要对比时，可固定左侧左列，其他信息用横向滚动条展现。

img

⑥ 表头放置一个设置按钮，支持字段自定义。点击设置，用户可自行决定每列显示什么字段。

3、布局

img

4、对齐

文字左对齐，数据右对齐。尽量保证数据的小数点后保留位数一致，若不能，则以个位数为基准对齐。

对于不存在的数据，单元格不能空置，需要用短横线代替，表示该项数据不存在，给用户明确指示。

对于数据为零的单元格，要填上0，且小数点后位数、单位，都要与上下单元格保持一致。

在任何情况下，单元格都不应该空置出现，避免用户的困惑。针对不存在的数据可以用其他占位符，告知用户该单元格不存在数据；对于数据为零的单元格，与上下数据单位、小数点相同的0来表示。

img

5、简洁

· 精简表头

· 减少分隔线

· 不使用斑马线

· 尽量以黑白为主

· 减少其他元素的使用

6、层级与重点信息

· 颜色的使用

用户通常优先阅读最具视觉重量的内容，因此，对用户判断有决策作用的重要内容可以尽量凸显。例如状态上的异常可以用高亮色标出等。表格中也可以用图形化的形式来帮助用户快速搜索信息，例如在表格中使用进度条来表明用量等信息。

img

· 足够的留白

· 层级处理方法

7、可视化趋势

· 图表的使用

· 卡片的使用

交互

img

1、固定与滚动

①表头固定

②首列固定

③底栏固定

2、操作

①单行操作

· 编辑、删除、设置等icon含义明确，为人熟知，故仅用纯icon来表示，简洁醒目

· 对于图形意义不太明确或者图形的含义有较大变化的，采用图形+文字/文字形式，以便准确传达意义。

· 操作项可以放置在条目最后。

· 大于等于3个操作，建议操作项折叠，点击更多再展示。

②批量操作

纯文字放在表头上方，勾选相应条目后特定操作按钮可用。文字按钮传达意义更加直接明确，辨识性强。

③查看详细

img

通常可链接文字给蓝色值，以显示可点击查看详情。

④编辑

img

3、排序

适时的排序筛选功能也可以帮助用户在大量的信息中按照顺序找到自己想要的信息，或快速筛选出自己想要的信息。

4、查看

①展开行

②弹窗

img

③侧边滑出

④视图切换

总结

表格只是后台界面设计中一个组件，而我这里总结的表格的几个设计点也只是片面之言。想把后台设计好，还有好多地方值得思考，值得总结。

· 没有绝对的规范，只有相对的规范。使用时还得“因地制宜”。

· 没有完全的规范，只有基本的原则。列出的规范很显然不是全面的，相信也不会有篇文章能够列出所有的规范。只能以此为参考，适量将组件规范化。

· 没有组合的规范，只有总结的规范。每个人的理解都不相同，可以将这一组件归为这一类别，也可归为另一类别。因人而异，无需固定。

一路走来数个年头，感谢RDIFramework.NET框架的支持者与使用者，大家可以通过下面的地址了解详情。

RDIFramework.NET官方网站：http://www.rdiframework.net/

RDIFramework.NET官方博客：http://blog.rdiframework.net/

特别说明，框架相关的技术文章请以官方网站为准，欢迎大家收藏！

RDIFramework.NET框架由海南国思软件科技有限公司专业团队长期打造、一直在更新、一直在升级，请放心使用！

欢迎关注RDIFramework.NET框架官方微信公众号（微信号：guosisoft），及时了解最新动态。

使用微信扫描二维码立即关注

微信扫描二维码

posted @ 2021-10-08 11:38  .NET快速开发框架  阅读(3019)  评论(4)  编辑  收藏  举报