b端 ux 設計思維

“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)

Set up attributes as separate levers so you can work flexibly.將屬性設置為單獨的杠桿，以便您靈活地工作。

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.

將組件和樣式基于其概念含義而不是其外觀。 視覺效果可能會隨著時間的流逝而發生變化和演變，但是含義(如果定義明確)應該保持穩定。 明確定義的組件會創建一致的交互模式，因為有關何時使用它們有明確的規則。 作為獎勵，這很適合開發。 清晰的語義組件有助于創建更簡潔的代碼。

Avoid making a large haphazard library. Have clear intent when creating and organizing components.避免建立大型的隨機庫。 創建和組織組件時要有明確的意圖。

制作靈活，全面的組件 (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.

預先涵蓋關鍵組件的變化，以確保它們可能長期適用于您的項目。

These variants were made from just a few master components.這些變體僅由幾個主要組件制成。

清晰一致的系統更易于維護 (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軸來幫助組織。 您可以使用它來顯示設計的不同方面。 它表明您能夠理解復雜性并進行組織/優化。 通過緊密關聯相關屏幕和屏幕狀態，可以更輕松地了解應用程序的行為以及如何構建應用程序。

Even for this simple example, the X/Y axes keep things more organized and clear.即使對于這個簡單的示例，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.

轉變職業是一項繁重的工作，但是如果您知道該把重點放在哪里，則可以提高工作效率。 對我而言，在地下進行更多設計并專注于系統和體系結構確實是轉折點。 如果您的旅程相似，請嘗試應用其中一些方法。

翻譯自: https://uxdesign.cc/transitioning-from-visual-design-to-ux-with-systems-thinking-87a16bc681a4

b端 ux 設計思維

總結

以上是生活随笔為你收集整理的b端 ux 设计思维_借助系统思维从视觉设计过渡到UX的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。