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. <div class="container">  
  2.   <div class="row">  
  3.     <div class="eight columns" id="mainContent"> ... </div>  
  4.     <div class="four columns" id="sidebarContent"> ... </div>  
  5.   </div>  
  6. </div> 

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

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

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

网格布局可以进行嵌套:

 
 
 
 
  1. <div class="container"> 
  2.   <div class="row"> 
  3.     <div class="eight columns"> 
  4.       <div class="row"> 
  5.         <div class="four columns"> ... </div> 
  6.         <div class="four columns"> ... </div> 
  7.         <div class="four columns"> ... </div> 
  8.       </div> 
  9.     </div> 
  10.     <div class="four columns"> ... </div> 
  11.   </div> 
  12. </div> 

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

#p#

快速创建原型

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

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

 

 

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

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

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

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

OK我们从页头开始。Foundation框架会保证旧浏览器兼容HTML5,所以我们在这里可以放心的使用更加语义化的header标签。因为页头是一个包含多列内容的块级结构,所以我们还要为它添加class="row"。代码如下:

 
 
 
 
  1. <div class="container">  
  2.   <header class="row">     
  3.     <div class="two columns">  
  4.       <img src="http://placehold.it/200x120" />  
  5.     </div>  
  6.     <div class="eight columns">  
  7.       <h1 class="centered">The Foundation Times</h1>  
  8.       <h5 class="centered">December 1, 2011</h5>  
  9.     </div>  
  10.     <div class="two columns">  
  11.       <img src="http://placehold.it/200x120" />  
  12.     </div>  
  13.   </header> 

可以看到,在外部容器container中,我们将header作为完整的一行,其中放置了三列,宽度方面是1:4:1的关系。在***列和第三列中,我们使用了placehold.it提供的占位图片,用来表示logo等元素。在第二列中,我们使用h1标签作为网站标题的容器,副标题则使用h5。

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

 
 
 
 
  1. <div class="row"> 
  2.   <div class="twelve columns"> 
  3.     <dl class="tabs"> 
  4.       <dd><a href="#" class="active">All News</a></dd> 
  5.       <dd><a href="#">Llamas</a></dd> 
  6.       <dd><a href="#">Alpacas</a></dd> 
  7.       <dd><a href="#">Vicunas</a></dd> 
  8.       <dd><a href="#">Other Dromedaries</a></dd> 
  9.     </dl> 
  10.   </div> 
  11. </div> 

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

对于页面其他部分的内容,基本方式是类似的,我们将会用到网格系统、一些基本的元素、以及Foundation自带的UI组件。下面是页面剩余部分的HTML代码:

 
 
 
 
  1. <div class="row"> 
  2.   <div class="eight columns"> 
  3.     <img src="http://placehold.it/800x340" /> 
  4.     <h3><a href="#">Llamas: Great Pets or the Best Pets?</a></h3> 
  5.     <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> 
  6.   </div> 
  7.   <div class="four columns"> 
  8.     <div class="row"> 
  9.       <div class="five columns"> 
  10.         <img src="http://placehold.it/120x100" /> 
  11.       </div> 
  12.       <div class="seven columns"> 
  13.         <h5><a href="">Alpaca Farm Closed</a></h5> 
  14.         <p>Anthony Tadina reports on this tragic closing.<br /><a href="#">Read More &rarr;</a></p> 
  15.       </div> 
  16.     </div> 
  17.     ... [repeat this row twice more]  
  18.   </div> 
  19. </div> 
  20.                   
  21. <div class="row"> 
  22.   <div class="twelve columns"> 
  23.     <hr /> 
  24.   </div> 
  25. </div> 
  26.                   
  27. <div class="row"> 
  28.   <div class="three columns"> 
  29.     <img src="http://placehold.it/260x190" /> 
  30.     <h5><a href="#">Feature 1</a></h5> 
  31.     <p>Description<br /><a href="#">Read More &rarr;</a></p> 
  32.   </div> 
  33.   ... [repeat this column 3 more times]  
  34. </div> 
  35.                   
  36. <footer class="row"> 
  37.   <div class="seven columns"> 
  38.     <p><strong>The Foundation Times</strong><br />&copy; 2025 no rights reserved.</p> 
  39.   </div> 
  40.   <div class="five columns"> 
  41.     <p><a href="#">All News</a> | <a href="#">Llamas</a> | <a href="#">Alpacas</a> | <a href="#">Vicunas</a> | <a href="#">Other Dromedaries</a></p> 
  42.   </div> 
  43. </footer> 

