数据表格设计|从功能、交互和UI进行全方位分析

  将近一年,我都浸泡在设计数据表格的相关需求中,踩过很多坑;深深地体会到建立完整的知识体系的重要性,不然就是这个坑踩着上一个坑,万劫不复。在这里,我总结并分享自己的经验,希望助各位完美避开各种坑。

  表格,又称为表,既是一种可视化交流模式,又是一种组织整理数据的手段。人们在通讯交流、科学研究以及数据分析活动当中广泛采用着形形色色的表格。表的结构如下图:

  一个简简单单的表格功能其实非常强大,也是非常复杂的。但是不管怎么样,我们不变的原则是:

  通过交互和视觉对冗杂的信息进行优化,从而更直观形象地对比。比如隔行使用斑马线增强横向导视。

  对于大数据量的表格,数据的精准度非常重要。比如根据提供的精准度要求,定义展示数据的小数位数。

  比如在行列末尾增加汇总信息(总计或平均值),在每个分类里增加小计,可以让管理者一目了然地了解数据,快速决策。

  列数过多时,可以隐藏重要性低的列,更好的突出重要性高的列,主次分明,减少干扰。

  按预定目标过滤出某种具有特定性质的数据的操作过程,帮助我们实现对信息的快速分析。

  适合筛选条件不明确和筛选频率不高的表格。尽量采用模糊搜索,降低操作成本。

  优点:主次分明,搜索框可满足大部分用户需求,更高的要求有较深的入口,减少干扰。

  缺点:如果搜索不能满足大部分用户需求而需要高级筛选,必然增加了用户的操作步骤。

  在原始数据上增加汇总信息(合计值或平均值),可以减少用户的计算,达到快速决策的目的。

  根据7±2的原则,随着行列数增加,如果表头不固定,超负荷记忆信息会使用户遗忘信息。

  创建信息层级,只展现核心内容,非重点内容需要用户通过更深的入口查看。主次分明地展示信息,方便用户快速定位所需信息。

  鼠标悬停高亮底色,使得该行与行界限分明。强化了横向导视,解决列数过多引起数据错行的问题。

  绝对精确的数据影响人们的阅读。我们可以根据客户需求和场景决定数据精确度范围。

  符合从右到左的对比数字习惯。有小数点按小数点对齐。可以方便用户进行心算,不需要转换阅读思维。

  (视情况而定,比如笔者设计的表格要考虑交叉表,选择了表头居中,交叉表的定义请看“复杂表格-交叉表”部分。)

  由于交叉表会在数值上套上好几层表头,所以下图错误示例中页面重量往右下角拉扯,造成页面不平衡,而且这个情况会随着套的表头层数越来越严重,所以我们选择了统一所有表头居中。

  根据“7±2”原则,状态个数不能太多,不然人的记忆负担超负荷会适得其反。

  有些表达用户的感官评价,用icon更符合用户的心智模型,比如“满意”用笑脸icon,“不满意”用苦脸icon,总比用文字阐述直观吧。

  有利于控制用户的阅读速度,做到张弛有度,好像正在“呼吸”。避免大量信息毫无差异的堆积,从而使用户在阅读时视觉疲劳。

  交叉报表是报表当中常见的类型,属于基本的报表,是行、列方向都有分组的报表。

  在大多数产品中,我们见到的都是直联表(只在行方向有分组),基本可以满足大部分用户。交叉表出现的场景很少,复杂度极高,只要你的系统出现交叉表,很多规则要重新考虑。

  表格的内容其实我才讲了一点点,只是给予各位一点启发,还有大多场景需要各位随机应变了,这里有几点想说的:

  要适应自己产品的场景,选择最适合自己的规范。比如我的产品要考虑交叉表,然而制定对齐规范的文章作者从头到尾没讲到交叉表,我就要重新考虑这个规则的可用性。

  任何文章都不可能把所有的情况罗列出来,所以我们要理解规范背后的原则,推导出适应其他场景的规范,要知道很多事“万变不离其宗”。

  规范向来都是有理有据,比如“搜索和筛选”功能,很多人会将遇到的筛选的情况罗列出来作为类别,比如“时间筛选器+简易搜索”作为一类,下次遇到“时间筛选+下拉框”就分为一类,其实这是很片面的排列组合规范,而不是总结性的规范。

  作者:安琪Angela,公众号:idatadesign。互联网数据行业UX&PM,参与过数据分析saas平台和商业智能平台等产品设计。关注商业智能、人工智能和互联网金融。欢迎大家一起交流~

  本文由 @安琪Angela 原创发布于人人都是产品经理。未经许可,禁止转载。

  2019超级产品 Super Product,与Apple、Ford决战紫禁之巅!

  以“如何开会”为例:创业公司不同阶段的管理方式(上) SaaS创业路线图(廿九)

  人人都是产品经理(是以产品经理、运营为核心的学习、交流、分享平台,集媒体、培训、招聘、社群为一体,全方位服务产品人和运营人,成立8年举办在线+期,线+场,产品经理大会、运营大会20+场,覆盖北上广深杭成都等15个城市,在行业有较高的影响力和知名度。平台聚集了众多BAT美团京东滴滴360小米网易等知名互联网公司产品总监和运营总监,他们在这里分享知识、招聘人才,与你一起成长。

TAG标签: 表格类ui
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。