用户体验设计工具2018(适用于Mac和PC)

现在有很多设计工具。围绕“设计系统”这一主题,人们进行了大量的讨论。设计系统听上去很古怪,但对于设计师和公司来说,却是一个非常重要的话题。

2019年6月13日

现在有很多设计工具。围绕“设计系统”这一主题,人们进行了大量的讨论。设计系统听上去很古怪,但对于设计师和公司来说,却是一个非常重要的话题。

我与一个由设计师、开发人员和业务人员组成的很大的团队合作。作为一名设计师,我承担了许多个人和自由职业项目。当涉及到工具和系统时,这些不同的任务都有不同的需求,因此了解什么项目适用于哪些设计工具就非常重要了。

我同时在PC和Mac上工作,所以这个列表中的所有工具都是多平台的,或者都有替代方案。请记住,我没有尝试过所有的替代方案,所以和你的个人情况可能会有所不同。

在我们开始之前,我有必要说明一下:我不代表任何公司或产品,我也没有得到任何形式的赞助。这些产品都是我亲测好用并喜爱的工具,这里的意见也是我对产品的真实体验。
所以,废话不多说,看看我选择的工具:

我知道。你读这篇文章是期待一些很棒的新工具可以使用,而我想说推荐的第一个工具是笔和纸。这可能让你失望,但我认为这是开始任何想法的最好方式。

从纸上开始可以让你保持原生的灵感,并有益于你修改,快速迭代,而不是陷入小事情上,将自己从设计工具中解脱出来很大程度上意味着你不用再被无谓的细节拖沓进度。

顺便说一下,我选择钢笔是有原因的,那就是:不要使用能够被擦除的工具。如果你把事情搞砸了,那就继续前进。这是去年有人给我的一个建议,它改变了我的生活——它使我的笔记本开始保留很多构思时粗糙的线条,但使我变得更有效率也更富于创造力。

Whimsical使得快速制作复杂的图表变得容易。

UX概念的另一个关键部分是用户流程,我喜欢Whimsical(浏览器端)。Whimsical有一个流程图设计工具,既易于使用,而且十分强大。

我要提醒你的是,每月10美元是一个非常贵的工具,但它确实操作简便快捷让人感觉很容易使用。

由于他们在UI和快捷键上做出了一些非常聪明的设计,因此上方的流程图大概只用了15分钟就完成了。

我不想太卖力推荐它,你还是自己去试试吧。本文中的流程图就是用Whimsical的方式制作的,稍后我们将在讨论线框图时讨论它们。

如果Whimsical不适合你,那么这种流程图设计也可以在其他设计工具中完成,或干脆用纸和笔制作。

为了寻找灵感,我常去的两个网站是DribbbleMuzliDribbble非常适合快速发现新想法,尤其是当你在寻找简单的视觉灵感而不是系统或产品创意时。收藏一些你喜欢的设计师或项目是一个好主意,这样当你想要更多的时候,你可以回到他们的主页。这是一个精心策划的社区,不用花太多时间去搜罗那些平庸点子了。

Muzli 的chrome应用程序还不错我真正喜欢Muzli的是他们每周的灵感和用户体验互动汇总。通常在这些文章中有非常有趣和多样化的设计,而且它们足够常规,总是有一些新的发现。
在Medium上也有一些杰出的设计师值得关注。

如果你在团队中进行一个项目,那么你将希望在某个时刻分享你的工作。在电子邮件中插入JPG是一回事,但还有一个方法看起来更便捷。那就是Zeplin (Mac, PC,浏览器)Zeplin做了很多很酷的东西,但让我们只关注几个关键功能。

首先,Zeplin非常适合分享你的作品。你可以添加协作者,他们可以查看屏幕、下载单个资源,并对设计留下评论和反馈。如果你想让一些关键的团队成员参与到设计过程中,这是开始一个项目的好方法。当我们讲到开发人员移交时,我们会更多地讨论它。

注释和反馈是一种简单的异步协作方法。

其次,它可以在你设计时生成样式指南。这使得协作者很容易获取颜色的十六进制值或类型样式。最后,Zeplin从头开始构建为代码导出设计。 当我们谈到交接时,我们将在稍后讨论这个问题。

Zeplin非常适合利益相关者,但如果您与其他设计师合作会怎么样?你需要版本控制。这个术语你以前可能没听过 – 它在编程中更常见- 但它基本的概念是保留住设计的历史上的所有版本。

在这方面,我非常非常喜欢Trunk (Mac应用程序,浏览器)

版本更迭历史非常重要,特别是对于远程团队。

