添加到百度首页
添加收藏 RSS 网站地图 旧版网站
  • 全部
  • 网页特效
  • 建站教程
  • 设计分享
当前位置:首页 > 设计分享 >

手机UI网页设计及网页制作教程详解

时间:2013-11-25      来源:互联网     

  手机UI界面设计正处于网站建设的新型开发的产品,网站建设的团队也需要更高的技能和素质。那么,网站建设中的网页设计、网页制作是网页设计师和网页制作师如何提高相应的技能呢?希望网站建设的团队能很好的理解本文,本文主要适用于一定的传统网页设计和网站制作及开发经验的用户。

  现在越来越多的人通过手机上网,未来移动互联网市场会越来越大,但是现在很多手机网页设计制作大多不如人意。

  手机网页制作比想象的要容易,本教程将介绍手机网页设计和制作的七个方面的知识,让你避免走一些现在的手机网页的弯路,学完本教程后,你就能对手机网页的制作和设计有大概的了解,然后有针对性地学相应知识。

  一、手机网页的标记语言

  1、WML

  WML(无线标记语言,Wireless Markup Language),早期的手机上网只能通过wap网站,而WML是用来制作手机wap网站的主要标记语言,它能够比html消耗更少内存和cpu。

  因为WML大部分针对早期和低端的手机,现在已经逐步被其他的技术取代了,现在学习手机网页设计制作完全可以忽略WML。

  但是仍然有一部分手机,如诺基亚1100这种超便宜和低端的手机,有着200万左右的用户,假如手机网页的受众是这部分人,还是应该用WML。

  2、XHTML

  未来智能手机的市场份额会越来越大,考虑到这点,现在进行手机网页设计制作时,我们会用到更加熟悉的标记语言Xhtml。

  现在大部分智能手机的浏览器都能正确处理Xhtml,它会识别两种类型的Html。

  ① Xhtml:基础的,和桌面浏览器相同的Xhtml

  ② Xhtml-MP:针对智能手机的Xhtml

  这两种类型的不同之处,Xhtml-MP包含比较少的要素和相对宽松的限制,能适合手机平台的渲染,

  其实在手机网页设计制作时,很多都直接用Xhtml,也没什么大问题。

  二、手机类型

  分辨率问题:这个问题已经开始在视频制作领域出现了,因为之前很多电视分辨率都是4:3,而现在更多的是宽屏幕,很多视频制作者不知道如何去放置标志和信息。这也是网页设计者和开发者经常会遇见的难题。

  在手机网页的设计制作中,这个问题更加棘手,不仅要考虑分辨率、尺寸大小的兼容,而且设计制作还要考虑不同的手机屏幕的形状,下图显示了手机的不同分辨率,屏幕形状从接近正方形到长方形都有,这在设计制作手机网页时,几乎令人抓狂。

  可以把手机根据屏幕尺寸分成几种常见的类型,如:

  128 x 160 pixels

  176 x 220 pixels

  240 x 320 pixels

  320 x 480 pixels

手机UI网页设计及网页制作教程详解

  这样在设计制作手机网页时,就可以比较有针对性。注意要尽量把手机网页制作成简洁的风格,因为手机没有鼠标,只能向上和向下,用户不能方便地切换页面。

  手机市场上既有非常高端的iPhone手机和谷歌的Android手机,也有诺基亚一些单色点阵显示的低端机。这些低端机在浏览手机网页时有很多的限制,如屏幕分辨率、渲染Xhtml的性能等,因此如果你的手机网页是针对这部分用户,最好还是用WML。

  另一方面,类似于iPhone和Nexus One这种高端智能机,拥有可以和桌面浏览器相媲美的渲染网页的性能。对这部分用户而言,良好的用户体验是很重要的,受限于手机的传输速度,如果直接用一 般的电脑上浏览的网页来代替手机网页,对手机网页的目标客户来说,并非明智之举。

手机UI网页设计及网页制作教程详解

  三、手机网页的目标群体

  任何网站设计网页时都应该明白自己的目标群体,以便向他们传输最合适的信息。

  这点在进行手机网页设计制作时更为重要。因为你不仅要知道你的目标群体,还要知道他们浏览手机网页时的情景。

  浏览传统的网站,访客会坐在桌上,有着大分辨率的屏幕。手机网页的访客则有可能是在排队、等交车、坐在地铁等。

  如何区分?这点我们可以向谷歌学习。谷歌花了很多功夫在让网页应用程序适合手机使用上,谷歌的开发者将看手机网页人群分为三大类,这对我们进行手机网页的设计和制作,很有参考意义。

  1、一般手机用户

  一般用户访问手机网页时和用电脑访问网页差不多,他们没有特别热衷于哪个领域,他们只是利用空闲时间浏览网页。

  对于电脑浏览网页的用户而言,这些空闲时间可能是休息时间。但是对用手机浏览网页的用户而言,则可能是在等待朋友或上下班路程,这意味这他们随时可能中断网页的浏览。如果你的目标群体是这些人,在制作设计手机网页时要特别注意这些手机用户的屏幕尺寸和时间上的限制。

  因此设计制作手机网页要“记住”用户看的内容的位置,以便他们随时返回浏览。最好不要使用大段的内容,相反,要把手机网页的内容制作成几个小的部分,引起他们的关注。记住,这些手机用户没有时间去浏览大段的内容。

  2、回访者

  回访者是一些会时常回访网页,以便获取他们感兴趣的内容的人群。

  如果你的手机网页提供的是一些诸如天气预报、股票资讯、比赛运动的信息,那么目标群体就会有相当多这部分的人。因为手机屏幕提供的信息是有限的,所以针对这部分手机用户设计制作网页,要考虑到这些人需要哪些信息,将这些信息放在手机网页的重要位置,避免这些人在手机执行了很多操作才在网页上找到需要的内容。

  另一点是关于为手机网页用户提供定制服务的问题,如制作手机网页论坛。因为手机用户登录不是那么方便,所以如能避免则尽量避免。

  有一些专业的网站允许手机用户通过电脑访问他们的网站,然后定制相应的手机网页的页面,这样会生成一个专门适用该用户的网址,下次这个用户用手机访问时,就能直接适用自己定制的界面。

  3、特殊手机用户

  根据你的手机网页所要提供服务的不同,这部分用户也会不同。

  比如电子商务用户可能会通过手机网页向你发送一些比如“未收到货物”的通知,或者一些航班公司会收到用户从手机发送的“搭机迟到希望立即退票”的通知。对于这些特殊用户,设计制作手机网页时要让他们很方便的地迅速地实现这些要求。

web前端视频教程
相关文章
web前端视频教程


最新更新

网页特效

web前端视频教程