vako shvili

产品和UI设计人员经常面临难度决定,当涉及到哪种工具,他们会使用它:图格/素描?让我们终于解决了分数图格马与素描辩论。在本文结束时,我们将拥有明确的赢家,您将知道哪个应用程序最适合您的目的。

我是一个web和UI设计师。当我第一次尝试草图时,我爱上了它。素描快速,轻巧,易于使用。它非常适合接口设计。

完整的网页设计:从图形到WebFlow到自由职业者

上次更新6月2021日

畅销书
  • 201讲座
  • 各级
4.8 (5,024)

3在1课程中:学习使用Figma设计的网站,使用WebFlow构建,并制作自由职业者。|由Vako Shvili.

探索课程

大多数UI设计师都以同样的感觉。直到素描出现,我们必须使用Photoshop进行接口设计。Photoshop具有其目的,但它不是为UX和UI设计制作的。它是为照片操纵制作的。因此,名称中的“照片”一词。

很快,素描成为行业标准,多年来保持这种方式。

输入图形,有时称为“类固醇草图”。

为什么我不得不在素描和图形之间决定

当我第一次尝试图形时,我没有看到任何重大好处,所以我回到了剪影。

但几年后,当我开始创造一个网页设计课程,我需要选择一个接口设计工具来教授。素描不是最好的选择,因为它只在Mac上,你必须支付许可证。我需要一些免费的东西,可供所有机器。

这让我介绍了图格玛与草图之间最重要的区别。

差异#1:平台可用性

虽然素描仅在MacOS上可用,但Figma在Mac和Windows上工作,并且有一个Web应用程序。

如果您不拥有Mac,这个简单的事实足以让您做出决定。

即使对于MAC拥有设计师,这仍然是一个重要的事实。当我在像移动应用程序设计这样的大UI项目时,我与一支团队合作。有时我需要将设计文件提供给另一个设计师。如果他们有一个PC,我无法分享我的草图文件。

获胜者:Figma.

差异#2:成本

Figma是个人设计师免费,但为具有两个以上设计师(编辑)的团队而成的费用。然后它比素描更贵,从每位编辑/月12美元开始。但这是为了你的雇主担心。

素描是一个99美元的下载。

素描计划
素描计划
Figma计划
Figma计划

获胜者:Figma.

差异#3:款式

我开始使用图中的课程。我开始注意到微小但有意义的差异。

图绘制的风格与素描的差异是让我为我的自由工作切换到图形。

在Figma中,您可以从文本,颜色,笔划和效果创建独立样式。您可以将这些样式应用于任何图层。您可以应用文本样式和颜色样式,只有阴影,或一切都在一起。

在草图中,这是不可能的。您只有两种类型:文本和图层样式。每个属性都成为那种风格的一部分。例如,下面示例中具有丢弃阴影的粉红色矩形是单层样式。

素描中的层式风格
素描中的层式风格

我无法在任何其他元素上独立地应用粉红色或阴影。

在图中,粉红色的颜色和阴影样式是独立的:

图格玛的颜色和阴影风格
图格玛的颜色和阴影风格

这个小细节会产生所有差异。我需要创建一次粉红色或拖放阴影样式,然后在整个项目中使用它。如果我将其应用于文本,矩形,椭圆,组,帧或其他任何其他任何东西并不重要。颜色是颜色,阴影是阴影(不根据草图)。

我稍后可以决定将粉红色的颜色样式更改为蓝色。而且变化会影响那种风格的每个单层。所有粉红色的按钮,粉红色文本,粉红色图标,以及粉红色的一切都会变成蓝色。单击“绘制作业”。哇!

你可以在草图中实现类似的东西。但是您需要将样式,嵌套符号等组合。Figma的方法更优雅。

文字样式

还有更多。Figma处理文本样式比草图好得多。在草图中,您无法覆盖特定文本样式的任何属性。

例如,假设我们有一个大标题文本样式:Roboto,Bold,45px,左对齐,黑色。

在整个项目中,我们需要标题有时是中心对齐的,有时左对齐,有时是蓝色而不是黑色。

文本样式在素描中覆盖
文本样式在素描中覆盖

