跳到主要内容

52个网页设计工具,帮助你在2020年更聪明地工作。

The best web design tools: Photo by John Kappa on Unsplash
(图片来源:约翰·卡帕在“不溅”上的照片)

使用代码在优质图像上节省15%15 ISTOCK

现在有这么多伟大的网页设计工具。不管你想在你的网页设计工作流程中解决什么问题,很可能有人已经为它做了一个工具,不管它是一个独立的实用工具,还是一个更大的应用程序中的一个功能。尽管网页设计社区从早期开始就发生了很大的变化,但是仍然有一种分享你的工作的精神,所以很多这些伟大的工具都是免费的。

工具的扩散是一个巨大的好处,但它也会让你感到被宠坏了选择,因为有很多方法来做同样的事情。在本文中,我们总结了目前我们认为最好的工具。当然,它并不是一个详尽的列表,但是希望通过缩小它并突出一些最好的列表,我们将使您更容易为您的工作流程组合正确的工具包。

由于这是一个相当长的列表,我们已经将这些工具分成了几个部分,以使文章更容易浏览。在这个页面上,你会发现完整的网页设计软件,然后是更基本的专用线框工具,以及网页设计框架和库。在第二页,有一系列更小,更专业的工具,从处理图像到涉足AR和VR。

当你在这里的时候,你可能想看看最佳网络托管服务最佳网站建设者2020年

GenerateJS banner

点击图片,找出更多,并购买您的票。(图像信用:未来/Toa Heftiba,Unspash)

完整设计工具

01.InvisionStudio

InVision aims to be the only UI tool you'll ever need

Invision的目标是成为你唯一需要的UI工具(图像信用:Invision)

InVision Studio目标是涵盖所有的基础,成为你唯一需要的UI工具。它附带了大量功能,帮助您创建漂亮的交互界面,包括快速原型化、响应性和协作性设计的工具,以及与设计系统一起工作的工具。

如果你已经在使用像Sketch这样的工具Invision,那么在功能上有相当多的交叉。然而,Studio的功能在于原型部门,特别是当您的设计涉及动画时。快速原型将允许您创建复杂和富有想象力的过渡,使您真正达到您所希望的动画水平。只需了解如何让UI查看其转换的开始,然后设计最终结果。InvisionStudio为您解决其余的问题。

在此基础上,您可以通过许多手势和交互创建这些自定义动画和转换,如滑动、单击和悬停。

完成之后,通过Invision导出您的原型,并邀请人们进行协作。您可以在预期的平台上查看您的项目--这是探索和测试您的设计的好方法。然后,客户端就可以对设计进行评论了。

更重要的是,您可以停止考虑为多个设备创建大量的图板-Studio的布局引擎将自动将您的设计调整到任何屏幕。这个时间保护程序为您提供了更多思考您的设计的空间。

02.草图

草图已经取代Photoshop成为许多网页设计师选择的UI设计工具[Image:bohemian编码](图像信用:波西米亚编码)

波西米亚编码草图是最广泛使用的Web设计平台之一;它是一个非常强大的基于向量的工具,可以以协作的方式构建接口和原型。素描是专门为制作网站和应用程序而建的,因此没有不必要的功能凌乱你的界面,而且它比范围更广的软件更快、更高效。

Rory Berry,创意总监Superrb+$, made the switch to Sketch in 2017, and highly recommends it. “Compared to Photoshop, sorting all your documents and making revisions on Sketch is much easier,” he begins. “Sketch has small documents whereas Photoshop has large ones. Due to it being a vector-based app, the file sizes are dramatically smaller compared to Photoshop.”

而这还不是全部。 “Sketch中的内置网格系统非常棒,使界面设计更加容易。我认为整体用户界面和最小的感觉使设计更加清晰,用户友好。相比之下,Photoshop似乎非常复杂。“

社区提供了数以百计的素描插件使您的设计工作流程更容易和更顺畅。

