为新手量身打造的UI界面配色方法分享,按钮UI设计方法和技巧

色彩对比

主色决定设计的风格。

亚洲城网页版 1

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

亚洲城网页版 2

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

亚洲城网页版 3

亚洲城网页版 4

最后我们无论是在界面设计中做统一或对比,我们都要在整个产品的整体性基础之上来考虑,这样才能保证产品的完整性。同时我们在设计界面的时候千万记住界面的细节表现,因为在界面设计中载体大小的限制,我们应该把握好每一个像素的运用,这样做出来的界面才会工整美观。

亚洲城网页版 5

作为界面设计中被设计师很看重的界面质感设计。在进行按钮设计上考虑最多的质感的搭配,现在来说说质感对比,往往我们看界面设计时按钮都会有几种状态,那么怎么来设计这几种状态能让按钮有新的亮点,这值得每个界面设计师的考虑。在这里思考的质感就会有很多种对比,没有好坏之分,关键看设计师做这种对比想给用户一种什么感觉。如图:

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

曾经看过一步电影《向左走向右走》里面的一个场景让我印象深刻,如图所示,在这个场景中我深深的被场景中的色彩对比锁吸引,这个场景对我以后在做设计的时候强调主次起了很大的启发作用。如图:

亚洲城网页版 6

亚洲城网页版 7

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

进入论坛交作业:

作者微信公众号:MICU设计

亚洲城网页版 8

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

亚洲城网页版 9

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

首先我想起自己最早学设计的时候,总是找不到设计的感觉,心里一直在捣鼓究竟问题出在哪儿了,后面在学习的过程中才发觉我一直在对比和统一中来摸索着学设计。后面的设计之路也一直在这上面纠结,慢慢的后面自己发现了最简单的一种方法。就是同色系的统一,所以在做一个设计的时候只选定几种色后,就在这几种色彩中选择使用,来完成一幅相对完整的作品。色彩是最容易让人识别的,视觉识别系统也成为一个企业、集体和产品很重视的部分。那么在界面设计中,我在按钮设计的使用上,首先也是根据整个网站的整体色调来考虑按钮的色彩,这样做的优势在于整个界面的统一性,也是用得最多的一种按钮设计方法。如图

亚洲城网页版 10

然而被称之为经典的界面设计就是苹果的计算机工具界面设计,这是典型的来源与生活中的按钮设计。其方法和《向左走向右走》里面的这个场景一样。这样的按钮设计直接给用户指出了重要的部分,能更加帮助用户的使用。如图:

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

亚洲城网页版 11

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

质感统一

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

以前我写了在生活中找到按钮设计的元素,这一节中我也会延续生活中的设计这个观点,这一节写的是按钮在界面中运用设计,那么我们怎么从生活中来找到灵感呢,一直觉得做设计就是做原色的统一和对比,无论是平面、UI界面、数码、环境空间、服装等,一切设计概莫能外。有对比就会有统一,对比统一是设计师最容易也是最难拿捏的部分。这些往往都是设计师在自己的工作和学习中总结的属于自己的学习方法。

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

亚洲城网页版 12

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

说起色彩对比那又将是一篇长篇大论,所以在这里我也只是根据按钮设计中的问题点到为止。我们知道色彩最重要的属性之一就是它的冷暖性,所以冷暖对比是在设计中运用最多的,但是如果再把色彩对比划分的话还有明度对比,纯度对比,补色对比,冷暖对比,面积对比,黑白灰对比,同时对比,空间效果和空间混何等的对比。

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

亚洲城网页版 13

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

在生活中不同质感组合表现一样的物品也很多,但是给我印象最深的就是下面这款笔记本,它是采用木质和金属质感以及塑料质感的对比而成,整个设计简洁大气不失美观。如图

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

质感对比

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

色彩统一

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

那么下来我就说说我在界面设计中按钮设计的运用方法和大家一起分享、一起学习、一起进步。

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

后面我谈到的这种方法也是我个人的思考点,至于在界面设计中怎么运用,值得每个设计师的思考,大家都知道过马路,当一群人从走往右走的时候,对面一个人走过来这样的的动态是不是很特别呢,是不是有个醒目的感觉。我曾经看过一个服装广告设计就是这样设计的,动态的对比是界面的发展正朝着运动的模式发展,所以我们在按钮设计的运用上可以考虑按钮的动态对比的运用将会是怎么样的。

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

亚洲城网页版 14

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

界面设计不同于普通平面设计的一个很重要的地方就是设计师要对界面质感的把握,那么这样我们对界面中按钮设计的运用要就有一定的要求,首先一点就是整个界面的质感统一,不论是图标或按钮。这一点是最基本的要求。如图:

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

在设计中做统一是一种比较简单而且很有效果的一种方法,但是缺点就是很难在视觉上给用户有一种新鲜感,所以好多设计师会在设计对比上思考许久,因为这样达到的效果是能给人眼前一亮的感觉。前面我写了设计中的统一,有统一必然会有对比,所以接下来我谈谈我对与按钮设计运用的对比方法。这些方法我们在生活中都能找到相关的设计元素。

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

色不过三

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

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

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

亚洲城网页版 15

亚洲城网页版 16

亚洲城网页版 17

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

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

亚洲城网页版 18

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

做精致的颜色,提炼格调

亚洲城网页版 19

亚洲城网页版 20

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

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

主色的定义,及面积

亚洲城网页版 21

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

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

第二刀:确定主色

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

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

亚洲城网页版 22

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

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

亚洲城网页版 23

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

亚洲城网页版 24

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

主色的魅力

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

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

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

亚洲城网页版 25

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

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

亚洲城网页版 26

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

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

亚洲城网页版 27

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

第一刀:色不过三

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

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

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