学习方法

1、文章采用中英文段落交错的方式，射击类单词会用括号注明含义，请在阅读的过程中通读全句，通过语境理解单词意思，因为理解万岁！

2、对照译文 来回看来回看来回看！

3、复习上一节课的内容

4、欢迎加入QQ讨论群：297721382，一起讨论！

NOW! 看黑板干嘛！看书！

Designing for Mobile, Part 2: Interaction Design

移动端设计——第二节：交互设计

In the second part of her series on Mobile, Interaction （交互）Designer Elaine McVicar builds upon her working definition of mobile Information Architecture. She provides numerous examples of mobile design patterns and explains how they differ when compared to their desktop counterparts（对等方）.

在本系列的第2节中，交互设计师Elaine McVicar将继续讲解有关移动设计信息架构的知识，并提供大量有关移动端设计模式的范例，为大家解释它们与电脑端设计模式的区别之处。

My first mobile phone, a Nokia 5110 (purchased in 1998!), offered very few features: I could call（打电话）, text（发短信） or play Snake. What’s more, these interactions were completely controlled by the manufacturer. With the advent of smartphones（智能手机）, touch screens, and “app stores,” however, the opportunities for designers are now innumerable. It’s incumbent upon us to familiarize ourselves with the conventions of this still-relatively-new medium（媒体、媒介，Media的单数形式）.

我的第一部手机是诺基亚5110（1998年买的），功能非常有限：电话、短信、贪吃蛇。另外，手机所能进行的全部交互都在制造商的掌控之下。而智能手机、触摸屏和“App store”的出现，给设计师带来了巨大的机遇。因此，我们现在需要尽可能地熟悉、了解智能手机这种相对还比较新颖的媒介。

Welcome to Designing for Mobile, Part 2: Interaction Design. Here’s some background（背景） in case you’re just joining us mid-series: Designing for Mobile, Part 1: Information Architecture demonstrated the key challenges designers face when designing for mobile, primarily the mobile context: from viewing conditions, to behavior and emotion. Because these differences impact the user, I explained that it’s important for us to consider them throughout our design process – from research and strategy to creating the final product.

欢迎来到移动端设计第2节：交互设计。下面是有关本系列的一些背景资料，方便新加入的同学跟上节奏：移动端设计——第一节：信息架构代表着设计师进行移动端设计时所面临的几项关键难题，这些难题主要是移动端的环境：从视觉条件到行为再到情感。考虑到移动端与传统设计之间的区别给用户带来的影响，我在上一节中说明了我们在从到策略再到最终产品这一整套设计流程中对这些区别详加考虑的重要性。

Part 1 concluded with an exploration of information architecture in the mobile context. This provides a good foundation for the rest of the design process. Before jumping into aesthetics（审美）, though, it’s important to understand how mobile and tablet interactions differ when compared to their desktop counterparts.

在第1节中，我们对移动环境下信息架构模式的探索进行了总结。信息架构是设计流程其余部分的基础。在进入设计审美部分之前，我们务求了解手机和平板电脑交互与传统台式电脑交互之间的区别。

THE DESIGN OF INTERACTIONS

交互设计

Most modern（现代的）, mobile devices employ touch screens（触摸屏）; which provide their own set of opportunities and constraints. We use them not only to view content, but also to interact with that content. This forces designers to consider ergonomics, gestures（手势）, transitions（过渡效果）, and finally, mobile-specific interaction patterns.

大部分现代移动设备都采用了触摸屏，而触摸屏有着自己独特的优势和局限性。我们不仅要使用触摸屏查看内容，还要与内容进行交互。这就使得设计师要考虑如何设计出符合人体工程学的手势和过渡效果，以及专门针对移动端的交互模式。

ERGONOMICS

人体工程学

Designing for mobile ergonomics requires that we pay attention to device dimensions（设备尺寸） as well as the pragmatic concerns of touch screens. The way a user holds a device and touches the screen, for example, influences how easy it is for that user to reach parts of the screen.

移动端人体工程学的设计要求我们既要考虑设备尺寸，也要思考触摸屏在实际应用情况下的各种问题。举例来说，用户拿设备和触摸屏幕的方式决定着他们能否轻松够到屏幕的各个部分。

Hit areas（点击区域）, or “areas of the screen the user touches to activate（激活） something” require adequate space for the user to accurately (and confidently) press. The average fingertip is between one to two centimeters wide, which roughly correlates to somewhere between 44px and 57px on a standard screen and 88px to 114px on a high-density （高密度）(“retina”（视网膜）) screen.Nokia, Apple and Microsoft each recommend slightly different sizes to account for the nature of touch screens.

点击区域，或者叫“用户为激活某对象所需触摸的屏幕区域”需要有充分的空间以便用户准确（及自信地）操作。一般人的指尖宽度是1到2厘米，大概对应标准屏幕的44px到57px，或者高密度屏幕（视网膜屏）的88px到114px。考虑到触摸屏的区别，诺基亚、Apple和微软在这方面的推荐大小彼此之间有着细微的差别。

Yet there are no hard and fast rules（固定不变的，可以直接套用的规则） with regards to hit areas. Instead of looking to the various standards for an answer, simply consider what the user needs to achieve on the screen, how important that task is, and how quickly they need to complete it – then design accordingly.

不过，在点击区域这一方面，并没有硬性的规定。你完全不用费劲查看各种标准来寻求既定的答案，只需要思考用户要在屏幕上实现什么目的、其待实现目的的重要性如何，以及需要完成的速率，然后相应进行设计

GESTURES

手势

Each part of a touchscreen dedicated to functionality precludes the display of content in that area, making gestures a crucial component（组件、组成部分） of mobile interaction design. All of the major touch operating systems employ them, including: Google’s Android, Apple’s iOS, and Microsoft’s Windows 8.

触摸屏上专用于某些功能的区域部分是无法显示内容的，这也就使得手势成为了移动交互设计的一个关键组成部分。现在所有的主流触摸操作系统都采用了手势，其中包括：Google 的 Android、Apple 的 iOS和Microsoft的 Windows 8。

The table below provides a brief summary:

下表是对各种手势的简单汇总：

TRANSITIONS

过渡

Transitions are interactions that smooth the boundaries between application states, helping to tell a story or (re)establish a gestural metaphor. More generally, transitions help facilitate recall and prevent users from getting lost.

过渡是指让应用内不同状态之间界限变模糊的交互操作，其有助于故事的讲述或奠定手势的含义。在更多情况下，过渡可以帮助用户回忆过往内容，防止他们“迷路”。

（下面的内容作为大家两节课来的小测试，请大家结合图片琢磨一下过渡效果说明和用法的英文意思，这里就不给出翻译了） 

Basic transitions include:

基本的过度方式包括：

截止到这里，第二节课结束了，但是这篇文章还没有讲完，剩下的内容请大家参加译文和原文自学，并敬请期待我们的第三课！

附赠第二课单词表：

原文地址：uec.nq