作者都是各自领域经过审查的专家,并撰写他们有经验的主题. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.
本·科普夫的头像

本科夫

Ben在UX、交互、用户研究和UI设计方面有25年的经验. 本想的是未来,而不是现实.

专业知识

以前在

ADP
分享

在最近的Toptal信息图表中:最好的用户体验工具,“我们研究了市场上各种各样的数字设计工具, 其中大多数都能够协助个人的日常工作 用户体验设计师.

三种工具的特色, 草图, Figma, 和Axure, 因为他们擅长UX设计工作流程中的特定工作而产生了忠实的追随者.

然而,这些工具的性能各不相同 取决于手头的设计任务. 而不是在比较表中列出它们的所有特性, 我们将通过基于任务的评估来确定它们的有效性.

以下是对竞争对手的快速概述:

  • 草图 由位于荷兰海牙的波西米亚编码公司开发. 草图是一个mac专用的应用程序.
  • Figma 来自加州旧金山的Figma公司. Figma可以通过浏览器在任何操作系统上运行.
  • Axure 由位于加州圣地亚哥的Axure软件解决方案公司开发. Axure有Windows和Mac两个版本.

我们将根据每个工具开箱即用的日常设计任务执行情况对其进行评分没有 插件、附加组件或第三方应用程序. 这些任务包括:

  1. 进行概念构思
  2. 创建低保真交付成果
  3. 创建高保真交付成果
  4. 创建交互式原型
  5. 创建设计系统
  6. 致力发展

注意: 当这些工具具有完成任务所需的几乎相同的特性时, 胜利将属于更容易使用和提供更快交付的工具. 如果这一决定看起来势均力敌,那么第三方的支持将是决定性因素.

任务:构思概念

构思是产生新想法的创造性过程, 这通常是由设计师组成的跨学科团队完成的, 开发人员, 产品负责人, 项目经理.

目标是在考虑基本需求和任何已经在构建中的工作之后,创造出新的想法用于产品. 例如,一个团队可能会经历一个概念构思会议,以创建一组 最有价值球员 新应用的功能,或者现有应用的下一代功能.

图片展示概念创意设计协作:草图vs figma

许多设计师在白板或纸上构思概念. 然而,创意也是通过数字方式完成的,尤其是在美国 分布式的办公室. 概念生成是一项团队运动,包括非设计师,如产品负责人/经理和前端开发人员. 促进协作且易于使用的工具最适合此任务.

赢家:Figma

草图和Axure都提供云共享服务, 但是没有办法与合作者实时共享屏幕.

共享的文件 Figma 是否可以实时加入,并显示每个参与者的标记光标. 单击工具栏中的代表性头像,将视图切换到该人物的透视图, 使快速分享想法变得容易. 另外, Figma doesn’t require non-设计师s to own a copy; they open the file link 和 start working.

其他白板协作工具可能比Figma更适合概念构思,比如 壁画Realtimeboard但是作为一个设计工具,Figma比草图和Axure要好得多.

任务:创建低保真交付物

低保真度的可交付成果通常是 线框图 或者是其他设计师和产品负责人可以分发和审查的数字草图. 根据用户体验过程,它们也可以由开发人员和其他利益相关者查看.

线框图旨在显示应用程序的基本结构,以便在花时间创建高保真模型之前定义交互模型.

Axure vs 草图线框界面设计生成

创建低保真线框图可以通过专门用于该任务的工具来完成, 包括 Balsamiq模型, Moqups, FluidUI. 然而, 草图, Axure, 和Figma都可以完成同样的任务, 特别是当用户创建线框组件库时.

因为线框图通常作为应用程序或页面的初始UI布局, 它们是单色的毛坯,经常变化. 这有助于控制涉众的期望.

对线框图, 易用性, 交货速度, 修改是必不可少的,因为它们使设计师能够有效地产生不同的设计.

赢家:Axure

Axure vs. 草图:绘制线框拖放组件

Axure 在这里获得胜利,因为它有预先包装的组件,可以在安装软件后立即进行线框图. 草图和Figma有 工具 让你创建线框图, 但是您需要绘制线框组件或下载包含它们的文件. 无论哪种情况,它们都必须积分成a 象征 (素描)或 组件 (Figma)库可以像Axure组件一样拖放.

