5大移动网页设计之最佳实践

标签: 产品设计 界面设计 移动网页设计 | 发表时间:2010-12-02 01:11 | 作者:P迪 everfly
出处:http://www.alibuybuy.com

本文来自SocialBeta内容贡献者wisp,原文译自Mobile Web Design: Best Practices,更多移动产品设计方面的资料,请查看SocialBeta移动互联网栏目。

Mobile Web Design: Best Practices

移动设备的兴起正在给互联网带来一场新的革命,虽然说移动网页设计原则不会有多大变化,但是却有着明显的区别。

至少有一点是截然不同的,目前移动设备的网络速度可比不上宽带,另外移动网页呈现方式也是多样的,有触摸屏,有上网本,这些小屏幕却貌似巨人!

可能有些人会认为移动化其实根本没必要,但是几乎所有人都得承认这是一个不可避免的趋势。

如果你正在研究移动网页设计(或者正在将一个网站搬到移动设备上),这篇文章或许可以帮助你了解到目前移动设计的发展趋势。

呈现方式

在设计对移动设备友好的网站时,首先要考虑的元素之一就是呈现方式或者用户体验方式。

呈现方式的多样化

理想的情况就是你现在的网站适用于所有类型的移动设备。也许你的网站可以适用于iPhone等拥有内置浏览器的移动设备,不过却在其他的移动设备上,情况未必如此好,而跨设备移动设计却又难以获得成功。

如果你认为开发出在IE/Firefox/Chrome/Safari等浏览器的网站很艰难,其实可以不妨试试开发专门针对iPhone/BlackBerrys/Palm Pres/Androids/Motorola/Nokia的网站,不过你很快就会发现这些硬件设备真是太多了。

在桌面网络设计中,你只有一种语言:HTML,但是在移动网络上,可能是WML,平台也可能是苹果的iOS,或者是Android。

Complications in Delivery Method

虽然WML曾一直限制着我们的设计创意,但是如今我们所拥有的方式变得更加灵活了!

NO1:采用支持移动设备的网页设计

在移动网页设计上,一个简单的处理方法就是对现存的桌面网页代码和设计进行调整,以适用于移动设备,还有就是从草图做起,一步步的设计。例如,通过CSS3,你可以根据用户的移动设备来调整网页布局等等。

但你想想看,问题在于并不是所有移动设备都支持CSS3,所以你得求助于服务器设备侦查或者JavaScript(例如调整DOM来改变页面布局)。不过问题又来了,有些设备又不支持这些技术!(译者:纠结!)

Adapting a Web Design to Support Mobile Devices

依据窗口来决定布局大小,或许只需几行CSS3

NO2:将移动用户转向手机版网站

移动设计呈现的另一种方式就是专门针对手持设备而优化的布局,你可以利用Mobify等网络服务来做到这点。

与第一种方法相比(采用支持移动设备的网页设计),这种呈现格式更加优秀,因为体验设计是专门针对移动用户的,不考虑桌面用户。

这种情况下,你的流量取决于用户的浏览器代理。例如,如果一个移动设备用户访问你的网站(yousitename.com),然后他们会比自动转向至mobile.yoursitename.com或者m.yoursitesname.com等之类的。

Adapting a Web Design to Support Mobile Devices

独立的手机网站会获得那些喜欢更快的速度的用户所带来的流量。

NO3:用户引导要点:

无论你使用何种方式,下面两点是很重要的:

  • 访问者知道你的手机版网站是可以登录的
  • 访问者可以选择是登陆手机版网站还是普通版网站(译者:就是PC版网站)

虽然强行为用户转向或者改变布局听起来似乎是个好主意,但是结果往往会令人沮丧,所以最好还是让用户可以选择。

简单的技巧就是有这两个版本的网站的链接。例如,Six Revisions,你会发现在该网站的地段会有手机版网站的链接(m.sixrevisions.com),这样无论是手机用户还是电脑用户都有了选择。

结构和代码

