快速创建跨平台的网站页面原型-建站知识-纵天科技

快速创建跨平台的网站页面原型

2015-12-11

1729

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

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

独白终了，进入正题。最近两篇译文都有涉及框架和跨平台方面的话题：前一篇中，我们了解了一些用于移动应用开发的前端框架工具；今天这篇的立足点偏向设计开发流程的上游，它将向我们展示怎样使用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的网格结构也应该不会陌生。下面是一段典型的结构代码：

1
2
3
4
5
6

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

网格布局可以进行嵌套：

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

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

快速创建原型

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

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

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

页面整体布局方面，使用前面介绍过的网格系统。
全局主导航使用Foundation预设的tab结构。
对于每个图文单元中的图片，我们使用placehold.it提供的服务。它会按照指定的比例输出可以填满容器的示范内容，包括用来占位的图片，以及可以自定义的文案等。

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

1
2
3
4
5
6
7
8
9
10
11
12
13

<div class="container">
<header class="row">
<div class="two columns">
<img src="http://placehold.it/200x120" />
</div>
<div class="eight columns">
<h1 class="centered">The Foundation Times</h1>
<h5 class="centered">December 1, 2011</h5>
</div>
<div class="two columns">
<img src="http://placehold.it/200x120" />
</div>
</header>

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

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

1
2
3
4
5
6
7
8
9
10
11

<div class="row">
<div class="twelve columns">
<dl class="tabs">
<dd><a href="#" class="active">All News</a></dd>
<dd><a href="#">Llamas</a></dd>
<dd><a href="#">Alpacas</a></dd>
<dd><a href="#">Vicunas</a></dd>
<dd><a href="#">Other Dromedaries</a></dd>
</dl>
</div>
</div>

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

<div class="row">
<div class="eight columns">
<img src="http://placehold.it/800x340" />
<h3><a href="#">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> <a href="#"class="small radius nice blue button">Read More →</a>
</div>
<div class="four columns">
<div class="row">
<div class="five columns">
<img src="http://placehold.it/120x100" />
</div>
<div class="seven columns">
<h5><a href="">Alpaca Farm Closed</a></h5>
<p>Anthony Tadina reports on this tragic closing.<br /><a href="#">Read More →</a></p>
</div>
</div>
... [repeat this row twice more]
</div>
</div>

<div class="row">
<div class="twelve columns">
<hr />
</div>
</div>

<div class="row">
<div class="three columns">
<img src="http://placehold.it/260x190" />
<h5><a href="#">Feature 1</a></h5>
<p>Description<br /><a href="#">Read More →</a></p>
</div>
... [repeat this column 3 more times]
</div>

<footer class="row">
<div class="seven columns">
<p><strong>The Foundation Times</strong><br />© 2025 no rights reserved.</p>
</div>
<div class="five columns">
<p><a href="#">All News</a> | <a href="#">Llamas</a> | <a href="#">Alpacas</a> | <ahref="#">Vicunas</a> | <a href="#">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部分的代码是这样的：

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

<header class="row">
<div class="two columns">
<img src="http://placehold.it/200x120" />
</div>
<div class="eight columns">
<h1 class="centered">The Foundation Times</h1>
<h5 class="centered">December 1, 2011</h5>
</div>
<div class="two columns">
<img src="http://placehold.it/200x120" />
</div>
</header>

添加了移动化的class之后：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<header class="row hide-on-phones">
<div class="two columns">
<img src="http://placehold.it/200x120" />
</div>
<div class="eight columns">
<h1 class="centered">The Foundation Times</h1>
<h5 class="centered">December 1, 2011</h5>
</div>
<div class="two columns">
<img src="http://placehold.it/200x120" />
</div>
</header>

<header class="row show-on-phones">
<div class="twelve columns">
<img src="http://placehold.it/480x100" />

<h1 class="centered">The Foundation Times</h1>
<h5 class="centered">December 1, 2011</h5>
</div>
</header>

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

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

1
2
3
4
5

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: 1px solid #ddd; }

来看看到目前的成果：

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

1
2
3
4
5
6
7
8
9
10
11

