线框图的结束,实现高保真!

UX设计是一个令人着迷的领域。从业者必须精通广泛的主题和能力才能成功执行它。UX用户的技能和专业知识应包括从基本草图到叙事/过程设计再到认知心理学,以便实践以用户为中心的设计方法,并为常见的产品设计易于使用的创造性解决方案。

UX / UI设计过程涉及广泛的工具,工件和发现,这些工具,工件和发现被记录在各种论文甚至原型中。线框图(Wireframe)是我们最知名和广泛使用的项目。

线框图通常是为快速审查而产生的想法的单色骨架,它非常出色。它们使我们能够将来自多个不连接来源的输入合并到每个人都可以评估的单个文档中。业务分析师、项目经理、营销主管、众多设计师和开发人员、各种其他供应商和服务提供商,甚至在产品测试期间评估目标客户。线框图让每个人都了解如何满足他们的特定需求,并帮助整个团队在任何困难发生之前消除任何错误。

有优点和缺点,但在某些情况下,跳过线框图过程完全是有意义的。在发现后或准备原型时立即以高保真级别处理 UX 和视觉设计可能会节省大量时间。这将允许任何人,从用户测试参与者到客户和同事,同时审查产品的功能以及外观和感觉。

了解为什么线框图有时可能很麻烦,为什么绕过它们反而有意义,以及如何使无线框图方法适应工作流。

线框图的问题

普遍的设计过程,无论是在瀑布式(waterfall )还是敏捷(agile )环境中,都包括研究、定义、构思、原型设计、测试和部署的阶段,以及沿途与利益相关者进行审查的几个接触点。

考虑以下线框图设计成为设计过程中瓶颈的实例:

原因 1:客户不知道他们看到了什么

通常,设计过程从对该主题的某种类型的研究开始。案头研究、利益相关者访谈和用户访谈只是为了更好地理解而可能开展的一些活动。经过研究,设计团队开始评估几个想法和概念,以发现最佳解决方案。

在审查会议期间,设计团队通常会在想法充实后与客户展示一组线框图。

但是,线框图存在过于概念化的问题。

它们描述了类似的东西,但不是将要构建的确切产品。此时,线框图将包括占位符图片以及TKs(即将推出)、FPO(仅用于放置)和TBDs (待确定),如下例所示。

一组广泛的注释可能包括有关功能、业务需求和错误处理的信息。在大多数情况下,客户将被允许自己阅读它们,因为没有足够的时间来彻底检查它们。

我们鼓励客户批判性地思考正在传达的想法,以及它是否似乎正在解决线框图评估期间的业务和用户挑战。在某些情况下,我们被问到我们以为无关的问题。客户经常对图形设计、UI 原型或开发阶段有疑问,例如线框图是否是“最终副本”,或者他们是否可以看到要在主图像中显示的图片样本。

客户甚至内部利益相关者可能无法使用线框图正确评估您的工作。即使线框图显示了设计的最终形式,我们仍然需要付出很多努力才能将这些部分组合在一起。我们的客户可能无法从一组蓝图中可视化成品或网站。

我们的一些客户明确要求评估带注释的视觉设计,因为它可以帮助他们更好地理解一切,进行有意义的对话,并提供建设性的批评。

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

用户测试是一种很好的方法,可以衡量从整个想法的可行性到交易中显示的适当信息量,并且希望一些用户测试已被纳入设计过程。

原型设计是将此类概念付诸实践的常用方法。

使用线框图进行原型设计是一个可行的选择。由于没有视觉设计层,设计团队只能评估产品的功能和流程,而忽略了设计选择对用户行为的潜在影响。

我们应该这样做吗?交互设计、平面设计和文案写作都相互影响。出于测试目的分离和隔离每个组件具有挑战性。孤立的单个功能测试的结果无法解释或预测该功能在现实世界中的行为,就像在科学研究中无法解释或预测一样。

一次对所有内容进行全面测试有时可能更有用。

例如,可能以多种语言使用的项目。设计可能会受到语言可能不同的语法规则、字母和字母宽度的影响。

此外,由于副本的实质内容会影响用户体验,翻译本身可能会影响用户体验。

例如,我们的任务之一是评估许多潜在的信息架构,看看哪种架构在解释目标语言的复杂想法方面最有效。如果没有对实际副本的用户界面(UI)测试,就不会知道对文案和翻译的影响。

