Over the past several decades, rapid advances in technology have dramatically enhanced the digital customer experience and their expectations. In the face of these heightened customer expectations, the role of the Interaction Designer has evolved and the way we work has been dramatically altered.

在過去的幾十年中，技術的飛速發展極大地增強了數字客戶的體驗和他們的期望。 面對這些更高的客戶期望，Interaction Designer的角色已經演變，我們的工作方式也發生了巨大變化。

Interaction Designers need to think at a systems level and design spatial interactions that not only account for time and space, but also the unpredictable behavior of humans within this ecosystem.

交互設計人員需要在系統級別進行思考并設計空間交互，這些交互不僅要考慮時間和空間，還要考慮人類在該生態系統中的不可預測的行為。

為什么這很重要？ (Why is this important?)

Whenever someone asks me “What do you do?”, I often paraphrase a version of Jon Kolko’s description of what Interaction Design is.

每當有人問我“你做什么？”時，我通常會用喬恩·科爾科(Jon Kolko)對“交互設計”的描述進行解釋。

Interaction Design is the creation of a dialogue between a person and a product, system, or service. This dialogue is both physical and emotional in nature and is manifested in the interplay between form, function, and technology as experienced over time.

互動設計是 建立對話 之間 一個人 和 產品，系統或服務。 這次對話既是 自然的身體和情感 并體現在形式，功能和技術之間的相互作用 隨著時間的流逝 。

— Jon Kolko, Author of Thoughts on Interaction Design (2011)

— Jon Kolko， 交互設計思想作者(2011)

Designing user interactions and systems (not just static screens) is a challenge for any designer. Interactions are fluid and dynamic and, as Interaction Designers, we need to design for all potential permutations within a system to design effective interactions.

設計用戶交互和系統(不僅是靜態屏幕)對任何設計師都是一個挑戰。 交互是動態的和動態的，作為交互設計師，我們需要設計系統中所有可能的排列，以設計有效的交互。

Luckily, there are techniques that can help. Through an understanding of Elements, Functionality, and States we can consistently break down complex interactions and design complex interconnected systems that account for all aspects of a user’s experience.

幸運的是，有些技術可以提供幫助。 通過元素 ， 功能和各國的理解，我們可以始終如一地分解復雜的相互作用和設計占用戶體驗的方方面面復雜的互連系統。

有什么不同？ 屏幕與元素，功能和狀態。 (What’s the difference? Screens vs. Elements, Functionality, & States.)

Screens (or templates, pages, etc…) are nothing more than containers. They are a collection of Elements and Functionality that can appear in varying States.

屏風 (或模板，頁面等)僅是容器。 它們是元素和功能的集合，可以在出現改變了S 大老 。

To think beyond static Screens and design for user interaction, we first need to understand the components that a screen is comprised of — Elements, Functionality, and States.

要考慮靜態屏幕和用戶交互的設計之外，我們首先需要了解屏幕所包含的組件— Elements ， 功能和States 。

• Elements — The content and user interface (UI) elements contained within a screen.

  元素 -屏幕中包含的內容和用戶界面(UI)元素。

• Functionality — The actions a user can take within a screen to navigate or alter the state of elements.

  功能性 -用戶可以在屏幕中執行的操作，以導航或更改元素的狀態。

• States — Alternative screen views where elements are changed based on user or system-defined variables.

  狀態 -根據用戶或系統定義的變量更改元素的備用屏幕視圖。

元素 ， 功能 ，和國家有密不可分的系統內連接-每個有潛力影響另一個。 (Elements, Functionality, and States are inexorably linked within a system — each having the potential to impact another.)

As Interaction Designers, it is up to us to design how Elements, Functionality, and States relate to one another.

作為交互設計師，這是由我們來設計元素 ，功能，以及各國如何彼此關聯的。

• Elements can be changed or altered by States.Example: The appearance of a “log-in” button (UI Element) could vary based on whether or not a user is logged-in (State).

  元素可以由國家更改或更改。 示例：根據用戶是否已登錄(狀態)，“登錄”按鈕(UI元素)的外觀可能有所不同。

