15、移动网页可用性设计指南

移动网页可用性设计指南

1. 移动网页设计目标与基础设计

移动网页设计有两个简单目标：一是容纳最多的用户和设备，二是用最少的努力实现这一目标。为达成这些目标，需从灵活的参考设计开始，再采用能适配多种设备的标准布局。

1.1 灵活参考设计

灵活参考设计可视为网站的基线，即面向功能最有限的手机版本，它定义了移动用户所需的网站最低功能。创建灵活参考设计的步骤如下：
1. 列出想从桌面网站移植到移动设备的功能集合，建议只选取桌面网站中 20% 最有用的功能到移动网页。
2. 列出移动用户在移动中打开网站最需要的重要功能，这些功能应出现在主页上。例如，美国银行网站，在线银行登录和查找网点位置对移动用户很重要，应显示在主页。
3. 对于信息类网站，动态、最新的信息能使网站更具吸引力，要将其放在主页。
4. 将内容分成可在移动屏幕上一次显示的信息或服务块，并一次显示一个。
5. 必要时允许垂直滚动。

1.2 标准布局

不同类型的网站有不同的标准布局，以下是常见网站类型及其标准布局特点：
| 网站类型 | 举例 | 特点 |
| ---- | ---- | ---- |
| 新闻网站 | BBC、CNN 等 | 包含定期更新的最新新闻、不同新闻板块及标题、标准标题、描述和图片的新闻文章。无滚动条的用户界面最佳，信息过多时可使用垂直滚动条，避免水平滚动条。 |
| 搜索网站 | Google、Bing 等 | 标准用户界面为搜索框和提交按钮，避免下拉列表；设置需保存到 cookie 或浏览器缓存；为初学者提供最少的移动使用帮助和说明；映射手机按键以快速获取结果。