2015-08-06 10:59:14来源:作者:人点击



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.



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.







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.







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.



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.





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:


Action操作iOSAndroidWindows 8Press点按
20150122111249_2Selects primary action选择主要操作Selects primary action选择主要操作Selects primary action选择主要操作Long press长按
20150122111343_3In editable text display magnified view for cursor(光标) positioning在可编辑文本中显示放大视图以便进行光标定位  Enter data selection mode进入数据选择模式Show tooltip(工具提示) without selecting the item.显示工具提示但不选中对象。Double press双击
20150122111409_4 Zoom in or zoom out(放大或缩小)Zoom in or zoom out. Also used for text selection放大或缩小,也用于选择文本No standard无Small swipe小幅度滑动
20150122111459_5Reveal a delete button bysliding(滑动)   horizontally on a table view在表格视图下横向滑动显示删除按钮No standard无标准Select objects(对象) in a list(列表) orgrid(网格) by sliding perpendicular to panning direction向正交方向滑动以选择列表或网格中的对象Large swipe大幅度滑动
20150122111521_6Scroll(滚动) across content滚动内容Scroll across content or navigate between views within the same hierarchy滚动内容或在同一层级的不同视图之间进行导航Scroll across content Also used for moving, drawing or writing滚动内容,也可用于移动、绘画或书写Pinch / spread捏/放
20150122111543_7Zoom in or zoom outZoom in or zoom outZoom in or zoom out

Additionally, standards and patterns have emerged for developing gestures on touch-based devices(基于触摸的设备). Designers can – and often should – push the boundaries of gestures to suit their application.





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:


GestureTransitionDescriptionGeneral usage  PressQuick change(快速变换)
  20150122112129_8The view changes without any animation.When changing between two different types of tool or content.Expand扩展
  20150122112157_9An item on the screen expands pushing content along or downWhen expanding a list of content within a screen.Flip翻转
  20150122112219_10The view flips over as if turning around   from back to forwardsWhen viewing a screen specifically related to the previous screen, e.g.   additional settings or information.Open to full screen全屏打开
  20150122112241_11An item on the screen opens/expands to   fill the full screen.When opening or viewing an item. This transition can also be inverted to   close an item.SwipeHorizontal slide along(水平滑过)
  20150122112303_12The view slides left or right, pushing the previous view out of the   screen.When moving forward to view new and related content, or back to a   previous screen.Horizontal slide over(水平划过覆盖)
  20150122112324_13The view slides left or right, over the   previous viewWhen viewing supporting or additional content.