HI,下午好,新媒云不收取任何费用,公益非盈利机构
24小时服务热线: 4000-162-302
请扫码咨询

新媒易动态

NEWS CENTER

在后台系统、数据类产品、B端产品中,表格作为最常用的一种数据整理的组件

2021-03-16

在后台系统、数据类产品、B端产品中,表格作为最常用的一种数据整理的组件,其重要性不用过多赘述。但如何更好的设计表格呢?想必多数刚接触 B 端的设计师都有过这个困扰。

今天,我给大家整理了一份关于表格的攻略,希望能帮到你。

一、什么是表格

表格是一种数据可视化的一种形式,可以查看和处理大量数据,它主要承载了数据的收集、整理、组织、展示、对比归纳


二、表格的设计原则


易读性:

表格的层级一定要划分的非常清晰,层级分明。你要让用户更关注的是数据本身,而不是花里胡哨的样式。

可寻性:

列表以易于浏览的逻辑排序,提供合适的搜寻组件帮助用户快速查找信息。

高效性:

表格要用最短的时间告诉用户想要得到的信息。

灵活性:

可以让用户根据自己的习惯及兴趣自定义自己的表格展示,比如排序、筛选、调整表头顺序等功能。

三、表格的构成

外部区域:标题、操作区、筛选区

内部区域:表头、表体、表尾


介绍完表格的构成,我们再来把每一个元素拆解出来详细介绍。

四、表格元素解析

1)标题

标题是整个表格内容概述的名称,此名称尽量简洁明了,不要太长,能两个字写清楚绝对不用三个字。

如果标题名称难以理解的话,可以加二级提示,有两种常用样式:tooltips(常用)、二级提示语

标题的位置一般在左上角。

2)操作区

对表格内容的增删改等操作的区域。

使用建议:

有且只有一个主操作:

特殊情况下可以没有主操作,但不能有两个主操作。


样式统一:

同一个产品中,操作区样式规范要保持一致。


操作的优先级:

根据使用的优先级,把常用的操作放到一级展示,不常用的收到二级展示。

不同操作状态区分要明确:

不是所有的操作都是可以直接用的,比如有的操作在没有选择内容的时候是 Disable 状态,那这时候就要和其他可操作的有明显的样式区别,否则容易让用户分不清可不可以操作。


刷新按钮:

有很多同学对这个操作是不是有些疑惑?有人觉得浏览器都有刷新功能啊,干嘛还要多此一举再加个刷新。其实这个刷新功能还是很有必要的,这个刷新只针对于列表内的内容。

在有的后台管理界面中,因为数据量很大,如果每次刷新都用浏览器自带刷新的话,他会重新加载整个页面的内容,很不好用。很多情况下,用户只想重新加载一下列表的内容,那这个刷新就很好用啦。

同时刷新后要有即时反馈,告诉用你他点完操作后目前处于哪个阶段中。

相关推荐