如何开始使用 UX 原型

人们常说一张图片胜过千言万语。如果真是这样，那么原型所能涵盖的内容就更多了。 原型可以帮助你在设计投入开发之前对其进行可视化和测试，帮助你了解用户如何与你的作品互动，并帮助你发现设计流程中的问题。

考虑到这一点，我们整理了一些关于如何开始使用原型的建议，以及一些让它们脱颖而出的实用技巧。

原型何时派上用场？

虽然乍一看似乎是额外的工作，但以下是一些原型会派上用场的关键时刻

1. 可用性测试。 你的用户是否知道如何退出屏幕？他们能否按照你预期的用户旅程从你设计的网站上购买东西？通过运行可用性测试，你将能够看到用户在设计上线后如何与你的设计互动。
2. 让利益相关者参与。 需要检查你的 GDPR 同意框是否正确显示？将你的原型传递给你的数据保护团队，他们可以进行真实测试。
3. 给客户留下深刻印象。 原型可以通过为你的客户提供实践体验来帮助解释甚至推销你的想法。
4. 沟通你的愿景。 通过使用交互式媒介来预览和测试设计元素，设计师和开发人员可以更好地相互理解——以及理解项目。

现在我们知道了原型有多有用，是时候学习如何让它们发挥作用了。

为成功的原型奠定基础

在进行数字化之前，你可能会受益于在速写本上涂鸦一些想法。这样，你可以在投入实际设计项目之前仔细考虑一下。

不确定如何开始你的原型蓝图？我们为你准备好了

1. 收集你所有的笔记。 它可以是来自客户、合作者，甚至是曾经贴在你冰箱上的随机便利贴上的笔记。在开始之前，尽可能多地收集有关原型计划和期望的信息。
2. 开始勾勒你的原型阶段。 你希望你的用户首先看到什么？在绘制用户旅程时开始勾勒想法。
3. 完善你的草稿。 即使你第一次就做对了，你仍然会从拥有清晰的蓝图中受益，这将增强你的信心和动力。

开始使用原型

是时候将你的蓝图变成一个成熟的原型了！凭借你现在完善的草稿，你将可以立即启动并运行你的原型。

设置原型的最佳实践

在你全身心投入之前，有一些事情需要考虑你的原型

低保真度还是高保真度？ 保真度是指原型与真实产品的接近程度。如果你只是为演示准备一个快速的可视化辅助工具，那么低保真原型——比如带有占位符图像和一些基本文本的线框图——就足够了。但是，如果你要进行更复杂的可用性测试，那么高保真原型——带有品牌颜色、字体和图像——可以帮助你获得更有针对性的结果。

考虑你的用户。 为了创建直观的用户流程，尝试像你的用户在与你的产品互动时那样思考。虽然你可以在 Beta 测试期间对此进行微调，但尽早考虑用户的需求和习惯将通过让你走上正确的道路来节省你的时间。

从内向外开始。 组织你的任务并创建更用户友好的原型的一个好方法是“从内向外”构建你的原型。首先关注对你的用户来说重要的内容，比如立即购买按钮或图片库，并按优先级顺序列出每个元素。这样，你就可以创建一个将用户需求放在你的设计核心的原型。

使用 Sketch 创建原型

首先在你的画布上插入一个画板。你可以从我们的一系列预先存在的预设中进行选择，例如 iPhone 屏幕，或者创建你自己的。此画板可以用作你的第一帧（例如，登录屏幕）。然后，继续添加不同的画板，以反映你的设计流程中的不同屏幕。完成后，使用链接连接它们，你可以按 W 键添加链接。访问我们的文档，了解有关如何使用 Sketch 创建原型的更详细指南。

可用性测试

能够在生产前测试设计是原型设计最大的好处之一。但是，为了真正充分利用你的可用性测试，清楚你想要实现的目标非常重要。在共享原型上运行测试之前，问自己以下问题

• 测试的目标是什么？
• Beta 测试人员需要什么才能完成此目标？
• 你应该给 Beta 测试人员多少背景信息？

根据你的原型的范围，你可能还需要选择其中的特定部分进行测试。例如，如果你正在从事购物网站设计并且想知道用户体验是否清晰，请让你的 Beta 测试人员尝试购买一件球衣。

最后但同样重要的是，请确保为你想要运行的测试选择合适的对象。确定你的真实客户或用户是谁，并在该范围内联系各种潜在的 Beta 测试人员。这样，你的结果会更准确，因为你将获得真正对你的产品感兴趣的人的反馈。

让你的原型脱颖而出的技巧和窍门

在 Sketch 中，原型从一系列简单的链接画板开始，但你可以做更多的事情。

准备好将你的原型提升到新的水平了吗？

快速添加链接。 你可以使用 W 键在你的画布上的任何位置添加链接。只需选择你要链接的组件或画板，按 W，然后选择目标画板。

显示或隐藏原型。 为了保持你的画布整洁和有序，你可以通过选择 ⌃⌥F 部分或完全隐藏你未使用的画板的链接。

动画效果。 您可以通过添加动画过渡效果来模拟真实产品的行为。 例如，在检查器中的“动画”部分下选择选项，以创建向上滑动动作。

热区。 您可以使用热区在小图标后面创建更大的接触区域。 例如，如果您有一个太小而无法按下的关闭按钮，则可以在其周围创建一个透明的热区，从而为测试人员提供更大的点击区域。

引导您的测试人员。 您可以通过启用热区来帮助引导用户或受众与您的原型进行交互。 为了在可用性测试期间获得更准确的结果，您还可以禁用原型热区，以避免任何提示。

设置可用性测试。 与热区类似，您可以将文本框添加到画布中，其中包含具体说明，以帮助指导您的 Beta 测试人员。

起始点。 您可以通过在菜单栏中选择原型 > 将画板用作起始点来定义起始点。 这样，无论用户点击哪里，他们都将从您希望他们开始的地方开始体验。

共享您的原型

好的，您已经设计好了原型，并且可以进行用户测试了。 现在是分享它们的时候了。 使用 Sketch，您可以在 Mac 应用或 Web 应用中打开您的原型，并立即复制链接以与他人分享。 工作区中的任何查看者或编辑者也可以预览您的原型并留下反馈。 您可以在我们的文档中找到更详细的说明。

这就是您需要开始使用原型的一切 — 就在 Sketch 中！