肥猫SEO论坛»论坛首页 › 行业交流 › 软件下载 › Foundation框架 – 快速创建跨平台的网站页面原型 ...

高端网站建设可签合同可上门沟通	站群程序定制/蜘蛛池租用	全行业SEO接单QQ1624516415	全行业SEO接单QQ1624516415
2000+站点外链一键通发	原创SEO文章代写【点击】	点击加入本站VIP 发帖免审核	广告位招租

honghu2

23万积分	0 好友	7万主题

发消息

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

TA的其它主题

发表于 2021-9-26 16:52 | 查看: 520| 回复: 0

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元素。

接下来，咱们将从网格体系、快速建立原型、挪动化这三个方面挨次举行实例讲授。
网格体系
起首来简略看看global.css中的网格体系。若是你认识960网格体系或是Blueprint CSS框架，那末对Foundation的网格布局也应当不会目生。下面是一段典范的布局代码：

?
123456
<divclass="container"><divclass="row"><divclass="eight columns"id="mainContent"> ... </div><divclass="four columns"id="sidebarContent"> ... </div></div></div>

该布局由三部门构成：外层容器container、行容器row和列容器columns。外层容器的感化只是为页面添加摆布内边距(padding)。

行容器具有一个固定的最大宽度值，避免页面在大显示器中过宽；固然，若是你想打造纯洁的液态结构，也能够在样式表中去掉这个属性。

列容器是最内层的内容容器，在咱们的网格体系中，每行至多可以安排12个列容器。上面的代码中，咱们建立的是典范的“内容+侧边栏”结构，宽度别离为全宽的2/3和1/3。

网格结构可以举行嵌套：

?
123456789101112
<divclass="container"><divclass="row"><divclass="eight columns"><divclass="row"><divclass="four columns"> ... </div><divclass="four columns"> ... </div><divclass="four columns"> ... </div></div></div><divclass="four columns"> ... </div></div></div>

Foundation官网中有一些结构典范可以参考。
快速建立原型
起头脱手。咱们要为一个简略的消息资讯类网站建造首页和文章内页的原型；全部进程包含两部门：利用Foundation快速建立根本原型，和为分歧类型的装备举行挪动化处置。起首来看第一部门。

最佳拿起纸和笔，在建立原型以前将构想勾勒出来。下面是咱们为根本版本的首页(桌面显示器版本)画的草图：

可以看到，首页的大致结构包含页头、重要文章内容图文、侧边的次级内容图文、特点文章图文列表。对这个页面，咱们可以用到一些Foundation自带的结构布局，和一个不错的外部办事。
页面总体结构方面，利用前面先容过的网格体系。全局主导航利用Foundation预设的tab布局。对付每一个图文单位中的图片，咱们利用placehold.it供给的办事。它会依照指定的比例输出可以填满容器的树模内容，包含用来占位的图片，和可以自界说的案牍等。
OK咱们从蜜桃交友页头起头。Foundation框架会包管旧阅读器兼容HTML5，以是咱们在这里可以安心的利用加倍语义化的header标签。由于页头是一个包括多列内容的块级布局，以是咱们还要为它添加class=”row”。代码以下：

?
12345678910111213
<divclass="container"><headerclass="row"> <divclass="two columns"><imgsrc微密圈="http://placehold.it/200x120"/></div><divclass="eight columns"><h1class="centered">The Foundation Times</h1><h5class="centered">December 1, 2011</h5></div><divclass="two columns"><imgsrc="http://placehold.it/200x120"/></div></header>

可以看到，在外部容器container中，咱们将header作为完备的一行，此中安排了三列，宽度方面是1:4:1的瓜葛。在第一列和第三列中，咱们利用了placehold.it供给的占位图片，用来暗示logo等元素。在第二列中，咱们利用h1标签作为网站题目的容器，副题目则利用h5。

接下来是导航。咱们要利用Foundation预设的tab情势；代码布局以下：

?
1234567891011
<divclass="row"><divclass="twelve columns"><dlclass="tabs"><dd><ahref="#"class="active">All News</a></dd><dd><ahref="#">Llamas</a></dd><dd><ahref="#">Alpacas</a></dd><dd><ahref="#">Vicunas</a></dd><dd><ahref="#">Other Dromedaries</a></dd></dl></div></div>

