最近兩篇譯文都有涉及框架和跨平臺(tái)方面的話題：前一篇中，我們了解了一些用于移動(dòng)應(yīng)用開(kāi)發(fā)的前端框架工具;今天這篇的立足點(diǎn)偏向設(shè)計(jì)開(kāi)發(fā)流程的上游，它將向我們展示怎樣使用Foundation框架快速創(chuàng)建跨平臺(tái)的、可以在多種設(shè)備上進(jìn)行測(cè)試的響應(yīng)式頁(yè)面原型。下面開(kāi)始正文部分。

開(kāi)門(mén)見(jiàn)山的說(shuō)，作為網(wǎng)頁(yè)設(shè)計(jì)和開(kāi)發(fā)人員，我們面臨著以下幾個(gè)嚴(yán)峻的問(wèn)題：

◆ 每天，人們用來(lái)上網(wǎng)的設(shè)備種類(lèi)和數(shù)量都在不斷上升。

◆ 為每種設(shè)備設(shè)計(jì)開(kāi)發(fā)不同的界面是不可能的。

◆ 即使你專(zhuān)門(mén)為某些設(shè)備定制打造，這些設(shè)備也很有可能在不久的將來(lái)退出主流舞臺(tái)。

真心歡樂(lè)。別怕，大家一起面對(duì)并解決問(wèn)題。其實(shí)，不同類(lèi)型的設(shè)備及屏幕的這個(gè)問(wèn)題，很早以前就開(kāi)始存在了，只是多年來(lái)我們一直忽視這個(gè)狀況，一廂情愿的守著960像素的網(wǎng)格系統(tǒng)。

如今，我們需要從設(shè)計(jì)流程的上游改變長(zhǎng)久以來(lái)的習(xí)慣，比如嘗試快速創(chuàng)建可以在不同設(shè)備上進(jìn)行測(cè)試的原型，而不只是針對(duì)臺(tái)式機(jī)瀏覽器或筆記本。這就是我們(英文原文作者的團(tuán)隊(duì))開(kāi)發(fā)Foundation框架的原因。

Foundation是一款開(kāi)源的前端框架，我們可以使用它快速創(chuàng)建頁(yè)面原型。相比于其他同類(lèi)型工具，F(xiàn)oundation（http://foundation.zurb.com/）的移動(dòng)化方案更加出色;借鑒響應(yīng)式Web設(shè)計(jì)的思路和方法，F(xiàn)oundation對(duì)內(nèi)容結(jié)構(gòu)在不同類(lèi)型設(shè)備中的的呈現(xiàn)方式進(jìn)行了相應(yīng)的預(yù)設(shè)。(關(guān)于響應(yīng)式Web設(shè)計(jì)，可以參考我們之前的幾篇文章，包括響應(yīng)式設(shè)計(jì)的概念、組成要素及基本實(shí)現(xiàn)思路，怎樣通過(guò)CSS3 Media Query實(shí)現(xiàn)響應(yīng)式Web設(shè)計(jì)，以及相關(guān)的產(chǎn)品需求和設(shè)計(jì)流程案例學(xué)習(xí))

接下來(lái)，我們將通過(guò)一個(gè)完整的實(shí)例，來(lái)演示怎樣使用Foundation快速創(chuàng)建跨平臺(tái)的頁(yè)面原型。走著!

資源概覽

首先到foundation.zurb.com（http://foundation.zurb.com/）下載代碼包;果斷點(diǎn)擊大藍(lán)按鈕即可。代碼包中包含以下文件及結(jié)構(gòu)：

◆ index.html - 我們將從這里開(kāi)始創(chuàng)建***個(gè)頁(yè)面。

◆ javascripts和stylesheets路徑 - 主要的靜態(tài)資源文件，包括jQuery及所需的樣式表。

◆ humans.txt和robots.txt - 里面的代碼算是不錯(cuò)的樣板，有空的時(shí)候可以溜幾眼。

