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