我们发现需要更多的单词来用当地语言解释相同的想法,并且按钮的大小和形状需要在全球范围内进行调整,以适应更冗长的文本。如果我们在UI中测试真实的视觉组件时没有关注文本困难,我们就不会了解到按钮需要占据移动屏幕的整个宽度,这会影响我们的UX设计。

主要结论是,从高质量的用户界面开始着手是有益的,尤其是在使用多种语言时。

原因3:他们使开发和质量保证成为地狱

当涉及到平面设计阶段时,结果可能会被重新洗牌。堆积的图片用作瓷砖。居中的文本向左移动。曾经是加号和减号, 手风琴的拨动符号现在是一对人字形.

在平面设计领域,这完全是标准程序。此外,通常的做法是在线框图“签署”后实施视觉设计修改,而不是相反。

一旦图稿完成,它就会被发送给程序员。他们通常会得到一堆完整的、带注释的线框图,以及一套华丽的视觉设计和风格指南。他们现在必须找到两个来源之间的所有联系,并使之成为现实。

为何不为开发人员提供单个综合文档?大多数客户也会重视手头有一份副本,以便在您工作时参考作为综合指南。

避免使用线框图即是答案

可能并不总是需要完整的线框图阶段,但在某些情况下确实需要。在其他情况下,完全跳过线框图阶段或许是更好的选择。

如果与以下任何情况吻合,您可以选择放弃线框图阶段:

所有必要的资源都可用。

查看已经完成了什么。全面的用户界面手册可能已经存在。查看当前网站或应用程序可能有助于您识别在创建更改或添加新功能时可以重复使用的模式和样式。

访问当前项目制作中使用的原始文件将是理想的选择。可以说,在开发过程中,某些功能和部分可能“在翻译中丢失”;在这种情况下,可以使用原始源文件来重建这些功能的运行方式。

查看除了已经建立(或代替)的产品或网站之外,是否存在模式库或风格指南。一些品牌和平面设计工作可能已经由客户支付,您可以再次使用这些资产。

如果您希望高保真结果听起来尽可能优秀,则应尽可能多地使用不同的样式和模式。

您已经计划在不同阶段进行广泛的测试和迭代原型设计。

这样做可以在数周的原型设计和测试中节省时间和精力。如果您第一次正确构建文档并明智地使用重复的样式、图案和符号,您可以简单地进行高保真度的增量调整并将它们直接提交到您的原型流程中。线框图此时是不必要的。

这还有一个额外的好处,那就是能够同时做两件事。除了用户体验 (UX) 注释之外,您还可能会收到有关用户界面 (UI) 的输入,反之亦然。

使用您的产品的人会以字面上直接接收讯息。

项目的目标受众与您的客户或同事没有什么不同,因为他们有时可能需要您提供示例。

当我在最近的一个项目上工作时,我的任务是为受教育程度低的人群创建财务屏幕。这不仅是因为他们在阅读方面遇到困难;抽象概念也被证明很难教授。为了使这一群体能够充分理解对财务原则的讨论,往往需要具体的例子。

听众中的参与者需要体验金融原则,就好像他们在进行真正的购买或付款一样。此外,它必须感觉和看起来像一个真正的应用程序,以传达产品的功能。

在这种情况下,您可以放弃线框图。您会花很多时间试图解释它们是什么,如果您的听众无法联系到利用它们,他们就不会关注手头的任务或对它们的感受。

您的客户在被现金和/或时间上局限时。

在大多数情况下,您没有足够的时间、金钱或资源来正确执行任何操作。为了在降低成本的同时为客户提供出色的服务,不得不偷工减料的情况并不少见。

如果您的客户在经济上无法或不太可能购买完整的用户体验检查,我建议跳过线框图阶段。如果有必要,请在内部弥补一些,但不要因此而停止推进客户的项目。使用物理原型测试您的概念,并查看客户对成品的反应。

防止线框图阶段的终止

本节相对取决于您自身看法,因为它将取决于您自己的工作习惯和客户的要求。

话虽如此,您可以将其用作方法的“模板”,并根据需要进行调整。

第 1 步:进行一些常规调查和发现

您应该像往常一样执行这个阶段,包括任何和所有面试、实地观察、案头研究和竞争性评估。

第 2 步:边进行边做一些快速草图

在学习时,您肯定会获得实用设计和布局、有趣的流程和其他类似东西的灵感。用您的常规日记方法写下来。在我的笔记本中,我经常包括缩略图和随附的评论。引人注目的用户界面模式的白板草图或图像可能对您更有用。尽一切努力确保您的想法在您的脑海中保持新鲜。

