菜单

再叙网页栅格

2019年2月12日 - XML

网页无图再不是希望

2015/08/22 · HTML5 · 1
评论
·
网页开发

原稿出处: 百码山庄   

直接以来,网页开发对优化方面做的行事没有休止。网页无图也是为了缩小页面资源请求而指出的一种畅想。无可厚非在网页开发的进度中在网页无图方面大家曾经拿到了不朽的到位:从一起始零星的小图标资源,到新兴小图标合并成一个图纸出现7-Up图,再到新兴Webfont的产出不仅可以取代七喜图,而且彻底解决了图标管理难,变色达成麻烦的题材。今扶桑人要跟大家介绍一个小工具,也是可以协助完结网页无图这一终极目的。理论上来讲,它能够将其余一张图纸转换成一个不带图片,不带背景图的卫生的html标签。但是那有前提:你的微处理器得有充足的资源去支撑。

 Liya – 2015年8月31日

缘起

那是一个工作日的清早,我向过去一致如约而来了工作岗位上,启动电脑,打开浏览器我有时候发现了一篇名曰《18个你或许不依赖是用CSS制作出来的东西》的文章,出于工作敏感,也出于好奇我就点进去看了一看,发现内部有一个很有趣的文章:http://codepen.io/HugoGiraudel/full/gpcwa/,它然则用一个div标签就完了了那幅小说,于是大家多少个同事好奇使然,起先分析它的已毕,逐渐有了下边即将介绍的工具的影子。


渐入大旨

既然可以动用一个标签制作出一副特出的像素图,那么是或不是就表示可以用一个标签还原任一一张图纸?唯一不或然回复的是图形的精细度难题。但是,若是可以精细到各个像素点,那么高精度的还原整张图也统统可行,只是那肯定消耗非常多的计算机资源。这一考虑便是催生这几个小工具的催化剂,于是本身便先河考虑起来。

当女神潘潘导师问我是或不是明白网页设计中的栅格系统,为啥要动用栅格系统时,脑中能想到的唯有,“听从栅格使网页看起来整齐规范”,“方便重构”,“有利于响应式布局”。。。其实对栅格系统只是一知半解,并从未系统深远的知道,于是做了些功课,整理出那篇作品,希望能给新接触网页设计的同伙们一点参考。

案例解析

由此接纳开发者工具分析以上案例的源码,我发觉其实它的兑现并不难。大家通晓在CSS3中新增了一个设置盒子阴影的box-shadow属性,而以此性格可以同时设置任意多个不等颜色和扩散度的阴影块,而案例正是完美的诠释了那几个新属性。

既是,那么大家今天来做个试验,我们在任一一张图上覆盖上一个个大大小小相同的小方格子,大家就足以将此外一张图纸分隔成一个个的小方格,大家要是通晓这么些小方格的轻重、顺序和任务,大家就足以整合那张图片,如下比较图所示:

图片 1

但是,有个难题:box-shadow的引用颜色是单色的,而各种盒子范围内的美术是错综复杂的,咱们什么样去处理这几个难题?

因为box-shadow只好设置颜色,所以那一个题材的结果唯有一个,找出一个能代表这几个格子的水彩,那么采用哪一个颜色值就一视同仁了,可以选格子四角的任性一个、可选宗旨点,可选格子内的自由一个点,我接纳的是格子的左上角这些点。我们简单察觉,假如我们尽量的压缩格子,小到只剩下一个像素大小,大家就可以全部的复原一张图纸了。

栅格系统的朝四暮三

栅格系统(Grid
system)最早选拔在17世纪末的法兰西共和国印刷业,出版业。维基百科对其定义为:栅格设计系统(又称网格设计系统、标准尺寸系统、程序版面设计、瑞士平面设计风格、国际主义平面设计风格),是一种平面设计的方法与风格。网页栅格系统是有平面栅格系统中迈入而来,以规则的网格阵列来指引和正规网页中的版面布局以及音讯分布。

技能完结

