移动交互：指尖上的“人文”设计

Elaine McVicar

现代移动设备大部分都采用触摸屏，这也导致了触屏设备的机遇与限制并存。我们使用触屏设备不仅仅是为了查看内容，还要与内容进行交互。这使得设计师不得不考虑人体工学、手势表达、转场切换及针对移动设备的交互模式，这就是交互设计上的“人文关怀”。

移动设备人体工学设计要求我们同时注意设备尺寸与触屏实用问题。比如，用户手持设备及触摸屏幕的方式影响了用户是否能轻易碰触屏幕各部位。

碰撞区域或者“用户触摸屏幕进行激活的区域”要有充足的空间，让用户能够准确无疑地触压。指尖平均宽度为一至两厘米，在标准屏幕上对应44至57像素，而在高密度（视网膜显示）屏幕上对应88至114像素。诺基亚、苹果及微软分别根据触摸屏属性推荐了略有差异的设备尺寸。不过对于碰撞区域还没有什么硬性规定。与其寻求各种答案标准，不如想想用户需要通过屏幕实现什么、该项目标有多重要以及他们希望多快实现目标——然后根据这些因素进行设计。

手势表达的设计与操作

触摸屏上每一个注重实用功能的区域无法显示内容，这使得手势成为了移动交互设计中不可或缺的一部分。所有主要触屏操作系统都具备手势，包括谷歌的Android、苹果的iOS以及微软的Windows 8。

以下是iOS、Android和Windows 8平台之间相同手势操作的不同结果：

1.单击手势，在三个平台上都是初级选择行动。

2.单击长按，iOS平台在可编辑的文本区域显示放大的视图光标或进行文本定位；Android和Windows 8平台则是呼出编辑菜单。

3.双击手势，iOS和Android平台是视图放大和缩小；Windows 8平台则没有规定的响应。

4.滑动手势，三个平台的滑动手势均支持页面滚动，不同的是Android和Windows 8平台则包含功能栏的呼出功能。

5.双指缩放，三个平台上都是视图放大和缩小功能。

另外，触屏设备手势开发也出现了多种标准与模式。设计师可以——在很多情况下也应该——限定手势范围以与其应用配套。

转场切换

转场交互能平滑地在应用程序状态间进行切换。转场能撤销操作，避免用户不知所措。

基本的转场包括：

1.快速过度，无动画转换画面。

使用场景：在两种不同的工具或内容之间进行转换。

2.视图扩大，屏幕上的项目将内容向前拉或向下拉。

使用场景：在一个屏幕内展开一系列内容。

3.页面翻转，画面自后向前弹出。

使用场景：查看与前一个屏幕有关的屏幕，如附加设置或信息。

4.全屏呼出，屏幕上的项目全屏打开/展开。

使用场景：前进查看新的相关内容或后退到前一个屏幕。

5.水平划动，画面向左或向右划过前一个画面。

使用场景：查看支持性或附加性内容。

这些只是一部分；目前已有大量转场交互可供我们选择。最好的转场效果要能提高我们正在改善的交互过程的连贯性。

常见的交互模式

与台式电脑相比，移动设备留给设计师用以添加菜单及导航线索的空间较少。再加上环境因素——比如浏览条件简陋或存在多种干扰——我们通常很难让用户了解我们内容的结构。不过，有几种常见的交互模式能用来应对这些挑战。其中最有价值的模式包括能用以改善导航、选择内容、登录/退出以及调整表格的模式。

主导航

主导航是我们网站（或应用程序）信息架构的视觉表现。

1.扩展菜单

许多移动设备及响应式网站让用户通过扩展菜单获取主导航。菜单图标（通常为一排线条）位于顶部。点击图标就会弹出主菜单项。显而易见，扩展菜单更适用于响应式网站。

不过需要注意的是，太多菜单选项及子菜单选项可能会将内容拉到屏幕下方，造成使用不便。

2.侧边菜单

一些应用程序及网站使用滑动型侧边菜单，比如Facebook的应用。扩展菜单经常需要按触各种线条图标或者滑动屏幕，而侧边菜单可以展开或滑开菜单，表现为一列菜单选项垂直滑向屏幕一边。侧边菜单既可以分类也可以滚动，适用于具有大量菜单选项的应用程序。侧边菜单为导航开辟了独立区域，而不用占据大量用户与内容或特征进行互动的空间。在使用时要注意确保侧边菜单不会与其他导航或交互模式产生冲突，否则用户容易感到迷惑。比如，将扩展菜单或标签菜单与侧边菜单混用，那么用户在寻找特定项或特征时可能会产生混淆。