在草图中,我们可以使这些覆盖,但它们是暂时的。我们需要调整一些关于主样式的时刻,如改变字体,所有这些覆盖都会消失:

在更新大标题样式后,所有覆盖都会丢失。
在更新大标题样式后,所有覆盖都会丢失。

甚至是对齐仍然存在。所以,在素描中使用文本样式,我们不能有一个大标题文本样式。我们需要有:

为每个颜色变化等等。这只是一种类型的标题。我们需要其他头条新闻,副标题,段落,链接和标题。这会产生这样的混乱,通常最好不要使用样式。

在图中,只有一个大标题。请注意所有颜色和对齐属性如何持续,因为我更新了主文本样式:

图格图中的文本样式更新
图格图中的文本样式更新

我们需要多少大标题文本样式?一。这个发现几乎带来了泪水。

获胜者:Figma.

差异#4:现场合作

关于Figma的最讨论的细节是其实时协作功能。

实时协作演示。来源:Figma.com.
实时协作演示。来源: figma.com.

由于此功能,许多人都配给了Figma“Google Digital Design的Google Doc。”这是它的工作原理:

这是一个游戏更换器,适用于具有在同一项目上工作的许多设计师的大型团队。

素描远远没有这个功能。他们确实有一个云功能,但到目前为止,它更像是文件共享的Dropbox。

获胜者:Figma.

差异#5:原型设计

根据我的经验,Figma的原型设计优于草图。这就是为什么:

使用Figma的Smart Animate弹跳球动画
使用Figma的Smart Animate弹跳球动画

图形原型失败的地方

Figma的原型设计缺少一个关键的东西 - 在页面之间联系。目前,如果它们在不同的页面上,它不允许我们连接帧。

在草图中,这不是一个问题。你为什么需要这个?

通常,我在有超过300个屏幕的应用程序上工作。在素描中,我将这些屏幕组织在页面中。例如,我将有这样的页面:

这样,如果我需要对用户的头像进行更新,我可以转到“用户配置文件屏幕”页面,并轻松找到化身。

但由于Fluma不允许在页面之间链接的原型,因此我需要在同一页面上所有:

317在图形图中的同一页面上的应用程序屏幕
317在图形图中的同一页面上的应用程序屏幕

在图中,我浪费了很多时间寻找屏幕。为了更容易搜索,我必须花时间组织不同组中的屏幕。

如果我知道框架的名称,我使用搜索插件,我可以轻松找到它。但我无法记住我以317屏幕命名的东西。我需要在视觉上浏览那里的东西。

此外,当你在同一个画布上有300多个屏幕时,最终结束缩放并平移很多,以便在远离彼此的屏幕之间。但是对于页面,您可以单击到该屏幕。

我需要这个功能超过那些花哨的动画选项。所以对我来说,这个人去剪影。

赢家:素描

差异#6:插件

有一个很棒的插件的海洋,可以填补缺少草图特征的差距。

涉及到可用插件的数量时,Figma跌倒了草图。这是因为它是一个新的工具,他们在2019年推出了插件支持。

但是缺乏数量的图形缺乏质量:

以下是如何查找和安装Figma插件:





Figma插件安装的演示

Figma需要一点时间,以便第三方开发人员可以追赶并创建更多插件。现在,让我们称之为绘画。

获奖者:画画

差异#7:符号和组件

素描中的符号与图形中的组件相同。他们以类似的方式工作,除了一个主要区别。

在Figma中,您可以覆盖组件的大多数属性。在草图中,您只能覆盖符号的文本,除非您通过嵌套它内部的其他符号和图层样式准备符号。仍然是,这只限制了您嵌套选项。

图中的组件
图中的组件

以上是图形图中的单个按钮组件。颜色的差异是简单的填充覆盖。我不需要在它内有四个不同的按钮组件或嵌套层样式。一个组件可以统治它们。

如果我想标准化按钮颜色,我可以从我的通用颜色样式中选择颜色:

使用颜色款式覆盖颜色
使用颜色款式覆盖颜色

获胜者:Figma.

差异#8:黑暗模式

黑暗模式并不看起来很棒。可访问性是必要的,并防止眼睛疲倦。

相反的是真的。在明亮的日光期间,在暗模式下工作很难。UI的可见性非常低,您最终大部分时间都会眯起。

