企迪网-免费的企业信息发布平台 加入收藏
企迪网

网站设计之界面设计必备-色彩搭配主流!

日期:2016-02-02 来源:企迪网 作者:管理员
关键字:网站设计,界面设计,色彩搭配,北京网站设计

快过年了,大家是不是都没有心情工作了呢,都在想象着回家该准备什么吧,企迪苦逼设计师和技术们在工作哦,下面北京网站设计小编来分享一篇那么如何快速的选择或搭配颜色呢?

“选择”和“搭配颜色”,听到这两个词汇的时候,是不是从潜意识上就会有反感。

第一招:色不过三

经常很多大神在网上说配色不要超过三种色,在这我只说三遍,色不过三,色不过三,色不过三!不管是做平面也好,还是网页,还是做APP等设计,都需要遵守这个基本的道理。

那啥才算是不超过三种颜色的搭配呢?

在这里很多人都会认为就是不要超过三种不同的颜色值。其实不然,不超过三种颜色的搭配,是指不超过三种色相的搭配。在单个色相中可以运用颜色明度或饱和度做色彩的丰富性,而色相不要过三!

网站设计

如果最做网站设计时界面的颜色太多,炫酷的眼花缭乱是个什么样的效果?

是的,我们单纯的就想找份合适的工作,过上幸福美好的生活。

我们来做一个对比。有一种设计,叫别人家的设计。绿色永远是品牌色,红色就是网站的装点色,这就叫传承。

统一的主色彩风格的导向,能加强用户对产品的记忆程度,也然产品的体验感更加舒适和自然。

那是不是越简洁的颜色就最好?

那咱就只用一种颜色得了。下图中单一颜色和多种色相颜色配色下的对比,我们可以看到在单一颜色下的设计更为统一,画面更为和谐。在多种颜色下界面中的功能模块更为明确,区分性更强,所以说在使用多种颜色的时候还需要考虑产品的内容与核心。

网站设计

三色搭配,只要控制在不超过三种色相的范围即可。学过画画的商业设计师,应该都清楚知道颜色的明度、暗度、饱和度。

运用单色的设计,会显得单调乏味。而整体颜色饱和度过低会导致画面沉闷而不透气。明快的颜色和明暗的色彩搭配能使画面显得层次感丰富而又有朝气。

做精致的颜色,提炼逼格。

网站设计中,色彩是设计中的重中之重,是否正确和完整的表现出产品气质至关重要。单一的色相,丰富的明度和饱和度能使界面看的有层次感和丰富性。而精简的色,处理器来也会跟容易统一和把控。在用色时,颜色越少越好,但要保证正确的传达出需要表现的功能和元素为前提。在我们每添加一种颜色的时候都需要好好的考虑一下,有没有必要。因为再复杂的设计,也不会多个三种主色彩。

网站设计

以下界面为了区分更多的内容区域运用了三种颜色,但因为颜色过度导致页面分割凌乱,红色在页面中就是多余的,功能分割相对也是多余的。可以用两种颜色时候,就不要用到三种颜色。可以用一种颜色的时候就不要用三种颜色。简洁,会使作品更为成熟。

在桌面图标设计中,常常也会用到两色和三色的搭配形式。这样的配色能使图标显得简约而不乏味。

第二招:确定主色

在运用色彩进行设计的时候,心里要有数。色彩的主次关系能定作品的性。优秀的作品色彩就是那么的清晰,

记住色彩功能的划分:主要色、辅助色、装点色。

网站设计

主色的魅力

主色决定设计的风格

在设计中色彩充当了重要的情感元素,那主色就是作品的文化方向。我们在设计初期需要对项目有明确的了解后提炼选择出最为贴切的主色进行定位。

每种颜色承载的文化都是不同的,会领导了整个界面设计的方向。

网页设计、移动界面设计、banner设计、平面设计……不同的媒介,主色的运用规律各不相同。网页设计和界面设计,通常主色运用在结构和装饰。而Banner和海报为了更为醒目,主色通常运用在背景颜色上。

在界面设计中常将品牌LOGO的颜色定为主色彩,并且在不同的界面中主色彩出现的面积也会随之变化。

在banner和海报的设计中主色的面积一般会运用在背景色中,相对面积较大。可谓是直奔主题式。

第三招:从对比色中找辅助色

通常大家觉得只要色彩面积最多就是主色。其实不然,人们的阅读心理是有差异的,如果颜色饱和度较低容易被相对面积少的高饱和度颜色抢眼,所以在定义界面主色的时候要悬着饱和度(纯度)高的颜色作为主色会比较的稳定。

网站设计

在界面设计汇总使用互补色彩的对比是最为强烈的。这种色彩能使用户的视觉产生强烈的刺激,情感浓烈,给人留下鲜明的印象。这种方式是最易于传播的。适合在夸张的、张扬的场景下使用。但这种颜色用的太过于平凡容易造成用户的视觉疲劳。给人一种不安定的感觉。那么在使用这样的搭配方式时需要控制使用的位置和信息的面积了,核心的地方可以这样去使用。


主要的三对互补色:红绿、蓝橙、黄紫


我们可以看到很多APP的icon为了吸引用户的注意就用到了强烈对比的互补色

番茄快点、QQ空间、相机360

色彩中还会运用到冷暖对比

网站设计

冷暖对比色是自然平衡的规律,可以在设计中大量使用,这样的配色会使作品非常的出彩,不显单调。

网站设计

在设计中,冷色与暖色的对比是界面设计中最为广泛的使用方法,效果也非常的出众。

色彩好比就是阴阳太极,冷与暖的两级平衡还原了生活中的和谐。用这样的配色效果让用户感觉舒服平和。

冷暖色彩搭配的方法基本没有啥缺点,使用在设计中,技巧性比较多,对设计的细腻感受要求比较高。

虽然支付宝的主图标发生了改变,变成了简洁的蓝色支付宝,但主页面中还是利用到了冷色与暖色的搭配,很好的区分了分类,并且让页面中丰富的分类变得不是那么得零散。很多设计师每次碰到满版分类图标的时候很头大,处理的时候容易把页面搞花了,建议使用冷暖的方式去调整,将页面平衡好。

当时米醋哥在设计360防丢器的时候就用了两个色,红色和蓝色的冷暖搭配。将360字体样式融入到建筑中取用了暖红色,而寻找位置的大头针运用了冷蓝色。

“无营销不网站”,今天关于网站设计的文章就写到这里,还是老样子,如果大家觉得有用,可以直接收藏北京网站建设的官方网站,我们相互交流,共同学习。

文章引用:http://www.qeerd.com/news/show-1060.aspx
分享到:
  • 北京汇祥林科技有限公司北京汇祥林科技有
  • 北京企迪信息技术有限公司西安分公司北京企迪信息技术
  • 用友金融信息技术有限公司用友金融信息技术
  • 广州红帆电脑科技有限公司广州红帆电脑科技
  • 北京九恒星科技股份有限公司北京九恒星科技股
  • 中创软件工程股份有限公司中创软件工程股份
  • 万达信息股份有限公司万达信息股份有限
  • 华三通信技术有限公司华三通信技术有限
  • 远光软件远光软件
  • 擎天科技擎天科技
  • 用友软件股份有限公司用友软件股份有限

周威——北京中百信工程

周威,1978年9月出生,毕业于香港理工大学,软件工程硕士,高级工程师。中电企协信息监详细>

刘庆波 中国碳市场IT服

北京中百信软件技术有限公司是一家专业从事权益交易行业信息技术咨询、软件设计研发、及详细>