威尼斯人娱乐场官网:网页首图的套路

by admin on 2019年9月24日

网页无图再不是梦想

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

原文出处: 百码山庄   

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

 Liya – 2015年8月31日

澳门威斯尼人平台登陆 ,这是一篇断断续续写就的杂文,行文有些混乱,但无碍理解。

Banner
是我们最常聊到的设计元素,它是一个网页的招牌,是用户最容易看到的视觉元素。今天,我们来聊聊Banner中的急先锋,网页首图,它的设计之道。

威尼斯人娱乐场官网 1

缘起

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


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

网页设计师都明白,网页对于用户的第一印象是非常重要的,而网页给用户的第一印象很大程度上取决于网页的视觉设计。

梦想如果搁浅着,那永远只能是梦想;梦想如果搁浅着,成功不会降临你身上;梦想如果搁浅着,人生的路上没光芒;梦想如果搁浅着,再生活也不会有希望。
                                                                       
               ——题记

渐入主题

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

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

小学

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

现在的网页虽然多种多样,但是出于视觉化设计的目的,大多会使用大图背景,或者超大尺寸的Banner。当用户一打开网页的时候,映入用户眼帘的Banner
,是影响视觉设计的关键因素,它有个专门的术语是 Hero
image,我们通常称之为首图。所以,网页首图的设计需要特别用心的。

也许有些人从小就有梦想,希望长大以后可以实现,能够梦想成真,但是他们从来都不去付诸行动和努力,每天幻想着梦想的美好,慢慢的只能与梦想天涯两忘。所以说,如果只把梦想当作是做梦,那梦醒了,还是什么都没有。

案例分析

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

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

威尼斯人娱乐场官网 2

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

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

栅格系统的形成

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

初中

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

网页首图不仅仅是一张漂亮的图片,它还应该是强大的视觉传达工具。谈情怀不如讲套路,今天的文章,我们就通过一系列最佳实践来为你展示首图设计的一些设计“套路”。

也许有些人一直就有梦想,可能因为工作的原因,或者其他方面的原因,渐渐的推迟为梦想去努力的时间,也忽略了梦想的重要性,从而就会与梦想擦肩而过。所以说,如果不把梦想当作是自己的生命,那即使拥有也不会珍惜。

技术实现

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

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

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

威尼斯人娱乐场官网 3

为了方便大家看到更真实的效果,这里给大家提供在线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列的栅格划分

高中

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

1、一定要使用相关图片

在挑选图片的时候一定要精挑细选。

合适而好的图片能够提升整体体验,而不合适的图片选择则可能毁掉整个设计。在选取图片的时候,尽量选择贴合主题,内容一致,主旨和目的相匹配的图片,这样可以避免用户的预期和内容产生割裂感。就像讨厌标题党一样,用户会因为首图和内容的不匹配而对网站内容失去信任,飞速离去。

威尼斯人娱乐场官网 4

这个首图的内容实际说的是贷款,但是配图选取的是毛巾,在信息传达上就存在不匹配的问题。

威尼斯人娱乐场官网 5

这个网站主推的产品就是冰激凌,内容和图片的一致,也符合用户的预期。

也许有些人很早就有梦想,可是随着时间的推移,发现梦想很丰满,现实很骨感,非常害怕梦想不会实现,还是现实一点好,从而把曾经的渴望变成无尽的失望。所以说,如果不把梦想当作永远的追求,那也不过是昙花一现。

总结

从功能上来看,我实现了图片到html元素的转换,但是可能并非是最好的网页无图实现方案,因为工具转换出的HTML标签,设置了太多的阴影块,对浏览器的渲染并不友好,会对用户计算机硬件有一定的要求,特别是块大小为1(即完整还原图片)的时候,转换过程非常缓慢,如果图片再大些,极有可能导致用户浏览器崩溃,因此建议大家测试时慎用大图做测试。而且,转换后得到的html标签和样式字符串大小将有可能远远超过图片本身的大小,所以我只能说这是一种可行的技术方案,但未必是好的实现方案。(然并卵)

