wap设计规范.doc

Wap网页设计使用规范-什么是wap-Wap规范-Wap尺寸-Wap的字体与大小-Wap设计的注意事项-Wap样式规范什么是wap？ WAP（Wireless Application Protocol) 为无线应用协议，是一项全球性的网络通信协议。WAP使移动Internet 有了一个通行的标准，其目标是将Internet的丰富信息及先进的业务引入到移动电话等无线终端之中。WAP定义可通用的平台，把目前Internet网上HTML语言的信息转换成用WML（Wireless Markup Language)描述的信息，显示在移动电话的显示屏上。WAP只要求移动电话和WAP代理服务器的支持，而不要求现有的移动通信网络协议做任何的改动，因而可以广泛地应用于GSM、CDMA、TDMA、3G等多种网络。 Wap规范 1.为什么现今大多数的网站一行字数上限为14个中文字符由于手持设备的特殊性，其页面中实际文字大小未必是我们在CSS中设定的文字大小，尤其是在第三方浏览器中。例如Nokia5310，其内置浏览器页面内文字大小与CSS设定相符，但是第三方浏览器OperaMini与UCWEB页面内文字大小却大于CSS设定。经测试，其文本大概在16px左右。假如屏幕分辨率宽度为240px，去除外边距，那么其一行显示14个字以内，是比较保险（避免文本换行）的做法。2. 网页大小限制建议低版本页面不超过15k，高版本页面不超过60k。3.用手机模拟器和第三方手机浏览器的在线模拟器来测试页面是不是靠谱？ * 部分手机不支持png8和png24，所以尽量使用jpg和gif的图片* 另外对于平滑的渐变等精细的图片细节，部分手机的色彩支持度并不能达到要求，所以慎用有平滑渐变的bar设计* 部分手机对于超大图片，既不进行缩放，也不显示横下滚动条* 少数手机在打开超过20k的测试页面时，会显示内存不足4翻页设计规范内容需要翻页显示的，必须提供下一页及上一页链接，且下一页必须在上一页的链接左侧显示；凡内容超过3 页，必须提供“第几页/共几页”的文字提示。 5. 出错页面规范所有出错页面应给出简洁、友好的错误原因说明或者提示信息，指导用户进行正确操作；每个出错页面应给出“返回上级”链接，恢复到用户前次页面。6. 页面效果规范普通页面的全部展现时间应保证小于 4s，多图形页面的全部展现时间应保证小于6s（包括页面内置对象）。对于业务入口页面，在保证速度的前提下，应尽可能做得丰富一些，增强用户的视觉感受；对于第二级和第三级及其以下的页面，可以稍微简化页面的效果。对于使用图片的页面，应该设置与图片主色调相近的背景色，在用户触发页面下载后，应保证用户通过迅速见到出现的背景色而能感受到下载已经进行，不能在下载进行中向用户展现白屏。对于使用背景图片的页面不允许出现明显的接缝痕迹。页面中的图片未完全下载前，应能够用文字对其进行说明。页面应根据用户浏览习惯显示正常行距，不允许出现冗余空行。 Wap的尺寸最为广泛的智能手机屏幕尺寸：iphone3 320*480 iphone4 640 * 960 android 240*320 320* 480 480* 854 考虑大多人应用尺寸我们设计wap网页宽度为320px ，设计时应考虑率网页宽度设置和自适应问题 例如：/z/sinawap/Wap的字体与大小大部分手机浏览器默认字体为 “宋体”和 “黑体”手机wap网站的文字的正文字号应该为16px ，正文大小变化的文字字号为14px 、 18px Wap设计的注意事项1. wap设计中正文部分要设计离边有5-10px的距离，以免导致客户阅读困难2. Wap网页中文字的行间距比pc网页稍大以助于客户浏览以及点击3. wap网页中图片的尺寸以整数，便于替换，广告 ，图片广告的设计高度应该小于300px，便于客户去浏览。4. Wap网页样式上要简洁大方，样式不要太复杂5. Wap网页中交互类的服务设计，如：免费电话 点击咨询 在线服务 订单提交 ，这些互动型的设计应该比较明显吸引人。漂浮客服或广告 尺寸一定要不要影响网页正文内容。6.wap网页中我们设计时候可能会考虑一些特效的设计，应该提前与制作商量好才进行设计，有的特效可能手机不能使用。Wap样式规范Wap因为是手机网页，打开速度不如PC 我们设计的时候应该注意设计时不应该加入太多的样式，简单明了 大气规范 是手机网页设计的中心思想。首先我们先看国内网站的手机版：新浪：http:/3/?from=sinacn&explore=1&vt=4空中网 /home_html.jsp搜狐 /3G /999ask Wap设计类型及设计特点目前我们公司所应用到的wap的设计内容有门户类 专题类 企业类 门户类的wap网页：应该体现大气和简单明了的风格，这类网站发部分是以文字而组建，但是文字内容比较庞大，所以在设计时候应关注文字的大小变化，行间距，和图文的样式。在颜色上尽量避免比较艳丽的颜色，要给人感觉比较厚重大气的感觉。例如：新浪：http:/3/?from=sinacn&explore=1&vt=4空中网 /home_html.jsp搜狐 /3G /999ask 手机凤凰/人民网 /4g/专题类wap网页：专题类包括淘宝wap页面和产品推广页面，专题wap设计图片会很多，样式也很多，所以在设计整体风格时候应该考虑到网页的kb大小以及网页的打开速度，从样式上可以有色彩的变化和着重的标记，例如：/ 绿瘦/ 左旋/topic/keqing/ 可轻企业类wap网页：企业类的wap设计是专题以及门户相结合文字信息和图片样式结合，企业风格类的手机版设计，可以含有特色化的设计敢，企业网页手机版内容短小，要比门户wap设计风格上要，颜色丰