我们可以看到,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. <header class="row">    
  2.   <div class="two columns"> 
  3.     <img src="http://placehold.it/200x120" /> 
  4.   </div> 
  5.   <div class="eight columns"> 
  6.     <h1 class="centered">The Foundation Times</h1> 
  7.     <h5 class="centered">December 1, 2011</h5> 
  8.   </div> 
  9.   <div class="two columns"> 
  10.     <img src="http://placehold.it/200x120" /> 
  11.   </div> 
  12. </header> 

添加了移动化的class之后:

 
 
 
 
  1. <header class="row hide-on-phones">    
  2.   <div class="two columns"> 
  3.     <img src="http://placehold.it/200x120" /> 
  4.   </div> 
  5.   <div class="eight columns"> 
  6.     <h1 class="centered">The Foundation Times</h1> 
  7.     <h5 class="centered">December 1, 2011</h5> 
  8.   </div> 
  9.   <div class="two columns"> 
  10.     <img src="http://placehold.it/200x120" /> 
  11.   </div> 
  12. </header> 
  13.     
  14. <header class="row show-on-phones"> 
  15.   <div class="twelve columns"> 
  16.     <img src="http://placehold.it/480x100" /> 
  17.       
  18.     <h1 class="centered">The Foundation Times</h1> 
  19.     <h5 class="centered">December 1, 2011</h5> 
  20.   </div> 
  21. </header> 

重点在于两个新的class,一个是hide-on-phones,另外一个是show-on-phones。顾名思义,它们用来控制元素在手机设备上的显示和隐藏。Foundation预设了一些这样的class,用来根据不同类型的设备,响应式的调整页面元素的呈现方式。

现在,当使用手机浏览页面原型时,只有第二个简化的header会显示出来。接下来,我们为这个移动版本的header写几行样式:

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

来看看到目前的成果:

 

 

好多了。现在的问题是,导航项在小屏幕中显得太多了,布局发生了错乱。一个常见的解决方案是,对手机设备,将导航移至页面底部。当然,我们并不是要真的移动它,而是像前面那样设置不同的显示规则。对于目前的全局导航,在class中增加一个hide-on-phones:

 
 
 
 
  1. <div class="row hide-on-phones"> 
  2.   <div class="twelve columns"> 
  3.     <dl class="tabs"> 
  4.       <dd><a href="#" class="active">All News</a></dd> 
  5.       <dd><a href="#">Llamas</a></dd> 
  6.       <dd><a href="#">Alpacas</a></dd> 
  7.       <dd><a href="#">Vicunas</a></dd> 
  8.       <dd><a href="#">Other Dromedaries</a></dd> 
  9.     </dl> 
  10.   </div> 
  11. </div> 

接下来,在页面底部,footer之前,添加一个新的导航;HTML结构与头部的全局导航基本一致:

 
 
 
 
  1. <div class="row show-on-phones"> 
  2.   <div class="twelve columns"> 
  3.     <dl class="tabs mobile"> 
  4.       <dd><a href="#" class="active">All News</a></dd> 
  5.       <dd><a href="#">Llamas</a></dd> 
  6.       <dd><a href="#">Alpacas</a></dd> 
  7.       <dd><a href="#">Vicunas</a></dd> 
  8.       <dd><a href="#">Other Dromedaries</a></dd> 
  9.     </dl> 
  10.   </div> 
  11. </div> 

区别在于两点:一是在容器的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

【编辑推荐】

 

THE END