2022-06-09 分类: 网站建设
整个一周都在揪心的猫事中度过。从十月底到现在的这段日子里,倒是越发懂得珍惜每天中片刻的宁静时光。有时会怀疑家里是否有时空漩涡一类的东西,不然钟表怎么会走的那么快,一点儿也不愿停下等等我的样子。一切都会好起来。
独白终了,进入正题。最近两篇译文都有涉及框架和跨平台方面的话题:前一篇中,我们了解了一些用于移动应用开发的前端框架工具;今天这篇的立足点偏向设计开发流程的上游,它将向我们展示怎样使用Foundation框架快速创建跨平台的、可以在多种设备上进行测试的响应式页面原型。下面开始正文部分。
开门见山的说,作为网页设计和开发人员,我们面临着以下几个严峻的问题:
真心欢乐。别怕,大家一起面对并解决问题。其实,不同类型的设备及屏幕的这个问题,很早以前就开始存在了,只是多年来我们一直忽视这个状况,一厢情愿的守着960像素的网格系统。
如今,我们需要从设计流程的上游改变长久以来的习惯,比如尝试快速创建可以在不同设备上进行测试的原型,而不只是针对台式机浏览器或笔记本。这就是我们(英文原文作者的团队)开发Foundation框架的原因。
Foundation是一款开源的前端框架,我们可以使用它快速创建页面原型。相比于其他同类型工具,Foundation的移动化方案更加出色;借鉴响应式Web设计的思路和方法,Foundation对内容结构在不同类型设备中的的呈现方式进行了相应的预设。(关于响应式Web设计,可以参考我们之前的几篇文章,包括响应式设计的概念、组成要素及基本实现思路,怎样通过CSS3 Media Query实现响应式Web设计,以及相关的产品需求和设计流程案例学习)
接下来,我们将通过一个完整的实例,来演示怎样使用Foundation快速创建跨平台的页面原型。走着!
首先到foundation.zurb.com下载代码包;果断点击大蓝按钮即可。代码包中包含以下文件及结构:
JS方面的东西基本不在本文讨论范围,我们继续来看看stylesheets路径中的文件:
分别在浏览器和代码编辑器中打开index.html文件。在浏览器中,我们可以看到该页面包含了一些用于构筑原型的基础布局结构及UI元素。
接下来,我们将从网格系统、快速创建原型、移动化这三个方面依次进行实例讲解。
首先来简单看看global.css中的网格系统。如果你熟悉960网格系统或是Blueprint CSS框架,那么对Foundation的网格结构也应该不会陌生。下面是一段典型的结构代码:
?
1 2 3 4 5 6 |
|
该结构由三部分组成:外层容器container、行容器row和列容器columns。外层容器的作用只是为页面添加左右内边距(padding)。
行容器拥有一个固定的大宽度值,防止页面在大显示器中过宽;当然,如果你想打造纯粹的液态布局,也可以在样式表中去掉这个属性。
列容器是最内层的内容容器,在我们的网格系统中,每行最多可以放置12个列容器。上面的代码中,我们创建的是典型的“内容+侧边栏”布局,宽度分别为全宽的2/3和1/3。
网格布局可以进行嵌套:
?
1 2 3 4 5 6 7 8 9 10 11 12 |
|
Foundation官网中有一些布局范例可以参考。
开始动手。我们要为一个简单的新闻资讯类网站制作首页和文章内页的原型;整个过程包括两部分:使用Foundation快速创建基础原型,以及为不同类型的设备进行移动化处理。首先来看第一部分。
最好拿起纸和笔,在创建原型之前将构思勾画出来。下面是我们为基础版本的首页(桌面显示器版本)画的草图:
可以看到,首页的大致布局包括页头、主要文章内容图文、侧边的次级内容图文、特色文章图文列表。对这个页面,我们可以用到一些Foundation自带的布局结构,以及一个不错的外部服务。
OK我们从页头开始。Foundation框架会保证旧浏览器兼容HTML5,所以我们在这里可以放心的使用更加语义化的header标签。因为页头是一个包含多列内容的块级结构,所以我们还要为它添加class=”row”。代码如下:
?
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
可以看到,在外部容器container中,我们将header作为完整的一行,其中放置了三列,宽度方面是1:4:1的关系。在第一列和第三列中,我们使用了placehold.it提供的占位图片,用来表示logo等元素。在第二列中,我们使用h1标签作为网站标题的容器,副标题则使用h5。
接下来是导航。我们要使用Foundation预设的tab形式;代码结构如下:
?
1 2 3 4 5 6 7 8 9 10 11 |
|
虽然在这一行中只有一套导航元素,但是我们仍然需要将导航元素列表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 |
|
我们可以看到,HTML原型中每个部分的代码结构其实都是相当基础和简单的。需要注意的是class中带有“button”的元素,这些是Foundation预设的按钮,包括几种不同的风格样式。我们可以用这样的方式将a标签或是button类型的input元素定义为风格化按钮,并通过“small”、“radius”等class为其设置具体的样式:
通过这样一些很基本的HTML代码,我们就已经创建好了基础版本的原型;当前的实际效果如下图所示。
如果仅仅需要为桌面设备制作页面原型,那么到这里我们的任务就已经完成了。不过在本次实例中,我们还要演示怎样使原型针对不同类型移动设备进行响应式的兼容,实现跨平台。
用户使用移动设备访问网站时,期望会有所不同。对于眼前这个内容类网站,我们希望用户在使用移动设备进行访问的时候,可以在首屏直接看到主要内容部分。移动设备用户在浏览网页时,很厌恶的一点就是,在忍受了网站页头和全局导航的加载过程之后,仍然无法立刻看到主要内容。(关于在移动设备中,网站内容呈现方式的策略,可以参考我们之前关于响应式网站产品需求及设计流程方面的文章)
在不做任何移动化处理之前,我们的原型在小屏幕移动设备中的呈现方式如下图所示:
首屏中,我们只能看到logo、网站标题等与主要内容、全局导航无关的元素。真心不靠谱。我们接下来要使用一些Foundation提供的的专门用来处理不同设备视图的class,让原型中某些元素在小屏幕移动设备中发生变化。
当前,我们的基础版页面原型中,header部分的代码是这样的:
?
1 2 3 4 5 6 7 8 9 10 11 12 |
|
添加了移动化的class之后:
?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
|
重点在于两个新的class,一个是hide-on-phones,另外一个是show-on-phones。顾名思义,它们用来控制元素在手机设备上的显示和隐藏。Foundation预设了一些这样的class,用来根据不同类型的设备,响应式的调整页面元素的呈现方式。
现在,当使用手机浏览页面原型时,只有第二个简化的header会显示出来。接下来,我们为这个移动版本的header写几行样式:
?
1 2 3 4 5 |
|
来看看到目前的成果:
好多了。现在的问题是,导航项在小屏幕中显得太多了,布局发生了错乱。一个常见的解决方案是,对手机设备,将导航移至页面底部。当然,我们并不是要真的移动它,而是像前面那样设置不同的显示规则。对于目前的全局导航,在class中增加一个hide-on-phones:
?
新闻名称:快速创建跨平台的网站页面原型
成都网站建设公司_创新互联,为您提供移动网站建设、小程序开发、虚拟主机、定制网站、搜索引擎优化、营销型网站建设
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源:
创新互联
<
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
><
网页地址:/news30/165430.html
猜你还喜欢下面的内容