第 3 步:准备好高保真文件。

启动您喜欢使用的程序并准备用于设计的文档。挑选几种纸张尺寸,然后开始制作可以反复使用的分组和符号。

抽出时间来构建和排列字体样式、特定于品牌的投影和滤镜以及以后可应用于任何表单的品牌颜色示例非常重要。

付出努力来确保您的符号准确无误。可以有一个具有四种不同颜色的按钮,每种按钮条件对应一个。如果可以,请利用符号覆盖,以便您可以根据需要快速更改标注的字体、大小和颜色。

确保在 4×4 画板上将所有自定义图标另存为不同的字形(或任何合适的形状)。在这种技术中,您可以轻松放大或缩小文本的大小,同时保持字体大小和对齐方式不变。

步骤 4:开始创建第一个设计

当您习惯了以这种方式工作,并注意到您的风格指南在哪里站得住脚(和不适用),您的初稿可能会有点粗糙。您可以指望执行大量微调以使所有样式完美,并为没有定义样式的模式提出解决方案。

在整个过程中遵循可靠的“复制指令”或实际复制。避免创建仅显示“页面标题在此处”的页面标题。向观众展示如果它是真实的,在这种环境中会发生什么。

另外,请不要编制姓名为“约翰·史密斯”且电话号码为“555-1212”的人名单。在随机列表生成器或附加组件的帮助下,创建唯一的名称和数字,或生成您需要显示的任何其他数据集。这可能看起来有些多余,但它允许您修复布局和字符宽度问题,并为读者澄清这五个项目是不同的。

第 5 步:知道何时退出设计

您现在不应该担心所有小事,因为这会花费太多时间。它可能像为英雄选择完美的图片一样简单,也可能像创建一个独特的符号来表示下载进度一样复杂。出于测试目的,在某些情况下,您可能希望使用通用图片或符号。

在这种情况下,什么更合适最终取决于您,因为它取决于项目的目标和现在所处的阶段。

考虑到准确评估工作的要求可能会因将参与测试的用户而异。对于我之前指出的低识字人口来说,尽可能多信息反而比较好。我的目标是让每个用户都觉得这个应用程序是“他们的”,因此我自定义了原型以包含每个用户的姓名和电话号码。这对我来说更有效,因为我的目标用户不许做太多假设。

第 6 步:享受您获得的出色评论和评价

通过将已发布的设计直接发布到您首选的原型平台,将它们带到现场进行测试。现在提供的不仅仅是功能反馈。可能会发现可能的美学问题,包括颜色对比度或可读性差,以及文本方向或翻译方面的困难。也可收集用户对品牌视觉风格和呈现方式的印象。

结论

在很多情况下,跳过线框图步骤可能会对项目造成灾难性的影响。线框图在处理响应式网页应用程序等复杂设计时需要单独、集中的关注。在线框图阶段确定所有业务需求、边缘情况和错误处理将比在整个视觉层构思和实现之后才这样做更有效及更具成本效益。

另一方面,在某些情况下,跳过低保真阶段并直接跳转到高保真阶段可能是有益的:

加强主要利益相关者的响应。所有相关方(客户、开发人员、其他设计师和来自目标受众的测试参与者)都清楚地了解他们可能期望的内容,从而产生更有见地的批评。

加快创建原型的过程。您可以同时获得有关UX,文本和图形的输入,并且您的设计将立即可供测试。

向您的客户和开发人员发送合并文档。摆脱必须咨询许多来源来弄清楚该如何工作。您的客户还可以利用此机会,通过让内部利益干系人审查您的工作来获得进一步的意见。

不要浪费金钱或时间。顺带一提,这总是一个积极的发展!

下次在处理需要访问预先存在的设计资产或最终产品的质量将对其接收产生重大影响的项目时,请尝试此方法。

加入世界顶尖前 1% 的自由领人才网络

领类将顶尖前1%的自由领程序员和设计师与世界各地领先品牌以及初创企业联系起来。我们专注于需要高技术人才和问题解决者的复杂且具有挑战性的一级项目。
经验丰富的项目经理正在审查从领类上聘请的自由软件工程师在软件开发项目上的进展 blog.join_marketplace.your_way经验丰富的自由 UI/UX 分析师在舒适的家中远程工作,并领类上完成 UI/UX 和产品设计项目 blog.join_marketplace.freelance_jobs