[译] 为企业应用设计更好的表格

• 原文地址：Designing better tables for enterprise applications
• 原文做者：Adhithya
• 译文出自：掘金翻译计划
• 本文永久连接：github.com/xitu/gold-m…
• 译者：Lai
• 校对者：LeviDing Ruixi

为企业应用设计更好的表格

深刻了解如何在企业应用中设计表格，以及如何避免常见的错误

企业应用一般很复杂，由于要展现大量的包含多种来源、模式和用户信息的数据。须要先浏览一下复杂的图表、使用模式和数据列表，才能理解控制台的功能。

设计企业应用程序最大的挑战是来自在特定场景中工做与否的模式示例的缺少。

因为大多数的企业应用程序都涉及与公司相关的敏感数据，因此不多有讨论设计企业应用程序时面临的常见问题的实例。现有的模式库深刻讨论了每一个组件如何运行工做，可是不多涉及什么时候使用它们。咱们在设计库中看到的模式一般过于简单，而实际的企业应用程序在本质上数据和用例都更为复杂，这些模式并不起做用。

这些模式在建模仓中没什么问题，可是一旦碰到复杂的工做流、特定范围的用户类型或者大规模数据时，就不能正常运行了。

企业界的表格

下面是一个典型的企业应用界面。工做窗口里大量的面板上挤满了密密麻麻的信息，每一个面板所指示的信息又和屏幕上的其余选项息息相关。

图片来源：docplayer.net/docs-images…

如上所述，应用程序中最耗费空间的部分是表格。本文将帮助设计师根据具体状况来探讨表格的正确使用方法。

一种过去大多面向消费者应用的模式，在企业界居然也很是有效，并被普遍使用。然而也没有什么更好的方法，只有表格能展现庞大的数据列表。表格的做用在于企业应用的性质可以知足用户同时查看多行数据、经过警报扫描、比较数据，以及按照用户选择的任何特定顺序查看数据的要求。

下面的这张图片看起来像是一个很是正常的表格，起初可能丝绝不会质疑它的可用性。但当你进一步使用它的时候，你会发现操做起来有点奇怪。

企业应用中很是广泛的表格。

1. 表格上的连接

也许会跳转到用户的我的资料页。

第一个例子里，第一列上的连接可能暗示着点击后会跳转到用户的我的资料页面。虽然页面说明不是很清楚，但也不难猜到。

可是下面这个例子就未必了，你能猜到点击下图中的连接会跳转哪里吗？

这彷佛是某种与每行内容有关的代码。以这种方式设置连接，会让用户感到困惑。

以上是一个来自企业应用程序的真实示例，点击连接后会将代码复制到剪贴板。可是这个操做不是很容易理解，应该避免这种意义不明的模式。

2. 表格上的操做

删除、移动、打印、导出等是很是常见的操做，特别是在同时处理多个项目时。大多数企业应用程序每行都会有一个操做，这样设置有时颇有必要，由于须要对某些特定行执行操做。话虽如此，其实大多数操做能够从表格的行中推算出来，成为页面的不一样部分。

靠近连接的操做

要在一行中执行的操做位于距离标识列最远的最右边的列，而在本例中，操做位于第一列。

一行中要执行的操做的距离不该该远离识别列。一般状况下，这会致使在错误行上执行操做。如若否则，用户须要在识别追踪行上花费过多精力，并努力避免点击操做到另外的行。这种模式很容易出错，设计时应该避免。

冗余操做

每行都有一个 「删除」 操做。

在这个例子中每行都重复出现一个「删除」操做。想象一下，每行有 五、6 个重复的操做选项，会让表格看起来很是混乱。不只如此，这样的表格中也不能同时删除多个选项，由于没有办法选择进行多选。

现代企业应用的一个示例，表格里每项以前都有一个复选框。

在同一时间、同一个表格里，选择并执行多个项目上的操做的一个好的模式是每行都容许被选中。选中后，工具栏出如今表格的上方或下方，能够进行要执行的操做。

在表格里选择多个项目后，有一个工具栏能够对所选项目执行操做。

大多数具备表格形式的列表项的企业应用程序都遵循这种模式。可是一些设计师也发现，由于表格的每行都有复选框，因此在视觉上有点混乱、使人不知所措。

