blog | 业余项目 | 关于Karry | RSS订阅 | 我在阅读 | 管理

WAP开发相关资源收集

交互原则

  1. Strive for consistency.力求一致
  2. Enable frequent users to use shortcuts.允许频繁的使用快捷键
  3. Offer informative feedback.提供明确的反馈
  4. Design dialog to yield closure.设计对话,告诉用户任务已完成
  5. Offer simple error handling.提供错误预防和简单的纠错能力
  6. Permit easy reversal of actions.应该方便用户取消某个操作
  7. Support internal locus of control.用户应掌握控制权
  8. Reduce short-term memory load.减轻用户的记忆负担
  1. 尽量减少操作的步骤
  2. 尽量利用点击来代替输入
  3. 时刻让用户知道自己所处的位置
  4. 与web保持一致且数据同步
  5. 为输入法让出空间
  6. 摘要形式展现信息
  7. 导航和提示处于明显的位置
  8. 减少滚动

界面简洁的途径:

  • 减少控件的数目,使程序的主功能显然易见,引导用户操作。
  • 当内容过多时,要突出重要信息,便于用户快速浏览。
  • 显示出错信息时,不要只告知用户程序出现错误,要提供有用的信息引导用户完成操作。
  • 手机上网的速度慢,一般在6k/s,这就要求页面的内容尽量精简,避免过多的图片。
  • 页面的内容控制在两屏以内,也不能空白。比如当用户支付电影票之后,不能只显示“支付成功”,可以引导用户使用其他功能。

操作方式

手机操作有物理按键和触摸等多种操作方式,当同样的程序要在多种操作方式下使用,需顾及手指点击时可点区域的大小。使用物理按键时,按钮可以只是两个字,选中控件即可操作,而iPhone的可点击区域最好不低于44×44像素。

分辨率种类(不完全统计):

  • 128*128  128*160 130*130  176*144  176*220 208*208 208*320  240*160 240*240 240*260
  • 240*320 240*400 240*432 240*480 320*240 320*320 320*400 320*480 345*800 352*416
  • 360*480 360*640 400*800 480*320 480*360
  • 480*640 480*800 480*854 480*864 640*480  800*480

手机浏览器兼容性测试结果概要

注意:以下所说的“大多数”是指在我们测试过的机型中,发生此类状况的手机占比达50%及以上,“部分”为20%到50%;“少数”为20%及以下。而这个概率也仅仅只限于我们所测试过的机型,虽然我们采集的样本尽量覆盖各种特征的手机,但并不代表所有手机的情况。

XHTML部分

大多数手机不支持的:

  • 表单元素的“disable”属性

部分手机不支持的:

  • “button”标签
  • “input[type=file]“标签
  • “iframe”标签。

虽然只有部分手机不支持这几个标签,但因为这些标签在页面中往往具有非常重要的功能,所以属于高危标签,要谨慎使用。

少数手机不支持的:

  • “select”标签:该标签如果被赋予比较复杂的CSS属性,可能会导致显示不正常,比如”vertical-align:middle”。

CSS部分

大部分手机不支持的:

  • “font-family”属性:因为手机基本上只安装了宋体这一种中文字体;
  • “font-family:bold;”:对中文字符无效,但一般对英文字符是有效的;
  • “font-style: italic;”:同上;
  • “font-size”属性:比如12px的中文和14px的中文看起来一样大,当字符大小为18px的时候你也许能看出来一些区别;
  • “white-space/word-wrap”属性:无法设置强制换行,所以当你网页有很多中文的时候,需要特别关注不要让过多连写的英文字符撑开页面;
  • “background-position”属性:但背景图片的其他属性设定是支持的;
  • “position”属性;
  • “overflow”属性;
  • “display”属性;
  • “min-height”和”min-weidth”属性;

部分手机不支持的:

  • “height”属性:对”height”的支持不太好,奇怪的是在我们的测试当中,仅仅只有很少部分手机不支持”width”属性;
  • “pading”属性
  • “margin”属性:更高比例的手机不支持”margin”的负值。

少数手机不支持的:

  • 少数手机对CSS完全不支持;

JavaScript部分

这部分测试相对不那么让人抓狂,要么干脆不支持,如果支持的话,对基本的dom操作、事件等支持度都还不错。但我们没有测试过很复杂的脚本。

在我们测试过的手机当中,支持(包括不完全支持)JavaScript的手机比例大约在一半左右,当然,对于我们来说,最重要的不是这个比例,而是要如何做好JavaScript的优雅降级。

其他

  • 部分手机不支持png8和png24,所以尽量使用jpg和gif的图片
  • 另外对于平滑的渐变等精细的图片细节,部分手机的色彩支持度并不能达到要求,所以慎用有平滑渐变的bar设计
  • 部分手机对于超大图片,既不进行缩放,也不显示横下滚动条
  • 少数手机在打开超过20k的测试页面时,会显示内存不足

开发中你需要注意的问题

  1. 手机网页编码需要遵循什么规范?
    遵循XHTML Mobile Profile规范(WAP-277-XHTMLMP-20011029-a.pdf),简称为XHTML MP,也就是通常说的WAP2.0规范。 XHTMLMP是为不支持XHTML的全部特性且资源有限的客户端所设计的。它以XHTML Basic为基础,加入了一些来自XHTML 1.0的元素和属性。这些内容包括一些其他元素和对内部样式表的支持。和XHTML Basic相同,XHTML MP是严格的XHTML 1.0子集。
  2. 网页文档推荐使用扩展名?
    推荐命名为xhtml,按WAP2.0的规范标准写成html/htm等也是可以的。但少数手机对html支持的不好。
  3. 为什么现今大多数的网站一行字数上限为14个中文字符?
    由于手持设备的特殊性,其页面中实际文字大小未必是我们在CSS中设定的文字大小,尤其是在第三方浏览器中。例如Nokia5310,其内置浏览器 页面内文字大小与CSS设定相符,但是第三方浏览器OperaMini与UCWEB页面内文字大小却大于CSS设定。经测试,其文本大概在16px左右。 假如屏幕分辨率宽度为240px,去除外边距,那么其一行显示14个字以内,是比较保险(避免文本换行)的做法。
  4. 使用WCSS还是CSS?
    WCSS (WAP Cascading Style Sheet 或称 WAP CSS)是移动版本的CSS样式表。它是CSS2的一个子集,去掉了一些不适于移动互联网特性的属性,并加入一些具有WAP特性的扩展(如-wap-input-format/-wap-input-required/display:-wap-marquee等)。 需要留意的是,这些特殊的属性扩展并不是很实用,所以在实际的项目开发当中,不推荐使用WCSS特有的属性。
  5. 避免空值属性
    如果属性值为空,在web页面中是完全没有问题的,但是在大部分手机网页上会报错。
  6. 网页大小限制
    建议低版本页面不超过15k,高版本页面不超过60k。
  7. 用手机模拟器和第三方手机浏览器的在线模拟器来测试页面是不是靠谱?
    有条件的话,我们当然建议在手机实体上进行测试,因为目标客户群的手机设备总是在不断变化的,这些手机模拟器通常不能完全正确的模拟页面在手机上的显示情况,比如图片色彩,页面大小限制等就很难再模拟器上测试出来。当然,一些第三方手机浏览器的在线模拟器还是可以进行测试的,第三方浏览器相对来说受手机设备的影响较小。

参考网站

交互

开发

Leave a Reply