日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

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

新聞中心

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

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

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

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

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

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

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

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

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

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

接下來，我們將通過一個完整的實例，來演示怎樣使用Foundation快速創(chuàng)建跨平臺的頁面原型。走著!

資源概覽

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

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

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

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

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

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

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

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

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

接下來，我們將從網(wǎng)格系統(tǒng)、快速創(chuàng)建原型、移動化這三個方面依次進行實例講解。

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

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

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

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

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

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

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

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

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

    #p#

    快速創(chuàng)建原型

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

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

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

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

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

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

    OK我們從頁頭開始。Foundation框架會保證舊瀏覽器兼容HTML5，所以我們在這里可以放心的使用更加語義化的header標(biāo)簽。因為頁頭是一個包含多列內(nèi)容的塊級結(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提供的占位圖片，用來表示logo等元素。在第二列中，我們使用h1標(biāo)簽作為網(wǎng)站標(biāo)題的容器，副標(biāo)題則使用h5。

    接下來是導(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放置在一個列容器中，并且將這個列容器設(shè)置為12列全寬，否則布局將出現(xiàn)問題。

    對于頁面其他部分的內(nèi)容，基本方式是類似的，我們將會用到網(wǎng)格系統(tǒng)、一些基本的元素、以及Foundation自帶的UI組件。下面是頁面剩余部分的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原型中每個部分的代碼結(jié)構(gòu)其實都是相當(dāng)基礎(chǔ)和簡單的。需要注意的是class中帶有“button”的元素，這些是Foundation預(yù)設(shè)的按鈕，包括幾種不同的風(fēng)格樣式。我們可以用這樣的方式將a標(biāo)簽或是button類型的input元素定義為風(fēng)格化按鈕，并通過“small”、“radius”等class為其設(shè)置具體的樣式：

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

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

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

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

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

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

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

    #p#

    移動化

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

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

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

    當(dāng)前，我們的基礎(chǔ)版頁面原型中，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.

    添加了移動化的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.

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

    現(xiàn)在，當(dāng)使用手機瀏覽頁面原型時，只有第二個簡化的header會顯示出來。接下來，我們?yōu)檫@個移動版本的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.

    來看看到目前的成果：

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

    接下來，在頁面底部，footer之前，添加一個新的導(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ū)別在于兩點：一是在容器的class中使用了show-on-phones，使該導(dǎo)航只在手機中顯示;另外，在導(dǎo)航列表的class里增加了一個“mobile”，這樣可以使每個導(dǎo)航tab都成為全寬，整個導(dǎo)航將成為一個縱向列表。

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

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

    #p#

    自己試試看

    接下來，你可以按照我們前面的方法，自己試著為文章內(nèi)頁創(chuàng)建原型。同樣，從手繪草稿開始。我們已經(jīng)幫你完成了這一步，并添加了一些注釋，作為編寫原型代碼時的小提示;見下圖：

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

    跨平臺原型在項目實踐中能起到怎樣的作用?

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

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

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

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

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


    分享標(biāo)題：Foundation框架——快速創(chuàng)建跨平臺的網(wǎng)站頁面原型
    轉(zhuǎn)載來于：http://www.dlmjj.cn/article/dhgciig.html

    其他資訊