实践之移动网页设计与制作的报告
速度和成本(对用户而言)
无论你采用哪种语言,接下来要考虑的首要因素就是速度和用户成本。
移动互联网运营限制流量,进而使带宽成了一个有限而宝贵的资源,而且漫游收费还很贵!
考虑到流量、成本和速度,所以必须保证markup(编程语言)尽可能的简洁、小且标准。
得记住一点,移动网络运营商收取的漫游费是很多的!
由于新技术更新和采用速度很快,未来肯定是HTML5和CSS3的天下,所以要考虑适当地升级你的代码。
像Apple等都提供固件升级,这样很多老设备也可以支持新标准了。但是也许会发生类似的情况:IE6用户拒绝升级到IE8,因此在决策之前,都要做好研究,测试、测试、再测试!
布局要素
移动网页布局会很麻烦:
移动设备形状尺寸不一;
移动设备质量和解决方案不一;
移动设备或许支持放大滚动,但也可能不支持;
屏幕小,所以页面滚动会更加困难。
移动页面设计布局的终极目的就是:尽可能地让用户快速地找到所寻找的东西,减少这一过程的用户负担。
布局对你的移动网站成功与否起着本质性的作用。
由于空间少,single column designs(单栏设计)是必须的!
简洁
有效的移动网页布局的理念之一就是简洁。内容越繁杂,读起来越困难,需要滚动的地方越多!
空间小致使多栏设计并不适用,内容布局不能超越屏幕,除非是被动放大等。
因此,单栏设计显得更加实用。
避免滚动
iPhone和iPad等移动设备可根据设备中心来调整页面,这些也减少了滚动需求,不过并不是所有移动设备都有这功能。
在手机上需要滚动的内容页面不具有良好的体验。
横向滚动也不是个好主意,特别iPad上,滚动条只有在用户尝试滚动的时候才会出现,所以多数情况下,移动网页设计都要避免滚动。
一个好的移动网页设计具有清晰地布局以及简洁的导航选项。
导航和按钮的大小
另外一个关键成分就是导航和按钮了!这也是触摸移动设备的一个重要问题。
我不确定你的手有多大,我想你肯定遇到过要点下那么小的按钮,更该死的他还没有放大功能。
所以说,一个好的体验要有什么?一个大小恰当,按起来爽的链接和按钮!!!
减少点击次数也是个好主意,在移动网页设计中这也是重要的一点!!
内容设计
内容是网站的核心,不过也要考虑到流量等成本问题,如何减少过大的图片、文本和多媒体也是门学问,50KB和2MB有着相当大的区别!
移动设备更强调“少”,更少的内容意味着更具可读性!
文本内容
一个网站里,最多的就是文本内容了!
但是尽管内容依旧是手持设备上的网站,但是诸如滚动、小文件、快速阅读以及带宽限制等因素,这些都意味着我们必须调整文本以确保其可用性!
如果你的设计只是在现有网站布局上进行简单的调整(也就是第一个办法NO1:采用支持移动设备的网页设计),你需要对一些不必要的文本、图片或者多媒体进行删减(就算是提供下载,也会增加可读性)。而独立的手机网站设计的好处就是可以清除多余的内容。
图片
屏幕小决定着CSS格式的图片或者大容量的infographics会有问题。虽然有些手持设备屏幕大,问题不会明显。IPhone等设备的放大缩小功能仍旧有限,所以一些视觉美化功能肯定需要剔除!
50KB和500KB的图片在尺寸和解决方案上也有着明显的区别!带宽损耗也不同!
视音频
视音频几乎是必须具备的内容,就算是有宽带限制,尤其是在iPhone和iPod这样的设备。同样的道理,适度的和明智的使用是关键!
如果你提供视音频,最好有一个下载征询!
下面是几个建议:
格式:谨慎使用flash等一些设备上不兼容的格式
视音频文件大小:优化你的文件
不要自动下载视音频:一定要事先征询用户
不要自动播放:这样很让人厌烦
其他需考虑的因素
最要要考虑的因素可能还有scripting、plugins等等
知道该不要什么,该保留什么,这样才能提高用户体验,同事确保你的手机网站能够适用于所有移动设备!
移动设备交互VS个人电脑交互
两者交互方式如此不同在于屏幕不同;另外移动设备中没有鼠标键盘,而是通过手指动作来指定行动和反映。
专属技术和Plugin
比如,Apple就阻止flash在其移动设备上的应用,这真的是个问题!从而不得不依赖于苹果的专有技术!
Apple反对flash也许预兆着移动设备生产商想保住其对第三方的优先权。虽然很多开发商也因此使用苹果平台,不过对这一问题的最好解决办法就是适度地对自己的手机网站进行降级!
有着良好网络连接的网络服务
由于现在的移动设备网络环境,网络连接仍旧是许多web app最头疼的一个问题!甚至还有一些手机没信号的“死亡区”,这些都影响着用户交互,用户在做某一件事,不过网络却突然中断了,体验自然很糟糕!所以在设计app时需要考虑到离线和在线两种情况。(推荐阅读this offline HTML5 iPhone app tutorial)。
移动网站测试
你只要到手机店逛一逛,就会发现屏幕等等都是有很多不同的!
目前有很多网站测试模拟器。
考虑到现在几个大公司都只想保住自己的竞争优势,所以标准化似乎不太可能发生!
所以网站测试的范围要尽可能广!
移动设备模拟器测试
毋庸置疑,你需要在尽可能多的平台上对自己的网站进行测试,下面我们提供了一些模拟器:
Android emulator
Blackberry emulator
Dot Mobi emulator
Firefox Mobile emulator
iPhone / iPad / iPod Touch emulator
Klondike WML emulator
LG emulator
Microsoft Devices emulator
Motorola emulator
Mozilla Fennec emulator
NetFront emulator
Nokia emulator
OpenWave emulator (archive)
Opera Mini emulator
Opera Mobile emulator
Palm emulator
Palm Pre / iPhone emulator
Samsung Java emulator
Samsung Platform emulator
Windows Mobile emulator
总结:3S:Simple,Small,Speedy
虽然本文提供的都是一些概要性的建议,不过仍旧有着基本的原则。
速度(speedy)仍旧是目前首要解决的问题,我们可以利用监视器来限制解决方案和颜色。许多ISPs仍旧限制宽带,有时还会发生断网,这些情况对于老一代开发人员来说似乎并不陌生!
所以在网络等基础设施未改善之前,simple,small,speedy就是我们要遵守的3个主要原则了!
【责任编辑:小戴工程师】