<div class="row hide-on-phones">
<div class="twelve columns">
<dl class="tabs">
<dd><a href="#" class="active">All News</a></dd>
<dd><a href="#">Llamas</a></dd>
<dd><a href="#">Alpacas</a></dd>
<dd><a href="#">Vicunas</a></dd>


            
            	
                	上一篇：前方高能反应!设计师最常见的五个设计误区
                    下一篇：涨姿势时间！你应该了解的“移动端兼容性”
                
                
                	

                
                
            
        
        
        	推荐阅读
            
            	            	
                	
                    	
                        	
                            
                            	15个以上最佳网页设计社区和讨论空间
                                网络几乎是每个职业的重要组成部分，尤其是网页设计。成为与你的行业相关的社区的一员可以带来很多好处。
                            
                            
                        
                    

                    	
                        	
                            
                            	什么是Lookbook？(+ 10个惊人的例子)
                                无论你是一个想展示作品的设计师，还是一个想为客户设计作品的设计师，lookbook都是在一个设计中展示各种元...
                            
                            
                        
                    

                    	
                        	
                            
                            	面向初学者的15+最佳Adobe InDesign教程2021
                                无论您是开始第一个宣传册设计项目，还是寻找一种制作独特宣传画的方法，Adobe InDesign都是您可以用于各种...
                            
                            
                        
                    

                    	
                        	
                            
                            	35+最佳Figma模板、用户界面套件+线框套件
                                Figma正在慢慢成为当今最受欢迎的用户界面设计应用之一。由于能够完全在线使用该工具，它也是一个易于访问...
                            
                            
                        
                    

                    	
                        	
                            
                            	网页设计中的全屏视频背景:优点、缺点和技巧
                                关于网站中视频背景是好是坏，网页设计界仍有争论。
                            
                            
                        
                    

                    	
                        	
                            
                            	20种时尚的幻灯片配色方案
                                颜色是决定设计成败的一个因素，这个规则同样适用于展示设计。选择正确的PowerPoint配色方案非常重要。
                            
                            
                        
                    
                
            
        
        
        	
        
        
    
    
    	
        	最新签约
            
            	
                	纵天 | 助力京信通讯，京信智能官网改版升级
纵天 | 奥动新能源官网上线啦，助力新能源行业网站实现升级
纵天科技签约星艺装饰，助力星艺装饰官网全面升级
2022年春节放假通知
纵天科技二次合作宝裕集团官网升级
纵天科技签约济民(香港)医药有限公司，助力济民(香港)医药官网搭建
纵天科技签约奥动新能源官网，助力奥动新能源官网全面升级
纵天科技成功携手壳牌中国官网改版升级,助力品牌数字化升级
                
            
        
        
        	行业动态
            
            	
                	虎牙斗鱼财报之争
腾讯音乐压不住抖音神曲
巨头们的短视频梦，做到哪了？
小米荣耀，对决高端
暂缓上市，网易云音乐为何不被看好？
刷屏的小米和雷军，选择了什么人力资源战略？
腾讯小米IDG开始盯上美容仪的千亿生意
刷脸支付背后的技术公司：三年亏了14亿，奥比中光的风光与隐忧
                
            
        
        
        	热门标签
            
            	
                房地产网站建设汇景网站建设汇景网站开发汇景控股新能源网站开发新能源网站制作网站改版生物网站建设珠海方正官网建设方正官网建设日本YKK官网建设骏丰频谱官网建设高新兴官网建设百利官网建设广芯微官网建设物联网网站建设芯片网站建设网站开发广州做网站柏洪集团网站新元素网站教育网站建设德国商会网站建设智能家居网站设计运动网站建设玩具网站建设化工网站建设家电网站建设珠宝网站建设钟表网站建设教育网站建设方案建材网站建设装饰网站建设机械网站建设美妆网站建设展览网站建设五金网站建设仪器网站建设照明网站建设水电网站建设家具网站建设家居网站建设服务网站建设餐饮网站建设环保网站建设地产网站建设医药网站建设数码网站建设营销型网站策划广州网站制作广州网站建设公司建网站广州网站设计公司建站优必思官网英文版网站建设定制网站广州网站建设制作公司服装网站制作防火板网站建设大数据网站建设科技网站制作物联网网站开发人工智能网站设计防火板网站制作枕头网站设计电器网站制作电器网站建设家具网站设计家居网站设计网站策划官网改版企业网站建设网站制作网站设计建站公司网站建设公司企业网站网站建设企业建站官网建设广州建站广州网站建设纵天科技            
            点击展开
        
        
        
        	最新文章
            
            	
                	做网站那个公司好
