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

笔者曾经在《图文调配,网页不累》的事例中说到,视觉引导关于初次拜访网站的用户非常重要。当用户来到一个彻底生疏的页面,网站有必要予以合理的引导,这样才干让用户有持续阅览点击的方向。

人物布景网页规划的优点不只如此,以下是笔者为我们搜集的各种相关事例,让我们在事例中持续探究。

1、第一个事例是笔者为OYAMA定制的官方网站。从首屏规划上就不难看出网站需求表现出一种积极向上,充溢奋发向上的气氛。因而规划师很美妙的将人物元素融入METRO的规划风格,这样既能防止颜色多形成的视觉疲惫,也能顺势运用丰厚亮丽的颜色,让网站看起来愈加生动有生机。

网页规划教程之布景中的他!她!它!(风景网页设计思路)  网页设计 背景 第1张

2、Ballet与一般的人物布景网页规划不同,在人物的处理上没有运用高清的大图,而是成心做了充溢含糊感的含糊处理,调配经典的黑色,让网页多了一层神秘感。为了掩盖很多的留白可能会带来的单调,规划师用人物的大幅度动作让页面看起来更充分。

网页规划教程之布景中的他!她!它!(风景网页设计思路)  网页设计 背景 第2张

3、HotDot的网站布景风格好像很契合现代规划师的口味。布景中的人物运用亮点不只仅只在于共同抢眼的妆容上,更在于人物的视野方向上。从整个网站的布局上来看,用户体会并不是很抱负,导航在首屏的底部,并且字体和颜色也很不利于阅览。所以,规划师运用人物的视野,将用户的视野带到了底部导航部分,很大程度的补偿了这一缺乏。

网页规划教程之布景中的他!她!它!(风景网页设计思路)  网页设计 背景 第3张

4、这个网站很明显是一个产品的推行网站,所以规划师用最简略直接的方法招引用户重视产品。尽管产品在首屏中的占比很小,但却依然可以把阅览者的注意力会集在产品的部分,除了产品以外部分的规划都尽可能的精简,就连按钮也采用了鬼魂按钮的规划。

网页规划教程之布景中的他!她!它!(风景网页设计思路)  网页设计 背景 第4张

5、运用高清大图作为布景是2014年的网页规划趋势之一,在这个事例中也有必定的表现,而运用高清图片的特色便是让画面的真实感更强,但一起或许会丢失一些美感。如下事例所示,老奶奶布满皱纹的脸确实让网页更多了一些日子感和亲切感,但假如不加以润饰就就会显得有少许苍白单调,因而规划师美妙的加以纹路布景,让画面看起来既不失真又漂亮。

网页规划教程之布景中的他!她!它!(风景网页设计思路)  网页设计 背景 第5张

6、这个事例中运用了很多的圆形元素,而看似独立的图形反而会让用户特别重视其间的内容和条理联系。仔细看每个圆形中的布局方法,规划师很仔细的用布局来补偿几许元素带来的“杂乱”,让用户感受到网页的特性。

网页规划教程之布景中的他!她!它!(风景网页设计思路)  网页设计 背景 第6张

7、有人物的任何场景都能表现出不同的情感,就算没有目光、动作的沟通,一个简略的背影也能引发出阅览者的无限遥想。

网页规划教程之布景中的他!她!它!(风景网页设计思路)  网页设计 背景 第7张

8、Metro的规划加上五光十色的颜色,这对第一眼的视觉冲击仍是很有效果的,但这只能针对蜻蜓点水的用户,多看两眼会让人有点摸不着头脑。而该事例中的人物运用让整个画面连贯起来,图片中每个人物的肢体流向成了用户们阅览网站的头绪。

网页规划教程之布景中的他!她!它!(风景网页设计思路)  网页设计 背景 第8张

9、LOCALS AP

PAREL的网站前三屏都运用了人物布景,这三张图片中人物所表现出的形状都不尽相同,但展示出的效果却很相似。这个网页布景是一个很典型的用画面中的人物来引导用户的事例,规划师运用同一个人物的不同方向,让全体变得既统一又明晰。

网页规划教程之布景中的他!她!它!(风景网页设计思路)  网页设计 背景 第9张

10、他?她?还有它!诙谐的拟人化动物形象能为网页参加更多的诙谐颜色。如下事例所示,大猩猩不破例的成了整个页面的主角,为了要将用户的视野引到内容或是导航上,规划师在这些内容上添加了纯色块,让网页主次清楚。

网页规划教程之布景中的他!她!它!(风景网页设计思路)  网页设计 背景 第10张

运用人物作为布景的网页风格大多以精约为主,由于这样才干将其效果更好的展示出来。表情确实是一种很美妙的心里表现形式,很纤细的改变就会反馈给对方不同的信息。

转载请说明出处
知优网 » 网页规划教程之布景中的他!她!它!(风景网页设计思路)

发表评论

您需要后才能发表评论