网页设计中的装饰元素总结的应用

所属分类: 网页制作 / 应用技巧 阅读数: 786
收藏 0 赞 0 分享

前言:看本教程,必须先仔细看前言的内容,否则会进入误区!
最近在做个性休闲服装内网站的设计课程,过程中发现,个性元素的应用成为最难的问题,第一项目风格适合使用什么样的个性元素;其次,个性元素如何把握,什么样的元素才是个性元素,才能突出项目定位;
这里聊的共性与个性纯粹是在本人对网页设计中的装饰元素总结的应用,不代表其它方面的解释,“共性与个性”也是个人用来区分常规元素与个性元素的用词,大家可以理解为正规的突破的;
了解共性与个性
    共性解释:共性就是常规的东西,自然存在并被人们认可的;比如一条直线,是恒久不变的元素,这就是共性;又比如我们穿的衣服,长袖、短袖、长裤、短裤,按正常人标准生产的;这些也是共性; 个性解释:个性是相对与共性来说的,与共性不同的元素,就是个性;比如每个人画出来的随意的线是千差万别的,这就是个性的元素;又比如,本来是正常的牛仔裤,年轻人最喜欢把他剪破,或者打个补丁什么的,显得与众不同,这也是个性。

举例
1、掌握共性元素与个性元素;把共性元素变异形成个性元素;
常理,把线条按等距离平均排列看起来很整齐,只要按照等距排列,最终效果是一样的,没有特色也没有缺陷,大家都不会觉得有问题;个性处理,随意排列线条,使得线条间距不等,形成随意的节奏感;每个人排列的最终效果都不一样,最终会有好有差,所以比较难把握;


常理:我们用很多元素连成一条线,感觉很整齐;个性,把元素分散随意摆放,形成大小不一,间距不一的点,使得它们组成的图形富有节奏感;

严重注意:效果是为页面服务,效果必须符合页面风格;
效果始终是为页面风格服务的,如果你没有搞清楚页面要表达的风格,而随意的使用不同效果,最终是没有说服力的;
#p#
案例分析
风格定位:CONVERSE是一个非常个性的服饰品牌,从它的官方网站中我们可以看到,设计非常个性,代言人也是特意选择很有个性的摇滚乐明星,所以,设计定位要体现其个性的风格;
我们来分析一下整个设计过程:
1、第一步,确定好页面必要元素,比如,标志,广告文字,模特,版权等,这些必要元素;然后确定大概色调,要体现比较酷的个性,使用灰色系比较容易达到效果;这里使用偏暖的色调搭配黑色,使用红色为突出色;此时,整个版面中规中矩,使用的都是共性的一些元素,有任何特色及个性,与一般页面设计没有区别;

2、根据产品的风格定位,逐步把页面个性化;为了体现自由、个性,我们把底部的黑色块做变化处理,使用一些随意的线条装饰,使得黑色与灰色交界不那么死板,形成随意的衔接;

共性:黑灰组合,简单直白的交界,没有特色,但是也无可挑剔缺陷;

个性:黑灰组合,使用随意的线条过渡,方法较简单,可以使用笔刷,也可以使用直线工具画折线;每个人画出的效果会不一样,注意疏密有间,随意自然!

3、背景:灰色渐变背景稍显简单,但是也不一定要使用非常复杂的背景,这里使用深浅不同的色块交错,使得画面背景一些就可以了;

#p#
4、个性化装饰元素:这一点是比较难把握的,因为个性化比较抽象,我们都不好把握;这里要做到的就是,装饰元素要符合页面风格,要与页面整体风格统一协调;
这里使用了接近插画的处理效果,随意流畅,大小有致,有主有次;目的是要表达对人物的束缚或者简单的理解为装饰;

共性:使用大小一致的元素,整齐、协调,但是没有任何变化与个性;

个性:元素做大小、位置等的变化,形成非常有节奏感和空间的的图形,组成有个性的元素;所有元素都是随意摆放,每个人都可以摆出不同的图形;不过要把握这些元素组成图形的整体感,不要太松散,要有对比;

以下页面,元素有大小的变化,距离位置的变化,但是整体感觉松散,有些散乱;

应该像以下案例要做到有疏有密,有主有次, 近大远小,进密远疏,随意自然!

#p#
5、个性化人物:这里先要分析人物可不可以做修饰处理,什么修饰适合他;比如,如果我们做正式装,那么我们就不应该用一些元素去修饰人物了;而个性休闲装可以适当的做修饰,使得产品的个性风格更加凸显;
这里根据人物动作造型和画面空间考虑修饰,使用类似翅膀的造成,这样可以衬托产品自由休闲的特性,又给人视觉上的不同;但是这里并没有使用真实的翅膀,而是象形的元素;使用真实的翅膀容易显得太具象,与画面风格不符合;当然也可以使用画出来的翅膀,只要你能画!

