“How can I switch to UX?” This is a common question from visual designers because there’s a lot of overlap on the surface. But it can also be a difficult transition since UX encompasses much more below the surface.

“如何切换到UX？” 这是视觉设计师经常遇到的问题，因为表面上有很多重叠。 但这也可能是一个困难的过渡，因为UX在表面之下包含了更多内容。

To be clear, I’m not saying visual design is done with less thought. I was a visual designer for 10+ years before making the switch. Both disciplines have a high level of craft but their areas of focus are different. The main difference between UI vs UX centers on where you spend the majority of your time.

明确地说，我并不是说视觉设计是不加思索地完成的。 在进行转换之前，我曾担任视觉设计师超过10年。 两种学科都具有很高的水平，但是它们的重点领域不同。 UI与UX之间的主要区别在于大部分时间都花在了哪里。

在表面以下进行更多设计会更多地属于UX (Designing more below the surface falls more into UX)

All design projects have these three layers to solve for. Complex projects require more UX because more work is needed below the visual layer. Connecting the visual layer more to what’s below will naturally start to shift you over to UX.

所有设计项目都需要解决这三层问题。 复杂的项目需要更多的UX，因为在可视层下需要做更多的工作。 将可视层更多地连接到下面的内容将自然开始将您转移到UX。

为什么系统思考是视觉设计师的好途径 (Why systems thinking is a good avenue for visual designers)

The main turning point for my transition to UX was when I started thinking of every project aspect, from UI to how screens connect, in context of a system. Obviously other skills are required for UX, but systems thinking is something you can build on. It’s a natural part of your development as you level up in visual design. So it’s likely the easiest place to start. Let’s look at how to apply this.

过渡到UX的主要转折点是当我开始考虑系统上下文中从UI到屏幕如何连接的每个项目方面时。 显然，UX需要其他技能，但是系统思考是可以建立的。 当您升级视觉设计时，这是开发工作的自然部分。 因此，这可能是最简单的起点。 让我们看看如何应用它。

系统思考可以应用于不同的层次 (Systems thinking can be applied on different levels)

细节vs大图 (Detail vs big picture)

Up close, systems thinking helps inform the granular UI details. How does each component fit into the system you are building? Are they organized well? Do they have clear definitions and guidelines?

近来，系统思考有助于告知详细的UI细节。 每个组件如何适应您要构建的系统？ 他们组织得好吗？ 他们有明确的定义和指南吗？

Zooming out to the big picture, systems thinking carefully considers how all screens connect. Have you considered how users progress from one screen to the next? Is the sequencing and organization of screens optimal? Are your main use cases represented?

放大以查看大图时，系统思考会仔细考虑所有屏幕的连接方式。 您是否考虑过用户如何从一个屏幕转到下一个屏幕？ 屏幕的排序和组织是否最佳？ 是否代表了您的主要用例？

Let’s get into specifics for how this applies to your work.

让我们详细介绍一下这如何应用于您的工作。

细节级别的提示 (Tips for the detail level)

围绕设计系统组织您的详细信息 (Organize your details around a design system)

A large part of UX is interaction design. It requires looking at the myriad of options and making final recommendations based on sound rationale and research. Once you land on a good solution, it’s important to use it consistently. You can see how an organized, well-defined design system fits directly into this process. It’s often a natural output of it. So where to begin?

UX的很大一部分是交互设计。 它需要考虑多种选择，并基于合理的理由和研究提出最终建议。 一旦找到了一个好的解决方案，重要的是要始终使用它。 您将看到一个组织良好，定义明确的设计系统如何直接适合此过程。 它通常是它的自然输出。 那么从哪里开始呢？

从标准的基本构建块开始 (Start with standard, basic building blocks)

It’s best to start with a simple baseline library (fonts, colors and a scale for type and spacing). This lets you work flexibly while keeping a consistent underlying foundation. The most complex I’d get here would be well-established ui patterns that likely won’t change (ex: text inputs, buttons, etc).

最好从一个简单的基线库(字体，颜色以及类型和间距的刻度)开始。 这使您可以灵活地工作，同时保持一致的基础。 我在这里遇到的最复杂的问题是建立良好的ui模式，这些模式可能不会改变(例如：文本输入，按钮等)。

谨慎添加自定义或复杂组件 (Add custom or complex components with great care)

As your project progresses, patterns for more complex components (ex: cards, ui bars, etc.) will start to emerge. Since the idea is to share useful and clear components, be critical of what to include. It’s important to have good definitions for components, which brings us to the next point.

随着项目的进展，更复杂的组件(例如卡，UI条等)的模式将开始出现。 由于该想法是共享有用且​​清晰的组件，因此请谨慎包含。 对组件进行良好的定义很重要，这将使我们进入下一步。

围绕语义而不是外观定义组件 (Define components around semantics instead of appearance)

Base your components and styles on their conceptual meaning instead of how they look. Visuals will likely change and evolve over time but the meaning, if well-defined, should remain stable. Clearly defined components create consistent interactions patterns because there are clear rules on when to use them. As a bonus, this fits well with development. Clear semantic components help create cleaner code.

将组件和样式基于其概念含义而不是其外观。 视觉效果可能会随着时间的流逝而发生变化和演变，但是含义(如果定义明确)应该保持稳定。 明确定义的组件会创建一致的交互模式，因为有关何时使用它们有明确的规则。 作为奖励，这很适合开发。 清晰的语义组件有助于创建更简洁的代码。

制作灵活，全面的组件 (Make flexible, comprehensive components)

