小屏幕移动设备界面设计WAP页设计注意事项

网页制作Webjx文章简介:小屏幕移动设备网页设计注意事项.

在过去,小屏幕移动设备网页通常也被称之为WAP页,或WAP站。
原因是这类网页起源于一个叫WAP的无线协议。
WAP能够运行于各种无线网络之上,如GSM、GPRS、CDMA等。WML是无线注标语言(Wireless Makeup language)的英文缩写。支持WAP技术的手机能浏览由WML描述的Internet内容。

而如今的小屏幕移动设备,比如手机,都已经具备访问WWW的能力。其内置的浏览器,或是第三方浏览器大多是WebKit引擎。
也因此没人再用WML组织WAP站点了,一般都是用HTML+CSS的方式。
 
在设计小屏幕移动设备网页时,你可能先得了解这么一些前提:

  • 手机屏幕分辨率乱得一塌糊涂,什么分辨率都有!
  • 我们的手机上网费用贼贵贼贵!
  • UC浏览器拥有了贼大的市场占有率!

 
关于UC浏览器:

没错,不得不提它。谁叫它的市场占有率高呢。
对于UC浏览器而言,显然是非常适合我国国情的,它给用户最大限度地节约手机上网流量。(UC浏览器打的口号貌似也就是省流量这一招了)。
基于移动应用,以及文本的可读性,UC浏览器也体现了大字体、大行距等特性。
UC浏览器相对于其他手机浏览器而言,对HTML标签和CSS属性存在有特殊的、自定义的处理方式。
而所做的这些特殊处理,按目前来看,应该将会继续保留较长一段时间,直到手机上网费用得到较大幅度的下降,令消费者更大胆地移动上网之时。

在实际开发中,我们发现了UC浏览器对CSS存在一些“特殊照顾”:

  • 不支持font-family属性,也就是说,在UC浏览器你只能看到一种字体;
  • 不支持font-szie属性,也就是说,在UC浏览器你只能看到一样大小的字体;
  • 不支持width、height、padding、margin、line-height属性,也就是说,在UC浏览器只能通过p、br等HTML标签来换行以达到字符上下间隔;
  • 不支持固定像素的宽度,100%显示页面,也就是说,在UC浏览器始终将看到的是“满屏的”;
  • 不支持浮动、层叠布局,float和position属性无效,也就是说,在UC浏览器你只能看到“左对齐”。
  • 支持background-color,但不支持background-image,也就是说不支持CSS背景图显示,在UC浏览器你只能看到背景色。
     

不过,个人仍然认为,如今建设小屏幕移动设备网页,完全可依据WebKit引擎的浏览器作为标准进行界面开发。
换句话说,我们设计支持UC浏览器的网页,而不是设计以UC浏览器为标准的网页
这样做还有个好处,可以在大部分的手机浏览器上保证相对一致的样式。
而针对UC这种连float等标准CSS属性也不支持的浏览器,别过于纠结它!
但为了保证界面中各元素在UC浏览器仍具有良好的阅读顺序,严重建议HTML编码人员留意各个HTML标签的先后顺序。
因为只有在支持float、position属性的浏览器下,页面各个容器才可以任意浮动或层叠的。否则,浏览器将按HTML标签的先后顺序显示。

 
另外一些小屏幕移动设备网页设计的相关补充:

  • 网站头(header)
    考虑到小屏幕移动设备的一些特性,设计网页时,有些可以去掉网站头(包括LOGO、全局导航什么的)。
    比如flick的查看大图页面就去掉了网站头。


    这里我自创了一句时髦的设计原则:“针对于小屏幕移动设备的界面设计,在某些指定任务的界面,应优先于让用户关注当前任务,而不是应用程序本身。” 这个原则是行得通的,同样适用于设计移动设备应用程序~
    打个比方说,如果你在设计小屏幕移动设备访问的邮箱时,完全可以在写信、邮件阅读页去掉网站头~

  • 链接聚焦(hover)
    各个浏览器均自定义了链接的hover样式,比如有的浏览器给链接聚焦时加了边框,有的浏览器给链接聚焦时加个背景色之类。因此小屏幕移动设备网页不需要在CSS中编写hover样式。
  • 鼠标事件(mouseover)
    考虑到触摸屏操作,用户无法用手指进行over的操作,因此应禁止在应用于移动设备访问的网页使用mouseover
时间: 2024-10-29 04:58:28

小屏幕移动设备界面设计WAP页设计注意事项的相关文章

小屏幕移动设备网页设计注意事项

