Hot on the heels of the popularity of my last article discussing 5 research tools for UX Designers, this week I’m adding shimmer and shine to that designer’s tool belt by spotlighting the visual end of the spectrum. Let’s recap three items to note regarding these recommendations before continuing.:

^ h加时赛上上一篇文章中的普及高跟鞋讨论5个研究工具，用户体验设计师 ，这个星期我被聚光光谱的视觉效果加上微光和光泽到设计师的工具带。 在继续之前，让我们回顾一下关于这些建议的三个项目：

1. Tools don’t make designs better– you do! It doesn’t matter if you paid a lot of money for the latest software, or if you simply have a pencil and paper. Good work comes from thorough iterations, working through the design process.

   工具不能使设计变得更好，而是可以！ 您是否为购买最新软件花了很多钱，还是只拥有铅笔和纸都没关系。 好的工作来自于反复的迭代，贯穿了整个设计过程。

2. You don’t have to know them all. A good designer employs a variety of tools and also knows when and where to utilize them. Keeping just one or two tools that address each type of issue is enough. You’ll waste everyone’s time if you try to learn them all.

   您不必全部了解它们。 好的设计师会使用各种工具，并且知道何时何地使用它们 。 仅保留一个或两个解决每种类型问题的工具就足够了。 如果您尝试全部学习，则会浪费每个人的时间。

3. I’m not an influencer. At the end of this article, I mention specific brands of tools. I suggest these specific tools only because I have experience with them in particular as the sole designer in a small startup, or I know of others in the industry who are having success using them. I’ll try my best to list a few examples of each type of tool if I bring up a brand. In any case, always do your own research!

   我不是网红。 在本文的结尾，我提到了特定品牌的工具。 我之所以建议使用这些特定工​​具，是因为我特别是作为一家小型初创公司的独家设计师来使用它们，或者我认识该行业中的其他成功使用它们的人。 如果我提出一个品牌，我会尽力列出每种工具的一些示例。 无论如何，请务必进行自己的研究！

视觉设计和原型制作工具 (Visual Design and Prototyping Tools)

From sketching with a pencil and paper to hi-fidelity clickable prototypes featuring interaction animation, UX designers have a wide-ranging set of tools at their disposal for visual designs and prototyping. But it’s important to know how and when to utilize these tools. Each tool should be used to create a stepping stone on the path to a powerful design handoff, akin to the architectural plans for a beautiful, functional, useful building.

从用铅笔和纸草绘到具有交互动画的高保真可点击原型，UX设计师可以使用各种各样的工具来进行视觉设计和原型制作。 但是了解如何以及何时使用这些工具很重要。 应当使用每种工具在通往强大的设计移交路径上创建垫脚石，类似于设计美观，功能齐全，有用的建筑的建筑计划。

Here are five helpful visual design and prototyping tools, and examples of when to use them:

这里有五个有用的视觉设计和原型制作工具，以及何时使用它们的示例：

1.素描 (1. Sketching)

Perhaps one of the most overlooked and underestimated tools for product design is the classic pencil and paper duo. UX is all about communicating your ideas, and while you’re on your visual design journey, you’re going to want to garner feedback and iterate on your ideas quickly. This is why it’s so important to visualize and communicate user problems, user stories, and your solutions to those problems in a fast, inexpensive, yet effective manner. Sketching is one of the best ways to get this done.

经典的铅笔和纸二重奏也许是产品设计中最被忽视和低估的工具之一。 UX就是传达您的想法，而在您进行视觉设计的过程中，您将希望获得反馈并快速迭代您的想法。 这就是为什么以快速，廉价但有效的方式可视化并交流用户问题，用户案例以及您对这些问题的解决方案如此重要的原因。 绘制草图是完成此操作的最佳方法之一。

While sketching on paper with pencils, pens, or markers, might seem elementary or even immature at first, you’ll find that it works. Not only does it work, but it’s also widely considered an essential skill for UX designers to keep in their toolbelt.

使用铅笔，钢笔或记号笔在纸上进行草图绘制时，乍一看似乎很初级，甚至不成熟，但您会发现它是可行的。 它不仅有效，而且也被广泛认为是UX设计人员保持其工具带的一项基本技能。

Remember, you don’t have to be an amazing artist– you simply have to communicate your ideas. Here are some great sketching basics outlined by Anastasia Kas on UX Collective to help you get started!

请记住，您不必成为一名出色的艺术家，您只需要传达自己的想法即可。 这是Anastasia Kas在UX Collective上概述的一些出色的素描基础知识 ，可帮助您入门！

2.流量和用户流量 (2. Wireflows & User Flows)

Visualizing your user goals and translating that into the way your users will move through your product not only helps you to create successful mockups and prototypes, but also helps you to communicate your visual solutions. Communicating the path the user takes through the product to stakeholders and engineers is a key part of a successful design and handoff process.

可视化用户目标并将其转换为用户在产品中移动的方式，不仅可以帮助您创建成功的模型和原型 ，还可以帮助您传达可视化解决方案。 在产品设计过程中，用户与利益相关者和工程师进行沟通是成功设计和移交过程的关键部分。

Taking the time to design your user flows will help others relate to the user’s journey and it will also set you up with a powerful roadmap when you start building out your screens. After this UX thought-process is tightened up, you can put on your UI hat and begin to dive into the details of your components and page layouts.

花时间设计用户流程将帮助其他人与用户的旅程相关，并且在开始构建屏幕时还将为您设置强大的路线图。 在加强UX思维过程之后，您可以戴上UI帽子，开始深入研究组件和页面布局的细节。

