Foundation框架——快速创建跨平台的网站页面原型

最近两篇译文都有涉及框架和跨平台方面的话题：前一篇中，我们了解了一些用于移动应用开发的前端框架工具;今天这篇的立足点偏向设计开发流程的上游，它将向我们展示怎样使用Foundation框架快速创建跨平台的、可以在多种设备上进行测试的响应式页面原型。下面开始正文部分。

站在用户的角度思考问题，与客户深入沟通，找到君山网站设计与君山网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：成都网站制作、成都网站建设、企业官网、英文网站、手机端网站、网站推广、域名申请、虚拟空间、企业邮箱。业务覆盖君山地区。

开门见山的说，作为网页设计和开发人员，我们面临着以下几个严峻的问题：

◆ 每天，人们用来上网的设备种类和数量都在不断上升。

◆ 为每种设备设计开发不同的界面是不可能的。

◆ 即使你专门为某些设备定制打造，这些设备也很有可能在不久的将来退出主流舞台。

真心欢乐。别怕，大家一起面对并解决问题。其实，不同类型的设备及屏幕的这个问题，很早以前就开始存在了，只是多年来我们一直忽视这个状况，一厢情愿的守着960像素的网格系统。

如今，我们需要从设计流程的上游改变长久以来的习惯，比如尝试快速创建可以在不同设备上进行测试的原型，而不只是针对台式机浏览器或笔记本。这就是我们(英文原文作者的团队)开发Foundation框架的原因。

Foundation是一款开源的前端框架，我们可以使用它快速创建页面原型。相比于其他同类型工具，Foundation（http://foundation.zurb.com/）的移动化方案更加出色;借鉴响应式Web设计的思路和方法，Foundation对内容结构在不同类型设备中的的呈现方式进行了相应的预设。(关于响应式Web设计，可以参考我们之前的几篇文章，包括响应式设计的概念、组成要素及基本实现思路，怎样通过CSS3 Media Query实现响应式Web设计，以及相关的产品需求和设计流程案例学习)

接下来，我们将通过一个完整的实例，来演示怎样使用Foundation快速创建跨平台的页面原型。走着!

资源概览

首先到foundation.zurb.com（http://foundation.zurb.com/）下载代码包;果断点击大蓝按钮即可。代码包中包含以下文件及结构：

◆ index.html - 我们将从这里开始创建***个页面。

◆ javascripts和stylesheets路径 - 主要的静态资源文件，包括jQuery及所需的样式表。

◆ humans.txt和robots.txt - 里面的代码算是不错的样板，有空的时候可以溜几眼。

JS方面的东西基本不在本文讨论范围，我们继续来看看stylesheets路径中的文件：

◆ global.css - 全局基础样式表，包括相对常规的12列固定宽度的网格系统、快速创建复杂布局的可嵌套工具等。另外还有其他全局字体、布局等方面的样式定义。

◆ ui.css - 用来对那些组成原型的常规UI元素进行样式定义。

◆ mobile.css - 负责移动设备方面的样式，涉及响应式的样式定义都在这里。

分别在浏览器和代码编辑器中打开index.html文件。在浏览器中，我们可以看到该页面包含了一些用于构筑原型的基础布局结构及UI元素。

接下来，我们将从网格系统、快速创建原型、移动化这三个方面依次进行实例讲解。

网格系统

