页面设计之个性元素与共性元素
前言：看本教程，必须先仔细看前言的内容,否则会进入误区！最近在做个性休闲服装内网站的设计课程，过程中发现，个性元素的应用成为最难的问题，第一项目风格适合使用什么样的个性元素；其次，个性元素如何把握，什么样的元素才是个性元素，才能突出项目定位；
这里聊的共性与个性纯粹是在本人对网页设计中的装饰元素总结的应用，不代表其它方面的解释，“共性与个性”也是个人用来区分常规元素与个性元素的用词，大家可以理解为正规的突破的；
了解共性与个性
1、共性解释：共性就是常规的东西，自然存在并被人们认可的；比如一条直线，是恒久不变的元素，这就是共性；又比如我们穿的衣服，长袖、短袖、长裤、短裤，按正常人标准生产的；这些也是共性；
2、个性解释：个性是相对与共性来说的，与共性不同的元素，就是个性；比如每个人画出来的随意的线是千差万别的，这就是个性的元素；又比如，本来是正常的牛仔裤，年轻人最喜欢把他剪破，或者打个补丁什么的，显得与众不同，这也是个性。
举例：
1、掌握共性元素与个性元素；把共性元素变异形成个性元素；
常理，把线条按等距离平均排列看起来很整齐，只要按照等距排列，最终效果是一样的，没有特色也没有缺陷，大家都不会觉得有问题；个性处理，随意排列线条，使得线条间距不等，形成随意的节奏感；每个人排列的最终效果都不一样，最终会有好有差，所以比较难把握；
[img]http://www.51add.com/tech/images/image002.jpg[/img]
[img]http://www.51add.com/tech/images/image004.jpg[/img]
常理：我们用很多元素连成一条线，感觉很整齐；个性，把元素分散随意摆放，形成大小不一，间距不一的点，使得它们组成的图形富有节奏感；
[img]http://www.51add.com/tech/images/image006.jpg[/img]
严重注意：效果是为页面服务，效果必须符合页面风格；
效果始终是为页面风格服务的，如果你没有搞清楚页面要表达的风格，而随意的使用不同效果，最终是没有说服力的；
案例分析
风格定位：CONVERSE是一个非常个性的服饰品牌，从它的官方网站中我们可以看到，设计非常个性，代言人也是特意选择很有个性的摇滚乐明星，所以，设计定位要体现其个性的风格；
我们来分析一下整个设计过程：
1、第一步，确定好页面必要元素，比如，标志，广告文字，模特，版权等，这些必要元素；然后确定大概色调，要体现比较酷的个性，使用灰色系比较容易达到效果；这里使用偏暖的色调搭配黑色，使用红色为突出色；此时，整个版面中规中矩，使用的都是共性的一些元素，有任何特色及个性，与一般页面设计没有区别；
[img]http://www.51add.com/tech/images/image010.jpg[/img]
2、根据产品的风格定位，逐步把页面个性化；为了体现自由、个性，我们把底部的黑色块做变化处理，使用一些随意的线条装饰，使得黑色与灰色交界不那么死板，形成随意的衔接；
[img]http://www.51add.com/tech/images/image012.jpg[/img]
共性：黑灰组合，简单直白的交界，没有特色，但是也无可挑剔缺陷；
[img]http://www.51add.com/tech/images/image014.jpg[/img]
个性：黑灰组合，使用随意的线条过渡，方法较简单，可以使用笔刷，也可以使用直线工具画折线；每个人画出的效果会不一样，注意疏密有间，随意自然！
[img]http://www.51add.com/tech/images/image016.jpg[/img]
3、背景：灰色渐变背景稍显简单，但是也不一定要使用非常复杂的背景，这里使用深浅不同的色块交错，使得画面背景一些就可以了；
[img]http://www.51add.com/tech/images/image018.jpg[/img]
4、个性化装饰元素：这一点是比较难把握的，因为个性化比较抽象，我们都不好把握；这里要做到的就是，装饰元素要符合页面风格，要与页面整体风格统一协调；
这里使用了接近插画的处理效果，随意流畅，大小有致，有主有次；目的是要表达对人物的束缚或者简单的理解为装饰；
[img]http://www.51add.com/tech/images/image020.jpg[/img]
共性：使用大小一致的元素，整齐、协调，但是没有任何变化与个性；
[img]http://www.51add.com/tech/images/image022.jpg[/img]
个性：元素做大小、位置等的变化，形成非常有节奏感和空间的的图形，组成有个性的元素；所有元素都是随意摆放，每个人都可以摆出不同的图形；不过要把握这些元素组成图形的整体感，不要太松散，要有对比；
[img]http://www.51add.com/tech/images/image024.jpg[/img]
以下页面，元素有大小的变化，距离位置的变化，但是整体感觉松散，有些散乱；
[img]http://www.51add.com/tech/images/image026.jpg[/img]
应该像以下案例要做到有疏有密，有主有次， 近大远小，进密远疏，随意自然！
[img]http://www.51add.com/tech/images/image028.jpg[/img]
5、个性化人物：这里先要分析人物可不可以做修饰处理，什么修饰适合他；比如，如果我们做正式装，那么我们就不应该用一些元素去修饰人物了；而个性休闲装可以适当的做修饰，使得产品的个性风格更加凸显；
这里根据人物动作造型和画面空间考虑修饰，使用类似翅膀的造成，这样可以衬托产品自由休闲的特性，又给人视觉上的不同；但是这里并没有使用真实的翅膀，而是象形的元素；使用真实的翅膀容易显得太具象，与画面风格不符合；当然也可以使用画出来的翅膀，只要你能画！
[img]http://www.51add.com/tech/images/image030.jpg[/img]
共性：方形色块，最普通的元素，没有什么特色，但是也没有什么问题，但是我们可以给它造型；
[img]http://www.51add.com/tech/images/image032.jpg[/img]
变化：我们把他改变成翅膀的大体形状，这个你应该知道吧，如果不知道翅膀的形成，到网上找张图片看看，只要像翅膀，随便画成什么形状；
[img]http://www.51add.com/tech/images/image034.jpg[/img]
个性：一大块色彩显得呆板，没有张力，为了体现翅膀的张力，把色块做分隔，分隔成若干小色块，分隔应该注意，斜线才会显得有速度和张力感，随意分隔才会显得个性十足；
[img]http://www.51add.com/tech/images/image038.jpg[/img]
6、广告文字个性化：选择好合适的字体，可以对文字做修饰，以符合页面风格；
[img]http://www.51add.com/tech/images/image040.jpg[/img]
共性：最正式的字体，常规而没有特色，当然，也找不出什么问题；
[img]http://www.51add.com/tech/images/image042.jpg[/img]
变化：为了迎合画面效果，可以做适当变化，不过变化要符合页面风格，不可以为了变化而变化；
[img]http://www.51add.com/tech/images/image044.jpg[/img]
个性：为了体现产品特征的自由随意，另类个性感觉，把文字做随意切割处理，即符合画面风格效果，又显得个性化，文字的切割各人也可以处理出多种不同效果；
[img]http://www.51add.com/tech/images/image048.jpg[/img]
到这里页面已经完成了；
[img]http://www.51add.com/tech/images/image040.jpg[/img]
点击看大图
总结：共性》变化》个性，这是一个流程，共性的元素规矩，没有特色但是也没有缺陷；变化是在共性中找出常见的变化，只是变化，而不能体现个性，比如，文字由大到小的缩放，每个人操作后都可以是一个结果，而把图形切割，则是各人得到的结果不同，这就是个性；
最后说明，由于这不是写作，文中的用词及语句都是简单通俗的文字，表达中肯定有不经如人意的地方，如有此类问题在此表示致歉，希望不至于误导观众；另外，个中案例非正式项目，是个人根据需求进行的设计演示，非商业用途！
转载地址：[url]http://www.51add.com/post/141.html[/url] 转载请注明版权，尊重他人劳动成果！ 不错啊，可惜没人顶 顶顶.
这样的贴子很珍贵! 很不错的教程 收下 谢谢楼主，辛苦了～～ 好贴 顶上去:D 好``学到了不少``` 恩，学习到不少好东西，支持下 谢谢楼主，学到不少东西！ 第一次看到这样分析设计的帖子！简而易懂。。。谢谢了！ 不错:) 恩不错学到了。 Thank you. :) 8错！！！ 学习了 Thank you. :) 好东西。。。。。。。顶 很棒,受教了!!! 通俗易懂加之图片, 很清晰明了. 收藏了THX 不错，说的太好，很有道理，图文结合，，太棒了。。。收藏 非常感谢楼主无私分享 学习中 早一段看过..觉得图不怎么样..就没细看
今天看字了..
还是瞒不错的.. 领教……！
页:
[1]