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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

到这里页面已经完成了;

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

CSS中浏览器对尺寸和宽高解释差异的解决方法

不同的浏览器对margin、padding、height、width 等属性的解释有很大的偏差。有时我们发现同样的两列布局,在不同的浏览器中两列长短不一,类似的情况太多了,如此困扰大家的麻烦,如何解决?
收藏 0 赞 0 分享

网页变灰的笔记 细节问题处理

grayscale.js这个文件是用来兼容各个浏览器的,在一般情况下,使用它绝对不会有问题,但是在实际的操作中,还是遇到了一些麻烦。
收藏 0 赞 0 分享

页面中marquee与flash同时存在时的冲突解决方案

冲突的症状主要表现在FLASH按钮一直跳动,不稳定,影响网页美观及正常访问。
收藏 0 赞 0 分享

提高网站访问速度的六种方法

以下6种优化方法都是前端的,前端优化的意义在于减少http请求,减少网站前端程序组成的体积。
收藏 0 赞 0 分享

新鲜出炉的有用图标集25组 国外下载

恰当的图标(ICON)能使网站更具活力 曾几何时,现在的网站图标大同小异,我们的眼睛早已见惯不惊。于是,这里收集了25套专业设计的全新的图标集,希望对你有用!
收藏 0 赞 0 分享

新手建站教程 十天学会做网站

十天学会做网站教程采用最通俗易懂的语言、从最基本的开始,带领大家开始建站。教程由许耀鹏历时半年时间写成。是非常好的新手建站入门教程。
收藏 0 赞 0 分享

新手建站入门教程 建站需要的条件和工具

很多新手在论坛都会说,我从来没做过网站,做网站需要些什么条件啊,会不会很难啊?
收藏 0 赞 0 分享

新手建站入门教程 域名的解析与绑定

昨天我们讲到了建立一个属于自己的网站需要的条件和工具,里面讲到首先需要注册一个属于自己的域名,和需要购买一个虚拟主机。(详情请看:新手建站第一帖:建站需要的条件和工具)
收藏 0 赞 0 分享

新手建站入门教程③ 别名(CNAME)记录和URL转发

在上一帖中为大家介绍了域名的解析和A记录解析的方法,今天我就为大家讲解一下另一种解析方法:别名(CNAME)记录。同时为大家讲解下URL转发的好处和方法。
收藏 0 赞 0 分享

新手建站入门教程④:如何绑定子目录

去买空间的时候,我想很多朋友都已经注意到了,有的空间介绍上会有类似于“支持绑定1个子目录”、“赠送1个子目录”等词。那么这些介绍是什么意思呢?
收藏 0 赞 0 分享
查看更多