菜单

网页无图再不是指望

2019年2月15日 - Ajax

网页无图再不是梦想

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

原文出处: 百码山庄   

直白以来,网页开发对优化方面做的办事从未停歇。网页无图也是为着削减页面财富请求而提议的一种畅想。无可厚非在网页开发的进度中在网页无图方面大家已经得到了彪炳史册的做到:从一初始零星的小图标财富,到新兴小图标合并成八个图形出现Sprite图,再到后来Webfont的产出不仅可以代替Pepsi-Cola图,而且彻底消除了图标管理难,变色达成麻烦的题材。前几日自身要跟大家介绍四个小工具,也是足以支持已毕网页无图这一终极指标。理论上来讲,它可以将其余一张图纸转换成贰个不带图片,不带背景图的洁净的html标签。不过那有前提:你的微机得有充分的财富去协理。

 Liya – 2015年8月31日

缘起

那是贰个工作日的晚上,我向过去相同按时到来了工作岗位上,运营电脑,打开浏览器我偶尔发现了一篇名曰《20个你大概不倚重是用CSS制作出来的东西》的文章,出于职业敏感,也鉴于好奇作者就点进去看了一看,发现其间有一个很有意思的著述:http://codepen.io/HugoGiraudel/full/gpcwa/,它独自用七个div标签就水到渠成了那幅小说,于是大家多少个同事好奇使然,开头分析它的贯彻,渐渐有了上边即将介绍的工具的黑影。


渐入核心

既然能够动用多少个标签制作出一副卓越的像素图,那么是还是不是就表示可以用五个标签还原任一一张图纸?唯一无法还原的是图形的精细度难题。可是,如若可以精细到每二个像素点,那么高精度的还原整张图也统统可行,只是那肯定消耗极度多的处理器财富。这一考虑便是催生这些小工具的催化剂,于是自身便开始思索起来。

当女神潘潘导师问小编是或不是精通网页设计中的栅格系统,为何要动用栅格系统时,脑中能想到的惟有,“听从栅格使网页看起来整齐规范”,“方便重构”,“有利于响应式布局”。。。其实对栅格系统只是坎井之蛙,并从未系统深远的明白,于是做了些功课,整理出那篇小说,希望能给新接触网页设计的同伴们一点参考。

案例剖析

由此接纳开发者工具分析以上案例的源码,作者发觉其实它的完毕并不难。我们精晓在CSS3中新增了三个设置盒子阴影的box-shadow属性,而这一个性子可以同时设置任意多个不相同颜色和扩散度的阴影块,而案例正是完美的注释了这些新属性。

既是,那么我们以往来做个试验,大家在任一一张图上覆盖上三个个尺寸相同的小方格子,大家就足以将其余一张图纸分隔成三个个的小方格,我们假设精晓这么些小方格的深浅、顺序和义务,大家就足以组成那张图片,如下相比图所示:

图片 1

不过,有个难点:box-shadow的引用颜色是单色的,而种种盒子范围内的绘画是复杂的,我们什么样去处理这么些难点?

因为box-shadow只好设置颜色,所以这么些题材的结果唯有贰个,找出3个能代表那么些格子的颜色,那么采纳哪1个颜色值就一视同仁了,可以选格子四角的轻易3个、可选宗旨点,可选格子内的私下壹个点,我选取的是格子的左上角这么些点。我们简单窥见,假如我们尽量的收缩格子,小到只剩下1个像素大小,大家就足以全体的复原一张图片了。

栅格系统的多变

栅格系统(Grid
system)最早采取在17世纪末的法兰西印刷业,出版业。维基百科对其定义为:栅格设计系统(又称网格设计系统、标准尺寸系统、程序版面设计、瑞士联邦平面设计风格、国际主义平面设计风格),是一种平面设计的办法与作风。网页栅格系统是有平面栅格系统中前行而来,以规则的网格阵列来指点和业内网页中的版面布局以及新闻分布。

