srcmini本文概述
在最近的srcmini信息图：”最佳UX工具”中, 我们检查了市场上广泛的数字设计工具, 其中大多数能够协助单个UX设计人员的日常任务。
Sketch, Figma和Axure中的三个工具因在UX设计工作流程中的特定工作上表现出色而赢得了忠实的追随者。
但是, 这些工具的性能取决于手头的设计任务。我们不会通过比较表列出其所有功能, 而是通过基于任务的审核来确定其有效性。
以下是竞争对手的简要概述：
- 由位于荷兰海牙的Bohemian Coding绘制的草图。 Sketch是仅Mac应用程序。
- Figma by Figma, 总部位于加利福尼亚州旧金山。 Figma可通过浏览器在任何操作系统上运行。
- Axure by Axure软件解决方案公司位于加利福尼亚州圣地亚哥。 Axure具有Windows和Mac版本。
我们将根据每个工具在没有插件, 附加组件或第三方应用程序的情况下执行日常设计任务的效果为每个工具评分。任务包括：
- 做概念构想
- 创建低保真交付物
- 创建高保真交付物
- 创建交互式原型
- 创建设计系统
- 交付发展
注意：当工具具有完成任务所需的几乎相同的功能时, 胜利将归功于易于使用且交付速度更快的工具。如果这个决定似乎太过紧迫, 那么第三方支持就是平手。
任务：做概念构思
构想是一个产生新构想的创造性过程, 通常由设计师, 开发人员, 产品所有者和项目经理组成的跨学科小组完成。
目标是在考虑基本要求和任何正在建设的工作之后, 创建可在产品中使用的新想法。例如, 团队可能会进行概念构思会议, 以为新应用程序或现有应用程序中的下一代功能创建一组MVP功能。
使用纸, 便签和投影仪进行的大型小组构思会议。
许多设计师在白板或纸上进行概念构思。但是, 构思也可以数字方式进行, 尤其是在分布式办公室中。概念生成是一项团队运动, 包括非设计师, 例如产品所有者/经理和前端开发人员。促进协作且易于使用的工具最适合此任务。
获奖者：Figma
Sketch和Axure都提供云共享服务, 但是无法与协作者实时共享屏幕。
可以实时加入在Figma中共享的文件, 并显示每个参与者的带标签的光标。点击工具栏中的代表性头像, 即可将视图切换到该人的视角, 从而可以轻松快速地分享想法。此外, Figma不需要非设计者拥有副本。他们打开文件链接并开始工作。
其他白板协作工具可能比Figma更适合概念构思, 例如Mural和Realtimeboard, 但对于设计工具, Figma比Sketch和Axure好一英里。
任务：创建低保真交付物
低保真交付品通常以线框或数字草图的形式生产, 可以由其他设计师和产品所有者分发和审查。根据UX过程, 开发人员和其他利益相关者也可以查看它们。
线框旨在显示应用程序的基本结构, 以便可以在花费时间创建高保真模型之前定义交互模型。
线框由概念构思会话生成-使用低保真线框验证产品设计构想。
可以使用专用于此任务的工具(包括Balsamiq Mockups, Moqups和FluidUI)来创建低保真线框。但是, Sketch, Axure和Figma都可以完成相同的任务, 尤其是当用户创建线框组件库时。
由于线框通常用作应用程序或页面的初始UI布局, 因此它们是经常更改的单色粗加工。这有助于保持利益相关者的期望。
对于线框, 易用性, 交付速度和修改至关重要, 因为它们使设计人员能够有效地进行变形设计。
获奖者：Axure
在Axure中, 你可以拖放线框创意, 而无需创建组件。
Axure之所以能在这里获得成功, 是因为它具有预包装的组件, 可在安装软件后立即进行线框图。 Sketch和Figma具有可用于创建线框的工具, 但是你需要绘制线框组件或下载包含它们的文件。无论哪种情况, 它们都必须像Axure组件一样集成到符号(Sketch)或组件(Figma)库中。
Axure拥有许多用于创建低保真可交付成果的第三方库, Sketch具有大量可以下载的免费和付费文件, 而Figma的公共资源仍处于起步阶段。
设计人员创建线框组件库后, 这三个工具将平均匹配。请注意, Axure的组件具有参数化和可调整的属性, 但是对于静态线框, 当库可用时, 所有三个工具的性能都很好。
任务：创建高保真交付物
高保真可交付成果源于从低保真线框收集的反馈和学习。它们是显示颜色, 视觉细节以及为应用程序建议的最终设计的模型。
利益相关者演示中经常使用高保真模型。 (作者Pramiti R Khan)
高保真还意味着可以准备好演示文稿并向客户, 内部主管和其他非设计人员的利益相关者展示的屏幕模型。擅长此任务的设计工具具有添加必要的润饰效果所需的所有功能, 以创建最终面向客户的交付物。
这包括控制对象的填充和笔触, 添加阴影和渐变填充等效果, 以及将艺术作品导出为易于消化的格式(png, pdf, jpg)。
获奖者：Figma
Sketch和Figma具有几乎相同的工具集, 可以创建高逼真度的模型, 但是Figma的交互模型更加完善, 并且从一开始就更易于使用。两种工具都可以轻松访问高级编辑和布尔命令, 例如Join, Intersect, Union和Subtract。尽管Sketch的插件支持允许第三方创建其他功能, 但安装后立即无法使用这些工具。
这三个工具都具有允许自定义对象创建的功能, 但是Axure使得访问命令有些困难。上述编辑在工具栏上不可用。仅当选择了多个对象时, 才可以通过上下文菜单访问。
此外, Figma的矢量网络使使用线条工具变得轻而易举。
任务：创建交互式原型
交互式原型可以像纸质原型一样原始, 也可以像已更改以探索新功能的现有应用程序的分支版本一样详细。通常, 交互式原型允许用户在屏幕之间导航, 并使用菜单和列表等功能。
Sketch, Axure和Figma都提供在移动设备上运行交互式原型的应用程序。
对于许多设计师来说, 介绍他们的作品时, 基本的交互式幻灯片就足够了。对于移动应用程序来说尤其如此, 因为简单的过渡可以提供足够的设备交互来解释设计。
Figma的原型模型已很好地集成并且易于使用, 并且由于它是基于云的实时应用程序, 因此在更新文件时无需刷新HTML页面。
有时, 利益相关者希望实时数据连接将真实数据加载到原型中, 以测试设计的可扩展性, 但是现在绝大多数设计人员几乎不需要复杂的原型。
获奖者：Figma
Figma中的原型制作类似于在屏幕之间使用连接箭头的其他工具。
Sketch和Figma都支持通过”对象到画板”的链接进行简单的原型制作, 并支持有限的过渡集。插件有助于增强Sketch的简单原型制作功能, 但是Axure在为原型提供健壮的交互模型时功能最强大。
任务：创建设计系统
设计系统虽然在UX设计领域相对较新, 但已经存在了数十年。它们包括共享的设计语言, 组件, 资源和指南, 使团队能够协作并做出更好的决策。设计系统库通常被实现为网站, 并且充当整个公司中产品的唯一事实来源。
获奖者：Figma
尽管可以在任何程序中构建组件库, 但是它们都不允许设计人员一开始就进行切换并生成可行的组件库。 Axure可以生成带有自定义组件的HTML页面, 但是无法查询单个组件以找出颜色值, 大小和其他属性。
使用这些工具中的任何一个来构建设计系统仍然是手动过程。但是, 有一些适用于Sketch的插件(例如Google最近发布的Material Design插件)和至少一个用于Figma的第三方工具。
Figma之所以能获胜, 是因为协作是一个好的设计系统的核心。来自多个学科(设计, 开发, 质量, 内容)的公司员工需要访问设计系统库, 并且许多人都将添加到设计组件文件中以同步到共享库。 Figma可以供任何人使用, 而不仅是许可证持有人, 可以轻松访问和添加共享文件。
此示例显示了在Figma中组织的设计系统的基本元素-designcode.io
任务：实现发展
UI设计人员完成界面创建后, 便有责任将设计文件移交给开发人员, 以便项目可以完成。但是, 交接不只是简单的数据交换, 它还为设计师提供了交流工作原理的机会, 从而帮助开发人员将形式与功能结合起来。
有许多种切换方法, 甚至还有更多的第三方工具, 可帮助从Sketch和Figma文件中进行红线和对象信息查询(请参阅Avocode和Zeplin)。但是, 在此比较中, 我们正在研究原始设计工具, 然后再为其添加插件或其他应用。
有趣的是, UX设计系统的兴起减轻了这种形式的切换的需要, 因为已发布的组件库是开发人员的唯一事实来源。他们可以提取组件的确切布局和设计信息, 而无需等待交付或用户体验的咨询。
另外, 从设计文件中的对象获取信息可能对构建设计系统很有帮助, 因此对CSS进行一些查看是一件好事。
Sketch允许你选择对象并使用上下文菜单来”复制CSS属性”, 但这并不理想。 Figma通过在属性面板中提供一个”代码”标签来为选定对象生成CSS, iOS或Android值(开发人员可以在仅查看或原型模式下使用此功能)来做一个公平的工作。
获奖者：Axure
Axure的HTML和文档生成对话框具有许多有用的选项。
目前, 只有Axure具有强大的”生成器”, 它们可以生成完全可发布的HTML文件, Word规范, 甚至CSV格式的报告, 以导入到电子表格中。虽然结果不是设计库, 但该应用程序确实提供了有用的开发人员移交材料。
总体设计工具优胜者：Figma
从数量上看, Figma是这次比较的赢家, 主要是因为它具有协作性和跨平台可用性。随着越来越多的团队使用要求在前端开发和设计之间进行更紧密集成的设计系统, Figma的实时协作和实时嵌入功能为其提供了巨大优势。不利的一面是, Figma是一个在线应用程序, 出于安全原因, 它可能被禁止在企业中使用。
Axure凭借其预建组件的强大功能, 强大的交互式原型功能和文档生成功能而居第二位。在极少数情况下, 当公司需要访问实际数据存储区以查看特定功能的行为方式时, Axure是最佳选择或唯一选择。
Sketch可能排在最后, 但是一旦用户利用了该工具提供的许多插件和资源, 它就非常强大, 并且可以根据设计团队的需求进行定制。需要注意的是, 每次Sketch更新后都必须更新插件, 并且作为仅限Mac的应用程序, 使用Windows PC的公司不能使用它。
本文中介绍的所有三个工具都具有强大的功能。但是, 每个都有局限性。由各个设计师和团队来确定他们的工作流程需求, 权衡每个程序的利弊并做出适当的选择。
• • •
在srcmini设计博客上进一步阅读：
- 沟渠MVP, 采用最小可行原型(MVPr)
- Figma作为设计工具的力量
- 如何创建草图样式指南, 库和UI套件
- 了解设计系统和模式
- 死亡的线框。直接达到高保真！
评论前必须登录！
注册