千机游戏提供最新游戏下载和手游攻略!

难怪B面桌子设计起来这么难,玩法实在是太多了。表格设计样式

发布时间:2024-07-03浏览:0

上一篇文章我跟大家分享了B面表格设计规范➡️;表格设计方法➡️

表格作为B端常见且重要的元素之一,可以整合大量数据进行查看、比较、操作。本文从实际出发,探索更多提升视觉和体验的解决方案。

基本组成

一个Rich Table通常包含过滤区域、标题栏、表格区域和分页栏(图片来自ant design5.0组件库中的protable)

① 放映区

主要针对表格数据的条件查询,常见的过滤方式有填写搜索框、下拉列表选择等。

② 标题栏

表示表格的内容主题,比较醒目,一般放在左侧,必要时可以在右侧添加切换表格或者搜索框作为过滤条件。

③ 桌子区域

它包括表头和用于查看数据的数据区,末尾根据需要列出相应的单列操作。

④ 分页栏

按页显示筛选后的数据总量和总页数,还可以选择每页显示的条目数和跳转页数,样式和内容比较固定,并不是所有表格都有。

以下内容讲解:在表格这个大组件中,过滤区域和表体的变化比较多,这次我们主要讲一下表格区域的各种玩法。

表头① 功能:表头起分类作用,显示本列的信息主题。

② 视觉风格

在大多数情况下,表头会比内容行短,有时也会缩小表头的文字大小以突出数据,表头的背景颜色可根据需要选择。

③内容分类:纯文本

当表头仅包含文字时,仅起基本的分类作用;

如果要强调标题,尤其是信息分类差别不大(比如多列都是同一范围的数值数据)且列数较多时,背景颜色会比单元格深,文字会采用加粗黑色;

如果要弱化标题,可以使用白色背景,文字颜色与单元格同色或浅色,风格简洁,更注重内容,内容的风格可以丰富一些,这在国外设计中比较常见。

需要注意的是,有些标题除了主题正文外,还会有单位,特别是数值数据栏,会添加百分数、万等单位,以使数值数据更加准确。

文字+功能图标

说明:文字两侧分别有感叹号/问号图标,将鼠标移动到相应位置时会弹出气泡弹窗解释表头标题;

排序:通常在左侧或右侧放置一个上下箭头图标,以数字和字母的升序或降序排列此列中的字段。这也是一种常见的排序方法。例如下图中的“Created by”标题是按照字母顺序排列的;

过滤:对于比较复杂的情况,可以添加过滤图标来补充或替代过滤条件,减少过滤条件的空间;对于比较复杂的情况,两种方式都可以。和过滤一样,使用气泡弹窗来承载选项(如下图)。由于这不是本文的重点,这里就不深入讨论了。

文字+装饰图标

Excel表格类型中还出现了比较少见的趣味表格,用于对大量数据进行汇总或者统计,使得分类更加清晰,避免视觉疲劳。

④ 特殊情况

如果表格涉及多选操作,在表格头的最前面会有一个全选按钮,列的样式同理,点击后会选中下面所有行最前面的按钮,即选中当前表格页中的所有行(如上图);

如果表格最后一列是操作按钮,则可以省略表头中的文字,或者显示为“操作区域”。

数据区

① 功能

它承载着表格数据的主体,是需要读取的数据,也是决定下一步操作的依据,比如查看详情(这里主要讨论单组表的情况)。

表格设计样式_表格设计_表格设计工具在哪

② 设计原则

主要讲解的是高效阅读,具体从两个方面来讲:

减少视觉干扰 a. 表格边框