JS方面的東西基本不在本文討論范圍，我們繼續(xù)來(lái)看看stylesheets路徑中的文件：

◆ global.css - 全局基礎(chǔ)樣式表，包括相對(duì)常規(guī)的12列固定寬度的網(wǎng)格系統(tǒng)、快速創(chuàng)建復(fù)雜布局的可嵌套工具等。另外還有其他全局字體、布局等方面的樣式定義。

◆ ui.css - 用來(lái)對(duì)那些組成原型的常規(guī)UI元素進(jìn)行樣式定義。

◆ mobile.css - 負(fù)責(zé)移動(dòng)設(shè)備方面的樣式，涉及響應(yīng)式的樣式定義都在這里。

分別在瀏覽器和代碼編輯器中打開(kāi)index.html文件。在瀏覽器中，我們可以看到該頁(yè)面包含了一些用于構(gòu)筑原型的基礎(chǔ)布局結(jié)構(gòu)及UI元素。

接下來(lái)，我們將從網(wǎng)格系統(tǒng)、快速創(chuàng)建原型、移動(dòng)化這三個(gè)方面依次進(jìn)行實(shí)例講解。

網(wǎng)格系統(tǒng)

首先來(lái)簡(jiǎn)單看看global.css中的網(wǎng)格系統(tǒng)。如果你熟悉960網(wǎng)格系統(tǒng)或是Blueprint CSS框架，那么對(duì)Foundation的網(wǎng)格結(jié)構(gòu)也應(yīng)該不會(huì)陌生。下面是一段典型的結(jié)構(gòu)代碼：

<div class="container">  
  <div class="row">  
    <div class="eight columns" id="mainContent"> ... </div>  
    <div class="four columns" id="sidebarContent"> ... </div>  
  </div>  
</div> 

該結(jié)構(gòu)由三部分組成：外層容器container、行容器row和列容器columns。外層容器的作用只是為頁(yè)面添加左右內(nèi)邊距(padding)。

行容器擁有一個(gè)固定的***寬度值，防止頁(yè)面在大顯示器中過(guò)寬;當(dāng)然，如果你想打造純粹的液態(tài)布局，也可以在樣式表中去掉這個(gè)屬性。

列容器是最內(nèi)層的內(nèi)容容器，在我們的網(wǎng)格系統(tǒng)中，每行最多可以放置12個(gè)列容器。上面的代碼中，我們創(chuàng)建的是典型的“內(nèi)容+側(cè)邊欄”布局，寬度分別為全寬的2/3和1/3。

網(wǎng)格布局可以進(jìn)行嵌套：

<div class="container"> 
  <div class="row"> 
    <div class="eight columns"> 
      <div class="row"> 
        <div class="four columns"> ... </div> 
        <div class="four columns"> ... </div> 
        <div class="four columns"> ... </div> 
      </div> 
    </div> 
    <div class="four columns"> ... </div> 
  </div> 
</div> 

Foundation官網(wǎng)中有一些布局范例可以參考。

#p#

快速創(chuàng)建原型

開(kāi)始動(dòng)手。我們要為一個(gè)簡(jiǎn)單的新聞資訊類(lèi)網(wǎng)站制作首頁(yè)和文章內(nèi)頁(yè)的原型;整個(gè)過(guò)程包括兩部分：使用Foundation快速創(chuàng)建基礎(chǔ)原型，以及為不同類(lèi)型的設(shè)備進(jìn)行移動(dòng)化處理。首先來(lái)看***部分。

***拿起紙和筆，在創(chuàng)建原型之前將構(gòu)思勾畫(huà)出來(lái)。下面是我們?yōu)榛A(chǔ)版本的首頁(yè)(桌面顯示器版本)畫(huà)的草圖：

可以看到，首頁(yè)的大致布局包括頁(yè)頭、主要文章內(nèi)容圖文、側(cè)邊的次級(jí)內(nèi)容圖文、特色文章圖文列表。對(duì)這個(gè)頁(yè)面，我們可以用到一些Foundation自帶的布局結(jié)構(gòu)，以及一個(gè)不錯(cuò)的外部服務(wù)。

