室内设计培训
平面设计培训
部落窝教育
网站首页 >> 设计在线 >> UI设计 >> 文章内容

色彩搭配原理与技巧:界面设计配色三招(中)

[日期:2016-05-21]   来源:IT部落窝  作者:IT部落窝   阅读:271[字体: ]

色彩搭配原理与技巧第二刀:确定主色

   在运用色彩进行设计的时候,心里要有数。色彩的主次关系能定作品的性。优秀的作品色彩就是那么的清晰。记住色彩功能的划分:主要色、辅助色、装点色。
 
主色的魅力:主色决定设计的风格
 
  在设计中色彩充当了重要的情感元素,那主色就是作品的文化方向。我们在设计初期需要对项目有明确的了解后提炼选择出最为贴切的主色进行定位。
 
  每种颜色承载的文化都是不同的,会领导了整个界面设计的方向。
 
  网页设计、移动界面设计、banner设计、平面设计……不同的媒介,主色的运用规律各不相同。网页设计和界面设计,通常主色运用在结构和装饰。而Banner和海报为了更为醒目,主色通常运用在背景颜色上。
 
  在界面设计中常将品牌LOGO的颜色定为主色彩,并且在不同的界面中主色彩出现的面积也会随之变化。
 
  下图我们可以看到大众点评、百度外卖、美团应用都将产品LOGO的颜色进行了延续,将logo颜色定义为主色彩,有效的统一了产品的传播性。
色彩搭配原理与技巧
 
界面设计颜色搭配
 
UI教程
 
  同时还发现,这几个产品的界面设计主色面积使用也是非常一致。首页中使用的主色彩面积较大,导航条全部填充了主色。在二级页面中则使用的面积较少,将主色点缀到界面中。
 
  我们可以这样去理解,在用户使用产品时,更希望用户记忆产品。而在用户进入了信息页面时则更注重易用性,希望用户能找到自己需要的东西。所以主色在首页使用的面积较多,而二级页面使用在关键的操作点上。从产品角度出发,我们在使用主色的时候要考虑页面的内容关系,理解界面的层次与功能性质。从视觉出发,选择了饱和度较高的色彩做为主色时,要考虑因为颜色面积过多而造成的视觉疲劳。
UI界面设计
 
  在banner和海报的设计中主色的面积一般会运用在背景色中,相对面积较大。可谓是直奔主题式。
banner和海报的设计
IT部落窝PS,CDR,213班 分享到: QQ空间 新浪微博 腾讯微博 人人网
photoshop教程
Photoshop教程
平面设计教程
Photoshop教程