5分钟,带你掌握20个表格设计技巧

译者Jimmy:貌似翻译项目走上了正轨,应该能保持一周更行一篇,或者两周更新一篇的节奏。:)这次翻译的是一篇关于数据报表的文章,对于没有设计过报表的设计师来说,应该很有用!文章标题有所修改。原因自然是为了点击量啦~ 哈哈~


译者Jimmy:貌似翻译项目走上了正轨,应该能保持一周更行一篇,或者两周更新一篇的节奏。:)这次翻译的是一篇关于数据报表的文章,对于没有设计过报表的设计师来说,应该很有用!文章标题有所修改。原因自然是为了点击量啦~ 哈哈~

5分钟,带你掌握20个表格设计技巧

好的数据表格允许用户去扫描、分析、比较、筛选、分类以及调整信息从而分析出问题和得出解决方案。此篇文章主要是展示了一些设计框架、交互架构和技术手段去帮助你设计出更好的数据表格。

1. 固定表头

当用户滚动表格时,固定表头可以方便用户快速获取当前数据信息。

5分钟,带你掌握20个表格设计技巧

2. 水平滚动

对于一些比较大的表格来说,提供水平滚动非常有意义。在首列放置一些标识数据,并锁定首列可以方便用户去比较数据。

5分钟,带你掌握20个表格设计技巧

3. 可调整列宽度

用户可以通过拖拽调整列宽,方便其看到格子内的完整数据。

5分钟,带你掌握20个表格设计技巧

4. 行样式

可以通过加入斑马线、分割线来提高数据的易读性。用户在面对大量数据的时候,可能会出现视觉丢失。而分割线可以方便用户定位信息。在阅读长的横条数据表时,斑马线样式可以帮助用户更好地集中注意力。但是在只有少量数据的报表上采取斑马线设计,会出现可用性问题,因为用户可能会想为啥有些行是高亮显示的。

5分钟,带你掌握20个表格设计技巧

5. 可调整数据密度

行距更低的表格可以帮助用户无需滚动即可查看更多数据。但是这可能会导致用户在扫描数据的时候,看错一些数据。这就是为何很多好的表格采用了类似的选项按钮设计,可以让用户自己去选择数据的密度。

5分钟,带你掌握20个表格设计技巧

6. 提供可视化的图表

可视化的图表可以让用户对下方的数据报表有一个初步的印象。同时,用户在看数据报表前,就能从图表那发现数据的问题和得出一些初步的结论。

5分钟,带你掌握20个表格设计技巧

7. 分页

通过分页功能,用户可以调整单页显示的数据量。下方的例子,就是说明用户可以自定义报表每页显示的行数。这种设计常常会被另一种设计所取代,那就是无限翻页设计。(译者Jimmy:就是类似 Pinterest 的自动刷新机制)当用户滚动鼠标的时候,就会自动翻页。无限翻页设计对于一些「探索型」的网页来说,特别有用,但是在一些需要表达优先级的场景就不太适合。(Jimmy:类似 Pinterest 就是一个探索型的场景,内容不分优先级。但是类似清单类的应用,就不适合了,因为清单是有先后顺序且有优先级的。)

5分钟,带你掌握20个表格设计技巧

8. 鼠标悬停操作

如果需要加入更多操作,可以采用悬停操作设计。但是,这会导致可见性问题,因为用户需要将鼠标移动到对应的位置,才知道有更多功能。

5分钟,带你掌握20个表格设计技巧

9. 行内编辑

用户可以很方便地通过行内编辑功能编辑数据,而不需要跳转到单独的详情页面中进行编辑。

5分钟,带你掌握20个表格设计技巧

10. 可展开的行设计

提供可展开选项可以方便用户在不丢失内容下,查看一些附加信息。

5分钟,带你掌握20个表格设计技巧

11. 快速查看

除了使用可展开的行的设计以外,还可以使用侧边栏弹出更多信息的设计。

5分钟,带你掌握20个表格设计技巧

12. 模态弹窗

模态弹窗允许用户停留在表单视图,同时又能让用户的注意力集中在更多的信息与操作上。

5分钟,带你掌握20个表格设计技巧

13. 多模态弹窗

多模态弹窗给高级用户提供了更多的功能操作,同时还可以更方便地去比较数据的不同之处。

5分钟,带你掌握20个表格设计技巧

14. 行细节

单击行链接可以将表单转换成另一种模式——左侧显示列表数据,右侧显示详情数据。这样用户可以很方便地去分析一些复杂数据,还可以同时比较多组数据,且无需进行退回或者一些复杂的操作。

5分钟,带你掌握20个表格设计技巧

15. 列支持排序

列支持按字母顺序和数字大小进行排序。

5分钟,带你掌握20个表格设计技巧

16. 支持基本的过滤

基本过滤功能允许用户快速过滤表单中的数据。

5分钟,带你掌握20个表格设计技巧

17. 筛选列功能

允许用户为特定的列去做筛选操作。

5分钟,带你掌握20个表格设计技巧

18. 可搜索列

通过快捷的搜索操作,允许用户在每个列表中搜索特定的值。

5分钟,带你掌握20个表格设计技巧

19. 添加列

允许用户添加列。这种方式可以保证在有限的空间下承载必要数据的同时,还能让用户按照所需添加额外的列。

5分钟,带你掌握20个表格设计技巧

20. 可自定义列的位置

允许用户按照自己的需求,排列列的位置。此功能还要记录用户的操作,保证用户下次使用时还是TA上次设置的那样。

5分钟,带你掌握20个表格设计技巧

 

原文地址:Design Better Data Tables