率先,我们着想什么依据图片去取到各类格子的颜色值?那个题材并简单,HTML5为大家提供了Canvas标签,而通过Canvas我们得以行使getImageData方法拿到到画布中任一一个点的颜料音信以及透明度音讯。

下一场,我们来设想怎么着安插大家的小工具。第一步,根据差其他图片或然会晤乎区其他格子大小,所以我会保留一个size选项用于安装盒子的高低;第二步,格子与格子之间是不是保留间隙,只怕基于用户习惯会有两样,所以本人提供space选项来设置间隙大小;第三步,格子实际就是一个盒子的其中一个投影,而阴影的形态是足以按照盒子本人发生变化的,所以本人提供radius属性来布置格子圆角大小;最后,既然大家获取的将是一个html标签,那么标签是足以涵盖各类品质的(比如:id、class等),所以本身提供一个attrs属性(一个json对象),来设置生成的html元素的习性。好了,万事俱备,只欠代码落成了!

最终,大家梳理逻辑,封装代码,已毕了最基础的本子。效果如下演示:

图片 2

为了有利于大家看看更实在的效益,那里给我们提供在线DEMO

栅格系统的原理

栅格系统可以按栅格数分为12列,16列,24列等,可以随意设计栅格宽度和栅格与栅格间宽度。如下图所示,记页面或区块宽度为W,A代表一个栅格单元的小幅,a代表一个栅格的小幅,i为栅格与栅格之间的相距,n为正整数,则有W=(a*n)+(n-1)*i,由于A=a+i,可得(A*n)-i=W。

                                 (A*n)-i = W

这几个公式表述了网页的布局与网页背后栅格系统里面的关系。来考察经典的雅虎案例:

Yahoo的网站页面宽度为W=950px,每一种区块与区块的间隔为i=10px;假诺运用方面的公式,可以推出A=40px,既Yahoo首页横向版式设计使用的栅格系统为:(40×n)-
10 =
W。只要保障一个横向维度的次第区块的n值相加等于24,即可保障页面的增加率一定是950px,950px的小幅也刚刚就是当n=24的时候,W的宽度值。

在栅格系统中,设计师依照需求指定差距的版式大概私分区块改变A和i的值举行设计,那样,一个栅格系统的拔取就今后开头了。

基于12列的栅格划分

总结

从效率上来看,我完结了图片到html成分的转移,不过或许并非是最好的网页无图落成方案,因为工具转换出的HTML标签,设置了太多的阴影块,对浏览器的渲染并不团结,会对用户电脑硬件有一定的需求,特别是块大小为1(即全体还原图片)的时候,转换进程格外缓慢,如若图片再大些,极有可能导致用户浏览器崩溃,因而指出大家测试时慎用大图做测试。而且,转换后拿到的html标签和体裁字符串大小将有大概远远超越图片自身的深浅,所以自身只可以说那是一种有效的技艺方案,但未必是好的已毕方案。(然并卵)

1 赞 4 收藏 1
评论

图片 3

经典960栅格

设计师们偏爱用苹果系统做布置,苹果下浏览器的暗中同意宽度为960px, 在 1024 x
768 的分辨率下,大家再打开Firefox,自然状态下,Firefox窗体的分寸约为 974
x 650. 减掉左右两边7px的边框,网页的实在尺寸为上图中的金色部分,高宽为
960 x 650.有趣的960就那样出现了。960只是个标志,并不是标准数。

下面列举的都以重型门户网站,它们的首页宽度为950px/960px。除了微软的Live
Search。依据上边的简要分析可以认为:当搭建页面结构复杂的门户型网站时,开发工程师们不约而同地都选用将页面宽度定为950px/960px。为啥要挑选那个涨幅呢?我们从数学开始:960可以分解为2的6次方乘以3和5,
这使得960足以分开成以下宽度的平头倍:

2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80,
96, 120, 160, 192, 240, 320, 480

共26种(26 = 7 * 2 * 2 – 2, 减去2是去掉1和960自家),咱们标记为:

N(960) = N(2^6 * 3 * 5) = 26

