跳到主要内容

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

The best web design tools: Photo by Jeff Sheldon on Unsplash
(图片来源:杰夫·谢尔顿在“不溅”杂志上的照片)

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


现在有很多很棒的网页设计工具可供使用。不管你想做什么,很可能有一个专门为你设计的工具。随着新的网页设计工具一直在发布,当谈到我们的工具可以做什么时,条形图不断上升。

尽管所有这些对于网络专业人士来说都是个好消息,但这确实意味着越来越难选择适合你和你的工作流程的工具。在这篇文章中,我们总结了目前我们认为最好的网页设计工具。这些工具将帮助你变得更加流线型,创造性和创造性的工作。

为了保持清晰,我们将工具分成了几个部分。在这个页面上,你会发现完整的网页设计软件,然后是更基本的专用线框工具,以及网页设计框架和库。在第二页,有一系列更小,更具体的工具,从处理图像到涉足AR和VR。

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

完整设计工具

01.InvisionStudio

InVision interface

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

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

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

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

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

更重要的是,你可以停止为多个设备创建大量的图板这个时间保护程序为您提供了更多思考您的设计的空间。

02.草图

草图已经取代Photoshop成为许多网页设计师选择的UI设计工具[Image:bohemian编码]

波西米亚编码草图是一个流行的网页设计工具,侧重于矢量用户界面的设计。草图使您能够创建高保真度的接口和原型。它的一个重要特性是符号,它使您能够设计UI资产和元素以供重用,从而帮助您保持接口的一致性。您可以轻松地将您的设计导出到可点击的原型中,并使用矢量图和图形。如果您是Invision用户,请确保您检查了Craft插件。

虽然Sketch使用起来非常简单,而且非常可信,但据说仍然有许多网页设计人员依赖Photoshop进行UI设计(尽管发布了Adobe XD,Adobe的原型设计和线框工具 - 新增功能之一创意云)。

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上使用。如果您想要与那些不使用OSX的用户共享Sketch文件,您需要探索更多的软件或转换,或者使用平板JPGS。别错过我们使用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.亲和力设计师

web design tools: Affinity Designer on iPad

亲和力设计器在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

Proto.io interface

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

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

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

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

09.巴尔萨米克

Balsamiq interface

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

如果快速线框是你要找的Balsamiq工作室是个强有力的建议。您可以轻松地为您的项目快速开发结构和布局。拖放元素使生活变得更简单,并且可以将按钮链接到其他页面。通过线框,您可以快速开始规划您的接口,并与您的团队或客户端共享它们。

10.ProtoPie

ProtoPie interface

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

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

11.MockFlow

MockFlow

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

MockFlow是一套应用程序,对项目过程中的许多任务都很有帮助。如果您很乐意单独创建线框,那么请看一看MockFlow...这是伟大的工作,最初的想法,并允许你建立基本的布局,这有时是你所需要的所有想法到一个体面的事情。

线框专业应用程序是一个很好的原型选择,供您使用,特别是如果您正在测试一些新的想法。如果你要找的是一些稍微不同的东西,请看我们的“顶部总结式”线框工具

12.Adobe Comp

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

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

13.Flinto

Flinto interface

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

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

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

14.Axure

Axure interface

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

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

15.JustinMind

Justinmind

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

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

16.流体

Fluid interface

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

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

设计框架和库

17.自助

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

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

在编写本报告时,最新版本(4.3.1,发布于2019年2月)是一个相对较小的更新,它建立在V4.2.1中首次引入的一系列新功能的基础上,包括一个新的旋转加载组件、一个用于显示通知的新TOS组件、一个新的IOS样式开关、旋转木马组件中的触摸支持等等。找到我们的指南中最好的免费Bootstrap主题

18.iotaCSS

IotaCSS是一个与众不同的CSS框架

IotaCSS是一个CSS框架,它是特意为设计不可知论而设计的。它是由顾问前端架构师Dimitris Psaropoulos创建的,他认为其他CSS框架对他工作的设计师施加了很多限制。这迫使他要么在上面写很多代码,要么让设计者妥协。因此,相反,他创建了自己的框架,这个框架的工作方式有点不同。

虽然大多数CSS框架都是一个单元,但iotaCSS是一组不依赖于彼此的独立,小巧和灵活的模块。您可以单独使用一个,也可以将它们组合起来构建更复杂的用户界面。

19.Vue.js

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

没有JavaScript框架的Web工具列表是什么?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应用程序。

20.模式实验室

web design tools: Pattern Lab screengrab

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

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

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

21.ally.js

web design tools: ally.js

不要忽视可访问性--使用所有的.js(图片来源:Ally.js)

没有至少一个辅助功能工具,任何Web开发工具列表都不会完整。可访问性是设计和开发中经常被忽视的一个方面,ally.js可以为您简化它。

Ally.js是一个JS库,它使您能够很好地控制可聚焦和不可聚焦的元素。例如,使用它的API,您可以防止模态窗口外的元素在模态关闭之前接收焦点。您还可以准确地找出哪些元素是可聚焦的或哪些是可选项的,并识别阴影DOM中的焦点更改。

另外两个强大的功能是能够确定焦点变化的方式(键盘,鼠标等)以及元素在屏幕上是否可聚焦和物理可见(这有助于避免页面滚动)。

22.材料设计

web design tools: material design

材料设计是谷歌的一套原则(形象荣誉:材料设计)

材料设计是谷歌的视觉语言。它承诺将优秀设计的经典原则与科技创新相结合,为您的品牌创造一个具有凝聚力和灵活性的基础。

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



翻译字数超限