1998年，我买了我的第一部手机——诺基亚5110。那时它的功能非常少：我只能打电话，发短信，还有就是可以玩贪吃蛇。更重要的是，这些交互功能完全由它的制造商所控制。随着智能机，触摸屏和“应用商店”的出现，设计师的机会也变得越来越多。我们有责任去熟悉这些相对较新的媒介。

欢迎阅读“移动设计，第2部分：交互设计”。这里有一些之前讲过的资料，以防你刚到我们的话题中：移动设计，第1部分：信息架构展示了设计师在为移动设备设计时所面临的主要挑战，主要是移动环境：从观察环境，到行为和情感动作。因为这些差异会影响到用户，所以我解释了在整个设计过程中（从研究和战略到创造一个最终产品）它们的重要性。

第1部分得出移动环境中的信息架构的结论。这为其他的设计流程提供了良好的基础。然而，在进入美学之前，有一点很重要，那就是与桌面版本相比，移动设备和平板电脑交互的差异。

交互设计

当前大多数移动设备都采用触摸屏; 它提供了自身的机会和限制。我们不仅使用它们来查看内容，还使用它们与该内容进行互动。这迫使设计师考虑人体工程学，手势，转换，最后是，移动设备特定的交互模式。

人体工程学

设计移动人体工程学要求我们注意设备尺寸以及触摸屏的实用性。例如，用户手持设备触摸屏幕的方式会影响用户是否容易触摸到屏幕的其他部分。

点击区域或“用户触摸以激活某些东西的区域”需要足够的空间以便用户准确且自信地按下。指尖的平均宽度在1-2厘米之间，这与标准屏幕上的44px-57px和高密度(“视网膜”)屏幕上的88px-114px大致相关。诺基亚、苹果和微软各自推荐的尺寸略有不同，以说明触摸屏的性质。

不过，对于点击区域并没有硬性规定。与其从各种标准中寻找答案，不如考虑用户想要在屏幕上实现什么，这项任务的重要性，以及他们完成任务的速度——然后相应地设计。

手势

触摸屏的每个功能部分都排除了该区域内容的显示，使得手势成为移动交互设计的一个重要组成部分。所有的主要操作系统都采用触控，包括谷歌的Android、苹果的iOS和微软的Windows 8。

下表提供了小结：

此外，在基于触摸设备上开发手势的标准和模式已经成型。设计师也可以拓展手势的范围以适应他们的应用。

过渡跳转

过渡跳转是平滑应用状态切换的交互动作，有助于讲述故事或重新建立手势隐喻。一般来说，过渡跳转有助于促进回忆并防止用户迷失。

基本的跳转动作包括：

手势

过渡

描述

一般

这些只是少数，我们可以选择一系列的转变。最好的选择是在我们正在促进的互动中增加连贯性。

常见模式

正如在第1部分中提到的，移动设备给设计师更少的空间来添加菜单和导航线索，而不是在桌面计算机上使用它们。结合环境因素——比如观看条件差和/或分散注意力——我们常常很难让用户对我们的内容结构有一个很好的把握。

然而，有一些常见的交互模式迎接挑战。一些最有价值的包括用于改进导航、选择内容、登录/退出和交涉形式的那些。

主导航

主（或“主”）导航是我们的网站（或应用程序）的信息架构的视觉表现。这里有一些选择要考虑：

选择内容

点击链接以激活内容有助于简化流程，使用户可以轻松地用一只手快速选择内容。 如果做得好，这种转变也会增加用户参与度。

登陆

输入用户名，电子邮件和密码是某些应用程序的基本过程。 作为设计师，我们可以尽可能的确保这个过程轻松。

使用表单

在移动设备上填写表单可能令人沮丧，特别是该表单只适配PC桌面操作系统的网站，也就是说这个表单缺乏移动设备的适配版本。基于常规的移动设计考虑来简化流程，并考虑这些解决方案，这将使在移动设备上使用表单更加容易。

下一步

标准和指南提供了创新的场所。当我在诺基亚5110上玩贪吃蛇时，我从没想过有一天我会有机会设计和塑造移动设备。今天的解决方案成为明天的标准和指南。

在移动设备上实现正确的交互是至关重要的。但是要创造一个真正美妙的体验，网站或应用程序的实际外观需要灵感、魅力和参与。在第3部分中，我将探讨布局和视觉设计如何支持信息架构和交互，以创建完全引人入胜的体验。

名词解释：

1、表单（form）：表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分： 表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。

2、进度条（progress bars）：进度条即计算机在处理任务时，实时的，以图片形式显示处理任务的速度，完成度，剩余未完成任务量的大小，和可能需要处理时间，一般以长方形条状显示。

原文地址：

http://www.uxbooth.com/articles/designing-for-mobile-part-2-interaction-design/