Rainshadow StudioRainshadow StudioRainshadow StudioRainshadow Studio
  • Home
  • Photography
  • Design
  • Techniques
    • Photography Techniques
    • Design Techniques
  • Others

WAP页面设计与实现小贴士

    Home 设计工作站 设计技巧 WAP页面设计与实现小贴士
    NextPrevious

    WAP页面设计与实现小贴士

    By rainshadow | 设计技巧 | 0 comment | 9 3月, 2011 | 0

    目前绝大多数手机都支持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”

     

    code ,html ,手机 ,设计
    头像

    rainshadow

    More posts by rainshadow

    Related Post

    • 手机网站开发原则

      By rainshadow | 0 comment

      从09年初接手淘宝手机网站前端开发的工作至今,转眼已是一年。一步步看着Read more

    • 如何将页脚固定在页面底部

      By rainshadow | 0 comment

      作为一个Web的前端攻城师,在制作页面效果时肯定有碰到下面这种现象:当Read more

    • Adobe Edge Reflow CC 响应式网页设计

      By rainshadow | 0 comment

      响应式网页设计基础【从零开始】 如今的互联网事业突飞猛进,可谓一日千里Read more

    • 做站必备神图

      By rainshadow | 0 comment

    • IE6/7/8/9 Firefox的CSS兼容问题

      By rainshadow | 1 comment

      这是关于IE的一系列兼容问题的解决方法。

    Leave a Comment

    取消回复

    邮箱地址不会被公开。 必填项已用*标注

    NextPrevious

    标签

    Adobe ai app apple BBC CIVIC code css dreamweaver excel Flash Google Gphone HD html ipad jequery js jsp office ppt PS PS3 TV UI wordpress 上海 吃吃喝喝 奥运 婚礼 小常识 幽默 手机 报价 摄影 摄影技巧 汽车 流行 电影 电脑 网站 视频 设计 软件 音乐
    Copyright 2017 Rainshadow Studio | All Rights Reserved
    • Home
    • Photography
    • Design
    • Techniques
      • Photography Techniques
      • Design Techniques
    • Others
    Rainshadow Studio