|
|
原作者： Andrew Coyle，这是一篇翻译于国外优秀关于数据报表的文章，对于需要设计后台报表的设计师来说，应该很有用！
如何设计好表格
在数据表格中，什么样的UI算是成功的
不能可视化和交互的数据是无用的。未来行业的成功将使高级数据收集与更好的用户体验相结合，数据表包含了大部分用户体验。
良好的数据表格允许用户对信息进行浏览，分析，比较，过滤，排序和操作，从而获得洞察力和行动。这次介绍了20种设计结构，交互模式和技术列表，以帮助您设计更好的数据表。
01
固定表头
当用户滚动表格时，固定表头可以方便用户快速获取当前数据信息。
02
水平滚动
对于一些比较大的表格来说，提供水平滚动非常有意义。在首列放置一些标识数据，并锁定首列可以方便用户去比较数据。
03
可调整列宽度
用户可以通过拖拽调整列宽，方便其看到格子内的完整数据。
04
行样式
行风格帮助用户浏览数据。通过删除行线或斑马条纹来减少视觉噪音对小数据集有效。浏览较大的数据集时，用户可能会迷失。线路划分可以帮助用户保持自己的位置。交替行（又名斑马条纹）可帮助用户在浏览长水平数据集时保持其位置。虽然当有少量行时，它们会导致可用性问题，因为用户可能会将注意力集中在突出显示的行。
05
可调整数据密度
行距更低的表格可以帮助用户无需滚动即可查看更多数据。但是这可能会导致用户在扫描数据的时候，看错一些数据。这就是为何很多好的表格采用了类似的选项按钮设计，可以让用户自己去选择数据的密度。
06
提供可视化的图表
可视化的图表可以让用户对下方的数据报表有一个初步的印象。同时，用户在看数据报表前，就能从图表那发现数据的问题和得出一些初步的结论。
07
分页
通过分页功能，用户可以调整单页显示的数据量。下方的例子，就是说明用户可以自定义报表每页显示的行数。这种设计常常会被另一种设计所取代，那就是无限翻页设计。（译者Jimmy：就是类似 Pinterest 的自动刷新机制）当用户滚动鼠标的时候，就会自动翻页。无限翻页设计对于一些「探索型」的网页来说，特别有用，但是在一些需要表达优先级的场景就不太适合。（Jimmy：类似 Pinterest 就是一个探索型的场景，内容不分优先级。但是类似清单类的应用，就不适合了，因为清单是有先后顺序且有优先级的。）
08
鼠标悬停操作
如果需要加入更多操作，可以采用悬停操作设计。但是，这会导致可见性问题，因为用户需要将鼠标移动到对应的位置，才知道有更多功能。
09
行内编辑
用户可以很方便地通过行内编辑功能编辑数据，而不需要跳转到单独的详情页面中进行编辑。
10
可展开的行设计
提供可展开选项可以方便用户在不丢失内容下，查看一些附加信息。
11
快速查看
除了使用可展开的行的设计以外，还可以使用侧边栏弹出更多信息的设计。
12
模态弹窗
模态弹窗允许用户停留在表单视图，同时又能让用户的注意力集中在更多的信息与操作上。
13
多模态弹窗
多模态弹窗给高级用户提供了更多的功能操作，同时还可以更方便地去比较数据的不同之处。
14
行细节
单击行链接可以将表单转换成另一种模式——左侧显示列表数据，右侧显示详情数据。这样用户可以很方便地去分析一些复杂数据，还可以同时比较多组数据，且无需进行退回或者一些复杂的操作。
15
列支持排序
列支持按字母顺序和数字大小进行排序。
16
支持基本的过滤
基本过滤功能允许用户快速过滤表单中的数据。
17
筛选列功能
允许用户为特定的列去做筛选操作。
18
可搜索列
通过快捷的搜索操作，允许用户在每个列表中搜索特定的值。
19
添加列
允许用户添加列。这种方式可以保证在有限的空间下承载必要数据的同时，还能让用户按照所需添加额外的列。
20
可自定义列的位置
允许用户按照自己的需求，排列列的位置。此功能还要记录用户的操作，保证用户下次使用时还是TA上次设置的那样。
良好的用户界面设计是基于人类的目标和行为。用户界面反过来影响行为，进一步设计决策基于此。以微妙和无意识的方式，用户体验改变人类如何作出决定。看到的是什么，在哪里呈现，以及如何交互，影响行动。重要的是我们做出设计决策，创造一个更美好的世界，一次一个数据表设计。
关注我们
|
|
发表于 2018-11-3 00:20:10