ui界面设计中,关于数据表格的有效的设计方法

设计营销   2023-10-20

在UI界面设计或者系统界面设计中,数据表格的设计非常重要,是个非常高频的设计元素,同时好的数据表格作为设计组件可以提高后续的设计工作效能,同时也可以给用户提供非常好的用户体验。

比如在一个包含 6 行数据表,表头中有 8 个不同的字段。当用户要查找特定数据值时,用户将通过第一列向下扫描记录标识。然后他们的眼睛必须扫描该行才能找到该值。当他们这样做时,他们必须关注每个值以确定是否是那个值。如果特定数据类型不清楚,他们的眼睛必须向上扫描到列标题标题来加以验证,对于包含大量记录和字段的表,认知工作会放大。

扫描表格的更有效方法:

1、通过视觉识别进行区分
用户无需阅读文本,只需查看数据的外观。仅从外观来看,他们就可以识别数据类型。不仅如此,它们还可以区分主要值和次要值,以便更快地识别。这一切都是通过将数据表转化为数据卡来实现的。

2、显着信息ID
数据卡通过显着的视觉提示使查找记录身份变得更加容易。它们始终放置在卡标题的左上角,以提高可见度。这种可见性是持久的,可以防止您迷路。当有太多字段需要滚动时,很容易丢失表上的记录 ID。

3、快速卡片分类器
卡片分类器的加入可以帮助用户更快地找到记录。它允许用户通过表格标题旁边的下拉选择菜单按任何字段对卡片进行排序。卡片按列排序,而不是按行排序,以垂直排列值。这种对齐方式允许用户在垂直方向上扫描,以像表格一样快速比较值。

4、情境状态
由于行限制,图像和图形更难在表格上显示。在所有其他数据的背景下查看它们也更困难。数据卡对图像和图形的限制较少。它们还允许您在上下文中查看它们,这对于分析很有用。例如,客户端状态显示在徽章中。在查看活动状态时,通过上次联系、项目和会议来检查它以评估当前活动会很有帮助。在表上执行此操作比较困难,因为数据相距较远且遥不可及。

5、重点记录分析
表格使分析记录变得困难。评估值时很难将注意力集中在某一行上,因为相邻行中的数据会干扰视觉。当他们这样做时,您必须将视线回溯到记录 ID,以确保您没有向上或向下跳一行。

6、清除统计数字
评估不同的统计数据是一项常见任务。数据卡允许您将统计数字排列在一起以便于比较。该卡的页脚专门用于统计数据。主要统计数字位于右下角,并以蓝色突出显示。辅助统计数字排列在左侧。由于统计数字对于分析至关重要,因此它们具有更高的颜色对比度来区分它们。

7、去除水平滚动条
当表的列太多时,用户必须水平滚动才能查看后面的字段。这可能会导致他们忽略视野之外的字段。它还需要更多的工作,这会减慢他们的速度。数据卡不存在这个问题,因为它们消除了水平滚动。向卡片添加更多字段只会增加高度,而不会增加宽度。

8、重置较长的文本值
长文本值在表格上更难阅读。它们不仅增加了列宽,还增加了行宽。当文本太长时,它会换行到下一行或将列拉长。

9、拖动重新排序
另一个有助于比较的功能是拖动卡片以重新排序的能力。您可以将其应用于数据卡的标题并用抓握提示来指示它。当用户将鼠标悬停在标题上时,会出现一个拖动光标。他们可以像真正的卡片一样拖动并放置它们。

10、详细入口折叠
某些字段包含用户需要查看的更多详细信息。表格将展开每一行以显示它们。然而,这会在观看时造成混乱和干扰。当您单击数据卡时,数据卡会在从侧面展开的表格中显示详细信息,类似这样将一部分信息折叠起来,也可以缓解用户的信息负荷。


维好维可-用户体验体验创新设计
合作咨询
+86-21-51115850
© 2010-2024  维好维可 | 用户体验创新设计公司
沪ICP备19006116号-1

联系我们,开启一场关于您项目的讨论会吧。

联系电话:
+86-21-51115850
商务邮箱:
hi@wellworks.cn
复制
公司地址:
上海市松江区茸阳路69号(百原PARK)贰号楼2楼

©2010-2024 维好维可 | 用户体验创新设计公司-版权所有

沪ICP备19006116号-1

需求留言 + 获取方案

提交信息后,我们的专属顾问会在1个工作日内与您联系。

怎么称呼?
您的手机?
您的邮箱?
您的需求?
维好维可-微信二维码