Axure有很多第三方 用于创建低保真交付物,草图有许多免费和付费的工具 文件 可以下载,而Figma 公共资源 仍然羽翼未丰.

一次 设计师 已经创建了线框组件库,这三个工具是均匀匹配的吗. 请注意,Axure的组件拥有 参数 还有可调节属性, 但是对于静态线框, 当库可用时,这三个工具都表现良好.

任务:创建高保真可交付成果

高保真的交付成果来自于从低保真线框图中收集的反馈和学习. 它们是显示颜色、视觉细节和建议应用程序最终设计的模型.

Figma vs 草图: Figma高保真原型.

高保真度还意味着屏幕模型可以展示给客户, 内部管理人员, 以及其他非设计师利益相关者. 擅长这项任务的设计工具拥有所有必要的功能,可以为最终面向客户的交付成果添加修饰.

这包括对对象填充和笔触的控制, 添加阴影和渐变填充等效果,并将艺术导出为易于消化的格式(png), pdf, jpg).

赢家:Figma

Figma审查高保真交付

草图 和Figma有几乎相同的工具集,可以创建高保真的模型,但是 Figma的 交互模型更加精细,工具从一开始就更容易使用. 这两个工具都可以轻松访问高级编辑和布尔命令,如Join, 相交, 联盟, 和减. 为高保真素描, 有一个插件支持,允许第三方创建额外的功能, 但这些工具在安装后并不能立即使用.

这三个工具都具有允许自定义对象创建的特性, 但Axure让访问这些命令变得有些困难. 上面提到的编辑在工具栏上不可用. 只有在选择多个对象时,才能通过上下文菜单获得访问权限.

另外,Figma 向量网络 使使用线条工具变得轻而易举.

招聘美国全职自由UI设计师

任务:创建交互原型

互动原型可以像纸上原型一样粗糙,也可以像现有应用的分支版本一样详细,这些分支版本已经被修改以探索新功能. 通常, 交互式原型允许用户从一个屏幕导航到另一个屏幕,并使用菜单和列表等功能.

草图和. Axure vs Figma交互原型功能

对于许多设计师来说,在展示他们的作品时,一个基本的交互式幻灯片就足够了. 对于手机应用来说尤其如此,因为简单的过渡提供了足够的设备交互来解释设计.

Figma的原型模型集成良好,使用简单, 因为它是一个实时的基于云的应用程序, 当文件更新时,不需要刷新HTML页面.

偶尔, 利益相关者希望通过实时数据连接来加载带有真实世界数据的原型,从而测试设计的可扩展性, 但现在绝大多数设计师都不需要复杂的原型.

赢家:Figma

Figma设计草图替代方案

草图和Figma都支持简单的原型设计,带有“对象到画板”链接和有限的过渡集. 插件 帮助支持草图中的简单原型, 但在为原型提供健壮的交互模型方面,Axure是最强大的.

任务:创建一个设计系统

设计系统,虽然在用户体验设计领域相对较新, 已经存在了几十年了吗. 它们包括共享的设计语言, 组件, 资源, 以及指导方针,使团队能够协作并做出更好的决策. 设计系统库通常作为网站实现,并作为整个公司产品的单一来源.

赢家:Figma

组件库 可以在任何程序中构建吗, 它们都不允许设计师在一开始就拨动开关并生成可行的组件库. Axure可以 生成HTML页面 带有自定义组件, 但是没有办法查询单个组件来找出颜色值, 大小, 以及其他属性.

使用这些工具构建设计系统仍然是一个手工过程. 不过,草图也有插件(比如Google最近发布的插件) 材料设计插件),至少 一个第三方工具 正在为Figma做准备.

Figma赢得了胜利,因为协作是一个好的设计系统的核心. 公司员工来自多个学科(设计), 发展, 质量, 内容)需要访问设计系统库, 许多人将添加到与共享库同步的设计组件文件中. Figma可以被任何人使用, 不仅仅是执照持有者, 使访问和添加共享文件变得轻松.

Figma设计系统支持符号和库- Figma vs sketch

任务:交付发展

当UI设计师完成界面的创建时, 他们有责任将设计文件交给开发人员,以便完成项目. 但是一个 切换 是不是不止是一个简单的数据交换, 对于设计师来说,这是一个交流他们工作原理的机会,从而帮助开发人员将形式与功能结合起来.

