嘗試翻譯交互設計類文章。

Complete Beginner’s Guide to Interaction Design

交互設計完全入門指南

by UX Booth

Interaction design has its origins in web and graphic design, but has grown into a realm of its own. Far from merely working with text and pictures, interaction designers are now responsible for creating every element on the screen that a user might swipe, click, tap, or type: in short, the interactions of an experience.

交互設計起源于網頁和平面設計，但多年的發展使其開拓出屬于自己的領域。目前交互設計更多的是在一些用戶會進行滑動、點擊、按下或者進行輸入的屏幕上創造各種要素，而遠不止只是和文字圖片打交道。總的來講，就是體驗上的交互。

This article serves as a good jumping off point for people interested in learning more about Interaction Design. To that end, we’ll briefly cover the history, guiding principles, noteworthy contributors, and tools related to this fascinating discipline. Even if you’re an interaction designer yourself, give the article a read and share your thoughts in the comments below.

本文可視為交互設計愛好者的入門。在文章末尾我們會簡要地概括這門迷人學科的歷史、指導法則、出色貢獻和工具。即使你本身已是一名交互設計師，可以在閱讀文章后在評論中留下你的想法。

WHAT IS INTERACTION DESIGN?

“Interaction Design (IxD) defines the structure and behavior of interactive systems. Interaction designers strive to create meaningful relationships between people and the products and services that they use, from computers to mobile devices to appliances and beyond. Our practices are evolving with the world.” —The Interaction Design Association (IxDA)

什么是交互設計？

“交互設計（IxD）就是交互系統的結構和行為。從個人電腦到移動設備再到更廣泛的領域，交互設計在用戶和其使用的產品服務之間努力地創造出有意義的關系。整個交互設計的發展都是與時俱進的。” —交互設計組織

Interaction design began the day the first screen was designed to hold more than static copy. Everything from a button to a link to a form field is part of interaction design. Over the past several decades, a number of books have been released that explain facets of interaction design, and explore the myriad ways it intersects and overlaps with experience design.

當第一塊能夠保存遠非靜態拷貝數據的屏幕誕生時也標志交互設計的開始。（這句話好難譯！）小到一個按鈕和一個鏈接，大到表單字段，這些都是交互設計的一部分。經過多年的發展，市場上已有很多從各方面描述分析交互設計的書籍并且探索了其和體驗設計之間縱橫交錯的關系。

Interaction design has evolved to facilitate interactions between people and their environment. Unlike user experience design, which accounts for all user-facing aspects of a system, interaction designers are only concerned with the specific interactions between a users and a screen. Of course, in practice things are never so crisply delineated.

交互設計也逐漸促進了人與自然之間的交互。不像用戶體驗設計一樣要照顧到系統的方方面面，交互設計只關心用戶和屏幕之間的特別交互。當然在正常情況下都不會分得這么清楚。

COMMON METHODOLOGIES

通用做法

Although interaction design spans myriad types of web and mobile applications and sites, there are certain methodologies that all designers rely on. We’ll explore some of the more common methodologies here: goal-driven design, usability, the five dimensions, cognitive psychology, and human interface guidelines.

雖然交互設計橫跨網頁、移動應用和站點等各種類型的終端，但還是有確定的方法可以讓所有設計師采用。在這里我們一起探討這幾種常見的方法：目標驅動設計、可用性、五維法、認知心理學和人機界面指南。

GOAL-DRIVEN DESIGN

目標驅動設計

Goal-driven design was popularized by Alan Cooper, in his book The Inmates Are Running the Asylum: Why High-Tech Products Drive Us Crazy and How to Restore the Sanity, published in 1999. Alan defines goal-driven design as design that holds problem solving as a highest priority. In other words, goal-driven design focuses first and foremost on satisfying specific needs and desires of the end-user, as opposed to older methods of design, which focused on what capabilities were available on the technology side of things.

