B端表格设计的基本交互形式
一份点赞超过60K的表格设计经验，省下亿万脑细胞！
这篇文章共1776字，阅读大约需要7分钟。更多最新文章发表在公众号“彩虹BOOK”上，欢迎关注！
前言：
目前接手了一个包含N多表格交互设计的项目，在我广泛搜索涉猎表格设计的经验时，发现了这篇爆款文章，B端的表格设计看这篇就对了！涵盖了我目前在设计表格内容时，几乎所有的用户需求，错过这篇就像错过一个亿！
看到这篇全是表格交互例子的文章，让我在周五激动了一整天！
这种强烈的分享的欲望让我在周末做完整篇的翻译，然后分享给大家。结合我目前的工作，与我也是一种学习和经验的总结。
...
译文：
如果没有将数据可视化和具备编辑数据的功能，数据就毫无用处。未来行业的成功依赖于将数据收集与更好的用户体验结合起来，而数据表格的设计体验则非常重要。
固定表头
固定表头让用户随时都知道自己所在列的名称。
水平滚动
调整每一列的宽度
调整列宽可以让用户看到所有的内容。
设计表格样式
表格的样式有：白色和其他颜色相间的斑马线设计，单纯用线分割，自由形式等。
表格密度展示
为列表设计不同的密度，用户可以根据需要自行切换，比较紧密的行距让用户无需滚动就可以浏览更多的数据。
数据可视化
让数据可视化，提供表格内容的概括性预览，让用户无需细读每一条数据就能得到想要的信息。
分页展示
分页设计方便用户跳转到相应页面，但是也常常被无限滚动加载的方式取代，无限滚动加载指的是随着鼠标不停地往下滚动，页面内容也会随之加载，这种方式适用于发现类的网站，但是对于考虑优先级的产品来说就不太合适了。
悬停展示
当用户悬停时显示更多功能可以减少视觉混乱。需要注意的是，它可能会导致可发现性问题，因为用户需要与表交互才能看到更多的功能。
直接编辑
直接编辑可以让用户在当前表格内修改数据和内容，而不用额外再跳转其他页面进行操作。
可扩展功能
可以扩展的表格设计允许用户在不丢失上下文的情况下浏览更多详细信息。
快速视图
与可扩展功能非常相似，快速视图使用户能够在保持上下文的同时查看附加信息。
弹窗
弹窗设计同样可以让用户停留在表格视图中，让用户更专注在附加信息和操作上。
多层弹窗
多层弹窗功能对于活跃用户来说非常强大，可以同时完成多种操作，或用来比较不同项目的详细信息。
点击详情展示
单击链接会将表格转换为左侧为列表项和右侧为其他详细信息的视图。它使用户能够解析大型数据，以及查看单独的项目详情而不会丢失它们的位置。
可排序的列
排序允许用户按照字母顺序或数字顺序对列进行重新排列。
基本筛选
提供基本的筛选功能来搜索表格里的相关数据。
列筛选
这种设计模式允许用户将过滤参数分配给特定的列。
可搜索的列
这种设计模式允许用户在每列中搜索特定值。
添加列
这种设计模式允许用户根据需求在数据表格中添加列。
可编辑的列
可自定义的列功能使用户能够选择他们想要查看的列并进行相应的排序。 这个功能还包括保存预设后再修改的能力。
...
为什么表格设计很重要
数据正在成为全球经济的原材料。对数据的追求推动了行业的重塑。能源、媒体、制造、物流、医疗保健、零售、金融，甚至政府都在经历数字化转型。
然而，如果没有可视化数据并对其采取行动的能力，数据就毫无意义。未来十年幸存下来的公司不仅将拥有卓越的数据；他们也将拥有卓越的用户体验。
良好的用户界面设计基于用户的目标和行为。用户界面反过来也会影响行为，从而推动进一步的设计决策。用户体验以微妙和无意识的方式改变了人类的决策方式。所看到的、呈现的位置以及交互的方式，都会影响行动。重要的是我们要做出能够带来更美好世界的设计决策，一个符合这个时代的数据表格设计。
Thanks!
原作者: Andrew Coyle
原文链接: https://medium.com/nextux/design-better-data-tables-4ecc99d23356