有几十种切换方法,甚至更多的第三方工具,以方便从草图和Figma文件(见 Avocode赞贝林). 然而, 在这个比较中, 我们会在添加插件或其他应用程序之前查看原始设计工具.

有趣的是, 用户体验设计系统的兴起减轻了对这种形式的切换的需求, 因为发布的组件库是开发人员的唯一真实来源. 他们可以提取组件的确切布局和设计信息,而无需等待交付或UX咨询.

也, 在设计系统的构建过程中,从设计文件中的对象获取信息是很有帮助的, 所以CSS的一些视图是一件好事.

草图允许您选择对象并使用上下文菜单来“复制CSS属性”,但它并不理想. Figma通过在属性面板中提供一个“Code”选项卡来生成CSS,做得很好, iOS, 或选定对象的Android值(开发人员可以在仅视图或原型模式下使用此功能).

赢家:Axure

草图原型工具开发人员的交接——axure vs 草图

此时此刻, 只有Axure有强大的“生成器”来生成完全可发布的HTML文件, 词的规范, 甚至可以将CSV格式的报告导入电子表格. 虽然结果不是一个设计库,但该应用程序确实提供了有用的开发人员移交材料.

最佳整体设计工具:Figma

通过数字, Figma是这次比较的赢家, 主要是因为它的协作性和跨平台可用性. 随着越来越多的团队使用需要在前端开发和设计之间更紧密集成的设计系统, Figma的实时协作和实时嵌入特性赋予了它很大的优势. 不利方面, Figma是一个在线应用程序,出于安全原因可能会被禁止在企业中使用.

Axure位居第二,因为它的内置组件具有开箱即用的优势, 强大的交互原型功能, 以及文档生成. 在更罕见的情况下,当公司需要访问真实的数据存储以查看特定功能的行为时, Axure是最好或唯一的选择.

草图 可能是最后一个, 但是,一旦用户利用了该工具的许多插件和可用资源, 它非常强大,可以根据设计团队的需求进行定制. 这里的警告是,插件必须在每次草图更新后更新, 并且是mac专用的应用程序, 使用Windows电脑的公司不能使用它.

本文中介绍的这三个工具都非常强大. 然而,每种方法都有其局限性. 这取决于个人设计师和团队来确定他们的工作流程, 权衡每个项目的利弊, 并根据自己的需求选择最佳的用户体验设计工具.

了解基本知识

  • Axure的用途是什么?

    Axure是一个用于创建线框图和交互原型的用户体验设计工具. Axure移动原型对移动和桌面设计师都很有用, 它在企业公司中受到高度重视,因为它可以在原型中内置高水平的功能和视觉细节.

  • Axure是最好的原型工具吗?

    Axure是面向企业用户体验设计师和数字设计团队的领先原型工具之一. 然而, 像草图和Figma这样的Axure替代品也因其协作工具而广受欢迎, 切换功能, 以及插件支持.

  • 为什么创意很重要?

    构思是用户体验设计过程的重要组成部分,因为它允许设计师自由快速地生成通常不会考虑的概念和解决方案. 这也是设计师在解决问题的过程中合作和结合他们的知识和过去经验的宝贵时间.

  • 什么是高保真设计?

    高保真设计交付成果是准备好展示并展示给客户的屏幕模型, 内部管理人员, 以及其他利益相关者. 擅长这一任务的设计工具拥有所有必要的功能,可以为最终面向用户的界面添加修饰.

  • 什么是低保真原型?

    低保真原型是线框图或数字草图,可以由其他设计师和产品负责人查看. 根据用户体验过程,它们也可以由开发人员和涉众查看. 线框图是为了在制作高保真模型之前展示应用程序的基本结构.

聘请Toptal这方面的专家.
现在雇佣
本·科普夫的头像
本科夫

位于 坎顿,GA,美国

成员自 2018年3月19日

作者简介

Ben在UX、交互、用户研究和UI设计方面有25年的经验. 本想的是未来,而不是现实.

Toptal作者都是各自领域经过审查的专家,并撰写他们有经验的主题. 我们所有的内容都经过同行评审,并由同一领域的Toptal专家验证.

专业知识

以前在

ADP

世界级的文章,每周发一次.

订阅意味着同意我们的 隐私政策

世界级的文章,每周发一次.

订阅意味着同意我们的 隐私政策

Toptal设计师

加入总冠军® 社区.