如何进行 UX 原型设计入门

俗话说一张图胜过千言万语。如果这是真的，那么原型将包含更多内容。 原型 可以帮助你在设计进入开发阶段之前将其可视化和测试，帮助你了解用户如何与你的作品互动，以及帮助你发现设计流程中的问题。

考虑到这一点，我们整理了一些关于如何进行原型设计入门的小贴士，以及一些可以帮助它们脱颖而出的顶级技巧。

原型设计何时派上用场？

虽然乍一看似乎是额外的工作，但以下是原型设计将派上用场的几个关键时刻：

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

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

为成功的原型设计奠定基础

在进行数字化之前，你可能需要在速写本上记下一些想法。这样，你可以在投入实际设计项目之前仔细考虑问题。

不知道如何开始你的原型蓝图？我们来帮你！

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

开始进行原型设计

现在是时候将你的蓝图变成一个完整的原型了！有了现在已经润色的草稿，你将很快就能启动你的原型。

设置原型的最佳实践

在你一头扎进去之前，有一些关于你的原型需要注意的事项：

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

考虑你的用户。为了创建一个直观的用户流程，尝试从用户的角度思考，他们如何与你的产品互动。虽然你可以在测试阶段对其进行微调，但尽早考虑用户的需求和习惯将通过把你带入正轨而节省你的时间。

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

使用 Sketch 创建原型

首先将画板插入你的画布中。你可以从我们提供的各种预设中选择，例如 iPhone 屏幕，或者创建你自己的画板。这个画板可以作为你的第一个框架（例如登录屏幕）。然后，继续添加不同的画板，以反映你设计流程中的不同屏幕。完成后，通过使用链接将它们连接起来，你可以通过按下 W 键添加链接。访问我们的 文档，以获取有关如何使用 Sketch 创建原型的更详细指南。

可用性测试

能够在生产之前测试设计是原型设计最大的好处之一。但是，为了真正从你的可用性测试中获得最大收益，明确你想要实现的目标很重要。在与你的原型分享正在进行的测试之前，问问自己以下问题：

• 测试的目标是什么？
• 测试用户需要完成哪些操作才能实现这个目标？
• 你应该给测试用户提供多少背景信息？

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

最后但并非最不重要的一点，确保为你要进行的测试选择合适的受众。确定你的真实客户或用户是谁，并联系该范围内各种潜在的测试用户。这样，你的结果将更加准确，因为你将获得对你的产品有真实兴趣的人的反馈。

使你的原型脱颖而出的技巧

在 Sketch 中，原型最初只是一个简单的链接画板系列，但你可以做更多的事情。

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

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

显示或隐藏原型设计。为了保持你的画布整洁，你可以通过选择 ⌃⌥F 来部分或完全隐藏你没有工作的画板的链接。

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

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

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

设置可用性测试。 与热点类似，你可以在画布上添加带有特定说明的文本框，帮助指导你的测试人员。

起点。 你可以通过在菜单栏中选择原型>将画板用作起点来定义起点。这样，无论用户点击何处，他们都会从你想要的位置开始他们的旅程。

分享你的原型

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

就是这样！你开始使用原型所需的一切——都在 Sketch 中。