找回密码
 会员注册
查看: 10|回复: 0

好的表格信息展示都有这三个特征

[复制链接]

2

主题

0

回帖

7

积分

新手上路

积分
7
发表于 2024-10-7 13:42:16 | 显示全部楼层 |阅读模式
///前言表格作为组织整理数据的手段,可以有效的向用户展示数据信息,是B端产品中出现最高频的模块之一。下图为典型的B端表格示例:用户主要通过表格浏览获取信息、对数据进行筛选、排序以及相关业务处理等更多复杂操作、对比数据的差异与变化(关联和区别)。好的表格信息展示设计,应当是能够辅助用户高效便捷的实现以上场景中的诉求。今天我们就来讨论表格设计中一个重要的问题——【应该如何考虑表格信息展示】。首先抛出结论,我们认为良好呈现信息的表格应当做到疏密适度、高效扫视、精简克制。///一、疏密适度常见的表格信息包含文本、标签、状态样式、数值统计图表、关键信息Icon等。表格单元格是信息填充的基本单元,行高和列宽的定义决定了表格信息的疏密程度,进而决定了表格给用户的直观感受,因而下面分别从行高和列宽两个方向来探讨表格信息展示如何疏密适度。1、定义合理的表格行高a、行高模数设定在具体设定表格行高时,由于表格中以文字信息为主,我认为可以参考文字排版的常用做法,将整个表格的行高分成文字行高、文字与分割线间距离,即上下间距两部分来考虑。文字行高可以设定为字号的1.2~1.8倍,文字与分割线间距离可以设定为字号的1~1.5倍。分为这样的两部分也比较符合开发同学写代码时的习惯(多行行高同理去设定)。根据用户场景的不同,来选择模数倍数,需保证系统内使用统一的模数。比如,针对用户快速浏览获取大量数据场景时,可以选择1.2倍作为模数,列表更为紧凑,同样扫视范围内,可获取更多信息。b、为小屏幕考虑一屏显示的行数表格行高决定屏幕内能呈现的行数,即用户在一屏内能获取信息的数量,主要影响用户纵向对比数据的效率。对于1920*1020(包含该分辨率)以上的大屏用户,对于一屏显示行数的感知不强,但对于1366×768、1280*720等这类小屏,显示行数有限,用户进行纵向数据对比的效率就会有所降低。在设计前,应当充分了解目标用户的行为诉求,了解目标用户设备屏幕分辨率的占比分布情况,有针对性的设置行高。c、用户自定义行高的场景B端产品的特点之一是通用化,覆盖用户角色多样。然而用户个体对于表格信息呈现密度的诉求经常是有所差异的。比如个人视力的原因,有些用户喜欢表格行高值大一些,看起来舒适透气,便于阅读。而有些平台用户由于很熟悉线下excel表格模式,希望线上的表格也尽可能像excel那样紧凑,以便他们在一屏内看到更多的数据,进行对比,提升工作效率。产品为了让不同用户都能获得较好的体验,可以考虑把表格疏密度的设置开放给用户,建议不是完全开放给用户去调整尺寸,而是给出一定阶梯度的快速选项,例如舒适、标准、紧凑三种高度来满足用户需求。例如,Gmail提供默认/标准/紧凑三种表格密度设置,如图:2、灵活扩展的横向空间通过对表格固定位置与列宽的调整,扩大表格数据空间,使信息不局促,空间更透气,保证横向扫视易读性。a、列宽极限值设定设计师需要根据表格承载内容定义表格的列宽,应包含最大/最小/默认列宽的定义以及使用规则。我推荐的一个规则是:规则1:当相对列少【浏览器宽度-页面其他模块 > 全部列的默认宽度和】,则各个列自动等比拉伸,撑满屏幕;规则2:当相对列多【浏览器宽度-页面其他模块
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

QQ|手机版|心飞设计-版权所有:微度网络信息技术服务中心 ( 鲁ICP备17032091号-12 )|网站地图

GMT+8, 2025-1-10 22:43 , Processed in 0.787590 second(s), 25 queries .

Powered by Discuz! X3.5

© 2001-2025 Discuz! Team.

快速回复 返回顶部 返回列表