线框之死。 直接到高保真！

用户体验设计是一门引人入胜的学科。 要做到这一点，从业者必须精通各种主题和技能。 为了实践以用户为中心的设计方法并为日常产品设计挑战创建易于使用的创新解决方案，UX 从业者的手艺和理解涉及从基本绘图到叙事/旅程设计再到认知心理学的方方面面。

在 UX/UI 设计过程中使用了各种各样的工具、生成的工件和发现的发现，它们被捕获在各种文档甚至原型中。 我们最知名的、最重要的神器是好的 ol' 线框。

线框——通常是为快速评估而创建的单色设计骨架——非常棒。 它们使我们能够将来自许多不相关方的输入翻译成一个每个人都可以查看的文档。 许多不同的工作职能评估线框； 业务分析师、项目经理、营销主管、各种设计师和开发人员、各种其他供应商和服务提供商——甚至是产品测试时的目标受众。 线框让每个人都可以看到他们的个人需求将如何得到解决，并让整个团队有机会在需要进行任何繁重工作之前解决所有问题。

有利有弊，但在某些情况下，完全跳过线框阶段是有意义的。 通过在发现后或准备原型设计时直接在高保真级别处理 UX 和视觉设计，可以节省大量时间。 这将使其他人有机会同时评估产品的功能和外观，从用户测试参与者到客户和同事。

让我们找出为什么线框有时会出现问题，何时跳过它们是有意义的，以及如何使无线框流程适应工作流程。

线框的问题

无论是在瀑布环境还是敏捷环境中，典型的设计过程都涉及研究、定义、构思、原型设计、测试和部署阶段，以及沿途与利益相关者一起审查的许多接触点。

让我们看一下线框设计可能成为瓶颈的设计过程：

原因1：客户不明白他们在看什么

设计过程通常从对问题的某种研究开始。 案头研究、利益相关者访谈和用户访谈只是可以进行的一些活动，以获得更深入的了解。 经过研究，设计团队开始评估一些想法和概念，以找到最佳解决方案。

当一个概念更加充实时，设计团队通常会在审查会议期间与客户分享一系列线框图。

问题是，线框图非常抽象。

他们描述的东西类似于事物，但不是将要建造的实际事物。 在这个阶段，线框将包含占位符图像和各种 TK（即将推出）、FPO（仅用于放置）和 TBD（待定），如下例所示。

可能有关于功能、业务需求和错误处理的详细信息将在大量注释中显示。 通常，没有足够的时间详细梳理这些内容，因此客户将不得不自己阅读它们。

在线框审查期间，我们要求我们的客户专注于所描述的概念，并评估它是否似乎解决了业务和用户问题。 然而，我们仍然会收到一些问题，这些问题对我们来说似乎并不相关。 客户想知道线框是否是“最终副本”，或者他们是否可以看到要在英雄图像中显示的照片示例——或者关于将在视觉设计、UI 原型设计或开发中处理的其他问题。

对于客户甚至内部利益相关者而言，线框可能过于抽象而无法有效评估。 线框告诉人们设计完成后的效果，但他们仍然需要在精神上做很多工作才能将其融合在脑海中。 我们的客户可能是也可能不是视觉思想家，期望他们查看蓝图并想象一个成功的产品或网站可能太过分了。

有一些客户特别要求审查带注释的视觉设计，因为他们更容易连接点，进行深思熟虑的讨论并提供深思熟虑的反馈。

原因 2：它们并不总是适合用户测试

希望在设计过程中安排了一些用户测试，因为这是测试从整个概念的可行性到事务中显示的详细程度的所有内容的好方法。

测试这类事情的一种典型方法是通过原型设计。

线框可以而且确实可以用于原型制作。 设计团队仅限于测试流程和功能，并且由于缺乏视觉设计层，影响用户行为的视觉样式很容易被忽略。

这是明智的吗？ UX、视觉和文案设计都相互影响。 很难将它们分开并在测试环境中隔离它们。 与科学研究类似，一个单独测试的功能的结果无法控制或预测它在野外的表现。

有时，整体测试所有这些东西会更有效。

恰当的例子：多语言产品或服务。 这些语言可能具有不同的语法、字母和字符宽度，这可能会影响整体设计。

此外，由于复制内容会影响用户体验，因此翻译本身可能会影响用户体验。

例如，我们有一项任务要求我们测试几种不同的信息架构，因为需要用当地语言解释各种概念。 如果不测试 UI 中的实际副本，我们就不会发现对文案和翻译的影响。