固然在这一行中只有一套导航元素，可是咱们依然必要将导航元素列表dl安排在一个列容器中，而且将这个列容器设置为12列全宽，不然结构将呈现问题。

对付页面其他部门的内容，根基方法是雷同的，咱们将会用到网格体系、一些根基的元素、和Foundation自带的UI组件。下面是页面残剩部门的HTML代码：

?
12345678910111213141516171819202122232425262728293031323334353637383940414243
<divclass="row"><divclass="eight columns"><imgsrc="http://placehold.it/800x340"/><h3><ahref="#">Llamas: Great Pets or the Best Pets?</a></h3><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> <ahref="#"class="small radius nice blue button">Read More →</a></div><divclass="four columns"><divclass="row"><divclass="five columns"><imgsrc="http://placehold.it/120x100"/></div><divclass="seven columns"><h5><ahref="">Alpaca Farm Closed</a></h5><p>Anthony Tadina reports on this tragic closing.<br/><ahref="#">Read More →</a></p></div></div>... [repeat this row twice more]</div></div><divclass="row"><divclass="twelve columns"><hr/></div></div><divclass="row"><divclass="three columns"><imgsrc="http://placehold.it/260x190"/><h5><ahref="#">Feature 1</a></h5><p>Description<br/><ahref="#">Read More →</a></p></div>... [repeat this column 3 more times]</div><footerclass="row"><divclass="seven columns"><p><strong>The Foundation Times</strong><br/>© 2025 no rights reserved.</p></div><divclass="five columns"><p><ahref="#">All News</a> | <ahref="#">Llamas</a> | <ahref="#">Alpacas</a> | <ahref="#">Vicunas</a> | <ahref="#">Other Dromedaries</a></p></div></footer>

咱们可以看到，HTML原型中每一个部门的代码布局实在都是至关根本和简略的。必要注重的是class中带有“button”的元素，这些是Foundation预设的按钮，包含几种分歧的气概样式。咱们可以用如许的方法将a标签或是button类型的input元素界说为气概化按钮，并经由过程“small”、“radius”等class为其设置详细的样式：
small或large – 可选；节制按钮的尺寸；若是不做设置，默许将为中等尺寸。radius – 可选；为按钮增长几像素的圆角结果。该值还可所以round，样式为摆布双侧彻底圆弧。不做设置时，默许样式是矩形。nice – 可选；添加少量高光等细节结果。blue – 可选；设置色彩；该值还可所以red、black、grey，或是在样式表中举行过自界说的任何名称。button – 独一的需要class，用来将元素格局化为按钮。
经由过程如许一些很根基的HTML代码，咱们就已建立好了根本版本的原型；当前的现实结果以下图所示。

若是仅仅必要为桌面装备建造页面原型，那末到这里咱们的使命就已完成为了。不外在本次实例中，咱们还要演示怎么使原型针对分歧类型挪动装备举行相应式的兼容，实现跨平台。
挪动化
用户利用挪动装备拜候网站时，指望会有所分歧。对付面前这个内容类网站，咱们但愿用户在利用挪动装备举行拜候的时辰，可以在首屏直接看到重要内容部门。挪动装备用户在阅读网页时，很讨厌的一点就是，在忍耐了网站页头和全局导航的加载进程以后，依然没法立即看到重要内容。(关于在挪动装备中，网站内容显现方法的计谋，可以参考咱们以前关于相应式网站产物需求及设计流程方面的文章)

在不做任何挪动化处置以前，咱们的原型在小屏幕挪动装备中的显现方法以下图所示：

首屏中，咱们只能看到logo、网站题目等与重要内容、全局导航无关的元素。真心不靠谱。咱们接下来要利用一些Foundation供给的的专门用来处置分歧装备视图的class，让原型中某些元素在小屏幕挪动装备中产生变革。

当前，咱们的根本版页面原型中，header部门的代码是如许的：

?
123456789101112
<headerclass="row"> <divclass="two columns"><imgsrc="http://placehold.it/200x120"/></div><divclass="eight columns"><h1class="centered">The Foundation Times</h1><h5class="centered">December 1, 2011</h5></div><divclass="two columns"><imgsrc="http://placehold.it/200x120"/></div></header>

添加了挪动化的class以后：