另外一件需要考虑的事情就是结构代码(markup和styles):

  • 你知道WML或者XHTML mobile profiles?(百科:WML(Wireless Markup Language - 无线标记语言)。它是一种从 HTML 继承而来的标记语言,但是 WML 基于 XML,因此它较 HTML 更严格。WML 被用来创建可显示在 WAP 浏览器中的页面。用WML编写的页面被称为 DECKS。DECKS 是作为一套 CARDS 被构造的。这种描述语言同我们常听说的HTML语言同出一家,都属于XML语言这一大家族。WML的语法跟XML一样,WML是XML的子集。HTML语言写出的内容,我们可以在我们的PC机上用IE或是Netscape等浏览器进行阅读,而WML语言写出的文件则是专门用来在手机等的一些无线终端显示屏上显示,供人们阅读的,并且同样也可以向使用者提供人机交互界面,接受使用者输入的查询等信息,然后向使用者返回他所想要获得的最终信息。XHTML Mobile Profile –2001年发布,基于XHTML,针对移动电话的语言,被认为是目前最优秀的语言)
  • 你所设计的app是应用于iPhone还是Android?
  • 你在设计时有没有考虑到移动设备浏览器的成本和速度?
  • 什么是HTML5和CSS3?(百科:HTML5提供了一些新的元素和属性,例如<nav>(网站导航块)和<footer>。这种标签将有利于搜索引擎的索引整理,同时更好的帮助小屏幕装置和视障人士使用,除此之外,还为其他浏览要素提供了新的功能,如<audio>和<video>标记。些过时的HTML4标记将被取消。其中包括纯粹显示效果的标记,如<font>和<center>,它们已经被CSS取代。CSS3是CSS技术的升级版本,CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂,所以,把它分解为一些小的模块,更多新的模块也被加入进来。CSS就是一种叫做样式表(stylesheet)的技术。也有的人称之为层叠样式表(CascadingStylesheet)。CSS3提供了非常多新途径去改善你的设计工作,且做了不少重要的变化。)

这些问题还不够全面,有些问题也正处于研发阶段。

Adapting a Web Design to Support Mobile Devices

新设备所支持的代码可能不同于旧的移动设备。

选择

设计一个对移动用户友好的网站,最重要的事情就是选对语言。在智能手机出现之前,旧的手机只支持WML(最基本的语言),随后W3C推出了更加友好的XHTML(XHTML Mobile Profiles档案)。

幸运的是,移动设备产生的更新速度是的网页体验更加完整和健全,如果你不懂mobile profiles或者WML,你可以使用正常的HTML或者XHTML。

不过,仍要强调的一点是,WML仍是要考虑的,你的用户也许使用的是普通手机(非智能手机)。当然现在我们要处理更多的web zombies(网页劫持)。

Adapting a Web Design to Support Mobile Devices

同样你的决定必须基于网站数据和大量的网站分析。

速度和成本(对用户而言)

无论你采用哪种语言,接下来要考虑的首要因素就是速度和用户成本

移动互联网运营限制流量,进而使带宽成了一个有限而宝贵的资源,而且漫游收费还很贵!

考虑到流量、成本和速度,所以必须保证markup(编程语言)尽可能的简洁、小且标准。

得记住一点,移动网络运营商收取的漫游费是很多的!

Speed and Cost (to the User)

由于新技术更新和采用速度很快,未来肯定是HTML5和CSS3的天下,所以要考虑适当地升级你的代码。

像Apple等都提供固件升级,这样很多老设备也可以支持新标准了。但是也许会发生类似的情况:IE6用户拒绝升级到IE8,因此在决策之前,都要做好研究,测试、测试、再测试!

布局要素

移动网页布局会很麻烦:

  • 移动设备形状尺寸不一;
  • 移动设备质量和解决方案不一;
  • 移动设备或许支持放大滚动,但也可能不支持;
  • 屏幕小,所以页面滚动会更加困难。

移动页面设计布局的终极目的就是:尽可能地让用户快速地找到所寻找的东西,减少这一过程的用户负担。

布局对你的移动网站成功与否起着本质性的作用。

Layout Essentials

由于空间少,single column designs(单栏设计)是必须的!

简洁

有效的移动网页布局的理念之一就是简洁。内容越繁杂,读起来越困难,需要滚动的地方越多!

空间小致使多栏设计并不适用,内容布局不能超越屏幕,除非是被动放大等。

因此,单栏设计显得更加实用。

避免滚动

iPhone和iPad等移动设备可根据设备中心来调整页面,这些也减少了滚动需求,不过并不是所有移动设备都有这功能。

Avoid Scrolling

在手机上需要滚动的内容页面不具有良好的体验。

横向滚动也不是个好主意,特别iPad上,滚动条只有在用户尝试滚动的时候才会出现,所以多数情况下,移动网页设计都要避免滚动。

Avoid Scrolling

一个好的移动网页设计具有清晰地布局以及简洁的导航选项。

导航和按钮的大小

另外一个关键成分就是导航和按钮了!这也是触摸移动设备的一个重要问题。

我不确定你的手有多大,我想你肯定遇到过要点下那么小的按钮,更该死的他还没有放大功能。

所以说,一个好的体验要有什么?一个大小恰当,按起来爽的链接和按钮!!!

减少点击次数也是个好主意,在移动网页设计中这也是重要的一点!!

内容设计

内容是网站的核心,不过也要考虑到流量等成本问题,如何减少过大的图片、文本和多媒体也是门学问,50KB和2MB有着相当大的区别!

