《HTML5移动Web开发实战》—— 1.2 对移动Web设计的思考

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

1.2 对移动Web设计的思考

众妙之门——移动Web设计精髓
我们已经对移动Web设计的趋势和挑战进行了初步的了解,下面我们来重点检查一下设计师在过程中应该考虑的几个要点。

  1. 简明的语义标记
    如果你想为一个优秀的移动网页打下稳固的基础,你最先要做的事情就是设立一套适用于网页的、简明的语义标记。这样在你设计移动网页的时候才会避免重复传统互联网设计中存在的重大问题。简明的标记能有效帮助浏览器正确显示网页页面。同样,由于避免了不必要的环节,简明的语义标记还将给用户带来愉快的体验经历。
  2. CSS下内容与显示的分离
    除了简明的语义标记,内容与显示的分离也是非常重要的。与桌面用户相比,手机网页用户更喜欢访问没有图片和禁用CSS的网页。手机网页用户更希望顺利地访问页面内容和链接——而不是看到华丽的页面显示。作为移动互联网网站,当其开始大量使用简明的语义标记,并用CSS实现内容与显示的分离时,这就是一个具有非凡意义的伟大的开端。
  3. ALT标签
    出于部分用户由于某些原因不能浏览网页上图片的考虑(或者用户选择屏蔽图片),ALT标签对于可用性来说显得非常重要。无论如何ALT标签在互联网中都有所运用,只是对手机互联网用户来说它更加重要而已。
  4. 表单域的分类
    像ALT标签一样,表单域分类使得移动互联网变得更加实用。试想一下,如果没有对其进行了解就加以使用,那么一定不会得到你理想的效果。而处理好像ALT标签和表单域分类这样的细节问题就可以使你事半功倍。
  5. 标题的作用
    由于移动Web浏览器所显示的内容文本格式常常是受限制和不协调的,所以标题在此处就显得格外重要。移动Web浏览器并不能将文字显示为你想让它呈现的那种效果,但是类似标题一、标题二、标题三这样的标签能帮助页面构造一个合理的用户视图,并凸显出页面的某些重点内容。
  6. 禁用漂浮链接
    尽管移动Web浏览器也能通过使用漂浮链接来进行整个网页页面的布局,但是在小屏幕上恐怕并不会收到很好的效果。通常情况下,没有漂浮链接会使内容简单排列的网页整体看起来更舒服,用户也能得到更好的使用体验。
  7. 减少页边距和填充
    一般情况下,和传统的网站相比,移动设备上的网页最好减少页边距和其他的填充。当然,这取决于你所设计的网站页面填充的实际情况和网页页边距的大小,但是过多的页面填充和过大的页边距并不能提升用户体验。
  8. 做好页面导航
    很多页面的网站导航都设计在页面的最上方。这样的设计对于移动网页同样有用,但是值得注意的是,手机上的导航选项是按比例缩小的。在手机网页中,最好只提供最常用、最有用的链接选项,同时在设计时尽量让用户能够更加方便地接入其他的导航链接。
  9. 注重页面颜色对比
    由于使用手机屏幕不能拥有电脑或笔记本屏幕一样的使用体验,所以在设计手机Web页面的颜色时,为了确保用户能够有良好的阅读体验,设计师们一定要注意页面背景颜色和文字颜色的协调搭配。
上一篇:Html5 学习系列(四)文件操作API


下一篇:Windows 8实用窍门系列:15.Windows 8中的4种视图状态和锁屏通知