发布时间：2021-7-14 分类： 行业资讯
“如果我有一个小时来解决问题，我会花55分钟思考它，然后花5分钟思考解决方案。 ”的——注册
我们是来自CareerBuilder和视觉设计师Ada的互动设计师Havana，我们的视觉设计经理Mark Patterson为我们提供了一项任务：设计用于具有不同用例和不同目标用户的产品线的表单的UI规范。我们使用的方法包括快速确定目标和问题的核心，并通过测试尽早验证我们的想法。生成有效的解决方案，快速获得团队认可，最后使用用户测试进行验证。
表单设计是一个具有挑战性的问题
当我们审查各个产品团队的原型时，我们发现这些表格不一致——他们有各种UX设计解决方案。大小，链接，CTA，过滤器，排序和分页无处不在：
（其他产品线上的表格）
我们需要一个能够普遍服务于所有产品并适用于将来出现的产品和功能模型的用例。
我们的视觉设计总监发布了特定的用户界面元素，我们承认，当我们被分配到表单设计时，我们感到害怕。表单是几乎每个产品都使用的模块。 GareerBuilder是一个为广泛用户提供服务的产品：求职者，招聘人员和人力资源。每种产品在使用方案，用户目标和功能方面都存在巨大差异。我们如何创建足够灵活的表单？
更重要的是，我们都在不同的城市，所有合作必须远程完成。
开始设计
在收到表格设计任务后，我们立即开了一个小时的电话会议。我们的目标是退后一步，回归大局：
1.用户通常在表单上做什么？在电话会议上，我们查看了pattrns.com的一些示例，以推断表单背后的用户目标。我们最终总结了三个用户目标：
一次浏览大量信息，例如：显示多个项目及其相应状态
快速识别并执行删除多行，下载多个项目等操作
比较信息，例如：完成了多少项目以及正在进行的项目数
（某些形式的例子）
2.桌子设计的最大难点是什么？我们需要设计一个支持排序，多选，批处理和数据分组的表。并非所有表单都需要这些功能，但我们需要讨论这些功能。
3.表格可以模块化吗？我们将表格划分为以下模块：
分页
扩展视图
编辑模式
行动呼吁
定制
细胞截短
图标/图像使用
未读/读标识符
在5周内，我们见过4次，分享了我们获得的信息，并就目标和思路达成了共识。会议结束后，我们研究了相互分配的组件，并提出了一些初步想法。我们收集了这些想法，并在五天后召开了会议。在这次早期的迭代会议上，我们的目标是简单地提出初始解决方案。
基于我们不熟悉的许多用户故事，我们希望通过测试，消除可用性问题，功能缺陷，指出潜在问题和我们的想法来测试这些想法。不仅涉及用户体验团队成员，还邀请主要开发人员确保我们的想法在技术上可实现。我们开了这次会议是为了避免在最后的迭代失败上浪费时间。它还确保整个团队可以快速进入该州。
（与表格相关的一些注释和草图）
我们得到了一些反馈，然后我们开始了新一轮的迭代来调整我们发现的问题。我们还在中途举行了一次会议，以确保每个项目的进展，并确定完成的工作和随后的工作。然后在提交给团队的会议上缩小选项提交和校对，以确保我们不会错过任何状态。
在此过程中，我们使用草图和由工艺加载的公司内部样式库。
（我们的工作流程）
表格构成
如果您正在设计表，我们可以参考不同组件的处理（我们使用虚拟数据）：
分页
以前，我们使用简单的数字分页。想象一下，在数百页中跳到563页。连续转动562页是一个非常痛苦的经历，因此我们引入了一个“跳转到页面”的下拉菜单。它还包括一个下拉菜单，每页显示x个结果，允许用户自定义他们想要查看的内容。分页是这样的：
（寻呼）
但是，如果我在第4页，我不太确定这个页面是什么样的。
（用户浏览不同页面时的分页显示）
最后，我们允许各自的产品团队决定哪种类型的分页最适合其产品。
“为多个产品设计组件时，您必须具有灵活性
（分页的不同显示选项）
在设计分页时我们学到的最重要的事情是：一步一步，深入挖掘，发现其背后隐藏的复杂性。 （警告：总有一些隐藏的复杂性。）
编辑模式
我们产品的一个特点是能够编辑特定的细胞。目前的设计是让所有可编辑单元在视觉上保持文本输入框样式。这会产生令人困惑的体验——用户如何保存编辑的数据？目前的设计尚不清楚。
（可编辑内容显示为文本框）
另一个问题是容易造成误操作。用户很容易意外编辑错误的单元格——可以取消吗？它会自动保存吗？互动不明确。
这个模型的好处是很清楚地显示什么是可编辑的，什么不是可编辑的。在上面的示例中，用户可以修改艺术家的姓名和电子邮件地址，但不能更改日期。我们最终决定保留这一优势，但更准确地满足了用户的期望。
大多数用户都熟悉特定的图标，例如“铅笔”，“检查>并且“取消”图标。铅笔图标用于指示可以编辑的内容，我们决定在我们的设计中采用这一点。
（编辑图标：默认为灰色）
首先，我们使用灰色铅笔图标，当用户鼠标悬停时，它变成了鲜艳的颜色。一位同事提出了一个可用性点：移动用户应该做些什么？移动端没有悬停状态，无法显示图标的悬停状态。用户可以识别灰色铅笔图标是否可点击？构建用户测试会话以获得此问题的答案。最终测试的结果表明，在大多数情况下，他们完全忽略了灰色铅笔。我们的解决方案是用超链接的颜色替换铅笔，以便用户可以快速找到它的位置。
用户单击此图标后，文本输入框旁会显示绿色勾号和红色提示。从测试中，用户很容易知道在单击铅笔后如何修改单元格的内容。
我们最初担心在操作列之外放置一个编辑操作，所以我们对它进行了测试。 7/10用户直接选择使用该铅笔图标，即使他们看到下拉菜单。用户一致建议铅笔应该使用蓝色，因为有些人没有立即注意到它。
用户的话说：“灰色编辑按钮太弱而无法找到，但是当你注意到它时，使用起来非常简单。我非常喜欢它，非常好。 ”的
（最终编辑模式）
行动呼吁
如上所述，CTA的处理在所有原型中的差异最大。有时，CTA放在桌子的顶部，有时作为按钮，有时作为单元格中的按钮，作为图标，或作为下拉菜单中的元素，随处可见。
由于用户使用表单的目标之一是快速处理它，我们必须让用户在处理时不必浏览整个表单。它们必须放在固定的位置。还有其他问题：CTA可以作为行尾的文本链接吗？还是在桌子的顶端？他们需要用图标代表吗？如果有超过4个操作如何显示？我们如何保持其他列的状态？我们最终设定了一个规则来放置所有操作：
一个。表格中每行只有一个操作：显示为图标+标签
湾该表每行有两个操作：显示是文本链接
C。该表每行有两个以上的操作：显示以下拉菜单
我们已经直接显示了两个操作，因此用户可以快速使用它，但是当它们操作两个以上时，它们占据了很大一部分位置，因此我们将它们放在下拉菜单中。经过几轮迭代，我们的主要论点是是否使用带有图标的图标，但由于我们不确定未来的潜在用例，我们决定使用该图标，但也迫使设计师使用描述一些困难的图标了解操作。
（编辑模式）
如前所述，未在下拉菜单中放置的唯一操作是“编辑”。使用铅笔图标将编辑放置在相应的单元格中以允许内联编辑。放置在单元格中为用户提供了可以编辑单元格的期望，而不是让他们认为整行是可编辑的，这反过来会造成挫败感。
同样，如何将操作应用于多行？单击操作列然后操作多行数据可能是一种非常糟糕的体验。我们借用了Gmail模式，选择一行后，顶部会显示批处理操作栏。但是，Gmail上的操作栏视觉上很弱，我们使用更明显的颜色更改来吸引用户的注意力。
（批量操作）
表单自定义
表中会出现很多标题和列数据，有时数据显示受表格宽度的限制。在某些情况下，您可以允许用户选择他们想要查看的表列。为此，我们必须使选项更清晰，当用户选择达到上限时，我们用灰化选项表示。
（表单定制）
细胞截短
在有限的空间中，单元中内容的长度易于出现问题。我们是否允许将文本包装在单元格中？最初，我们受到了Virgil Pana的运球工作的启发：
（Virgil Pana的运球工作）
这是一个很好的解决方案，我们通过开发讨论了技术可行性。
最终我们了解到，即使可以实现，该表也将包含太多复杂的算法，这可能会导致加载速度缓慢。这项工作是否值得付出额外的努力？此外，如果您必须考虑自定义表单的选项，那么复杂性会增加多少？同样，这就是开发人员尽早参与的重要原因。我们终于认为这不是一项关键任务，也不值得付出努力。我们最终建议使用浮动层来显示所有信息作为替代。
（使用浮动图层显示特定信息）
图像的使用
虽然我们仍然在思考表格的细节，但是当一位同事提出我们没有考虑的用例时，我们对斑马图案的设计有一定的偏好。在产品的一个页面中，一个要求是将徽标上传到表格中。由于徽标不透明，当整个页面出现在灰线上时会变得很笨拙。
在这种情况下，我们不能简单地忽略它，我们必须提出一个解决方案。这是最好的简单的一个很好的例子。现在，我们决定添加一个指南来上传透明的png格式徽标。幸运的是，在此处上传徽标的用户都是客户履行团队的成员，他们比普通用户更具技术性。
当我们认为我们最终解决了斑马模式时，另一位同事建议用户案例会在单元格中显示警告指示符。整个单元格的背景颜色填充了警报的颜色以吸引用户的注意力。虽然这不会从美学的角度改变表格，但它确实有一些后续问题。我应该使用什么不透明度？我们是否希望开发人员专门处理单个单元格上的颜色？为了简化它，我们决定使用该图标。但如果用户不容易注意到这个警告，我们仍然会关注它。
（两种处理警告的方式）
读/未读标识符
我们探索了不同的方法，例如使用彩色圆点和竖条来标记未读物品。这些点完全混合在表中。为了使它看起来更引人注目，我们还加粗了与此相关的文字。然后我们的同事提出了一个要点：复选框。这个点是在复选框旁边还是在文本旁边？
（未读早期处理）
这一点在美学和功能上已经成为一个不太好的解决方案，所以我们最终选择了垂直条。这个垂直条简单有效地表明该行未读并且也是一种常见的模式。
（未读状态）
扩展视图
有时表不能容纳太多的项目数据。在覆盖大量应用程序数据时，扩展数据表中的行是一种常见模式。我们使用模式对相关扩展进行分组：
（扩展视图的示例）
展开的线条是灰色的，与其他线条分开。相关内容放在其内容区域中。
我们还受到另一个模型的启发，其中统一条形图绑定线条和扩展，使内容看起来相关。
（扩展视图的一个例子）
我们决定将这两个选项结合起来。我们将延长线设为蓝色，并在左侧添加了一个均匀的条。
（第一种情况）
（第二种情况）
第一个选项看起来太像选择状态。深蓝色条形图有意义，我们之前使用此条指示未读行。我们现在如何区分未读和扩展状态？为避免混淆我们的用户，请将它们合并到一个列中？
（第三种选择）
最初我决定增加宽度并同时改变颜色，但是在增加宽度之后，它看起来很尴尬，看起来仍然是未读状态。我们向团队展示了解决方案，最终他们提出了一个更好的解决方案：使用与未读状态相同的宽度但使用灰色。
（第四个计划）
视觉规范
边距和间距对于视觉设计至关重要，需要贴上开发标签以确保最终的视觉完整性。我们创建了本指南，以便我们的团队可以设计一致的表，无论他们在做什么产品。
（标签为边距和间距的文件）
渲染和测试
这些表格得到了内部团队的积极反馈。当然，我们需要改进很多东西，但许多组件都经过批准并交付开发。
但即使我们得到积极的反馈，我们仍然想验证我们的假设：这对我们来说是外在的吗？用户是否知道下拉菜单的操作？编辑操作的例外是否令人困惑？分页清晰吗？我们和用户研究员Kiayni Spearman和Michael Pate组建了一个团队，通过UserTesting.com进行一些基本的可用性测试。用户研究员帮助我们设计了一个测试，提示用户执行以下三项操作：
让用户执行一些操作
询问用户列表中有多少项，它们所在的页面
让用户编辑某人的电子邮件地址
UserTesting.com上的10个视频全部在发布后两小时完成。
用户研究结果
关于在下拉菜单中查找操作：
“虽然没有删除帐户的按钮，但我认为它仍然非常直观，因为表格顶部的标题非常清楚地告诉我在哪里可以点击以查看我可以对该条目采取的操作列表。我很清楚如何继续删除此条目，即使我是第一次使用此表。 ”的
“我应该已经意识到动作栏（并猜测）其他操作将放在那里””
但是，我们的测试都没有显示分页对参与者来说有点混乱。但是，由于我们团队的真实反馈和参与，我们已经确定了我们需要做的方向，而不是保持原状。
主要收获
我们从制定表格的标准和主要模式中学到了很多东西。在解决问题时，我们了解到：
提前见面并写下你的目标，退一步思考为什么
花一些时间来定义问题而不是解决问题
首先放弃不好的想法，尽早表达你的想法，并分析延迟，批评，问题等等。让多方提前参与，以避免浪费时间在不可行的解决方案上
将其分解为更小，更可行的组件并进行更多讨论，发布这些组件和最终可交付成果
你自己留着。因为我们在早期就定义了目标，所以我们将注意力集中在这个问题上，并放下对解决方案本身的任何情感依赖，使其更容易接受和实施反馈
对于第一次翻译，请指教。
译者注：CTA（号召性用语）是指网站中使用的横幅，按钮或某些类型的图形和文字，用于提示用户点击并进入下一个转换过程（如付款，继续阅读等）。 。它是入站营销和许可营销不可或缺的一部分，致力于让用户参与到主导流程中，从而将用户转变为客户。
译者：janedaring
原文：Havana Nguyen在Medium中发布
链接：https://uxdesign.cc/designing-tables-for-reusability-490a3760533
本文由@janedaring发表。未经许可，禁止复制。
该地图来自unsplash，基于CC0协议