Creating flexible master components allows you to use the same component (or a defined variant) across the experience to communicate a concept consistently. One important reminder here is to make sure you test your components using real data. Do the text strings work for broad instances and languages? Are images sized and cropped well for different contexts where the components are used?

通过创建灵活的主组件，您可以在整个体验中使用相同的组件(或定义的变体)来一致地传达概念。 这里的一个重要提醒是，确保您使用真实数据测试组件。 文本字符串适用于广泛的实例和语言吗？ 在使用组件的不同环境中，图像的尺寸和裁剪是否合适？

Cover key component variations upfront to ensure they will likely work for your project long-term.

预先涵盖关键组件的变化，以确保它们可能长期适用于您的项目。

清晰一致的系统更易于维护 (Clear, consistent systems are easier to maintain)

We’ve all seen projects where design gets more inconsistent and poorly documented over time. Having fewer components which can flex across your project is also much more efficient and easier to maintain. A well-maintained design system prevents a project from falling into design debt.

我们都看到过随着时间的流逝，设计变得更加不一致且文献记载不充分的项目。 可以在您的项目中灵活运用的组件更少了，效率也更高，维护也更容易。 维护良好的设计系统可以防止项目陷入设计债务之中。

总体水平的提示 (Tips for the big picture level)

Now that we’ve covered the detail level, let’s look at how systems thinking can be applied when zoomed out. Considering how every screen connects is a great way to dip your toes into information architecture. Ready?

现在，我们已经涵盖了详细程度，让我们看一下缩小时如何应用系统思维。 考虑每个屏幕的连接方式是将您的脚趾插入信息体系结构的好方法。 准备？

围绕流程与单个屏幕进行设计 (Design around flows vs individual screens)

A common challenge when starting out is to focus too much on individual screen design. Similar to your components, you have to consider how each individual screen relates to the rest. Designing in context of flows ensures you never lose sight of the whole picture. This makes it easier to spot inconsistencies and find solutions.

刚开始时的常见挑战是过多地专注于单个屏幕设计。 与组件类似，您必须考虑每个单独的屏幕与其余屏幕之间的关系。 在流程的上下文中进行设计可确保您永远不会忘记整个画面。 这样可以更轻松地发现不一致之处并找到解决方案。

A flow documents can help answer the following questions:

流程文档可以帮助回答以下问题：

• Are there different states for a given screen?
  给定的屏幕有不同的状态吗？
• What are all the possible paths within a given screen?
  给定屏幕中所有可能的路径是什么？
• Is the sequencing of a path optimal?
  路径排序是否最佳？
• Is the navigation driven by user input or system logic?
  导航是由用户输入还是由系统逻辑驱动？

Well-designed flows require a lot of knowledge and practice. If you’re new to this, one of the first things you can focus on is keeping a well-organized layout that is easy to understand. More on that next.

精心设计的流程需要大量的知识和实践。 如果您是新手，则可以关注的第一件事就是保持易于理解的井井有条的布局。 接下来的更多内容。

使用X / Y轴提供组织和含义 (Use the X/Y axis to provide organization and meaning)

Poorly designed flows are messy, overwhelming and incomprehensible. A good flow should look more like a well-designed map vs a bunch of tangled wires. It needs to be easy to consume.

设计不良的流程是混乱的，压倒性的和难以理解的。 良好的流程看起来更像是设计良好的地图，而不是一堆纠结的电线。 它必须易于消费。

A good practice is to leverage the x/y axes to help organize. You can use it to show different aspects of a design. It shows that you are capable of understanding complexity and organizing/optimizing it. By putting related screens and screen states in close proximity, it’s much easier to understand how the application behaves and how it can be built.

一个好的做法是利用x / y轴来帮助组织。 您可以使用它来显示设计的不同方面。 它表明您能够理解复杂性并进行组织/优化。 通过紧密关联相关屏幕和屏幕状态，可以更轻松地了解应用程序的行为以及如何构建应用程序。

Here are examples of ideas you can show along an axis:

以下是可以沿轴显示的想法示例：

• Stages of progress or user journey
  进度或用户旅程的阶段
• Different user types (ex: buyer vs. seller, new vs returning)
  不同的用户类型(例如：买家与卖家，新用户与回访者)
• Different methods (ex: buying or login options)
  不同的方法(例如：购买或登录选项)

Use whatever makes sense for your project. Most projects are much more complex than this example. A flow document records the connections and relationships so that info is not lost.

使用对您的项目有意义的任何东西。 大多数项目都比此示例复杂得多。 流文档记录了连接和关系，因此信息不会丢失。

结语 (Wrapping Up)

As I mentioned earlier, a UX role requires a lot of skills but applying systems thinking is a good start. Creating well-defined design systems is a good foundation for interaction design. Organizing complex flows is good practice for information architecture. It’s also good to have an understanding of research but the first two skills should be enough to help you start in UX.

正如我之前提到的，UX角色需要很多技能，但是应用系统思维是一个好的开始。 创建定义明确的设计系统是进行交互设计的良好基础。 组织复杂的流程是信息体系结构的良好实践。 对研究有所了解也很不错，但是前两项技能应该足以帮助您开始使用UX。

Changing careers is a lot of work but you can be more efficient if you know where to focus. Designing more below the surface and focusing on systems and architecture was really the turning point for me. If you are on a similar journey, try applying some of these approaches.

转变职业是一项繁重的工作，但是如果您知道该把重点放在哪里，则可以提高工作效率。 对我而言，在地下进行更多设计并专注于系统和体系结构确实是转折点。 如果您的旅程相似，请尝试应用其中一些方法。