目標驅動設計在Alan Cooper一本發表于1999年的著作《軟件創新之路－－沖破高技術營造的牢籠》中被推廣倡導。Alan將目標驅動設計定義為優先重點解決問題的設計。另一方面，與過去那些只關注技術是否可行的老舊設計方法相比，目標驅動設計首要關注的是終端用戶的需求。

Today, some of the points Alan brings up seem obvious, since designers rarely select interactions based solely on development constraints. However, at its heart, the methodology is all about satisfying the end-user’s needs and wants, which is just as necessary today as it ever was.

自從設計師很少完全基于技術發展限制來確定交互的，似乎在今時今日，Alan提倡的一些觀點是顯而易見的。然而，就如同其核心指出那樣，按如今的發展需要，這種目標驅動設計的做法就是完全為了滿足終端用戶的需求出現的。

The process involved in goal-driven design, according to Alan, requires five shifts in the way we think as interaction designers.

根據Alan的觀點，目標驅動設計對設計師們來說主要可分為下面五個要點：

1.Design first; program second. In other words, goal-driven design begins with considerations for how users interact (and how things look!), rather than beginning with technical considerations.

1.設計優先，開發其次。換句話說，目標驅動設計首要考慮的是用戶是如何交互（和如何看待），而不是一開始就考慮技術。

2.Separate responsibility for design from responsibility for programming. This refers to the necessity of having an interaction designer who can champion the end-user, without worrying about the technical constraints. A designer should be able to trust his or her developer to handle the technical aspects; in fact Alan Cooper suggests that to do otherwise places the designer in a conflict of interest.

2.將設計責任從開發責任中分離出來。這里指的是擁有一個能支援終端用戶的交互設計師的必要性，而不用擔心技術上的限制。一個設計師應該要相信他的開發者能處理技術上的事情，事實上Alan Cooper也建議這么做否則會將設計師放置在利益沖突中。

3.Hold designers responsible for product quality and user satisfaction. Though stakeholders or clients will have their own objectives, the interaction designer has a responsibility to the person on the other side of the screen.

3.務必使設計師對產品質量和用戶滿意感負責。雖然利益相關者或顧客會有他們自己的目標所需，但交互設計師對屏幕另一側的用戶也負有同樣的責任。（這句話我覺得我翻譯錯了！）

4.Define one specific user for your product. This particular idea has developed into something that is now more commonly associated with user research: personas. Yet Alan reminds us to connect personas back to the product, and constantly ask: where will this person use this? Who is he or she? What does he or she want to accomplish?

4.為你的產品描繪出一個特別的使用者。這個特別的想法目前已經發展成更常見的用戶調查：角色（模擬）。而且Alan提醒我們要將用戶跟產品聯系起來并且要不斷提問：這個用戶會在那里使用這款產品？他或她是誰？他或她究竟想達到什么目的？

5.Work in teams of two. Lastly, interaction designers should never work in a silo. Collaboration with others, which Alan Cooper calls a “design communicator,” is key. Though the design communicator Alan envisioned in 1999 was typically a copywriter intended to provide marketing copy for products, today that has expanded to include a project manager, content strategist, information architect, and many others.

5.選擇一個多人的團隊。最后，交互設計師不應該閉門造車。就像Alan Cooper所提倡的“設計交流者”，交互設計師與他人合作很關鍵。雖然設計交流者—Alan Cooper設想在1999通常是撰稿人計劃給用戶提供營銷文案，但在今日已經擴大到包括項目經理、內容策略師、信息架構師和其他。

USABILITY

可用性

Usability may feel like a vague term, but at its heart, designers are simply asking “can someone easily use this?” It’s been explained in books and online in a myriad of ways, and we will review a few different definitions to uncover some common themes and nuances:

可用性聽起來可能有點晦澀，但其實核心就是——設計師簡單地問一句“每個用戶都能輕易使用這件產品嗎？”。可用性在書中或者網上已經被多樣地演繹詮釋過了，不過我們將檢查一些不同的定義來發現其他一些常見主題和細微差別。

In the book Human Computer Interaction by authors Alan Dix, Janet E. Finlay, Gregory D. Abowd, Russell Beale, usability is broken down into three principles:

在Alan Dix, Janet E. Finlay, Gregory D. Abowd, Russell Beale等人一起撰寫的書籍《人機交互》中，可用性被分解為下列三大法則：

Learnability: how easily can a new user learn to navigate the interface?

易學性：一個新手是如何輕易地操作界面的？

Flexibility: how many ways can a user interact with the system?

靈活性：用戶有多少種方法和系統進行交互？

Robustness: how well are we supporting users when they face errors?

堅固性：當用戶面臨程序出錯時我們如何良好地提供支持？

Meanwhile, Nielsen and Schneiderman explain usability as being made up of five principles:

同時，Nielsen和Schneidern用下方五個原則來分析可用性：

Learnability: how easily can a new user learn to navigate the interface?

易學性：一個新手是如何輕易地操作界面的？

Efficiency: how quickly can users perform tasks?

效率：用戶完成任務要用多久時間？

Memorability: if a user hasn’t visited the system in a while, how well will they remember the interface?

記憶性：如果用戶已有一段時間沒有訪問過系統，那么系統會如何記住用戶之前修改過的數據？

Errors: how many errors do users make, and how quickly can they recover from errors?

誤差：用戶會制造多少錯誤？他們需要多久才能從故障狀態恢復正常工作狀態？

Satisfaction: do users enjoy using the interface, and are they pleased with the results?

滿意度：用戶在操作界面的時候滿意嗎？對獲得的結果滿意嗎？

Lastly, the international standard (ISO 9241) has also broken down the word into five principles.

最后，國際標準也將可用性概括成下面五個方面：

Learnability: how easily can a new user learn to navigate the interface?

易學性：一個新手是如何輕易地操作界面的？

Understandability: how well can a user understand what they are seeing?

易懂性：用戶容易理解他們所看到的東西嗎？

Operability: how much control does the user have within the interface?

可操作性：在界面上用戶有多少可以操控的？

Attractiveness: how visually appealing is the interface?

吸引力：界面有視覺吸引力嗎？

Usability compliance: does the interface adhere to standards?

一致性：界面遵守標準嗎？

Clearly, there are common themes that make up what it means for an interface to be “usable.” Regardless of the usability principles a designer follows, it’s an important consideration for any interface.

很明顯，讓一界面變得“可用”的中心思想都差不多。無論設計師遵守什么可用性法則，可用性對任何界面來說都極其重要。

THE FIVE DIMENSIONS

五維法

In Bill Moggridge’s book of interviews, Designing Interactions, Gillian Crampton Smith, an academic in interaction design, introduced the concept of four dimensions of an “interaction design language.” In other words, these dimensions make up the interactions themselves, and as a result they make up the communication between a user and the screen. The four original dimensions are: words, visual representations, physical objects or space, and time. More recently, Kevin Silver, senior interaction designer at IDEXX Laboratories, has added a fifth dimension, behavior.

在Bill Moggridge的采訪書籍《設計交互》中，作為交互設計的研究人員——Gillian Crampton Smith解釋了交互設計語言四個維度的概念。也就是說這些方面構成了自身交互并最終促進了用戶和界面之間的交流。這四個原始的維度分別為：文字、視覺表現、物體或空間，還有時間。就在最近，作為IDEXX實驗室的高級設計師Kevin Silver添加了第五個維度：行為。

1D: words should be simple to understand, and written in such a way that they communicate information easily to the end user.

一維：文字必須簡單易懂，并且用一種能夠輕易和終端用戶進行信息交流的方式進行撰寫。

2D: visual representations are all graphics or images, essentially everything that is not text. They should be used in moderation, so as to not overwhelm.

二維：視覺表現則是所有的平面和圖片，本質上就是非文字的內容。這些視覺表現要有節制地進行使用，當然也不能使其淹沒在其他內容中。

3D: physical objects or space refers to the physical hardware, whether it’s a mouse and keyboard, or a mobile device a user interacts with.

三維：物體或空間指的是物理硬件，即無論是鼠標還是鍵盤，或者只是一款可以和用戶進行交互的移動設備。

