网页设计教程:网站背景中的他!她!它!

  以人物肖像作为网页背景在国内的网页设计中并不多见,但却是国外网站很热衷的一件事情,这看似大胆并且冒险,实则能在无形中大大的提升网页的用户体验。

  笔者曾经在《图文搭配,网页不累》的案例中提到,视觉引导对于首次访问网站的用户非常重要。当用户来到一个完全陌生的页面,网站必须予以合理的引导,这样才能让用户有继续浏览点击的方向。

  人物背景网页设计的好处不仅如此,以下是笔者为大家收集的各种相关案例,让我们在案例中继续探索。

  1、第一个案例是笔者为OYAMA定制的官方网站。从首屏设计上就不难看出网站需要表现出一种积极向上,充满朝气的氛围。因此设计师很巧妙的将人物元素融入METRO的设计风格,这样既能避免色彩多造成的视觉疲劳,也能顺势利用丰富亮丽的色彩,让网站看起来更加生动有活力。


  2、Ballet与普通的人物背景网页设计不同,在人物的处理上没有使用高清的大图,而是故意做了充满朦胧感的模糊处理,搭配经典的黑色,让网页多了一层神秘感。为了掩盖大量的留白可能会带来的单调,设计师用人物的大幅度动作让页面看起来更充实。


  3、HotDot的网站背景风格似乎很符合现代设计师的口味。背景中的人物使用亮点不仅仅只在于独特抢眼的妆容上,更在于人物的视线方向上。从整个网站的布局上来看,用户体验并不是很理想,导航在首屏的底部,而且字体和颜色也很不利于阅读。所以,设计师利用人物的视线,将用户的视线带到了底部导航部分,很大程度的弥补了这一不足。


  4、这个网站很明显是一个产品的推广网站,所以设计师用最简单直接的方式吸引用户关注产品。虽然产品在首屏中的占比很小,但却仍然能够把浏览者的注意力集中在产品的部分,除了产品以外部分的设计都尽可能的精简,就连按钮也采用了幽灵按钮的设计。


  5、使用高清大图作为背景是2014年的网页设计趋势之一,在这个案例中也有一定的体现,而使用高清图片的特点就是让画面的真实感更强,但同时也许会流失一些美感。如下案例所示,老奶奶布满皱纹的脸的确让网页更多了一些生活感和亲切感,但如果不加以修饰就就会显得有些许苍白单调,因此设计师巧妙的加以纹理背景,让画面看起来既不失真又美观。


  6、这个案例中使用了大量的圆形元素,而看似独立的图形反而会让用户尤其注重其中的内容和条理关系。仔细看每个圆形中的布局方式,设计师很细心的用布局来弥补几何元素带来的“凌乱”,让用户感受到网页的个性。


  7、有人物的任何场景都能表现出不同的情感,就算没有眼神、动作的交流,一个简单的背影也能引发出浏览者的无限遐想。


  8、Metro的设计加上五彩缤纷的色彩,这对第一眼的视觉冲击还是很有作用的,但这只能针对走马观花的用户,多看两眼会让人有点摸不着头脑。而该案例中的人物使用让整个画面连贯起来,图片中每个人物的肢体流向成了用户们浏览网站的线索。


  9、LOCALS APPAREL的网站前三屏都使用了人物背景,这三张图片中人物所表现出的形态都不尽相同,但展现出的效果却很类似。这个网页背景是一个很典型的用画面中的人物来引导用户的案例,设计师利用同一个人物的不同方向,让整体变得既统一又清晰。


  10、他?她?还有它!幽默的拟人化动物形象能为网页加入更多的诙谐色彩。如下案例所示,大猩猩不例外的成了整个页面的主角,为了要将用户的视线引到内容或是导航上,设计师在这些内容上添加了纯色块,让网页主次分明。


  使用人物作为背景的网页风格大多以简约为主,因为这样才能将其作用更好的展现出来。表情的确是一种很奇妙的内心表现形式,很细微的变化就会反馈给对方不同的信息。

时间: 2025-01-31 05:27:16

网页设计教程:网站背景中的他!她!它!的相关文章

网页设计教程:网站背景设计案例分享

文章描述:我们将介绍几个实际网站来启发你的灵感,看看如何设计趣味而又令人感兴趣的网页背景.收藏本文,当你再次阅读时,你定会被某一个背景设计所迷恋. 如何选择一种最恰当的网页背景是网站设计中最常见的问题之一. 通常网站设计者都已准备好网站内容,而且版面布局大多也基本敲定.但背景要么是令人厌烦,要么是让人眼花缭乱,让设计者迟迟不能确定. 今天,我们将介绍几个实际网站来启发你的灵感,看看如何设计趣味而又令人感兴趣的网页背景.收藏本文,当你再次阅读时,你定会被某一个背景设计所迷恋. 1. 素描设计 这种

PS网页设计教程IV——如何在Photoshop中创建一个专业博客网站布局

向Talk-Mania网站致敬.一年前,在该网站上看过许多不错的网页设计教程.一年后,再回头想看看有没有什么新的教程的时候,蓦然发现该网站已经打不开了.也许是关闭了,也许是改了网站名了.幸好,去年本人还是下载保存了几个教程,本教程就是其中之一.也希望能看到更多的PS网页设计教程的网站,以及更多优秀的设计.   约定: 1.本文的软件是Photoshop CS5版本 2.原教程的截图是英文的,本人在重新制作的基础上,重新截了中文版的图 3.原文中有些操作没有给出参数.本人在反复测试的情况下测定了一

PS网页设计教程XIX——在Photoshop中创建一个优雅的作品集的网页布局

作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,"熟读唐诗三百首,不会作诗也会吟". 本系列的教程来源于网上的PS教程,都是国外的,全英文的.本人尝试翻译这些优秀的教程.因为翻译能力有限,翻译的细节上还有待推敲,希望广大网友不吝赐教. 约定: 1.本文的软件是Photoshop CS5版本 2.原教程的截图是英文的,本人在重新制作的基础上,重新截了中文版的图 3.原文中有些操作没有给出参数.本人在反复测试的情况下测定了一些参数,以红色的

PS网页设计教程VI——在Photoshop中创建一个食物博客布局

作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,"熟读唐诗三百首,不会作诗也会吟". 本系列的教程来源于网上的PS教程,都是国外的,全英文的.本人尝试翻译这些优秀的教程.因为翻译能力有限,翻译的细节上还有待推敲,希望广大网友不吝赐教. 约定: 1.本文的软件是Photoshop CS5版本 2.原教程的截图是英文的,本人在重新制作的基础上,重新截了中文版的图 3.原文中有些操作没有给出参数.本人在反复测试的情况下测定了一些参数,以红色的

PS网页设计教程XXI——在Photoshop中创建一个光质感网页设计

作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,"熟读唐诗三百首,不会作诗也会吟". 本系列的教程来源于网上的PS教程,都是国外的,全英文的.本人尝试翻译这些优秀的教程.因为翻译能力有限,翻译的细节上还有待推敲,希望广大网友不吝赐教. 约定: 1.本文的软件是Photoshop CS5版本 2.原教程的截图是英文的,本人在重新制作的基础上,重新截了中文版的图 3.原文中有些操作没有给出参数.本人在反复测试的情况下测定了一些参数,以红色的

PS网页设计教程XVI——在PS中创建一个摩登实验室风格的网页设计

作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,"熟读唐诗三百首,不会作诗也会吟". 本系列的教程来源于网上的PS教程,都是国外的,全英文的.本人尝试翻译这些优秀的教程.因为翻译能力有限,翻译的细节上还有待推敲,希望广大网友不吝赐教. 约定: 1.本文的软件是Photoshop CS5版本 2.原教程的截图是英文的,本人在重新制作的基础上,重新截了中文版的图 3.原文中有些操作没有给出参数.本人在反复测试的情况下测定了一些参数,以红色的

网页设计教程(3):设计步骤及思考

上一篇教程:网页设计教程(2):论摹仿和抄袭    与之前的步骤不同,这是实际操作的步骤.本文包括了大局的步骤和栏目,图片,小到一个图标的选取等等等等,可能会漏掉很多的东西.欢迎补充.我只是引导你去思考,本章绝对不是网页的标准制作步骤,我相信也没有什么标准的制作步骤.      本章的设计步骤是建立在网页设计进阶之一 (步骤和大局观)之上的.可能会涉及一些平面相关的知识.和网页与平面的比较.网页与平面的区别我会在以后在写.      本章所讲的基于PHOTOSHOP软件制作.      本章印证

网页设计教程(4):关于素材和言志

上一篇网页制作教程:网页设计教程(3):设计步骤及思考 关于收集素材:三遍记忆,让你记住海量素材的准确位置和用途,提高其可用性       这仅仅是一个示意图.在以往的日子里,我做到了只要脑袋里冒出一个想法,立刻就能知道我需要用的素材在什么位置...那时候我很穷,穷到连买书的钱都没有,更别说是买动辄几百快的设计资源光盘了.      设计师最大的特色,我认为是他特有的那个文件夹,或叫"杂七杂八",或叫"乱七八糟",或叫"什么都有"或叫"

网页设计教程(2):论摹仿和抄袭

在上一篇中介绍了网页设计的步骤和方法,具体可以回顾看看上篇文章:网页设计教程(1):步骤和整体布局 在05年入行数月之后,逢劳动节放假,经历了连续一个多月每天到12点的加班之后.我在自己的日记本写了一篇关于摹仿和抄袭的文章.写了足足5大张.现在看起来,道理是讲的很明白了,不过是太偏激了一点,现在从新写一下.新手看看下边一段就可以了. 摹仿的要素: 我说的是"摹仿",而不是",模仿"...如果你一直是"模仿",那么你还是别看了...... 要素无非

网页设计教程(7):提高网页制作效率

上一篇:网页设计教程(6):要保持设计激情. 本来这第七章应该是针对设计中的层次.空间的技法及深层次的探讨.但今天暖暖跟我哭诉她事情总是处理不完.加上今年3·4月份公司的一大堆生意的顺利完成.以及那时候总结出的一些经验.觉得效率这个问题还是很有必要跟大家分享分享的.时间仓促,分类不明确,还请见谅! 本文从三个方面着手,一个是企业网站的建设(教育政府类也归纳到企业站点里),二是小型门户站点的建设,三呢,我把平面广告设计也顺带提一点.主要还是网站. 其实企业站点的工作量并不大,相信很多有经验的同仁能