在过去,小屏幕移动设备网页通常也被称之为WAP页,或WAP站.原因是这类网页起源于一个叫WAP的无线协议.WAP能够运行于各种无线网络之上,如GSM.GPRS.CDMA等.WML是无线注标语言(http://www.aliyun.com/zixun/aggregation/6155.html">Wireless-Makeup-language)的英文缩写.支持WAP技术的手机能浏览由WML描述的Internet内容. 而如今的小屏幕移动设备,比如手机,都已经 具备访问WWW的能力.其内置的

从大屏幕到小屏幕迁移的三种设计方案

由于手机终端纷繁复杂,各种分辨率的屏幕,各种适配不同机型的特殊规则,都对http://www.aliyun.com/zixun/aggregation/26107.html">手机网站的设计提出了更多的要求.大屏幕上已有的网站向小屏幕的设备上迁移,是需要经过一些调整的,今天就来探讨三种可用的迁移方式. 拍扁式手风琴式棋盘式 一.第一种:拍扁式 这种形式最简单,也是目前web迁移到wap采用的最多的一种形式,就是把主流的1:2:1三栏布局的web网页拍扁成一个线性的一维的wap页面,比如看这

手机小屏幕界面设计原则

1997年,那是一个春天,有一位老人在南海边画了一个圈,这个圈就画在咱大深圳!画圈的人是小平同志. 2014年,还是这个春天,移动设备的普及成为当下http://www.aliyun.com/zixun/aggregation/6298.html">互联网发展的又一次变革,我们在各种小屏幕上画着一个又一个的圈,如今,用户的移动体验无意正在变得更好,因为越来越多的网站已经开始为移动设备做了设计,设计师们也明白什么更适合小屏幕.然而,在手机上执行任务操作仍然存在着许多障碍. 亲爱的设基师朋友们

小屏幕改变了哪些邮件设计规则?

小屏幕改变了哪些邮件设计规则? 时间:2014-11-13 14:01 来源:快鲤鱼 作者:快鲤鱼 电子邮件营销的未来在于适应周围环境的能力.全球超过一半的电子邮件在移动设备上被打开,而根据全球领先的多渠道智能化营销服务商webpower的邮件客户数据分析,中国地区电子邮件移动设备打开率也增速迅猛,达到30%以上,而这一比例 预计在未来几年将继续增长.同时,不容 忽视的是,至少50%的移动用户将关闭或者删除没有优化阅读的电子邮件. 对于邮件发送者来说,解决移动小屏幕的邮件用户体验的一个最方便的解

八个实用的移动设备界面设计技巧

移动设备与PC在屏幕和解决方案的不同导致两者的界面设计存在很多的不同,为此,本文提出了移动设备界面设计方面的8个有用的要点,希望对你在移动设备平台的界面设计有所帮助. 布局.布局.布局 设计布局归根结底是为了http://www.aliyun.com/zixun/aggregation/12461.html">移动设备用户的可访问性.可用性以及整体的可读性.在布局设计中,重中之重的一点就是确保在所有移动设备上(无论其屏幕的大小以及各异的解决方案)的灵活性. 意思就是,内容的规模会根据屏幕大

《社交网站界面设计(原书第2版)》——1.9 为设备之间的空间进行设计

1.9 为设备之间的空间进行设计 移动设备带来机遇,也带来危机,迫使设计师找到新的方式在一个很有挑战的屏幕大小范围内呈现信息.通过响应式网页设计和应用程序开发,我们为每种设备都做了很多设计工作.然而,对于我们在技术方面的进步来说,一种新的设计危机已经形成.这个危机更多是围绕着我们所使用设备的数量,而不是种类. 随着我们在日常生活中所使用设备的增加,我们常常会被困在这些设备中.随着设备的增加,新的机会不再是关于设计每个屏幕,而是关于设计这些设备之间的交互--通常根本不会使用屏幕.这些设备的间隙中存

移动界面设计技巧:引导页设计技巧总结

文章描述:引导是带领用户更快速更愉悦地达到目标的过程,能在用户使用产品遇到障碍之前给予及时的帮助.在移动互联网的产品的设计中,新手引导的设计则是在用户初次使用该移动产品时,给予的一些必须性的帮助以使得用户能快速愉悦地了解这个产品的功能与具体操作方式.为了完成不 前言: 引导是带领用户更快速更愉悦地达到目标的过程,能在用户使用产品遇到障碍之前给予及时的帮助.在移动互联网的产品的设计中,新手引导的设计则是在用户初次使用该移动产品时,给予的一些必须性的帮助以使得用户能快速愉悦地了解这个产品的功能与具体

为什么需要在移动界面中注意隐喻设计

文章描述:是的,有些时候,我就在想这个简单的问题,而那时我的答案还是:界面是对软件应用解决方案的显性,使用图形化符号,向使用者解释它的功能与任务. 界面是什么? 是的,有些时候,我就在想这个简单的问题,而那时我的答案还是:界面是对软件应用解决方案的显性,使用图形化符号,向使用者解释它的功能与任务. 但最近一些认知却让我对这个问题有了新的回答:界面就是软件应用它本身.它不是一份对软件应用功能的图形化说明书,不是对软件应用功能与任务的图形化翻译,它就是软件应用本身,并且与之浑然天成.一个简单的问题,

移动设备上简单交互的设计解决方案和展示

用户访问移动网站不仅仅是为了浏览内容,而是要做成事情.以订机票为例,用户经常在航空公司的移动网站上做的事有:查询航班状态.查询特定航班.搜索并预定机票.那么移动互联网用户界面设计是怎样支持任务完成呢?在移动网站上传达信息和展示交互状态的最优方式又是怎样?带着寻找移动设备简单交互的最有设计方案的目的,我以查询航班状态为例来进行研究.希望我的分析能对这个主题有所贡献. 交互:查询航班状态 旅行者可以通过确定出发日期,或者是输入航班号,或者是出发城市和到达城市或是机场来查询到航班状态.听起来够简单,对