1 赞 4 收藏 1
评论

威尼斯人娱乐场官网 6

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

本科

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

2、让首图成为核心

首图是承载内容的重要容器。

你想要让内容不同凡响,又能够从整个设计中脱颖而出,那么就要用好首图。在视觉上设计优秀的首图能够让用户每次打开网站的时候都为之驻足。

在首图的设计上,苹果每次都为我们提供了最优秀的案例。

威尼斯人娱乐场官网 7

小贴士:首图并不需要将所有的信息都呈现出来,相反首图应该是强调重点,将最突出的部分强化并呈现出来。

综上所述,总而言之,大部分人还都是有梦想的,这一点让我感到很高兴,因为“人如果没有梦想,那跟咸鱼有什么区别,”这是周星驰电影《喜剧之王》里最经典的一句话,说的很对,人没有梦想,活着就没有意义。所以,人有梦想是件好事,但想要成功那真的是实属不易。要想实现梦想,最重要的是,千万别做“语言上的巨人,行动上的矮子。”有梦想就动起来,别再搁浅着你那所谓的梦想。

使用栅格系统的优势

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

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

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

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

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

硕士

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

3、拿出情感化的设计

将情感融入设计,并且用情感来说法用户,才是首图的设计之道。只有能够触动用户情绪的设计更具有说服力。

很多时候,我们使用创意也好,借助热门IP也好,精心打磨文案也好,也只是希望让首图能够让用户惊喜、喜欢、需要,最终是要通过它调动起用户的情绪。

威尼斯人娱乐场官网 8

积极的情绪刺激能够更好的建立用户和你的网站之间的互动感。

其实每个人都有不同的梦想,或大或小,或多或少,但都想实现这遥不可及的目标。可是在这个鱼龙混杂的社会,要想成就梦想,就不能把梦想搁置在一边,光想象而已,那必须要靠自己的奋斗和努力,坚持不懈,不畏困难的勇气往前冲,因为别人不会帮助你,也不会可怜你,你只有去付出,才有可能得到一点点回报,如果不去付出,那梦想之门你永远也触摸不到。

资源干货

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

960.GS

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

GuideGuide

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

WebZap

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

毕业了,如今

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

4、一定要高清

图片一定不要出现模糊或者像素化的情况,虽然这是一个低级错误,但是很多时候还是难以避免。

低素质的图片是非常容易让人产生疏离感的,在高清屏幕到处都是的今天,模糊不清的图片是无法接受的(专门的像素风是另外一种情况)。

威尼斯人娱乐场官网 9

想要用户对你的网站拥有积极的情绪,那么图片的素质一定要有保证,高素质的图片能够让用户准确地获得信息,清晰的图片总能让人看着更加舒服。

5、强化CTA按钮

网页首图常常和行为召唤(CTA)按钮搭配着使用。由于首图配图通常在视觉上极其突出,但是搭配有行为召唤按钮的首图,其本质上是用来吸引用户,传递信息,并引导用户去点击按钮的,所以行为召唤按钮和视觉信息丰富的图片之间,不应该互相干预,而是通过设计,让CTA按钮更加突出,让图片处于辅助的位置,最终达到吸引、引导的目的。

威尼斯人娱乐场官网 10

按钮的视觉重量应该超过图片的视觉重量。

如果我有梦想,梦想却搁浅着不为此去拼搏,等到自己变老的那天回忆起来,我一定会后悔、遗憾、抱怨、心痛。

参考文章

网站网页栅格化

Grid的运用:ps外挂

网页的栅格系统设计

网页设计中的960栅格系统

Maintainable responsive
layouts

Using the 960 Grid System as a Design
Framework

6、控制对比度

对比度是任何设计中都必须注意的点,在设计首图的时候同样需要注意。

首图中的文本和排版也需要用心设计,通常需要选择加粗且易读的字体。如果你的图片和文字叠加到了一起,那么需要注意背景的图片和前景的文字之间的对比,确保文本是能够被清晰分辨的。

通常,设计师会在图片上叠加上一个半透明的有色图层来降低繁复色彩的视觉信息量和干扰。