◆ 頁(yè)面整體布局方面，使用前面介紹過(guò)的網(wǎng)格系統(tǒng)。

◆ 全局主導(dǎo)航使用Foundation預(yù)設(shè)的tab結(jié)構(gòu)。

◆ 對(duì)于每個(gè)圖文單元中的圖片，我們使用placehold.it提供的服務(wù)。它會(huì)按照指定的比例輸出可以填滿容器的示范內(nèi)容，包括用來(lái)占位的圖片，以及可以自定義的文案等。

OK我們從頁(yè)頭開(kāi)始。Foundation框架會(huì)保證舊瀏覽器兼容HTML5，所以我們?cè)谶@里可以放心的使用更加語(yǔ)義化的header標(biāo)簽。因?yàn)轫?yè)頭是一個(gè)包含多列內(nèi)容的塊級(jí)結(jié)構(gòu)，所以我們還要為它添加class="row"。代碼如下：

<div class="container">  
  <header class="row">     
    <div class="two columns">  
      <img src="http://placehold.it/200x120" />  
    </div>  
    <div class="eight columns">  
      <h1 class="centered">The Foundation Times</h1>  
      <h5 class="centered">December 1, 2011</h5>  
    </div>  
    <div class="two columns">  
      <img src="http://placehold.it/200x120" />  
    </div>  
  </header> 

可以看到，在外部容器container中，我們將header作為完整的一行，其中放置了三列，寬度方面是1:4:1的關(guān)系。在***列和第三列中，我們使用了placehold.it提供的占位圖片，用來(lái)表示logo等元素。在第二列中，我們使用h1標(biāo)簽作為網(wǎng)站標(biāo)題的容器，副標(biāo)題則使用h5。

接下來(lái)是導(dǎo)航。我們要使用Foundation預(yù)設(shè)的tab形式;代碼結(jié)構(gòu)如下：

<div class="row"> 
  <div class="twelve columns"> 
    <dl class="tabs"> 
      <dd><a href="#" class="active">All News</a></dd> 
      <dd><a href="#">Llamas</a></dd> 
      <dd><a href="#">Alpacas</a></dd> 
      <dd><a href="#">Vicunas</a></dd> 
      <dd><a href="#">Other Dromedaries</a></dd> 
    </dl> 
  </div> 
</div> 

雖然在這一行中只有一套導(dǎo)航元素，但是我們?nèi)匀恍枰獙?dǎo)航元素列表dl放置在一個(gè)列容器中，并且將這個(gè)列容器設(shè)置為12列全寬，否則布局將出現(xiàn)問(wèn)題。

對(duì)于頁(yè)面其他部分的內(nèi)容，基本方式是類(lèi)似的，我們將會(huì)用到網(wǎng)格系統(tǒng)、一些基本的元素、以及Foundation自帶的UI組件。下面是頁(yè)面剩余部分的HTML代碼：

<div class="row"> 
  <div class="eight columns"> 
    <img src="http://placehold.it/800x340" /> 
    <h3><a href="#">Llamas: Great Pets or the Best Pets?</a></h3> 
    <p>Intrepid reporter Jordan Humphreys went to Happy Time Llama Farm to investigate: are llamas merely great pets, or he best pets? Read the full article to find out!</p> <a href="#" class="small radius nice blue button">Read More &rarr;</a> 
  </div> 
  <div class="four columns"> 
    <div class="row"> 
      <div class="five columns"> 
        <img src="http://placehold.it/120x100" /> 
      </div> 
      <div class="seven columns"> 
        <h5><a href="">Alpaca Farm Closed</a></h5> 
        <p>Anthony Tadina reports on this tragic closing.<br /><a href="#">Read More &rarr;</a></p> 
      </div> 
    </div> 
    ... [repeat this row twice more]  
  </div> 
</div> 
                  
<div class="row"> 
  <div class="twelve columns"> 
    <hr /> 
  </div> 
