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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

到这里页面已经完成了;

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

网页设计技巧:iframe自适应高度的问题

所谓iframe自适应高度,就是,基于界面美观和交互的考虑,隐藏了iframe的border和scrollbar,让人看不出它是个iframe
收藏 0 赞 0 分享

网页色彩对比与调和技巧分享

在对比状态下,色彩相互作用与单一色彩所带给人的感觉不一样,这种现象是由视觉残影引起的。当我们长时间注视某一彩色图像之后,再看白色背景时,眼前会出现色相、明度关系大体相仿的补色图像
收藏 0 赞 0 分享

网页色彩性质的分类

任何颜色都可以使用三原色——红、绿、蓝组合而成,三原色中只有红色是暖色,所以要判断作品颜色的冷暖,可以依据红色成分的多少而定。色调主要由明度与彩度组合而成,用来表示颜色的状态
收藏 0 赞 0 分享

使用Photoshop 制作网页线框图简单实用

这篇文章向大家介绍一套免费的Photoshop 线框图套件,这个线框图套件中包括通知、图片和视频,表单字段,标题,段落,项目符号列表,导航,广告横幅和普通网站的元素,如:搜索框,电子邮件注册表单等等
收藏 0 赞 0 分享

CSS使用技巧总结

偶尔看到一篇CSS常用技巧的总结文章,本人整理了一下,晒出来和大家分享,希望可以帮助你们
收藏 0 赞 0 分享

Web设计师如何制作Retina显屏设备的图片

到目前为止,我们知道苹果设备中支持Retina屏幕技术的有“iPhone”、“iPod”、“iPad”和“Macbook Pro”,这些设备能为用户呈现更细腻、平滑和高质量的图片效果,提高了用户的视觉体验。做为一名Web设计师如何为你的网站创建这些适合Retina显屏设备的图片呢
收藏 0 赞 0 分享

JPG,GIF及PNG各类型的图片格式详细解说

大家都知道网页上面的图像一般用jpg、gif和png这几种格式,他们有什么区别以及在什么场合下使用进行详细介绍看了下面的内容后你可能会有了自己的结论
收藏 0 赞 0 分享

组件化的前端开发流程详细说明

做前端的同学都知道,做的页面多了,东西就会乱,因此我们需要统一一个开发流程,开发流程的好坏,直接影响着页面开发的效率,间接影响游戏的时间为了更好的开发,我们做了一下总结
收藏 0 赞 0 分享

我们在囧途之UI工程师职业感慨

我是一名还不算特别优秀的UI工程师;这个要先说明一下UI不是美工,美工是以图片方案设计为主的岗位,而UI是指用户交互体验的设计
收藏 0 赞 0 分享

分享8款提高网页设计出色的CSS工具

当一个人需要编辑或修改网站设计,CSS发挥着重要的作用;今天就给大家分享8款非常出色的CSS工具,这些工具都是很出名的,能够解决开发当中常见的棘手问题,希望对你开发有所帮助
收藏 0 赞 0 分享
查看更多