Trunk对于设计师来说基本上就是Github。你告诉Trunk你希望它处理哪些文件,它将监视这些文件的任何更改。当进行更改时,Trunk记录下谁进行了更改以及更改是什么。做出更改的人可以对更新进行评论,让用户知道他们做了什么以及为什么这样做。

Trunk使设计人员可以很容易地一起工作,因为不再需要对所做的更改或更改的原因感到困惑。你甚至可以回滚更改或以非破坏性的方式处理冲突性更改,并查看文件的整个历史(这非常有趣)

注意:Trunk只兼容Sketch和Photoshop文件。对于Figma用户,Figma实际上内置了一些轻量级版本控制功能。
Alternatives: Abstract, Kactus (Sketch files only)
备选方案:Abstract,Kactus(只提供Sketch文件)

好了,你有了下一个伟大的创意,并与团队分享。他们已经准备好看到一些美妙的设计。接下来是什么?我从一些基本的线框图开始。这里的目标是屏蔽应用程序的外观,这样你就可以得到快速、早期的反馈。

嘿,又是我们的朋友 Whimsical了。他们不仅做伟大的流程图, Whimsical也有一个很酷的新线框工具。值得注意的是,这可能是我在这个列表中使用经验最少的应用程序,所以你的经验可能略有不同。

所以,事实上,你并不需要一个专门的线框图应用程序。我们的老朋友笔和纸就可以很好地做到这一点,Sketch或Figma等设计工具也可以。那么为什么要用Whimsical呢?

Whimsica的令人印象深刻的组件库涵盖了几乎所有的元素和控件

简而言之,它非常快而且非常有趣。Whimsica有一个内置的低保真度元件库;从按钮到切换到复选框文本框到滑块到标签栏……

所有东西都运行在智能向导上,所以有点像构建乐高拼图。抓住一些基本的组件,把它们放在一起,你很快就有了一个粗略的布局。这是一个很好的方法,可以让你快速地对你的应用程序的外观和工作方式有一个大致的概念。

我肯定你能认出那颗漂亮的钻石——没错,是Sketch FigmaAdobe XD time, InVision Studio PM等等。我无法想象有谁需要更多地了解这些程序——它们现在无处不在。然而,对于线框图,这里有一个很好的大技巧:制作(或下载)一个线框图工具包。Nicolaj Reck的这幅画非常适合Sketch,但你自己画也可以是一项非常有趣的练习。

稍后我们将更多地讨论这些程序,但是在这种情况下,最好的工具是你可以快速使用的工具它完全是关于快速、迭代设计的。

原型是展示产品在使用时的行为和反应的好方法,即使是在开发的早期阶段。市面上有很多不同的原型应用,但让我来谈谈我最喜欢的几个:

Atomic可以无缝地处理复杂的动画。

我试着不让自己听起来像是在推销这个清单上的产品,但我认为这将会成为我的标签:我认为Atomic(浏览器)下一个重要的原型设计程序喜欢它是因为一个特殊的原因:Atomic允许你真实的逻辑编写到程序里意味着原型不只是看起来像你的应用程序,它运作起来更像很难用语言来解释,请单击Atomic链接查看。这个应用值得你关注。

接下来是Flinto (Mac)Flinto的卖点是什么都有,这很好,但它真正擅长的是动画化互动。在Flinto中,滚动交互、复杂的转换和微交互等操作都是快速而简单的。它还允许你嵌入视频或GIF,因此你可以在原型中使用现有的动画资源。

Flinto最棒的地方是它的模拟器。它真的很时髦和快速,这是我有过的最接近的原型通过作为真正的交易。如果你想要真正高保真的互动和动画,这是一个很好的工具。

最后要介绍InVision(浏览器)。我不太喜欢InVision,我认为他们在市场营销上花的钱太多了,而在产品支持上花的钱却不够。也就是说,它确实可以生成快速的HTML原型,这些原型可以共享、评论和动态修改。

InVision理应出现在这个列表中,但在大多数情况下,我更喜欢Atomic。事实上,如果你不想使用Atomic,并且倾向于InVision,那么首先考虑FigmaSketch的内置工具——它们都支持基本的可单击原型,可以共享给用户并对其进行评论。它们都缺少滚动组和高级自定义动画等功能,但对于一个简单的原型来说应该已经足够了。

这里我还没有提到一些重量级的工具,所以让我快速地介绍一下:

Principle (Mac):我发现真的很难用,话虽如此,它那么受欢迎,应该是有原因的。Marvel(浏览器):我对Marvel没有太多的经验,但它是列表中少数几个可以在PC上使用的应用程序之一,它集成了一些很酷的协作和传递功能。这取决于你想要什么,可能值得一看!

