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,就无法打开了。为了让更多用户可以更好地浏览页面,请减少页面大小。

时间: 2024-11-01 08:11:52

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

WAP页面设计与实现小贴士

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

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

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

Wap网页设计技巧:关于锚点链接的心得

网页制作Webjx文章简介:浅议Wap网页设计中的锚点链接. 最近做了wap站中的搜索结果页的改版,记录一下关于锚点链接的心得~ 关于锚点链接 锚点链接一般用于比较长的网页,使用内部链接建立页内目录.单击目录跳转到文本的相应位置,最常见的如"回顶部.模块间跳转"等. 关于锚点链接,可用性研究的宗师Jakob Nielsen写过一篇名为Avoid Within-Page Links的文章,排斥锚点链接,认为它有害页面健康,最典型的例子是"返回顶部",反对原因大致可归纳

Wap网页设计中的锚点链接

关于锚点链接 锚点链接一般用于比较长的网页,使用内部链接建立页内目录.单击目录跳转到文本的相应位置,最常见的如"回顶部.模块间跳转"等. 关于锚点链接,可用性研究的宗师jakob nielsen写过一篇名为avoid within-page links的文章,排斥锚点链接,认为它有害页面健康,最典型的例子是"返回顶部",反对原因大致可归纳为: ·干扰用户浏览页面: ·认为没有必要,浏览器或键盘足以完成此功能: ·操作结果不明确,用户对"顶部"认知

浅议Wap网页设计中的锚点链接

最近做了wap站中的搜索结果页的改版,记录一下关于锚点链接的心得~ 关于锚点链接 锚点链接一般用于比较长的网页,使用http://www.aliyun.com/zixun/aggregation/8882.html">内部链接建立页内目录.单击目录跳转到文本的相应位置,最常见的如"回顶部.模块间跳转"等. 关于锚点链接,可用性研究的宗师Jakob Nielsen写过一篇名为Avoid Within-Page Links的文章,排斥锚点链接,认为它有害页面健康,最典型的例

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

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

深底色风格的页面设计策略

深底色风格的页面设计很受欢迎,它可以创造出别致优雅,极富创造力的效果. 深底色风格的页面设计很受欢迎,它可以创造出别致优雅,极富创造力的效果. 深底色设计适用于许多网站类型,但并非所有.这种风格应该在恰当的条件下使用. 虽然深底色风格可以带来视觉冲击力,但是很多设计师并不知道如何有效地表现他们,取得的效果往往适得其反.失败的设计会导致可读性差,难以吸引用户,无法使用传统的设计元素等问题. 所以在这里,我们将讨论一些深底色页面设计的要素,以便让你的下一次设计更受欢迎,更具创造性. 最新的调查表示,

WEB登陆页面设计技巧:登陆界面表现形式

文章描述:拒绝平庸:优秀WEB登录页面设计. 关于登陆估计大家每天使用的都很频繁了,每次上网都会习惯性登陆下微博,淘宝,邮箱,空间等,在每天进进出出无数门户的时候有谁又曾在密码不错误的情况下停留在WEB登陆页面看一眼呢?下面就谈谈这道不起眼的门. 从公共平台的角度看 用户活跃度是检验产品成功与否的重要指标之一,传统行业的商家极为重视门面的装潢,因为一个好的门面可以聚集人气,招揽更多的顾客.古时候的大户人家院子门口的石狮子或其他的摆件的摆放极为讲究,有一定的风水学说道理,更能彰显主人家的身份地位.

浅谈页面设计中光的特效

为了展现页面的主题或者是贴近游戏的氛围,常常会看见游戏的页面中运用了许多不同类型的光效的渲染,一个简单的元素有时候加上一点光效就可以化腐朽为神奇.那么光效究竟是如何具体地影响页面的视觉观感的呢? 1.丰富页面的层次 当人物和背景的颜色比较接近时,为了增强人物的立体感和空间感,可以在人物上添加光效,拉开人物和背景的距离,形成视觉差异,这样需要强调的人物就瞬间凸显了出来,页面的层次也一下子体现出来了.   2.烘托气氛 光效的颜色.形状和出现的位置会对设计表达的气氛产生很直接的影响,就好像现实中的光