众妙之门——移动Web设计精髓

众妙之门——移动Web设计精髓

[德] Smashing Magazine  著

赵俊婷  译

人民邮电出版社

北京

图书在版编目（CIP）数据

众妙之门：移动Wed设计精髓 / 德国Smashing杂志 著；赵俊婷译. --北京：人民邮电出版社，2013.4

ISBN  978-7-115-30169-7

Ⅰ. ①众…  Ⅱ. ①德… ②赵…  Ⅲ. ①移动通信―网站―设计  Ⅳ.①TP393.092

中国版本图书馆CIP数据核字（2012）第289356号

版权声明

Mobile Design for iPhone and iPad

Copyright © 2012 by Smashing Media GmbH. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any formor by any means, electronic, mechanical, by photocopying, recording or otherwise, without the prior permission in writing fromSmashing Media GmbH.

CHINESE SIMPLIFIED language edition published by POSTS ＆ TELECOMMUNICATIONS PRESS Copyright ©2013.

本书中文简体版由德国Smashing Media公司授权人民邮电出版社独家出版。未经出版者书面许可，不得以任何方式复制或抄袭本书内容。版权所有，侵权必究。

内容提要

来自全球的多位资深Web设计师给广大读者带来了大量精彩的iPhone和iPad移动应用设计与开发的专业文章。这些文章主要围绕移动Web设计与开发中的核心问题，内容涵盖：移动Web开发的趋势；如何建立一个移动网站；iPhone和iPad的网络应用发展；iPhone应用开发的趋势；iPhone应用开发的误区；iPad应用开发的要点；如何制作移动Web应用；如何使用CSS3媒体资讯库创建移动站点；移动设备的形式；Web和iPhone开发中的Photoshop设置；以及如何推销你的移动应用。

本书内容丰富、案例精彩，适合具有一定经验的移动Web设计师或相关专业的学生阅读。

众妙之门——移动Web设计精髓

◆  著   [德]Smashing Magazine

译  赵俊婷

责任编辑  赵轩

◆  人民邮电出版社出版发行    北京市崇文区夕照寺街14号

邮编  100061    电子邮件  315@ptpress.com.cn

网址  http://www.ptpress.com.cn

北京捷迅佳彩印刷有限公司印刷

◆  开本：880×1230  1/32

印张：6.25

字数：198千字    2013年4月第1版

印数：1-3500册    2013年4月北京第1次印刷

著作权合同登记号  图字：01-2012-7259号

ISBN 978-7-115-30169-7

定价：35.00元

读者服务热线：（010）67132692  印装质量热线：（010）67129223

反盗版热线：（010）67171154

Steven Snell

Web设计师都深知这个行业包含了大量的变化和创新，为了始终保持在业内的领先地位，需要不断地适应和学习新的技术。在过去的几年中，该行业中变化最大的领域之一就是越来越多的网民通过手机和移动终端设备来进行网络浏览。因此，Web设计师必须不断学习和掌握更多、更新的专业知识，从而开发出更多、更好的移动网络应用以满足这一受众群体的需求。

因为设计应用于移动设备的网页存在一些特有的问题和挑战，所以这需要设计者和开发者用具有战略性的方法来对待。在本书中，我们将把移动Web开发作为一个整体来研究，包括移动网络的当前发展趋势，存在的挑战，以及开发小技巧和经典案例分析。本书中还包含了大量相关的文章和专业资料，学习资源丰富，如果你有兴趣学习更多的移动应用开发，在这里，你触手可及。

简化选项

如今的移动互联网出现了一个不得不让人注意的现象，那就是为网站访客提供的有效选项是按比例缩小的，但可用性是在增加的。例如向用户推荐的移动网站主页，页面上仅仅只有17项简单的标题和内容链接、一个登录链接按钮和一些最基本的导航选项。对于移动设备上Web设计，我认为简易直观非常关键。由于移动设备自身的因素，使得设备的屏幕较小，再加上移动网络浏览速度相对较慢，所以尽量减少页面中不必要的选项从而让访客能够直接浏览最关键、最重要的信息才是重中之重，而其他可有可无的链接则越少越好。

在这个Web页面异常拥挤的时代，简洁直观的移动Web页面能使访客眼前一亮。另外还有一点非常重要，显示的内容越多，被删减的可能性就越大。只要访客想进行的操作是被允许的，我们就要想办法简化页面，从而能使用户更加便捷、容易地操作和浏览。

页面留白

页面留白对于任何设计来说都是非常重要的组成部分。如何做好页面留白对于总是想呈现给访客更多信息的Web设计者来说的确是一件难事，因为这看起来很矛盾。由于移动设备屏幕的大小限制，页面留白也成为Web设计中不可或缺的重要组成。杂乱无章的网站和页面设计会大大降低用户体验，同样也很难让用户在移动环境中完成他们所想进行的操作。

