WAP站点设计基础.docVIP

WAP站点，这似乎是一个有点落伍的东西。在诞生之初，它很简陋，只能通过一个叫WML的标记语言来搭建没有任何美感的文字+链接页面。而今，绝大部分WAP站点都开始使用xhtml标记语言，不过在iOS、Android风潮席卷全球的今天，这个演进似乎显得有点苍白无力。但在中国，WAP的用户群体依然是移动设备上网的绝对主力军。那么，到底该如何设计一个WAP站点呢？个人以为，需要从设备、浏览器、任务、场景四个方面入手。一个WAP站点好与坏，不取决于页面的绚丽程度，不取决于功能是否强大，而是取决于站点的兼容性。 一、用户使用的设备 “用户是通过什么设备访问我们的站点？”这是在搭建一个WAP站点之初，设计师需要考虑的第一个问题。一般来说，我们可以把用户使用的设备粗略的划分为【键盘机】和【触屏机】。 、键盘机： 屏幕物理尺寸小，可视区域小 用户对手机的操作受限于导航键 WAP站点，这似乎是一个有点落伍的东西。在诞生之初，它很简陋，只能通过一个叫WML的标记语言来搭建没有任何美感的文字+链接页面。而今，绝大 部分WAP站点都开始使用xhtml标记语言，不过在iOS、Android风潮席卷全球的今天，这个演进似乎显得有点苍白无力。但在中国，WAP的用户 群体依然是移动设备上网的绝对主力军。那么，到底该如何设计一个WAP站点呢？个人以为，需要从设备、浏览器、任务、场景四个方面入手。一个WAP站点好与坏，不取决于页面的绚丽程度，不取决于功能是否强大，而是取决于站点的兼容性。 一、用户使用的设备 “用户是通过什么设备访问我们的站点？”这是在搭建一个WAP站点之初，设计师需要考虑的第一个问题。一般来说，我们可以把用户使用的设备粗略的划分为【键盘机】和【触屏机】。 、键盘机： 屏幕物理尺寸小，可视区域小 用户对手机的操作受限于导航键 1. 可视区域小，就决定了用户在当前屏幕内看到的内容非常有限，用户往往是通过扫视第一屏的内容来决定是否继续向下浏览。我们在设计过程中，则需要按信息的重要度以降序的方式来组织，将最重要的信息在首屏呈现给用户。大部分情况下，logo和导航区块是必不可少的元素。如果你的站点是互动型的，还需要在header里体现出用户登陆状态和用户名。根据应用场景和任务的不同，少数页面可以省略header。 目前市面上低端机器的屏幕分辨率宽度基本都在176px以上，所以，针对最低端键盘机设计WAP站点时可采用176px的基准宽度来设计，页面高度不限，但最好不要超过7个屏高。同时还需考虑页面文件大小，页面文件大小最好控制在13k以内。 2. 键盘机的第二个特征决定了用户必须遵循既定的规则来移动焦点，例如：方向键、摇杆、滚轮、拨盘（BlackBerry）。正因为如此，我们在设计的时候，必须思考页面链接元素之间的内联关系，仔细计算用户的焦点移动轨迹。重要的信息最好是放在每一行起始位置。 、触屏机： 可视区域较大 操作所需面积大 用户操作行为跳跃 1. 可视区域大，决定了页面承载的信息量也比键盘机要多。现在市场上主流的触屏手机分辨率为320*480，屏幕宽度最低也是240。这时，如果将适配键盘机的WAP页面放到触屏机上来看，会出现大面积“被留白”的情况，视觉上将带给用户松散的感受。这时我们可以将240px作为基础宽度进行设计。 2. 触屏手机的屏幕大了，是不是我可以放更多的链接了？答案其实是否定的！用户通过手指、触控笔对手机进行操作。触控笔笔尖一般面积都在2*2mm左右，能进行比较精准的点击。而人的手指头则要大很多，为了确保用户不会出现误操作，我们在设计的时候，需要将链接的字号、行高、间距增大。国外研究某资料给出过参考值：食指所需最小操作面积为7*7mm、间距1mm；拇指所需最小操作面积为9*9mm、间距2mm。（资料待查阅后将补上原文链接） 有同学会问了，这个面积单位是毫米，如何在设计过程中我们如何换算成像素呢？这个根据每款屏幕的分辨率、dpi、物理尺寸的不同，换算结果都不一样，有关像素、dpi、厘米、英寸之间的换算关系，请学习这篇文章。 3. 众所周知，用户在操作键盘机的时候，在达到目标链接之前，基本都需要进行多次焦点移动的操作。而触屏机则没有这种限制，用户的操作大多不再受物理按键的局限，更多是受到视觉感官的支配，换句话说就是看哪点到哪。这时需要注意的是，因为失去了“焦点”的提示，我们必须对可点击的链接和不可点击的文字进行明确的视觉区分。 二、浏览器左右设计 大部分手机自带浏览器和第三方浏览器在操作方式和页面解析上都有着自己的特性。我们在设计之初，需要深入的了解它们各自的特性，这样我们才能对不同的方案进行权衡。本文针对焦点、操作键、HTMLCSS这三大基础因素就浏览器对设计的影响进行一番浅析。 、焦点如何移动 1. UCWeb浏览器 左右键：翻屏 上下键：