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

相关推荐

  • 【干货·扫盲】主屏幕尺寸,主屏分辨率,像素密度,PPI之间到底什么关系?

    今天我给大家来讲讲这几个咱们经常打交道的词到底啥意思,以及他们之间到底有什么关系。这篇文章是我花了一个下午从N多篇文章里提炼出的一个白话版,保证让你看得懂。 咱们从手机开始说起吧。先上一张图,给大家看…

    交互设计 2015-09-08
  • JD Watch V1.0设计思考

    近年来可穿戴设备渐渐进入人们的视线,京东JDC也为给用户一个完整的体验加入到了探索的队伍中来。 ·全新的平台 谷歌与苹果的Watch设计理念基本相同,两个平台下我们面临相同的问题。如何体现Watch平台自身重情景、…

    2015-06-11
  • 零基础入门交互设计为什么会失败?

    所有群里最常见的新人问题就是——零基础怎么学习交互设计?其实,很多时候零基础不可怕,但最怕的就是零基础带来的那种浮躁,比如往往他们都追求速成。每个职业人都有零基础的时候(废话),而在社会上获得工作机会…

    2015-12-02
  • 标签栏设计的心理暗示:高亮与视觉纵深的心理模型

    UI在设计上服从于交互,形式上不拘于一格,视觉纵深也只是其中一种心理模型。
    注:本文面向入门级设计师,大神请飘过~

    2017-05-18
  • 实例分析:从搜索结果看地图搜索的交互设计

    每一个交互都有其特有的逻辑支撑,即便是一点小小的体验不同,背后的逻辑可能千差万别。

    2017-05-11
  • iOS与安卓的交互特点

    1、物理硬件(detail返回到list) 电源、屏幕、返回、搜索 2、操作动作:(编辑删除、长按删除) android:长按-双击 ios:基本手势(滑动) 3、导航栏(detail返回到list、个人中心drawer) 跳转按钮、展示数据(…

    交互设计 2018-03-13
  • 【设计思维】移动思维和WEB思维

    随着移动互联网的兴起,移动思维这个词也越来越多被提起。经常会有人问我什么是移动思维,其实这个词是相当WEB思维而言的。 我总结了下: 由于物理设备的不同导致的使用方法和使用习惯不同。 (思维是针对 移动产品…

    交互设计 2014-11-29
  • UED专访 | 张永和、王昀:寻找未来城市共生的答案

    📌编辑、剪辑| P.S📌采访| YHz2017年10月16日,全球天文学界联合发布一项新的重大发现,在1.3亿光年外,双中子星合并产生的引力波带着他的伴侣首次造访地球,这次长途跋涉的旅行为人类探索宇宙打开了新的大门。从爱因斯坦预言引力波到如今的发现,百年间,人类在探索未知空间的同时,也不断改造着我们的生存家园。着眼当下,我们对未来城市有何新的畅想?下文中有张永和、王昀专访视频不要错过!!!未来城市探讨在UED之前的采访中,厦门大学建筑与...

    2018-02-08
  • 你的APP引导页,为啥用户会忽略?【UXRen译#159】

    作者:Anthony  |  翻译:冬柏,校审:小四   对于一个新的App产品来说引导页就是它的说明书。当新用户第一次使用时,就可以通过引导页简要的了解到整个App的特征,所以这对新用户来说是很必要的。 但是如果引导页…

    交互专题 2017-08-07
  • loading做成什么样子,我才会等!

    文/Seven 来源/数英网 毫无疑问,每个人都不喜欢等待。尤其是在浏览自己喜欢的页面或电影时,对着千篇一律、毫无新意的加载页面,简直枯燥乏味无聊极了! 实际上,有研究表明,普通用户能够忍受的最长的加载页面的…

    2016-04-21