共性:方形色块,最普通的元素,没有什么特色,但是也没有什么问题,但是我们可以给它造型;

变化:我们把他改变成翅膀的大体形状,这个你应该知道吧,如果不知道翅膀的形成,到网上找张图片看看,只要像翅膀,随便画成什么形状;

个性:一大块色彩显得呆板,没有张力,为了体现翅膀的张力,把色块做分隔,分隔成若干小色块,分隔应该注意,斜线才会显得有速度和张力感,随意分隔才会显得个性十足;

6、广告文字个性化:选择好合适的字体,可以对文字做修饰,以符合页面风格;

共性:最正式的字体,常规而没有特色,当然,也找不出什么问题;

变化:为了迎合画面效果,可以做适当变化,不过变化要符合页面风格,不可以为了变化而变化;

个性:为了体现产品特征的自由随意,另类个性感觉,把文字做随意切割处理,即符合画面风格效果,又显得个性化,文字的切割各人也可以处理出多种不同效果;

到这里页面已经完成了;

总结
共性》变化》个性,这是一个流程,共性的元素规矩,没有特色但是也没有缺陷;变化是在共性中找出常见的变化,只是变化,而不能体现个性,比如,文字由大到小的缩放,每个人操作后都可以是一个结果,而把图形切割,则是各人得到的结果不同,这就是个性。
更多精彩内容其他人还在看

sitemesh教程-页面装饰技术原理及应用

Sitemesh是一种页面装饰技术:它通过过滤器(filter)来拦截页面访问,据被访问页面的URL找到合适的装饰模板等等,感兴趣的朋友可以了解下哦
收藏 0 赞 0 分享

浏览器可以注册的事件小结

我们在网页制作中经常会用到浏览器事件,这里简单的整理下方便需要的朋友
收藏 0 赞 0 分享

从image/x-png谈ContentType(s)

今天在做一个文件上传的功能的时候,发现我总是上传不了png的图片。经过调试发现,应该是在ContentType的地方判断失误了。后来百度了一下发现一个有意思的现象,我发现png的图片的ContentType并不是我在注册表中看到的image/png,而是image/x-png
收藏 0 赞 0 分享

窗口中的各种距离/滚动距离的精确计算汇总

平时在项目开发中,没少跟边距,位置,坐标什么的打交道,悲剧的是,如果你对这些东西没有非常清晰的概念,编码的时候会非常痛苦,到处找资料寻求距离的精确计算,接下来本文提供一个示意他,希望对你有帮助
收藏 0 赞 0 分享

web的各种前端打印方法之CSS控制网页打印样式

使用CSS控制打印样式,握刚刚使用时一塌糊涂,根本不知道CSS中的midia的作用是什么,问到别人说导入这个样式,还傻乎乎的不知所措,接下来介绍CSS控制网页打印样式是如何实现的
收藏 0 赞 0 分享

响应式WEB设计学习(1)—判断屏幕尺寸及百分比的使用

现在移动设备越来越普及,用户使用智能手机、pad上网页越来越普遍,但是传统的fix型的页面在移动终端上无法很好的显示。因此,Ethan Marcotte提出一种响应式web设计的概念,响应式web设计的英文为Responsive Web Design,简写为RWD,感兴趣的朋友可
收藏 0 赞 0 分享

响应式WEB设计学习(2)—视频能够做成响应式吗

除了图片以外,还有一种常见的多媒体形式是视频。有时在web设计中,根据需要会在页面中加入视频,视频大小的自适应单靠CSS本身似乎是做不到的,感兴趣的朋友可以详细了解下
收藏 0 赞 0 分享

响应式WEB设计学习(3)—如何改善移动设备网页的性能

究竟是网页中的何种元素拉低了网页在移动设备中加载的速度呢?这些元素应该做何处理以提升页面在移动设备中的整体性能?是否存在一种设计模式可以同时满足移动端及桌面端的页面设计呢?带着这些疑问开始本文之旅吧
收藏 0 赞 0 分享

网页设计必备手册 216网页安全色大全

网页安全色是指在不同硬件环境、不同操作系统和不同浏览器中都能够正常显示的颜色集合(调色板或者色谱),也就是说这些颜色在任何终端用户的显示设备上都是相同的效果
收藏 0 赞 0 分享

网页设计中设计出有层次感的界面的经验介绍

很多网友常说自己的网站为什么色彩上总是有问题,总是看起来没什么精神,没办法吸引人注意。观察了一些网友们设计的网站发现他们在用色上不够大胆,同时也缺乏对色彩层次的理解。
收藏 0 赞 0 分享
查看更多