译者:Jimmy Wang

本文由 @Jimmy Wang 翻译发布于人人都是产品经理。未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/22029/

(0)
CatherineCatherine
上一篇 2017-04-30 07:12
下一篇 2017-04-30 09:13

相关推荐

  • 三招两式讲需求,看完你们也懂需求了

    美国一家市场研究公司通过分析101家科技创业公司的失败案例,总结出了创业公司失败的20大主要原因,排名首位的就是:No Market Need!据统计42%的失败创业公司出现过这个问题,创始人执着于执行自己的创意,却没有…

    2023-03-03
  • 学交互设计我看过的那些书

    亭决-Thu 2015.03.06 摩客www.mockplus.cn⤴ 【导读】这个书单是跟交互相关的人员必看书目,其中有一半左右我都已经看过了,觉得受益匪浅,另外几本今年也要找时间看一下。 学了三年交互设计,想写写我看的书,和回…

    2015-03-17
  • QQ音乐年终盘点H5设计总结:音乐与色彩的次元幻想

    2016年是一个H5满天飞的年代,如何在众多牛气的H5中脱颖而出,留住用户关注和让朋友圈永无休止的不停传播呢?这也是一枚骚气且不隐忍的运营设计师一直研究琢磨的课题。这里拿QQ音乐年终盘点H5为例来解析下我对H5的次元幻想。

    2017-05-07
  • 【UED人物】朱锫:自然建筑

    近日,朱锫建筑事务所作品景德镇御窑博物馆荣获“2017年度The Architectural Review未来建筑奖”之“最佳文化建筑”(the Winner of the Cultural Regeneration category)。自此,又一位中国建筑师叩开了国际大奖之门。△ 景德镇御窑博物馆室内效果图“未来建筑奖”始于2002年,每年由英国知名建筑专业杂志《The Architectural Review》(建筑评论)评选并颁发...

    2018-02-07
  • 用户体验设计上的6个关键见解

    用户体验在产品设计中的重要性不言而喻,但是并不是所有的产品经理都能在用户体验设计上做到完美。入行产品经理那么久,也许你已经能特别熟练的写PRD,轻而易举的用Axure画原型,甚至还能用Axure实现“打飞机”,但是却做不到将用户体验设计上升一个新层次?如果这也是你目前遇到的情况,那么请认真看看这篇文章,它或许会给你一个答案。 “如果你不能说出你的想法,就算这些想法非常的棒,它们也不会存活。” “伟大的设计就像在讲诉一个故事。”“太多的文本信息并不会增加太多的价值。”

    2017-05-23
  • 超实用的响应式排版快速指南

    译者语:无论是对于印刷、网站或是电视广告来说,排版都是我们用来沟通信息的主要方式。排版之重要性我想已无须赘述。然而,“理解”和“实践”还是相差十万 八千里的,特别是在网页设计中,“一个字号走天下”的想法可以歇歇了。我们或许都听说过响应式网站,但我想你们中可能很少有人知道什么是响应式排版吧。

    2017-06-02
  • 用户体验与故事大王的创新火花

    嗨,亲爱的小伙伴们,2018年4月25日,我们又一同相约创新的周三,每周一次的创新工程实践如期而至。此次见面课主场是北京大学,由黄文彬老师主讲的《用户体验创新》。首先带大家了解一下黄老师。来自北京大学、南开大学、北京科技大学、西安电子科技大学、新疆大学、暨南大学、西北农林科技大学、西安交通大学、南昌大学、东北农业大学、哈尔滨工程大学等全国285所高校、九万六千多名师生共同收看了此次课程直播,其中江苏工程职业技术学院和山东财经大学参加了本...

    2018-04-25
  • 全民关注用户体验的时代已经到来

    聚焦2018年全国两会,共有13位人大代表和政协委员提倡在相关领域内发展与提升用户体验,范围遍布于新能源汽车、互联网、通信、教育科研、传媒、版权保护、交通运输与医药等数十个行业,引起了社会各界的广泛关注。两会期间,全国政协委员叶友达向大会提交了《关于鼓励基于用户体验的设计创新,加速科技创新成果转化的提案》。叶友达建议,从国家层面启动基于用户体验的设计创新倡议,构建用户体验设计创新战略和行动纲领。同时要加大对基于用户体验的设计创新的宣传力...

    微信热点 2018-03-22
  • 【干货】2018年APP交互设计趋势

    全感官体验人有五感,强化体验记忆的最有效方式就是五感相结合。看见、听见信息已成为体验常态,而更真切的感知信息是用户体验升级的客观诉求,全感官体验能更好的打造“身临其境的沉浸式”体验印象。2018年我们将会看到更多以虚拟+实体组合的全感官体验方式,用户在交互过程中获取更多维的与真实场景匹配的信息反馈(听觉、嗅觉、触觉等),加深对信息的理解和体验记忆。运用案例全感官体验目前在游戏领域有了较为广泛的探索。《星舰指挥官》一改沿用十几年的鼠标,键...

    2018-02-18
  • Sketch入门教程,教你4步打造完美投影

    经常逛Dribbble,Behance还有很多外国设计网站的小伙们应该都会发现,流行了一阵子的扁平化风都带有一个很清爽的投影(diffused drop shadow)。比如像这样的这样的还有这样小伙伴们有没有自己尝试过去做呢?会不会觉得很简单?确实,使用Sketch的小伙伴儿们应该都知道,Sketch添加投影的方法超级简单,旁边Shadows按钮一点击,就添加了一个投影。但有个问题是,Sketch的投影不是很好控制,容易做出这种四周黑...

    2018-04-16