srcmini本文概述
“设计不仅是外观和感觉。设计就是它的工作方式。” –史蒂夫·乔布斯
事实证明, 原型对于做出更好的设计决策至关重要。作为工件, 原型是UX设计和原型设计中的核心交付内容之一, 并且作为一项活动, 它是以用户为中心的设计过程的核心。原型是所有先前UX设计工作的合并, 合并为一个单一的视觉功能产品, 用于验证假设和测试设计。
听起来很容易, 但是在一个充斥着大量设计工具的世界中, 选择正确的原型工具并不是一件容易的事, 需要仔细考虑。设计人员需要考虑成本, 功能, 与其他设计工具的集成, 学习曲线, 协作功能以及回放平台以进行审查和用户测试。
使事情复杂化的是, 最近有许多新来者涌上舞台。有仅在线工具, 例如Figma, InVision, UXPin, Framer, Marvel, Principle, Origami, 还有一些是传统的桌面软件, 例如Sketch和Adobe XD, 具有内置原型作为其功能的扩展。它们都有各自的优缺点, 功能和集成。
但是, 新事物并不一定总是更好。战场上还有一些古老的战马：Axure是其中之一。当设计师想要提供功能丰富, 详细的原型时, Axure值得另一种外观。 Axure已经存在了一段时间, 在上面提到的新铸造的工具诞生之前已经有好几年了, 许多设计师认为它是具有强大功能的线框图和原型设计工具的祖父。
使用Axure RP(源)对移动应用进行原型制作。
为什么要使用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中创建了一个详细的原型, 该原型具有不同的状态和大量的微交互作用, 从而证明了产品在不同情况下的行为。作为意外的好处, 设计团队能够解决许多边缘情况。
在测试时, 我们可以看到用户在设计中遇到的困难以及原因, 而采用静态屏幕构建的较不详细的原型则无法实现。结果, 我们能够迅速解决我们发现的问题。
我还将原型传递给开发人员, 以向他们展示响应式设计断点在哪里, 应该如何关注焦点或错误状态以及应该如何进行预测性搜索。
当前端开发人员能够使用原型时, 这也使他们的生活变得更加轻松。甚至后端开发人员也赞赏原型, 因为他们可以看到最终产品应该如何工作。
这种新产品功能的快速原型制作, 测试和实施要比他们以前从事的任何其他功能开发都快得多, 而且进入质量检查阶段时出现的问题也更少。
说完所有内容后, 团队中的每个人都提到了详细原型的帮助程度, 并要求更频繁地进行这种原型制作过程。外卖的是, 创建, 审查和测试详细的原型可以产生巨大的变化。整个团队可以看到对用户有意义的基本, 全面的交互。
Axure允许我们测试所有内容, 甚至是最复杂的用例。我们的原型看起来像真实的东西。 Julie, 用户体验实验室
设计人员可以轻松地从线框过渡到功能丰富的原型, 所有这些都可以在Axure中使用(来源：UpLabs)。
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小部件也可以广泛下载(免费和付费)。
• • •
在srcmini设计博客上进一步阅读：
- 完善你的UX设计流程-原型设计指南
- 顶级设计师使用的10种UX可交付成果
- UX神话–原型设计, 用户测试和UX可交付成果
- 成帧器教程：如何创建出色的交互式原型
- 使用这些顶级UX工具掌握你的手艺
评论前必须登录！
注册