请选择 进入手机版 | 继续访问电脑版
收藏本站腾讯微博新浪微博
点点网模板设计大赛 phpchina

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 用悬赏 三天解决问题 解决访问速度慢 论坛支持农历生日 - 给官方提建议

论坛活动及任务 归纳网站最新活动 地图任务 邮件更新任务:保护帐号安全

积分换实物,来参加蓝色理想积分兑换吧! 联系招聘客服 蓝色理想帮你找工作! 万元奖励等你拿——点点网模板设计大赛

查看: 1791|回复: 22

[教程] 页面设计之个性元素与共性元素 [复制链接]

zengjianhua 楼主
帖子
464
体力
1521
威望
5
居住地
广东省 深圳市
发表于 2008-7-3 15:47:47 |显示全部楼层
前言:看本教程,必须先仔细看前言的内容,否则会进入误区!
最近在做个性休闲服装内网站的设计课程,过程中发现,个性元素的应用成为最难的问题,第一项目风格适合使用什么样的个性元素;其次,个性元素如何把握,什么样的元素才是个性元素,才能突出项目定位;
这里聊的共性与个性纯粹是在本人对网页设计中的装饰元素总结的应用,不代表其它方面的解释,“共性与个性”也是个人用来区分常规元素与个性元素的用词,大家可以理解为正规的突破的;

了解共性与个性
1、共性解释:共性就是常规的东西,自然存在并被人们认可的;比如一条直线,是恒久不变的元素,这就是共性;又比如我们穿的衣服,长袖、短袖、长裤、短裤,按正常人标准生产的;这些也是共性;
2、个性解释:个性是相对与共性来说的,与共性不同的元素,就是个性;比如每个人画出来的随意的线是千差万别的,这就是个性的元素;又比如,本来是正常的牛仔裤,年轻人最喜欢把他剪破,或者打个补丁什么的,显得与众不同,这也是个性。

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




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



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


案例分析

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




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




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




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




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




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




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




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



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




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



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



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



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



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

        

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



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



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




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



到这里页面已经完成了;



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



最后说明,由于这不是写作,文中的用词及语句都是简单通俗的文字,表达中肯定有不经如人意的地方,如有此类问题在此表示致歉,希望不至于误导观众;另外,个中案例非正式项目,是个人根据需求进行的设计演示,非商业用途!
转载地址:http://www.51add.com/post/141.html  转载请注明版权,尊重他人劳动成果!
西部数码顶级域名注册商39元抢注!
帖子
100
体力
403
威望
0
发表于 2008-7-3 21:30:57 |显示全部楼层
不错啊,可惜没人顶
租服务器,上51IDC | [长沙]招聘:PHP经理10K/WEB前端6K/PHP开发6K

使用道具 举报

帖子
30
体力
83
威望
0
居住地
湖南省 长沙市
发表于 2008-7-3 22:17:26 |显示全部楼层
顶顶.

这样的贴子很珍贵!

使用道具 举报

yido 

易多

银牌会员

帖子
812
体力
1791
威望
0
居住地
北京市 海淀区
发表于 2008-7-3 22:38:03 |显示全部楼层
很不错的教程 收下

使用道具 举报

帖子
45
体力
202
威望
0
居住地
辽宁省 大连市
发表于 2008-7-4 08:56:14 |显示全部楼层
谢谢楼主,辛苦了~~

使用道具 举报

bifeih 
帖子
17
体力
64
威望
0
发表于 2008-7-4 11:21:48 |显示全部楼层
好贴  顶上去
天亮了

使用道具 举报

帖子
3
体力
17
威望
0
居住地
湖南省 长沙市
发表于 2008-7-4 11:56:52 |显示全部楼层
好``学到了不少```

使用道具 举报

小楠

银牌会员

帖子
751
体力
2641
威望
0
居住地
辽宁省 沈阳市
发表于 2008-7-4 15:00:49 |显示全部楼层
恩,学习到不少好东西,支持下

使用道具 举报

74sf 
帖子
813
体力
1448
威望
0
居住地
西藏自治区 拉萨市
发表于 2008-7-4 17:33:58 |显示全部楼层
谢谢楼主,学到不少东西!
  它又笑了

使用道具 举报

帖子
94
体力
370
威望
0
居住地
四川省 成都市
发表于 2008-7-4 17:59:48 |显示全部楼层
第一次看到这样分析设计的帖子!简而易懂。。。谢谢了!

使用道具 举报

帖子
93
体力
372
威望
0
居住地
天津市 河东区
发表于 2008-7-7 14:32:55 |显示全部楼层
不错

使用道具 举报

frogjy 
帖子
38
体力
133
威望
0
发表于 2008-7-7 17:18:48 |显示全部楼层
恩不错学到了。
www.8boo.com

我的小站

使用道具 举报

帖子
78
体力
313
威望
0
居住地
福建省 莆田市
发表于 2008-7-8 23:46:13 |显示全部楼层
Thank you.   

使用道具 举报

帖子
1
体力
24
威望
0
发表于 2008-7-9 09:03:01 |显示全部楼层
8错!!!

使用道具 举报

lenyes 

lenyes

高级会员

帖子
107
体力
713
威望
0
发表于 2008-7-9 10:06:44 |显示全部楼层
学习了

使用道具 举报

帖子
78
体力
313
威望
0
居住地
福建省 莆田市
发表于 2008-7-16 19:46:40 |显示全部楼层
Thank you.

使用道具 举报

rgber 
帖子
4
体力
20
威望
0
发表于 2008-7-16 21:35:37 |显示全部楼层
好东西。。。。。。。顶

使用道具 举报

松生空谷

高级会员

帖子
365
体力
849
威望
0
居住地
浙江省 温州市
发表于 2008-7-17 08:49:05 |显示全部楼层
很棒,受教了!!! 通俗易懂加之图片, 很清晰明了.

使用道具 举报

风兮

银牌会员

帖子
306
体力
1280
威望
0
发表于 2008-7-17 10:25:52 |显示全部楼层
收藏了THX
UI designer

使用道具 举报

帖子
70
体力
314
威望
0
居住地
云南省 昆明市
发表于 2008-7-17 11:47:50 |显示全部楼层
不错,说的太好,很有道理,图文结合,,太棒了。。。收藏

使用道具 举报

帖子
14
体力
38
威望
0
居住地
江苏省 南京市
发表于 2008-7-18 12:54:57 |显示全部楼层
非常感谢楼主无私分享 学习中

使用道具 举报

阿门设计

银牌会员

帖子
1405
体力
2915
威望
10
居住地
广东省 深圳市
发表于 2008-7-18 13:20:21 |显示全部楼层
早一段看过..觉得图不怎么样..就没细看

今天看字了..

还是瞒不错的..
视觉设计师
QQ:14346578

使用道具 举报

aitom 

仝草

金牌会员 手机认证 

帖子
285
体力
4429
威望
0
居住地
河南省 郑州市
发表于 2008-7-22 01:44:37 |显示全部楼层
领教……!

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

Archiver|手机版|安久科技提供CDN|blueidea.com ( 京ICP备05002321号 )  

GMT+8, 2012-2-13 07:42 , Processed in 0.132139 second(s), 10 queries , Gzip On, Memcache On.

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部