axure rp key:
如今, F igma在UX设计中风靡一时。 无可否认,Figma在很多方面做得很好。 对于初学者来说,它的协作和直观的UX是一种无缝( 有趣 )的体验。 如果您有一个需要模型的项目或一个简单的导航且没有多个状态的原型,那么Figma无疑是完成这项工作的最佳工具。
However, if you are tasked with creating a complex, non-linear experience with logic or need to create a near-production prototype without code, Axure RP beats Figma all day*.
但是,如果您的任务是创建具有逻辑的复杂的非线性体验,或者需要创建没有代码的接近生产的原型,则Axure RP整天都将击败Figma。
In a previous role I demonstrated a completely overhauled checkout experience for the CEO. About halfway through the experience, he paused when my boss mentioned in passing that he was witnessing a prototype. He asked, surprisingly, “wait, this isn’t live?”
在上一个职位上,我向CEO展示了彻底革新的结帐体验。 经历大约一半时,当我的老板顺便提及他正在见证原型时,他停了下来。 他惊讶地问:“等等,这还不活吗?”
In retrospect, it’s no surprise that he thought the demo was in a live test environment considering how responsive the experience was with inputs, logic, dynamic states, non-linear navigation — it seemed like the real thing.
回想起来,考虑到体验对输入,逻辑,动态状态,非线性导航的响应速度如何,他认为该演示在实时测试环境中就不足为奇了,这看起来很真实。
The prototype was designed in Axure RP 8.
该原型是在Axure RP 8中设计的。
As an Experience Designer for Slalom Consulting, we regularly use Sketch, InVision, Axure RP, and Figma based on the project and client need. Understanding when to employ each is an important decision that can save you time, headaches, and deliver the results needed for the intended outcome.
作为Slalom Consulting的经验设计师,我们会根据项目和客户需求定期使用Sketch,InVision,Axure RP和Figma。 了解何时使用每种工具是一个重要的决定,可以节省您的时间,头痛,并提供预期结果所需的结果。
My team and I recently collaborated on a project using Figma. This was a giant conceptual prototype that included a custom CRM among other enterprise products. Figma was a breeze to collaborate on information architecture and page designs. Then, we got to the part where we test out interactions during prototyping. Cue the violins.
我和我的团队最近合作使用Figma进行了一个项目。 这是一个巨大的概念原型,其中包括其他企业产品中的自定义CRM。 Figma轻而易举地就信息架构和页面设计进行合作。 然后,我们到了测试原型制作过程中的交互的部分。 提示小提琴。
Then, we got to the part where we test out interactions during prototyping.
然后,我们到了测试原型制作过程中的交互的部分。
Cue the violins.
提示小提琴。
After spending thirty minutes or so with my team, our cursors whizzing across frames, flipping in and out of prototype mode, the problem was abundantly clear: Figma doesn’t allow multiple dynamic states for multiple components simultaneously.
在与我的团队一起花费了大约30分钟的时间之后,我们的光标在帧之间颤动,进入和退出原型模式,问题非常清楚:Figma不允许同时为多个组件提供多个动态状态。
Figma尝试 (The Figma Attempt)
We intended to have a segmented controller for the content in one frame that respects multiple states across other components on the page. This means one could navigate through a sub-menu while changing the states of other items below it. The only way to do this is to “fake it” with overlays. If you have just one series of similarly-sized components (i.e. — the tabbed content or the series of circles below) you can do this no problem by swapping the overlays with the subsequent (‘two’ and ‘three’) circles, and closing the overlays when you click ‘one’. Interact with the example here.
我们打算在一个框架中为内容提供一个分段控制器,以尊重页面上其他组件的多个状态。 这意味着人们可以浏览子菜单,同时更改其下方其他项目的状态。 做到这一点的唯一方法是使用叠加层“伪造”它。 如果只有一系列类似大小的组件(即,选项卡式内容或下面的一系列圆圈),则可以通过将叠加层替换为随后的(“两个”和“三个”)圆圈并关闭单击“一个”时覆盖。 与 此处 的示例进行交互 。
As you can see in the example above, the problem is that Figma won’t let you control multiple overlays simultaneously. It is mutually exclusive. This means we had to create separate pages for the various tabs and use overlays for the other dynamic content below for the users to accomplish their task in the user testing plan. What happens when you have three sets of dynamically-controlled content on a page? Replicate a host of every possible page combination?
如您在上面的示例中看到的那样,问题在于Figma不允许您同时控制多个叠加层。 它是互斥的。 这意味着我们必须为各个选项卡创建单独的页面,并为下面的其他动态内容使用叠加层,以便用户完成用户测试计划中的任务。 当页面上有三组动态控制的内容时,会发生什么? 复制每个可能的页面组合的主机?
No — you fire up Axure RP.
不,您启动了Axure RP。
Axure RP 8展示了它的完成方式 (Axure RP 8 Shows How It’s Done)
What we’re seeing in the example above is Axure RP’s ability to allow the full gamut of potential combinations of content all contained in one page. There’s no duplication of effort and you get an experience that is as close to production that you’re going to get.
在上面的示例中,我们看到的是Axure RP允许全部包含在一页中的全部潜在内容组合的功能。 无需重复劳动,您将获得与生产一样接近的体验。
This is possible by using dynamic panels for the tabbed content and “widget” (Axure’s standard sets of shapes and UI) states for the circles. Additionally, you can see the hover states that turn the tabs and circles light gray, and the selected states that make the font style bold. Interact with the example here.
通过为选项卡式内容使用动态面板,为圆使用“窗口小部件”(Axure的标准形状和UI标准集)状态,可以实现此目的。 此外,您可以看到使选项卡和圆圈变成浅灰色的悬停状态,以及使字体样式变为粗体的选定状态。 与 此处 的示例进行交互 。
将动态面板用于选项卡式内容 (Using Dynamic Panels for the Tabbed Content)
Dynamic panels are essentially content containers where you can create events or “cases” and call upon the panels with certain triggers, such as clicking a button (the tabs, in this case).
动态面板本质上是内容容器,您可以在其中创建事件或“案例”,并使用某些触发器(例如,单击按钮(在本例中为选项卡))调用面板。
Understanding and using dynamic panels are key to delivering nested dynamic content such as content in menus, scrolling containers, and segmented controllers (tabs).
了解和使用动态面板是交付嵌套动态内容的关键,例如菜单,滚动容器和分段控制器(选项卡)中的内容。
You can even set dependencies, but that’s for another discussion.
您甚至可以设置依赖关系,但这是另一个讨论。
选择选项卡和圈子的交互样式 (Select Interaction Styles for Tabs & Circles)
What this means for the circles is that you’re creating one circle widget with multiple styles like fill and border colors, font styles, size, among many other possibilities.
这对圈子意味着什么,就是您要创建一个具有多种样式的圈子小部件,例如填充和边框颜色,字体样式,大小以及许多其他可能性。
You can also set their respective trigger interactions or actions such as page load, mouse over, swipes, drags/drops, input focus, and more.
您还可以设置它们各自的触发器交互或动作,例如页面加载,鼠标悬停,滑动,拖放/输入焦点等。
Setting interaction styles by standard states can be accomplished without setting cases or events. You can set default states and by triggered event if you like.
无需设置案例或事件即可通过标准状态设置交互样式。 您可以根据需要设置默认状态和触发事件。
Axure RP是真正的快速原型制作工具 (Axure RP is a true rapid prototyping tool)
This design process with Axure RP is more aligned with designing for code in that you’re building components, states, and logic that behave as you would expect in production.
使用Axure RP进行的这种设计过程与代码设计更加一致,因为您正在构建组件,状态和逻辑,这些组件,状态和逻辑的行为与生产中预期的一样。
When testing a high-fidelity prototype with actual users, a close parity to the real-world experience ensures your test results won’t be muddied with the limitations of the design tool used or worse — force you to redesign your approach to fit the limitations of the tool.
与实际用户一起测试高保真原型时,与真实世界的体验非常接近,可确保您的测试结果不会因所用设计工具的局限性或更糟而混为一谈–迫使您重新设计方法以适应局限性工具。
每个人都有自己的最爱 (Everyone has their favorites)
Sure, I picked on Figma in this article, but similar limitations are present in Sketch, the dominant design platform permeated across many enterprise UX teams. Considering the vast library and resources available for Figma and Sketch, it is possible to account for many of these shortcomings. Yet, it may be more effort than you’re willing to invest in time and/or money to research, acquire, and learn these plugins and workflows.
当然,我在本文中选择了Figma,但是在Sketch上也存在类似的局限性, Sketch是贯穿于许多企业UX团队的主导设计平台。 考虑到Figma 和Sketch 可用的大量库和资源 ,可以解决许多这些缺点。 但是,这可能比您愿意花费时间和/或金钱来研究,获取和学习这些插件和工作流程要付出更多的努力。
Axure RP is the most complete out-of-the-box prototyping tool on the market, notwithstanding it’s deep support, community, and resources.
尽管具有深厚的支持,社区和资源 ,但Axure RP是市场上最完整的即用型原型制作工具。
离别的想法和考虑 (Parting thoughts and considerations)
The landscape of UX tools are constantly improving at a rapid pace. Choosing favorites is fun, but it’s no hill to die on. I think back to when Adobe XD was first released. It was a nice experience, but fairly limited functionality. Today, it features tools that respect a modern UX practice on par with Figma and Framer. That being said, I would absolutely love to see more logic-based functionality and dynamic states in any of these tools and would happily welcome the needed additions.
UX工具的面貌正在Swift改善。 选择收藏夹很有趣,但是这并非难事。 我回想起Adobe XD首次发布的时间。 这是一个很好的体验,但功能却相当有限。 如今,它具有可与Figma和Framer媲美的,尊重现代UX实践的工具。 话虽这么说,我绝对希望在任何这些工具中看到更多基于逻辑的功能和动态状态,并愉快地欢迎需要的附加功能。
Case in point: it was brought to my attention prior to publishing this article that a plugin was recently created for importing Figma frames into Axure. This is an ideal workflow for creating architecture and pages, then having Axure work its interactive magic. Figma and Axure fans — rejoice!
恰当的例子:在发布本文之前,引起我注意的是,最近创建了一个插件 ,用于将Figma帧导入Axure。 这是创建架构和页面,然后让Axure发挥其互动魔力的理想工作流程。 Figma和Axure粉丝— 高兴 !
Axure RP is wonderful, but it is not free (outside of a 30-day trial). This is in contrast to both Figma and Framer that have free, individual, and team licenses at less monthly cost. Definitely try before you buy.
Axure RP很棒,但 不是免费的 (30天试用期之外)。 这与Figma和Framer都具有免费,个人和团队许可证的情况相反,而每月费用却更低。 购买前一定要尝试。
There is a slight learning curve. Many — if not most — UX designers I know are intimidated by the deep versatility and features offered by Axure that are absent from the pervasive set of Sketch, InVision, and Figma. Fear not! You can use Axure just as you use Sketch or Figma with its standard UX toolset. However, the more you put into it, the more Axure will deliver for you.
有一个轻微的学习曲线。 我认识的许多UX设计人员(如果不是大多数)都对Axure所具有的强大的多功能性和功能感到惊讶,而这些功能和功能却在Sketch,InVision和Figma的普适设置中缺乏。 不要怕! 您可以像使用Sketch或Figma及其标准UX工具集一样使用Axure。 但是,您投入的越多,Axure将为您带来更多的收益。
Learning and using dynamic panels, states, cases, and conditions will make people regard you as a wizard.
学习和使用动态面板,状态,案例和条件会使人们将您视为向导。
There are no substitutes for good design practices. Axure, Figma, or any other tool can’t account for sound customer/user research, collaboration and alignment with both stakeholders and end users. Agnostic of any tool(s) you end up using, your experience design will only be as good as your approach. For further reading on what a good approach to design looks like check out Dana Moran’s piece on how to “Build Better Products and Avoid Costly Mistakes”.
好的设计规范无可替代。 Axure,Figma或任何其他工具无法解决客户/用户的良好研究,协作以及两者之间的一致性 利益相关者和最终用户。 不知道您最终使用的任何工具,您的体验设计将仅与您的方法一样好。 要进一步了解什么样的设计方法是不错的方法,请查看Dana Moran关于如何“制造更好的产品并避免代价高昂的错误 ”的文章。
C.J. Toscano is an Experience Designer with Slalom Charlotte who has led transformational efforts for organizations across multiple industries with a focus on omnichannel experiences. He also enjoys cycling and delivering a mean slice at the ping-pong table.
CJ Toscano 是 Slalom Charlotte 的体验设计师, 他领导了跨行业的转型工作,重点是全渠道体验。 他还喜欢骑自行车,并且喜欢在乒乓球桌上投篮。
范例+下载 (Examples + Downloads)
Axure RP Example
Axure RP示例
Axure RP 8 Example .RP file download
Axure RP 8示例.RP文件下载
Figma Example
Figma示例
Figma working file
Figma工作文件
有关Axure RP的更多信息 (More on Axure RP)
“Why isn’t Axure RP more popular in UX design!?” by Yichen He
“ 为什么Axure RP在UX设计中不受欢迎!? ”由Yichen He撰写
“Tips to make your wireframes look like the final product using Axure RP” by Marc Oliver
“ 使用Axure RP使线框看起来像最终产品的提示 ”, 马克·奥利弗 ( Marc Oliver)
“How to implement Google Analytics to Axure RP 9 prototype” by Mike Acler
“ 如何将Google Analytics(分析)实现到Axure RP 9原型 ”,作者Mike Acler
“Axure RP 8 Tip — Check all inputs in form” by Martin Dymáček
“ Axure RP 8技巧—检查表格中的所有输入 ”,作者: MartinDymáček
*Full disclosure: I’m in no way affiliated with Axure or have been influenced by money, support, or retweets. I’m merely recognizing the value of an awesome UX design tool.
*完全披露:我 绝不 隶属于Axure,也不受资金,支持或转推的影响。 我只是意识到出色的UX设计工具的价值。
翻译自: https://uxdesign.cc/the-logical-choice-for-dynamic-and-complex-prototypes-3e669a21eef4
axure rp key: