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

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

C7210 发表于 2011-11-19 10:07

自己试试看

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

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

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

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

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

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

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

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

本站原创编译文章。如需转载，请注明：本文来自Be For Web

英文原文:

http://www.netmagazine.com/tutorials/quickly-build-prototype-test-any-...

译者信息: C7210 - 设计布道师，设计开发者，译者，音乐玩家。

这个博客是用Foundation写的：http://blog.enqoo.com/

风影发表于 2012-02-02 10:58 固定链接

cool~

C7210 发表于 2012-02-08 10:02 固定链接

非常感谢，及时回复，它不能支持IE6，让我有点郁闷，那么我用这个框架做网站，除了在外挂一个960的框架，也没有别的什么好方法了吧，我的CSS技术，也就是刚入门，所以一心想使用框架来做网站，有要是有更好的跨平台的全能型CSS框架，请多多介绍呀，呵呵，我也是一个joomla爱好者，很早就开始关注你的网站了，感谢有你们这样一群领路人，让我们这些小白，有机会成长，再次感谢

cyl 发表于 2012-01-15 14:53 固定链接

可以关注下推特的bootstrap

小土发表于 2012-11-23 12:53 固定链接

我个人觉得Foundation的主要目的还是快速产出具有跨平台特性的原型的，从这个角度讲，其实也没必要兼容IE6，尤其它的移动化卖点也根本不需要考虑IE6的问题。大家共同学习提高，不要太客气的=)

C7210 发表于 2012-01-15 17:43 固定链接

终于找到，这篇文章的原版的出处了，我这两天一直在学习这个框架，这个框架真的不错，它对IE6支持的不好，而且，它的版本升到了2.1，它将global.css和ui.css,这几些放在了一起，写成了一个文件，我还在学习。我想问老大，用这个框架做一个网站，在本地怎样用电脑虚拟出手机来做测试呢？你有什么好方法呢，就像文中展示的那样呢？ http://viiiix.com/这网站也是老大的呀，呵呵，学习了，

cyl 发表于 2012-01-14 22:02 固定链接

另外viiiix.com倒是蛮久没更新了，惭愧...多多交流=)

C7210 发表于 2012-01-15 12:44 固定链接

hi 欢迎常来=D 个人觉得毕竟这个框架产出的原型是页面的形式，所以就像在做Web App时一样，可以直接在Webkit浏览器的小窗口状态下，或是直接上传到手机浏览器可以访问到的地方都OK。不过在眼前这个事情的上下文里貌似有个不大不小的矛盾：Foundation的一个卖点就是如果我们已经在代码中使用了正确的HTML结构以及它预设好的移动化class，并确保了原型在桌面设备中的正确样式，那么它应该已经可以在移动设备里做响应式的调整了；“调试”这个说法也许未必恰当。当然要检视最终原型的效果时，我目前所能想到和用到过的就是前面说到的那两种方法。

C7210 发表于 2012-01-15 12:43 固定链接

准备拿这个写约饭网

约饭网发表于 2011-12-16 21:45 固定链接

果断关注

C7210 发表于 2011-12-17 22:25 固定链接

提升效率的又一利器。谢谢分享。

sheldon 发表于 2011-12-05 11:07 固定链接

=D 又见老谢；有用就好！

C7210 发表于 2011-12-05 11:43 固定链接