[自译]Complete Beginner’s Guide to Interaction Design 交互设计完全入门指南

尝试翻译交互设计类文章。

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


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,511评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,495评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,595评论 0 225
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,558评论 0 190
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,715评论 3 270
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,672评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,112评论 2 291
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,837评论 0 181
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,417评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,928评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,316评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,773评论 2 234
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,253评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,827评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,440评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,523评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,583评论 2 249

推荐阅读更多精彩内容

  • **2014真题Directions:Read the following text. Choose the be...
    又是夜半惊坐起阅读 8,433评论 0 23
  • 2017.10.22深圳007er之家,第一次的意见征集就这么突然的发生了,六位充满热情的战友参加了这次活动,请允...
    张千逻辑思维阅读 330评论 0 0
  • 野狗发出模糊不清的哀鸣 把悲愁叫成冬天的一片叶子 橘子树已经衰老 它的胡须铺满坟墓 如同 纸的原色 柿子树已经死掉...
    南河沙阅读 202评论 0 8
  • 昨天看医生,医生说我不能吃面包啊,面条啊......结果,今天早上先生做了一桌饭菜。昨天,我和先生说洗手池的下水堵...
    朱泓默阅读 310评论 0 2