跳到主要内容

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

The best web design tools: Photo by Jeff Sheldon on Unsplash
+$(Image credit: Photo by Jeff Sheldon on Unsplash)

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


+$There are plenty of great web design tools available right now. No matter what you're trying to do, chances are there's a tool designed specifically to help you out. With new web design tools being released all the time, the bar is continually rising when it comes to what our tools can do.

+$While all this is great news for web professionals, it does mean it's increasingly difficult to pick the tools that will suit you and your workflow. In this article, we've rounded up what we think are the best web design tools available right now. These tools will all help you become more streamlined, inventive and creative in your work.

+$To keep things clear, we've separated the tools into sections. On this page you'll find complete web design software, followed by more basic dedicated wireframing tools, and web design frameworks and libraries. On page two, there's a range of smaller, more specified tools for everything from working with images to dabbling in AR and VR.

+$While you're here, you might want to check out roundups of the最佳网络托管服务最佳网站建设者+$for 2019.

+$Complete Design Tools

+$01. InVision Studio

InVision interface

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

+$(Image Credit: InVision)

InVision Studio+$aims to be the way to be the only UI tool you’ll need. It comes with a bucketload of features to help you create beautiful interactive interfaces, including tools for rapid prototyping, responsive and collaborative design, and working with design systems.

+$If you’re already using InVision with tools like Sketch, there’s quite a bit of crossover in features. However, Studio’s power lies in the prototyping department. Rapid prototyping will allow you to create complex and imaginative transitions, enabling you to really achieve the level of animation you desire. Simply figure out how you want to your UI to look at the start of its transition, and then design the end result. InVision Studio works the rest out for you.

+$On top of that, you can create these custom animations and transitions from a number of gestures and interactions like swiping, clicking, and hovering.

+$When you’re all done, export your prototypes through InVision and invite people to collaborate. You can view your project on its intended platform – a great way to explore and test your design. Clients will then be able to comment right onto the design.

+$To top that, you can stop thinking about creating numerous artboards for multiple devices – responsive design can be achieved with a single artboard. This timesaver gives you space to think so much more about your design.

02.草图

+$Sketch has replaced Photoshop as the UI design tool of choice for many web designers [Image: Bohemian Coding]

+$Bohemian Coding's草图+$is a popular web design tool focused on vector UI design. Sketch enables you to create hi-fidelity interfaces and prototypes. One of its great features is Symbols, which enable you to design UI assets and elements for reuse, helping to keep your interfaces consistent. You can easily export your design into a clickable prototype and work with vector drawings and graphics. If you are an InVision user, make sure you check out the Craft plugin.

