PhotoShop简洁大方的质感音乐播放器界面设计教程
分类:摄影

效果图:

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

但是不能因为区域大而把风头盖过了操作区,可想100寸的电视找不到遥控器,用户是有多痛苦。风格定位色什是定位色?也是我自已定义的名词,由于载体色不能用饱和度过高的色系,为了定位我们界面的风格,可以给按钮、按下状态、基础控件等使用定位色,

主色的魅力

www.7727s.com 1

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

本文介绍用PS设计一个质感音乐播放器界面,讲解要点:配色、层次、逼格。

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

www.7727s.com 21、配色载体色什么是载体色?是我自已定义的名词,目前的操作界面还是有大量的信息和文字,所以通常作为信息的载体,由于面积大,我们一般都使用饱和度较低的颜色,

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

www.7727s.com 3

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

这样我们的整体颜色风格就定位好了,而不占用大量面积。

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

这样不会扰乱视觉,喧宾夺主,而载体色也是有层次之分,例如底此音乐播放器的功能区域,就使用了载体色中间的颜色,碟片背景用了深色,

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

这样我们的功能区域会凸显出来,告诉用户,这是你的操作区,这上面的按钮都可以为你服务。而碟片背景只是用来看的,所以显示区域要大,

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

www.7727s.com 4

www.7727s.com 5

www.7727s.com 6

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

主色决定设计的风格。

作者微信公众号:MICU设计

www.7727s.com 7

第二刀:确定主色

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

www.7727s.com 8

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

www.7727s.com 9

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

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

www.7727s.com 10

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

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

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

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

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

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

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

www.7727s.com 11

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

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

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

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

主色的定义,及面积

www.7727s.com 12

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

本文由www.7727s.com发布于摄影,转载请注明出处:PhotoShop简洁大方的质感音乐播放器界面设计教程

上一篇:PhotoShop天猫男装banner立体格子效果背景制作教程 下一篇:PS调色教程www.7727s.com:给树林中漂亮的花裙少女
猜你喜欢
热门排行
精彩图文