wap页面设计制作要点及规范总结: 常识篇(一)

作者: alicejiang 发表于 十二 16, 2013 分类在 UI博文, 设计分享

wap页面设计规范总结
1.WAP文件在电脑上用什么浏览器进行测试和查看? 为什么IE不行?
答案:建议使用chrome(android)和Safari(ios)
不使用IE的原因
1)Js不兼容
2)html5不兼容
3)css3不兼容
所以当你完成一个WAP页面,如果有产品经理或者项目经理用IE来检测你的页面有没有问题,你就可以嘲笑和鄙视一下他。

 

2.标准版和触屏版的区别?
WAP 和触屏还有手机APP的区别

手机WAP版网站:

1)最小宽度:240-320(设计尺寸)

2)自适应宽度(前端切图)

3)文字+图片+图标 无js

WAP网站普遍是基于WAP2.0开发的手机网站,其在传统智能机上应用较多,其特点是支持任意移动终端完美访问,兼容性非常高,其界面比较简洁和简单(图片少、文字多),通常无网页特效。

因为传统智能手机屏幕较小、某些智能机不具备多点触控功能等特色,WAP版手机网站通常较为简洁、简单,并适合使用手机键盘操作等特点,如果采用高端智能手机访问的用户体验稍微差一些。随着大屏幕智能手机的普及,手机WAP网站正在逐渐退出历史舞台,某些大型网站考虑到黑莓等传统智能手机用户需求,同时也建立了WAP版手机网站供用户在“标准版”和“触屏版”之间自由切换。

手机触屏版网站:

1)最小宽度:320+(设计尺寸)

2)复杂结构使用固定宽度,一般页面使用自适应宽度(前端切图)

3)Html5+css3+js

手机触屏版网站主要针对高端智能手机(大屏幕触屏手机),通常采用HTML5+CSS3开发,支持各种苹果、安卓等所有操作系统、支持所有主流手机浏览器的访问,可以给用户呈现华丽的网页视觉效果。

因为开发技术的不同,让触屏版通常拥有更好的视觉效果及交互方式,这点在控件的使用上尤其明显。由此也有引出两者设计风格的区别,手机触屏版网站将具有更好的UI界面交互和UE用户体验,支持多点触控等操作,其与WAP网站在界面、按钮、页面切换效果、网页特效、排版、行距、字大小均有比较明显的区别。

随着高端触屏手机的普及,手机触屏版网站成为主流并逐渐取代WAP网站,某些触屏版网站经过优化和调整以后,可以直接封装成APP应用软件供客户下载,这就是我们常说的web app软件。
所以我们在设计之前,一定要沟通好是需要那种类型的设计。

 

3.WAP效果图宽度要设计多大的?320PX还是480PX? 为什么?

宽度使用320px设计

建议横向和纵向可平铺

方便切图时自适应宽度

 

4.设计时字体应该是什么?宋体还是黑体?

字号正常应该是多少?14?16?18?有什么区别?标题和正文正常用多大字号?

答案:其实大家不用太过纠结字体,系统默认是什么字体就是什么字体,不受你控制的。比如正常安卓系统默认字体都是黑体,即便你用了微软雅黑,到手机里还是会变的。

320宽度的字体大小:12-16px

480宽度的字体大小:18-26px

各个部分所有标题的字号会有所区别。

以下是阿里巴巴设计小组成员总结的规范,很细致:

WAP内嵌APP设计规范

 

5.WAP页面的图片大小有没有限制?单张图片的大小?首页总图片的大小?
还有图片的格式?什么情况用GIF,JPG?能用PNG吗?为什么?

单张:10k以内

一般页面:50-100k

首页总包(含图片及代码) : 100-150K之内

图片格式:jpg png

2g网络打开: 约5s

3g网络打开: 约3s

所以如果你的页面超过5S还没打开,你要看检查一下是不是图片太大了,还是JS特效写的太多了,导致加载慢呀!

6.什么样的WAP页面设计会给切图带来很多工作量?
什么样的设计既美观同时也能减轻前端的压力?

答案:给前端带来工作量的设计咩,主要是一些PS的图层效果,如圆角/斜切、外阴影、外框、内阴影、描边加渐变

其实HTML5+CSS3是什么效果都能写出来的,但是你要考虑到项目是否有这样的必要,而且目前比较流行扁平化,设计一切从简就好了。

html5+css3能完成的效果

比如下面的这张图,渐变啊,投影啊,圆角啊,使用的太多,确实都能写,但是也要考虑到打开的速度啊,不是所有人都能无线上网啊,费流量啊费流量……

圆角渐变切图

直接看淘宝吧,个人觉得淘宝的设计一直都走在尖端,朝他们看齐准没错。

淘宝WAP页面

以上是WAP新手容易问到的一些基础性的问题,但是如果不知道,就会造成一定的返工,所以提前沟通好这些细节,很重要哦。