?
123456789101112131415161718192021
<headerclass="row hide-on-phones"> <divclass="two columns"><imgsrc="http://placehold.it/200x120"/></div><divclass="eight columns"><h1class="centered">The Foundation Times</h1><h5class="centered">December 1, 2011</h5></div>&樱桃交友lt;divclass="two columns"><imgsrc="http://placehold.it/200x120"/></div></header><headerclass="row show-on-phones"><divclass="twelve columns"><imgsrc="http://placehold.it/480x100"/><h1class="centered">The Foundation Times</h1><h5class="centered">December 1, 2011</h5></div></header>

重点在于两个新的class，一个是hide-on-phones，此外一个是show-on-phones。顾名思义，它们用来节制元素在手机装备上的显示和暗藏。Foundation预设了一些如许的class，用来按照分歧类型的装备，相应式的调解页面元素的显现方法。

如今，当利用手机阅读页面原型时，只有第二个简化的header会显示出来。接下来，咱们为这个挪动版本的header写几行样式：

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

来看看到今朝的功效：

很多多少了。如今的问题是，导航项在小屏幕中显得太多了，结构产生了庞杂。一个常见的解决方案是，敌手机装备，将导航移至页面底部。固然，咱们其实不是要真的挪动它，而是像前面那样设置分歧的显示法则。对付今朝的全局导航，在class中增长一个hide-on-phones：

?
1234567891011
<divclass="row hide-on-phones"><divclass="twelve columns"><dlclass="tabs"><dd><ahref="#"class="active">All News</a></dd><dd><ahref="#">Llamas</a></dd><dd><ahref="#">Alpacas</a></dd><dd><ahref="#">Vicunas</a></dd><dd><ahref="#">Other Dromedaries</a></dd></dl></div></div>

接下来，在页面底部，footer以前，添加一个新的导航；HTML布局与头部的全局导航根基一致：

?
1234567891011
<divclass="row show-on-phones"><divclass="twelve columns"><dlclass="tabs mobile"><dd><ahref="#"class="active">All News</a></dd><dd><ahref="#">Llamas</a></dd><dd><ahref="#">Alpacas</a></dd><dd><ahref="#">Vicunas</a></dd><dd><ahref="#">Other Dromedaries</a></dd></dl></div></div>

区分在于两点：一是在容器的class中利用了show-on-phones，使该导航只在手机中显示；此外，在导航列表的class里增长了一个“mobile”，如许可使每一个导航tab都成为全宽，全部导航将成为一个纵向列表。

如今，咱们的原型在手机中的首屏结果是如许的：

基于网格体系，编写了少许的高语义化HTML代码，共同Foundation原生供给的一些样式东西class，咱们已建立出了可以用来举行跨平台演示和测试的首页原型。
本身尝尝看
黑白直播接下来，你可以依照咱们前面的法子，本身试着为文章内页建立原型。一样，从手绘底稿起头。咱们已帮你完成为了这一步，并添加了一些注释，作为编写原型代码时的小提醒；见下图：

你可如下载这套实例的源文件包，现实看看这些原型相干文件(包含文章内页)的完备代码。
跨平台原型在项目实践中能起到怎么的感化？
正如咱们在本文开首提到的，要使网站在任何类型的装备上都尽可能兼容，最佳的法子就是从设计流程的上游动身，建立跨平台性比力强的原型，确保从一起头便可以对结构布局等方面的设计方案举行实时查验。设计方面的迭代不克不及再仅仅寄托Photoshop了。

近来，咱们在一个为当地某公益组织建立网站的现实项目中，应用如许的方法，举行了24小时冲刺式的设计开辟。在勾勒出网站页面的草图以后，咱们利用Foundation框架，在不到两个小时的时候里，为所有的页面建立了原型。这些原型可以帮忙咱们在多种装备平台中直接测试响应的设计方案，同时，前端职员可以或许基于这些原型的代码布局并行式的开展相干开辟事情，内容团队也能够基于可视化的原型策动案牍；在这时代，咱们也同时举行着视觉设计方面的事情。

有乐趣的话，可以检察关于此次项目标更多细节，包含全数页面的草图、跨平台原型等。

到今朝为止，咱们已在不少客户项目案例中利用了Foundation框架；在咱们本身的一些利用类型网站的设计开辟进程中也有效到，包含axeapp.com，spurapp.com和reelapp.com。

来历：

收藏0 回复显示全部楼层道具举报

返回列表

		自动登录	找回密码
密码			立即注册

Foundation框架 &#8211; 快速创建跨平台的网站页面原型

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