• States can be impacted by Functionally.Example: Rows of data within a table (Elements) could be altered by a Sort & Filter Button (Functionality).

  狀態會受到功能上的影響。 示例：表中的數據行(元素)可以通過“排序和過濾”按鈕(功能)進行更改。

• Functionality can vary based on States.Example: A button to View How Crowded a restaurant is in real-time (Functionality) could be disabled when the restaurant is closed (State).

  功能可能會因國家/地區而異。 例如：當餐廳關閉(狀態)時，可以禁用用于實時查看餐廳擁擠狀況的按鈕(功能)。

記住-我們正在設計交互，而不是靜態屏幕！ (Remember — we are designing interactions, not static screens!)

To design for all potential permutations within a system and define how the components within a system impact each other, we need to have an in-depth understanding of the Complexity (Elements & Functionality) and Variants (States) that exist within the system we are designing.

為了設計系統中所有潛在的排列并定義系統中的各個組件如何相互影響，我們需要對系統內部存在的復雜性(元素和功能)和變體(狀態)有深入的了解設計。

• Interactions are fluid and dynamic and, as Interaction Designers, we need to design for all potential permutations within a system.
  交互是動態的，動態的，作為交互設計師，我們需要設計系統中所有可能的排列。

• An understanding of elements, functionality and states empowers us to break down complex interaction design challenges and design systems that align with how a users interact within them.

  對元素 ， 功能和狀態的理解使我們能夠分解復雜的交互設計挑戰和與用戶在其中交互方式一致的設計系統。

我們何時，如何以及為什么使用元素，功能和狀態？ (When, how and why do we use Elements, Functionality and States?)

• When?As early as possible in the design process — When we are trying to understand a user experience design challenge.

  什么時候？ 盡早在設計過程中-當我們試圖了解用戶體驗設計挑戰時。

• How?On a whiteboard or a piece of paper — Loosely, informally and iteratively with pen and paper.

  怎么樣？ 在白板或一張紙上–用筆和紙輕松，非正式和迭代地進行操作。

• Why?To understand the complexities of a system — What is required to enable a system to function in a way that is both usable and desirable.

  為什么？ 了解系統的復雜性-使系統以可用和期望的方式運行所需的條件。

• How?As a design definition and communication tool — To explore, then define the requirements of a system and a user’s experience.

  怎么樣？ 作為設計定義和交流工具-探索，然后定義系統需求和用戶體驗。

我們如何識別系統中的元素，功能和狀態？ (How can we identify the Elements, Functionality and States within a system?)

Mind Mapping is an effective tool for seeing the big picture —it helps us define the scope of a system and understand the complexities and variants that exist within it.

思維導圖是查看全局的有效工具，它可以幫助我們定義系統的范圍并了解系統中存在的復雜性和變體。

我們可以使用思維導圖在系統和功能級別上建立理解。 (We can use Mind Maps to establish an understanding at both a System and a Feature level.)

在系統級別，思維導圖幫助我們理解和定義： (At a System level, Mind Maps help us understand and define:)

• (1.) The Touch-points, Templates, and Features required for a system to function.

  (1)的觸摸點 ， 模板和功能所需的系統功能。

• (2.) The Elements, Functionality, and States required to make a user’s experience usable, desirable and effective.

  (2)的元素 ， 功能和各國需要以使用戶的使用體驗，可取的和有效的。

在功能級別上，思維導圖可幫助我們理解和定義： (At a Feature level, Mind Maps help us understand and define:)

• (1.) The Functional Requirements of a specific feature within a larger product or service ecosystem.

  (1.)較大產品或服務生態系統中特定功能的功能要求 。

• (2.) The Elements, Functionality, and States required to make a user’s experience usable, desirable and effective.

  (2)的元素 ， 功能和各國需要以使用戶的使用體驗，可取的和有效的。

