WAP页面设计与实现小贴士

目前绝大多数手机都支持WAP 2.0。WAP 2.0的页面设计具有更好的">视觉效果,更接近网页。不过由于手机千差万别,手机浏览器的能力也各不相同,直接照搬网页的设计与实现,很可能让你的WAP页面出现问题。以下小贴士来自于我们的页面设计与开发实践。

1、当你试图使用背景图时,请同时搭配近似的背景色

手机上,有些浏览器是不支持使用背景图片的。比如下图,在S60v3操作系统的手机(如N76)上:

喜欢使用深色背景图片和浅色文字的同学们请注意了,在不支持背景图片的浏览器上,很可能由于“靠色”,而让用户无法分辨出这些文字。

如果你还是觉得不使用背景图片心有不甘,那么请在使用背景图片时搭配一个近似的背景色吧。背景色是具备广泛支持的,而且背景图和背景色是可以同时设置的。这样,即使用户的浏览器不支持背景图,也不会造成你的文本内容无法分辨。

2、避免依赖于文本样式(粗体、斜体、文字
大小)的设计,多用文字颜色

虽然综合使用粗体、斜体和不同大小的文字可以起到突出重点内容的作用,但是在手机上这样做可能你的苦心会白费的。 粗体、斜体和文字大小的展现效果在不同的手机浏览器上支持各不相同,如下图:

如果你使用了这些样式,有的手机甚至无法正确展现,比如下图的一款山寨机:

如果你试图通过文本样式达到突出重点的作用,那么多多用颜色吧,颜色是具备最广泛支持的。

3、内容尽量少使用左对齐之外的方式

你使用过右对齐设置吗?

事实上,很多浏览器(如一些版本的UCWEB和GO浏览器)是并不支持类似的右对齐的。在这些浏览器上,他们会跑到左边。

4、减少复杂的布局浮动、绝对定位、两栏布局神马的,对于很多手机浏览器来说都是浮云。试看以下使用了绝对定位的效果:

因此,请尽量避免使用这些CSS属性:float、clear、position、top、left、right、bottom。如果使用,请尽量保证这不影响你的页面内容的正常展示。

5、避免链接颜色与文本颜色相同Web页面开发时有时会让文本和链接颜色相同,靠是否有下划线来判断是否是一个链接。但某些移动浏览器并不支持定制链接是否有下划线。这种情况下,如果链接颜色与文本颜色相同,则可能造成用户完全无法区分链接与普通文本。6、为触摸屏手机单独做一个版本

电脑上的浏览器大部分都有鼠标,可以很方便地定位到一个细小的位置。

触摸屏手机则不同,狭小的屏幕下,小号文字或者较短的链接,可能手指很容易产生误点击。请为触摸屏手机单独做一个版本。

触摸屏版本,可以通过增大字号、扩大点击区域、设置明显点击标识⋯⋯等手段来改善用户体验。

7、避免使用过多的图片

图片可以带来更好的视觉效果,但是在现在使用流量计费的环境下,也会为用户浪费更多的流量,也会大大延长使用GPRS/EDGE上网的用户打开页面的速度。

因此,请尽量避免大量使用图片。

8、减少PNG格式图片和GIF动画的使用

有一些手机,如某些山寨机,是不支持PNG格式的图片的。也有部分浏览器,如某些平台上的UCWEB或Opera Mini,是看不到GIF动画的动态效果的。

如果图片对你很重要,请尽量不要使用PNG格式的图片,并减少GIF动画的使用。

9、页面小一些

手机是一种能力很有限的设备。过长的页面,一方面使用并不方便(很多键盘手机用户需要不断按着向下按钮来下翻),另一方面,很可能是打不开你的页面的——比如Moto V3手机,页面大小超过10K,就无法打开了。为了让更多用户可以更好地浏览页面,请减少页面大小。

转载请注明出自”百度MUX”

时间: 2024-12-26 21:42:53

WAP页面设计与实现小贴士的相关文章

WAP页面设计与实现

目前绝大多数手机都支持WAP 2.0.WAP 2.0的页面设计具有更好的视觉效果,更接近网页.不过由于手机千差万别,手机浏览器的能力也各不相同,直接照搬网页的设计与实现,很可能让你的WAP页面出现问题.以下小贴士来自于我们的页面设计与开发实践. 1.当你试图使用背景图时,请同时搭配近似的背景色 手机上,有些浏览器是不支持使用背景图片的.比如下图,在S60v3操作系统的手机(如N76)上: 喜欢使用深色背景图片和浅色文字的同学们请注意了,在不支持背景图片的浏览器上,很可能由于"靠色",而

设计经验:设计师的10条小贴士