在下图中能够看到，Google 收件箱的模式是，只有当鼠标悬停在该行的最左侧时，复选框才会显示出来。另外，对于操做能力较强的用户，可使用 shift 快捷键同时选择多个项目。这是在表格上实现操做模式的一个很是好的例子。

这种模式减小了视觉上的混乱，让用户能够思考如何实现多选。我也是尝试了几回后才找到一种能够多选的方法。

只有图标的操做选项是另外一种经常使用的让用户思考的模式，而一个经典的用户体验法则是 别让用户思考。这种模式让用户记住每一个图标的含义和位置。

3. 表格的分页和搜索

因为企业应用程序的数据量巨大，因此表格一般要运行多个页面。设计师但愿了解用户是会经过翻页来查看数据，仍是只查看第一页显示的内容。

若是表格不须要翻页就能查看数据，那这种企业应用的表格模式就是成功的。

如何实现表格不翻页就能查看数据呢? 优秀的过滤器和强大的搜索机制。

用户翻页是由于他们正在寻找特定的信息。因此在咱们设计翻页以前，必须提出一个问题

如何才能更快捷方便地在表格里查找信息？

一个很好的成功解决方案是在天然语境的上下文中设置过滤器。也就是说，基于当前屏幕上的用户工做流程，过滤器显示与当前场景最相关的选项。

例如，在这个演示应用程序中，根据用户的不一样工做流程阶段出现不一样的过滤器。也许很难实现，可是一旦成功，将是用户体验的一个伟大胜利。

何时搜索可以起到帮助做用？

刚刚离开当前页面的时候..

图片来源：www.aspsnippets.com/Articles/Al…

如今咱们知道了如何考虑分页设计，不管如何这是颇有必要的。我最不能忍的一种分页方式是下图中呈现的项目限制：

这个系统每页展现 10 条数据。

用户在一页中只能查看 10 条数据，必需要翻页来查看第 11 条。为何不能编写程序来查看表格下一页是否只有 1 到 3 条数据，若是是的话所有展现在当前这页呢？或者能够作得更好一点，判断条目少于 25 项不作分页。这些并不难实现，只是他们并无多加考虑。

分页上多选被中断

翻页后多选失效。

用户勾选了第一页的三个选项，而后去勾选第二页的前四个选项，逻辑上来讲，他点击删除按钮时，这 7 项会被所有删除。可是实际上并不会发生，由于分页时跨页面保留用户选择的信息实现起来技术挑战难度较大，成本也很高。

表格中有分页时，选择所有项目是另外一个挑战。用户只可能选择当前视图中的全部项，或者选择完整列表中的全部项。

分页时选择所有项目可能会很混乱。

上面的例子里，用户先选择了当前页面上的全部选项，而后在整个列表中选择了所有 3000 个选项。分页操做后，勾选的信息失效了。这又是因为分页技术的局限性，由于从工程技术角度来看，保留选择记忆的成本很高。

无限滚动或者延迟加载的效果又如何呢？

许多应用程序目前正在从所有分页模式转型到 Facebook 或 Twitter 风格的无限加载信息模式。对此，设计师们各执一词。对我我的而言，一个「加载更多」按钮效果最好。

在当前加载的表格最后增长一个「加载更多」按钮。

这只会加载当前视图中的内容，若是用户主动执行加载更多地操做，则会加载出更多内容。

最后一点想法

本文并非一个设计表格的绝对正确的建议指南，只是一个设计表格时常见问题和解决这些问题的方法的集合。若是你有任何关于设计表格的补充建议，但愿你能来信一块儿讨论。

Andrew Coyle 在设计更好的数据表格一文中提出了很好的设计表格用户界面的建议。强烈建议你读一读，以便了解良好的表格交互实践。

本文图片模板来自Sketch App Resources，是由Jurij Ternicki制做的支付管理系统原型。

我是 Adhithya ，旧金山 OpenDNS 的产品设计师。

你能够关注个人 Twitter； 戳这里 查看个人做品；或者直接发邮件联系我 adhithya.ramakumar@gmail.com

Adhithya 写了这篇文章来分享知识技能，并帮助设计社区成员成长。全部在 uxdesign.cc 上发布的文章都循序相同的设计哲学

掘金翻译计划 是一个翻译优质互联网技术文章的社区，文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、React、前端、后端、产品、设计 等领域，想要查看更多优质译文请持续关注 掘金翻译计划。