Sketch的缺点是它只能在Mac上使用,并且没有支持其他操作系统的计划。这一直是一个问题,因为设计人员通常希望与使用Windows的开发人员共享.草图文件。幸运的是,现在有一个名为“SketchforWindows”的应用程序精神错乱将打开和编辑.草图文件,并消除大部分这种痛苦-在出口和转换这篇文章的章节。

不要错过我们的使用Sketch的重要提示

03.AdobeXD

AdobeXD有一个轻巧的接口,使您可以轻松地进行原型。(图像信用:Adobe)

AdobeXD为AdobeCreativeCloud套件下的数字项目提供了最佳环境。如果你是一个对XD很感兴趣的Adobe用户,你可能不会觉得这个界面很像“Adobe”--一开始就是这样。然而,它确实与其他领先的工具相提并论。如果您已经在Photoshop中设计了一段时间,这也是一个飞跃,但是对于UI设计来说,这是非常值得的。

这个矢量设计和线框工具不断地变得更好,增加了对语音原型确保工具能够跟上UX的最新趋势。XD包括绘图工具、使您能够定义非静态交互的工具、移动和桌面预览以及用于提供设计反馈的共享工具。它允许你选择一个特定于设备的图板大小来启动一个项目,你甚至可以导入一个流行的用户界面套件,例如谷歌的材料设计。

关键是,AdobeXD与CreativeCloud的其他部分集成,这意味着您可以轻松地从Photoshop或IlluStrator导入和使用资产。如果您已经使用了其他Adobe应用程序,用户界面会感觉很好而且熟悉,不应该呈现太多的学习曲线。

安德烈罗布+$, design director at Robu Studio in Barcelona, is among its fans. "For quick mockups it's great,” he says. "It’s a very light interface, with lots of photos loaded in, and great for moodboards. The prototyping is very useful to show clients how stuff works, especially because you can push the content online right away."

Ellis Rogers,平面设计师接待有限公司+$also recommends it. "When the design/prototype or wireframe is complete, Adobe XD allows you to very quickly select elements and create page transitions for a working prototype, which can be shared via a link," he explains. "The link also allows you to gather feedback per page, keeping it all organised. The link can be updated within Adobe XD so the client can always see the latest version without having to worry about incorrect versions. It's an absolute joy to work with."

04.漫威

Marvel

Marvel提供了一个集成的用户测试工具。(图片信用:漫威)

Marvel是另一个Web设计工具,它非常适合于快速生成想法、改进界面以满足您的需要,以及构建原型。奇迹提供了一种非常简洁的页面构建方法,允许您通过原型来模拟您的设计。有一些很好的集成,可以将您的设计插入到您的项目工作流中。有趣的是,有一个集成的用户测试功能,这仍然是相当不寻常的网页设计工具景观。它也是在线的,所以不需要下载任何东西。

05.菲格玛

Figma允许您实时地设计、原型并与其他设计人员收集反馈[Image:Figma]

FIGMA是一种界面设计工具,允许多个设计人员实时协作.当项目中有多个参与塑造结果的涉众时,这是非常有效的。它可以在浏览器或Windows、Mac或Linux上使用,并且有免费版本和付费版本,这取决于您使用它的用途。

以下是它的一些突出特点:

+$“Figma has a similar USP as Sketch, with the exception of being cross-platform,” explains frontend designer本杰明读...“当我用它创建几个图标时,我发现工作流非常流畅。我没有花时间学习,也有协作的额外好处:你可以在应用程序中与其他人分享图形。“

+$“I’ve been trying to switch to Linux for my work and sometimes we use Windows, so Figma makes sense to me from a practical standpoint,” he adds.

自由职业者内容作家和艺术家大卫伊斯特伍德还有一些关于菲格玛的好话要说。“当我们需要快速模拟MVT时,它也是一个非常有用的工具;有时还会对现有布局进行小规模的添加。我们喜欢您能够快速为桌面、平板电脑和移动设备创建设计。”

06.亲和力设计师

Affinity Designer is as powerful on iPad as it in on desktop [Affinity Designer]

