线框的问题，直接达到高保真！

本文概述

• 解决方案：跳过线框
• 如何终止线框阶段
• 包起来

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

在UX ui设计过程中使用了各种各样的工具, 生成了构件, 并发现了发现, 并且将它们捕获在各种文档甚至原型中。我们最容易辨认的东西就是好的线框。

一组移动应用程序低保真线框

(由桑兹比)

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

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

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

线框的问题

无论是在瀑布还是敏捷环境中, 典型的设计过程都涉及研究, 定义, 构想, 原型设计, 测试和部署的各个阶段, 以及与过程中与利益相关者进行审查的许多接触点。

你的设计过程可能包括这些阶段。

(感谢尼尔森·诺曼集团)

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

原因1：客户不了解他们在看什么

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

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

问题是, 线框非常抽象。

他们描述的是类似事物的东西, 而不是将要构建的实际事物。在此阶段, 线框将包含占位符图像以及各种TK(即将发布), FPO(仅用于放置)和TBD(待定), 例如以下示例。

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

在线框审查期间, 我们要求客户专注于所描述的概念, 并评估它是否似乎正在解决业务和用户问题。但是, 对于我们看来似乎无关的事情, 我们仍然会提出疑问。客户想知道线框是否是”最终副本”, 或者他们是否可以看到要在英雄图像中显示的照片示例, 或者是有关将在视觉设计, UI原型设计或开发中处理的问题的另一个问题。

线框可能太抽象, 以至于客户甚至内部利益相关者都无法进行有效评估。线框告诉人们设计完成后的样子, 但是他们仍然必须在心智上做很多工作才能使设计融入头脑中。我们的客户可能是视觉思维者, 也可能不是视觉思维者, 期望他们看到一个蓝图并想象一个成功的产品或网站可能太多了。

有几位客户特别要求审查带注释的视觉设计, 因为这样可以使他们更容易联系在一起, 进行周到的讨论并提供经过深思熟虑的反馈。

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

希望在设计过程中安排一些用户测试, 因为这是测试从整个概念的可行性到在交易中显示的详细程度的一切的一种好方法。

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

线框可以而且确实可以进行原型制作。设计团队仅限于测试流程和功能, 并且由于它缺少视觉设计层, 因此可以轻松忽略影响用户行为的视觉样式。

这明智吗？用户体验, 视觉和复制设计都相互影响。在测试环境中很难将它们分开并隔离它们。与科学研究类似, 单独测试一项功能的结果无法控制或预测其在野外的表现。

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

英文和希伯来语的Haaretz网站具有非常不同的UI设计。

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

此外, 由于复制内容会影响UX, 因此翻译本身可能会影响UX。

例如, 由于需要用本地语言解释各种概念, 因此我们需要进行一项测试, 以测试一些不同的信息体系结构。如果不在用户界面中测试实际的副本, 我们就不会发现对副本写作和翻译的影响。

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

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

原因3：它们使开发人员和质量检查人员陷入困境

在视觉设计阶段不可避免地发生的是, 一切都在移动。堆叠的图像变为平铺。居中的文本变为左对齐。手风琴的触发图标分别是+和-, 但是现在它们是几个人字形。

这是视觉设计过程的正常部分。同样正常的是, 由于线框已经”签名”, 因此在视觉设计中所做的任何更改都不会反映在线框中。

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

带注释的线框

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

外观设计规格

为什么不只给开发人员一份包含所有内容的准确文档呢？大多数客户还希望获得一份副本, 以作为作品的完整参考。

解决方案：跳过线框

显然, 有时需要完整的线框阶段, 有时则不需要。甚至有时直接进入高保真状态时也要比线框阶段更重要。

如果满足以下任一条件, 则可以考虑跳过线框阶段：

有固定的参考资料。

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

现有工作可能包含样式, 可重用组件和模式, 供你在即将进行的项目中挖掘和使用。

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

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

检查是否存在现有的样式指南和组件库。

使用尽可能多的样式和图案, 以使你的高保真输出尽可能精确。

在此过程中, 你已经计划了很多迭代原型设计和测试。

在原型开发和测试的几周内省掉了一些精力。如果你是第一次仔细设置文档并巧妙地使用重复的样式, 图案和符号, 则可以轻松地进行高保真的增量更新, 并将其直接发布到原型工作流程中。无需线框。

最大的好处是, 你可以用一块石头杀死两只鸟。你可以同时获得视觉和UI反馈以及UX反馈, 并一次性完成所有这些更改。

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

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

最近的一次演出让我为识字率低的目标受众设计了财务屏幕。阅读不是唯一的问题, 抽象的概念通常很难解决。该目标受众通常需要使用具体示例来讨论财务概念；否则, 他们将无法真正跟进对话。

为了理解财务概念, 该受众群体中的测试参与者需要感觉自己确实在进行交易。为了了解产品的工作原理, 它的外观和感觉必须像真实的应用程序。

可用性测试

像这样的观众忘了线框！你最终将花费大量时间来解释它们的含义, 而你的听众将不会专注于任务, 也不会专注于任务的感受, 因为它们与生活中使用的陌生内容无关。

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

