日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
Foundation框架——快速創(chuàng)建跨平臺(tái)的網(wǎng)站頁(yè)面原型

最近兩篇譯文都有涉及框架和跨平臺(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)始正文部分。

站在用戶的角度思考問(wèn)題，與客戶深入溝通，找到君山網(wǎng)站設(shè)計(jì)與君山網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名申請(qǐng)、虛擬空間、企業(yè)郵箱。業(yè)務(wù)覆蓋君山地區(qū)。

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

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

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

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

真心歡樂(lè)。別怕，大家一起面對(duì)并解決問(wèn)題。其實(shí)，不同類型的設(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è)面原型。相比于其他同類型工具，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)在不同類型設(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)代碼：

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.    
    3. 
  
  
  
  
  3.      ... 
  •      ... 
  •   

  • 該結(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)行嵌套：

     
 
 
 
      
  
  
  
  
      2. 
  
  
  
  
    2.   
      3. 
  
  
  
  
    3.     
      4. 
  
  
  
  
    4.       
      5. 
  
  
  
  
    5.          ... 
  •          ... 
  •          ... 
  •       
  •     
  •      ... 
  •   

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

    #p#

    快速創(chuàng)建原型

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

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

    可以看到，首頁(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"。代碼如下：

     
 
 
 
      
  
  
  
  
    1.  
      2. 
  
  
  
  
    2.       
      3. 
  
  
  
  
    3.      
      4. 
  
  
  
  
    4.        
      5. 
  
  
  
  
    5.      
      6. 
  
  
  
  
    6.      
      7. 
  
  
  
  
    7.       The Foundation Times 
      8. 
  
  
  
  
    8.       December 1, 2011 
      9. 
  
  
  
  
    9.      
      10. 
  
  
  
  
    10.      
      11. 
  
  
  
  
    11.        
      12. 
  
  
  
  
    12.      
      13. 
  
  
  
  
    13.   
      14.

    可以看到，在外部容器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)如下：

     
 
 
 
      
  
  
  
  
      2. 
  
  
  
  
    2.   
      3. 
  
  
  
  
    3.     
      4. 
  
  
  
  
    4.       
      All News
      5. 
  
  
  
  
    5.       
      Llamas
      6. 
  
  
  
  
    6.       
      Alpacas
      7. 
  
  
  
  
    7.       
      Vicunas
      8. 
  
  
  
  
    8.       
      Other Dromedaries
      9. 
  
  
  
  
    9.     
      10. 
  
  
  
  
    10.   
      11. 
  
  
  
  
    11.

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

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

     
 
 
 
      
  
  
  
  
      2. 
  
  
  
  
    2.   
      3. 
  
  
  
  
    3.     
      4. 
  
  
  
  
    4.     
      Llamas: Great Pets or the Best Pets?
      5. 
  
  
  
  
    5.     
      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!
       Read More →
      6. 
  
  
  
  
    6.   
      7. 
  
  
  
  
    7.   
      8. 
  
  
  
  
    8.     
      9. 
  
  
  
  
    9.       
      10. 
  
  
  
  
    10.         
      11. 
  
  
  
  
    11.       
      12. 
  
  
  
  
    12.       
      13. 
  
  
  
  
    13.         
      Alpaca Farm Closed
      14. 
  
  
  
  
    14.         
      Anthony Tadina reports on this tragic closing.Read More →
      15. 
  
  
  
  
    15.       
      16. 
  
  
  
  
    16.     
      17. 
  
  
  
  
    17.     ... [repeat this row twice more] 
      18. 
  
  
  
  
    18.   
      19. 
  
  
  
  
    19. 
  
  
  
  
    20.                  
      21. 
  
  
  
  
      22. 
  
  
  
  
    22.   
      23. 
  
  
  
  
    23.     
      24. 
  
  
  
  
    24.   
      25. 
  
  
  
  
    25. 
  
  
  
  
    26.                  
      27. 
  
  
  
  
      28. 
  
  
  
  
    28.   
      29. 
  
  
  
  
    29.     
      30. 
  
  
  
  
    30.     
      Feature 1
      31. 
  
  
  
  
    31.     
      DescriptionRead More →
      32. 
  
  
  
  
    32.   
      33. 
  
  
  
  
    33.   ... [repeat this column 3 more times] 
      34. 
  
  
  
  
    34. 
  
  
  
  
    35.                  
      36. 
  
  
  
  
      37. 
  
  
  
  
    37.   
      38. 
  
  
  
  
    38.     
      The Foundation Times© 2025 no rights reserved.
      39. 
  
  
  
  
    39.   
      40. 
  
  
  
  
    40.   
      41. 
  
  
  
  
    41.     
      All News | Llamas | Alpacas | Vicunas | Other Dromedaries
      42. 
  
  
  
  
    42.   
      43. 
  
  
  
  
    43.

    我們可以看到，HTML原型中每個(gè)部分的代碼結(jié)構(gòu)其實(shí)都是相當(dāng)基礎(chǔ)和簡(jiǎn)單的。需要注意的是class中帶有“button”的元素，這些是Foundation預(yù)設(shè)的按鈕，包括幾種不同的風(fēng)格樣式。我們可以用這樣的方式將a標(biāo)簽或是button類型的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ò)自定義的任何名稱。

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

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

    如果僅僅需要為桌面設(shè)備制作頁(yè)面原型，那么到這里我們的任務(wù)就已經(jīng)完成了。不過(guò)在本次實(shí)例中，我們還要演示怎樣使原型針對(duì)不同類型移動(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)容類網(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提供的的專門用來(lái)處理不同設(shè)備視圖的class，讓原型中某些元素在小屏幕移動(dòng)設(shè)備中發(fā)生變化。

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

     
 
 
 
      
  
  
  
  
    1.    
      2. 
  
  
  
  
    2.   
      3. 
  
  
  
  
    3.     
      4. 
  
  
  
  
    4.   
      5. 
  
  
  
  
    5.   
      6. 
  
  
  
  
    6.     The Foundation Times
      7. 
  
  
  
  
    7.     December 1, 2011
      8. 
  
  
  
  
    8.   
      9. 
  
  
  
  
    9.   
      10. 
  
  
  
  
    10.     
      11. 
  
  
  
  
    11.   
      12. 
  
  
  
  
    12.

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

     
 
 
 
      
  
  
  
  
    1.    
      2. 
  
  
  
  
    2.   
      3. 
  
  
  
  
    3.     
      4. 
  
  
  
  
    4.   
      5. 
  
  
  
  
    5.   
      6. 
  
  
  
  
    6.     The Foundation Times
      7. 
  
  
  
  
    7.     December 1, 2011
      8. 
  
  
  
  
    8.   
      9. 
  
  
  
  
    9.   
      10. 
  
  
  
  
    10.     
      11. 
  
  
  
  
    11.   
      12. 
  
  
  
  
    12. 
  
  
  
  
    13.    
      14. 
  
  
  
  
      15. 
  
  
  
  
    15.   
      16. 
  
  
  
  
    16.     
      17. 
  
  
  
  
    17.      
      18. 
  
  
  
  
    18.     The Foundation Times
      19. 
  
  
  
  
    19.     December 1, 2011
      20. 
  
  
  
  
    20.   
      21. 
  
  
  
  
    21.

    重點(diǎn)在于兩個(gè)新的class，一個(gè)是hide-on-phones，另外一個(gè)是show-on-phones。顧名思義，它們用來(lái)控制元素在手機(jī)設(shè)備上的顯示和隱藏。Foundation預(yù)設(shè)了一些這樣的class，用來(lái)根據(jù)不同類型的設(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寫幾行樣式：

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

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

    好多了?，F(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：

     
 
 
 
      
  
  
  
  
      2. 
  
  
  
  
    2.   
      3. 
  
  
  
  
    3.     
      4. 
  
  
  
  
    4.       
      All News
      5. 
  
  
  
  
    5.       
      Llamas
      6. 
  
  
  
  
    6.       
      Alpacas
      7. 
  
  
  
  
    7.       
      Vicunas
      8. 
  
  
  
  
    8.       
      Other Dromedaries
      9. 
  
  
  
  
    9.     
      10. 
  
  
  
  
    10.   
      11. 
  
  
  
  
    11.

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

     
 
 
 
      
  
  
  
  
      2. 
  
  
  
  
    2.   
      3. 
  
  
  
  
    3.     
      4. 
  
  
  
  
    4.       
      All News
      5. 
  
  
  
  
    5.       
      Llamas
      6. 
  
  
  
  
    6.       
      Alpacas
      7. 
  
  
  
  
    7.       
      Vicunas
      8. 
  
  
  
  
    8.       
      Other Dromedaries
      9. 
  
  
  
  
    9.     
      10. 
  
  
  
  
    10.   
      11. 
  
  
  
  
    11.

    區(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)，編寫了少量的高語(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)幫你完成了這一步，并添加了一些注釋，作為編寫原型代碼時(shí)的小提示;見(jiàn)下圖：

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

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

    正如我們?cè)诒疚拈_(kāi)頭提到的，要使網(wǎng)站在任何類型的設(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ā)。在勾畫出網(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)用類型網(wǎng)站的設(shè)計(jì)開(kāi)發(fā)過(guò)程中也有用到，包括axeapp.com，spurapp.com和reelapp.com。

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


    當(dāng)前名稱：Foundation框架——快速創(chuàng)建跨平臺(tái)的網(wǎng)站頁(yè)面原型
    文章分享：http://www.5511xx.com/article/dhgciig.html

    其他資訊