做网站哪个好
做网站好的公司有哪些
做网站哪个平台好
做网站的公司哪里的比较好
珠海做网站哪家公司好
珠海做网站哪家好
珠海做网站公司哪家好
珠海做网站公司哪家好
珠海制作网站哪里好
                
            
        
    
    


	
    
        
        	
            
            	网站建设全网营销平面设计微信开发精品案例关于我们联系我们
            
            
        
        
      
    
    	
        	关于纵天
            
            广州市纵天信息科技有限公司成立于2008年，是中国领先的整合式互联网应用服务商。12年专业历程，坚持以科技创新为先导的网络服务，服务超过8000+知名品牌与创新客户，涉及网站设计、APP应用开发、微信开发、平面设计、视频拍摄、互联网整合营销等多个领域。
        
        
        	微信咨询
            
            
        
        
        	联系方式
            
            
            	
	地址1：广州市天河区珠江新城邦华环球广场16F


	地址2：杭州市滨江区滨安路1190号智汇中心B308


	业务 QQ:  3561401262


	E-mail：  sales@zomsky.com

            
        
        
    
    
      
      	        
        	标签展开

        	广州网站建设广州网站制作广州网站设计广州网站开发广州网站定制广州网站公司广州网页开发广州设计网页广州制作网站广州网页制作广州建站公司广州建设网站广州设计网站广州开发网站广州网站搭建广州做网页公司网站建设官方网站制作广州专业建站广州建网站建公司网站公司官网制作广州制作网页
        
        
        	地区分站展开

        	深圳网站建设佛山网站建设珠海网站建设中山网站建设上海网站建设北京网站建设杭州网站建设潮州网站建设东莞网站建设阳江网站建设河源网站建设河源网站建设梅州网站建设惠州网站建设江门网站建设肇庆网站建设湛江网站建设韶关网站建设汕头网站建设宁波网站建设绍兴网站建设嘉兴网站建设武汉网站建设南京网站建设合肥网站建设济南网站建设重庆网站建设成都网站建设义乌网站建设天津网站建设苏州网站建设青岛网站建设郑州网站建设长沙网站建设南通网站建设西安网站建设烟台网站建设大连网站建设沈阳网站建设长春网站建设扬州网站建设哈尔滨网站建设昆明网站建设无锡网站建设南昌网站建设厦门网站建设海口网站建设洛阳网站建设商丘网站建设丽江网站建设广州天河网站建设南宁网站建设广州白云网站建设广州海珠网站建设广州番禺网站建设广州越秀网站建设广州荔湾网站建设广州黄埔网站建设广州花都网站建设广州南沙网站建设广州从化网站建设广州增城网站建设茂名网站建设汕尾网站建设清远网站建设揭阳网站建设云浮网站建设柳州网站建设桂林网站建设梧州网站建设北海网站建设钦州网站建设贵港网站建设玉林网站建设百色网站建设贺州网站建设河池网站建设来宾网站建设崇左网站建设
        
      
    
    
      
        关于我们 | 联系我们 | 网站地图
        © 2017 广州市纵天信息科技有限公司 粤ICP备15092841号  
        
      
    
    





	获
取
方
案
    
    	
        	
            咨询
        
        
        	
            电话
        
        
        	
            微信
            
        
        
        	
            TOP
        
    




	
    
        立即与纵天项目顾问通话
        400-611-9921
        您也可以咨询我们的在线客服或预约资深顾问
        
        预约顾问

        信息保护中，请放心填写
        
    
    
        
        
            在线咨询
        
    
    关闭
    









	
    	免费获取方案