亲和力设计器在iPad上和桌面上一样强大[亲和设计师](图像信用:衬线)

“塞里夫的亲和设计师+$has been dubbed the 'Photoshop killer' by some, and it's easy to see why," says product designer丹爱德华兹...“有一些我真正喜欢的功能,包括可调的、无损的图层。这基本上意味着你可以调整图像或矢量而不损坏它们。”

“1,000,000%的变焦只是幸福;它在使用矢量艺术时特别有用,因为你可以真正接近。撤消和历史功能也非常方便:亲和力让你可以回到8000多步!”

“当涉及到设计时,用户界面感觉很熟悉。当从Photoshop移动时,每个人似乎都想重新开始,这可能构成真正的挑战。亲和力所做的是保持布局熟悉,同时收紧一切并隐藏干扰我很容易直接跳进去设计。“

亲和设计器也是可用的。对于iPad。请注意,这不是您可能期望的缩小版移动应用程序版本:它与您在桌面上获得的完整版本相同。

不要错过我们的使用指南像素角色出口人物钢笔工具亲情设计师。还请注意,Serif还可以选择Photoshop,亲和照片和InDesign替代方案,Affinity Publisher;所有这些都很好地融合在一起。

模型和原型

07.UXPin

UXPin: web design tools

UXPin允许您使用交互式状态和逻辑进行原型。(图片信用:UXPin)

我们列表中的下一个网页设计工具是UXPin。这个专用的原型应用程序适用于Mac、Windows或浏览器。使用大多数其他设计工具,您只能通过链接图板上的不同元素来模拟交互,UXPin可以更接近代码,并使您能够使用交互式状态、逻辑和代码组件。

还有iOS、材料设计和Bootstrap的集成元素库,以及数百个自由图标集在路上帮你。UXPin最近还引入了可访问性特性,以确保您的设计与WCAG标准保持一致,我们对此表示赞赏。

API请求是UXPin交互功能的最新增加。该功能使您可以在设计工具中直接与您的产品进行“对话”的原型应用程序--不需要代码。它的工作方式是允许您向外部API发送HTTP请求。

您可以在UXPin免费,如果适合的话,您可以切换到每月付费订阅(可以获得团队成员资格)。UXPin最近改进了它与Sketch的集成,所以如果您是Sketch迷,那么它可以引入到您的工作流中,因为它的原型功能有限。

08.Proto.io

This tool helps you create lifelike prototypes

此工具帮助您创建逼真的原型。(图片来源:Proto.io)

Proto.io是一个顶级的应用程序,它允许以粗糙的想法开始,以完全成熟的设计结束的栩栩如生的原型。该工具还为您的项目提供了一系列可能性,包括详细的和自定义的矢量动画。

你可以先用手绘的方式开发最初的想法,然后把它们加工成线框,然后用高保真的原型完成它们。如果您想使用其他工具进行设计,Sketch和Photoshop插件会有所帮助,但是Proto.io很好地处理了端到端的设计过程。其他功能--例如用户测试--将有助于验证您的设计。

有许多很棒的演示程序可以开始使用,您可以真正看到这种端到端解决方案可以很容易地取代目前存在的许多工具。Proto.io最近增加了一些新特性--包括资产管理器、开发人员指南和记录原型的能力--使这个工具与许多更好的原型工具保持一致。

09.巴尔萨米克

Balsamiq interface

Balsamiq非常适合快速线框。(图片来源:Balsamiq)

如果快速、高效的线框是你想要的Balsamiq工作室是个强有力的建议。您可以轻松地为您的项目快速开发结构和布局。拖放元素使生活变得更简单,并且可以将按钮链接到其他页面。通过线框,您可以快速开始规划您的接口,并与您的团队或客户端共享它们。Balsamiq自2008年以来就一直在发展,并以其低保真度、快速、专注的方式而自豪。

10.ProtoPie

Start playing around with native sensors using this tool

使用此工具开始使用本机传感器。(图片来源:ProtoPie)

