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

时间：2016-02-01 08:31:55 阅读：128 评论：0 收藏：0 [点我收藏+]

前言：看本教程，必须先仔细看前言的内容,否则会进入误区！
最近在做个性休闲服装内网站的设计课程，过程中发现，个性元素的应用成为最难的问题，第一项目风格适合使用什么样的个性元素；其次，个性元素如何把握，什么样的元素才是个性元素，才能突出项目定位；
这里聊的共性与个性纯粹是在本人对网页设计中的装饰元素总结的应用，不代表其它方面的解释，“共性与个性”也是个人用来区分常规元素与个性元素的用词，大家可以理解为正规的突破的；
了解共性与个性

共性解释：共性就是常规的东西，自然存在并被人们认可的；比如一条直线，是恒久不变的元素，这就是共性；又比如我们穿的衣服，长袖、短袖、长裤、短裤，按正常人标准生产的；这些也是共性；个性解释：个性是相对与共性来说的，与共性不同的元素，就是个性；比如每个人画出来的随意的线是千差万别的，这就是个性的元素；又比如，本来是正常的牛仔裤，年轻人最喜欢把他剪破，或者打个补丁什么的，显得与众不同，这也是个性。
举例：
1、掌握共性元素与个性元素；把共性元素变异形成个性元素；
常理，把线条按等距离平均排列看起来很整齐，只要按照等距排列，最终效果是一样的，没有特色也没有缺陷，大家都不会觉得有问题；个性处理，随意排列线条，使得线条间距不等，形成随意的节奏感；每个人排列的最终效果都不一样，最终会有好有差，所以比较难把握；
技术分享

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

严重注意：效果是为页面服务，效果必须符合页面风格；
效果始终是为页面风格服务的，如果你没有搞清楚页面要表达的风格，而随意的使用不同效果，最终是没有说服力的；

案例分析
风格定位：CONVERSE是一个非常个性的服饰品牌，从它的官方网站中我们可以看到，设计非常个性，代言人也是特意选择很有个性的摇滚乐明星，所以，设计定位要体现其个性的风格；
我们来分析一下整个设计过程：
1、第一步，确定好页面必要元素，比如，标志，广告文字，模特，版权等，这些必要元素；然后确定大概色调，要体现比较酷的个性，使用灰色系比较容易达到效果；这里使用偏暖的色调搭配黑色，使用红色为突出色；此时，整个版面中规中矩，使用的都是共性的一些元素，有任何特色及个性，与一般页面设计没有区别；
技术分享

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

共性：黑灰组合，简单直白的交界，没有特色，但是也无可挑剔缺陷；
技术分享

个性：黑灰组合，使用随意的线条过渡，方法较简单，可以使用笔刷，也可以使用直线工具画折线；每个人画出的效果会不一样，注意疏密有间，随意自然！
技术分享

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

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

共性：使用大小一致的元素，整齐、协调，但是没有任何变化与个性；
技术分享

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

以下页面，元素有大小的变化，距离位置的变化，但是整体感觉松散，有些散乱；
技术分享

应该像以下案例要做到有疏有密，有主有次，近大远小，进密远疏，随意自然！
技术分享

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