很少有时间, 资源和预算全都对你有利。你通常会发现自己试图缩小范围和价格, 或者争先恐后地查看可以在哪里进行抄写和保存并仍然为客户提供优质服务。

如果你的客户负担不起(或不太可能购买)完整的用户体验工作, 那么我是否建议减少线框图制作时间？如果需要, 可以在内部创建一些内容, 但要为客户​​移动项目。测试真实, 有形的设计, 并让你的客户对实际工作做出反应。

如何终止线框阶段

这部分是相当主观的, 因为这将取决于你的个人工作流程和客户的特定需求。

就是说, 这是一个过程”模板”, 你可以首先尝试适应你的工作流程, 然后随着你以这种方式进行更多练习而进行调整。

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

面试, 实地观察, 案头研究, 竞争性分析-无论你通常做什么(或计划要做), 都可以按照通常的方式完成此阶段。

第2步：沿途绘制一些草图。

在进行研究时, 你可能会获得一些有用的布局和图案, 引人入胜的流程等方面的想法。记录这些, 但是你通常会这样做。我喜欢在笔记本上制作缩略图, 并在其旁边写上笔记。你可能希望在白板上草绘或拍摄有趣的UI模式的屏幕截图。尽力帮助你记住好主意的方法, 那就去做吧。

绘制用户界面概念

(作者：Miklos Philips)

步骤3：准备高保真文档

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

花时间将品牌调色板另存为单独的色板, 创建和组织字体样式, 并制作标准的阴影和滤镜, 以便可以根据需要将其应用于所有形状。

花很多时间使符号正确。你可能有一个按钮, 根据其状态, 按钮可能具有四种不同的颜色。如果可以的话, 请使用符号替代, 以便可以根据需要轻松地应用不同的颜色和文本标签。

在Sketch中设置的UI设计符号

如果使用了任何自定义图标, 请将它们另存为方形画板上的单独符号(或任何合适的形状)。这样, 你便可以轻松地按比例放大和缩小它们, 同时仍保持适当的间距和对齐方式。

步骤4：开始设计。

当你习惯以这种方式工作时, 可能会发现你的第一轮工作有些困难, 并查看你的样式指南在哪些地方有用(在哪些地方没有)。除了为尚未定义样式的样式创建解决方案外, 还希望进行大量调整以使所有样式正确无误。

在整个过程中, 请遵循良好的”复制方向”, 如果有, 请选择真实的副本。不要在标题上写上”页面标题在这里”。给观众一种感觉, 如果它是真实的, 将会在这里发生什么。

同样, 也不要创建一个都用电话号码555-1212都说约翰·史密斯的名字的列表。使用随机列表生成器或插件来创建不同的名称和数字, 或创建需要显示的任何数据集。这看似有点过头, 但它可以让你解决布局和字符宽度方面的问题, 并帮助你的查看器了解这五个条目都是不同的。

尽量不要让联系人列表中的所有条目都说John Smith。使用随机列表生成器或插件列出唯一名称。

(来自InVision的Sketch提供的Courtesy Craft插件和Tethr模板)

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

目前有些细节你不应该处理, 因为它们确实会花费很长时间。也许是选择要成为英雄的确切图片, 还是设计一个自定义图标来指示下载状态。在某些情况下, 你可能会选择使用占位符图像或图标并在以后测试真实的图像或图标。

你必须在这里适当的地方进行通话, 因为这取决于项目的目标以及你与项目的距离。

请注意, 这可能取决于你的用户测试参与者需要什么才能正确评估工​​作。对于我上面提到的低文化程度的目标受众来说, 没有什么太多的细节了。对于每个参与者, 我都制作了原型的变体, 其中使用了他们的真实姓名和电话号码, 因此该应用程序确实感觉像是”他们的”。他们所承担的任务越少, 他们就越容易遵循, 而我的结果也就越好。

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

将你的设计发布到所选的原型工具, 然后带到现场进行测试。现在, 你可以获得的反馈不仅限于功能。你可以发现潜在的视觉问题, 例如颜色对比度或可读性问题, 还可以发现复印方向或翻译问题。你还可以挑逗用户可能会对外观和品牌产生正面或负面的感觉。

高保真旅行应用程序原型

(伊戈尔·伊万科维奇)

当你进入视觉设计阶段时, 无论如何, 这些都是你可能会获得反馈的。为什么不立即获得所有反馈？关于视觉效果的一些反馈可能会直接影响UX, 反之亦然, 因此, 如果可以的话, 最好同时进行所有这些操作。

包起来

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

但是, 在正确的情况下, 直接采用高保真度可以改善你的过程：

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

下次你有一个项目要参考一些现有的设计材料时, 或者在低保真度或高保真度的情况下, 它将对你的听众产生重大影响的项目时, 请尝试一下这种方法。

• • •

在srcmini设计博客上进一步阅读：

• 电子商务UX –最佳做法概述(带有信息图)
• 以人为本的设计在产品设计中的重要性
• 最佳UX设计器产品组合–启发性的案例研究和示例
• 移动接口的启发式原理
• 预期设计：如何创建神奇的用户体验