正如你所看到的本书中所展示的页面图片，或者拿出你自己的手机看看上面的网页，你会发现很多页面设计中都包含了大量的留白设计，特别是那些我们经常使用和浏览的网页。

少量的图片

近年来随着高速网络的普及，Web设计者能够在宽带视频和图片等方面有更自由的发挥。由于电脑前的访客总是希望看到具有良好视觉效果的页面，所以导致Web设计者在Web设计中使用大量的图片。无论如何，对于移动Web设计来说，在页面上过度地使用图片往往会降低用户体验。

随着越来越多的手机用户使用高速轻便的智能手机，图片在网页中应用的机会已经显现。但是，目前仍然有大量手机用户并没有使用智能手机，所以很多移动网页依然选择尽量避免在网页设计中使用图片。

子域将取代.Mobi域名和单独域名

当移动顶级域名（TLD）最初得到应用的时候，在市场上得到了热烈的反响。当时有很多网站在移动设备网站中运用.Mobi域名，而时下更普遍的做法是，公司在他们主域中创建单独的文件夹或者创建一个新的子域。在决定使用该技术时，公司必然要有多方面的考虑，与发散性的域名容易混淆浏览者的特点相比，使用子域的主要优点是，所有的网站内容都在一个独立域名中，这样用户就不大可能晕头转向了。

仔细观察，我们会发现移动设备上的网站地址都是例如Mobile.xxx.com、m.xxx.com、xxx.com/Mobile，xxx.com/m等类似的形式。当然，我们对这种趋势抱有很大的期望，但是当你打开一些知名网站的手机版本时，你会发现子域名比.Mobi TLDs运用得更加广泛。

内容优先

由于Web页面的高度简洁和普遍偏少的选项，使得人们总是优先关注网页内容。当你在浏览移动网页时，你会惊奇地发现，网页内容总是被优先呈现给访客。网站“聚焦用户”是理所当然的，因为大部分的网站都依靠其商业用途来维持运营，所以网页中会有一些对访客来说并不是必需的组成成分，例如页面上方的横幅广告栏。虽然广告已经成为互联网公认的一部分，但是大多数移动网站仍然是没有广告的。尽管公司的利润来源是拥有更多有用的网站，但是移动Web所呈现的丰富实用的内容始终针对的是广大的移动用户，而非公司。

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

1. 屏幕尺寸多样化

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

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

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

屏幕尺寸发展趋势

2. 缺乏理解

许多Web设计师所面临的最大挑战之一就是对于新设计形式的担忧，害怕自己做不好。如果在你之前的网页设计作品中没有考虑到移动网络浏览者和访客的想法，那么现在如果不进行一些相关的研究和学习，你是无法应对这个问题的。因为用户所处的浏览环境不一样，手机网络浏览者和电脑网络浏览者在行为上会有一定的差别，所以Web设计师需要增加对移动互联网的理解和认识。如果你是移动互联网开发新人，那么通过学习本篇文章中的知识要点，你会对移动互联网有一个基本的了解和认识。

3. 快速的变化

与其他技术一样，快速的变化是互联网行业中的常态。Web设计师和移动Web设计师都需要始终站在本行业的前端。当行业技术与趋势发生变化，移动Web同样要适应变化。当然，变化的挑战对于设计师们来说已经是家常便饭，移动Web只是设计师需要搞定的一个新领域。

4. 测试繁琐

在移动Web设计面临的最重大挑战之一就是终端的多样性。在设置桌面产品时我们已经有很多方法来应付不同种类的浏览器和不同尺寸的显示设备，但是在移动互联网中，我们根本不可能测试用户在某些特定环境下访问网站的情况。

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

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

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

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

5. 做减法

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

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

1. 简明的语义标记

如果你想为一个优秀的移动网页打下稳固的基础，你最先要做的事情就是设立一套适用于网页的、简明的语义标记。这样在你设计移动网页的时候才会避免重复传统互联网设计中存在的重大问题。简明的标记能有效帮助浏览器正确显示网页页面。同样，由于避免了不必要的环节，简明的语义标记还将给用户带来愉快的体验经历。

2. CSS下内容与显示的分离

除了简明的语义标记，内容与显示的分离也是非常重要的。与桌面用户相比，手机网页用户更喜欢访问没有图片和禁用CSS的网页。手机网页用户更希望顺利地访问页面内容和链接——而不是看到华丽的页面显示。作为移动互联网网站，当其开始大量使用简明的语义标记，并用CSS实现内容与显示的分离时，这就是一个具有非凡意义的伟大的开端。

