的iPad专用版Gmail页面基于去年为iPhone和Android手机推出的移动版Gmail HTML5网页应用。区别就在于他们针对iPad的1024×768分辨率进行了专门优化，让用户使用触摸操作更加舒适方便。

另外Google还表示，明天用户买到iPad后会发现，其使用Google各项网页服务时，有的会出现和桌面版完全相同的界面，有的则基于原本针对智能手机的移动版本。由于iPad无论从尺寸到分辨率都介于普通PC和手机之间，Google会“因地制宜”为每款应用选择最合适的界面提供给iPad用户。

如果你现在就像试试，iPad的UA如下：

Mozilla/5.0(iPad; U; CPU iPhone OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B314 Safari/531.21.10

你知道该怎么做的。

但是，限制孕育创新，移动表单也是一样。对移动用户的限制迫使开发和设计人员找到新的方式，令用户更快捷轻松的输入。多亏本文中涉及到的现代解决方案，移动领域也许不再避免更多的表单。相反，它可能促进表单的更多的使用。

域缩放

许多移动浏览器中，当用户选择了表单的输入域，“域缩放”功能会将其扩展到适合屏幕的可视区域的大小。这个方法令本来小小的输入域放大到足够让用户看清输入内容的大小。由于许多表单错误是由人们无法清晰辨认和修正自己的输入内容而造成的，此功能的可用性显而易见。

iPhone上的Safari浏览器和域缩放一起使用的还有一个“表单助手”功能。表单助手在放大了的输入域下方显示“上一个”、“下一个”、“自动填写”和“完成”按钮，提供给用户一个容易的方式在整个表单之间切换。不需要担心是否某个域在屏幕之外：用户只要一路点按“下一个”就不会错过了！

但是，不是每个人都会用表单助手，或者知道怎样隐藏键盘。所以，确认网页上的控件始终能让用户完成表单。围绕“提交”按钮的过多的间距会将其挤到键盘后面。

域缩放也是表单标签单列布局的原因。你可以看看Google的注册表单（如下图），当使用域缩放时，表单扩展了，两列布局中左对齐的标签却被挤出了屏幕。如果标签看不见，用户很容易忘记自己需要回答什么问题。过长的输入域也会引起这样的问题。

两列布局的表单标签在没有域缩放的移动浏览器里也经常会发生问题。任何在Android系统中使用上例的表单也要面对标签消失的问题。屏幕就是没有足够的空间同事显示输入域和相关的标签。单列布局的标签就可以避免这个问题。

输入格式

一些移动浏览器识别预定义输入类型（HTML5标准的一部分），以此来调整输入模式。举例来说，定义一个input的type为url，会显示一个带有“.”，“/”，和“.com”键的字母键盘。定义一个input的type为email，会显示一个带有 “.”和“@”键的字母键盘。而一个input的type为number的话，就会显示数字键盘。

这些关联预定义输入的键盘使得在每个要求数据带有特殊格式的输入域输入更加容易。即使没有虚拟键盘的浏览器也能从number属性获得的好处，因为用户不用被迫手动切换到数字输入法输入数字数据了。

密码遮蔽

大部分表单密码域即时遮掩用户输入的全部的字符保证敏感信息不被偷看到。自动遮掩密码看上去安全，但是也会让用户想校验密码时却只能看到一行黑点，引起了可用性问题。

许多移动设备通过显示最近输入的字符，然后过几秒将其转换成黑点来解决这个问题。这个技术在桌面已经解决了，ZURB有描述这个解决方案。

弹出菜单控件

下拉选择菜单是最难使用的输入类型之一。首先，你不得不点击一下打开它。然后你不得不卷动常常的列表找寻一个很小的目标。一旦你发现了你需要的值，你需要定位正确的位置选择它。许多下拉菜单要求你保持指针一直在菜单上方卷动，如果你移开，菜单就会关闭！

就算是敏捷的用户也常常搞错，然后需要重新选择一遍。在小屏幕移动设备上这种交互的挑战和解决方案的需求就十分明显了。

对于表单中的下拉选择菜单来说，iPhone呈现给用一个弹出菜单控件。这个控件将菜单的选项显示在一个列表里，这个列表可以用拖动、滑动等手势来控制卷动速度。巨大的触摸目标也令他很容易选中。

Android也提供了一个类似的大触摸目标给选择菜单选项。当用户点击一个下拉选择菜单，一个浮动在页面之上的对话框中显示了卷动的菜单选项列表。

图 五

复合菜单控件

弹出菜单控件也可以应用层复合输入。所以，相比要求在三个分开的输入域中选择月份、日期和年份，可以用一个date域替代。它可以显示一套弹出菜单，能让用户同时在三个列表中卷动选择正确的日期。这种方式也可以引用在其他组合之中，例如以英尺英寸为单位的高度列表。

Android也拥有复合域解决方案，通过它的视觉界面元素控制卷动列表，替换依赖手势的卷动。

原生输入控件

除了复合菜单控件，大部分移动操作系统也为应用开发者提供了很多其他的自定义输入控件。滑块、分割按钮、评级Widgets和过滤器等等都值得在设计时考虑替换标准表单控件，令用户输入更简单。

屏幕方向

由于不同的人喜欢不同方向握持移动设备，移动表单应该根据屏幕的方向调整。Android设备上的email撰写表单就是这样。

当纵向握持时，屏幕上显示三个输入域和几个操作按钮。在水平握持时，只有email正文输入域占据屏幕，并且只有一个操作按钮显示在右边。这个布局为消息内容输入最大利用了屏幕空间。

语音输入

Google的Nexus One允许用户在应用的任何文本域使用语音输入。用户可以滑动虚拟键盘切换到音频输入模式，或者按麦克风按钮也可以。在有效的语音输入支持下，在移动设备上打字输入字符将成为历史。

以后会怎样？

移动增长的非常快，越来越多的设计师和开发者注意到这个领域，我们充满希望的期待移动表单更进一步的变革。无论如何，任何使输入更快更容易的技术都将为客户带来更多的好处。

关于作者

Luke Wroblewski是一个国际知名的数码产品设计师，两本流行的网页设计书籍的作者。你可以在Twitter follow @lukewdesign 或者订阅他的RSS。

• XmlHttpRequest 用于AJAX的数据传输，第一版已有测试
• <canvas> HTML5位图缩放渲染，第一版已有测试
• contenteditable HTML5内容编辑，第一版已有测试
• Geolocation 位置信息
• <input type=”date” /> HTML5表单属性
• Appcache HTML5应用缓存
• <video> HTML5新增的视频标签
• <audio> HTML5新增的音频标签
• Web Workers
• localStorage HTML5本地存储数据库
• sessionStorage
• @font-face CSS3字体

加粗的是新增的测试，相比第一个版本，测试的技术规格更加高了，并且这次使用了javascript显示测试结果，很显然是面对更加先进的浏览器的。并且测试都集中在HTML5的新属性和离线存储方面，只有最后一条是关于视觉设计的新测试。如果要开发支持离线的web app，可以先以此测试一下你的目标浏览器。

Safari JavaScript数据库编程

HTML5标准为客户端数据存储提供了新的机制，也就是JavaScript数据库的支持。可以使用它在本地存储一些数据，制作离线web应用。最新的Safari 3.1和iPhone OS 2.0已经支持HTML5。

HTML5 应用缓存

iPhone OS 2.1会支持到HTML5应用缓存，当你制作的web应用定义了是基于HTML5规范制作的，那么在用户可以将应用通过使用Safari上的加号增加到Home界面，应用存储于缓存并在主界面显示。