这就是为什么具有光和黑暗模式是理想的。您每天都会获得最佳观看。

素描轻质和黑暗模式
素描轻质和黑暗模式

素描有两种模式。但图形有一个,光模式。您可以手动更改图形图中的画布颜色,但这是关于它的。UI保持白色。

赢家:素描

差异#9:第三方资源

如果您使用现成的UI套件,则启动启动设计项目通常更容易。

示例素描UI套件
示例素描UI套件

素描是这里的胜利者。它已经很久了,它有一个更大的市场(现在),因此有很多付费和免费套件下载。

您可以将草图文件导入图形图,但样式不会转换,并且您将在套件中丢失重要功能。

赢家:素描

差异#10:用户喜悦

我是一个苹果“粉丝”。我最爱的是苹果产品的少量但令人愉快的细节。例如,在最小化摩托斯上的窗口时,Genie效果。

我也在图中发现了许多令人愉快的细节。

消失的组

在Figma中,如果删除组内的所有图层,则该组也消失。

删除孩子后,该集团消失了
删除孩子后,该集团消失了

它很小,但这讲述了一个更大的故事,关于谁在产品后面。每个人都可以获得基础知识。但要使一些令人愉快的事情,令人敬畏地努力和奉献精神。

复制属性

在草图中,您可以从一个元素复制所有属性并将其粘贴到任何其他元素上。这是一个方便的功能。但是你不能只复制一个属性,就像背景阴影一样。

在Figma中,您可以复制一个属性。例如,我在一个按钮上应用阴影,我也希望在其他元素上使用完全相同的阴影。我可以在“属性”面板中选择该属性,复制它,然后在任何其他图层上粘贴它。

复制粘贴图为图形的属性。我正在使用标准副本(Ctrl + C)和粘贴(Ctrl + V)函数。
复制粘贴图为图形的属性。我正在使用标准副本(Ctrl + C)和粘贴(Ctrl + V)函数。

快捷方式教程

图为图形的鲜为人知的快捷方式教程栏。它显示了各种捷径。

图2中的快捷方式
图2中的快捷方式

您已经使用的快捷方式以蓝色突出显示。这样你就可以告诉所有的快捷方式来学习。这就是我所说的令人愉快的产品。

自动帧编号

当我在带有300+屏幕的应用程序上工作时,我绝对需要编号。当我问我的产品经理他们在谈论哪个屏幕时,他们需要能够说“#51”而不是“预订屏幕在该预订确认之前提出的屏幕。”

在草图中,我必须手动编号帧,但图形是自动的。

图形图中的自动帧编号
图形图中的自动帧编号

有没有更多的方式无花果愉悦,但我会让你发现那些。

获胜者:Figma.

结论

让我们统计得分。

这两个应用程序之间曾经甚至更差异。但他们很快就会赶上任何新功能。另一个介绍了。我希望在阅读这篇文章之后,你也是。如果您想使用图格一样学习设计,这门课程可能会为你。SPOILER ALERT:我是教练。

Web设计中的顶级课程

Wireframes的初学者指南 - 迷你课程
Siddharth Srinivasan.
4.3 (533)
Adobe XD用于网络设计:UI&UX的基本原则
Cristian Doru Barin.
4.4 (15)
热和新的
HTML从划痕课程中学习
MasterMinds教程
4.8 (127)
学习Photoshop,网页设计和有利可图的自由职业
Cristian Doru Barin.
4.6 (5,999)
畅销书
2021年Ultimate Web Designer&Web开发人员课程
布拉德侯赛西
4.6 (12,108)
降落页面设计与转换率优化2018
isaac rudansky.
4.7 (6,799)
畅销书
Photoshop中的主网页设计
Cristian Doru Barin.
4.8 (2,273)
UI&Web设计使用Adobe Illustrator CC
丹尼尔沃尔特斯科特
4.6 (2,775)
Adobe Photoshop CC - Web设计,响应设计和UI
丹尼尔沃尔特斯科特
4.5 (738)

更多网络设计课程

网络设计学生也会学习

赋予你的团队。引领行业。

通过Udemy为Business获取组织的在线课程和数字学习工具库的订阅。

请求演示

Vako Shvili课程

Vako Shvili课程