(二)无线标记语言发展
但是不包含XHTML特性。例如CSS,frames和Scripting。是由W3C定义的。
XHTML MP: 在WAP2.0说明中指定的官方标记语言。WAP Forum 基于 XHTML Basic创造,并从XHTML的完整版本中增加了一些元素和属性。例如<i>,<b>,<small>,<big>和<hr>。XHTML MP支持一个简单的CSS版本,即WCSS/WAP CSS。
WCSS/WAP CSS: CSS2的一个简化版本,增加了WAP特有的扩展。可以很简单的改变XHTML MP页面的布局和风格。
WML2.0: WAP站点开发者不需要顾虑WML2.0。WML2.0向后兼容,并且对于WAP站点开发者还不可用。
(三)XHTML MP的优点
{zd0}优点:开发者可用相同的技术开发适用于WEB和WAP的站点。
有HTML、XHTML、CSS基础即可入门。
同样的开发工具可以用来开发WEB和WAP站点。
开发过程中一般的WEB浏览器可以浏览你的WAP站点。
HTML/XHTML页面可以通过较小的修改成XHTML MP,甚至不用修改(注意:布局是否适应小屏幕,文件大小是否出{zd0})。
支持WCSS。移动设备有很多不同的特征,比如屏幕大小,只需写一次结构,使用不同的WCSS文件即可。
更多的表现控制。
(四) 不支持的WML 特性
XHTML MP 不支持<deck>和<card>标签。
? ? ? 在XML中,一个文件可以包含一个或更多的card,所有的card组合成一个deck,并在无线设备中一同被下载。WAP浏览器每次只显示一个card,可以通过锚链接访问其他的card。通过这些,减少了服务器的往返的访问。对性能的提高是有意义的。在XHTML MP中要实现类似的特性,可以使用multipart messages(多个文档放到一个请求)另外一个方式是使用目标锚(一个页面的不同位置)。
XHTML MP 不支持<timer>标签
? ? ? <head> ??<meta http-equiv=”refresh” content=”10;URL=http://www.planabc.net/” /> </head>
? ? ? <meta>元素10秒后告诉WAP浏览器URL。
? ? ? 注意点:WML timer 仅当进入card,而HTML refresh timer当进入XHTML MP页面。
(四) 不支持的WML 特性
3.? XHTML MP 不支持事件。
? ? ? WML支持四个事件(ontimer,onenterbackward,onenterforward,onpick),除ontimer其他事件无法模拟。如要使用,需使用WML1.X。
4.? ? XHTML MP 不支持变量。
? ? ? 在XML,可以声明变量,并赋值,拥有全局作用域。可以在任何的deck和card中使用。XHML MP放在服务器端处理(必须发送并保存)。
5.? ? XHTML MP 不支持客户端脚本。
? ? ? ? 在XML,你可以使用客户端脚本(WMLScript)。JavaScript的简化版,常用来验证数据。放在服务器短处理。将来的版本将会支持客户端脚本(ECMAScript MP),支持所有的WMLScript功能。
(四) 不支持的WML 特性
6.? XHTML MP 不支持可编程序软键(Programmable SoftKeys)。
? ? ? WML的一个{zd0}特征。通过<do>标签使用。在XHML MP中可以使用 accesskey 属性。锚链接和提交按钮支持这个属性:
? ? ? <a accesskey=”1″ href=”part1.xhtml”>XHTML MP Tutorial Part 1</a
? ? ? ? ? ? WCSS中的-wap-accesskey属性也可以用来定义:a.wcss_class_1 {-wap-accesskey: 1}
7.? ? XHTML MP 不支持<u>标签。
? ? ? 在XML,<u>用来在一些文字下添加下划线。可以用WCSS中的text-decoration属性。
8.? ? XHTML MP 不支持Input框的format属性。
? ? ? ? 在XML,可以定义类型和字数限制。可以使用WCSS中的-wap-input-format属性,语法一致。比如限制5个数字字符:input {-wap-input-format:”5N”}
(四) 不支持的WML 特性
9.? XHTML MP 不支持锚链接传输数据。
? ? ? <p> ??姓名:??<input name=“name”/><br/> ?<anchor> <go method=“get” href=“yuanxin.php”><postfield name=“name” value=“$(name)”/></go> ?提交??</anchor> </p>
? ? ? <form action=“yuanxin.php” method=“get”> ?? ? ? <p>姓名:????<input name=“name”/><br/><input type=“submit” value=“提交”/></p> </form>
(五) 语法规则
标签必须xx闭合。
标签和属性必须小写。
属性值必须包含在引号标记内。
不允许无属性值存在。
标签必须xx嵌套。
(六)MIME 类型和文件扩展名
MIME类型: application/vnd.wap.xhtml+xml、application/xhtml+xml 、text/html。
动态生成MIME类型。获得HTTP请求中的accept header信息。
文件扩展名:.xhtml、.html、.htm
(七)文档结构
必须包含<html>, <head>, <title>和<body> 元素。
<?xml version=”1.0″?>
<!DOCTYPE html PUBLIC “-//WAPFORUM//DTD XHTML Mobile 1.0//EN” “http://www.wapforum.org/DTD/xhtml-mobile10.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
? ? ? <title>Hello world</title>
</head>
<body>
? ? ? <p>Hello world. Welcome to taobao.com.</p>
</body>
</html>
(七)文档结构
XML声明和字符编码:<?xml version=”1.0″ encoding=”UTF-8″?>
? ? ? UTF-8/16编码可省略。XML声明也不是必须的,但如果忽略在许多WAP浏览器中出错。
必须有DOCTYPE声明。在XML声明和<html>元素之间。
<html>、<head>、<link>、<title>、<body>
<p>元素,align属性已经去除,可以通过WAP CSS的text-align属性来设置。
(八)通用的元数据
使用<meta/>标签,包含在<head>内
WAP浏览器如果不理解则忽略。
比如添加作者:<meta name=”author” content=“yuanxin”/>
Cache Control:<meta/>标签的一个应用是控制XHTML MP文件在Cache中的存在周期:
? ? ? <meta http-equiv=”Cache-Control” content=”no-cache”/>
? ? ? <meta http-equiv=”Cache-Control” content=”max-age=0″/>
? ? ? ? 注意点:与设备相关。一些使用不相的方法,一些没有Cache机制。还有一些不支持<meta/>但识别Cache-Control:no-cache的
? ? ? HTTP头。也可应用于图片的缓存。
(八)通用的元数据
周期性刷新。必须配合使用。不是所有浏览器都支持。
? ? ? <meta http-equiv=”Cache-Control” content=”no-cache”/>
? ? ? <meta http-equiv=”refresh” content=”15;URL=yuanxin.xhtml”/>
(九)常用标签介绍
注释:<!– — >,和HTML和WML1.X相同。
换行:<br/> ,和HTML和WML1.X相同。
水平线:<hr/>。不能包含在<p></p>标签之内。
标题:<h1>-<h6>(不同的大小和样式),有些设备看起来一样的。
? ? ?
(九)常用标签介绍
字体样式:XML可以使用标签来改变字体样式( <b>、<i>、<small>、<big>等)。但一些浏览器只支持其中的部分,不支持的忽略,不会出错。 WCSS 控制字体格式。
与格式化文本:在XHTML MP中,标签间空白不显示,此外,段落中2个或更多的空白只显示一个,如果想保持文字的格式,可使用<pre>。
列表:<ul>、<ol>、<li>。对于<ol>元素,可以用属性 start 指定数字开始的序列。还可以用WCSS来做更xx的控制。
显示图片:<img>标签用来显示图片。和HTML一样。如果文件没发现或者图片格式不支持,显示alt属性文本。Height和width属性来指定图片显示区域的高度和宽度
(九)常用标签介绍
除了老的WBMP图片格式,WAP2.0还支持WEB上的图片格式(gif, jpg和PNG),但WAP2.0无线设备支持上面图片格式的某些。GPRS-gif,CDMA-png。可以通过accept HTTP header判断设置。
? ? ? ? 关于大图片的发布:很多WAP浏览器都没有水平滚动功能。如果宽度大于显示屏,很多的WAP浏览器会裁切图片。图片的按比例缩小不能帮助提升性能。大图片还会造成访问站点用户的费用。
? ? ? 优化图片:1、用制图软件按比例缩小图片;2、如果是gif图片,减少颜色,但降低了图片质量,权衡。3、如果是jpg图片,保存一定的压缩比例,依然是权衡。
? ? ? 使用multipart messages,先下载的XHTML MP文档,
(九)常用标签介绍
后请求图片,产生多个请求。该方式可以使文档和图片在一个请求,意味着一个页面只有一个请求。减少服务器的压力。
表格:创建表格,需要使用<table>、<tr>、<td>标签,默认表格没有边线。属性有rowspan和colspan。
锚链接:一般用在导航。标签为<a></a>。属性href定义指定的URL。当前页面位置的跳转:先设置目标链接,通过id属性设置;再设置锚链接的URL为#id名称。
? ? ? 对锚链接设置快捷键:<a>标签的accesskey属性,有效的值为:*,#,0-9。还可以用-wap-accesskey设置。
(九)常用标签介绍
选择列表:选择列表使用<select>标签,包含一个或更多的<option>标签。<select>标签的name属性定义选择列表的名字。name用来取得被选择的item的值(option的value属性定义)。
? ? ? 1.? 多重选择列表:Option的selected属性用来设置默认的option。如果想设置多重选择列表,可使用<select>标签的multiple属性,只有一个{wy}值‘multiple’。
? ? ? 2.? Option分组:使用<optgroup>标签,label属性定义option组的名称。
(九)常用标签介绍
选择列表
(九)常用标签介绍
输入元素:Text field、Password fireld、Checkbox、Radio button、Hidden field。通过<input>元素创建。传输数据到服务器,<input>元素必须和<form>一起使用。Type属性用来定义input元素的类别。Name属性用来定义名称,方便取得用户数据。
? ? ? <input type=”text” name=“taobao” maxlength=”16″ value=“yuanxin”/>
? ? ? input { -wap-input-format: “10N”}
? ? ? <input type=”password” name=“taobao”/>
? ? ? <input type=”checkbox” name=“taobao” value=“yuanxin” checked=”checked”/>
? ? ? <input type=”radio” name=“taobao” value=“yuanxin” checked=”checked”/>
? ? ? <input type=”hidden” name=“taobao” value=“yuanxin”/>
(九)常用标签介绍
13.? form元素:<input>、<select>等元素不能直接包含在form元素下,XHMTL MP标准规定必须有块级元素。如果有non-ASCII字符,需使用POST方法来避免编码问题。
? ? ? <form? method=”get” action=“yuanxin.asp”>? ? ? ? <p> ???? ? ? ?? ? ? <input …> ????? ? ? ? ? ? ? <select …>? ? ? ? </p> </form>
14.? 提交按钮:所有的表单都必须包含一个提交按钮。<input>元素用来创建一个提交按钮。而type属性被定义为’submit’。
? ? ? <input type=”submit” value=”OK”/>? ? ? ?
(九)常用标签介绍
15.? 重置按钮:并不是必须的。<input>元素用来创建一个重置按钮。而type属性被定义为’reset’。
? ? ? <input type=”reset” value=”Default”/>
16.? Div和Span。?
三、WCSS/WAP CSS
(一)WCSS 介绍
WCSS/WAP CSS/Wireless CSS/Wireless Profile CSS(WAP Cascading Style Sheet )
是CSS2的子集+一些WAP特有的扩展
目的:定义文档的风格和布局,从文档内容中分离。
重要性:不同的手机设备有多样的特征,比如屏幕大小。
WML不支持WCSS
W3C CSS Mobile Profile和WAP CSS 不同。
(二)使用WCSS的优势
主要:学习成本降低,可用相同的开发工具,可用WEB浏览器浏览。
表现和结构的分离:匹配不同无线设备的特征(屏幕大小)、不同客户端代理(PC、PDA、手机);降低维护成本(新手机);改变视觉和布局仅需CSS;重复使用CSS;便于工作细分。
比WML更好的控制表现:可以定义元素的color,font,background,border,margin,padding等属性。
移动设备{dy}次访问站点下载样式(Cache)。
使用外部WCSS,XHTML MP的文档大小变小,提高下载时间。
(三)使用WCSS的劣势
不同的WAP浏览器对WCSS的支持不同,可能一个属性在这个WAP浏览器上支持,而另外一个不支持。
外部的WAP CSS可能增加{dy}次访问页面的请求时间。原因:外部WCSS不存在于手机的Cache,必须从服务器下载;XHTML MP文档和外部的WCSS下载是不同的请求,增加了服务器压力;如果使用一个WCSS定义WAP站点的所有表现,该文件大小可能很大;WAP浏览器需要解析WCSS到XHTML MP文档。
(四)MIME 类型和文件扩展名
MIME类型: text/css。
文件扩展名:.css
(五)WCSS的语法规则
WCSS声明:selector {property: property_value}
多个属性允许的,用’;’分隔。
多个选择器也是允许的,用‘,’分隔。
注释:/*orz*/,WAP浏览器将忽略这些内容。
(六)如何在XHTML MP文档中应用
链接外部WCSS(推荐),放置在文档的head部分,用style属性定义WCSS样式
<link href=“url” rel=“stylesheet” type=“text/css”/>,可以多个,无需修改rel和type属性。
<style type=”text/css”> ?some WCSS statements </style>
<hr style=”color: blue”/>
(七)不同的选择器
类型选择器:h1 { font-style: italic} 元素名称必须小写。?
Class选择器: .class { color:blue} 对应标签的class属性,还可以联合元素名称使用 h1.class {color:blue}。
ID选择器:#id {color:red} 对应标签的id属性也可联合元素名称。
通用选择器:* { color:blue} ,所有的标签。注意:在某些WAP浏览器上会使样式渲染变慢。(建议不要用)
(八)常用的属性值
长度:%,px,em,ex,cm,mm,in,pt,pc(值和单位之间不允许有空格:margin-top:1px而不是margrin-top:1 px)。?
颜色:rgb(r%;g%,b%)、rgb(r,g,b)、#rrggbb、#rgb、red(16种)。
URL:ul {list-style-image: url(bullet.gif)} 无引号、双引号、单引号均可。
(九)字体和文本属性
字体名称:p {font-family: “Times New Roman”} 名称中有空格或多个单词必须用引号包含。
字体大小:p {font-size:12px},也可以用xx-small,x-samll,small,medium,large,x-large,xx-large
字体样式:斜体、粗体和下划线(font-style,font-weight和text-decoration)。
设置文本对齐:text-align和float。WAP中float(left,right,none)常用在img和table标签
(十)列表属性
改变无序列表的图标(list-style-type ):默认disc,其他值:circle,square,none。可以应用在ul和li元素上。
改变有序列表的次序:默认decimal,其他值:upper-alpha(A),lower-alpha(a),upper-raman(I),lower-raman(i),none
3.? ? 使用图片文件作为小图标:list-style-image: url(bullet.gif) 。注:Openware WAP浏览器本地保存了一些icon,可以使用这些作为小图标,例如:ul {list-style-image: localsrc(“rightarrow1″)}
(十)列表属性
(十一)颜色属性和border属性
设置前景和背景颜色:color、background-color属性。
设置border样式:border-style(border-top-style等)属性,值有很多,但只有none和solid被WAP浏览器广泛支持。table {border-style: solid}
设置border宽度:border-width(同上)属性,值为数值,还接受thin、medium和thick。注:值设置border-width,border并不可见,必须设置border-style非none值。
设置border颜色:border-color(同上)属性。注意点同上。
设置border属性的快捷方式:table {border: 2px solid black}
? ? ? 顺序自由。
(十二)WAP特有的CSS扩展
快捷键:-wap-accesskey ,用来指定XHTML MP元素的快捷键。
Input:定义文本框是否可以留空,什么类型,可以输入多少字符
Marquee:在屏幕上滚动一些内容。
(十二.1)WCSS快捷键扩展
给元素定义快捷键:-wap-accesskey属性
可用的属性值*,#,0,1,2,3,4,5,6,7,8,9
? ? ? input.wcss_class {-wap-accesskey: 4}
直接定义*和#违反CSS2语法。需要使用Unicode转义字符\2a和\23。但是有些WAP浏览器(Sony Ericsson WAP 浏览器 )要求使用\2a 和 \23,一些(Openwave 手机浏览器) 要求使用* 和#。
与元素的accesskey属性同效,如同时定义,显示该属性值。
只用于四个元素a, input,label,textarea,其他定义也无效。
? ? ?
(十二.2)WCSS输入扩展
由两个属性组成:-wap-input-famat和-wap-input-required,对应于WML中<input>元素的format(定义类型和字符数量)和emptyok(是否可以留空)属性。
早些的移动设备上WAP浏览器不支持,但支持format和emptyok属性作为XHTML MP的扩展。为了更好的兼容性,建议WCSS和WML都使用。
? ? ? <input type=”text” format=”N” style=’-wap-input-format: “N”‘/>
控制文本框的类型和字符数量:-wap-input-format。需应用在<input type=“text”>, <input type=“password”>和<textarea> 标签上,如应用在其他标签无效。格式字符(大小写敏感):a(小
? ? ? 写字母或符号),A(大写字母或符号),n(数字或符号)
(十二.2)WCSS输入扩展
N(数字),x(小写字母或数字或符号),X(大写字母或数字或符号),m(任何字符,默认小写字母输入模式,可换大写模式),M(任何字符,默认大写字母输入模式,可换小写模式)。属性值必须包含在引号内,由于部分Openwave 手机浏览器不支持单引号,建议使用双引号(<input type=“text” style=‘-wap-input-format: “N”’/> )
? ? ? -wap-input-format: “2N” (最多两个数字)? ? -wap-input-format: “NN” (两个数字)? -wap-input-format: “*N” (无限个数字)
? ? ? -wap-input-format: “A*a” ({dy}个大写字母或符号,0-n个小写字母或符号)? -wap-input-format :“*M”(默认)
? ? ? 格式字符前使用数字或*的原则:1、只允许一次;2、在{zh1}
(十二.2)WCSS输入扩展
如果值语法错误,则WAP浏览器忽略该属性。
? ? ? 也可以包含转义字符:’\’在WCSS中是特殊字符,使用’\\’。
控制文本框是否可以留空:-wap-input-required(值为:false和true ),帮助控制文本框是否可以空白。使用元素同上。
? ? ? 当-wap-input-format和-wap-input-required冲突时,以required优先。
(十二.3)WCSS Marquee扩展
可以在屏幕上滚动一些内容(一行文字,一个图片,一个链接等),但一些WAP浏览器只支持滚动文字。当内容超过屏幕时很有用。
包含四个属性和一个属性值:-wap-marquee属性值(display属性的值),-wap-marquee-dir属性(指定marquee的方向,值:ltr,rtl-默认),-wap-marquee-loop属性(指定marquee重复的时间,infinite永远,大多数默认为1),-wap-marquee-speed属性(指定marquee的速度,值:slow,normal-默认,fast),-wap-marquee-style(指定marquee在屏幕上如何滚动,有三个值:scroll-默认,slide,alternate)
? ? ? ? ? ? ?
(十二.3)WCSS Marquee扩展
二、WAP2.0设计原则
WAP2.0设计原则
设计站点前的准备工作
? ? ? 界面设计、挑选核心服务、WAP设备特性统计(浏览器等)
关注导航模型
? ? ? 一致易学的导航模型。简洁xx且快速的信息。尽可能减少输入(考虑选择列表、复选框或单选按钮等。-wap-input-format:*N;避免模式转换。首字母。 )
设计导航层次
? ? ? 导航模型一致、少用‘返回’链接、避免深度太深(4-5)、返回首页或目录
? ? ? ? ? ? ?
WAP2.0设计原则
考虑小尺寸屏幕的设计
? ? ? 确保内容可见、<title>少于14个字符、一致的样式、减少水平滚动、利用对齐属性增加可读性(1-3)、充分利用空间(图文)、避免过多使用文本样式属性、使用短小xx的词语、避免使用过多的颜色并保持一致、不用名字描述颜色。
保持较短的文档大小:内存有限,不支持WML的多card,使用锚链接等
? ? ? 不要包含长注释、去除缩进或空格、尽量少用id和class
6.? ? ? 用户任务流流畅和图片合理使用
? ? ? 图片不是用户目的尽少使用、避免使用大表格。
? ? ? ? ? ? ?
WAP2.0设计原则
7.? ? ? 页面上提供足够信息
? ? ? 首屏常用导航链接、搜索域、登录屏幕和大量信息;上下滚动困难,表单交互要简短。
为用户操作提供信息反馈
? ? ? 对用户操作、错误和问题情况提供正确的反馈。
9.? ? ? 尽可能减少图片数量和减小图像容量大小
? ? ? 每张图片都是一个请求,降低页面显示的速度,且内容可能重排序,占用时间和资源,全站规划相同图片。
定义图像的高度和宽度属性
? ? ? 定义了预占位,改善用户体验,
? ? ? ? ? ? ?
WAP2.0设计原则
11.? ? ? 谨慎使用表格
? ? ? 单元格宽度使用{jd1}宽度;嵌套层数增加,页面复杂度和处理时间增加;表格边框避免太粗。
12.? ? ? 考虑添加样式定义选项
? ? ? 权衡!
使用Unicode字符编写XHTML MP内容? ? ?
进行可用性测试
1. 设计站点前的准备工作
在设计一项既要面向移动设备又要面向PC的服务的时候,首先需要进行移动设备用户界面的设计。把面向移动的服务扩展到PC环境通常要比其相反方向扩展要容易一些。
如果起始站点是一个PC Web站点,强烈建议把PC服务分解成若干部分。在移动环境中,仅挑选那些可以作为服务核心的部分。在设计移动服务时,要把注意力集中在这些核心部分上。
研究市场上各种移动浏览器的物理特性,以便用XHTML和CSS进行有效的应用软件设计。你需要知道文档、样式表以及图像的{zd0}许可大小,可以用于显示内容的屏幕空间的物理大小,以及为其它物理实体,如软键文本、图标、标题等,预留的屏幕空间。诺基亚手机有一个包含图标的标题行,标题行还可以包含XHTML页面的标题。还有一个用于显示XHTML页面(不包括标题)的内容区域,以及包含一个或多个软键文本的区域,软键的个数取决于移动设备的类型。
可以从http://www.forum.nokia.com/下载诺基亚移动因特网工具包。还可以在若干诺基亚设备仿真器中的任一个上测试你编写的内容是如何显示的,仿真器也可从上述的Web站点下载。
2 .设计优秀站点的基本原则
XHTML MP 和CSS的引入创建了多种新的用户界面结构。XHTML MP包含的元素比WML多,并且利用CSS,可以通过多种方法修改元素的可视化显示。XHTML MP为服务提供者提供了更多把他们的服务变得更有吸引力的可能性,但同时,XHTML MP也增加了设计的复杂度,从而在可用性上面临更多的挑战。
3 .关注导航模型
应该基于一致、易学的导航模型创建便于使用的用户界面。这比使用XHTML的所有花哨的显示功能都重要。
移动用户的需求及期望与使用台式PC的用户不同。移动用户不是浏览者,他们更希望能够快速、轻松地访问特定信息。因此,应提供简洁、xx且快速的信息。
避免在过多页面或闪烁屏幕中显示核心服务内容;然而,可以在其中显示一个小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服务,避免加入返回到之前访问过的页面的链接,因为诺基亚移动浏览器有一个{yj}的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>元素设置悬浮属性和其它属性来实现此目的(以及更多其它目的)。悬浮图像允许在图像旁边显示文本 ,从而利用了整个显示区域。
避免过多使用文本强调属性,如粗体,斜体和下划线等,因为这降低了小显示屏上内容的可读性。
如有可能,尽量使用短小、xx的字词,避免使用冗长、复杂的字词。
避免在同一页面中使用过多不同颜色。尽管颜色可以给一个服务带来更多“活力”,但是过多颜色会导致超载。使用颜色时要尽量保持一致性,例如,整个服务中的相同XHTML元素使用同一种颜色。
不要用名字描述颜色,例如,“按下红色链接继续”。没有彩色显示屏的客户终端会以黑色和白色显示彩色内容。
6 .保持较短的文档大小
因为移动设备中可用的内存有限,故应使文档尽可能短。然而,因为XHTML MP与WML不同,它不能在一个文档中支持多“卡片”,故把内容分为多个独立页面将会使载入的速度减慢。因此,应把所有相关信息结合在同一页面中,并利用分段锚来帮助跳转至相关章节部分。
保持文档较短的有用方法包括:
代码中不要包含长注释。尽管在代码中添加注释通常是良好的编程习惯,但对于移动设备来说,这是不适用的。
在缩进时利用tab而非空格,或者不使用缩进。空格越多,文档大小增加越快!
文件名、CSS类和CSS ID应使用简短名称。
在可能的地方,用层叠规则定义样式,而不是在元素中用类或属性ID。例如,在WAP CSS样式表中,使用如下的属性:
p (color:red)
而不是下列的类属性:
.red {color:red}
这样就没有必要在文档中的每个<p>元素内定义字符串class=”red”。
7. 为移动电话设计应用软件
当开发人员要决定移动终端的各种应用软件应包含什么信息时,他们应考虑用户在什么情况下使用移动电话。服务内容应满足目标用户群的需要,并且应该对最常见的任务进行{zy}化。由于较小显示设备便于移动,所以,在没有PC机的情况下,用户可能会首先使用移动电话访问英特网以及获取急需信息。相应的范例包括快速访问航班信息、查看简讯和天气情况等。但用户使用移动电话上网冲浪的可能性要小。
8. 保持用户任务流的流畅及图像的合理使用
彩色页面看起来很诱人,但当图像传输使得服务减慢时,彩色页面也许并不让人觉得很舒服。根据可用性研究1, 用户不太热衷于那些由于图像传输而中断他们任务流的服务。特别地,当用户在搜寻目标页面时,大的图像就不太合适。含有信息价值的图像是令人青睐的,但在多数情况下,用户或是关掉图像以节省时间和金钱,或是不等图像下载就切换到下个页面。在下载所有图像之前允许用户继续浏览页面,是很重要的。
大表格也许会产生相似的问题——也就是说,在某一页面下载完之前,用户的操作被冻结;或者在页面下载完之前不能继续进行其他操作。因为移动电话显示屏的大小不同,所以开发人员应确保即使是在最小的显示屏上,也能够阅读数据表格;通常这些数据表格要进行压缩以符合显示屏的要求。
9 .结构对新用户要简单但也不能忽视熟手用户
在移动通信服务中,浅层结构似乎常常比深奥结构更容易理解。链接和页面应该冠以描述性的名称,这样可以帮助用户找到他/她需要的信息。
很难说在一个链接列表页面上应该提供多少个链接。如果链接明显属于同类且容易浏览(每个链接占一行,以字母顺序,或另外以逻辑顺序排列,这样用户就不必把每个链接都读一遍),那么,比较好的方法是在一个页面上提供30个链接,而不是每个页面上提供5个链接,总共需要6个页面。如果有好几十个链接,在显示这些链接前提供排序选项是个不错的主意。如果链接能放置在一行上,则选择起来一目了然,页面也更美观.
WAP 2.0没有<do>元素,相反,它们由access keys取代。然而,大多数用户似乎并不了解access keys元素,并且无法找到他们。为了帮助用户理解accesskeys的概念,开发人员应确保accesskeys在屏幕上可见,而且以类似电话键的形式出现。
如果有可能,应提供搜索功能。熟手用户很欣赏这个功能,正如新手用户浏览xx站点一样。
10. 在页面上提供足够信息
交互式页面应该简短,信息页面应该较长32。不建议使用门面页面来启动站点,门面页面除了问候访问者和显示logo外,没有其他作用。较好的方式是用户能够直接访问服务。
在XHTML下,信息以页面形式下载,而不是以WML下的deck形式。这意味着向用户提供单个页面上的信息以支持他们的任务流就显得更为重要。由于XHTML页面是各自独立下载的,所以在XHTML页面间来回切换可能会消耗更多的时间。后向导航尤其存在这种情况,在这些情况下页面不能缓存,例如,与付帐或提供私人信息有关的系统就是这种情况。
任何页面的{dy}屏(最顶端)都是最重要的。所有经常使用的导航链接、搜索域、登录屏幕和大量信息都驻留在那儿。用户可在页面的剩余部分加载之前向前浏览,并且无需滚动页面。
应避免在页面顶端放置横幅广告或没有任何信息的图形。{zh0}是把广告放在页面的左侧或右侧边框。
上下滚动页面是困难的,因此带有表格的交互式页面不应该太长,因为用户不能确信他们是否已经填完长表格上的每个域。如果表格所占空间超过两屏,用户可能容易失去控制感。
用户访问的目标页面应该具有足够多的信息。例如,如果目标页面包含故事或用法说明,则应该在一个页面上显示所有内容。当用户浏览一个长而信息量较大的页面时,能够在页面内引导用户的子标题将帮助用户浏览页面。
信息是以单个页面下载而不是以deck下载的这个事实是影响导航以及WML和XHTML之间结构性差异的{zd0}单个变化。
11 .为用户操作提供信息反馈
开发人员应该对用户操作、以及错误和问题情况提供正确的反馈。例如,在用户点击链接之后,页面标题应该与链接名相同。减小导航步骤应该不增加用户的不安全感,例如,用户操作的确认页面是必要的,尽管这些页面需要再次点击。如果确认页面丢失,用户也许觉得她/他需要检查,以确认这一行为是否发生——这会导致更多次的点击。应该认用户觉得他们始终在控制着系统
如果出现问题,应提示用户下一步该怎么办。向用户解释期望输入的格式以及对必填项进行标记可阻止错误发生。
12. 尽可能减少图像数量和减小图像容量大小
应该认真考虑一个XHTML页面上图像数量和容量大小。页面上的每一幅图像就产生一次独立的来回,这反过来使整个页面的显示速度减慢。因此,应该尽量减少来回的数量。还要注意的是,当每次一幅图像到达移动设备时,整个页面的内容可能需要重新排列,这会占用时间和处理器资源。因此,一个仅有几幅图像的页面也许比一个有许多更小图像的页面下载得更快。如果有可能,建议在全部服务中各个页面上使用相同的图像;那么一个特定的图像只需下载一次且能够保存到高速缓存器中。例如,如果自定义的图像被用作bullet,则在整个服务中应该使用相同的图像。
TCP/IP 连接也许会造成页面下载速度的不同,即使其数据量相同。例如,下载一个包含四个图像(每个图像大小为2 KB 的XHTML页面)要比下载一个包含八个图像(每个图像大小为1KB的页面)的速度要更快。
如果使用WAP网关,则WAP网关应与GPRS支持GGSN放得近一点。在这个例子中,“近”是指数据延迟及数据包丢失的概率。由于HTTP重传,丢失信息会产生附加延迟。WAP网关和内容服务器间的时延应尽可能的小