精品教程

时间:2015-05-04

魔兽世界石头人游戏动作

AAA最新开班信息

UI设计经典就业班

【开班时间】4-12
【人数限定】限招18人
预约试听
在线报名
X
姓名|NAME
手机|PHONE
城市|CITY
QQ邮箱|EMAIL
填写QQ邮箱即可订阅免费学习资料
*安全报名,个人信息不外泄

UI设计自学指南-平面设计理论之配色

推荐: admin

针对0基础同学,学习UI设计的一些方法

很多有设计基础的同学转行做UI设计师,作为一个刚入行的新人,你是否会被以下问题所困扰?

我参照了模板,为什么最终效果很别扭。

为什么我的页面总是很花哨?

客户:产品不突出,标题不醒目。

领导:色彩单调,不够活泼。

因为元素间的色相,明度,饱和度,调和不合理,所致。

一、色彩原理

色相

色相即每种色彩的相貌,名称,如:红、桔红、翠绿、湖蓝、群青等。色相是区分色彩的主要依据,是色彩的最大特征。

明度

明度即色彩的明暗差别,也即深浅差别。色彩的明度差别包括两个方面:一是指某一色相的深浅变化,如粉红、大红、深红,都是红,但一种比一种深。二是指不同色相间存在的明度差别,如六标准色中黄最浅,紫最深,澄和绿、红和蓝处于相近的明度之间。

纯度

纯度即各色彩中包含的单种标准色成分的多少。纯的色色感强,即色度强,所以纯度亦是色彩感觉强弱的标志。不同色相所能达到的纯度是不同的,其中红色纯度最高,绿色纯度相对低些,其余色相居中,同时明度也不同。
配色达人速成指导

 

色相对比的类型

两种以上的色彩组合后,由于色相差别而形成的色彩对比效果称为色相对比。

色彩对比强弱程度取决于色相之间在色相环上的距离(色度),距离(角度)越小对比越弱,反之则对比越强。

二、是什么在影响我们的视觉?

明度对比推移效果

配色达人速成指导

色相对比推移效果

配色达人速成指导

饱和度对比推移效果

配色达人速成指导

清晰度对比推移效果

配色达人速成指导

结论

人眼容易区别:明暗对比强,色相反差大,饱和度高,细节丰富的图片。

三、看同行中的高手是如何设计的?



通过上面几组作品,我们发现它们的设计都有一些共性。

共性:

①产品:色相对比强烈  明暗反差大

②标题:色相对较弱或无 明暗反差大

③内容:明暗反差较强  无色相区别

四、是什么在影响我们的视觉?

我要的是什么颜色

当自己不清楚想要什么感受的色彩时,找找能承载你情感寄托的媒介物吧!

照片,图片,服装,任何可能的东西,只要能表达出你想要的感受的,都是模仿对象。

他们代替你说出了你想要的感觉,通过对这些媒介物的分析和提取,能找到响应的色彩。

用什么颜色来搭配

长用配色方案

同色相对比

一种色相的不同明度或不同纯度变化的对比,俗称同类色相合。如蓝与浅蓝(蓝+白)色对比,绿与粉绿(绿+白)与黑绿(绿+黑)色等对比。对比效果统一、文静、雅致、含蓄、稳重,但也易产生单调、呆板的弊病。

相近色相对比

色相环上相邻的二至三色对比,色相距离大约30度左右,为弱对比类型。如红橙与橙与黄橙色对比等。效果感觉柔和、和谐、雅致、文静,但也感觉单调、模糊、乏味、无力,必须调节明度差来加强效果。

类似色相对比

色相对比距离约60度左右,为较弱对比类型,如红与黄橙色对比等。效果较丰富、活泼,但又不失统一、雅致、和谐的感觉。

中度色相对比

色相以对比距离约90度左右,为中对比类型,如黄与绿色对比等,效果明快、活泼、饱满、使人兴奋,感觉有兴趣,对比既有相当力度,但又不失调和之感。

对比色相对比

色相对比距离约120度左右,为强对比类型,如黄绿与红紫色对比等。效果强烈、醒目、有力、活泼、丰富,但也不易统一而感杂乱、刺激、造成视觉疲劳、一般需要采用多种调和手段来改善对比效果。

在线配色器

http://kuler.adobe.com/

http://colorschemedesigner.com/

大家也可以加入我们交流QQ群,下载配色神器

颜色有了如何搭配

例:

一个活动页面中通常由以下元素组成(五角星代表重要性)

标题(★★★)

产品(★★★★)

副标题(★★)

活动详情(★)

背景图案

我的配色口诀 近实远虚

近实远虚

最早接触这个词,是在高中接受专业培训时,色彩老师每天唠叨的一个词。

老师:“同学 暗部太亮”

“后面景物要简化”勾勒一个大概的轮廓就可以了~

“眼睛要深”

网页设计和绘画一样,它也必须遵守近实远虚的原则(走梵高路线的同学请绕行),近处的渔船 艳丽的人物 就是你的产品,后面灰蒙蒙的山水 就是你的网页背景。

成功的本色方案是理智与情感的化身

大家千万别觉得成为UI设计师就赶紧学Photoshop、Illustrator…… 要清楚的知道,这些软件只是工具,并不能让你成为设计师,正如你买了一套很昂贵的画笔,也不一定会成为艺术家。从基础开始,学习平面设计理论,这里简单为自学UI设计的同学理清一些思路,更多PS学习交流请加入我们QQ群:151847208。