我们发现需要更多的词来用当地语言描述类似的概念，并且我们必须在全球范围内改变按钮的大小和形状以适应该语言所需的冗长措辞。 如果在测试 UI 中的实际视觉组件时不关注文本问题，我们就不会发现按钮需要占据移动屏幕的整个宽度，这会影响我们未来的 UX 设计。

关键要点：从一开始就准备高保真 UI 是有意义的，尤其是对于多语言项目。

原因 3：他们让开发人员和 QA 陷入困境

在视觉设计阶段不可避免地发生的是一切都在移动。 堆叠的图像变成了瓷砖。 居中的文本变为左对齐。 手风琴触发器图标是+和- ，但现在它们是几个 V 形。

这是视觉设计过程的正常部分。 同样正常的是，视觉设计中所做的任何更改都不会反映在线框中，因为线框已“签署”。

当所有视觉效果都获得批准后，就该将所有内容交给开发人员了。 在大多数情况下，他们会收到一组详细的带注释的线框和一组漂亮的视觉设计以及样式指南。 现在由他们在这两个文档之间进行交叉引用并将其变为现实。

这是设计过程真正失败的领域。 我们为开发人员提供了太多可供参考的文档，并由他们决定哪些信息优先。 这增加了支持电话和 QA 所需的时间，自然会影响将产品或更新推向市场所需的时间。

为什么不给开发人员一份包含所有内容的准确文档呢？ 大多数客户也会喜欢一份副本，作为作品的完整参考。

解决方案：跳过线框

显然，有时需要完整的线框阶段，有时则不需要。 甚至有时直接进入高保真阶段完全胜过线框阶段。

如果其中任何一个为真，您可能会考虑跳过线框阶段：

有可靠的参考资料。

看看现有的工作。 可能已经有详细的 UI 参考可用。 如果您要更新现有网站或向现有应用程序添加新功能，请查看当前网站和应用程序以查找可重复使用的模式和样式。

如果您可以访问现有作品的源文件，那就更好了。 可以说，在开发过程中，某些功能和元素可能在翻译中丢失了，您可以参考源文件以了解该功能应该如何完成。

除了（或不存在）现有产品或网站之外，请检查是否有样式指南或模式库。 客户可能已经为一些品牌和视觉设计工作付费，这些资源可以再次用于您的项目。

使用尽可能多的样式和模式，以便您的高保真输出尽可能准确。

在此过程中，您已经安排了大量的迭代原型设计和测试。

在数周的原型设计和测试中为自己节省一些精力。 如果您第一次仔细设置文档并巧妙地使用重复的样式、图案和符号，您可以轻松地以高保真度进行增量更新，并将它们直接发布到您的原型制作工作流程中。 不需要线框图。

作为一个很大的优势，你可以用一块石头杀死两只鸟。 您可以在 UX 反馈的同时获得视觉和 UI 反馈，并一次性完成所有这些更改。

您的测试参与者非常真实。

正如您的客户和同事有时可能需要具体示例一样，您的项目的目标受众也可能需要。

最近的一次演出让我为低文化的目标受众设计财务屏幕。 阅读理解不是唯一的问题——抽象概念通常很难解决。 该目标受众通常需要使用具体示例来讨论金融概念； 否则，他们无法真正关注对话。

为了理解金融概念，这些观众中的测试参与者需要感觉他们实际上是在进行交易。 为了了解产品的工作原理，它需要看起来和感觉像一个真实的应用程序。

忘记像这样的观众的线框！ 你最终会花费大量时间来解释它们是什么——而你的听众不会关注这些任务，也不会关注他们对它们的感受，因为他们无法与在生活中使用如此陌生的东西联系起来。

您的客户的时间和/或预算有限。

很少有时间、资源和预算都对您有利。 您经常会发现自己试图缩减范围和价格，或者争先恐后地寻找可以节省和节省的地方，同时仍然为您的客户提供优质服务。

如果您的客户负担不起（或不太可能购买）完整的用户体验检查，我可以建议您缩短线框图时间吗？ 如果您需要，可以在内部创建一些，但要为您的客户继续推进项目。 测试真实、有形的设计，让您的客户对实际工作做出反应。

如何终止线框阶段

这部分相当主观，因为它将取决于您的个人工作流程和客户的具体需求。

话虽如此，这是一个流程“模板”，您最初可以尝试适应您的工作流程，然后随着您越来越多地以这种方式工作进行调整。

第 1 步：从您通常的研究和发现过程开始。

采访、实地观察、案头研究、竞争分析——无论你通常做什么（或计划做什么），都照常完成这个阶段。

第2步：沿途画一点。