</div> 
                  
<div class="row"> 
  <div class="three columns"> 
    <img src="http://placehold.it/260x190" /> 
    <h5><a href="#">Feature 1</a></h5> 
    <p>Description<br /><a href="#">Read More &rarr;</a></p> 
  </div> 
  ... [repeat this column 3 more times]  
</div> 
                  
<footer class="row"> 
  <div class="seven columns"> 
    <p><strong>The Foundation Times</strong><br />&copy; 2025 no rights reserved.</p> 
  </div> 
  <div class="five columns"> 
    <p><a href="#">All News</a> | <a href="#">Llamas</a> | <a href="#">Alpacas</a> | <a href="#">Vicunas</a> | <a href="#">Other Dromedaries</a></p> 
  </div> 
</footer> 

我們可以看到，HTML原型中每個(gè)部分的代碼結(jié)構(gòu)其實(shí)都是相當(dāng)基礎(chǔ)和簡(jiǎn)單的。需要注意的是class中帶有“button”的元素，這些是Foundation預(yù)設(shè)的按鈕，包括幾種不同的風(fēng)格樣式。我們可以用這樣的方式將a標(biāo)簽或是button類(lèi)型的input元素定義為風(fēng)格化按鈕，并通過(guò)“small”、“radius”等class為其設(shè)置具體的樣式：

◆ small或large - 可選;控制按鈕的尺寸;如果不做設(shè)置，默認(rèn)將為中等尺寸。

◆ radius - 可選;為按鈕增加幾像素的圓角效果。該值還可以是round，樣式為左右兩側(cè)完全圓弧。不做設(shè)置時(shí)，默認(rèn)樣式是矩形。

◆ nice - 可選;添加少許高光等細(xì)節(jié)效果。

◆ blue - 可選;設(shè)置顏色;該值還可以是red、black、grey，或是在樣式表中進(jìn)行過(guò)自定義的任何名稱(chēng)。

◆ button - 唯一的必要class，用來(lái)將元素格式化為按鈕。

通過(guò)這樣一些很基本的HTML代碼，我們就已經(jīng)創(chuàng)建好了基礎(chǔ)版本的原型;當(dāng)前的實(shí)際效果如下圖所示。

如果僅僅需要為桌面設(shè)備制作頁(yè)面原型，那么到這里我們的任務(wù)就已經(jīng)完成了。不過(guò)在本次實(shí)例中，我們還要演示怎樣使原型針對(duì)不同類(lèi)型移動(dòng)設(shè)備進(jìn)行響應(yīng)式的兼容，實(shí)現(xiàn)跨平臺(tái)。

#p#

移動(dòng)化

用戶使用移動(dòng)設(shè)備訪問(wèn)網(wǎng)站時(shí)，期望會(huì)有所不同。對(duì)于眼前這個(gè)內(nèi)容類(lèi)網(wǎng)站，我們希望用戶在使用移動(dòng)設(shè)備進(jìn)行訪問(wèn)的時(shí)候，可以在首屏直接看到主要內(nèi)容部分。移動(dòng)設(shè)備用戶在瀏覽網(wǎng)頁(yè)時(shí)，很厭惡的一點(diǎn)就是，在忍受了網(wǎng)站頁(yè)頭和全局導(dǎo)航的加載過(guò)程之后，仍然無(wú)法立刻看到主要內(nèi)容。(關(guān)于在移動(dòng)設(shè)備中，網(wǎng)站內(nèi)容呈現(xiàn)方式的策略，可以參考我們之前關(guān)于響應(yīng)式網(wǎng)站產(chǎn)品需求及設(shè)計(jì)流程方面的文章)

在不做任何移動(dòng)化處理之前，我們的原型在小屏幕移動(dòng)設(shè)備中的呈現(xiàn)方式如下圖所示：

