• 回复: 0
屏沙落雁 发布于:2016-04-26 03:10:46

WAP页面设计与实现

如今绝大大都手机都支持WAP 2.0。WAP 2.0的页面设计具有更好的视觉效果,更靠近网页。不过由于手机千差万别,手机欣赏器的技巧也各不沟通,直接照搬网页设计与实现,很大概让你的WAP页面出现问题。以下小贴士来自于我们的页面设计与开辟实践。
手机上,有些欣赏器是不支持使用背景图片的。比如下图,在S60v3操纵体系的手机(如N76)上:
1、当你试取使用背景图时,请同时搭配沟通的背风景
如果你还是感觉不使用背景图片心有不甘,那么请在使用背景图片刻搭配一个沟通的背风景吧。背风景是具备广泛支持的,并且背景图和背风景是可以同时设置的。
这样,纵然用户的欣赏器不支持背景图,也不会造成你的文本内容无法分辨。
2、克制寄托于文本样式(粗体、斜体、笔墨大小)的设计,多用笔墨颜色。
当然综合使用粗体、斜体和不同大小的笔墨可以起到突出重点内容的作用,但是在手机上这样做大概你的苦心会白费的。 粗体、斜体和笔墨大小的显现效果在不同的手机欣赏器上支持各不沟通,如下图:
如果你使用了这些样式,有的手机以致无法精确显现,比如下图的一款盗窟机:
如果你试图经过过程文本样式到达突出重点的作用,那么多多悠揭捉色吧,颜色是具备最广泛支持的。
3、内容只管即便少使用左对齐之外的方式
你使用过右对齐设置吗
毕竟上,很多欣赏器(如一些版本的UCWEB和GO欣赏器)是并不支持沟通的右对齐的。在这些欣赏器上,他们会跑到左边。
喜好使用深色背景图片和淡色笔墨的同砚们请看重了,在不支持背景图片的欣赏器上,很大概由于“靠色”,而让用户无法分辨出这些笔墨。
4、减少巨大的布局
浮动、绝对定位、两栏布局神马的,对于很多手机欣赏器来说都是浮云。试看以下使用了绝对定位的效果:
因此,请只管即便克制使用这些CSS属性:float、clear、position、top、left、right、bottom。如果使用,请只管即便包管这不影响你的页面内容的正常展示。
5、克制链接颜色与文本颜色沟通
6、为触摸屏手机单独做一个版本
电脑上的欣赏器大部分都有鼠标,可以很方便地定位到一个微小的位置。
触摸屏手机则不同,局促的屏幕下,小号笔墨大概较短的链接,可能手指很方便产生误点击。请为触摸屏手机单独做一个版本。
触摸屏版本,可以经过过程增大字号、扩大点击地区、设置明显点击标识⋯⋯等技巧来改进用户体验。
图片可以带来更好的视觉效果,但是在如今使用流量计费的情况下,也会为用户浪费更多的流量,也会大大耽误使用GPRS/EDGE上彀的用户打开页面的速率。
因此,请只管即便克制大量使用图片
8、减少PNG款式图片和GIF动画的使用
Web页面开辟时偶尔会让文本和链接颜色沟通,靠是否有下划线来鉴定是否是一个链接。但某些移动欣赏器并不支持定制链接是否有下划线。这种情况下,如果链接颜色与文本颜色沟通,则大概造成用户完全无法区分链接与普通文本。
有一些手机,如某些盗窟机,是不支持PNG款式的图片的。也有部分欣赏器,如某些平坦亓UCWEB或Opera Mini,是看不到GIF动画的动态效果的。
7、克制使用过多的图片
如果图片对你很重要,请只管即便不要使用PNG款式的图片,并减少GIF动画的使用。
9、页面小一些
手机是一种技巧很有限的配置。过长的页面,一方面使用并未方便(很多键盘手机用户需要不断按着向下按钮来下翻),另一方面,很大概是打不开你的页面的——比如Moto V3手机,页面大小超过10K,就无法打开了。为了让更多用户可以更好地欣赏页面,请减少页面大小。
扫一扫,关注设计动量,随时参与互动。
我要评论