基于上边的算法,可以得到:

N(360) = N(2^3 \ 3^2 * 5) = 22*

N(480) = N(2^5 \ 3 * 5) = 22*

N(720) = N(2^4 \ 3^2 * 5) = 28*

N(750) = N(2 \ 3 * 5^3) = 14*

N(800) = N(2^5 \ 5^2) = 16*

N(960) = N(2^6 \ 3 * 5) = 26*

N(1000) = N(2^3 \ 5^3) = 14*

N(1024) = N(2^10) = 9

N(1440) = N(2^6 \ 3^2 * 5) = 34*

N(1920) = N(2^7 \ 3 * 5) = 30*

N越大,可组成的肥瘦值就愈来愈多。对栅格系统的话,那意味着越灵活。

脚下大多数屏幕都协理 1024 x 768
及其以上分辨率。为了实用的运用显示器宽度同时保证栅格的灵活度,可以看出960是越发适用的。那样,在现阶段主流显示屏下,960就成为网页栅格系统中的最佳宽度了,可能不久的未来,将会大行其道1440。

动用栅格系统的优势

对此设计师来说,栅格系统越来越多的是一种布局考虑,可以更有逻辑地展开统筹工作。灵活地运用栅格系统,不仅可以让总体网站相继页面的布局保持一致,让网页的音信展现更为雅观易读,让规划稿有更好的构造,更可以经过匹配不一致组合,做出过多精美和特其他排版设计。使用网格系统,可以使网页设计给用户正式感和规范感,还持有一种结构分明的设计感,升高用户体验。网格系统不代表循序渐进,一味依照网格线来举行布局。网格系统的意义在于更灵活的提携设计师有序布局,而不是限量设计师的统筹。

对于前端开发人士的话,栅格系统的使用,给所有网站的页面结构定义了一个标准,大大进步了网页的规范性。在栅格系统下,页面中负有组件的尺寸都以有规律的可选用的,那对于大型网站的支出和掩护来说,能省掉不少资金。

趁着响应式设计的风靡,栅格系统初始被给予新的含义,这就是,一种响应式设计的兑现形式。响应式的主题是为同一个页面设计三种搭架子形态,分别适配不相同屏幕尺寸的设备。

可以看到,一个页面可以拆分成三个区块来通晓,而正是那些区块共同整合了这么些页面的布局。依据差别的显示器尺寸意况,调整这几个区块的排版,就可以落成响应式设计。而借助于栅格系统,设计与前端开发人士可以很简单的规划和创造响应式的页面布局。

栅格系统是一种格式化的规划工具,使用栅格系统是一种好的习惯,设计师能够更在意于情节呈递,更小心于强调首要。当然,规矩是用来打破的,当大家知晓了布局的见解,明白了栅格的手段之后,也无需拘泥于栅格的样式,可以对其“革命”,举办革新。

资源干货

对此新手来说,使用栅格系统有必然的老本,需求数学基础,懂比例,会统计,但未来互联网上曾经有那多少个相助设计栅格系统的工具和模版,能够即拿即用。那里介绍多少个常用工具。

960.GS

应用960.GS相应是最简便易行的栅格方法,下载960栅格系统,地址http://960.gs/联合图层,置入网页文件,拔取混合情势叠加,并锁定,便可以依据其栅格设计网页。

GuideGuide

那些是免费的好用PS外挂,输入数值就会自动画参考线。在设计网页前先将参考线全体拉出去。至于什么设置和操作格局,网络上业已重重人写了,能够参照那里:PS
参考线插件GUIDEGUIDE下载及应用表达

WebZap

另一款PS外挂神器,然而要付钱,拥有无敌的布局发生器,可只通过点击操作,在几分钟内做出网页原型。下载和演示地址:http://webzap.uiparade.com/

参考文章

网站网页栅格化

Grid的运用:ps外挂

网页的栅格系统规划

网页设计中的960栅格系统

Maintainable responsive
layouts

Using the 960 Grid System as a Design
Framework

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图