为新手量身打造的UI界面配色方法

   如何快速选择或搭配颜色?今天@Micu设计 和大家介绍在界面中最为常用的三个方法,简单实用,附上大量的优秀实例,特别适合刚入门的色彩新手,学起来!

  快过年了,大家手头上的事都很多,于是很多同学要设计活动页面或者APP界面大改版等,那么如何快速的选择或搭配颜色呢?“选择”和“搭配颜色”,听到这两个词汇的时候,是不是从潜意识上就会有反感,心理琢磨着,这绝对是个坑!肯定得翻来覆去的折腾一把。其实很多初学设计师都会碰到同样的问题。

  那我们就横刀直入的来说说这三招吧。

  第一刀:色不过三

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

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

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

  如果设计的界面的颜色太多,炫酷的眼花缭乱是个什么样的效果?下面我们来看看一家知名的招聘网站。

  我想你和我一样顿时泪流满面了~

  是的,我们单纯的就想找份合适的工作,过上幸福美好的生活。并没有那么简单,一进入主页面,刹那间,狗皮膏药铺面而来。这种感觉,我的小心脏顿时崩溃了……就一小小块面积,一个城市地址就出现了三种颜色。难道这样真的好吗?


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

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


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

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


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

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

  做精致的颜色,提炼格调

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

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


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

  第二刀:确定主色

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

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

  主色的魅力

  主色决定设计的风格。

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

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

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

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

  下图我们可以看到大众点评、百度外卖、美团应用都将产品LOGO的颜色进行了延续,将logo颜色定义为主色彩,有效的统一了产品的传播性。


  同时还发现,这几个产品的界面设计主色面积使用也是非常一致。首页中使用的主色彩面积较大,导航条全部填充了主色。在二级页面中则使用的面积较少,将主色点缀到界面中。

  我们可以这样去理解,在用户使用产品时,更希望用户记忆产品。而在用户进入了信息页面时则更注重易用性,希望用户能找到自己需要的东西。所以主色在首页使用的面积较多,而二级页面使用在关键的操作点上。从产品角度出发,我们在使用主色的时候要考虑页面的内容关系,理解界面的层次与功能性质。从视觉出发,选择了饱和度较高的色彩做为主色时,要考虑因为颜色面积过多而造成的视觉疲劳。


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


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

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

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

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

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

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


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

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


  我们先看看一下几款APP的icon设计:

  下面这款APP的名称叫KOI,很喜欢这款应用配色,运用到了冷暖配色,起了非常好的点缀效果,看起来灵动而醒目。


  Tweetbot的icon也用到了冷暖颜色的对比,是不是醒目又可爱啊,大家可以去试试这种搭配,百试百灵。


  Seedling Comic Studio,这款icon运用到了冷暖搭配显得由为的精彩,视线里面集中到了中心点上。


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

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

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

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


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


  好了,先写到这里。回顾一下今天我们讲的知识点。

  色不过三

  主色的定义,及面积

  找辅助色,还记的有那几对辅助色吗?

  今天和大家分享的这不仅是运用在界面中,更是选择颜色时至为重要的三个点!实用性极高!看似简单,大家运用起来还要多加分析哦~

时间: 2024-08-21 02:15:08

为新手量身打造的UI界面配色方法的相关文章

Algorithmia为“算法”量身打造应用商店

摘要: 对于普通用户,各种各样有趣的App是一种重要的商品,所以我们经常会到App Store里下载或者购买各种App.对于开发者而言,算法其实也是这样一种商品.Algorithmia是一个非常有趣的平台 对于普通用户,各种各样有趣的App是一种重要的商品,所以我们经常会到App Store里下载或者购买各种App.对于开发者而言,"算法"其实也是这样一种商品.Algorithmia是一个非常有趣的平台,它用App Store的模式为"算法"量身打造了一个类似的应用

企业CEO为学生量身打造“求职达人”

&http://www.aliyun.com/zixun/aggregation/37954.html">nbsp; 本报讯(记者 张瑜琨 通讯员 陈治国 唐小涛)求职网络走进课堂,企业CEO为学生量身打造"求职达人".昨日,华农首个求职网络课堂开班,"过来人"公司创始人兼CEO张有明给学员上第一节课. "你是否清楚自己适合什么行业?你是否清楚理想行业需要什么能力和条件--"昨日,张有明在课堂上为同学们首先介绍了什么是求职

在“互联网+”时代下,专为餐饮行业量身打造的智能管理系统!