4D: time is the length that the user spends interacting with the first three dimensions. It includes the ways in which the user might measure progress, as well as sound and animation.

四維：這里講的時間就是用戶花在前三維度的時間。其包括了用戶可能對進展、聲音和動畫進行測量的方式。（這里翻譯也應該不對。）

5D: behavior was added by Kevin Silver in his article, What Puts the Design in Interaction Design. It is the emotions and reactions that the user has when interacting with the system.

五維：行為這一維度是在Kevin Silver的文章《交互設計中的設計》里被提及的。其就是用戶在進行交互是產生的情感和動作。

Using these five dimensions, an interaction designer can pay attention to the very experience the user has when communicating and connecting with a system.

通過這五個維度，交互設計師就能注意到用戶與系統交互時體驗。

COGNITIVE PSYCHOLOGY

認知心理學

Cognitive psychology is the study of how the mind works, and what mental processes that take place there. According to the American Psychological Association, these processes include “attention, language use, memory, perception, problem solving, creativity, and thinking.”

認知心理學主要時研究我們的心理活動是如何運作的和什么心理過程代替了它。根據美國心理協會研究表明，這些心理過程包括“注意力、語言使用、記憶、洞察力、問題解決能力、創造性和想法”

While psychology is an immensely broad field, there are a few key elements of cognitive psychology that are particularly valued, and in fact may have helped form the field of interaction design. Don Norman called out many of them in his book, The Design of Everyday Things. Here are just a few.

當然心理學是一個很大的范疇，其中只有很少有極具價值的關鍵部分是關于認知心理學的，當然實際上也可能對交互設計的產生起到幫助作用。Don Norman在他的著作《設計心理學》中召集起來。下面是其中的一些內容。

Mental models are the images in a user’s mind that inform their expectation of a certain interaction or system. By learning the user’s mental model, interaction designers can create systems that feel intuitive.

智力模型就是存在用戶內心的想象，這種想象可以體現出他們對確定交互和系統的期望。通過學習用戶智力模型，交互設計能夠創造出直觀的系統。

Interface metaphors make use of known actions to lead users to new actions. For example, the trash icon on most computers resembles a physical trash can, in order to alert a user to the expected action.

界面隱喻利用已知的動作來引導用戶新的動作。舉個例子，在大多數電腦中，“垃圾箱”圖標都長得跟現實垃圾箱差不多，是為了提醒用戶根據預想進行操作。

Affordances are things that are not only designed to do something, but that are designed to look like they are designed to do something. A button that looks like a physical object you can push, for example, is an affordance designed so that someone unfamiliar with the button will still understand how to interact with it.

啟示，設計出來不僅僅是為了完成某事，更是讓別人覺得像完成某事。例如，一個按鈕長得像可以按下的物體，就是一種啟示，讓即使完全不熟悉功能的用戶也明白如何去與之互動（按下按鈕）。

HUMAN INTERFACE GUIDELINES

人機界面指南

This section is a bit of a misnomer; there actually is no single set of human interface guidelines. However, the idea behind creating human interface guidelines is in itself a methodology. Guidelines have been created by most major technology design businesses, including Apple and Android, Java and Windows. The goal is the same for all of them: to alert prospective designers and developers to advice and recommendations that will help them to create universally intuitive interfaces and programs.

這部分有點用詞不當，因為事實上沒有一套單獨的人機界面指南。然而，創建人機界面指南背后的理念是一種方法。指南通常由一些大的技術設計公司來創建，包括蘋果、安卓、Java和視窗操作系統。他們自由一個共同的目標：想未來的設計師和程序員提出建議，將有助于他們創造通用簡便的界面和程序。

DAILY TASKS AND DELIVERABLES

日常工作和可交付的東西

An interaction designer is a key player throughout the entire development process. He or she has a set of activities that are key to the project team. These typically include forming a design strategy, wireframing key interactions, and prototyping interactions.

