提升原型设计工作流程的 5 个简单方法

本文授权转自：TCC翻译情报局（ID：TCC-design）

作为一名用户体验设计师，在日常工作中，创建产品原型想必是我们花费时间最长的任务之一。因为，有很多关键性的场景都需要我们创建产品原型，例如：我们与用户进行功能测试，或是向领导展示计划的可行性，以及与开发伙伴沟通设计想法。

目前，在设计过程中，我们仍然需要原型图发挥其重要作用，与此同时，如果能让制作原型图变得越来越快速、越来越越轻松，岂不妙哉！好的，在这里，我分享了一些我认为可能是目前世界上最好的原型设计的技巧。希望能够帮助设计师加速制定原型设计。

1. 利用主组件加快原型制作速度

想象一下，我们正在设计一个带有固定导航元素的界面（例如：标签栏）。我们需要将每个菜单项链接到其对应的特定页面，例如将“首页“按钮链接回首页。如果此菜单在多个页面上重复出现（例如：标签栏通常的情况那样），手动链接每个项目可能会变得繁琐且耗时。

这里有一个更简单的解决方案：在早期阶段，将菜单转换为一个主组件。完成此操作后，将主组件中的每个菜单项链接到相应的界面。从那时起，每次我们使用该组件时，所有链接都设置好了，无需再重复工作！

然而，请记住，如果我们使用的是团队库中的组件，这种方法将无法生效。由于主组件位于不同的文件中，我们就无法直接使用此技巧。

相反，我们可以在文件中使用库中的实例创建一个新的主组件。Figma 允许我们在嵌套组件内选择图层，因此，我们不需要分离实例，即可链接菜单项。我们通常将这些重复的组件放在设计的一次，这样可以轻松访问和维护跨屏幕的链接。

2. 使用组件管理滚动内容

当设计带有固定元素（例如：状态栏、页眉或页脚等）的长滚动屏幕时，我们可以通过向下拖动框架的底部边缘来轻松扩展框架以适应额外的内容。如果内容超出了设备的可视区域，Figma 将会在原型模式下自动使框架可滚动，超级方便！

但有时，我们需要在用户开始滚动之前查看可视区域中的内容。这有助于我们了解用户首次进入屏幕时哪些内容最初是隐藏的。由于不同设备的可视区域大小不同，可见的内容也可能会有所不同。要管理这一点，我们可以使用组件。

以下是检查滚动框架中可见内容的方法：

• 将滚动内容转换为组件。

• 为其中的所有元素设置约束条件。

• 确保在属性面板中启用“裁剪内容”（通常默认已启用）。

• 切换到原型模式，并通过配置“溢出行为”设置滚动方向。

• 在设计中放置此组件的实例，并调整其大小以适应可视区域。

现在，我们可以快速查看每种设备尺寸下的可见内容，并从单个组件管理我们的滚动内容。

3. 模拟具有定时延迟和叠加效果的交互

原型中的即时交互有时对用户来说可能感觉太突兀。为了使它们感觉更自然，我们可以添加一些小细节（例如：模拟加载屏幕或添加短暂的延迟）。

实现这一点的一种简单方法是使用”延迟后“触发器，它会在设定的时间后触发交互。定时延迟与叠加层配合使用效果特别好，如下面的表单示例所示。

想象一下用户填写表单的场景。如果表单立即跳转到确认页面，可能会让人感到突兀。相反，通过使用带有定时延迟的叠加层，我们可以创造更流畅的体验。（例如：用户点击提交按钮后，他们可能会看到一个简短的加载屏幕，然后是一条成功消息，最后才显示确认页面）。这种序列对用户来说感觉更自然、更直观。

4. 轻松阅读的目录

目前，Figma 原型仅限于单页，因此我们可以在一个文档中拥有多个单独的原型，每个原型都有自己独特的 URL。但有时，我们可能只想分享一个链接，让别人可以探索多个设计选项。

要在 Figma 中实现这一点，就需在原型开头创建一个“目录”框架。然后，将目录中的每个项目链接到不同的用户流程。尽管 Figma 会将所有这些流程视为一个原型的一部分，但用户在开始时会将其视为可选择的不同选项。只需记住，所有用户流程都需要在同一页上，此方法才能生效。

5. 充分利用观察模式

你试过 Figma 中的观察模式吗？它能让我们在他人展示或处理设计时观看他们的屏幕。只需点击编辑器右上角他们的头像，就能准确看到他们所看到的内容。

观察模式也适用于原型。通过点击我们的协作伙伴的头像，就能跟随他们查看在原型中的位置和操作。这对于远程用户测试也特别有用，能让我们观察用户如何与设计进行交互。在演示或会议期间，还能确保每个人都能保持同步。

在科技浪潮奔涌向前的当下，人工智能正深刻重塑我们的生活与工作。人机之间的关系，也从简单交互迈向深度协作。想知道如何在这一趋势下把握体验设计的新方向吗？2025年10月将在北京举办的IXDC国际体验设计大会聚焦“人机共生：人工智能时代人机协作新范式”，作为全球领先的用户体验创新盛会，它将汇聚前沿理念与实践。一起来关注这场盛会，探索人机协作的无限可能。

文章转载：TCC翻译情报局，版权归原作者所有

原文链接：https://mp.weixin.qq.com/s/89AbbjUhjkAsz-_JqDh3vQ

版权声明：“IXDC”所推送的文章，除非确实无法确认，我们都会注明作者和来源，本公众号对转载、分享的内容、陈述、观点判断保持中立，不对所包含内容的准确性、可靠性或完善性提供任何明或暗示的保证，仅供读者参考。部分文章推送时未能与原作者取得联系，若涉及内容或作品等版权问题，烦请原作者联系我们，给出内容所在的网址并提供相关证明资料，我们会核查后立即更正或者删除有关内容！本公众号不承担任何责任，并拥有对此声明的最终解释权。

联系微信：18802086168

联系电话：18802086168

编排 | 黄春燕

终审 | 苏 菁

点这里，学习更多设计知识！