Axure (Mac, PC):我最初认为Axure在这篇文章中有点过时了,并声明我个人没有它的使用实例。有些人评论说Axure实际上是他们的首选工具,所以我想让它成为合适的工具。我想引用罗伯特·米恩的一段精彩的评论,它很好地总结了这一点:Axure是一款集多种功能于一身的工具。事实上,一些大公司——它们维护着一个高度受控的软件列表——将其作为设计师利用的唯一工具。幸运的是,正如你所提到的,Axure与这里描述的几乎所有其他工具一样强大……只要你成为高级用户,你就可以创建任何东西的原型。

总之,你可能不会使用它,因为你所处的环境中有其他可用的工具,并且你已经熟练地使用了它们,但是不要因此而低估Axure的功能。

Balsamiq(苹果,Windows XP):说实话,我只是在我的产品阵容中没有一个真正属于Balsamiq的位置。很长一段时间以来,它实际上一直是一个低保真度的原型应用程序,但我觉得你可以在这里提到的大多数其他应用程序中找到功能和特性。最重要的是,当你进入高保真度设计时,你在Balsamiq中投入的工作不会伴随你进入其他应用程序。

好吧,这个部分内容可能会很多。我会尽量保持简洁,因为已经有很多关于这些程序的文章了。Figma(浏览器,PC, Mac)已经成为我明确选择的设计工具。最重要的是,我可以在电脑上使用它。不过,我相信无论使用什么平台,它都有一些非常棒的特性。

多个路径离开单个节点?是的,!

我喜欢Figma的钢笔工具。这是一个小工具,但它是我最喜欢的工具,尤其是当我想绘制像素比例。我还喜欢Figma处理组件覆盖的方式。Figma让你可以简单地修改层,并将你的更改视为覆盖,而不是在对话面板中列出无穷无尽的文本框列表。它比Sketch简单,并且允许你进行更复杂的更改。辉煌。除此之外,Figma还有很棒的协作工具。事实上,我甚至不会称它们为工具

Figma中协作就像打开文件并进行更改一样简单。因为它是基于云的,文档中的每个人都可以动态地看到正在发生的事情。这是完全无缝的,有点神奇。最后,Figma的原型设计和共享工具对于一个不是为这个目的而构建的程序非常有用。原型是基于HTML的,因此你可以与任何人共享它们。Did I mention Figma is free for a single user?提到过Figma是对单个用户免费的吗?

重量级选手Sketch(Mac)。Sketch在屏幕设计中如此受欢迎,这已经不是什么秘密了。当Bohemian推出这种产品时,市场上根本没有类似的产品。由于大量的插件和资源支持,Sketch是UX软件无可争议的王者。

最近,Sketch的开发速度明显放缓。上一个主要的更新引入了一个基于InVision的原型设计功能,虽然实现得很好,但却牢牢地把你放在了InVision的口袋里。此外,经过多年的发展,Sketch仍然局限于Mac平台,这意味着如果有人想在办公室里使用PC,那你就太不走运了。

幸运的是,Icons8的“ Lunacy”(PC)能够打开Sketch文件。它并不完美——实际上,它已经相当破损了——但这已经很棒了,如果你在 Lunacy中开始设计,你永远不会遇到问题。Lunacy有一个公共特性请求列表,所以你可以看到下一个特性可能是什么。一旦精神错乱有了象征的支持,它可能是一个真正可行的选择。

Adobe XD (Mac, PC):我一直对Adobe产品持怀疑态度。我最喜欢的一些应用程序是Adobe构建的,比如PhotoshopAfter Effects。然而,他们的许多新应用程序都是以非常早期的形式发布的,缺少主要功能。

Adobe XD确实是在一个非常轻量级的状态下启动的,但是现在已经开始变得非常非常好了。它非常快,有一些很棒的功能Adobe也有一些很棒的设计插件包。它还在原型工具中支持一些复杂的动画,这很好。非常重要的是,它能完美地导入其他Adobe产品了(还可导入Sketch文件)。

编辑:值得一提的是,Adobe XD通过Creative Cloud支持一些基本的切换和版本控制功能,并且(正如hollveticakinly在评论中指出的)完全支持导出到Zeplin(如果你已经设置了一个原型,它甚至可以保持它的可点击性)。我仍然推荐这些任务专用的工具,但是如果你已经为CC付费,你可能会发现它很有用!

InVision Studio:Sketch差不多市场营销做得很多单产品没有什么特色。也许对一个新产品来说有点苛刻InVision Studio已经有了一个非常的开始。