3. ALT标签

出于部分用户由于某些原因不能浏览网页上图片的考虑（或者用户选择屏蔽图片），ALT标签对于可用性来说显得非常重要。无论如何ALT标签在互联网中都有所运用，只是对手机互联网用户来说它更加重要而已。

4. 表单域的分类

像ALT标签一样，表单域分类使得移动互联网变得更加实用。试想一下，如果没有对其进行了解就加以使用，那么一定不会得到你理想的效果。而处理好像ALT标签和表单域分类这样的细节问题就可以使你事半功倍。

5. 标题的作用

由于移动Web浏览器所显示的内容文本格式常常是受限制和不协调的，所以标题在此处就显得格外重要。移动Web浏览器并不能将文字显示为你想让它呈现的那种效果，但是类似标题一、标题二、标题三这样的标签能帮助页面构造一个合理的用户视图，并凸显出页面的某些重点内容。

6. 禁用漂浮链接

尽管移动Web浏览器也能通过使用漂浮链接来进行整个网页页面的布局，但是在小屏幕上恐怕并不会收到很好的效果。通常情况下，没有漂浮链接会使内容简单排列的网页整体看起来更舒服，用户也能得到更好的使用体验。

7. 减少页边距和填充

一般情况下，和传统的网站相比，移动设备上的网页最好减少页边距和其他的填充。当然，这取决于你所设计的网站页面填充的实际情况和网页页边距的大小，但是过多的页面填充和过大的页边距并不能提升用户体验。

8. 做好页面导航

很多页面的网站导航都设计在页面的最上方。这样的设计对于移动网页同样有用，但是值得注意的是，手机上的导航选项是按比例缩小的。在手机网页中，最好只提供最常用、最有用的链接选项，同时在设计时尽量让用户能够更加方便地接入其他的导航链接。

9. 注重页面颜色对比

由于使用手机屏幕不能拥有电脑或笔记本屏幕一样的使用体验，所以在设计手机Web页面的颜色时，为了确保用户能够有良好的阅读体验，设计师们一定要注意页面背景颜色和文字颜色的协调搭配。

Sitepoint出版了由布莱恩.苏塔撰写的《移动Web设计》，这篇文章对于学习移动Web设计的朋友来说很值得参考和学习。在文章中，布莱恩将移动Web设计分解为7个简要易懂的步骤。这篇文章的内容对于重申本人上述的Web设计要点非常有用。

1. 不要混淆标记

大多数网站都会忽视WmL，而是用大家更熟悉的XHTML语言来编辑标记，所以在进行设计时一定要使用适合的编辑语言，并建立简明的语义标记。

2. 了解你的手机

我们不仅要满足手机不同屏幕尺寸和分辨率的需求，还要满足其变化多端的外观需求。从早期的时短时长的长方形到后来的“大哥大”，再从精密小个头发展到完美比例的方形，手机丰富多彩、日新月异的变化简直让人抓狂！

3. 找准目标客户

传统的互联网用户大多是坐在电脑桌前面对着一台高分辨率大显示器。而移动Web用户的使用环境却大大不同。他们在浏览网页时可能正在等地铁、正在公交车或火车上，或是刚刚走出家门，又或是在深夜迷失在一个陌生的城市，任何情况都可能发生。

4. 谨慎发布

虽然只有一个网站的概念，但是用户所使用的浏览介质很大程度上决定着网站的风格和形态，如今业内也流行着很多种不同的设计标准，但是一个独立的移动网页必须满足的一个条件，那就是要为用户提供优越的浏览体验。

5. 选定响亮的域名

当你准备为一个移动选定一个域名的时候，我曾经工作过的公司和同事总是会选用子域名。创建一个子域名是设立一个网站时最简单的办法（前提是你拥有该域名），这意味着你不用把大把的时间花在改进和修改服务器上（而且还很有可能影响正常的Web设计进度）。

6. 验证你的标记

移动Web浏览器的运行速度和容错性都大大低于电脑浏览器。在移动设备上运行的浏览器，并没有奢侈的电脑浏览器所拥有的2GHz处理器和高达200GB的存储空间。因此，你必须一次又一次地检查、验证、重复检查你的标记。

7. 除了测试，还是测试

虽然在台式电脑上能够使用Web浏览器来测试你的移动网站，但是在其得到实际运用之前，它仍然只是一个模拟的移动体验。不容忽视的是，用这种方式还是无法精确地复制许多移动设备的使用感受。

布莱恩的文章对于移动Web设计与开发新手来说是一个非常好的开端。当你在检查、测试你的作品时能够正确运用文章中的知识点以确保你用正确的方式来完成工作，这是一个非常好的学习资源。