分步指南：如何使用思維導圖 在功能級別 上識別元素，功能和狀態。 (Step-by-step: How to use Mind Maps to identify Elements, Functionality and States at a feature level.)

The real-world example below shows us how we can use Mind Maps to define the Elements, Functionality and States within a system in order to gain an understand of the complexities and variants that exist within it.

真實世界的例子如下圖我們如何用思維導圖到系統中定義的元素 ， 功能和國家 ，以獲得一個了解的復雜性和變異體在它存在。

步驟01：選擇一個類別。 (Step 01: Choose a category.)

To get started, choose a single category to focus on — Screens + [Elements or Functionality or States]

要開始，選擇一個類別集中于- 屏幕 + 元素或功能或美國 ]

In the example below, we have chosen to begin with States: Screens + States

在下面的示例中，我們選擇以States開始： Screens + States

步驟02：確定您的起點。 (Step 02: Identify your origin point.)

Start by drawing a circle on a piece of page and adding your Screen name within in. This is the origin point of your Mind Map.

首先在頁面上繪制一個圓圈，然后在其中添加屏幕名稱。這是思維導圖的起點。

In the example below, we are using a Mind Map to ideate around a feature for the Reserve App — a Dashboard that provides users with the ability to split a restaurant check with friends and pay for their meal digitally, using the app.

在下面的示例中，我們使用“思維導圖”來構思“儲備”應用程序的功能-該儀表板使用戶能夠使用該應用程序與朋友分割餐廳支票并以數字方式支付餐費。

步驟03：想法的變體。 (Step 03: Ideate variants.)

Using the category you chose, start defining variants. Add them as offshoots originating from your origin point.

使用您選擇的類別，開始定義變體。 將它們添加為源自您的起點的分支。

In the example below, we are first identifying States of the Check Splitting Dashboard that will have a direct impact on how Content and Functionality is presented to the user.

在下面的例子中，我們首先要識別檢查拆分儀表板，將會對功能是如何的內容 ，并呈現給用戶產生直接影響的國家 。

步驟04：選擇第二個類別。 (Step 04: Choose a second category.)

Next, choose an additional category to focus on — Screens + [Elements or Functionality or States]

下一步，選擇一個類別集中于- 屏幕 + 元素或功能或美國 ]

In the example below, we are adding Functionality to our Mind Map: Screens + States + Functionality.

在下面的示例中，我們將功能添加到思維導圖中： 屏幕 +狀態+功能。

步驟05：添加另一層。 (Step 05: Add another layer.)

Using the second category you chose, define variants and add them as offshoots to add another level of hierarchy to your Mind Map.

使用您選擇的第二個類別，定義變體并將其添加為分支，以將另一個層次結構添加到思維導圖。

In the example below we are adding Functionality within States — specifically what Functionality needs to be presented to users in different States of the Check Splitting Dashboard

在下面的示例中，我們在州內添加了功能 -特別是需要向支票拆分儀表板的不同州中的用戶提供哪些功能

步驟06：繼續提高層次復雜性。 (Step 06: Continue to layer-on complexity.)

Continue to add additional levels of hierarchy to your Mind Map — Screens + [Elements or Functionality or States]

繼續層次的附加級別添加到您的思維導圖- 屏風 + 元素或功能或美國 ]

In the example below, we are adding multiple levels of Elements within States — defining what content needs to be presented to users in different States of the Check Splitting Dashboard.

在下面的例子中，我們國家內部的添加元素的多層次-定義什么內容需要被呈現給用戶在不同國家的檢查分裂儀表板。

您準備好開始素描了嗎？ (Are you ready to start sketching?)

Well, almost...While Mind Mapping is an excellent ideation technique, we cannot forget about the most important aspect of human-centered interaction design — the humans who will be interacting with our design.

好吧，幾乎……雖然思維導圖是一種出色的構思技術，但我們不能忘記以人為中心的交互設計的最重要方面，即將與我們的設計交互的人。

Now, let’s talk about how we can integrate user context into our ideation. 👇