到现在为止你有一个很棒的创意,背后有一些好的想法不管你是在做自由职业,在设计工作室,还是在公司的设计团队团队,下一步都是推销你的想法。公平地说,很多设计师对此并不担心。也许有人会为你展示它,或者你认为你的工作本身就说明了一切。然而,最终,你会有一个只有你能卖出去的好主意。

我使用的工具是苹果的Keynote (Mac)。在公司工作的人有个小建议:商务人士喜欢幻灯片。

神奇的移动功能有点令人费解。

Keynote通过一些非常简单、非常强大的动画工具将自己与PowerPoint和谷歌幻灯片区分开来。你可以利用这些优势,真正讲述你的设计背后的故事。

备选方案:PowerPoint (PC, Mac),谷歌幻灯片(浏览器)Prezi(浏览器)就像版本控制一样,文档也是设计工作中越来越常见的要求。这是记录关于你的设计的所有必要细节的行为

为此,我的团队使用了Confluence。它本质上是一个具有高级权限特性的内部wiki。设计人员可以放置屏幕和用户流,业务团队可以添加验收标准,开发人员可以使用页面作为资源来进一步理解设计的逻辑和意图。

我不喜欢Confluence,由于笨拙的用户界面和复杂的导航,它可能是本文中我最不喜欢的产品。尽管如此,它确实完成了我们需要它做的工作,并在我们的过程中发挥了重要作用。

 

如果不提我个人最喜欢的:code .io(浏览器),那么我就没有必要讨论文档了。Coda的使命是用一个一站式的商店来替换所有的文档应用程序,这个商店可以支持丰富的文本文档、公式、表格、图表、sprint board等等。它已经成为我个人项目的首选,一旦它结束了封闭测试阶段,我认为它将会是一个巨大的成功。

与其提供特定的替代方案,我只想说:文档是团队工作中非常重要的一部分。这意味着你的想法、想法和意图在你不代表它们的时候仍然存在。在交接给其他团队成员的过程中,它也会减少摩擦。有无数种方法可以做到这一点,但最重要的是你要去做。

当我们在这里的时候,我想简要地提一下:Overflow:我还没有花很多时间来研究它,但是它是一个非常有前途的应用程序,可以做一些非常酷的事情。该应用程序的前提是将你的屏幕构建为一个用户流程图,可以方便地呈现给利益相关者,或者用作设计资源。值得一看!

嘿,我们成功了!我们已经做了一些艰苦的工作,建立了一些了不起的东西,我们的主要利益相关者说了一句神奇的话:我们什么时候可以拥有它?

首先,让我们回到我们的老朋友Zeplin根据项目的不同,你的团队可以使用Zeplin的几种方式。这可能是保持团队风格指南的简单方法,或者是存储和检索关键资产的好地方。

听着,我不是程序员,但我很确定他们喜欢代码片段。

如果你开始研究Zeplin的更高级的开发人员特性,它的闪光点就出来了;像为设计资产导出代码片段或以多种分辨率导出资产这样的事情可以真正加快开发过程,这意味着开发人员不必为了获得所需的资源而追赶你。

为此我们还要再次提到InVision。InVision的实现比Zeplin简单一些——你可以简单地突出显示任何对象或组,而InVision将为你提供该对象或组的属性。

只是标准的111pt填充。什么?只是我吗?

这是确定大小、文本样式和颜色的好方法。你还可以导出资源,但是导出设置需要在Sketch中预先指定(Zeplin也有相同的限制)InVision还支持一些代码导出功能,但你可能需要询问开发人员是否希望在这方面比较ZeplinInVision

Avocode:值得我们大声疾呼,因为它支持的不仅仅是草图;它还支持Figma、Adobe XD和Photoshop。它还用于从设计中生成代码。我对Avocode的经验有限,但是如果开发人员交接是你工作的主要部分,那么Avocode可能值得研究一下。

综上所述,我们已经涵盖了从早期概念到最终交付的整个设计过程。希望你已经发现了一些应用程序,它们将以某种方式增强你的工作效率

这篇文章有一个很大的遗漏——研究。说实话,我在一个有敬业研究人员的团队中工作,所以我没有包括这一步。它是任何优秀用户体验中非常非常重要的一部分,尤其是在设计和开发的早期阶段。

另一个注意事项是,这里列出的许多工具都是免费的,但是如果你同时处理多个项目或团队,那么它们的价格会非常昂贵,而且速度非常快。如果你有一些很棒的免费/便宜的选择,我真的很想听听。

作者:克里斯·巴姆·哈里斯

翻译:闫麒麟  黄强  任长勋

责编:王扬  闫麒麟

编辑:黄强  任长勋

原文地址:https://blog.prototypr.io/ux-design-tools-for-2018-for-mac-and-pc-320a7be230c9

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注