Web设计工具ProtoPie允许您创建复杂的交互,并接近您的设计的理想结束功能。也许最突出的特点是能够控制你的原型中的智能设备的传感器,如倾斜、声音、指南针和3D触控传感器。根据您的项目,这是一个很好的工具,对于那些想要包含本地应用程序的功能。它像饼一样简单,不需要代码。

最近发布的4.2版包含两个新的高度要求的特性:现在您可以将可编辑的SVG添加到您的场景中,并在选择时立即找到两个层之间的距离。

11.MockFlow

MockFlow

这个工具很适合模拟粗略的想法。(图片信用:MockFlow)

MockFlow是一套用于线框和规划网站的应用程序。WireFraPro帮助你提出你的最初想法,然后迭代直到它是正确的-有一个UI修订跟踪器来帮助你这一点。它有数千个预先构建的组件和布局,您可以根据自己的需求进行调整,并且有一个预览模式将您的工作呈现给同事和客户。

一旦您完成了您的线框,其余的套件可以帮助您规划您的网站的其他方面,包括信息架构,制作风格指南(这可以自动生成),并通过签署过程。

如果你想看一些其他的选择,看看我们的总结顶部线框工具

12.Adobe Comp

Adobe Comp是一个了不起的网页设计工具,为iPad,协助创建线框,原型和布局概念的网页。一款创意云驱动的智能草图,如果你愿意的话。它有许多移动和网络布局的基本模板,如果你喜欢的话,甚至打印,你可以通过绘制直观的形状来创建快速占位符来表示图像、文本等等。COMP将粗略的轮廓转换为直线、圆圈和矩形。

令人困惑的是,Adobe认为不适合将直接导出到xd-疯狂!-尽管长期的要求这似乎永远都在被审查。然而,导出到Photoshop是内置的(以及IlluStrator和InDesign),一旦在无处不在的图像编辑器中对您的模型进行了调整,您就可以从它导出到XD。尽管Adobe爱好者线框用户之旅中有这个不受欢迎的额外步骤,但Comp完全值得被列入这个列表,因为它具有随时随地的功能、易用性和令人印象深刻的用户界面。

13.Flinto

Flinto interface

设计前后状态,Flinto将为您计算出差异和动画。(图片来源:Flinto)

Flinto是一个设计工具,允许您在设计中创建独特的交互。您可以使用许多手势,并通过设计前后状态进行简单的转换。Flinto简单地为你解决差异和动画-超级有帮助。

请记住,这是只iOS,但它会感到熟悉,当你开始使用它。在线文档可以帮助您在路上,从Sketch和Figma导入也很简单。

14.Axure

Axure interface

具有动态数据的线框复杂接口(形象信用:Axure)

Axure一直是最好的线框工具在市场上,伟大的复杂项目,需要动态数据。有了Axure,您就可以真正专注于模拟那些既具有技术又需要对结构和数据进行关键关注的项目。

Axure的交接过程包括创建彻底的规范,帮助开发人员创建与您的设计相匹配的最终产品。

15.JustinMind

Justinmind

JustinMind与诸如Sketch和Photoshop等工具集成(图片来源:JustInMind)

Justinmind将有助于原型,并与其他工具,如Sketch和Photoshop集成。您可以选择您的互动和手势,以帮助组装您的原型。它还包含UI工具包,因此您可以快速地将屏幕放在一起,而且它也具有响应性。

16.流体

Fluid interface

流体非常适合快速的用户界面设计。(形象信用:流动)

流体是一个简单和直观的工具,以建立快速原型和工作设计。它打包了一些很好的开箱即用的资产,让你有了快速的原型。升级后,可以很容易地将自己的符号与自己喜欢的UI资产组装在一起。该工具提供了非常快速的UI设计,并为高保真度原型和低保真度原型提供了可用的资产。

17.相互作用

Interplay helps to keep everyone on the same page [Image: Interplay]

交互有助于保持每个人都在同一个页面上[图像:交互](形象信用:相互作用)