現在，讓我們談談如何將用戶上下文集成到我們的構想中。 👇

集成用戶上下文-概念的基礎。 (Integrating User Context — The basis for ideation.)

作為交互設計師，如果不了解用戶上下文和行為，我們就無法有效地進行設計。 (As Interaction Designers, we cannot design effectively without an understanding of user context and behavior.)

To effectively define the Functionality, Elements and States within a system, we need to understand how end-users relate to the system.

要在系統中有效地定義的功能 ， 要素和國家 ，我們需要了解最終用戶如何與系統。

This includes their context, goals, motivations and behaviors.

這包括他們的背景 ， 目標 ， 動機和行為 。

用戶場景和“英雄”任務流是簡單的技術，我們可以使用它們將用戶上下文集成到我們的構想中。 (User Scenarios and ‘Hero’ Task Flows are simple techniques that we can use to integrate user context into our ideation.)

• User Scenarios — Scenarios describe the stories and context behind why a specific user or user group interacts with a product or service.

  用戶方案 -方案描述了特定用戶或用戶組與產品或服務進行交互的原因背后的故事和背景。

• ‘Hero’ Task Flows — ‘Hero’ Flows Illustrates the motivations and steps that a user takes to complete a task or accomplish a goal.

  “英雄”任務流 -“英雄”流說明了用戶完成任務或實現目標的動機和步驟。

技術01：用戶方案 (Technique 01: User Scenarios)

User Scenarios describe the stories and context behind why a specific user or user group interacts with a product or service.

用戶方案描述 特定用戶或用戶組與產品或服務進行交互的原因 背后的故事和背景 。

用戶場景很簡潔，但是清楚地回答了三個問題： (User Scenarios are concise but clearly answer three questions:)

1. Who is the user — What defines this users behaviors? What attributes of their persona are most relevant to this interaction?

   誰是用戶 - 是什么定義了此用戶的行為？ 他們角色的哪些屬性與此互動最相關？

2. Why are they using a product or service — What motivates the user to use a product or service? What are their expectations of it?

   他們為什么使用產品或服務 - 是什么促使用戶使用產品或服務？ 他們對此有什么期望？

3. What goals do they have — What is the user hoping to accomplish? What does success look like for them?

   他們有什么目標 -用戶希望實現什么目標？ 對他們來說成功是什么樣的？

技術02：“英雄”任務流 (Technique 02: ‘Hero’ Task Flows)

‘Hero’ Task Flows illustrate the motivations and primary steps that a user takes to complete a task or accomplish a goal.

“英雄”任務流說明了用戶完成任務或實現目標的動機和主要步驟 。

“英雄”任務流著重于說明用戶完成任務或目標的“快樂之路”。 他們應該： (‘Hero’ Task Flows focus on illustrating a user’s ‘happy path’ towards completing a task or goal. They should:)

1. Only depict motivations & primary steps — The minimum number of touch points needed to illustrate how a user accomplishes their goal.

   僅描述動機和主要步驟 -說明用戶如何實現目標所需的最少接觸點數。

2. Illustrate internal & external touch points — As necessary, incorporate touch points outside of your product or service ecosystem.

   說明內部和外部接觸點 - 必要時，將接觸點合并到產品或服務生態系統之外。

3. Not account for edge cases — Focus on the primary path a user takes to achieving their goal. Define the edge cases later.

   不考慮極端情況-關注用戶實現目標的主要途徑。 稍后定義邊緣情況。

利用用戶方案和“英雄”任務流作為構圖工具進行構思。 (Utilizing User Scenarios and ‘Hero’ Task Flows as framing tools for ideation.)

We can utilize User Scenarios and ‘Hero’ Task Flows to gain an understanding of the context of an end-user (or users) relationship with a system.

我們可以利用用戶場景和“英雄”任務流來了解最終用戶(或多個用戶)與系統關系的上下文。

This Context enables us understand the complexity and nuance of the relationship — What are the different States that a user can take on within the system? How and when does a users State change or evolve over time? How does the system need to flex or adapt to accommodate State changes?

