许多人（包括我自己）喜欢网络的原因之一，是因为它非常完美地融合了技术与设计。虽说一直以来技术都对设计产生着影响，但我认为，当今这个时代是将多种技术结合起来，共同促使Web设计发生巨大转变的。结果就是Web设计风格、趋势和技术都发生了重大改变。 请考虑以下技术： 新设备（平板电脑、智能手机等）数量激增； 响应式设计和开发技术不断进步； 自定义字体在线应用的不断优化； CSS3和HTML5的出现； 许多内容管理系统不断优化。 所有这些领域突然融合在一起，我们明显地看到网络的外观也在随之改变。实际上，我们每天使用网络时都会亲身体验到这种转变。Web设计领域正在经历巨变，这种巨变也催生了许多新的设计模式。我发现，这些技术之间的关系非常有趣。每一种技术都在推动Web设计领域的发展，但正是所有这些技术的融合才成为变革的催化剂——可以将其称为一次“完美风暴”。 响应式设计就是这方面的一个典型示例。响应式设计的目标是确保网站在任何情况下都能够很好地与用户的设备相适应。基本上，无论是在个人计算机、智能手机还是平板电脑上查看网站，用户都能够获得为该设备量身定制的体验。这一目标主要通过为每种布局开发专用样式表来实现。事实证明，我们可以通过CSS3在代码中应用许多视觉样式，而在以前，这些效果需要通过图像来实现。当对同一组元素应用各种样式（如阴影、圆角或渐变）时，这种做法可为我们提供诸多便利。将这种做法与在一个元素上支持多个背景等技术改进相结合，可使HTML变得简单且易于管理，从而显著降低复杂程度，并为我们通过CSS创建一个页面的多个版本提供了很大的帮助。此外，还可以通过CSS在页面中添加自定义类型。现在，我们可以方便地在页面中嵌入文本，而无需使用基于图像的文本或插件等在Flash中呈现自定义类型（sIFR①）的功能。我知道，这个过程包含多个步骤，但我想说明的是，所有这些步骤已经全部融合在一起，成为一个整体。每个步骤都推动了整个过程的发展，因此，在短期内，我们就体验到了极其显著的变化。确实，网络一直处在不断变化的过程之中，而在过去几年，它更是经历了高速的发展。 下面我们将深入研究和分析一系列技术，正是这些技术塑造了现在的网络。当然，在这个过程中，我们将分析大量精美的设计，它们演绎了上述技术的多种用法。虽然本书并不是一本技术手册，但我还是简要介绍了每个主题，以便不熟悉这些主题的读者了解相关信息。我撰写本书的最终目的，是通过分析这些精美的设计来提供启示，激发灵感。 ------------------------------------- ① http://www.mikeindustries.com/blog/sifr ------------------------------------- 1.1 内容管理系统 内容管理系统（简称CMS）是网络的一个重要组成部分，这种技术极大地影响了在线内容发布的成本和操作步骤。虽然这些系统已经存在了很长一段时间，但直到近些年，它们才真正受到人们的关注。 CMS使得大众用户可以管理网站上的内容，并在该网站上发布内容。每个CMS的核心都有一个用于创建页面模板的系统，系统的用户通过一个简洁的界面输入数据， 填充内容。然后，网站在网络上向用户显示时，模板和内容将进行合并，生成网站的实际输出。这意味着，内容管理将与网站结构分离， 因此建立网站后，任何人都可以在其中发布内容（例如就像博客系统WordPress所做的那样）。 CMS是一种有助于节省时间和资金的强大工具。这些系统大都提供了大量功能，比你自行构建的功能要多得多。总之，因为它们功能强大，所以现今绝大多数的网站都是基于某个CMS构建的。几年前， 客户必须支付额外的费用才能升级到CMS，而如今它却已成为一种标准功能。 CMS分为两类：托管系统和自安装系统。自安装CMS是一种可以作为软件包下载并安装到Web托管账户中的内容管理系统，托管CMS 是一种只需注册即可立即开始使用的CMS。使用托管CMS，无须安装任何软件，只要激活账户即可。 使用自托管CMS，用户可以拥有最终控制权，并且能够灵活地做出更改。你一般可以安装任意数量的扩展，或对系统进行修改，甚至可以更改系统代码。与之相反，托管系统则通常处于锁定状态，并且具有非常明确的权限限制。主机拥有全部控制权，同时也负责维护、更新和升级。两种系统都各有所长。本节中提供了这两类内容管理系统的示例。 本章后面部分列出了少量可供公众使用的CMS。我尽量介绍那些知名的CMS，但也会提及一些不太知名的系统。此外，我还介绍了一些比较小众的CMS。可以看出，CMS平台正变得越来越具针对性。 1.1.1 WordPress 最受欢迎的内容管理系统可能当属博客系统WordPress了。这个CMS分为托管版本（WordPress. com）和自托管版本（wordpress. org）。在写作本书时，WordPress 网站声称已有超过7100万个网站在使用该系统，其中半数网站使用的是托管平台。很明显，WordPress 是一个用户基数庞大并且不容忽视的CMS。 虽然WordPress最初只是一个博客平台，但现今它已发展成为一个多功能的CMS，能够解决几乎任何类型的网站的建站要求。实际上，用户已经将WordPress改造成了一种近乎万能的系统，具有任何可以想象得到的功能。它已变成电子商务平台、故障通知单系统、目录引擎、社交网络，等等。如果需要让WordPress网站做某件事情， 总是可以找到相关的详细教程或插件来指导用户完成任务。 本书所提到的这些网站将清楚表明，使用WordPress能够完成任何形式的任务（书中介绍的每一个CMS都能够做到这一点）。如果你还以为CMS只是一个博客引擎，那么下面的示例会证明，你错了。 Eephus League网站（图1）就 是一个典型的例子，它充分展示了WordPress的灵活性。这个精美的网站并没有因为CMS的局限而受到约束或限制，相反，它的布局新颖明确，针对内容量身定做。与Eephus League形成鲜明对比的是Growcase 网站（ 图2 ） 。这两个网站之间没有任何相似之处。这充分说明，WordPress是一个非常灵活的系统，能够生成风格各异的网站。 有关WordPress的详细信息， 请访问http://wordpress.org/和http://wordpress.com/。 1.1.2 Expression Engine 虽然许多自托管CMS是完全免费的（例如WordPress），但Expression Engine却是一款需要付费才能使用的授权软件应用程序。在我为撰写本书而征集的所有CMS 中，Expression Engine在被提名的 系统中排名第二（排名第一的是WordPress）。坦白说，我对这一结果感到惊奇，但这也说明该平台受到众多设计专业人士的忠实拥护。 我想， 可能许多人会觉得无法想象，既然有那么多优秀的免费CMS可供使用，为什么还要使用付费产品呢？但是，就像任何其他产品一样，使用付费版本，用户将能够享受某些特权。例如，有保证的支持、持续的更新以及能够生成收入的生态系统。不过，本书并不想向读者灌输特定CMS的优点，进而进行推销。相反，我的主要目的是提供信息，激发灵感并为大家的设计提供启示。 如本节收集的一系列示例所示，我们能够以各种方式利用这个CMS。如果大家研究这一节中的示例，却发现它们之间在设计外观上并没有明显关联，请不要对此感到意外。CMS不应为设计师制造障碍，Expression Engine当然也不会。如果大家由于某个设计项目而开始使用该平台，我希望这里提供的网站能够为你们提供启示。 有关Expression Engine的详细信息，请访问http://expressionen¬gine.com/。 1.1.3 Drupal 虽然Drupal是一个用于设计网站的强大平台，但它并不像Word¬Press那样受到人们的普遍欢迎。不过，这种劣势并未影响到Drupal 的价值。要了解Drupal的价值，首先必须了解它的市场定位。Drupal 是一个面向开发者的平台，它易于扩展、非常安全、极其稳定，而且足够强大，能够支持规模非常庞大的网站。因此，在构建Drupal网站时，多数情况下我们不需要依托具体的界面。这种做法与WordPress 不同——该平台会提供一个管理区域，供用户在其中执行各种操作来生成网站的基本内容。不可置否的是，和任何优秀的CMS一样，终端用户也可以通过一个易于使用的管理区域来管理网站内容。 不言而喻，Drupal是一个特立独行的系统，但从这一节提供的设计示例可以看出，它虽以开发者为中心，但并不排斥精美设计。实际上，示例充分说明，使用Drupal完全可以设计出一流的网站。 Meri Hanko（图1）就是一个典 型的示例。这个网站的布局并不遵循任何预定的规范或标准。很明显，其界面是从头开始设计的。虽然我们无法得知Drupal是否迫使Meri Hanko放弃了某些网站内容， 但我们也没有理由认为这个底层系统存在某种缺陷，导致开发者无法根据客户需求来定制网站内容。 有关Drupal的详细信息，请访问http://drupal.org。 1.1.4 Magento Magento是一种稍显另类的CMS——它是一个电子商务平台。可能你不会将电子商务系统看作CMS，但事实确实如此。设计网上商店时，网店运行所需的内容可能是最难实现的设计因素。而且，在网站上填充这些内容也是一个繁重的任务。因此，采用一体化的CMS是成功设计此类网站的关键。 Magento是一个有趣的电子商务系统，它是为数不多的开源①平台之一。也就是说，你可以下载并在自己的托管计划中使用该系统，而且还可以查看运行该系统的所有代码。它是一个具有极强扩展性的平台。有众多开发者正以各种方式扩展着该平台。 你可以免费下载Magento，并在自己的服务器上运行这个软件， 你也可以付费给Magento，让它来管理网站。这种运营模式与WordPress 完全相同，实际上，Magento就像是电子商务领域的WordPress。如果你对这种模式感兴趣，请访问Magento Go（http://go.magento.com/）。 如果到目前为止，你一直在阅读本书的内容（而不只是欣赏那些精美的图片），你必然已经了解到，判断一个CMS是否优秀，灵活性是一个重要的指标。因此，可以预计，在使用Magento时，将有大量设计选项可供选择。当然，事实也确实如此。在这一节中，我列出了一些使用该平台构建的电子商务网站，并尽量兼顾各种不同的风格。这些示例提供了各种各样的解决方案，而功能有限的CMS几乎不可能提供这种灵活性。 有关Magento的详细信息，请访问http://www.magentocommerce. com/。 ---------------------------------- ① http://en.wikipedia.org/wiki/Open_source ---------------------------------- 1.1.5 Squarespace 在了解了前面那些功能强大的CMS之后，你可能会感到好奇，为什么我们还需要其他CMS呢？实际上，没有任何一个或者一组CMS能够满足用户的所有需求。这就是为什么Squarespace（你很可能才刚刚听说它）之类的系统不仅能够独立发展，而且取得了巨大成功的原因所在。 Squarespace可用于设计许多不同类型的网站，并且具有极强的灵活性。此外，它的几个核心模块，使得它尤其受到创意设计师的青睐。这不仅包括标准博客模块，而且包括一些功能全面的图像库工具，以及一个用于页面布局的精简拖放界面。使用这个界面，你可以按任意方式设计网站，而无需编写代码。最终，你不仅能够更轻松地生成自定义的内容布局，而且这种操作将成为内容构建工作的一部分。坦率地讲，针对大多数系统忽视的方面，这个系统有着不凡的 表现。 另一个令Squarespace脱颖而出的原因，在于它处理外部工具的方式与众不同。例如，通过Square¬space在博客上发布内容时，你可以同时在Facebook和Twitter上发布内容摘要。这听起来可能并没有多大的创新性，但是通过使用该功能， 你不仅可以发布内容，而且可以简化与之相关的社交推广。 有关Squarespace的详细信息， 请访问http://www.squarespace.com。 1.1.6 Shopify Shopify这个CMS只有一个用途，就是电子商务。使用Shopify， 你可以快速建立并运营引人注目的网上商店。对许多人来说，运营网店是他们上网的唯一目的。类似Shopify这种能够快速启动的托管工具使得开展电子商务及网上销售变得非常简单。当然，这个领域的竞争非常激烈，但Shopify无疑是用户的首选系统之一。 对于Shopi f y 与Magento来说，尽管它们都是针对电子商务领域，但这二者间完全没有相似之处。Shopify能提供许多内置功能， 并且完全以托管方式运行。这意味着不必担心运营网上商店的技术问题，而且最关键的是，你很快就能建立起网店并开始售货 设计、运营电子商务网站并不是一个轻松的任务。你必须考虑各种页面、元素、表单和小工具。有鉴于此，使用现成模板建立网站是一个不错的选择。幸运的是，Shopify提供了众多美观的电子商务模板，仅凭这些模板就可以为用户节省大量时间和资金。 有关Shopify的详细信息，请访问http://www.shopify.com。 1.1.7 LightCMS 有一类托管CMS正受到越来越多用户的欢迎，我将它们称做“全包容型”系统。许多系统都属于这种类型，甚至Adobe也开发了一个这样的系统（Business Catalyst）。这些全包容性系统不仅可用于发布内容，而且结合了许多不同的功能， 并最终实现所有的基本应用，例如电子商务、博客、照片库、表单、日历等。在本书中，我之所以选择介绍LightCMS，主要出于一些简单的原因。其中最重要的原因，也就是大家阅读本书的主要动机——获取灵感。在考察各种系统的过程中，有一个发现可能会引起你的兴趣，即其中一些系统似乎具有不同程度的设计品质。可能这只是因为它们吸引的用户不同所致，或是更多地与系统本身品质有关。当然， 这个问题的答案不属于本书的讨论范围，因此，我们还是回到审美问题上来。 快速浏览本节中提供的示例即可发现，采用功能强大的模板并不是使用本系统设计的网站优于其他网站的原因所在。无疑，你会注意到，这些示例之间截然不同——很明显，并不是每个平台用户使用的都是同一个模板。但是，这可能只是一种错觉，因为LightCMS具有的最佳功能之一，即在于它（免费）提供了一系列功能非常强大的模板。最终，如果不注册LightCMS并研究其提供的各种模板，我们几乎不可能将这些示例与某个模板关联起来。 请将这里提供的网站做为灵感来源，并以它们为例了解这个强大的CMS的全部功能。 有关LightCMS的详细信息，请访问http://www.lightcms.com/。 1.1.8 Bellstrike 我最后要介绍的是一个名不见经传的C M S 。在介绍了WordPress、Drupal和Magento等应用广泛且功能强大的系统之后， 你可能会感到困惑，为什么我还要介绍Bellstrike这样的小众系统？ 我之所以介绍Bellstrike，一方面是为了向设计师和开发者提供各种可用的选项，另一方面则因为Bellstrike是一个极其特殊的小众系统。利用Bellstrike，人们可以很方便地建立并运行非营利网站， 连最重要的接受捐赠功能都将变得非常简单。接受捐赠大多由小众CMS提供。通常，这类系统会提供某种常用的基本功能（以某种形式发布内容），以及其他一些专门针对小众市场的功能。就这方面而言，你甚至可以将Shopify之类的工具也看作小众产品。如想看看这类工具的更多示例，请访问Wedu¬ary.com、Ebandlive.com和Ekkle¬sia360.com。 这类系统的灵活性各不相同。一些系统允许用户完全定制，而另一些系统只允许用户对固定模板进行一定程度的定制。Bellstrike属于后者。截至本书写作时，Bellstrike 仅提供4 个可进行小幅修改的模板。因此，使用该系统（以及其他类似系统）建立的网站看起来非常相似。快速浏览一下本节中的示例，你立即就可以确定哪些网站是用同一个模板创建的。 可以设想， 某些设计师可能会对这种限制和缺陷感到不快、恼怒，甚至会因此拒绝使用这类系统。但是，请考虑一下这些系统的优势：由于可用模板的数量有限， 想要特殊定制网站的难度大大增加，从而显著缩短了建站的时间， 更便于CMS供应商向其客户群体推出其他功能。 有关Bellstrike的信息，请访问http://bellstrike.com。