Foundation带你进入响应式原型的世界

译者 Aitch

【A List Apart杂志第348期】

2012年4月10日

乔纳森·斯迈里（Jonathan Smiley）

 

按史蒂夫·乔布斯（Steve Jobs）的说法，现在市面上可以访问 完整的互联网的有几百种设备。这些设备有着各自不同的功能和局限，包括不同的输入方法、屏幕尺寸、分辨率和外形。据 预测这些设备一年之内将在网络流量上取代传统计算机，而我们则需要一些工具来帮助我们进行响应式的开发。

加速前端设计的工具有很多，包括 Blueprint和 960.gs，但直到最近仍然只有极少数针对响应式设计——也就是指在设计和应用上都考虑到所有不同的设备及其功能的。在这些少数的工具之中，有安迪·克拉克（Andy Clarke）和基斯·克拉克（Keith Clarke）的 320 and Up，有响应式网格系统 Columnal，和新近加入响应式集团的 Twitter Bootstrap。

今天，我们要研究一下如何运用 Foundation开展响应式设计——Foundation这个轻便的互联网前端框架可以帮助你建立设计原型和上线网站。如果你一直回避响应式设计是因为技术的难度、工具的缺乏，或者你只是不清楚它到底有多重要，那么现在是开始学习的最佳时机。

“轻型”框架

Foundation是一个帮助你快速构建的网络前端设计的框架。我们在ZURB公司创造这个框架，最初是作为一个样板，作为我们自己开发客户项目和内部项目的起步工具。它所包括的除了一个具有强大的布局设计功能的响应式、可嵌套的12栏网格，还有一些其他公共元素和构件，导航系统、标签、按钮、字体、表单等等都有简单的预定义样式，所以一上手就能直接进入代码，不用操心定制CSS的问题。

你过去几乎肯定用过或接触过框架，但Foundation有一点儿不同——它设计的本意就是要被重写的。使用前端框架是我们往往冒着“同一化”的风险，怕就怕使用同一框架的网站最终长得都一模一样。

我们在范例中使用Foundation基本样式，但有一点很明确：就是这些样式不适用于最终的网站设计。我们有意如此，表明Foundation框架将一路送你走完90%的路程，而将最后的10%交给你的创造力和设计感觉。

你也许会觉得Foundation并不如你预料中那么理想化——它的语义并不完整，也并非以移动设备为首要目标。但Foundation建立的目的只是帮助人们无需额外的工具即能快速上手。

如果你更偏爱语义严谨的网格系统，可以试试名如其实的 Semantic Grid System，它生成的网格运用LESS样式表语言使数据与表现完全分离。同样，如需使用移动优先的方法，可以试用320 and Up。[1]

建立原型：好玩的盈利的都行

Foundation真正的闪光点是在快速原型设计上。原型模式是个强有力但推行不广的设计方法。如今各式终端当道，人们与设计的交互方式也越来越多，原型设计就变得格外重要。

为了说明问题，我们假设需要创建一个图书交换的服务平台——随着Kindle和其他电子阅读器的兴起，我们并不是真想推荐这种商业模式，只不过觉得这会是个有趣的范例。首先我们会勾画一个设计草图，然后很快地建一个前端原型，来看看它在不同的终端上的体验效果。

勾勒草图：BookImpart，我们的图书交换服务网站

我们只需要以下几个屏幕页面，目的是感觉一下我们的服务是如何运行的，同时对不同设备上的体验进行评估。

• 网站主页：用户在此挑选想读的书
• 书本页面：显示书本的主人、所在地，已经他们想在交换中获得的书
• 模式对话框（modal dialog）：使用户得以在自己拥有的书中选择一本与当前书目作为交换
• 主页状态：确认交换成功

很自然，你会看到这个原型缺少很多东西（比如登录、注册、添加书本、不接受交换的特殊情况等等，）但这里我们就研究这一个流程。第一步，就像我们开始任何界面设计时一样，我们先画草图。

BookImpart的主页首先包括网站名和简单的登录功能（先不激活）。书本类别放置在左侧，用以鼓励大屏幕用户由此进行搜索，同时我们还特别推荐三本我们认为用户会感兴趣的书。另外我们使用标签索引的形式显示交换最活跃的书目、热门书目和流行趋势。

图1：我们假象的服务平台主页——左手的导航加主要内容部分

在书本屏的页面上（我们在原型中把所有的书本都链接到这一页）我们保持了导航，显示书本的封面大图、书名和信息。我们同时也显示了一列属于登录用户本人的书目，可以同以上显示的图书进行交换，这样用户就对自己所有的选择一目了然。我们也可以与纽约时报合作把他们的书评截取过来。