這種語境使我們了解的關系的復雜性和細微差別-有哪些不同的國家 ，用戶可以在系統中承擔？ 用戶狀態如何以及何時隨時間變化或演變？ 系統如何需要適應或適應國家變化？

Using this context, we can define the Functionality, Elements and States within a system with heightened awareness and intention. We can ideate at a deeper level to define how the system behaves or appears differently based on the State a user is in when they are interacting with it.

使用這種背景下，我們可以通過提高意識和意圖的系統中定義的功能 ， 要素和國家 。 我們可以在更深層次上進行構思，根據用戶與之交互時所處的狀態來定義系統的行為方式或外觀。

現在，我們準備好了-讓我們開始素描吧！ (Now, we’re ready — let’s start sketching!)

With a thorough understanding of user context and behavior, as well as the Elements, Functionality and States that comprise the system we are designing, we are well positioned to begin exploring ideas.

隨著用戶背景和行為的透徹了解，以及元素 ， 功能和規定 ，包括我們設計的系統，我們能夠很好地開始探索的想法。

回顧-外賣和建議。 (Recap — Takeaways & Recommendations.)

Interactions are fluid and dynamic and, as Interaction Designers, we need to design for all potential permutations within a system to design effective interactions.

交互是動態的和動態的，作為交互設計師，我們需要設計系統中所有可能的排列，以設計有效的交互。

Through an understanding of Elements, Functionality and States we can consistently break down complex interactions and design complex interconnected systems that account for all aspects of a user’s experience.

通過元素 ， 功能和國家的理解，我們可以始終如一地分解復雜的相互作用和設計占用戶體驗的方方面面復雜的互連系統。

設計屏幕時，首先要考慮定義要設計的系統復雜性的元素，功能和狀態。 (When designing Screens, start by ideating the Elements, Functionality, and States that define the complexity of the system you are designing.)

• Systems, not screens — To design for all potential permutations within a system, we need to understand the Complexity (Elements & Functionality) and Variants (States) that exist within the system we are designing.

  系統而不是屏幕 -要設計系統中所有可能的排列，我們需要了解我們正在設計的系統中存在的復雜性(元素和功能)和變體(狀態) 。

• Ideate first! — Ideate and define Elements, Functionality and States before you sketch or define any aspect of a user interface.

  首先想法！ -醞和定義元素 ， 功能和你的國家草圖或定義用戶界面的任何方面之前。

• Start by sketching — Start low-fidelity, outside of your computer and design tools.

  從草繪開始—在計算機和設計工具之外開始低保真度。

• Mind Maps — Use Mind Maps to help facilitate your ideation process.

  思維導圖 —使用思維導圖可以幫助您簡化構思過程。

利用用戶場景和“英雄”任務流來有效定義設計中的功能，元素和狀態。 (Utilize User Scenarios and ‘Hero’ Task Flows to effectively define the Functionality, Elements and states within your design.)

• Considering user context —When designing a solution, always consider the context, goals, motivations, and behaviors of your end-user.

  考慮用戶上下文 -設計解決方案時，請始終考慮最終用戶的上下文，目標，動機和行為。

• Communicating user context — When discussing your designs, speak to them through the context of the end-user, highlighting their context, goals, motivations, and behavior.

  交流用戶上下文 -討論設計時，請通過最終用戶的上下文與他們交談，突出顯示其上下文，目標，動機和行為。

• Tools for understanding— We can utilize User Scenarios and ‘Hero’ Task Flows to gain an understanding of the context of an end-users (or users) relationship with a system.

  用于理解的工具 -我們可以利用用戶場景和“英雄”任務流來了解最終用戶(或用戶)與系統關系的上下文。

• Tools for framing — We can utilize the context of the user that is established via User Scenarios and ‘Hero’ Task Flows as framing tools for ideation.

  框架工具-我們可以將通過用戶場景和“英雄”任務流建立的用戶上下文用作構想工具。