+$Although Sketch is wonderfully simple to use and is a highly trusted, anecdotally it seems there are still a lot of web designers relying on Photoshop for UI design (and that's despite the release ofAdobe 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似乎非常复杂。“

+$The community offers hundreds of素描插件+$to make a your design workflow easier and smoother. One potential downside is that Sketch is only available on Mac. If you want to share Sketch files with those not using OS X, you'll need to explore additional software or conversions, or work from flat JPGs. Don't miss our使用Sketch的重要提示

+$03. Adobe XD

+$Adobe XD has a light interface that allows you to prototype with ease

+$(Image Credit: Adobe)

+$Adobe XD offers the best environment for digital projects under the Adobe Creative Cloud suite. If you’re a keen Adobe user and new to XD, you may not find the interface very ‘Adobe’-like to begin with. However, it does stack up to the other leading tools out there. It is a jump if you’ve been designing in Photoshop for a while too, but very worth it for UI design.

+$This vector design and wireframing tool keeps getting better, with additions such as support for语音原型+$ensuring the tool can keep up with the latest trends in UX. XD includes drawing tools, tools that enable you to define non-static interactions, mobile and desktop previews, and sharing tools for giving feedback on designs. It allows you to select a device-specific artboard size for starting a project, and you can even import a popular UI kit, for example Google’s Material Design.

+$Crucially, Adobe XD integrates with the rest of Creative Cloud, which means you'll be able to import and work with assets from Photoshop or Illustrator easily. If you already use other Adobe apps, the UI will feel nice and familiar and shouldn't present too much of a learning curve.

安德烈罗布+$, 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, graphic designer at接待有限公司+$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 comes with an integrated user testing tool

+$(Image Credit: Marvel)

+$Marvel is another web design tool that’s great for producing quick ideas, refining an interface to how you want it to look, and building prototypes.奇迹+$offers a really neat way of building pages, allowing you to simulate your design through a prototype. There are some wonderful integrations for inserting your designs into your project workflow. Interestingly, there's an integrated user testing feature, which is still fairly unusual in the web design toolscape. It’s all online too, so no need to download anything.

+$05. Figma

+$Figma allows you to design, prototype and gather feedback with other designers in real time [Image: Figma]

FIGMA+$is an interface design tool that enables multiple designers to collaborate in real-time. This is very effective when you have multiple stakeholders in the project that are involved in shaping the outcome. It’s available in the browser, or on Windows, Mac or Linux, and there are both free and paid versions depending on what you use it for.

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

+$“Figma has a similar USP as Sketch, with the exception of being cross-platform,” explains frontend designer本杰明读+$. “When I used it to create a couple of icons I found the workflow incredibly smooth. It took me no time to learn and had the added benefit of being collaborative: you can share graphics with others within the app."

+$“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.

自由职业者内容作家和艺术家大卫伊斯特伍德+$also has good things to say about Figma. "It's also been a really useful tool when we've needed to quickly mock MVTs; sometimes small additions to an existing layout. We love that you can quickly create designs for desktop, tablet and mobile."

+$06. Affinity Designer

web design tools: Affinity Designer on iPad

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

+$"Serif's亲和设计师+$has been dubbed the 'Photoshop killer' by some, and it's easy to see why," says product designer丹爱德华兹+$. "There were a few features I really enjoyed, including adjustable, nondestructive layers. This essentially means you can adjust images or vectors without damaging them.

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

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

+$Affinity Designer is also available对于iPad。请注意,这不是您可能期望的缩小版移动应用程序版本:它与您在桌面上获得的完整版本相同。

不要错过我们的使用指南像素角色出口人物钢笔工具+$in Affinity Designer. Also note that Serif also makes a Photoshop alternative,亲和照片和InDesign替代方案,Affinity Publisher;所有这些都很好地融合在一起。

+$Mockups And Prototypes

+$07. UXPin

UXPin: web design tools

+$UXPin lets you prototype with interactive states and logic

+$(Image Credit: UXPin)

+$The next web design tool in our list is UXPin. This dedicated prototyping app is available for Mac, Windows, or in the browser. With most other design tools you can only mimic interactions by linking different elements on your artboard, UXPin gets closer to the code and enables you to work with interactive states, logic, and code components.

+$There are integrated element libraries for iOS, Material Design and Bootstrap, plus hundreds of自由图标集+$, to help you on your way. UXPin has also recently introduced accessibility features to ensure your designs stay in line with WCAG standards, which we applaud.

+$API Request is the latest addition to UXPin's Interactions capabilities. The feature enables you to prototype app that 'talk' to your products from directly within your design tool - with no need for code. It works by enabling you to send HTTP requests to an external API.

+$You can create your first prototype inUXPin+$for free, and if it suits you switch to a paid monthly subscription (team memberships are available). UXPin recently improved its integration with Sketch, so it could be one to introduce into your workflow if you're a Sketch fan that finds its prototyping capabilities limiting.

+$08. Proto.io

Proto.io interface

+$This tool helps you create lifelike prototypes

+$(Image credit: Proto.io)

Proto.io+$is a top application that allows for the inception of lifelike prototypes that begin with rough ideas and end with fully fledged designs. The tool also provides you with a range of possibilities for your projects, including detailed and custom vector animations.

+$You can start by developing initial ideas with a hand-drawn style, work them into wireframes, and finish them off with a high-fidelity prototype. The Sketch and Photoshop plugins help if you want to design using other tools, but Proto.io handles the end-to-end design process well. Other features – user-testing, for example – will help validate your designs. This is an all-in-one solution with a great number of trusted brands already using it.

+$There are a bunch of great demos to start playing with, and you can really see just how easily this end-to-end solution could replace a number of tools currently in place. Relatively recent additions, Proto.io has recently included an expanse of new features – including assets managers, developer guides, and the ability to record your prototype – bring this tool in line with many of the better prototyping tools.

+$09. Balsamiq

Balsamiq interface

+$Balsamiq is great for rapid wireframing

+$(Image Credit: Balsamiq)

+$If rapid wireframing is what you’re looking for thenBalsamiq工作室+$is a strong suggestion. You can quickly develop a structure and layouts for your projects with ease. Drag-and-drop elements make life easier, and you can link buttons to other pages. By wireframing, you can quickly start to plan your interfaces and share them with your team or clients.

+$10. ProtoPie

ProtoPie interface

+$Start playing around with native sensors using this tool

+$(Image Credit: ProtoPie)

+$Web Design ToolProtoPie+$allows you to create complex interactions and get close to your design’s ideal end function. Perhaps the standout feature is the ability to control the sensors of smart devices in your prototype, such as tilt, sound, compass and 3D Touch sensors. Depending on your project, this is a great tool for those that want to encompass native app features. It’s easy as pie and no code is required.

+$11. MockFlow

MockFlow

+$This tool is great for mocking up rough ideas

+$(Image Credit: MockFlow)

+$MockFlow is a suite of applications that are helpful for a number of tasks in a project process. If you’re happy to create wireframes alone, then take a look atMockFlow+$. It’s great for working on initial ideas and allows you to build basic layouts quickly, which is sometimes all you need to get thoughts into a presentable matter.

+$The Wireframe Pro app is a good prototyping alternative for you to use, especially if you are testing out some new ideas. If you're looking for something slightly different, check out our roundup of top线框工具

+$12. Adobe Comp

Adobe Comp+$is a fantastic web design tool for the iPad that assists in the creation of wireframes, prototypes and layout concepts for web pages. A Creative Cloud-powered intelligent sketchpad, if you like. It has basic templates for a number of layouts for mobile and web, and even print if that's your thing, and you can create quick placeholders by drawing intuitive shapes to represent images, text and more.

+$Bewilderingly, Adobe has not seen fit to include direct export to XD – crazy! – despite+$a Long-standing Request+$that has been under review for what seems like forever. However, exporting to Photoshop is built-in (along with Illustrator and InDesign), and once tweaks to your mockup are made in the ubiquitous image editor you can then export from there to XD. Despite this unwelcome extra step in the Adobe devotee wireframer's user journey, Comp fully deserves its inclusion in this list with its go-anywhere capabilities, ease-of-use, and impressive UI.

+$13. Flinto

Flinto interface

+$Design the before and after states, and Flinto will work out the difference and animate for you

+$(Image Credit: Flinto)

+$Flinto is a design tool that allows you to create unique interactions within your designs. You can utilise a number of gestures, and make easy transitions by designing the before and after states.Flinto+$simply works out the differences and animates for you – super helpful.

+$Bear in mind that this is iOS only, but it will feel familiar when you start using it. There’s documentation online to help you on your way, and importing from Sketch is straightforward too.

+$14. Axure

Axure interface

+$Wireframe complex interfaces with dynamic data

+$(Image Credit: Axure)

Axure+$has always been one of the best wireframing tools on the market, great for complex projects that require dynamic data. With Axure, you can really focus on mocking up projects that are both technical and require key attention on structure and data.

+$15. Justinmind

Justinmind

+$Justinmind integrates with tools such as Sketch and Photoshop

+$(Image Credit: JustInMind)

Justinmind+$will help with prototyping, and integrates with other tools like Sketch and Photoshop. You can choose your interactions and gestures to help assemble your prototype. It also contains UI kits, so you can put together screens quickly, and it's responsive, too.

+$16. Fluid

Fluid interface

+$Fluid is great for speedy UI design

+$(Image Credit: Fluid)

流体+$is a simple and intuitive tool for building rapid prototypes and working up designs. It packs some nice out-of-the-box assets to get you going with rapid prototypes. Once you’ve upgraded, it’s really easy to assemble your own symbols with your own preferred UI assets. This tool offers very fast UI design, with assets available for both high and low fidelity prototypes.

+$Design frameworks and libraries

+$17. Bootstrap

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

引导+$is certainly not a new tool, but it has revolutionised development and continues to shape how we build stuff on the web.

+$At time of writing, the latest version (4.3.1, launched February 2019) was a relatively minor update that built upon the slew of new features introduced first in v4.2.1, including  a new spinner loading component, a new toast component for displaying notifications, a new iOS style switch, touch support in the carousel component, and more. Find the我们的指南中最好的免费Bootstrap主题

+$18. IotaCSS

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

IotaCSS+$is a CSS framework that’s been purposely crafted to be design-agnostic. It was created by consultant frontend architect Dimitris Psaropoulos, who felt that other CSS frameworks were imposing a lot of limitations on the designers he worked with. This was forcing him to either write a lot of code on top, or ask the designer to compromise. So instead, he created his own framework, which works a little differently.

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

+$19. Vue.js

+$Not used to complex JavaScript libraries? Vue.js is perfect for you [Image: Vue.js]

+$What would a list of web tools be without a JavaScript framework?Vue.js+$is a framework for building user interfaces, and utilises a virtual DOM. As the name suggests, Vue’s core library is focused on the view layer.

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

{{ 信息 }}

+$Notice the custom v-on handler that calls theReverseMessage方法。这是JavaScript:

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

+$This example populated the paragraph with data and defines theReverseMessage+$method. Vue is great for those less experienced with complex libraries, but also has a number of plugins to help with development of complex single-page web apps.

+$20. Pattern Lab

web design tools: Pattern Lab screengrab

+$Pattern Lab is based around Atomic Design [Image: Pattern Lab]

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

+$Although at its core it's a static site generator that stitches together UI components, there's much more to模式实验室+$than that. It's language-and tool-agnostic; it enables you to nest UI patterns inside each other and design with dynamic data; it features device-agnostic viewport resizing tools to help you ensure your design system is fully responsive; and it's fully extensible so you can be sure it'll expand to meet your needs.

+$21. Ally.js

web design tools: ally.js

+$Don't overlook accessibility – use ally.js

+$(Image credit: Ally.js)

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

Ally.js+$is a JS library that gives you fine control over focusable and non-focusable elements. For example, using its API you can prevent elements outside a modal window from receiving focus until the modal is closed. You can also find out exactly which elements are focusable or tabbable, and identify focus changes within the shadow DOM.

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

+$22. Material Design

web design tools: material design

+$Material Design is a set of principles from Google

+$(Image credit: Material Design)

材料设计+$is a visual language from Google. It promises to combine the classic principles of good design with innovations in technology and science to create a cohesive and flexible foundation your brand.

+$Next page: Specialised web design tools to address any problem



翻译字数超限