打造完美版式 掌握个性与共性因素.doc

打造完美版式 掌握个性与共性因素 共性解释：共性就是常规的东西，自然存在并被人们认可的；比如一条直线，是恒久不变的元素，这就是共性；又比如我们穿的衣服，长袖、短袖、长裤、短裤，按正常人标准生产的；这些也是共性； 个性解释：个性是相对与共性来说的，与共性不同的元素，就是个性；比如每个人画出来的随意的线是千差万别的，这就是个性的元素；又比如，本来是正常的牛仔裤，年轻人最喜欢把他剪破，或者打个补丁什么的，显得与众不同，这也是个性。 实例： 1、掌握共性元素与个性元素；把共性元素变异形成个性元素； 常理，把线条按等距离平均排列看起来很整齐，只要按照等距排列，最终效果是一样的，没有特色也没有缺陷，大家都不会觉得有问题；个性处理，随意排列线条，使得线条间距不等，形成随意的节奏感；每个人排列的最终效果都不一样，最终会有好有差，所以比较难把握； 图1图2 常理：我们用很多元素连成一条线，感觉很整齐；个性，把元素分散随意摆放，形成大小不一，间距不一的点，使得它们组成的图形富有节奏感； 图3 严重注意：效果是为页面服务，效果必须符合页面风格； 效果始终是为页面风格服务的，如果你没有搞清楚页面要表达的风格，而随意的使用不同效果，最终是没有说服力的； 案例分析 风格定位：CONVERSE是一个非常个性的服饰品牌，从它的官方网站中我们可以看到，设计非常个性，代言人也是特意选择很有个性的摇滚乐明星，所以，设计定位要体现其个性的风格； 我们来分析一下整个设计过程： 1、第一步，确定好页面必要元素，比如，标志，广告文字，模特，版权等，这些必要元素；然后确定大概色调，要体现比较酷的个性，使用灰色系比较容易达到效果；这里使用偏暖的色调搭配黑色，使用红色为突出色；此时，整个版面中规中矩，使用的都是共性的一些元素，有任何特色及个性，与一般页面设计没有区别；图4 2、根据产品的风格定位，逐步把页面个性化；为了体现自由、个性，我们把底部的黑色块做变化处理，使用一些随意的线条装饰，使得黑色与灰色交界不那么死板，形成随意的衔接； 图5共性：黑灰组合，简单直白的交界，没有特色，但是也无可挑剔缺陷； 图6 个性：黑灰组合，使用随意的线条过渡，方法较简单，可以使用笔刷，也可以使用直线工具画折线；每个人画出的效果会不一样，注意疏密有间，随意自然！ 图7 3、背景：灰色渐变背景稍显简单，但是也不一定要使用非常复杂的背景，这里使用深浅不同的色块交错，使得画面背景一些就可以了； 图8 4、个性化装饰元素：这一点是比较难把握的，因为个性化比较抽象，我们都不好把握；这里要做到的就是，装饰元素要符合页面风格，要与页面整体风格统一协调；这里使用了接近插画的处理效果，随意流畅，大小有致，有主有次；目的是要表达对人物的束缚或者简单的理解为装饰； 图9#p#副标题#e# 共性：使用大小一致的元素，整齐、协调，但是没有任何变化与个性； 图10 个性：元素做大小、位置等的变化，形成非常有节奏感和空间的的图形，组成有个性的元素；所有元素都是随意摆放，每个人都可以摆出不同的图形；不过要把握这些元素组成图形的整体感，不要太松散，要有对比；图11 以下页面，元素有大小的变化，距离位置的变化，但是整体感觉松散，有些散乱； 图12 应该像以下案例要做到有疏有密，有主有次，近大远小，进密远疏，随意自然！图13 5、个性化人物：这里先要分析人物可不可以做修饰处理，什么修饰适合他；比如，如果我们做正式装，那么我们就不应该用一些元素去修饰人物了；而个性休闲装可以适当的做修饰，使得产品的个性风格更加凸显； 这里根据人物动作造型和画面空间考虑修饰，使用类似翅膀的造成，这样可以衬托产品自由休闲的特性，又给人视觉上的不同；但是这里并没有使用真实的翅膀，而是象形的元素；使用真实的翅膀容易显得太具象，与画面风格不符合；当然也可以使用画出来的翅膀，只要你能画！ 图14 共性：方形色块，最普通的元素，没有什么特色，但是也没有什么问题，但是我们可以给它造型； 图15 变化：我们把他改变成翅膀的大体形状，这个你应该知道吧，如果不知道翅膀的形成，到网上找张图片看看，只要像翅膀，随便画成什么形状； 图16 个性：一大块色彩显得呆板，没有张力，为了体现翅膀的张力，把色块做分隔，分隔成若干小色块，分隔应该注意，斜线才会显得有速度和张力感，随意分隔才会显得个性十足； 图17 6、广告文字个性化：选择好合适的字体，可以对文字做修饰，以符合页面风格； 图18 共性：最正式的字体，常规而没有特色，当然，也找不出什么问题； 图19 变化：为了迎合画面效果，可以做适当变化，不过变化要符合页面风格，不可以为了变化而变化； 图20 个性：为了体现产品特征的自由随意，另类个性感觉，把文字做随意切割处理，即符合画面风格效果，又显得个性化，文字的切割各人也可以处理出多种不同效果； 图21 到这里页面已经完成了； 共性解释：共性就是常规的东西，自然存在并被人们认可的；比如一条直线，是恒久不变的元素，这就是共性；又比如我们穿的衣服，长袖、短袖、长裤、短裤，按正常人标准生产的；这些也是共性； 个性解释：个性是相对与共性来说的，与共性不同的元素，就是个性；比如每个人画出来的随意的线是千差万别的，这就是个性的元素；又比如，本来是正常的牛仔裤，年轻人最喜欢把他剪破，或者打个补丁什么的，显得与众不同，这也是个性。 实例： 1、掌握共性元素与个性元素；把共性元素变异形成个性元素； 常理，把线条按等距离平均排列看起来很整齐，只要按照等距排列，最终效果是一样的，没有特色也没有缺陷，大家都不会觉得有问题；个性处理，随意排列线条，使得线条间距不等，形成随意的节奏感；每个人排列的最终效果都不一样，最终会有好有差，所以比较难把握； 图1图2 常理：我们用很多元素连成一条线，感觉很整齐；个性，把元素分散随意摆放，形成大小不一，间距不一的点，使得它们组成的图形富有节奏感； 图3 严重注意：效果是为页面服务，效果必须符合页面风格； 效果始终是为页面风格服务的，如果你没有搞清楚页面要表达的风格，而随意的使用不同效果，最终是没有说服力的； 案例分析 风格定位：CONVERSE是一个非常个性的服饰品牌，从它的官方网站中我们可以看到，设计非常个性，代言人也是特意选择很有个性的摇滚乐明星，所以，设计定位要体现其个性的风格； 我们来分析一下整个设计过程： 1、第一步，确定好页面必要元素，比如，标志，广告文字，模特，版权等，这些必要元素；然后确定大概色调，要体现比较酷的个性，使用灰色系比较容易达到效果；这里使用偏暖的色调搭配黑色，使用红色为突出色；此时，整个版面中规中矩，使用的都是共性的一些元素，有任何特色及个性，与一般页面设计没有区别；图4 2、根据产品的风格定位，逐步把页面个性化；为了体现自由、个性，我们把底部的黑色块做变化处理，使用一些随意的线条装饰，使得黑色与灰色交界不那么死板，形成随意的衔接； 图5共性：黑灰组合，简单直白的交界，没有特色，但是也无可挑剔缺陷； 图6 个性：黑灰组合，使用随意的线条过渡，方法较简单，可以使用笔刷，也可以使用直线工具画折线；每个人画出的效果会不一样，注意疏密有间，随意自然！ 图7 3、背景：灰色渐变背景稍显简单，但是也不一定要使用非常复杂的背景，这里使用深浅不同的色块交错，使得画面背景一些就可以了； 图8 4、个性化装饰元素：这一点是比较难把握的，因为个性化比较抽象，我们都不好把握；这里要做到的就是，装饰元素要符合页面风格，要与页面整体风格统一协调；这里使用了接近插画的处理效果，随意流畅，大小有致，有主有次；目的是要表达对人物的束缚或者简单的理解为装饰； 图9#p#副标题#e# 共性：使用大小一致的元素，整齐、协调，但是没有任何变化与个性； 图10 个性：元素做大小、位置等的变化，形成非常有节奏感和空间的的图形，组成有个性的元素；所有元素都是随意摆放，每个人都可以摆出不同的图形；不过要把握这些元素组成图形的整体感，不要太松散，要有对比；图11 以下页面，元素有大小的变化，距离位置的变化，但是整体感觉松散，有些散乱； 图12 应该像以下案例要做到有疏有密，有主有次，近大远小，进密远疏，随意自然！图13 5、个性化人物：这里先要分析人物可不可以做修饰处理，什么修饰适合他；比如，如果我们做正式装，那么我们就不应该用一些元素去修饰人物了；而个性休闲装可以适当的做修饰，使得产品的个性风格更加凸显； 这里根据人物动作造型和画面空间考虑修饰，使用类似翅膀的造成，这样可以衬托产品自由休闲的特性，又给人视觉上的不同；但是这里并没有使用真实的翅膀，而是象形的元素；使用真实的翅膀容易显得太具象，与画面风格不符合；当然也可以使用画出来的翅膀，只要你能画！ 图14 共性：方形色块，最普通的元素，没有什么特色，但是也没有什么问题，但是我们可以给它造型； 图15 变化：我们把他改变成翅膀的大体形状，这个你应该知道吧，如果不知道翅膀的形成，到网上找张图片看看，只要像翅膀，随便画成什么形状； 图16 个性：一大块色彩显得呆板，没有张力，为了体现翅膀的张力，把色块做分隔，分隔成若干小色块，分隔应该注意，斜线才会显得有速度和张力感，随意分隔才会显得个性十足； 图17 6、广告文字个性化：选择好合适的字体，可以对文字做修饰，以符合页面风格； 图18 共性：最正式的字体，常规而没有特色，当然，也找不出什么问题； 图19 变化：为了迎合画面效果，可以做适当变化，不过变化要符合页面风格，不可以为了变化而变化； 图20 个性：为了体现产品特征的自由随意，另类个性感觉，把文字做随意切割处理，即符合画面风格效果，又显得个性化，文字的切割各人也可以处理出多种不同效果； 图21 到这里页面已经完成了； 图22 总结： 共性、变化、个性，这是一个流程，共性的元素规矩，没有特色但是也没有缺陷；变化是在共性中找出常见的变化，只是变化，而不能体现个性，比如，文字由大到小的缩放，每个人操作后都可以是一个结果，而把图形切割，则是各人得到的结果不同，这就是个性。图22 总结： 共性、变化、个性，这是一