>

梦想与成真与再梦想,网页无图再不是梦想

- 编辑:澳门新葡亰平台游戏 -

梦想与成真与再梦想,网页无图再不是梦想

案例分析

通过使用开发者工具分析以上案例的源码,我发现其实它的实现并不难。我们知道在CSS3中新增了一个设置盒子阴影的box-shadow属性,而这个属性可以同时设置任意多个不同颜色和扩散度的阴影块,而案例正是完美的诠释了这个新属性。

既然如此,那么我们现在来做个试验,我们在任一一张图上覆盖上一个个大小相同的小方格子,我们就可以将任何一张图片分隔成一个个的小方格,我们只要知道这些小方格的大小、顺序和位置,我们就可以重组这张图片,如下对比图所示:

图片 1

但是,有个问题:box-shadow的引用颜色是单色的,而每个盒子范围内的图案是复杂的,我们如何去处理这个问题?

因为box-shadow只能设置颜色,所以这个问题的结果只有一个,找出一个能代表这个格子的颜色,那么选取哪一个颜色值就因人而异了,可以选格子四角的任意一个、可选中心点,可选格子内的任意一个点,我选择的是格子的左上角这个点。我们不难发现,如果我们尽可能的缩小格子,小到只剩下一个像素大小,我们就可以完整的还原一张图片了。


本科

一个设计师。
用户体验设计师。
交互设计师。
用户界面设计师。
前段开发工程师。
商人。

网页无图再不是梦想

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

原文出处: 百码山庄   

一直以来,网页开发对优化方面做的工作从未停止。网页无图也是为了减少页面资源请求而提出的一种畅想。无可厚非在网页开发的历程中在网页无图方面我们已经取得了不朽的成就:从一开始零零碎碎的小图标资源,到后来小图标合并成一个图片出现雪碧图,再到后来Webfont的出现不仅可以取代雪碧图,而且彻底解决了图标管理难,变色实现麻烦的问题。今天我要跟大家介绍一个小工具,也是可以帮助实现网页无图这一终极目标。理论上来讲,它可以将任何一张图片转换成一个不带图片,不带背景图的干干净净的html标签。但是这有前提:你的计算机得有足够的资源去支撑。

使用栅格系统的优势

对于设计师来说,栅格系统更多的是一种布局思想,可以更有逻辑地进行设计工作。灵活地运用栅格系统,不仅可以让整个网站各个页面的布局保持一致,让网页的信息呈现更加美观易读,让设计稿有更好的结构,更可以通过匹配不同组合,做出很多优秀和独特的排版设计。使用网格系统,可以使网页设计给用户正式感和规范感,还具有一种结构分明的设计感,提升用户体验。网格系统不意味着循规蹈矩,一味按照网格线来进行布局。网格系统的意义在于更灵活的帮助设计师有序布局,而不是限制设计师的设计。

对于前端开发人员来说,栅格系统的使用,给整个网站的页面结构定义了一个标准,大大提高了网页的规范性。在栅格系统下,页面中所有组件的尺寸都是有规律的可重用的,这对于大型网站的开发和维护来说,能节约不少成本。

随着响应式设计的流行,栅格系统开始被赋予新的意义,那就是,一种响应式设计的实现方式。响应式的要点是为同一个页面设计多种布局形态,分别适配不同屏幕尺寸的设备。

可以看到,一个页面可以拆分成多个区块来理解,而正是这些区块共同构成了这个页面的布局。根据不同的屏幕尺寸情况,调整这些区块的排版,就可以实现响应式设计。而借助栅格系统,设计与前端开发人员可以很容易的设计和创建响应式的页面布局。

栅格系统是一种格式化的设计工具,使用栅格系统是一种好的习惯,设计师可以更专注于内容呈递,更专注于强调重点。当然,规矩是用来打破的,当我们理解了布局的理念,掌握了栅格的手法之后,也无需拘泥于栅格的形式,可以对其“革命”,进行创新。

毕业了,如今

在一个让人每天过得很开心的公司里做着产品设计师。
脑袋瓜子里希望能够从事设计管理,及开发有价值的产品。
希望成为一名商人,关于设计管理,设计营商。

技术实现

首先,我们考虑如何根据图片去取到每个格子的颜色值?这个问题并不难,HTML5为我们提供了Canvas标签,而通过Canvas我们可以使用getImageData方法获取到画布中任一一个点的颜色信息以及透明度信息。