首屏中，我們只能看到logo、網(wǎng)站標(biāo)題等與主要內(nèi)容、全局導(dǎo)航無(wú)關(guān)的元素。真心不靠譜。我們接下來(lái)要使用一些Foundation提供的的專(zhuān)門(mén)用來(lái)處理不同設(shè)備視圖的class，讓原型中某些元素在小屏幕移動(dòng)設(shè)備中發(fā)生變化。

當(dāng)前，我們的基礎(chǔ)版頁(yè)面原型中，header部分的代碼是這樣的：

<header class="row">    
  <div class="two columns"> 
    <img src="http://placehold.it/200x120" /> 
  </div> 
  <div class="eight columns"> 
    <h1 class="centered">The Foundation Times</h1> 
    <h5 class="centered">December 1, 2011</h5> 
  </div> 
  <div class="two columns"> 
    <img src="http://placehold.it/200x120" /> 
  </div> 
</header> 

添加了移動(dòng)化的class之后：

<header class="row hide-on-phones">    
  <div class="two columns"> 
    <img src="http://placehold.it/200x120" /> 
  </div> 
  <div class="eight columns"> 
    <h1 class="centered">The Foundation Times</h1> 
    <h5 class="centered">December 1, 2011</h5> 
  </div> 
  <div class="two columns"> 
    <img src="http://placehold.it/200x120" /> 
  </div> 
</header> 
    
<header class="row show-on-phones"> 
  <div class="twelve columns"> 
    <img src="http://placehold.it/480x100" /> 
      
    <h1 class="centered">The Foundation Times</h1> 
    <h5 class="centered">December 1, 2011</h5> 
  </div> 
</header> 

重點(diǎn)在于兩個(gè)新的class，一個(gè)是hide-on-phones，另外一個(gè)是show-on-phones。顧名思義，它們用來(lái)控制元素在手機(jī)設(shè)備上的顯示和隱藏。Foundation預(yù)設(shè)了一些這樣的class，用來(lái)根據(jù)不同類(lèi)型的設(shè)備，響應(yīng)式的調(diào)整頁(yè)面元素的呈現(xiàn)方式。

現(xiàn)在，當(dāng)使用手機(jī)瀏覽頁(yè)面原型時(shí)，只有第二個(gè)簡(jiǎn)化的header會(huì)顯示出來(lái)。接下來(lái)，我們?yōu)檫@個(gè)移動(dòng)版本的header寫(xiě)幾行樣式：

h1.centered { text-align: center; margin-bottom: 0; }  
h5.centered { text-align: center; }  
    
.show-on-phones h1.centered { font-size: 24px; font-size: 2.4rem; }  
.show-on-phones h5.centered { font-size: 12px; font-size: 1.2rem; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid #ddd; } 

來(lái)看看到目前的成果：

好多了。現(xiàn)在的問(wèn)題是，導(dǎo)航項(xiàng)在小屏幕中顯得太多了，布局發(fā)生了錯(cuò)亂。一個(gè)常見(jiàn)的解決方案是，對(duì)手機(jī)設(shè)備，將導(dǎo)航移至頁(yè)面底部。當(dāng)然，我們并不是要真的移動(dòng)它，而是像前面那樣設(shè)置不同的顯示規(guī)則。對(duì)于目前的全局導(dǎo)航，在class中增加一個(gè)hide-on-phones：

<div class="row hide-on-phones"> 
  <div class="twelve columns"> 
    <dl class="tabs"> 
      <dd><a href="#" class="active">All News</a></dd> 
      <dd><a href="#">Llamas</a></dd> 
      <dd><a href="#">Alpacas</a></dd> 
      <dd><a href="#">Vicunas</a></dd> 
      <dd><a href="#">Other Dromedaries</a></dd> 
    </dl> 
  </div> 
</div> 

接下來(lái)，在頁(yè)面底部，footer之前，添加一個(gè)新的導(dǎo)航;HTML結(jié)構(gòu)與頭部的全局導(dǎo)航基本一致：

<div class="row show-on-phones"> 
  <div class="twelve columns"> 
    <dl class="tabs mobile"> 
      <dd><a href="#" class="active">All News</a></dd> 
      <dd><a href="#">Llamas</a></dd> 
      <dd><a href="#">Alpacas</a></dd> 
      <dd><a href="#">Vicunas</a></dd> 
      <dd><a href="#">Other Dromedaries</a></dd> 
    </dl> 
  </div> 
</div> 

區(qū)別在于兩點(diǎn)：一是在容器的class中使用了show-on-phones，使該導(dǎo)航只在手機(jī)中顯示;另外，在導(dǎo)航列表的class里增加了一個(gè)“mobile”，這樣可以使每個(gè)導(dǎo)航tab都成為全寬，整個(gè)導(dǎo)航將成為一個(gè)縱向列表。

現(xiàn)在，我們的原型在手機(jī)中的首屏效果是這樣的：

基于網(wǎng)格系統(tǒng)，編寫(xiě)了少量的高語(yǔ)義化HTML代碼，配合Foundation原生提供的一些樣式工具class，我們已經(jīng)創(chuàng)建出了可以用來(lái)進(jìn)行跨平臺(tái)演示和測(cè)試的首頁(yè)原型。

#p#

自己試試看

接下來(lái)，你可以按照我們前面的方法，自己試著為文章內(nèi)頁(yè)創(chuàng)建原型。同樣，從手繪草稿開(kāi)始。我們已經(jīng)幫你完成了這一步，并添加了一些注釋?zhuān)鳛榫帉?xiě)原型代碼時(shí)的小提示;見(jiàn)下圖：