3.线框图 (3. Wireframing)

Wireframes are a powerful and popular way to communicate page layouts and user flows. However, as Neilson Group points out, the direction of a more fluid evolution of the web and other digital products is rending the practice of wireframing somewhat outdated.

线框是一种交流页面布局和用户流的强大而流行的方式。 但是，正如尼尔森集团(Neilson Group)所指出的那样， 网络和其他数字产品更加流畅的发展方向正在使线框图的实践有些过时 。

Still, the concept of pages isn’t going away just yet. Wireframes remain an effective tool for desktop pages and complex user flows that require a lot of visual documentation. They’re a quick way to visualize the layout of your page while identifying components, content, and navigation schemes. They’re also useful when testing early prototypes since they don’t bring attributes like color or shadow into the equation, creating a more unbiased environment for testing your user flow and page comprehension.

尽管如此，页面的概念还没有消失。 线框仍然是需要大量视觉文档的桌面页面和复杂用户流的有效工具。 它们是在识别组件，内容和导航方案时可视化页面布局的快速方法。 它们在测试早期原型时也很有用，因为它们不会将颜色或阴影等属性带入方程式，从而为测试用户流和页面理解度创造了一个更加公正的环境。

4.样机 (4. Mockups)

Hi-fidelity visual mockups are often what people think of when they think of design. This is where the designer concentrates on visual principles that not only “look pretty” but also help the user grasp the interface and the path to their objectives.

当人们想到设计时，通常会想到高保真视觉模型。 设计人员在这里专注于视觉原理 ，这些视觉原理不仅“看起来很漂亮”，而且还可以帮助用户掌握界面以及实现目标的途径。

Hi-fidelity Mockups allow stakeholders to see the finished product prior to actually building it. It’s an extremely important step in the handoff process, and gives the best preview possible without any engineering or prototyping. Mockups can be used in presentations and inserted into frames of digital devices for marketing purposes. They can be used to motivate your team to push forward and potential customers to sign up. Of course, the main purpose is to use them as a handoff to your developers, and the best handoff tools will include a feature that allows developers to pull code directly from your mockups.

高保真模型可让利益相关者在实际制造成品之前先查看其成品。 这是移交过程中极为重要的一步，无需进行任何工程设计或原型制作即可提供最佳的预览效果。 可以在演示文稿中使用样机，并将其插入数字设备的框架中以进行营销。 他们可以用来激励您的团队向前发展并吸引潜在客户注册。 当然， 主要目的是将它们用作向开发人员的移交，最好的移交工具将包括一项功能，该功能允许开发人员直接从您的模型中提取代码。

5.原型 (5. Prototypes)

This is where it all comes together. While your stakeholders and users can get a pretty good idea of how your product will look with mockups, they won’t get a feel for actually interacting with it until they drive the prototype. People often think of prototypes as something close to a finished product, but they actually come in all shapes and sizes and can be used early on in the design process for early testing. Designers can even make prototypes out of paper.

这就是所有的东西。 尽管您的利益相关者和用户可以很好地了解产品在模型中的外观，但是直到他们驱动原型时，他们才会真正与产品进行交互。 人们通常认为原型接近成品，但实际上它们具有各种形状和尺寸，可以在设计过程的早期用于早期测试。 设计师甚至可以用纸做原型 。

Higher fidelity prototypes are where the rubber meets the road, so to speak. This is the designer's opportunity to connect the dots. Each mockup screen is wired-up via some prototyping software or with just enough code to get by. With a prototype, you’re creating the interactions, so that a user can actually click through your screens. Testing with prototypes enables the designer to catch areas where the user encounters a hang-up, gets lost or confused, or even experiences delight. Depending on when they’re utilized during the design process, prototypes provide an early opportunity to iterate, or the last chance to catch a not-so-great user experience before it’s handed over to developers or out the door to market.

可以说，高保真原型是橡胶与道路相交的地方。 这是设计师连接点的机会。 每个样机屏幕都通过一些原型设计软件或仅附带足够的代码就可以连接起来。 使用原型，您可以创建交互，以便用户可以实际单击屏幕。 使用原型进行测试可以使设计师捕捉用户遇到挂断，迷路或困惑甚至感到愉悦的地方。 根据在设计过程中使用它们的时间，原型提供了一个进行迭代的早期机会，或者是在将其移交给开发人员或推向市场之前捕获不太好的用户体验的最后机会。

关于软件选项的注意事项 (A Note on Software Options)

Some popular brand names for design software used to create anything from wireframes to design systems to hi-fidelity mockups are Sketch App, Adobe XD, and Figma. All three now have prototyping capabilities. InVision is another popular prototyping software and has a powerful inspect mode for revealing your design’s codes to your developers. There’s also a range of software out there with really minor learning curves that can help you jump into sketches, wireframing, and early prototypes. Balsamic and Marvel are just two that come to mind.

Sketch App，Adobe XD和Figma是一些流行的设计软件品牌，用于创建从线框到设计系统再到高保真模型的所有内容。 所有这三个现在都具有原型制作功能。 InVision是另一种流行的原型开发软件，并具有强大的检查模式，可向开发人员显示您的设计代码。 那里还有一系列软件，它们的学习曲线很小，可以帮助您跳入草图，线框图和早期原型。 香脂和奇迹只是两个想到的。

Thanks for checking out this starter list of visual design tools. I hope you find it useful for your journey into visual design. Remember, tools don’t make great designs– you do!

感谢您查看视觉设计工具的入门列表。 希望对您的视觉设计之旅有所帮助。 请记住，工具不能做出出色的设计，而您却可以做到！