1. 设计站点前的准备工作
在设计一项既要面向移动设备又要面向PC的服务的时候，首先需要进行移动设备用户界面的设计。把面向移动的服务扩展到PC环境通常要比其相反方向扩展要容易一些。
如果起始站点是一个PC Web站点，强烈建议把PC服务分解成若干部分。在移动环境中，仅挑选那些可以作为服务核心的部分。在设计移动服务时，要把注意力集中在这些核心部分上。
研究市场上各种移动浏览器的物理特性，以便用XHTML和CSS进行有效的应用软件设计。你需要知道文档、样式表以及图像的最大许可大小，可以用于显示内容的屏幕空间的物理大小，以及为其它物理实体，如软键文本、图标、标题等，预留的屏幕空间。诺基亚手机有一个包含图标的标题行，标题行还可以包含XHTML页面的标题。还有一个用于显示XHTML页面（不包括标题）的内容区域，以及包含一个或多个软键文本的区域，软键的个数取决于移动设备的类型。
可以从http://www.forum.nokia.com/下载诺基亚移动因特网工具包。还可以在若干诺基亚设备仿真器中的任一个上测试你编写的内容是如何显示的，仿真器也可从上述的Web站点下载。
2 .设计优秀站点的基本原则
XHTML MP 和CSS的引入创建了多种新的用户界面结构。XHTML MP包含的元素比WML多，并且利用CSS，可以通过多种方法修改元素的可视化显示。XHTML MP为服务提供者提供了更多把他们的服务变得更有吸引力的可能性，但同时，XHTML MP也增加了设计的复杂度，从而在可用性上面临更多的挑战。
3 .关注导航模型
应该基于一致、易学的导航模型创建便于使用的用户界面。这比使用XHTML的所有花哨的显示功能都重要。
移动用户的需求及期望与使用台式PC的用户不同。移动用户不是浏览者，他们更希望能够快速、轻松地访问特定信息。因此，应提供简洁、精确且快速的信息。
避免在过多页面或闪烁屏幕中显示核心服务内容；然而，可以在其中显示一个小logo或其它的加亮商标，以使用户熟悉服务。无论如何，应能立刻显示用户要求查看的重要信息。
在移动设备中，数据的输入非常有挑战性，并且比较费时，故在创建站点时，尽可能少地要求用户输入，尤其是文本输入。
如果可能，在用户做选择时，应避免让用户打字，考虑利用选择列表、复选框或单选按钮让用户从默认的列表中做出选择，或提供一个默认列表和一个输入框。
当不得不要求输入的情况下，利用属性-wap-input-format设置输入模板，例如，*N代表数字输入。这样可以避免手动转换输入模式。
CSS的属性–wap-input-format为用户输入的数据定义了一个输入模板，从而去除了为文本或数字转换输入模式的需要。因为一些非诺基亚XHTML MP浏览器的早期版本不支持该属性，它们支持旧属性format="…"，因此，对同一格式字符串，应同时定义CSS属性–wap-input-format和属性format。关于WAP Format输入模板的语法，可参见WAP June 2000 specification [WML] 或 WAP Overview [WAPOver]。
许多用户以分钟为单位支付移动服务，因此，如果他们无法在短时间内获得要查找的信息，就会停止使用该服务——这也是遵守以上要点的一个重要原因。
4 .设计导航层次
导航模型是用户浏览XHTML页面的方法，XHTML页面由服务、通过链接进行的交互、菜单和数据输入组成。在设计导航模型时，牢记以下原则：
在整个服务中保持导航模型的一致性。
对于XHTML服务，避免加入返回到之前访问过的页面的链接，因为诺基亚移动浏览器有一个永久的Back软键，可以自动地实现该操作。
避免创建过于“深”的服务。如果一个服务包含的层次多于4或5个，用户通常就难以保留服务的总体印象。
加入返回到服务的起始页或其它主要分支页面的导航，这样用户就可以轻松地返回到他们的起始点。导航层次越多，就越需要一个返回到起始页的方法。
5 .针对小尺寸屏幕的设计考虑
预测显示，全世界移动设备的数量将很快超过PC的数量，这给适用于小尺寸屏幕的界面友好的应用软件带来了巨大的商机。当然，在小尺寸屏幕上设计富有创造性的应用软件更有挑战性，但为移动设备设计具有吸引力的应用软件并非不可能。牢记下列条款：
确保用户进入页面时有可见内容。
在<head>元素中用<title>元素为每个页面定义一个短小标题。通常，标题不应多于14个字符，除非你能够定制页面使其适应用户设备的特定特征。
在一个服务的所有XHTML页面中使用一致的样式。一致性增加了易用性——尤其是对于重复使用该服务的用户。
尽量减少水平滚动的需要。水平滚动除了比较费时之外，用户还将难以判断他们在整个页面中的位置。如果可能，设计的内容不要宽于或长于目标设备的显示屏。
利用元素的对齐属性（lef， right， center）来增加可读性，但不要在同一页面中使用多于两个或三个属性，因为这阻碍了用户获取组织结构。
使用空白空间，尤其是在高而窄的图像旁边。可以通过在<img>元素中使用属性align实现此目的，例如： <img align="left" src="sky.gif" alt="Sky Picture"/> 此外，可以在CSS中为<img>元素设置悬浮属性和其它属性来实现此目的（以及更多其它目的）。悬浮图像允许在图像旁边显示文本 ，从而利用了整个显示区域。
避免过多使用文本强调属性，如粗体，斜体和下划线等，因为这降低了小显示屏上内容的可读性。
如有可能，尽量使用短小、精确的字词，避免使用冗长、复杂的字词。
避免在同一页面中使用过多不同颜色。尽管颜色可以给一个服务带来更多“活力”，但是过多颜色会导致超载。使用颜色时要尽量保持一致性，例如，整个服务中的相同XHTML元素使用同一种颜色。
不要用名字描述颜色，例如，“按下红色链接继续”。没有彩色显示屏的客户终端会以黑色和白色显示彩色内容。
6 .保持较短的文档大小
因为移动设备中可用的内存有限，故应使文档尽可能短。然而，因为XHTML MP与WML不同，它不能在一个文档中支持多“卡片”，故把内容分为多个独立页面将会使载入的速度减慢。因此，应把所有相关信息结合在同一页面中，并利用分段锚来帮助跳转至相关章节部分。
保持文档较短的有用方法包括：
代码中不要包含长注释。尽管在代码中添加注释通常是良好的编程习惯，但对于移动设备来说，这是不适用的。
在缩进时利用tab而非空格，或者不使用缩进。空格越多，文档大小增加越快！
文件名、CSS类和CSS ID应使用简短名称。
在可能的地方，用层叠规则定义样式，而不是在元素中用类或属性ID。例如，在WAP CSS样式表中，使用如下的属性：
p (color:red)
而不是下列的类属性：
.red {color:red}
这样就没有必要在文档中的每个<p>元素内定义字符串class="red"。
7. 为移动电话设计应用软件
当开发人员要决定移动终端的各种应用软件应包含什么信息时，他们应考虑用户在什么情况下使用移动电话。服务内容应满足目标用户群的需要，并且应该对最常见的任务进行最优化。由于较小显示设备便于移动，所以，在没有PC机的情况下，用户可能会首先使用移动电话访问英特网以及获取急需信息。相应的范例包括快速访问航班信息、查看简讯和天气情况等。但用户使用移动电话上网冲浪的可能性要小。
[1] [2] [3] 下一页
设为首页
加入收藏
联系我们
减小字体
增大字体