你可以下載這套實(shí)例的源文件包，實(shí)際看看這些原型相關(guān)文件(包括文章內(nèi)頁(yè))的完整代碼。

跨平臺(tái)原型在項(xiàng)目實(shí)踐中能起到怎樣的作用?

正如我們?cè)诒疚拈_(kāi)頭提到的，要使網(wǎng)站在任何類(lèi)型的設(shè)備上都盡量兼容，***的辦法就是從設(shè)計(jì)流程的上游出發(fā)，創(chuàng)建跨平臺(tái)性比較強(qiáng)的原型，確保從一開(kāi)始就可以對(duì)布局結(jié)構(gòu)等方面的設(shè)計(jì)方案進(jìn)行及時(shí)檢驗(yàn)。設(shè)計(jì)方面的迭代不能再僅僅依靠Photoshop了。

最近，我們?cè)谝粋€(gè)為本地某公益組織創(chuàng)建網(wǎng)站的實(shí)際項(xiàng)目中，運(yùn)用這樣的方式，進(jìn)行了24小時(shí)沖刺式的設(shè)計(jì)開(kāi)發(fā)。在勾畫(huà)出網(wǎng)站頁(yè)面的草圖之后，我們使用Foundation框架，在不到兩個(gè)小時(shí)的時(shí)間里，為所有的頁(yè)面創(chuàng)建了原型。這些原型可以幫助我們?cè)诙喾N設(shè)備平臺(tái)中直接測(cè)試相應(yīng)的設(shè)計(jì)方案，同時(shí)，前端人員能夠基于這些原型的代碼結(jié)構(gòu)并行式的展開(kāi)相關(guān)開(kāi)發(fā)工作，內(nèi)容團(tuán)隊(duì)也可以基于可視化的原型策劃文案;在這期間，我們也同時(shí)進(jìn)行著視覺(jué)設(shè)計(jì)方面的工作。

有興趣的話，可以查看關(guān)于這次項(xiàng)目的更多細(xì)節(jié)，包括全部頁(yè)面的草圖、跨平臺(tái)原型等。

到目前為止，我們已經(jīng)在很多客戶項(xiàng)目案例中使用了Foundation框架;在我們自己的一些應(yīng)用類(lèi)型網(wǎng)站的設(shè)計(jì)開(kāi)發(fā)過(guò)程中也有用到，包括axeapp.com，spurapp.com和reelapp.com。

原文：http://beforweb.com/node/23

【編輯推薦】