图2：我们的服务平台的单本图书详情页面，展示图书本身的信息和可供交换的选择。

一旦用户选择了交换指令，我们使用Reveal插件（Foundation所带的模式对话框插件）呈现一个模式框，向用户提供他们进行交换的书本选项。用户作出选择后我们便带他们来到确认页面。

图3：使用Reveal功能可以很容易地创建这样的模式框

这里的确认屏中我们向用户显示他们将要贡献出的书和将要得到的书。我们可能还需要说明进行交换的方式（通过邮寄还是亲手交换，等等）并且为用户提供返回主页的通道。

图4：最后一个页面，确认屏——原型建立完毕

在一般的项目中，我们可能需要进行好几轮这样的草图设计，来向客户或同事征求意见，而这里我们就省略这个步骤了。接下去，你可以到 foundation.zurb.com下载Foundation的代码包，以便对照着代码继续阅读。你可以选取我们提供的index.html文件，然后将其复制为其他页面。

代码框架

快速构建的原型一般来说就是代码框架。这种工作方法存在了较长时间，但是最近才开始适用于响应式框架的创建。

我先前提到的网格解决了原型设计的极大一部分的问题。这是一个完全流动性的横向12栏网格——所有的尺寸都以百分数定义，并采用特定的媒体查询（media queries）来为小型终端设备作调节。一个简单的布局可以是这样的：

<div class="container">
  <div class="row">
    <div class="eight columns">Main Content</div>
    <div class="four columns">Sidebar</div>
  </div>
</div>

这里的布局容器包含一定的左右内边距，网格的每一列有一个既定的最大宽度以保证不影响可读性，而这里的双栏设计形成的是一个左三分之二，右三分之一的布局。要建立更复杂的布局，可以像这样在栏中再嵌入更多的栏：

<div class="container">
  <div class="row">
    <div class="eight columns">
      <div class="row">
        <div class="two columns">Avatar</div>
        <div class="ten columns">Article Title</div>
      </div>
    </div>
      <div class="four columns">Sidebar</div>
  </div>
</div>

熟悉网格系统的朋友会注意到我们没有使用像 semantic.gs那样把数据与表现完全分离的系统，这是因为：分离数据与表现需要像SASS或LESS之类的预处理器，而我们并不很喜欢这种方法所生成的CSS的形式。语义化处理是个很好的想法，但从务实的角度，传统的网格句法仍是目前最好的选择。[1]

在这个原型中我们使用的还有Foundation的按钮和标签索引，以及一些由绝妙的 placehold.it服务提供的预留位图片。在主页草图的基础上，我们添加了代码说明：

图5：在草图中我们注明了如何使用Foundation网格来分割我们的布局

不用多说，这里就是 原型代码。

事实上主页是我们的原型中最复杂的页面，但也很容易就建好了。网格解决了大部分布局问题。我们已经见过实例，但这里还有一个例子——注意到下部标有“Top Swaps（交换最多的书目）”的标签索引了吗？

图6：使用在标签索引内嵌入网格列的方法很容易达到 这样的布局

这里的条目可以用定制样式来布局，然而在Foundation里只要使用嵌套的网格就能达到。尽管标签索引部分处于那个八栏宽的网格栏内，我们仍可以在它的布局容器中加入更多的网格行，每一行都可以再包含十二栏宽距。这样我们的整个列表就分成自左而右的两栏宽、七栏宽和三栏宽的三个网格列。

标签索引本身比较简单。不需要JavaScript（或CSS）就能把各个标签分别与不同的显示内容联结起来。代码句式如下：

<dl class="nice contained tabs">
  <dd><a href="#top" class="active">Top Swaps</a></dd>
  <dd><a href="#popular">Popular</a></dd>
  <dd><a href="#trending">Trending</a></dd>
</dl>

<ul class="nice tabs-content contained">
  <li class="active" id="topTab">
    Books go here...
  </li>
  <li class="active" id="popularTab">*changed indent here*
    Books go here...
  </li>
  <li class="active" id="trendingTab">*and here*
    Books go here...
  </li>
</ul>

用以上代码中的方式将锚链接（anchors）指向特定的ID标识，Foundation自带的JavaScript会自动切换标签并附加正确的类别（classes）。我们也可以在链接到该页时选取一个特定的标签，就好像index.html#trending，index.html#popular等等。

最后来看一下按钮。在这个原型里我们把链接色（蓝色）保留给所有链接至原型内部的可点击元素，而对所有其他元素淡化处理。同一原型中不同的按钮色彩只需在锚链接上附加“button”类别以后，再用以下几种类别加以修饰：

• “nice”为按钮增加深度和高光，纯粹为提高可点击性。
• “radius”为按钮增加适量的圆角。
• “round”把按钮的两端完全变为圆弧。