很多人从未认真思考过设计或设计师,更别提把自己当作设计师了.但是普通人--教师.学生.各式各样的工作者--能从设计师和设计师的思维方式中学到什么?更专业化的职业呢?医生.科学家.调查工作者.工程师以及其他各种技术领域的专家们又能从平面设计师和交互设计师的思维方式中学到什么?有没有什么是设计师--无论通过他们的培训或者经验--知道而我们所不知道的?我相信是有的. 下面是我多年从事设计师所学到的10条小贴士(外加一条附加贴士).也许能为非设计师们带来些许启发.在世界各地演讲的时候,我常常会投影一张幻

页面设计(web设计)5个小技巧

从某种意义上来说,页面设计(web设计)也就是用户界面设计.有许多技巧可以帮助我们制作出漂亮.实用的界面,这里收集的5个小技巧就会对你有所帮助的.这些技巧并不依赖于特定的主题或模板,所以会适用于多数情况下的设计.不罗嗦了,我们开始吧! 1.改善链接体验       网页中的文字链接通常标有下划线,表示文字是可以点击的,但可点击区域不会超过字符的宽.高范围.设计类似这种带有超链接的可点击区域的时候,都可以通过一些小技巧来提高可用性,比如:增加间隔,有些情况下甚至可以把链接转换为块元素.如下图,用高

互联网产品设计:切图小贴士 “点九”切图事半功倍

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 用户手中看到的产品界面,并非设计师呕心沥血创作的效果图,而是一个个单独的切图经由开发同学技术实现.切图作为设计师与开发者之间的桥梁,它的作用很关键,合适的切图.精准的位置可以最大限度的还原效果图的设计,精妙的切图更会有事半功倍的效果哦! 我们经常会做一个俗称"点九"的切图,什么是"点九"呢?"

腾讯移动端H5页面设计实战分享

  <腾讯网UED体验设计之旅>一书集合了腾讯网UED团队在用户体验领域的十年探索经验,展示了大量精彩案例的设计技巧和过程.下面为该书的节选内容. 为什么要设计H5页面 移动设备的普及给媒体和娱乐带来了一场革命.根据中国互联网信息中心(CNNIC)2014年7月的报告显示,中国网民中,手机使用率达83.4%,已经超过传统PC整体80.9%的使用率.其中,手机网络新闻的使用率为74.2%,仅次于即时通信和搜索,远超其他手机网络应用.在资讯移动化的趋势下,观察近期各大门户在重大事件报道中的表现,会

15条小贴士助你成功开发一个小游戏

有太多的游戏都在还未开发完成的时候就被作者放弃了.独立游戏<安琪拉之歌>的作者Derek Yu这篇文章中列出了15条小贴士,讨论如何成功的去完成一款游戏.这些小贴士能够帮助广大的游戏开发者,认清开发过程中所遇到的问题,并讨论如何去解决它. 完成一款游戏 在我努力完成自己游戏期间,我一直在思考一般情况下如何完成项目.我已经注意到有很多优秀的开发人员对于完成游戏这件事都会遇到麻烦.说实话,我身后已经留下了一长串未完成的游戏...我想每个人都有.由于各种原因,不是每个项目都能有成果.但是如果你发现自

人尽可用的Windows小贴士之上篇第1/2页_应用技巧

不管你是否已经升级到最新版Vista系统还是继续留守在XP阵营,我们列出的这些小贴士都能够帮助您加快电脑的处理速度.提升电脑的安全性能,甚至还能够改善电脑的时尚可观性,相信我吧! 客观说来,Windows操作系统的性能可谓一般,如果你不尽力去深度"挖掘",或者按照你的意愿去改变它,那么就永远无法让其发挥出真正的潜力. 无论你是想提高XP的运行速度.自定义Vista的Aero界面.管理自己的磁盘分区或进行快速照片处理,以下我们给出的案例都能悉数告诉你具体的实现方法,在文章中,我们首先会介

B2B网站内容设计:页面设计要满足用户需求和习惯

文章描述:如何做好B2B行业网站页面内容设计留住用户. 对于B2B行业网站的页面设计,大家可能更多考虑页面用色.导航条.按钮.标题栏的设计,内容设计可能常常被大家忽略.但是如果内容设计的不好,可能会让你的所有设计被毁于一旦.比如如何让内容有主次之分.层次感,使内容看起来不会太乱.太多,使用户不愿意继续阅读下去,很快离开网站,不能留住用户继续访问. 在本研究报告前面章节我讲过,永远要记得用户在没有明确的阅读内容前是扫描而不是阅读,在导航页面,用户很乐于扫视一句一句的内容,对于大面积没有重点的内容,

ANDROID安卓平台的切图小贴士

  用户手中看到的产品界面,并非设计师呕心沥血创作的效果图,而是一个个单独的切图经由开发同学技术实现.切图作为设计师与开发者之间的桥梁,它的作用很关键,合适的切图.精准的位置可以最大限度的还原效果图的设计,精妙的切图更会有事半功倍的效果哦! 我们经常会做一个俗称"点九"的切图,什么是"点九"呢?"点九"是Android平台处理图片的一种特殊的形式,由于文件的扩展名为:".9.png",所以被称为"点九".&