诺基亚开发者论坛：跨浏览器指南

五梭 — Fri, 30 Apr 2010 01:04:34 +0000

Forum Nokia发布了一个关于浏览器兼容的文档。描述了如何为iPhone、Maemo、Android和部分S60触摸设备优化自己的网站。里面有很多有用的小提示和建议值得参考。另外，压缩包内还提供了一些基于诺基亚高端设备移动Web模版创建的示例。可以在这里下载。最后的参考资料也非常精彩。

iPad的CSS3媒体查询

五梭 — Tue, 06 Apr 2010 01:40:47 +0000

iPad的Safari浏览器和iPhone的一样，都支持CSS3媒体查询。通过这个技术，可以对设备不同的握持方向应用不同的样式，增强功能和体验。iPhone是通过屏幕最大宽度来侦测的。是这样：

而iPad有点不同，它直接使用了媒体查询中的orientation属性。是这样：

之后只要将不同的样式分别定义出来就可以了。在桌面平台测试的话，firefox，Safari和Chrome都支持方向属性，只需要改变窗口让高度大于宽度，就会识别为纵向屏幕。

Cloud Four Blog的文章里有制作一个例子，可以去试试看。

移动设备的表单设计：现代解决方案

五梭 — Fri, 12 Mar 2010 05:34:40 +0000

移动表单往往比它们的桌面版显得有更多的限制：更小的屏幕；更慢的连接速度；更麻烦的文本输入；不胜枚举。因此，通常我们需要限制移动应用和网站中的表单数量。当你需要用户在移动设备上输入，单选按钮复选框、选择菜单和列表往往比开放文字域要好。

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

域缩放

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

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。

W3C移动web最佳实践1.0中文版PDF

五梭 — Tue, 21 Jul 2009 08:28:20 +0000

嘿，怎样。我又回来了。很抱歉这么久没有更新，以后不会这样了。下面放出我翻译的Mobile Web Best Practice.

摘要:
本文件为传输Web内容到移动设备定义最佳实践。主要目的是改善使用移动设备访问网络的用户体验。
本推荐标准是有关被传输的内容而不是内容被创建的过程，也不与内容被传输到的设备或用户代理有关。
本文件主要推荐给网站建设者、维护者和运营者。本文件的读者应该熟悉网站的建设，以及了解一些相关技术，例如Web服务器和HTTP。读者不必须拥有移动技术背景。

下载地址：http://mocreative.net/wp-content/uploads/2009/06/mobileBP-sc.pdf

这是我在这篇文章的第一个翻译版本，难免有很多读起来奇怪的地方，还请大家多多指正，可以在下面评论或Email我。

mocreative » 用户体验