在我们实施的版本中：

• “white”使按钮呈现白色，而不是默认的电光蓝。我们把这些白色按钮用在页头和侧边栏。
• “large”仅限于在图书详情页面使用，而“small”则用在注册按钮上。

这个模式很人性化，很可读，也很容易编写。在项目最终的洋式设计中也很容易更改。我们来看看 图书详情页面——你也可以点击主页上的任一本书的小图前往该页。

在图书页面我们我们保留了主页的一些部分，包括页头和侧边栏。这一页的布局事实上完全是使用网格、预留位图片、按钮和文字组成的。你可能注意到（由placehold.it提供的）图片上标注了像素尺寸，但我们现在并不操心具体尺寸问题，原因是：Foundation的缺省设置不允许图片大于其网格容器，所以图片都会顺应我们预想的布局而显示。

如果你点击行动号召的大按钮“Swap for This（交换这本）”你会看到这一页上唯一的新元素类型，一个Reveal模式对话框。这个元素添加在全页的.container容器结束之后：

<div id="swapModal" class="reveal-modal">
  <h5>Swap for Neverwhere:</h5>
  <h3>Jason M. is willing to swap Neverwhere for one of these:</h3>
  <ul class="block-grid four-up">
    <li><a href="confirm.html">
      <img src="http://placehold.it/120x160" alt="Book Title" /></a></li>
    <li><a href="confirm.html">
      <img src="http://placehold.it/120x160" alt="Book Title" /></a></li>
    <li><a href="confirm.html">
      <img src="http://placehold.it/120x160" alt="Book Title" /></a></li>
    <li><a href="confirm.html">
      <img src="http://placehold.it/120x160" alt="Book Title" /></a></li>
    <li><a href="confirm.html">
      <img src="http://placehold.it/120x160" alt="Book Title" /></a></li>
    <li><a href="confirm.html">
      <img src="http://placehold.it/120x160" alt="Book Title" /></a></li>
  </ul>
  <a href="book.html">Never Mind</a>
  <a class="close-reveal-modal">×</a>
</div>

模式框的内容没有什么特别的——简简单单依网格布局。特别的是我们传唤模式框的方法——利用的是模式框的ID标识（#swapModal）。我们可以在页面内任何锚链接上附加一个Data数据属性，用以传唤模式框的ID。在这个例子里，行动号召按钮Swap for This就是我们的锚链接。代码如下：

<a href="" class="nice large blue radius button" data-reveal-id= »
"swapModal">Swap for This</a>

Foundation自带的模式框插件Reveal能跟踪data-reveal-id属性，然后将正确的行动添加到锚链接上。我们的目的地很明显，是 确认屏。在交换模式框中点击任一本书的小图即可到达我们原型的最终页面。

这个页面非常简单，它只是解释了我们目前所做的一切，以及我们假想的图书交换服务接下来会如何工作。由于内容很少，在大屏幕上我们用网格的缩进类别（offset classes）把内容集中在页面中部。代码如下：

<div class="row">
  <div class="seven columns offset-by-two">
    <h3>All set!</h3>
    <p>We've started the swap between you and Jason...</p>
  </div>
</div>

网格中的任何栏都可以缩进2至10个栏单位，这使制造留白或缩进布局很简便。

以上是我们的原型内使用的所有元素，当然Foundation所提供的选择不止这些。目前为止这个原型的设计都是针对大尺寸显示设备的（笔记本电脑，桌面电脑等），而我们似乎还缺少些什么……

关于其他显示设备……

本文讨论的不是移动优先的设计方法——否则我们会从智能手机的草图着手，或者同时进行多个尺寸的草图设计。而我们最熟悉，也是最简单的响应式思考方法则是从设备的尺寸由大到小进行。我们已经有了大屏幕的视图，那就先来看看Foundation给我们提供的解决方案吧。

图7：原型主页在固定电脑屏幕和小型移动设备上的呈现

从截图上你肯可以看出， Foundation默认的做法是把页面“线性化”——也就是将我们的网格进行竖向叠加，把所有的栏都设为全屏宽度。大多数情况下，这解决了我们很多的问题。人们在受制于屏幕宽度时，非常习惯于竖向的滚动屏。然而有些情况下这种做法并不理想，或者说至少有所不足。

图8：在默认设置下，我们的导航系统占据了页面上部太多的空间

从智能手机访问我们的原型，我们在看见任何一本书之前要翻过非常多的导航链接。人们在小型设备中确实会愿意进行一些摸索，但他们最渴望得到的是内容。通过Foundation提供的源码排序和移动可见性类别，我们可以一开始就向用户呈现他们想要的内容。

