时间： 23:22 来源： 作者：责任编辑2
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. 众所周知，用户在操作键盘机的时候，在达到目标链接之前，基本都需要进行多次焦点移动的操作。而触屏机则没有这种限制，用户的操作大多不再受物理按键的局限，更多是受到视觉感官的支配，换句话说就是看哪点到哪。这时需要注意的是，因为失去了&焦点&的提示，我们必须对可点击的链接和不可点击的文字进行明确的视觉区分。
二、浏览器左右设计
大部分手机自带浏览器和第三方浏览器在操作方式和页面解析上都有着自己的特性。我们在设计之初，需要深入的了解它们各自的特性，这样我们才能对不同的方案进行权衡。本文针对焦点、操作键、HTML&CSS这三大基础因素就浏览器对设计的影响进行一番浅析。
Ⅰ、焦点如何移动
1. UCWeb浏览器
左右键：翻屏
上下键：焦点逐个移动
长按左右键：加速翻屏
长按上下键：加速焦点纵向移动
2. 手机QQ浏览器
左右键：横向移动焦点
上下键：纵向移动焦点
长按左右键：翻屏
长按上下键：加速焦点纵向移动
3. Opera mini浏览器
这哥们是最PC化的手机浏览器。内置伪鼠标一枚，左右键、上下键均为鼠标横向、纵向移动，单次按键大概位移10像素，长按加速。
了解浏览器的焦点移动规则后，一方面有利于我们对某个控件信息进行优化组织，另一方面对于多个设计方案进行取舍的时候也有莫大的帮助。当我们充分考虑焦点移动路径、用户操作频次、某信息块权重等因素后，往往能迅速的找到最适合的设计方案。
小提示：QQ浏览器和UC浏览器默认会给所有的图片赋予焦点，也就是说哪怕页面上某张图片没有链接，但用户操作过程中焦点也会路过这张图片。
Ⅱ、操作键
键盘机的浏览器（自带、第三方）都有左右功能键。左功能键一般为菜单键，右功能键一般为返回、退出键。用户在进行&返回&操作时，基本都会通过右功能键完成。触屏机虽然没有物理功能键，但绝大部分的浏览器都在屏幕内虚拟了一排功能键。并且UCweb、QQ、Opera等第三方主流浏览器均提供缓存功能，页面在返回的时候均为秒读。因此，我们不需要频繁的为用户提供&返回上一页&的链接。后续的系列文章中，将有专门的章节对手机导航系统进行探讨。同时，某些浏览器也提供重定位至页顶、至页尾以及快速翻屏的操作，当我们在处理超长页面时，对于&Top&这样的回顶部锚点的处理也需要慎重。
Ⅲ、HTML & CSS支持度
各大厂商大多都有一套自制内核的浏览器，甚至同一个平台下的不同系列手机浏览器的解析效果也五彩缤纷，再算上市面上的多款不同内核的第三方浏览器，这真的让人无比头大！因为公司的兼容性研究资料尚未开源，所以这里只能列出一些高危的风险点。有兴趣的朋友可以自己着手研究下，有条件的公司也建议系统的做一次深入测试。这些资料对于WAP站点的设计有着决定性的影响！
font属性：176px的屏宽下，12号字一行可以放14.5个汉字，但实际上部分浏览器会将字体放大至14号，所以安全字数是12个汉字/行，并且大多不支持自定义字体；
background属性：背景色支持很好，但背景图片支持度则要差很多，如果你需要用到背景图片，最好设置一个类似的背景色做优雅降级处理；
float、position属性：千万别照搬Web的层叠布局理念，这是两个高危属性，老老实实搭积木吧；
margin、padding属性：这两个也支持不好，所以不等高、宽的设计方案在实现过程中兼容性问题很大；
我们在处理加粗、高亮、current状态、链接颜色等设计元素时，需要充分考虑方案的兼容性。因此建议所有刚接触WAP设计的同学，在动手之前，先认真的了解下手机浏览器对于HTML & CSS的限制，这能帮你在工作中快速的给出最合适的设计方案。
三、人们用手机完成什么样的任务
几年前有人曾说过&手机上最适合的任务就是阅读&。而随着移动互联网概念、网络条件以及移动设备的不断升级，手机上各种类型的站点和应用层出不穷，越来越多PC端的产品被移植到手机端。本文只是粗浅的介绍三种常见的任务类型，在设计过程中我们可以反复问自己一个问题&用户是希望通过这个产品完成什么样的任务&，牢牢记住这个问题便能无往不利。
Ⅰ、阅读型
用户在这类应用场景下核心的诉求就是阅读。把&阅读&展开后又能进一步发现用户的子诉求：快速呈现内容、完整的目录导航、优秀的排版、随时记录阅读进度&&将这些子因素一个个的拆解开来分析，然后再组装起来便能产出一份不错的阅读类产品。
Ⅱ、互动型
该类产品的核心应用场景就是互动，无论是人与人的互动亦或是人与机器的互动。那么如何响应用户的操作则是这类产品的设计重点。响应也分很多种，有的在用户知晓响应之后还需要引导其进一步操作、有的需要用户持续性的关注、有的仅仅是通知用户即可。这类产品也是目前最为火爆的：新浪微博、人人网、腾讯WAP QQ等等都是其中的典范。
Ⅲ、工具型
顾名思义，用户需要通过这类产品解决某一个问题。因此，&以任务为导向，并对其进行拆解设计&则是该类产品的设计核心。最具代表性的产品是搜索引擎，它的核心任务就是帮助用户搜索信息。
Mai同学比较详细的对iPhone应用的类型进行了分析，虽然跟WAP站点存在某些差异性的东西，但本质性的东西却有着异曲同工之妙。
四、用户的使用场景
手机这样的移动设备与PC机最大的区别就在于用户总是随身携带，用户在任何场景下都有可能掏出手机来把玩一番：公车、地铁、商场、大马路、床上、厕所&&但这些场景均有一个共同点：用户非常容易被周遭环境所干扰而中断任务，因此手机上只适合做单线程的任务！
围观: 9999次 | 责任编辑：包子
您可以分享到:
评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
24816 人浏览
9093 人浏览
2989 人浏览
10037 人浏览
11453 人浏览下次自动登录&|
当前位置：
微网站与传统网站的区别(正文)
微网站与传统网站的区别
随着智能手机的普及，越来越多的企业开始意识到移动互联网的潜力，于是微网站应运而生，一般来说，微网站制作与传统web网站有着很大的区别，微网站的制作应考虑到以下这些因素：微网站与传统网站的区别微网站的特点主要有：1.可移动性2.用户群体的特性：手机用户3.网站载体的特性：手机屏幕因此我们在建设微网站时应考虑到以上三点，虽然手机网站营销拥有广大的客户群体，但如何做好传统企业在wap领域的营销活动，目前还是一个很新的话题。与传统互联网一样，企业要开展wap网络营销，也需要建设自己的wap网站。虽然在表现形式上，微网站要弱于一般的网站，对于图片、动画等表现力度不够，但麻雀虽小，五脏俱全。目前微网站制作时主要采用WML语言进行编写，另一方面由于手机的屏幕尺寸和cpu处理能力有限，专门为手机进行优化的网站更为方便用户浏览，这就要求手机网站的设计应适应手机浏览。本文源自于番禺网站制作/cn/news_view.php?id=914。
欢迎转载，转载请注明作者和出处！
责任编辑：刘静
更多相关资讯：
热门产品分类温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
LOFTER精选
阅读(119)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
loftPermalink:'',
id:'fks_086067',
blogTitle:'手机wap网站和普通web网站的区别',
blogAbstract:'制作维护与传统的web的区别就在于所使用的语言有所不同。&web下可以使用html或者asp，aspx等等，在wap里就是wml，必须按照wml的规则来编写页面。&域名和web没有任何区别。&空间方面，普通的web空间一般是不支持wml的，要使空间支持wml，必须经过设置：&如何在IIS上搭建WAP网站&1．创建一个站点文件夹 首先你要创建一个独立于你的主站点的新的站点文件夹（若站点是建立在同一个服务器上面的话），这样你下面要做的改动才不会影响别的站点。&2．在IIS 平台创建一个新的MIME类型',
blogTag:'wap网站',
blogUrl:'blog/static/',
isPublished:1,
istop:false,
modifyTime:0,
publishTime:2,
permalink:'blog/static/',
commentCount:0,
mainCommentCount:0,
recommendCount:0,
bsrk:-100,
publisherId:0,
recomBlogHome:false,
currentRecomBlog:false,
attachmentsFileIds:[],
groupInfo:{},
friendstatus:'none',
followstatus:'unFollow',
pubSucc:'',
visitorProvince:'',
visitorCity:'',
visitorNewUser:false,
postAddInfo:{},
mset:'000',
remindgoodnightblog:false,
isBlackVisitor:false,
isShowYodaoAd:false,
hostIntro:'QQ',
hmcon:'1',
selfRecomBlogCount:'0',
lofter_single:''
{list a as x}
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}想知道wap网站的一些基本常识,和普通网站有何区别?
- 第一专业IT门户网站
想知道wap网站的一些基本常识,和普通网站有何区别?
想知道制作\维护\域名\空间之类和普通的有何区别啊
制作维护与传统的web的区别就在于所使用的语言有所不同。 web下可以使用html或者asp，aspx等等，在wap里就是wml，必须按照wml的规则来编写页面。 域名和web没有任何区别。 空间方面，普通的web空间一般是不支持wml的，要使空间支持wml，必须经过设置： 如何在IIS上搭建WAP网站 1．创建一个站点文件夹 首先你要创建一个独立于你的主站点的新的站点文件夹（若站点是建立在同一个服务器上面的话），这样你下面要做的改动才不会影响别的站点。 2．在IIS 平台创建一个新的MIME类型 先选择WAP站点的属性，再加入MIME类型，然后选择HTTP Headers标签。 在MIME Map部分，点击File Type并且输入以下信息： Associated Extension MIME Type wml text/vnd.wap.wml wmlc application/vnd.wap.wmlc wbmp image/vnd.wap.wbmp wmlsc application/vnd.wap.wmlscriptc wmls text/vnd.wap.wmlscript wsc application/vnd.wap/wmlscriptc 3．现在，你就可以把你的网站内容加到站点文件夹里面了。 希望我的回答对楼主有用，下面是一些非常基础的资料： 什么是WAP? WAP是Wireless Application Protocol（即无线应用协议）的缩写。 这是一个使用户借助无线手持设备，如掌上电脑，手机，呼机，双向广播，智能电话等，获取信息的安全标准。 WAP支持绝大多数无线网络，包括GSM, CDMA, CDPD, PDC, PHS, TDMA, FLEX, ReFLEX, iDen, TETEA, DECT, DataTAC, 和Mobitex。所有操作系统都支持WAP，其中专门为手持设备设计的有PalmOS, EPOC, Windows CE, FLEXOS, OS/9及JavaOS。 一些手持设备，如掌上电脑，安装微型浏览器后，可借助WAP接入Internet。 微型浏览器文件很小，可较好的解决手持设备内存小和无线网络带宽不宽的限制。 虽然WAP能支持HTHL和XML，但WML才是专门为小屏幕和无键盘手持设备服务的语言。WAP也支持WMLScript。这种脚本语言类似与JavaScript，但对内存和CPU的要求更低，因为它基本上没有其他脚本语言所包含的无用功能。 怎么使用WAP？ 如果您想利用手机进行网上冲浪，首先您的手机应具备WAP功能，目前手机厂家纷纷推出具有WAP功能的手机，例如 Nokia 7110、Ericsson R320sc、Motorola LF2000www、Simens s35等，并且需要到中国移动通信营业厅申请开通数据业务功能。然后您就需对手机按要求进行设置： 接入号码 17266 → 网关IP地址 10．0．0．172 → 移动梦网WAP总站主页域名： → 将通讯方式（或传输方式）设为& GSM数据& → 拨号方式采用&模拟拨号方式&→ 用户名和密码均为WAP 其他设置视手机不同型号而异。 现以Nokia 7110手机为例，连接类型为&持续连接&；安全保护为&关&；鉴定类型为&普通&；数据通信类型为&模拟&；数据通话速度为& 9600&。 这样依据菜单进行操作就可畅游互联网络了。不论在何时何地，只要按动手机按钮，因特网的精彩世界就可以立刻展现眼前：查看天气预报、股票信息、浏览内容各种新闻、健康常识，还可以上网玩各种游戏等。尤其是&全球通 WAP&服务还同时提供电子商务功能，只需要动一动手指，就可以完成各种交易。您的生活和工作方式由此可能悄悄改变，更精彩的世界将伴你而行，更多的机遇尽在掌握。 WAP的六层协议 WAP的协议栈与Internet的协议栈非常相似，最大的区别是它对Internet的协议比如HTTP进行了优化，以便能适应移动通信系统低带宽、大时延的特点。 在网络层上，WAP支持大部分目前使用的无线通信网络，如GSM、CDMA、TDMA等。其主要改进表现在： WAP的协议栈 1．将HTTP
等待您来回答
该问题来自：太平洋电脑网是首家以专业电脑市场联盟为基础的IT资讯网站，为IT企业与终端用户提供全面、权威、专业的IT资讯服务。手机领域专家
当前分类官方群讨论、解答、交流电脑数码相关的疑难问题