BeFor Web
为网而生 - 关注互联网及移动端产品的用户体验设计

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

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

整个一周都在揪心的猫事中度过。从十月底到现在的这段日子里,倒是越发懂得珍惜每天中片刻的宁静时光。有时会怀疑家里是否有时空漩涡一类的东西,不然钟表怎么会走的那么快,一点儿也不愿停下等等我的样子。一切都会好起来。

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

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

  • 每天,人们用来上网的设备种类和数量都在不断上升。
  • 为每种设备设计开发不同的界面是不可能的。
  • 即使你专门为某些设备定制打造,这些设备也很有可能在不久的将来退出主流舞台。

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

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

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

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

资源概览

首先到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元素。

foundation-prototype-framework-responsive-multiple-device

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

网格系统

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

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

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

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

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

网格布局可以进行嵌套:

<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官网中有一些布局范例可以参考。

Pages

译文代表原作者观点。欢迎发表评论,或到译者微博进一步交流探讨。

本站原创编译文章。如需转载,请注明:本文来自Be For Web
译者信息: C7210 - UI/UX 设计布道师,设计师,译者,猫奴,音乐玩家。
评论 (12)
这个博客是用Foundation写的:http://blog.enqoo.com/
cool~
非常感谢,及时回复,它不能支持IE6,让我有点郁闷,那么我用这个框架做网站,除了在外挂一个960的框架,也没有别的什么好方法了吧,我的CSS技术,也就是刚入门,所以一心想使用框架来做网站,有要是有更好的跨平台的全能型CSS框架,请多多介绍呀,呵呵, 我也是一个joomla爱好者,很早就开始关注你的网站了,感谢有你们这样一群领路人,让我们这些小白,有机会成长,再次感谢
可以关注下推特的bootstrap
我个人觉得Foundation的主要目的还是快速产出具有跨平台特性的原型的,从这个角度讲,其实也没必要兼容IE6,尤其它的移动化卖点也根本不需要考虑IE6的问题。 大家共同学习提高,不要太客气的=)
终于找到,这篇文章的原版的出处了,我这两天一直在学习这个框架,这个框架真的不错,它对IE6支持的不好,而且,它的版本升到了2.1,它将global.css和ui.css,这几些放在了一起,写成了一个文件,我还在学习。 我想问老大,用这个框架做一个网站,在本地怎样用电脑虚拟出手机来做测试呢?你有什么好方法呢,就像文中展示的那样呢? http://viiiix.com/这网站也是老大的呀,呵呵,学习了,
另外viiiix.com倒是蛮久没更新了,惭愧...多多交流=)
hi 欢迎常来=D 个人觉得毕竟这个框架产出的原型是页面的形式,所以就像在做Web App时一样,可以直接在Webkit浏览器的小窗口状态下,或是直接上传到手机浏览器可以访问到的地方都OK。不过在眼前这个事情的上下文里貌似有个不大不小的矛盾:Foundation的一个卖点就是如果我们已经在代码中使用了正确的HTML结构以及它预设好的移动化class,并确保了原型在桌面设备中的正确样式,那么它应该已经可以在移动设备里做响应式的调整了;“调试”这个说法也许未必恰当。当然要检视最终原型的效果时,我目前所能想到和用到过的就是前面说到的那两种方法。
准备拿这个写约饭网
果断关注
提升效率的又一利器。谢谢分享。
=D 又见老谢;有用就好!