我们想要使书本在主页上先出现，然后再显示导航系统。由于页面现在的布局，我们在代码中先写了导航部分，这样切换到小型设备布局后，导航仍会首先出现。所以我们需要把导航写在内容之后，而在大型设备中将其显示到页面左边。为达到这个效果，我们把写在最后的导航用“拉（pull）”的办法显示到左侧，而把内容“推（push）”到右侧，见下：

<div class="row">
  <!-- pushes this three columns to the right -->
    <div class="nine columns push-three"> 
      Main Content...
    </div>
  <!-- pulls this nine columns to the left -->
    <div class=”three columns pull-nine”> 
      Sidebar...
    </div>
</div>

现在我们如愿以偿地定位了主导航，但仍可能有用户会想要一踏上网站就直接进入某一个书本分类。为帮助这些用户，我们在页面开头加了一个细长得多的导航装置（在此我们使用简单的选项列表来满足要求），见下：

图9：通过标识语言中简单的类别变化，我们使布局更加适合小型设备

添加了.show-on-phones类别我们将仅在小型设备中显示该元素，小型设备基本上就是指比通常的平板电脑小的设备（相似的还有仅在台式机上隐藏的.hide-on-desktops类别，和仅在平板上显示的.show-on-tablets类别等等）。制定这些关于设备的类别明显有点武断——到底什么尺寸算是平板电脑？是不是所有的手机都一样大小？不过从实效性的角度，这种方法比较容易操作。

我们要讨论的最后一个问题是Foundation的小型设备四栏网格。以这个主页为例，有些时候，我们并不想简单地竖向堆叠所有条目，尤其不想堆叠一列（可能很小的）图书封面图片。我们可以像这样在现存的网格栏上附加四栏的手机网格：

<div class="row">
  <!-- this column will be 2 of the 4 small device columns wide -->
    <div class="four columns phone-two">
      <a href="book.html"><img src="http://placehold.it/300x400" /></a>
      <p><a href="book.html"><strong>Neverwhere</a>
      <br />Neil Gaiman</p>
    </div>
  <!-- this column will be 2 of the 4 small device columns wide -->
    <div class="four columns phone-two">
      <a href="book.html"><img src="http://placehold.it/300x400" /></a>
      <p><a href="book.html"><strong>Good Omens</strong></a>
      <br />Neil Gaiman and Terry Pratchett</p>
    </div>
</div>

在整个页面的代码中可以看出我们多次使用这个方法。经过修改我们的布局更加简练，也更能代表我们所针对的显示设备，改善了很多。

在此我们只详细叙述了原型的一部分——理想状态下，我们会检查每一屏页面，并为不同的设备类别作出调整（这点我们在可下载的代码中做到了）。实行代码原型设计（或广义的原型设计）有一个相当有利的优势，就是能够作出这些快速的改动。我们这个图书交换服务原型每作一轮修改都有相当的进步，而这种进步不止是在静态屏幕上的：我们可以看见它如何真实地，在不同的显示设备中运行，而这一切都远在项目定稿上线之前就能实现。

响应式的工作方式不应当仅仅从布局的角度思考——创建面向未来的响应式网站或应用还包含着布局以外的很多东西。我们需要对媒体素材（载入的图片或视频）进行优化——可以通过后端提供不同大小版本的文件，也可以使用类似斯考特·杰尔（Scott Jehl）创建的 响应式图片的方法。 马特·马基（Mat Marquis）的响应式图片一文很值得一读。

我们需要记住在触摸设备上是没有鼠标悬浮状态的。还应当特别注意用户在使用不同设备时的不同动机。这些你以前都听到过道理正在变得越来越关键。

原型设计要早，要勤，要全面

如果你尽早，尽快，并在尽可能多的设备上进行原型设计，你的产品和网站会更加出色。Foundation就是为了这个目的而建的，而最近涌现出的一批类似的工具令我们格外欢欣鼓舞。在未来的五年中，设备将成为我们的游戏主题，而我们所讨论的将不仅仅是屏幕尺寸或浏览器。界面会改变，输入会改变，我们使用互联网的方式也会改变。为了这些，我们需要做好准备，从现在开始。

A List Apart杂志及文章作者授权翻译。

关于作者

乔纳森·斯迈里（Jonathan Smiley）是美国加利福尼亚州坎贝尔市产品设计事务所ZURB的合伙人兼首席设计师。他是Foundation的首席前端开发人，并经常在 ZURG博客上撰写关于响应式设计与实践的文章。你可能会赶上他在旧金山的 演讲，或是在推特上以 @smiley名号畅谈互联网设计（或电子游戏）。

[1] 译者按：截至译文发稿，Foundation已更新至3.0版本，增加了SASS功能。显然Foundation在实践中摸索出了语义化和实效性的良好平衡。