在整個產品開發過程中交互設計師都起到非常重要的作用。他的一系列活動對項目組來說很關鍵。典型包括：設計策略、關鍵交互的線框圖和交互原型。

DESIGN STRATEGY

設計策略

Although the boundaries here are fuzzy, one this is certain: an interaction designer will need to know who she is designing for and what the user’s goals are. Typically, this is provided for her by a user researcher. In turn, an interaction designer will assess the goals and develop a design strategy, either independently or with help from other designers on her team. A design strategy will help team members have a common understanding of what interactions need to take place to facilitate user goals.

雖然界限不是很明顯，但有一個是可以確定的：一個交互設計師由必要知道他是為哪些用戶設計和這些用戶的目標是什么。正常都是用戶研究員提供數據給交互設計師。然后交互設計師就會由此分析出用戶目標和制定設計策略，這個過程可以單槍匹馬也可以有其他設計師協助。一個設計策略會幫助團隊成員形成共識：怎樣的交互設計可以促使用戶達到目標。

WIREFRAMES OF KEY INTERACTIONS

關鍵交互的線框圖

After the interaction designer has a good idea of the strategy motivating her design, she can begin to sketch the interfaces that will facilitate the necessary interactions. The devil here lies in the details: some professionals will literally sketch these interactions on a pad/dry-erase board while others will use web applications to aid them in the process, and some will use a combination thereof. Some professionals will create these interfaces collaboratively while others will create them alone. It all depends on the interaction designer and his or her particular workflow.

在交互設計師制定出促進其設計的好策略之后，他就可以畫一個有著關鍵交互的界面草圖。這里的細節一般會出現這些麻煩：有的專業人士直接在平板或者白板上畫交互草圖，有的則是借助各種軟件程序，當然有些也兩者混用。也有一些專業人士采用協同辦公的方法，每個人都可以通過協同工具單獨對產品交互進行創作。這些主要決定于交互設計師和其采用的工作模式。

PROTOTYPES

交互原型

Depending on the project, the next logical step for an interaction designer might involve the creation of prototypes. There are a number of different ways in which a team might prototype an interaction, which we won’t be covering in extensive detail here, such as html/css prototypes, or paper prototypes.

取決于項目，交互界面草圖出來后正常步驟就輪到建造交互原型。對于如何給交互創作合理的原型事實上有很多種辦法，這里就不再贅述，例如html／css原型或者紙質原型。

STAY CURRENT

與時俱進

One of the hardest parts about being a practicing interaction designer is the speed of change in the industry. Every day, new designers are taking the medium in a different direction. Consequently, users are expecting these new kinds of interactions to appear on your website. The prudent interaction designer responds to this evolution by constantly exploring the web for new interactions and taking advantage of new technologies—while always keeping in mind that the right interaction or technology is the one that best meets the persona’s needs, and not merely the newest or most exciting. Interaction designers also stay current by following thought leaders (like the notable designers below) on Twitter, and pushing the medium forward themselves.

作為一個交互設計師最困難的一部分就是要時刻跟進業界的發展。每天都有從各個領域的人涌入交互設計中。因此很多用戶就期待在網站中能出現新類型的交互。產品交互設計師不斷地探索網絡以獲得新的交互和利用新技術來趕上設計的進化，同時也要牢牢記在心中：好的交互或技術必定能完美契合用戶的需求，而不僅僅只是因為最新或者最讓人覺得興奮。交互設計師可以通過關注下列在交互設計領域的大牛并合力推動交互設計的發展！

ALAN COOPER

BRAD FROST

WHITNEY HESS

KIM GOODWIN

BRENDA LAUREL

MAT MARQUIS

KAREN MCGRANE

MIKE MONTEIRO

THERESA NEIL

DON NORMAN

DAN SAFFER

BRENDA SANDERSON

BILL SCOTT

TOOLS OF THE TRADE

行業工具

BALSAMIQ MOCKUPS

INVISION

OMNIGRAFFLE

PATTERNRY

SKETCH

AXURE

ASSOCIATIONS

行業協會

IXDA

AIGA

MEETUP