Content Design

移动设备更强调“少”,更少的内容意味着更具可读性!

文本内容

一个网站里,最多的就是文本内容了!

但是尽管内容依旧是手持设备上的网站,但是诸如滚动、小文件、快速阅读以及带宽限制等因素,这些都意味着我们必须调整文本以确保其可用性!

如果你的设计只是在现有网站布局上进行简单的调整(也就是第一个办法NO1:采用支持移动设备的网页设计),你需要对一些不必要的文本、图片或者多媒体进行删减(就算是提供下载,也会增加可读性)。而独立的手机网站设计的好处就是可以清除多余的内容。

图片

屏幕小决定着CSS格式的图片或者大容量的infographics会有问题。虽然有些手持设备屏幕大,问题不会明显。IPhone等设备的放大缩小功能仍旧有限,所以一些视觉美化功能肯定需要剔除!

Images

大图占据宽带,所以要减少其大小!

50KB和500KB的图片在尺寸和解决方案上也有着明显的区别!带宽损耗也不同!

视音频

视音频几乎是必须具备的内容,就算是有宽带限制,尤其是在iPhone和iPod这样的设备。同样的道理,适度的和明智的使用是关键!

Video/Audio

如果你提供视音频,最好有一个下载征询!

下面是几个建议:

  • 格式:谨慎使用flash等一些设备上不兼容的格式;
  • 视音频文件大小:优化你的文件
  • 不要自动下载视音频:一定要事先征询用户。
  • 不要自动播放:这样很让人厌烦。

其他需考虑的因素

最要要考虑的因素可能还有scripting、plugins等等

知道该不要什么,该保留什么,这样才能提高用户体验,同事确保你的手机网站能够适用于所有移动设备!

移动设备交互VS个人电脑交互

两者交互方式如此不同在于屏幕不同;另外移动设备中没有鼠标键盘,而是通过手指动作来指定行动和反映。

专属技术和Plugin

比如,Apple就阻止flash在其移动设备上的应用,这真的是个问题!从而不得不依赖于苹果的专有技术!

Apple反对flash也许预兆着移动设备生产商想保住其对第三方的优先权。虽然很多开发商也因此使用苹果平台,不过对这一问题的最好解决办法就是适度地对自己的手机网站进行降级!

有着良好网络连接的网络服务

由于现在的移动设备网络环境,网络连接仍旧是许多web app最头疼的一个问题!甚至还有一些手机没信号的“死亡区”,这些都影响着用户交互,用户在做某一件事,不过网络却突然中断了,体验自然很糟糕!所以在设计app时需要考虑到离线和在线两种情况。(推荐阅读this offline HTML5 iPhone app tutorial)。

移动网站测试

你只要到手机店逛一逛,就会发现屏幕等等都是有很多不同的!

Testing Your Mobile Website

目前有很多网站测试模拟器。

考虑到现在几个大公司都只想保住自己的竞争优势,所以标准化似乎不太可能发生!

所以网站测试的范围要尽可能广!

移动设备模拟器测试

毋庸置疑,你需要在尽可能多的平台上对自己的网站进行测试,下面我们提供了一些模拟器:

总结:3S:Simple,Small,Speedy

虽然本文提供的都是一些概要性的建议,不过仍旧有着基本的原则。

速度(speedy)仍旧是目前首要解决的问题,我们可以利用监视器来限制解决方案和颜色。许多ISPs仍旧限制宽带,有时还会发生断网,这些情况对于老一代开发人员来说似乎并不陌生!

所以在网络等基础设施未改善之前,simple,small,speedy就是我们要遵守的3个主要原则了!

相关内容:

原文:http://sixrevisions.com/web-development/mobile-web-design-best-practices/
本文链接:http://www.socialbeta.cn/articles/mobile-web-design-best-practices.html/
译者:wisp
欢迎转载,更多社会化媒体相关,请订阅SocialBeta

您可能也喜欢:

移动网页设计概要、案例和技巧

移动设备的网页设计

网页设计(web design)和用户界面设计(UI design)

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

浅析网页界面设计-首页设计
无觅

© 推荐 for 互联网的那点事, 2010. | 点击查看你正在浏览的文章链接 |



文章标签: , ,


点击关注“互联网的那点事”新浪微博

点击收听”互联网的那点事”腾讯微博

相关 [移动 网页设计 最佳实践] 推荐:

5大移动网页设计之最佳实践

- everfly - 互联网的那点事
本文来自SocialBeta内容贡献者wisp,原文译自Mobile Web Design: Best Practices,更多移动产品设计方面的资料,请查看SocialBeta移动互联网栏目. 移动设备的兴起正在给互联网带来一场新的革命,虽然说移动网页设计原则不会有多大变化,但是却有着明显的区别.