首先来简单看看global.css中的网格系统。如果你熟悉960网格系统或是Blueprint CSS框架，那么对Foundation的网格结构也应该不会陌生。下面是一段典型的结构代码：

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

  • 该结构由三部分组成：外层容器container、行容器row和列容器columns。外层容器的作用只是为页面添加左右内边距(padding)。

    行容器拥有一个固定的***宽度值，防止页面在大显示器中过宽;当然，如果你想打造纯粹的液态布局，也可以在样式表中去掉这个属性。

    列容器是最内层的内容容器，在我们的网格系统中，每行最多可以放置12个列容器。上面的代码中，我们创建的是典型的“内容+侧边栏”布局，宽度分别为全宽的2/3和1/3。

    网格布局可以进行嵌套：

     
 
 
 
      
  
  
  
  
      2. 
  
  
  
  
    2.   
      3. 
  
  
  
  
    3.     
      4. 
  
  
  
  
    4.       
      5. 
  
  
  
  
    5.          ... 
      6. 
  
  
  
  
    6.          ... 
      7. 
  
  
  
  
    7.          ... 
      8. 
  
  
  
  
    8.       
      9. 
  
  
  
  
    9.     
      10. 
  
  
  
  
    10.      ... 
      11. 
  
  
  
  
    11.   
      12. 
  
  
  
  
    12.

    Foundation官网中有一些布局范例可以参考。

    #p#

    快速创建原型

    开始动手。我们要为一个简单的新闻资讯类网站制作首页和文章内页的原型;整个过程包括两部分：使用Foundation快速创建基础原型，以及为不同类型的设备进行移动化处理。首先来看***部分。

    ***拿起纸和笔，在创建原型之前将构思勾画出来。下面是我们为基础版本的首页(桌面显示器版本)画的草图：

    可以看到，首页的大致布局包括页头、主要文章内容图文、侧边的次级内容图文、特色文章图文列表。对这个页面，我们可以用到一些Foundation自带的布局结构，以及一个不错的外部服务。

    ◆ 页面整体布局方面，使用前面介绍过的网格系统。

    ◆ 全局主导航使用Foundation预设的tab结构。

    ◆ 对于每个图文单元中的图片，我们使用placehold.it提供的服务。它会按照指定的比例输出可以填满容器的示范内容，包括用来占位的图片，以及可以自定义的文案等。

    OK我们从页头开始。Foundation框架会保证旧浏览器兼容HTML5，所以我们在这里可以放心的使用更加语义化的header标签。因为页头是一个包含多列内容的块级结构，所以我们还要为它添加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的关系。在***列和第三列中，我们使用了placehold.it提供的占位图片，用来表示logo等元素。在第二列中，我们使用h1标签作为网站标题的容器，副标题则使用h5。

    接下来是导航。我们要使用Foundation预设的tab形式;代码结构如下：

     
 
 
 
      
  
  
  
  
      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.

    虽然在这一行中只有一套导航元素，但是我们仍然需要将导航元素列表dl放置在一个列容器中，并且将这个列容器设置为12列全宽，否则布局将出现问题。

    对于页面其他部分的内容，基本方式是类似的，我们将会用到网格系统、一些基本的元素、以及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原型中每个部分的代码结构其实都是相当基础和简单的。需要注意的是class中带有“button”的元素，这些是Foundation预设的按钮，包括几种不同的风格样式。我们可以用这样的方式将a标签或是button类型的input元素定义为风格化按钮，并通过“small”、“radius”等class为其设置具体的样式：

    ◆ small或large - 可选;控制按钮的尺寸;如果不做设置，默认将为中等尺寸。

    ◆ radius - 可选;为按钮增加几像素的圆角效果。该值还可以是round，样式为左右两侧完全圆弧。不做设置时，默认样式是矩形。

    ◆ nice - 可选;添加少许高光等细节效果。

    ◆ blue - 可选;设置颜色;该值还可以是red、black、grey，或是在样式表中进行过自定义的任何名称。

    ◆ button - 唯一的必要class，用来将元素格式化为按钮。

    通过这样一些很基本的HTML代码，我们就已经创建好了基础版本的原型;当前的实际效果如下图所示。

    如果仅仅需要为桌面设备制作页面原型，那么到这里我们的任务就已经完成了。不过在本次实例中，我们还要演示怎样使原型针对不同类型移动设备进行响应式的兼容，实现跨平台。

    #p#

    移动化

    用户使用移动设备访问网站时，期望会有所不同。对于眼前这个内容类网站，我们希望用户在使用移动设备进行访问的时候，可以在首屏直接看到主要内容部分。移动设备用户在浏览网页时，很厌恶的一点就是，在忍受了网站页头和全局导航的加载过程之后，仍然无法立刻看到主要内容。(关于在移动设备中，网站内容呈现方式的策略，可以参考我们之前关于响应式网站产品需求及设计流程方面的文章)

    在不做任何移动化处理之前，我们的原型在小屏幕移动设备中的呈现方式如下图所示：

    首屏中，我们只能看到logo、网站标题等与主要内容、全局导航无关的元素。真心不靠谱。我们接下来要使用一些Foundation提供的的专门用来处理不同设备视图的class，让原型中某些元素在小屏幕移动设备中发生变化。

    当前，我们的基础版页面原型中，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。顾名思义，它们用来控制元素在手机设备上的显示和隐藏。Foundation预设了一些这样的class，用来根据不同类型的设备，响应式的调整页面元素的呈现方式。

    现在，当使用手机浏览页面原型时，只有第二个简化的header会显示出来。接下来，我们为这个移动版本的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.

    来看看到目前的成果：

    好多了。现在的问题是，导航项在小屏幕中显得太多了，布局发生了错乱。一个常见的解决方案是，对手机设备，将导航移至页面底部。当然，我们并不是要真的移动它，而是像前面那样设置不同的显示规则。对于目前的全局导航，在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之前，添加一个新的导航;HTML结构与头部的全局导航基本一致：

     
 
 
 
      
  
  
  
  
      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.

    区别在于两点：一是在容器的class中使用了show-on-phones，使该导航只在手机中显示;另外，在导航列表的class里增加了一个“mobile”，这样可以使每个导航tab都成为全宽，整个导航将成为一个纵向列表。

    现在，我们的原型在手机中的首屏效果是这样的：

    基于网格系统，编写了少量的高语义化HTML代码，配合Foundation原生提供的一些样式工具class，我们已经创建出了可以用来进行跨平台演示和测试的首页原型。

    #p#

    自己试试看

    接下来，你可以按照我们前面的方法，自己试着为文章内页创建原型。同样，从手绘草稿开始。我们已经帮你完成了这一步，并添加了一些注释，作为编写原型代码时的小提示;见下图：

    你可以下载这套实例的源文件包，实际看看这些原型相关文件(包括文章内页)的完整代码。

    跨平台原型在项目实践中能起到怎样的作用?

    正如我们在本文开头提到的，要使网站在任何类型的设备上都尽量兼容，***的办法就是从设计流程的上游出发，创建跨平台性比较强的原型，确保从一开始就可以对布局结构等方面的设计方案进行及时检验。设计方面的迭代不能再仅仅依靠Photoshop了。

    最近，我们在一个为本地某公益组织创建网站的实际项目中，运用这样的方式，进行了24小时冲刺式的设计开发。在勾画出网站页面的草图之后，我们使用Foundation框架，在不到两个小时的时间里，为所有的页面创建了原型。这些原型可以帮助我们在多种设备平台中直接测试相应的设计方案，同时，前端人员能够基于这些原型的代码结构并行式的展开相关开发工作，内容团队也可以基于可视化的原型策划文案;在这期间，我们也同时进行着视觉设计方面的工作。

    有兴趣的话，可以查看关于这次项目的更多细节，包括全部页面的草图、跨平台原型等。

    到目前为止，我们已经在很多客户项目案例中使用了Foundation框架;在我们自己的一些应用类型网站的设计开发过程中也有用到，包括axeapp.com，spurapp.com和reelapp.com。

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

    当前题目：Foundation框架——快速创建跨平台的网站页面原型
    标题URL：http://www.shufengxianlan.com/qtweb/news15/14515.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    商城网站知识

    同城分类信息

    资阳网站建设　　 　力比特工程　　 　成都做网站建设公司　　 　响应式网站建设公司　　 　香港云主机　　 　电商网站建设　　 　四川雕琢时光　　 　买链接　　 　网站seo优化　　 　注册域名　　 　公路钻孔机　　 　成都品牌网站建设　　 　app软件开发公司　　 　重庆移动机房托管　　 　温江网站制作　　 　网站SEO优化　　 　边坡柔性防护网　　 　重庆托管服务器　　 　成都微信开发　　 　创新互联重庆