然后,我们来考虑如何设计我们的小工具。第一步,根据不同的图片可能会适合不同的格子大小,所以我会保留一个size选项用于设置盒子的大小;第二步,格子与格子之间是否保留间隙,可能根据用户习惯会有不同,所以我提供space选项来设置间隙大小;第三步,格子实际就是一个盒子的其中一个阴影,而阴影的形状是可以根据盒子本身发生变化的,所以我提供radius属性来配置格子圆角大小;最后,既然我们得到的将是一个html标签,那么标签是可以带有各种属性的(比如:id、class等),所以我提供一个attrs属性(一个json对象),来设置生成的html元素的属性。好了,万事俱备,只欠代码实现了!

最后,我们梳理逻辑,封装代码,完成了最基础的版本。效果如下演示:

图片 2

为了方便大家看到更真实的效果,这里给大家提供在线DEMO

栅格系统的形成

栅格系统(Grid system)最早使用在17世纪末的法国印刷业,出版业。维基百科对其定义为:栅格设计系统(又称网格设计系统、标准尺寸系统、程序版面设计、瑞士平面设计风格、国际主义平面设计风格),是一种平面设计的方法与风格。网页栅格系统是有平面栅格系统中发展而来,以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。

小学

最初梦想当科学家,接着梦想当企业家。

总结

从功能上来看,我实现了图片到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。

高中

初中的梦想莫名其妙地实现了。

渐入主题

既然可以使用一个标签制作出一副精美的像素图,那么是否就意味着可以用一个标签还原任一一张图片?唯一不能还原的是图片的精细度问题。然而,如果可以精细到每一个像素点,那么高精度的还原整张图也完全可行,只是这必将消耗非常多的计算机资源。这一设想便是催生这个小工具的催化剂,于是我便开始构思起来。

参考文章

网站网页栅格化

Grid的运用:ps外挂

网页的栅格系统设计

网页设计中的960栅格系统

Maintainable responsive layouts

Using the 960 Grid System as a Design Framework

这是一篇断断续续写就的杂文,行文有些混乱,但无碍理解。

缘起

那是一个工作日的早上,我向往常一样准时到达了工作岗位上,启动电脑,打开浏览器我偶然发现了一篇名曰《18个你可能不相信是用CSS制作出来的东西》的文章,出于职业敏感,也出于好奇我就点进去看了一看,发现其中有一个很有意思的作品:,它仅仅用一个div标签就完成了这幅作品,于是我们几个同事好奇使然,开始分析它的实现,渐渐有了下面即将介绍的工具的影子。

资源干货

对于新手来说,使用栅格系统有一定的成本,需要数学基础,懂比例,会计算,但现在网络上已经有很多帮助设计栅格系统的工具和模版,可以即拿即用。这里介绍几个常用工具。

960.GS

使用960.GS应该是最简单的栅格方法,下载960栅格系统,地址http://960.gs/合并图层,置入网页文件,选择混合模式叠加,并锁定,便可以按照其栅格设计网页。

GuideGuide

这个是免费的好用PS外挂,输入数值就会自动画参考线。在设计网页前先将参考线全部拉出来。至于如何安装和操作方式,网络上已经很多人写了,可以参考这里:PS 参考线插件GUIDEGUIDE下载及使用说明

WebZap

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

常常问自己这个问题:你是谁?

栅格系统的原理

栅格系统可以按栅格数分为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列的栅格划分

初中

记性不好,忘记了小学说过要当企业家,只希望能够考上三中。

当女神潘潘导师问我是否了解网页设计中的栅格系统,为什么要使用栅格系统时,脑中能想到的只有,“遵循栅格使网页看起来整齐规范”,“方便重构”,“有利于响应式布局”。。。其实对栅格系统只是一知半解,并没有系统深入的理解,于是做了些功课,整理出这篇文章,希望能给新接触网页设计的小伙伴们一点参考。

硕士

本科时的愿望实现了,成为一名用户体验设计师、交互设计时、产品设计师、移动应用产品设计师、视觉设计师、前端工程师...
这个阶段学的是创意思维和新媒体技术手段。
学会用Processing编程,实现数据可视化、基于影像捕捉的实时动画。
希望成为一名商人。

 Liya - 2015年8月31日

本文由前端php发布,转载请注明来源:梦想与成真与再梦想,网页无图再不是梦想