在进行研究时，您可能会获得一些有用的布局和模式、引人入胜的流程等方面的想法。 记录这些你通常做的。 我喜欢在我的笔记本上制作缩略图，旁边有书面笔记。 您可能更喜欢在白板上画草图或截取有趣的 UI 模式的屏幕截图。 凡是能帮助你记住好主意的东西，就去做。

第 3 步：准备您的高保真文件

打开您选择的设计工具并正确设置您的文档。 选择一些画板尺寸并开始创建可重复的形状、组和符号。

花时间将品牌调色板保存为单独的色板，创建和组织类型样式，并制作可以根据需要应用于所有形状的标准投影和过滤器。

花很多时间让你的符号恰到好处。 您可能有一个按钮，根据它的状态，它可能有四种不同的颜色。 如果可以，请使用符号覆盖，以便您可以根据需要轻松应用不同的颜色和文本标签。

如果使用了任何自定义图标，请将它们保存为方形画板上的单个符号（或任何合适的形状）。 这样，您就可以轻松地放大和缩小它们，同时仍保持适当的间距和对齐方式。

第四步：开始设计。

当您习惯以这种方式工作并查看您的风格指南在哪里支持（以及在哪里不支持）时，您的第一轮可能会有点粗糙。 除了为尚未定义样式的模式创建解决方案外，还需要进行大量调整以使所有样式正确。

在整个过程中，请遵循良好的“复制方向”或真实副本（如果有的话）。 不要让标题写着“页面标题在此处”。 让观众了解如果它是真实的，这里会发生什么。

同样，不要创建电话号码为 555-1212 的姓名都为 John Smith 的列表。 使用随机列表生成器或插件创建不同的名称和数字，或创建您需要显示的任何数据集。 这可能看起来有点矫枉过正，但它可以让您解决布局和字符宽度问题，并帮助您的观众了解这五个条目都是不同的。

第 5 步：知道何时停止设计。

在这一点上，您不应该注意一些细节，因为它们确实需要太长时间。 也许是选择准确的图像进入英雄，或者设计一个自定义图标来指示下载状态。 在某些情况下，您可能会选择使用占位符图像或图标，并在以后测试真实图像或图标。

您必须在此处确定合适的内容，因为这将取决于项目的目标以及您的进度。

请注意，这可能取决于您的用户测试参与者需要什么才能正确评估工​​作。 对于我上面提到的低文化目标受众，没有什么是太多的细节。 对于每个参与者，我制作了一个原型的变体，并在整个过程中使用了他们的真实姓名和电话号码，这样应用程序就真的感觉像是“他们的”。 他们必须假设的越少，他们就越容易遵循，我的结果就越好。

第 6 步：享受高质量的反馈和测试结果。

将您的设计发布到您选择的原型制作工具，并将它们带到现场进行测试。 您现在可以获得的不仅仅是功能上的反馈。 您可以发现潜在的视觉问题，例如颜色对比度或易读性问题，并且可以发现复制方向或翻译问题。 您还可以梳理出用户对外观和感觉或品牌的积极或消极感受。

当你进入视觉设计阶段时，这些都是你可能会得到反馈的东西。 为什么现在不得到所有这些反馈？ 一些关于视觉效果的反馈可能会直接影响用户体验，反之亦然，所以如果可以的话，最好同时解决所有这些问题。

包起来

毫无疑问，在许多情况下，项目的成功需要完整的线框阶段。 复杂的设计，如响应式 Web 应用程序，需要单独且专注于线框。 与已经构思和应用完整的可视层相比，在线框阶段解决所有业务需求、边缘案例和错误处理将节省时间和金钱。

但是，在正确的情况下，直接使用高保真度可以改善您的流程：

• 改善利益相关者的反馈。 来自目标受众的客户、开发人员、其他设计师和测试参与者可以准确地看到他们将获得什么，从而使他们能够提供更高质量的反馈。
• 加快您的原型制作工作流程。 您的设计不仅可以立即进行测试，还可以同时获得许多方面的反馈：用户体验、副本和视觉效果。
• 向客户和开发人员交付单个文档。 无需交叉引用和检查各种文档以了解按钮应如何工作。 这也是您的客户与内部利益相关者讨论工作以获得更多反馈的好方法。
• 节省时间和金钱。 这几乎总是一件好事！

下次当你有一个项目时，你有一些现有的设计材料可供参考，或者如果工作的保真度低或高，它将对你的观众产生很大的影响时，试试这种方法。

• • •

进一步阅读 Toptal 设计博客：

• 电子商务用户体验——最佳实践概述（附信息图）
• 以人为本的设计在产品设计中的重要性
• 最佳 UX 设计师作品集——鼓舞人心的案例研究和示例
• 移动界面的启发式原则
• 预期设计：如何创造神奇的用户体验