《HTML5移动Web开发实战》—— 1.1 移动Web设计的挑战

本节书摘来异步社区《众妙之门——移动Web设计精髓》一书中的第1章，第1.1节，作者：【德】Smashing Magazine，更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.1 移动Web设计的挑战

众妙之门——移动Web设计精髓
针对移动设备的Web设计由于其行业的特殊性会面临一系列特殊的挑战，那就是设计师必须克服各种困难来制作一个在移动设备上完美运行的网站。如果你决定尝试设计一个移动设备上网站，那么下面将讲到一些值得你注意的可能出现的问题。

1. 屏幕尺寸多样化
   尽管Web设计师经常处理由于不同的屏幕尺寸而产生各种问题，与处理电脑屏幕大小不一问题的方法相比，移动设备Web设计的处理方法有所不同。大多数Web设计师都能顺利解决由于台式电脑屏幕分辨率提高而出现的问题，但是如果之前你没有任何移动Web设计的相关经验，在实际操作中会变得比你想象的更加复杂。

因为移动网络技术始终在变化，所以移动设备的屏幕尺寸也在改变。对于设计师来说幸运的是，与过去的手机相比，如今移动设备的屏幕越来越大，分辨率也在不断提高，但是不容忽视的是旧手机还未退市。

说到移动设备的屏幕尺寸，这里向大家推荐两篇文章：《移动设备屏幕尺寸发展趋势》和《移动设备屏幕尺寸趋势研究》。上述学术文章所论述的结论是，在移动设备发展中，240x320分辨率将成为标准分辨率。近来很多最新的移动设备和智能手机都拥有大屏幕，小屏幕手机已然成为过去式了。

屏幕尺寸发展趋势

1. 缺乏理解
   许多Web设计师所面临的最大挑战之一就是对于新设计形式的担忧，害怕自己做不好。如果在你之前的网页设计作品中没有考虑到移动网络浏览者和访客的想法，那么现在如果不进行一些相关的研究和学习，你是无法应对这个问题的。因为用户所处的浏览环境不一样，手机网络浏览者和电脑网络浏览者在行为上会有一定的差别，所以Web设计师需要增加对移动互联网的理解和认识。如果你是移动互联网开发新人，那么通过学习本篇文章中的知识要点，你会对移动互联网有一个基本的了解和认识。
2. 快速的变化
   与其他技术一样，快速的变化是互联网行业中的常态。Web设计师和移动Web设计师都需要始终站在本行业的前端。当行业技术与趋势发生变化，移动Web同样要适应变化。当然，变化的挑战对于设计师们来说已经是家常便饭，移动Web只是设计师需要搞定的一个新领域。
3. 测试繁琐
   在移动Web设计面临的最重大挑战之一就是终端的多样性。在设置桌面产品时我们已经有很多方法来应付不同种类的浏览器和不同尺寸的显示设备，但是在移动互联网中，我们根本不可能测试用户在某些特定环境下访问网站的情况。

当然，如果你进行适当的准备工作，移动网页测试还是能够完成的。在这种情况下，简单的网页测试会让整个测试过程更轻松一些，因为简单，所以不容易出错。当有了更加细致的设计和流畅的测试流程，移动网站的可用性还是可以让人接受的，这样就能运用到越来越多的移动设备中。

还有一些有用的测试资源，比如网页开发工具箱中就有一些专为移动Web设计的功能，比如一些用户禁用了CSS与图片，你就可以关闭这两项功能，看看这时你的网页是什么形态。虽然这个工具无法让我们将访问传统互联网的体验复制到手机上，但是它的确可以帮助我们去改进网页内容与导航的布局。

另一个有用的测试工具就是Opera浏览器。在Opera浏览器的工具栏中，点击“查看”，选择“小屏幕”，这样网页就会像你在手机上看到的那样以窄屏显示。

同样，你可以使用Opera WebDev工具栏，通过点击“显示”选项使用的标签工具浏览无格式的页面。禁用CSS后你可以以小屏幕的模式浏览网页，这样你就能体验并了解手机用户的感受了。下面的截图就是在小屏幕窗口显示的Smashing Magazine的无格式页面标题。

1. 做减法
   如果网页上只能容纳必需的元素，那么设计师和老板就要考虑什么内容才是最重要、最核心的。这话说起来简单，但当考虑到一个网站上所加载的内容、图片甚至视频时，如何对其做适当的精简却是个不小的难题。此外我们还必须充分了解用户的情况：他们正在做什么？他们为什么在这个时候访问这个网站？他们可能喜欢什么，可能讨厌什么？坐在台前设计程序与思考目标用户的需求压根不是一回事。