浅谈移动前端的最佳实践 - 叶小钗

- - 博客园_首页
这几天,第三轮全站优化结束,测试项目在2G首屏载入速度取得了一些优化成绩,对比下来有10s左右的差距:. 这次优化工作结束后,已经是第三次大规模折腾公司框架了,这里将一些自己知道的移动端的建议提出来分享下,希望对各位有用. 文中有误请您提出,以免误人自误. sap(single page application)也就是我们常常说的web应用程序webapp,被认为是业内的发展趋势,主要有两个优点:.

移动开发技术周报:用NetBeans开发HTML5应用,Objective-C和Cocoa最佳实践(2013.02.26)

- - InfoQ cn
总结性周报这个东西,是有时间阅读的人整理给没时间阅读又需要阅读的人看的. 有用的周报,相当于成功的用整理者的时间投入节约了阅读者的时间支出,皆大欢喜;否则,是浪费了双方的时间. 希望今天开始的这个周报会是个有用的周报. 有任何建议、反馈,欢迎写在评论里. 另,如果大家看到什么好东西(尤其是中文界的技术内容)想要分享,欢迎去Fenng的新店 Startup News踩踩.

从基本文本网页至移动网页设计,网页设计全历史

- Kione - 互联网的那点事
从1990年代初的基本文本编辑的网页开始,1990年代中期的在线网页建设,到上世纪90年代末崛起的flash,再到后来的CSS和Javasvript的崛起,直到现在web 2.0时代鼎盛时期,网页设计经历了多次变革. 这里介绍和突出了,不同时期里面网页设计的各方面的关键特点. 编辑/翻译: Viking Wong@DamnDigital 图片编辑: Qi Wong@DamnDigital 原文: Kissmetrics.

jQuery最佳实践

- andi - 阮一峰的网络日志
上周,我整理了《jQuery设计思想》. 那篇文章是一篇入门教程,从设计思想的角度,讲解"怎么使用jQuery". 今天的文章则是更进一步,讲解"如何用好jQuery". 我主要参考了Addy Osmani的PPT《提高jQuery性能的诀窍》(jQuery Proven Performance Tips And Tricks).

PHP最佳实践

- xiangqian - 阮一峰的网络日志
虽然名字叫《PHP最佳实践》,但是它主要谈的不是编程规则,而是PHP应用程序的合理架构. 它提供了一种逻辑和数据分离的架构模式,属于MVC模式的一种实践. 我觉得,这是很有参考价值的学习资料,类似的文章网上并不多,所以一边学习,一边就把它翻译了出来. 根据自己的理解,我总结了它的MVC模式的实现方式(详细解释见译文):.

MongoDB最佳实践

- - NoSQLFan
将 MongoDB加入到我们的服务支持列表中,是整个团队年初工作计划中的首要任务. 但我们感觉如果先添加一项对NoSQL存储的支持,而不是先升级已支持的关系型数据库,可能对用户不太好,毕竟目前的用户都使用关系型数据库. 所以我们决定将引入MongoDB这项工作放到升级MySQL和PostgreSQL之后来做.

抓住用户的设计:移动网页设计的信息组织

- - 雷锋网
【编者按】本文转载自 @雅秋168 的 个人博客. 对于我们中很多人来说,移动端设计是一个崭新的机会. 但是,如果你过去是桌面端的网页设计师,如何将经验转换到移动网页端呢. 当然,已有的一些工具,经验,技能仍然适用,只需开始思考下如何在手机上进行组织和布局. 当你开始组织移动端界面的内容和操作时,一些可靠的信息架构准则:比如,清晰的标签(labeling),平衡的宽度和深度,妥当合理的心智模型,这些仍旧十分重要.

文章: Grails最佳实践

- - InfoQ cn
我在IntelliGrape工作,这是一家专门使用Groovy & Grails进行开发的公司. 本文是我们Grails项目遵循的最佳实践的基本清单,收集自邮件列表、Stack Overflow、博文, 播客和 IntelliGrape的内部讨论. 它们分为控制器、服务、Domain、视图、TagLib、测试和其他.

PHP最佳实践(译)

- - CSDN博客Web前端推荐文章
原文:  PHP Best Practices-A short, practical guide for common and confusing PHP tasks. 译者: youngsterxyf. 本文档最后审阅于2013年3月8日. 由我, Alex Cabal,维护该文档. 我编写PHP程序已有很长一段时间了,当前我 经营着 Scribophile,由认真作家组成的一个在线写作团体,  Writerfolio,为自由职业者提供的一个易用写作工具集,以及  Standard Ebooks,一个图文并茂、无数字版权管理的公共领域电子书出版商.