传统的餐厅经营,日常运营中存在人力资本.物料损耗.设施设备.广告宣传推广等资金的投入.特别是在设施设备,前期需要投入大量资金,且后期还需进行维护,费用不小.传统的餐饮管理模式,除了在各种服务上存在体验问题,在餐厅后台中的厨房管理.账目清算和营销方面仍存在难题. 想要解决以上种种难题,企业需要一个能帮经营者开发客源.提高利润和轻松管理的软件. 百川快点--是为餐饮行业量身打造的智能管理系统,是一套集顾客排队管理.自主点餐下单.在线支付.服务呼叫.厨房实时管理.财务管理.大数据分析及在线评价等的互联

天天网会员互动:美丽 为你量身打造

"我们出售一个'梦想',只需参与到聚会中,你将会得到为你量身打造的美丽."你 参加过这种"会员营销"的聚会吗?近期,中国最大的正品化妆品http://www.aliyun.com/zixun/aggregation/18198.html">时尚购物网站--天天网(www.tiantian.com)将开始招聘美妆体验大使参加会员沙龙的活动. 据了解到,此次天天网会员沙龙并非常见的会员体验美妆.享受折扣的小聚会,而是化妆品品牌专家.美妆顾问等专业团队与消

为什么为褚时健量身打造的褚橙营销可以火爆,而柳桃则行不通

摘要: [编者按]柳传志出招,并不是没有招:让人接招,本身就已经是招.招天下之电商能人.营销高手.话题大王,完成一次柳桃的互联网式传播.口口相传,即使只是个屌丝,也可以成 [编者按]柳传志出招,并不是没有招:让人接招,本身就已经是招.招天下之电商能人.营销高手.话题大王,完成一次柳桃的互联网式传播.口口相传,即使只是个屌丝,也可以成为社会化营销的一部分. 洪流之中,泥沙俱下,前有雕爷抛砖引玉,后有此篇文章作者,褚橙的操盘手之一.生鲜 B2C 本来生活网前高管蒋政文.为什么为褚时健量身打造的褚橙营

五步为网站量身打造seo方案

在从事seo服务的过程中,都会给客户拟定一个详细的优化方案,优化方案在给客户提供参考的同时也展现了公司的实力,还为seo的工作提供系统的指导,所以一份内容全面具体的优化方案是seo的工作的开始.拿到优化项目要进行分析,优化方案就是把分析实体化,为客户提供准确的参考,看看有哪些问题需要分析和为客户展示. 当前网站数据 不论是新站还是老站在优化之前都要进行全面的体检,包括pr值.快照.收录量.百度导入链接.yahoo外链.alexa排名.关键词当前排名.这些数据最好有一个备份,截图或者表格,在优化过

谷歌高管抨击美国专利体制 需为行业量身打造

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 谷歌首席法顾问大卫·多姆德(腾讯科技配图) 腾讯科技讯(谭燃)北京时间10月10日消息,谷歌首席法顾问大卫·多姆德(David Drummond)周二对美国专利制度进行了抨击,称当前移动计算市场的专利大战是不合理的专利制度的产物. 当前,谷歌因为Android软件问题陷入多起专利诉讼纠纷之中.同样,三星和HTC等Android支持厂商也遭到了

工信部:广州量身打造天云计划

摘要:云计算作为一种基于互联网,动态.可伸缩且虚拟化地以服务方式提供计算资源的全新计算模式,是继个人电脑.互联网之后电子信息技术领域又一次重大变革,其影响范围和程度都很可能超越以往.在中国各地掀起云计算浪潮的同时,广州也制定了自己的天云计划. 一是建设一批国际先进的云计算基础设施.发挥国家信息通信枢纽优势,大力推进"光网城市".下一代广电网.第四代移动通信网和传感网络建设,实施"千兆进企.百兆到户"的宽带工程,全面推进泛在宽带网络建设.大力发展高效.节能.低碳的云计

盘点那些为新iPad量身打造的新“外衣”

五款造型新颖的保护壳星期五即将到来,新iPad也将正式发售.现在应该是时候为您的新iPad准备一款合适的保护壳了.为此我们精心为您挑选15款独具个性.火热畅销的新iPad保护壳供您参考.BookBook(Twelve South生产,$70)BookBookBookBook的保护壳都是纯手工制品,而且每一款都是世界上独一无二的那个.精装的皮质书皮和复古的外观使您无论从哪个角度看起来都像是在拿着一本真书.除此之外,这款保护壳还能起到iPad支架的功能,同样它也支持iPad 2.Booqpad(Bo