3.标签菜单

位于应用程序顶部或底部的持久化工具栏能让用户在不同部分之间快速转换。

适用于菜单选项较少的应用程序。这是由移动屏幕的水平空间大小所决定的。标签菜单一般用于iOS（菜单选项推荐数量为5）的应用程序导航。需要注意的是其底部标签可能会与Android及Windows 8的标准交互发生冲突。

4.中心辐射型菜单

集中式主屏幕可以让用户选择菜单选项，导航至该部分，而该部分有自己的内部导航模式。用户可以通过激活反向链接返回主屏幕。辐射型菜单更适用于快速展示应用程序的特征。

同时需要注意筒仓型功能，如果用户想要在不同功能之间进行导航，可能较难返回主屏幕。

如何选择内容

按触激活内容的链接能促进流动，用户可以方便快速地单手选择内容。如果取得良好效果，这种转场也能增加用户的参与程度。

1.按触前进

用户通常可以通过选择类别、子类别然后点击进入浏览内容，之后前往新的相关内容。按触前进可以让用户持续参与以文章为主的内容。

不过用户如果无法确定他们处于导航结构中的哪个位置，可能会感到迷惑。

2.滚动效果

用户可以滚动浏览内容，然后从中选择一个选项。这种水平滚动的设计方式，是Windows 8 Metro风格应用固有的。当然，类似的设计我们在iPhone上也见过，就是比较常用的App Store。该效果适用于一些需要用户自己去发掘的视觉化内容界面，而用户也可以在选择前进行预览。缺点是如果用户希望浏览他们经常访问的内容，可能需要不停地重复滚动操作。

3.前翻页/后翻页

如果你想要进一步探索你正在查看的内容项的相关内容或设置，那么翻页交互可以让你获取令人满意的详细信息。此种操作方式适用于关联两种内容，如设置或详细信息。但是如果交互过于复杂，用户会分辨不出他们在导航结构中所处位置。

登录入口设计

输入用户名、邮箱及密码是某些应用必不可少的过程。作为设计师，我们可以让这个过程变得尽可能轻松。

1.自动登录

用户登录详情储存于应用程序中，初始化时自动登录，并显示用户信息。Facebook、Instagram与Twitter等众多社交网络应用都采取这种方式。

自动登录适用于需要登录才能获取个人信息但安全要求不很高的应用程序，但是其安全系数较低。

2.记住细节

正如一些台式网站能保留用户细节一样，记住电子邮箱或用户名等可以加速登录过程。该方式要求登录的对象是移动设备或平板电脑。在登陆过程中尽量避免不必要的登录操作。

3.PIN码

创建一种无需用户输入全部登录信息就能快速登录的方式将取得很好的效果。比如PayPal允许你创建一个简单的PIN码，让登录操作变得快速简便。适用于有一定安全要求但可以与特定设备相关联的应用。

使用表格

在移动设备上填写表单很麻烦，特别是针对台式电脑设计却还没提供移动设备版本的网站表单。

我们可以通过关注常见的移动设计考虑因素来让填单过程变得方便，同时还可以探索一些能简化移动设备表格使用过程的方案。

1.保存用户信息

通过登录程序来保存/检索用户信息可以节省时间、减少系统开销，并让你的网站或应用更方便好用。适用于要求用户添加个人信息的网站或应用，比如购物过程。

2.显示合适的键盘

确保用户在激活表单域时能显示合适的键盘，可以让填表过程变得流畅。比如，如果用户要输入电话号码，就显示数字键盘。这种效果可以通过代码实现。这种方式适用于所有表格。

3.进度提示

在台式电脑上，进度提示可以向用户显示某个多步骤过程的进度，可谓高招。不过移动和平板设备由于尺寸关系，设置进度条可能有点麻烦。如果巧妙合理地利用空间，这些设备也是可以使用进度条的。进度条适用于购物过程或长表单。需要注意的是，由于进度条可能阻碍用户快速访问内容，所以不能占据太多空间。

在移动设备上开展顺利的交互过程是必不可少的。但是要创造真正的美妙体验，网站或应用程序的实际外观就必须激发兴趣、富有魅力并引人入胜。 （编辑：杨磊）