技术达成

率先,大家考虑怎么依照图片去取到各种格子的颜色值?这些题材并简单,HTML5为大家提供了Canvas标签,而通过Canvas大家可以运用getImageData方法拿到到画布中任一一个点的水彩音信以及光滑度音讯。

下一场,大家来考虑怎么样设计大家的小工具。第叁步,依照不一致的图样大概会适合差其余格子大小,所以小编会保留三个size选项用于安装盒子的轻重;第叁步,格子与格子之间是不是保留间隙,或许基于用户习惯会有不一样,所以小编提供space选项来安装间隙大小;第3、步,格子实际就是二个盒子的内部1个黑影,而阴影的形象是可以依据盒子本身爆发变化的,所以作者提供radius属性来配置格子圆角大小;最后,既然大家赢得的将是一个html标签,那么标签是可以分包各样品质的(比如:id、class等),所以本身提供二个attrs属性(2个json对象),来设置生成的html元素的性质。好了,万事俱备,只欠代码落成了!

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

图片 2

为了便于大家看来更实在的效应,那里给大家提供在线DEMO

栅格系统的规律

栅格系统可以按栅格数分为12列,16列,24列等,可以无限制设计栅格宽度和栅格与栅格间宽度。如下图所示,记页面或区块宽度为W,A代表2个栅格单元的宽窄,a代表3个栅格的宽窄,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。只要保障3个横向维度的逐条区块的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似乎此出现了。956只是个记号,并不是标准数。

地点列举的都以重型门户网站,它们的首页宽度为950px/960px。除了微软的Live
Search。依照地点的回顾解析可以认为:当搭建页面结构复杂的门户型网站时,开发工程师们不约而同地都采取将页面宽度定为950px/960px。为啥要采用这些幅度呢?大家从数学起头:960足以表明为2的七次方乘以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。

应用栅格系统的优势

对于设计师来说,栅格系统更多的是一种布局考虑,可以更有逻辑地展开设计工作。灵活地拔取栅格系统,不仅能够让总体网站相继页面的布局保持一致,让网页的新闻显示更为美妙易读,让规划稿有更好的协会,更可以因而匹配不一致组合,做出过多可以和新鲜的排版设计。使用网格系统,可以使网页设计给用户正式感和规范感,还装有一种结构明显的设计感,进步用户体验。网格系统不意味规行矩步,一味根据网格线来展开布局。网格系统的意思在于更灵敏的拉扯设计师有序布局,而不是限制设计师的筹划。

对从前端开发人员来说,栅格系统的运用,给整个网站的页面结构定义了3个正经,大大进步了网页的规范性。在栅格系统下,页面中装有组件的尺码都以有规律的可采纳的,那对于大型网站的支出和护卫的话,能省掉不少花费。

乘胜响应式设计的流行,栅格系统初阶被给予新的意义,那就是,一种响应式设计的贯彻格局。响应式的要点是为同多个页面设计三种搭架子形态,分别适配不同显示器尺寸的配备。

能够见见,三个页面可以拆分成多少个区块来了然,而正是那么些区块共同组成了这些页面的布局。依照不一样的显示器尺寸情况,调整这个区块的排版,就足以兑现响应式设计。而借助栅格系统,设计与前端开发人士可以很简单的宏图和成立响应式的页面布局。

栅格系统是一种格式化的宏图工具,使用栅格系统是一种好的习惯,设计师能够更小心于内容呈递,更小心于强调根本。当然,规矩是用来打破的,当大家明白了布局的意见,领悟了栅格的伎俩之后,也无需拘泥于栅格的方式,可以对其“革命”,举行更新。

财富干货

对此新手来说,使用栅格系统有一定的本钱,需求数学基础,懂比例,会盘算,但方今网络上已经有众多拉扯设计栅格系统的工具和模版,可以即拿即用。那里介绍多少个常用工具。

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地图