屏幕廣播系統(tǒng)

重點(diǎn) (Top highlight)

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.

在過去的幾十年中，技術(shù)的飛速發(fā)展極大地增強(qiáng)了數(shù)字客戶的體驗(yàn)和他們的期望。 面對(duì)這些更高的客戶期望，Interaction Designer的角色已經(jīng)演變，我們的工作方式也發(fā)生了巨大變化。

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.

交互設(shè)計(jì)人員需要在系統(tǒng)級(jí)別進(jìn)行思考并設(shè)計(jì)空間交互，這些交互不僅要考慮時(shí)間和空間，還要考慮人類在該生態(tài)系統(tǒng)中的不可預(yù)測(cè)的行為。

Interaction Design is the creation of a dialogue between a person and a product, system, or service. | Jon Kolko交互設(shè)計(jì)是人與產(chǎn)品，系統(tǒng)或服務(wù)之間的對(duì)話的創(chuàng)建 。 | 喬恩·科爾科

為什么這很重要？ (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.

每當(dāng)有人問我“你做什么？”時(shí)，我通常會(huì)用喬恩·科爾科(Jon Kolko)對(duì)“交互設(shè)計(jì)”的描述進(jìn)行解釋。

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.

互動(dòng)設(shè)計(jì)是 建立對(duì)話 之間 一個(gè)人 和 產(chǎn)品，系統(tǒng)或服務(wù)。 這次對(duì)話既是 自然的身體和情感 并體現(xiàn)在形式，功能和技術(shù)之間的相互作用 隨著時(shí)間的流逝 。

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

— Jon Kolko， 交互設(shè)計(jì)思想作者(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.

設(shè)計(jì)用戶交互和系統(tǒng)(不僅是靜態(tài)屏幕)對(duì)任何設(shè)計(jì)師都是一個(gè)挑戰(zhàn)。 交互是動(dòng)態(tài)的和動(dòng)態(tài)的，作為交互設(shè)計(jì)師，我們需要設(shè)計(jì)系統(tǒng)中所有可能的排列，以設(shè)計(jì)有效的交互。

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.

幸運(yùn)的是，有些技術(shù)可以提供幫助。 通過元素 ， 功能和各國的理解，我們可以始終如一地分解復(fù)雜的相互作用和設(shè)計(jì)占用戶體驗(yàn)的方方面面復(fù)雜的互連系統(tǒng)。

有什么不同？ 屏幕與元素，功能和狀態(tài)。 (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.

屏風(fēng) (或模板，頁面等)僅是容器。 它們是元素和功能的集合，可以在出現(xiàn)改變了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.

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

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

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

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

  功能性 -用戶可以在屏幕中執(zhí)行的操作，以導(dǎo)航或更改元素的狀態(tài)。

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

  狀態(tài) -根據(jù)用戶或系統(tǒng)定義的變量更改元素的備用屏幕視圖。

元素 ， 功能 ，和國家有密不可分的系統(tǒng)內(nèi)連接-每個(gè)有潛力影響另一個(gè)。 (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.

作為交互設(shè)計(jì)師，這是由我們來設(shè)計(jì)元素 ，功能，以及各國如何彼此關(guān)聯(lián)的。

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

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

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

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

• 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).

  功能可能會(huì)因國家/地區(qū)而異。 例如：當(dāng)餐廳關(guān)閉(狀態(tài))時(shí)，可以禁用用于實(shí)時(shí)查看餐廳擁擠狀況的按鈕(功能)。

記住-我們正在設(shè)計(jì)交互，而不是靜態(tài)屏幕！ (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.

為了設(shè)計(jì)系統(tǒng)中所有潛在的排列并定義系統(tǒng)中的各個(gè)組件如何相互影響，我們需要對(duì)系統(tǒng)內(nèi)部存在的復(fù)雜性(元素和功能)和變體(狀態(tài))有深入的了解設(shè)計(jì)。

• Interactions are fluid and dynamic and, as Interaction Designers, we need to design for all potential permutations within a system.
  交互是動(dòng)態(tài)的，動(dòng)態(tài)的，作為交互設(shè)計(jì)師，我們需要設(shè)計(jì)系統(tǒng)中所有可能的排列。

• 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.

  對(duì)元素 ， 功能和狀態(tài)的理解使我們能夠分解復(fù)雜的交互設(shè)計(jì)挑戰(zhàn)和與用戶在其中交互方式一致的設(shè)計(jì)系統(tǒng)。

我們何時(shí)，如何以及為什么使用元素，功能和狀態(tài)？ (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.

  什么時(shí)候？ 盡早在設(shè)計(jì)過程中-當(dāng)我們?cè)噲D了解用戶體驗(yàn)設(shè)計(jì)挑戰(zhàn)時(shí)。

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

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

• 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.

  為什么？ 了解系統(tǒng)的復(fù)雜性-使系統(tǒng)以可用和期望的方式運(yùn)行所需的條件。

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

  怎么樣？ 作為設(shè)計(jì)定義和交流工具-探索，然后定義系統(tǒng)需求和用戶體驗(yàn)。

我們?nèi)绾巫R(shí)別系統(tǒng)中的元素，功能和狀態(tài)？ (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.

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

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

在系統(tǒng)級(jí)別，思維導(dǎo)圖幫助我們理解和定義： (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)的觸摸點(diǎn) ， 模板和功能所需的系統(tǒng)功能。

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

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

在功能級(jí)別上，思維導(dǎo)圖可幫助我們理解和定義： (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.)較大產(chǎn)品或服務(wù)生態(tài)系統(tǒng)中特定功能的功能要求 。

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

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

分步指南：如何使用思維導(dǎo)圖 在功能級(jí)別 上識(shí)別元素，功能和狀態(tài)。 (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.

真實(shí)世界的例子如下圖我們?nèi)绾斡盟季S導(dǎo)圖到系統(tǒng)中定義的元素 ， 功能和國家 ，以獲得一個(gè)了解的復(fù)雜性和變異體在它存在。

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

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

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

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

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

步驟02：確定您的起點(diǎn)。 (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.

首先在頁面上繪制一個(gè)圓圈，然后在其中添加屏幕名稱。這是思維導(dǎo)圖的起點(diǎn)。

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.

在下面的示例中，我們使用“思維導(dǎo)圖”來構(gòu)思“儲(chǔ)備”應(yīng)用程序的功能-該儀表板使用戶能夠使用該應(yīng)用程序與朋友分割餐廳支票并以數(shù)字方式支付餐費(fèi)。

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

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

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

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.

在下面的例子中，我們首先要識(shí)別檢查拆分儀表板，將會(huì)對(duì)功能是如何的內(nèi)容 ，并呈現(xiàn)給用戶產(chǎn)生直接影響的國家 。

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

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

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

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

在下面的示例中，我們將功能添加到思維導(dǎo)圖中： 屏幕 +狀態(tài)+功能。

步驟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.

使用您選擇的第二個(gè)類別，定義變體并將其添加為分支，以將另一個(gè)層次結(jié)構(gòu)添加到思維導(dǎo)圖。

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

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

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

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

繼續(xù)層次的附加級(jí)別添加到您的思維導(dǎo)圖- 屏風(fēng) + 元素或功能或美國 ]

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.

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

您準(zhǔn)備好開始素描了嗎？ (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.

好吧，幾乎……雖然思維導(dǎo)圖是一種出色的構(gòu)思技術(shù)，但我們不能忘記以人為中心的交互設(shè)計(jì)的最重要方面，即將與我們的設(shè)計(jì)交互的人。

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

現(xiàn)在，讓我們談?wù)勅绾螌⒂脩羯舷挛募傻轿覀兊臉?gòu)想中。 👇

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

作為交互設(shè)計(jì)師，如果不了解用戶上下文和行為，我們就無法有效地進(jìn)行設(shè)計(jì)。 (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.

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

This includes their context, goals, motivations and behaviors.

這包括他們的背景 ， 目標(biāo) ， 動(dòng)機(jī)和行為 。

用戶場(chǎng)景和“英雄”任務(wù)流是簡(jiǎn)單的技術(shù)，我們可以使用它們將用戶上下文集成到我們的構(gòu)想中。 (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.

  用戶方案 -方案描述了特定用戶或用戶組與產(chǎn)品或服務(wù)進(jìn)行交互的原因背后的故事和背景。

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

  “英雄”任務(wù)流 -“英雄”流說明了用戶完成任務(wù)或?qū)崿F(xiàn)目標(biāo)的動(dòng)機(jī)和步驟。

技術(shù)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.

用戶方案描述 特定用戶或用戶組與產(chǎn)品或服務(wù)進(jìn)行交互的原因 背后的故事和背景 。

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

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

誰是用戶 - 是什么定義了此用戶的行為？ 他們角色的哪些屬性與此互動(dòng)最相關(guān)？

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

他們?yōu)槭裁词褂卯a(chǎn)品或服務(wù) - 是什么促使用戶使用產(chǎn)品或服務(wù)？ 他們對(duì)此有什么期望？

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

他們有什么目標(biāo) -用戶希望實(shí)現(xiàn)什么目標(biāo)？ 對(duì)他們來說成功是什么樣的？

技術(shù)02：“英雄”任務(wù)流 (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.

“英雄”任務(wù)流說明了用戶完成任務(wù)或?qū)崿F(xiàn)目標(biāo)的動(dòng)機(jī)和主要步驟 。

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

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

僅描述動(dòng)機(jī)和主要步驟 -說明用戶如何實(shí)現(xiàn)目標(biāo)所需的最少接觸點(diǎn)數(shù)。

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

說明內(nèi)部和外部接觸點(diǎn) - 必要時(shí)，將接觸點(diǎn)合并到產(chǎn)品或服務(wù)生態(tài)系統(tǒng)之外。

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

不考慮極端情況-關(guān)注用戶實(shí)現(xiàn)目標(biāo)的主要途徑。 稍后定義邊緣情況。

利用用戶方案和“英雄”任務(wù)流作為構(gòu)圖工具進(jìn)行構(gòu)思。 (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.

我們可以利用用戶場(chǎng)景和“英雄”任務(wù)流來了解最終用戶(或多個(gè)用戶)與系統(tǒng)關(guān)系的上下文。

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?

這種語境使我們了解的關(guān)系的復(fù)雜性和細(xì)微差別-有哪些不同的國家 ，用戶可以在系統(tǒng)中承擔(dān)？ 用戶狀態(tài)如何以及何時(shí)隨時(shí)間變化或演變？ 系統(tǒng)如何需要適應(yīng)或適應(yīng)國家變化？

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.

使用這種背景下，我們可以通過提高意識(shí)和意圖的系統(tǒng)中定義的功能 ， 要素和國家 。 我們可以在更深層次上進(jìn)行構(gòu)思，根據(jù)用戶與之交互時(shí)所處的狀態(tài)來定義系統(tǒng)的行為方式或外觀。

現(xiàn)在，我們準(zhǔn)備好了-讓我們開始素描吧！ (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.

隨著用戶背景和行為的透徹了解，以及元素 ， 功能和規(guī)定 ，包括我們?cè)O(shè)計(jì)的系統(tǒng)，我們能夠很好地開始探索的想法。

回顧-外賣和建議。 (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.

交互是動(dòng)態(tài)的和動(dòng)態(tài)的，作為交互設(shè)計(jì)師，我們需要設(shè)計(jì)系統(tǒng)中所有可能的排列，以設(shè)計(jì)有效的交互。

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.

通過元素 ， 功能和國家的理解，我們可以始終如一地分解復(fù)雜的相互作用和設(shè)計(jì)占用戶體驗(yàn)的方方面面復(fù)雜的互連系統(tǒng)。

設(shè)計(jì)屏幕時(shí)，首先要考慮定義要設(shè)計(jì)的系統(tǒng)復(fù)雜性的元素，功能和狀態(tài)。 (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.

  系統(tǒng)而不是屏幕 -要設(shè)計(jì)系統(tǒng)中所有可能的排列，我們需要了解我們正在設(shè)計(jì)的系統(tǒng)中存在的復(fù)雜性(元素和功能)和變體(狀態(tài)) 。

• 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.

  從草繪開始—在計(jì)算機(jī)和設(shè)計(jì)工具之外開始低保真度。

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

  思維導(dǎo)圖 —使用思維導(dǎo)圖可以幫助您簡(jiǎn)化構(gòu)思過程。

利用用戶場(chǎng)景和“英雄”任務(wù)流來有效定義設(shè)計(jì)中的功能，元素和狀態(tài)。 (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.

  考慮用戶上下文 -設(shè)計(jì)解決方案時(shí)，請(qǐng)始終考慮最終用戶的上下文，目標(biāo)，動(dòng)機(jī)和行為。

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

  交流用戶上下文 -討論設(shè)計(jì)時(shí)，請(qǐng)通過最終用戶的上下文與他們交談，突出顯示其上下文，目標(biāo)，動(dòng)機(jī)和行為。

• 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.

  用于理解的工具 -我們可以利用用戶場(chǎng)景和“英雄”任務(wù)流來了解最終用戶(或用戶)與系統(tǒng)關(guān)系的上下文。

• 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.

  框架工具-我們可以將通過用戶場(chǎng)景和“英雄”任務(wù)流建立的用戶上下文用作構(gòu)想工具。

翻譯自: https://uxdesign.cc/functionality-elements-states-how-to-design-systems-not-screens-c8089722506f

屏幕廣播系統(tǒng)

總結(jié)

以上是生活随笔為你收集整理的屏幕广播系统_如何设计系统，而不是屏幕的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。