表格边框的粗细和深度会影响阅读效率,一般没有竖线,横线较细较浅,以免影响阅读(下图中ant design组件中边框线设置为1px,#F0F0F0)。

b. 背景颜色

静态通常是白色,只有内容较多的表格才需要斑马线(一行深,一行浅);

当选中某一行的时候,背景色也会变深,这里的背景色可以是浅灰色,浅蓝色,也可以是透明度较低的品牌色(上图中 antdesign 组件中选择的背景色是 #FAFAFA,比边框略浅)。

c.文本(普通文本)

除表格表头外,表格内普通文本的大小、颜色都一致(采用系统的普通文本格式,参考上图中ant设计,为14px、#1F1F1F);

注意1:内容中如果还没有数据就填0,没有内容就用-。尽量不要留空,不然让人误以为还没加载完成。遇到日期、手机号等情况,使用相同的格式。不仅最好保持同一页面的表格层次一致;

注2:由于表格宽度有限,可能会出现文字换行的情况,根据需要可以选择固定最大字数+省略号(气泡显示)或者使用横向滑动(需要固定操作栏),尽量不要选择换行,会影响阅读效率,也浪费垂直空间。

加强强调 a.文字(部分功能)

不带操作但使用强调色的文本:常用于一些需要强调文本内容的场景,尤其是与金额相关的数据,比如增长、减少的数据。注意在中国用红色表示增加,绿色表示减少,国外则相反。

标签文字:以标签的形式出现,通常标签为一个短语,常用于有固定文字描述的表格项。图中“处理中”和“开发中”的颜色选用不同色调,一目了然。也有特殊情况,改变文字内容的颜色,加上背景色,以区别于列表常规内容,比如图中最后一栏的时间警示。

链接/操作文字:前者点击后跳转至相关文字的详情页,后者是执行相应操作的文字按钮,如删除等。详情一般使用蓝色链接(偶尔也会使用品牌色,尤其是品牌色也是蓝色的时候)。

b. 图标/按钮

按钮通常以文字、图标、或者文字+图标的形式出现,表格中的图标大多也是以按钮的形式存在。

图标本身也多采用基础常见的图形,如问号表示解释、感叹号表示警告、对勾表示成功等,配色也符合普遍认知(红绿灯配色)。

展现方式-外部:适合强调视觉效果,特别是高频操作的场景,如图,信息质量一栏的图标(象征性强调)和最后一栏的操作(高频操作);

显示方式-隐藏:鼠标移动到相应位置(对应表项)时才显示,一般作为操作按钮,比如图中的编辑图标(库存栏,选中行号旁边)。

分类:

如果操作是针对整行的话,则放在最后一列,如果操作是针对某个单元格/单个item的话,一般放在文本之后(参考上图);

注意当操作项较多时,根据情况选择解决方案,如果宽度足够且选项较少,可以直接平铺,如果选项较多,可以选择折叠低频项、全部折叠,或者直接将操作放入按操作频率跳转的详情页中。

c. 图表

它属于数据可视化的范畴,也是高效阅读的重要手段,最常用的有横向环形图、条形图、堆积条形图等。

其特点是直观、清晰,多用于流程进度、比例等场景,具体使用还是要看图表本身的适用场景。

③案例分析

根据近期的一个实际案例,需求是可视化增强审批的进度栏,进度项有:待提交、审批中、审批完成、审批返回。当时完成并考虑了以下解决方案:

方案(一) 小点:视觉效果最弱,不易影响表格整体阅读,需要使用不同色调进行区分,需与文字搭配,适合表格内容较多的场景。

方案(2)进度环:借鉴Xmind中的任务标记,可以采用一种或多种颜色,更加直观,适合表格内容较少,有流程的场景。

方案(三)Icon+Label:视觉效果最强,是方案一的加强版,适合表格已经有多种强调样式,需要突出显示列的场景。

由于整体风格比较简单,表格内容比较大,所以最终在项目中采用的方案比较简洁明了,但在实际场景中需要根据各个项目的内容量和风格来决定。

终于

有同学可能会说,日常设计基本很少有trick,是的,B端设计比C端设计更克制,对应的用户群体更有发言权,但前提是你有充足的知识储备,懂业务,能有理有据的分析、决策,这样会更专业,更有说服力。

热点资讯