复杂的原型——为什么要使用 Axure

“设计不仅仅是它的外观和感觉。 设计就是它的运作方式。” ——史蒂夫·乔布斯

原型已被证明对于做出更好的设计决策非常宝贵。 作为工件，原型是 UX 设计和原型设计的核心可交付成果之一，并且作为一项活动，是以用户为中心的设计过程的核心。 原型是所有先前 UX 设计工作的合并，合并为一个单一的、可视的、功能性的产品，用于验证假设和测试设计。

听起来很容易，但在一个充斥着大量设计工具的世界中，选择正确的原型设计工具并非易事，需要仔细考虑。 设计人员需要考虑成本、功能、与其他设计工具的集成、学习曲线、协作功能以及用于审查和用户测试的回放平台。

使事情复杂化的是，许多新人最近突然出现在现场。 有一些仅限在线的工具，例如 Figma、InVision、UXPin、Framer、Marvel、Principle、Origami，还有一些是传统的桌面软件，例如 Sketch 和 Adob​​e XD，内置原型设计作为其功能的扩展。 它们都有各自的优缺点、功能和集成。

但新的并不总是更好。 战场上还有一些古老的战马： Axure就是其中之一。 当设计师想要提供功能丰富、细节丰富的原型时，Axure 值得一看。 Axure 已经存在了一段时间，比上面提到的新工具诞生早几年，许多设计师认为它是赋予强大功能的线框图和原型制作工具的祖父。

为什么要使用 Axure？

如今，在大多数情况下，设计师使用基于热点的原型工具来链接屏幕，并可能添加一些屏幕转换。 问题是，这种方法不包括在测试期间完善整体用户体验的小交互。 相比之下，Axure 可以轻松处理使原型栩栩如生的细微细节和微交互。

为了更深入地探索人们如何与特定设计进行交互，设计师可以使用条件逻辑、各种用户输入和动态动画构建原型，使原型看起来更逼真。 这是获得有价值的见解的绝妙方法，了解哪些有效，哪些无效。

必须跳过太多未集成的设计应用程序也会带来效率低下的问题。 典型的设计工作流程涉及设计师在 Sketch 中创建 UI，并在 InVision 或 Marvel 等其他工具中进行原型设计。 之后，使用另一种工具（例如 Zeplin）将设计交付给开发人员。

Axure 是一个完全集成的应用程序，无需使用不同的设计工具。 例如，在创建用户流程、客户旅程地图、角色、故事板、站点地图、信息架构和线框之后，设计师可以轻松地继续在 Axure 中制作复杂的原型。 当设计人员将项目移交给开发人员时，他们可以更好地了解应该如何实施，并且可以更有效地与产品经理合作来估计范围和评估技术可行性。

提供精心设计的产品和服务的最大障碍是对我们的用户缺乏了解。 Jared Spool，UIE（用户界面工程）

与其他设计工具类似，Axure 可以快速上手并快速投入使用。 用于构建动态交互的内置小部件，即使是非程序员也能理解，可以立即用于令人印象深刻的交互。 希望更深入并花时间学习应用程序的设计师可以构建具有复杂交互的复杂、逼真的网站和应用程序。

现实生活中的 Axure 原型设计示例

设计师的时间总是很紧迫，需要展示特定的用户流程如何在评论中发挥作用，并尽早与用户一起测试产品设计。 Axure 的基本功能可以在这些场景中大放异彩，因为设计师可以将其他设计工具中的图像快速转换为交互式原型。

在下面的 B2B 产品示例中，一系列屏幕从 OmniGraffle 导出为 PNG。 这些图像在 Axure 中被裁剪、蒙版并放在图层上。 接下来，从 Axure 小部件库中添加了热点和交互式组件，例如下拉菜单和表单字段，以创建丰富的功能原型。 然后使用远程、适度的用户测试对产品的特性和功能进行测试，从而根据用户反馈进行快速设计迭代。

在另一个示例中，设计和工程团队能够找到为复杂的 B2B 产品设计两个特别棘手的小部件的最佳方法。 目的是为数据量大的表设计高级过滤器和自定义列选择器，以增强可用性并且在技术上也是可行的。

在这个场景中，从 Sketch 中导出了不同状态的图像，并在 Axure 中添加了快速交互和动画。 添加了 UI 组件，例如按钮和复选框，以演示交互及其效果。 团队经历了多次审查和测试的迭代。 使用其他原型制作工具，这项工作可能需要更长的时间。

Axure 的特点和优势

我最近在一家公司工作，该公司只使用通过 InVision 创建的基本屏幕到屏幕原型，并且从未做过太多用户测试。 为了测试即将推出的主要产品功能，我的任务是创建详细的产品原型。 这个新功能有很多好处，利益相关者希望把它做好。

我花了不到两天的时间在 Axure 中创建了一个具有不同状态和大量微交互的详细原型，展示了产品在不同场景下的行为方式。 作为一个意想不到的好处，许多边缘案例浮出水面，设计团队能够解决。

