151-3115-8131
主页 关于我们 服务项目 流程*周期 最新资讯 案例展示 联系我们
图片背景网页在网站建设中的运用  

  网页背景是网站建设中体现风格的一种方式,如果背景建设得好,那么对用户体验则有一定的帮助,现在的网站越来越多的人倾向于选择图片背景的网站设计,让网站看起来显得整体,增加吸引力。

  由于现在的用户使用的PC端显示屏大小不一,对网站页面的分辨率有所差别,制作这种图片背景的网站也是个技术活,从图片的选择、尺寸的设置以及与网站主题内容的风格融合等,对于美工来说,都要下一番功夫,其次对于大图背景网页在网站的建设过程中,也会涉及到各种兼容以及显示等问题需要程序解决,但是运用得好,必定是网站靠近成功的好方法。

  图片背景在网站建设中的运用原则

  1、可以突出主风格

  利用大图设计网站背景,并不是随随便便拿张觉得漂亮的图片就能做背景,首先图片要与网站富有极强的相关性,与网站定位保持一致,其次是展示出网站的风格色调,尤其是体现在颜色搭配方面,如果图片已经满足了其它方面,就差色彩与主题的融合的话,可以通过改变图片的明暗,色彩饱和等来平衡网站的整体风格特色,避免出现与主色格格不入的现象。

  2、可以突出特色

  网站不管是通过何种方式来增加特色,都是围绕着用户体验来实现的,使用图片作背景也即是其中一方面,除了用色彩刺激用户的视觉感,其次就是通过独有的网站特色来吸引用户,那么网站特色背景的设置有时候是一种品牌印象效应,能够更快速地记住你的网站,并且使得用户更有兴趣浏览网站的更多内容。石家庄网站建设

  图片背景在网站建设中运用注意项

  1、图片和页面的位置

  采用图片背景,如果网页与图片的显示不与完全融合的方式实现的话,那么背景图片和网页的位置要考虑相对位置的实现,随着显示屏大小的变化,相对位置保持不变,如果网页没有与背景图片协调好,不同的设备打开网站,其页面与大图背景产生混乱,如图片靠左,页面靠右,则会给用户带来不好的体验,违背了运用图片背景建站的初衷。

  2、网页的焦点建设

  虽然使用图片背景建网站更有气势和吸引力,但是要时刻注意用户的注重焦点,这样做的主要目的是让用户更多的浏览网页的内容,而不在于研究背景的大图,所以焦点始终是要放在网站的重点内容上,记住背景只是一种衬托以及对网页的点缀,对网页背景图片的美化也要适可而止。

  3、图片运用和谐

  上面已经说到,图片背景使用最重要的一点是要协调,现在的PS技术已经完善得很强大了,无论是哪一类的图片,只要内容相关,色彩调配都不是问题,但一定不能忽视这一点给用户带来的体验,只有完成好这一步,才称得上是给网站的正能量。

  网站始终是为用户服务的,图片背景网页的合理设计是推动网站建设靠近用户的一种运用技巧,能够在一定程度上促进网站的发展。

  世界看脸,网站看Banner,门面当然要漂亮,不过很多同学以为做Banner是门技术活儿,自己学艺不精做不了。如果你看了今天这篇文,就会明白,技术于Banner,就像刀法于人,虽有招式,但无内功支撑,久战必败。而这篇好文,就是Banner的内功修炼心法,按6个步骤来,速成可待。

  @Heidixie(阿里巴巴资深交互设计师) :团队小伙伴问到这个问题,发了一封邮件分享自己的思路,顺便贴过来。

  适用前提:

  非专业视觉设计师 没太多空闲时间去做。 为什么要做banner?banner是用来传达信息的。一切不以传达有效信息、有效传达信息的banner都是yy. baner是用来促使用户行动的,也即Call To Action。无法让用户产生你所期望的banner都是无效的。

  所以,先摆脱一个错误的认识:banner仅仅是用来装饰用的,仅仅是为了吸引人注意啥的想法。石家庄网站建设

  所以,我们既然是非专业设计师,就要回归到做banner的本源,为了达到以上效果,同时兼顾美观、大方、好看。

  大方和好看的banner未必需要高深的视觉技巧,和繁琐的PS功能,但是要兼顾视觉的几个原则,我稍后会列出。

  第一步:定义要传达什么信息

  这一步,和视觉、审美什么的都没关系。

  比如,半月谈,我们要传达的信息有:

  品牌LOGO,让用户一眼就知道哪里出品,下次形成条件反射,所谓的视觉认知是需要一定的重复的,只有不断重复才能加深用户印象。 子品牌LOGO,让用户知道我们出了什么东西,并且有系列感。

  以上就是我们要传达的核心信息了。你也可以认为这就是一个BANNER,只是——看起来没那么好看而已。

  但是,我们发现信息还不够,我们还想要传达:

  我们的内容大概是什么,从而让用户形成期待 既然是系列,我们希望用户能够知道这是第几期,从而当他们想要从某一期有兴趣时点击到全部,也有地方去。

  所以,我们把信息又放出来。现在我们有4类信息。

  第二步:定义信息的优先级

  虽然我们有4类信息,但是优先级肯定不一样的,所以对应到设计上,我们给它放的版块的大小、颜色的突出是不一样的。

  第三步:考虑用户视觉路径

  也即你想引导用户先看哪里,再看哪里,然后再做什么。

  通常,用户的阅读从上到下,从左到右边,所以一般重要的内容会放到左上角。

  不过这个规则可以用醒目的图片、刺眼的颜色轻易打破,但是我建议你不要轻易这么做,所有的图片和颜色都要有意义,为什么要用这个图片为什么要用这个颜色。

  确保用户一开始有视觉中心,如果用户一眼不知道先看什么,那么这个banner就是失败的。

  有了视觉焦点后,你可以从视觉焦点引申开来,使用视觉里的亲密性原则(把内容相近的地理位置靠近一些、对比原则等等),引导用户从视觉焦点进而关注到其他细节、或者促使行动的东西。

  第四步:考虑标准识别颜色

  既然我们要传达品牌形象,请确保用色从我们的标准VI色盘中选择,而不要随便用。

  我是配色弱怎么办?有这3个板斧打遍天下,记住,品牌传达,重复性很重要。就像我们看到红、黄、白配色会想到麦当劳,看到绿和黑就想到星巴克一样。

  第五步:做视觉的排版

  (不要考虑太多设计技能,否则就陷入到:我不是专业的,所以我不会做设计上)

  排版上,信息已经完整,优先级已经出来,无非就是把它变得好看一些而已。

  让banner好看的几个要诀:

  1. 对齐

  很好办吧,让内容纵向、横向都有一条线,可以对齐。要么居中,要么底部。尽量确保页面上不要有一个元素,没有任何元素和它能够形成对齐的关系。

  2. 亲密

  不要让所有内容都没有聚集地堆在一起,让那些关系比较亲密的内容聚合成一个区域,不要让一个banner上的区域超过4个。

  3. 简单质感:

  千万不要加任何PS的滤镜、阴影、能不渐变就不渐变,因为已经不流行了,不要盲目使用各种样式。

  4. 如果要用图标,尽量选择样式统一,且能够保持你的优先级次序的图表。比如我们引导用户先看左边,再看右边,结果你在右边的图标里选择了一个血红的,可能用户的视线立马被吸引过来了。

  5. 不要让字体超过3种。尽量用宋体、黑体、方正黑体,不要用什么魏碑体、行楷等,一看就比较山寨。

  第六步:做更多的美化

  如果你不想做,其实上面也可以了。

  想做的话,我们可以:

  比如花点时间去做一个流行的扁平化背景装饰——还是要强调一点,不要为了装饰而装饰,所有的装饰都要有意义、让背景更加有质感。比如加点磨砂感觉。 比如,你还可以适当变换下别的排版,比如:居中的排版,更容易引导用户从上到下的阅读视角,也是很多人偷懒比较喜欢的排版风格。

  综上所述,做banner有一大半的精力是梳理信息、设定优先级、设定用户浏览次序,和PS的技能没有太多关系,所以,每个人都可以去尝试做好一张看似很有设计感,但是实际上又没花什么精力的banner。

地址:石家庄市红旗大街599号西美花城4-B-403室(红旗大街汇丰路交口东北角)
电话:151-3115-8131
版权所有 Copyright(C)2008-2020 二亩地做网站  技术支持:新钥匙建站