用这4个可交付成果改进你的设计过程

在敏捷过程中，设计师和开发人员的目标是比以往更快地构建原型和产品。在测试概念验证之前精心设计每个像素的日子已经一去不复返了。然而，某些客户交付成果有助于最终产品的形成，并且在整个设计过程中仍然非常有效，即使该过程被加速。

在网站或应用的早期阶段，让所有人都了解架构和主要功能是至关重要的。流程图、线框图和风格指南可以帮助您向团队、客户和关键利益相关者清楚地传达计划。正确的设计资产可以帮助你快速创建这些文件，将你推向原型、开发、测试和发行阶段。

让我们来看看在设计过程中创建文档的一些主要好处:

• 改善设计师与客户的沟通，在关键交付成果上签字，帮助促进流程的顺利进行。
• 精心设计，一致的视觉效果向利益相关者和工作的总体质量传达信息。
• 改善设计人员与开发人员的沟通，专注于使用干净、易于理解的视觉效果来弥合差距。
• 及早识别关键功能并找出点子中的漏洞，可以节省以后的时间。

一切都是关于用户的

在你开始创造任何类型的可交付成果之前，你必须知道你的目标受众是谁，并了解他们的需求和动机。虽然美丽的界面的重要性不应该被忽视，但用户体验和客户体验设计把人使用你的产品第一。面向幼儿园小朋友的应用程序将与面向婴儿潮一代的应用程序大不相同。

斯坦福的设计思维Process通过强调与用户共情是构建伟大事物的第一步，将这一概念置于最前沿。只有通过这种理解，你才能真正从用户的角度看待产品，并获得最适合他们的想法。有了这些知识，你就可以开始创建文档，将你的想法传达给你的受众，这些文档将在设计过程中发挥重要作用。

不要忘记记录你的优秀工作的重要性网页设计作品集,虽然。

1.OB欧宝娱乐APP从流程图开始

流程图，特别是包含一些视觉元素的流程图，可以作为项目的指导性文件。试图在没有某种基本流程的情况下开发产品，就像建造没有蓝图的房子一样。将微型线框图和一些放大的细节集成到流程中可以在团队中建立共同的理解。看看下面的例子，这个流程有助于说明几个方面:

• 信息架构:页面的顺序和导航栏的缩放显示了整体结构。
• 页面布局:虽然不是详细的或字面上的，但迷你线框图显示了客户可以与之相关的页面布局的想法。

• 用户路径:用户可以选择不同的方向，并包含结果页面。
• 交互:演示与注释和详细视图的简单交互。
• 触屏:您可以将“滑动”或“点击”等移动交互与流程图上的图标结合起来。

虽然这种类型的流程看起来需要大量的设计工作，但它可以使用现有的软件包(如UX Kits)快速构建UI Wireflows或网站流量．随着设计时间的减少，剩下的挑战是将网站或应用程序的架构概念化，并以受众能够理解的方式安排元素。

下面是一些关于创建一个逻辑清晰、易于理解的可视化流程图的建议:

• 采用“自顶向下”的方法，首先是登陆页面，其次是主页面，然后是第三页面。
• 用直线排列成行和列。分散的页面和弯曲的线条很难跟随。
• 告诉你的听众，微型线框图的内容和布局是概念性的，而不是字面上的。

• 为附加的书面细节添加侧边栏注释。
• 保持简单。可以在线框图和原型中添加更多细节。

当与客户合作时，这种类型的文档特别有用，因为它以一种清晰的方式描绘了总体计划。视觉风格，虽然简单，可以提供足够的线索，帮助客户理解一个概念。

如果您在设计工作中经常处理类似的项目，您可以标准化您的体系结构文档，然后为每个项目定制它们。例如，对于Shopify网站，您的标准流程可以包含主页、产品类别、产品页面、博客、结帐和用户帐户。然后，您可以添加或删除特定站点上包含的内容，从长远来看，这将加快您的工作流程。

为了让你的提案更漂亮，看看我们的搞笑清单吧lorem ipsum发电机。

2.转到线框图

线框图允许您在转向视觉设计(如颜色、类型、摄影和图标)之前演示更详细的布局。虽然通常没有必要对网站或应用程序的每个页面都进行线框图，但它对关键页面和功能很有用。线框图所需的细节水平将根据项目而变化，因为您可以做任何事情，从简单的草图到全尺寸高保真模型。不管线框图的类型如何，它们都可以帮助建立:

• 内容层次结构
• 页面layout
• 一页包含什么内容
• 元素的相对大小
• 用户的主要操作

在客户项目中，线框图可以节省时间，在花时间进行精确的布局和设计之前，先对关键概念进行确认。粗略的模型可以快速创建和修改，然后再继续进行过程。

线框图还可以向开发人员演示响应式布局。内容如何在移动设备上移动或堆叠的快速模型可以使用诸如UX套件响应线框．这个工具包中的线框图也比网站的实际尺寸要小，可以专注于内容，而不是精确的大小和间距，这可以稍后解决。

在创建线框图时，请考虑以下几点:

• 设计细节越少，越注重功能。
• 一致的元素，如导航，不需要在每个页面上都详细说明。向他们展示一次(可能是在网站或应用程序的第一页)，加快线框图的创建和编辑过程。
• 一个线框可以表示多个相似的屏幕或页面。
• 字体块可以用简单的线条或整数表示。实际的文本可能会分散注意力。
• 照片可以用方框表示。添加一个相机或照片图标进行说明。
• 图标可以用圆圈或其他形状表示。
• 较小的线框图通常更容易遵循(并且更快创建)，因为它们在较少的垂直空间中提供了完整的快照。

与流程图一样，您可以为类似的项目保留一套标准的线框图，并在必要时进行修改。

3.加强风格指南

风格指南为整个产品提供了一个视觉框架。无论你是有详细的线框图，简单的草图，还是什么都没有，一个应用程序或网站最终都需要一个外观和感觉。风格指南不是设计每一个页面，而是包含排版、按钮、图标、间距和任何其他视觉效果的一致设计规则。风格指南与线框图和原型携手并进，因为它为你正在创建的任何内容提供了一个设计层。

就像流程图和线框图一样，风格指南是客户工作的强大工具。他们允许客户在一个文档中看到整体的设计图片。风格指南还为客户提供了未来项目的参考，从他们的信头到广告到视频。出于这个原因，请记住保持最新的风格指南。

在我们设计工作室的过程中，Eric Miller设计，我们经常在开发人员构建原型的同时创建样式指南，最终两者合并。开发人员可以使用线框图或框架来创建产品的第一个版本，而样式指南则是单独创建的。这减少了时间，因为产品可以专注于用户体验，然后在视觉上进行设计。

对于Shopify网站，样式指南将概述操作按钮的设计(即立即购买)，产品照片的大小，标题和描述的类型等等。样式指南还应该记录一些交互，例如鼠标越过按钮的颜色。

的风格指南下面是由焦点实验室为Sidecar设计的，可以作为打印模板．

你可能还喜欢:快速入门用户体验设计指南OB欧宝娱乐APP

4.用原型展示

原型是设计用于测试和证明概念的产品的工作模型，有时包含有限或部分功能。前面创建的文档可以促进原型的创建。流程图是需要构建哪些页面以及它们如何连接的模型。线框图提供了各个页面的细节。

虽然在整个过程中与开发团队进行沟通是必要的，但将这些批准的文档交给他们将为他们提供指导方针，并在合作时提供参考。这在与非现场自由职业者或代理合作时尤其有用。

线框图也可以作为原型的实际页面。线框图可以包含所有必要的元素，而不是专注于设计，用于创建网站或应用程序的测试版本。在原型中完全设计的页面或UI工具包可以顺便转移人们的注意力，使人们在确保产品美观之前不再关注产品的功能。通过使用线框图作为原型页面，你可以得到诸如“这个按钮放在不同的位置会更有效吗?”，而不是“为什么那个按钮是蓝色的?”

对于较小的项目，例如使用主题的标准电子商务网站，通常可以跳过原型阶段。对于更复杂的项目，原型是至关重要的，特别是对于客户反馈。应该预料到，客户只会批准几个可交付成果，以建议对原型进行更改，因为原型允许客户第一次与产品交互。在原型中进行更改通常比在开发阶段更容易，从而节省了每个人的时间和金钱。

你可能还会喜欢：测试你的网页和手机设计的5个最佳原型工具．

“最终”产品

这里的“最终”是用引号括起来的，因为对于网站或应用程序来说，真的没有这样的东西。但是，出于本文的目的，我们讨论的是首次发布时的产品。作为创建流程、线框图，甚至可能是样式指南和原型的人，您有持续的责任确保产品的完整性在完成过程中得到维护。这意味着:

• 检查产品在设计和功能上的一致性。
• 调整设计和交互。
• 当涉及到像素完美的设计与现实世界的功能时，灵活性和妥协。
• 在做决定和变更请求时考虑预算和时间。

在你为创建你的计划文件所做的所有工作中，知道什么时候把它们放下也是很重要的。在原型设计和开发过程中会发生许多修订，因此维护更新的线框图通常是不现实的(也是不必要的)。在我们的工作室工作中，我们发现将流程图作为“规则”文件并在早期原型制作过程中停止更新线框图是很有用的。

交付什么，何时交付?

现在我们已经介绍了一些不同类型的可交付成果，让我们回到项目的开始，并确定您如何决定需要创建什么。

当开始一个OB欧宝娱乐APP项目时，与团队讨论什么类型的可交付成果适合他们，以及需要采取什么步骤来完成。作为网页或用户体验设计师，一些项目管理落在你与团队合作，以确保他们了解需要构建什么。要验证他们是这样做的，请询问以下问题:

• 谁是审批过程的一部分，他们的期望是什么?
• 会创建一个原型吗?
• 原型和产品将在哪个平台上创建?
• 哪些文档对开发团队最有用?用什么格式?
• 你将如何展示可交付成果?通过屏幕共享、面对面会议、电子邮件还是其他方法?
• 通过问这些(以及更多)问题，你可以决定你是否需要流程、线框图、风格指南和其他文档来最好地完成手头的任务。

总结

记住，每个项目都是独一无二的。根据产品的类型、需求的复杂性和你正在处理的个性来决定使用什么工具。有时需要在一开始就做额外的计划，以确保有一个清晰的路径，而有时直接用餐巾草图制作原型OB欧宝娱乐APP可能是最好的方法成功。

UX套件包赠品