在测试时，我们可以看到用户在设计中遇到困难的地方以及原因，这对于使用静态屏幕构建的不太详细的原型是不可能的。 因此，我们能够快速解决我们发现的问题。

我还将原型传递给开发人员，向他们展示响应式设计断点在哪里，焦点或错误状态应该如何看待，以及预测搜索应该如何工作。

当前端开发人员能够获得原型时，这也让他们的生活变得更加轻松。 甚至后端开发人员也对原型表示赞赏，因为他们可以看到最终产品应该如何工作。

这种新产品功能的快速原型设计、测试和实施比他们之前参与的任何其他功能开发都要快得多，并且在 QA 阶段出现的问题更少。

当一切都说完了，团队中的每个人都提到了详细的原型是多么有帮助，并要求更频繁地完成这种原型制作过程。 要点是创建、审查和测试详细的原型可以产生巨大的影响。 整个团队可以看到对用户有意义的基本、全面的交互。

Axure 允许我们测试一切，甚至是最复杂的用例。 我们的原型看起来和行为都像真实的东西。 朱莉，用户体验实验室

Axure 的特点和优势

设计人员无需知道如何编写代码即可在 Axure 中创建复杂、动态、功能丰富的原型。 可以使用其交互面板和简单的“如果这样，那么那样”语句来设置复杂而复杂的交互。 以下是一些附加 Axure 功能的列表：

基本和高级原型

• 用于快速线框图和原型设计的内置小部件
• 拖放环境
• 无需编码即可构建基于浏览器的原型
• 从 Sketch 资产构建交互
• 移动仿真和移动设备查看
• 允许用户输入的工作表单字段
• 添加条件逻辑、变量和表达式
• 使用动态内容和自适应视图
• 添加动画效果
• 离线原型查看
• 自定义小部件库
• Adobe XD 集成和插件
• 在 Axure Cloud 上共享可以在浏览器中查看的原型

共同创作和协作

• Axure RP 和 Axure Cloud 使多人可以同时处理同一个项目。

共享资产

• 创建和共享交互式组件库，并从 Sketch 导入资源。

开发者交接

• 将设计从 RP 和 Sketch 发布到 Axure Cloud，以实现自动红线以及 CSS 和图像导出。

文档和规范

• 创建流程、产品拆解和视觉规范。

Axure 原型制作迷你案例研究

为了展示 Axure 超越简单的屏幕到屏幕原型的功能，我为 Zalando（一个现有的电子商务网站）创建了一些带有微妙交互的屏幕。 完成后，所有这些原型序列都被导出为 HTML，任何人都可以在任何地方使用 Axure Cloud 在浏览器中查看。

首先，我创建了一些站点交互，展示了大型菜单、搜索、产品水平滚动、收藏和订阅时事通讯。

在产品列表页面上，我在主产品图像下的缩略图上创建了悬停效果，以不同颜色显示产品（悬停时交换图像）。 我还添加了再次收藏产品和一个下拉小部件，用于通过设置价格范围来过滤产品列表页面。

接下来，与上面的屏幕相同，我想演示将鼠标悬停在产品详细信息页面上的缩略图上时交换不同的产品图像。 我还添加了另一个悬停功能，以便购物者可以看到产品描述、尺寸和合身信息、交货和评论。 最后，我合并了一个尺寸选择器并将产品添加到购物车中。

举例说明以下用户流程，我想展示如何使用微妙的幻灯片、淡入淡出和元素替换动画来管理购物车（例如，从购物车中删除产品）。 没有使用任何代码来创建这些微妙的微交互。

最后但并非最不重要的一点是，当人们输入错误的登录信息时，我想在登录屏幕上显示细微的 UI 转换以及将显示什么错误消息。

这些微妙的交互和 UI 转换在测试产品功能时很有用，因为设计师和用户研究人员可以进行更详细的用户测试，并更深入地了解人们对电子商务网站的反应。 它们展示了一种特定的、复杂的外观和感觉，这是用其他原型工具不可能或可能很难创建的。

概括

在寻找最新最好的线框图和原型制作工具时，设计师有时会忽略经得起时间考验的成熟、强大的工具。

设计师应该给 Axure 一个新的外观。 由于其深度、功能集和灵活性，与其他解决方案相比，Axure 是一款功能强大、功能强大的工具，该公司将继续对其进行更新，以保持其作为设计工具的相关性。

Axure 的免费试用版可供下载。 设计师可以从 Sketch 导出 UI，导入 Axure，并创建逼真的原型。 对于每种类型的项目（在 YouTube 和 Axure 的网站上）也有很多教程可用，并且现成的 Axure 小部件也可以广泛下载（免费和付费）。

• • •

进一步阅读 Toptal 设计博客：

• 完善你的用户体验设计过程——原型设计指南
• 顶级设计师使用的 10 个 UX 可交付成果
• UX 神话——原型设计、用户测试和 UX 可交付成果
• Framer 教程：如何创建令人惊叹的交互式原型
• 使用这些顶级 UX 工具掌握您的工艺