相互作用是一个原型系统,它可以改善团队中的沟通和协作,特别是设计师和开发人员之间的交流和协作。它的构建考虑了设计系统,并与您的代码集成,生成易于跟踪和自动更新的文档。保持每个人都在同一个页面上并保持最新的状态是一个核心功能--所以当您的代码更新时,您的设计也是如此。Interplay仍然处于测试阶段,但已经与许多大型的设计和开发工具一起工作。

设计框架和库

18.自助

旧的最爱Bootstrap有一些强大的新更新

引导当然不是一个新的工具,但它已经革命性的发展,并继续塑造我们如何建立在网络上的东西。

在编写本报告时,最新版本(4.4.1,发布于2019年11月)引入了新的响应容器,这些容器可以流动到某个断点,以及新的.row-cols类,用于高效地指定跨断点的列数。

引导程序最近也发布了自己的开源图标库,自举图标,这是设计用于引导组件的。

找出我们的指南中最好的免费Bootstrap主题

19.启动3

Make a Bootstrap site without writing code [Image: Designmodo]

在没有编写代码的情况下创建一个引导站点[Image:Designmodo](图片信用:Designmodo)

如果你喜欢引导,但不想深入到原始的东西,启动3是一个简单的方法;它是一个在线应用程序,内置模板和主题的基础上,创建12栏网格的引导4网站。您可以在不使用拖放界面编写代码的情况下构建站点,但是您需要一些HTML和css知识才能完成任务。

20.Vue.js

不习惯复杂的JavaScript库?vue.js对你来说是完美的[图像:vue.js]

Vue.js是一个用于构建用户界面的框架,并使用虚拟DOM。顾名思义,Vue的核心库集中在视图层。

查看一个代码示例,该示例取自Vue的文档,它利用用户输入并演示了库的优雅。我们将从HTML开始:

{{ 信息 }}

注意,自定义v-on处理程序调用ReverseMessage方法。这是JavaScript:

var myApp = new Vue({el:'#example',data:{message:'Hello Vue.js!'},方法:{reverseMessage:function(){this.message = this.message.split('') .reverse()。join('')}}});

此示例使用数据填充段落,并定义ReverseMessage方法。VUE对于那些对复杂库缺乏经验的人来说是很棒的,但也有一些插件可以帮助开发复杂的单页web应用程序。

21.模式实验室

web design tools: Pattern Lab screengrab

模式实验室基于原子设计[图像:模式实验室]

Pattern Lab是由Dave OIsen和Brad Frost创建的漂亮的图案驱动设计工具。它基于的概念原子设计,它说你应该将你的设计分解成最小的部分 - 原子 - 并将它们结合起来形成更大的,可重复使用的成分 - 分子和生物 - 然后可以变成可用的模板。

虽然它的核心是一个静态站点生成器,它将UI组件连接在一起,但是还有更多的模式实验室比那更重要。它与语言和工具无关;它使您能够相互嵌套UI模式并使用动态数据进行设计;它具有与设备无关的视口调整工具,以帮助您确保设计系统完全响应;而且它是完全可扩展的,因此您可以确保它将扩展以满足您的需要。

22.材料设计

Material Design is a set of principles from Google [Image: Google]

材料设计是谷歌的一套原则[图片:谷歌](图片来源:谷歌)

材料设计这是Google的一种视觉语言,旨在将优秀设计的经典原则与技术和科学的创新结合起来,为您的网站创建一个具有凝聚力和灵活性的基础。

使用材料设计框架创建的网站和应用程序看起来很现代,用户也很熟悉,所以人们会发现使用你的产品很容易。有很多工具可以帮助这个设计系统;单击导航栏上的参考资料可以找到它们。

GenerateJS banner

(图像信用:未来/Toa Heftiba,Unspash)

加入2020年4月我们在GenerateJS的JavaScript超级明星阵容--帮助您构建更好的JavaScript的会议。现在预订Generateconf.com 

下一页:专门解决任何问题的网页设计工具。



翻译字数超限