威尼斯人娱乐场官网 11

除此之外,你还可以使用Scrims
技术,这种网页技术能够识别文本,并且让图片和底层的图片之间构成对比,确保可读性。

小贴士:如果你打算使用使用图文叠加的方式来设计首图,还应当注意让图片的主体部分是清晰可见,且能够被用户轻松理解的。

还好,我有梦想。我的梦想就是写歌词和写文章。

7、兼顾不同的屏幕尺寸

如今的内容都需要考虑跨平台、跨设备、跨平台的兼容和适配性,当你的图片出现在不同尺寸的屏幕上的时候,它是否能够正常显示,正确显示,并且符合不同平台、不同屏幕的显示需求。

威尼斯人娱乐场官网 12

小贴士:结合响应式设计的需求,你可以使用Cloudinary
这样的多尺寸图片生成工具,帮你生成符合响应式图片断点的图片。

写歌词我坚持了快两年之久,虽然现在还没有很大的成就,但我不会放弃的,我写歌词的梦想,就是让音乐人把我的歌词通过作曲、编曲、混音等一些方式表现出来。也希望通过歌手深情地演唱,让我的歌词插上飞翔的翅膀,温暖人们的心灵。

8、考虑使用插画

在网页首图中使用插画能够赋予首图以个性。相比于图片,插画更加个性化,插画的内容更加自由,也更容易控制,从内容到技术均是如此。

Dropbox 就使用插画来呈现、表达复杂的内容:

威尼斯人娱乐场官网 13

小贴士:当你打算在首图当中使用插画的时候,请尽量保持插画和整体设计之间的一致性,尽量让它们看起来来源是相同的。

写文章这是我最近的梦想,我通常喜欢看一些文章,也一直想写一些文章,但迟迟不敢下笔(总觉得自己的文笔不好),现在我终于鼓足了勇气,不怕朋友们的嘲笑,开始写了这第一篇文章,文笔不好,可以通过不断的学习与积累,使自己提高写作水平。没有谁一上来就写的很好,很优秀,除非你是天才,可天才又能有几个呢。写文章也需要不懈的努力,才能取得不错的效果。我写文章的梦想,就是想让人看到后,能有一点微不足道的启发与感动,哪怕只有一个人,那我也会很快乐。因为写歌词和写文章,这都是我在做着自己感兴趣的事情,不管最后的结果如何,这其中的过程,一定是我人生中最美好的时光。

结语

网页首图绝对是真个设计中最关键的部分之一。选取素质高,有趣的图片,同网站的内容结合起来,参考上面的这些最佳实践,你的网页首图应该能够更上一层楼。

原文链接&version=12010210&nettype=WIFI&fontScale=100&pass_ticket=zt8vo96OFn7yCyAUf2mjdDw9kkgcbHhzC4Efbt47WWKcca2j9Uw0%2F2rF3sn7xqBd)

以上这些是说了我的梦想,按照我对梦想的定义,我是一定不会把梦想搁浅着,我会与梦想一起同行,奔向那未知并遥远的前方。有梦想就去实行,别总犹犹豫豫的,人生的大好时光经不起蹉跎,美好的明天在等待着你我。

有梦想的人,总会有一些顾虑,总在问梦想最终能不能成功,那我问你,遇到心爱的女孩你没有去追,你会不会后悔。这其中的道理是一样的,有梦想没有去追求,那后来一定会后悔,如果说,你为梦想努力了,最后没有成功,到了那时可能成没成功,就没有那么重要了,因为你已经努力了,至少已经证明自己了,就不会计较成功与失败了。这让我想起了凯尔特人队训“努力和遗憾,那个更让人痛苦。”所以说,如果你去努力,就会看到希望,也会看到光芒,成功它也会一步一步的走向你的身旁。

我都不知鼓足了多少勇气去写文章,万事开头难,努力吧。朋友们,如果有梦想,请别再搁浅着你们的梦想,这样的滋味真的不好受,勇敢的走出第一步,相信自己,加油。

发表评论

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

网站地图xml地图