详细解析UI界面配色配图应用技能
设为首页 - 加入收藏
您的当前位置:主页 > 网站教程 > 网页设计 > 正文

详细解析UI界面配色配图应用技能

浏览: 编辑:admin 时间:2017-08-24

一、简略思路剖析

假设我们盼望完成一个活动类APP的设计,那么我们须要做什么呢?第一步就是竞品剖析。我们须要剖析出市场上常见的活动类APP设计都长什么样(如图1)。

详细解析UI界面配色配图使用技巧

图1

我们发明,现在市场上的活动类app大多用色比拟重,或是暗色调。这样的配色计划多少会为了满足商业或运营的需求,我们在平时做练习的时候可能不容易斟酌到这些点,那么就从我们所看到的东西来剖析。

重色调更加有力气感、品德感。我们同样能看到图片都做了压暗处置,这样在突出文字的同时也能让图片的品德感有晋升,还有就是能和界面的色调统一。看到这种配色的界面会有一种我们都要练成专业活动员的感到。当然也不能消除竞品都这么做我们也要这么做这个因素。

这些配色计划当然也很不错,但是对于部分上班族来说,包含设计师,我们的锤炼时光相对较少,而且在经常加班的状况下,我们的锤炼方向更应当偏向于调剂自己的身材状况,让自己元气满满地进行一天的工作。所以,假如我来做这款产品界面的话,我更偏向于让界面看起来更加清爽且充斥活气。这样的话既能满足上班族的状况,又能做出差别化。

基于以上剖析,我决议从“活气、清爽”的角度动身,做出一款充斥活气和清爽感到的app。因为这篇文章要将配色和配图的技能,我们就不对界面的排版构造等方面做详细剖析。

这是我做好的一个活动风界面,缭绕这个界面我来讲一下配色和配图的技能(如图2)。

详细解析UI界面配色配图使用技巧

图2

二、界面配色技能

我这里采取的是从现有图片中获取配色的方式。

首先,缭绕“活气”“清爽”这两个个要害词,可以联想到比拟具象的事物,比如冲浪、植物、阳光等。然后依据这些具象的要害词来寻找图片(如图3)并挑选出自己爱好的图片(如图4)。

详细解析UI界面配色配图使用技巧

图3

详细解析UI界面配色配图使用技巧

图4

这时候就可以把挑选好的图片置入ps,直接用吸管工具汲取图片中的色彩并记载下来。我这里选择了图4中右上角那张图(如图5)。

详细解析UI界面配色配图使用技巧

图5

我通过汲取图片中色彩得出一组蓝色和绿色的组合。组合必需到达两点请求:一是色彩之间要协调;二是必需有亮色有暗色,因为界面中既有背景也有文字,所以必需明暗上拉开差距,才干保证浏览。

我们发明这些色彩都在调色板偏右或偏下的地位(如图6),依据调色板的特征,这些地位的色彩饱和度高而且会泛黑。这里要强调一个点,我们要的是图片中的配色计划,比如蓝配绿,蓝配黄等,并不是具体的色值,因为我们的作品是要在屏幕上显示的,直接应用原图片中的色值会让全部界面看起来特殊暗。

详细解析UI界面配色配图使用技巧

图6

于是我们须要做色彩提纯的处置。“纯度”就是指颜色的鲜明水平,越阴暗的色彩纯度越低,无论哪一种色彩,纯度越低越贴近灰色。而“明度”指颜色的明亮水平。“提纯”即让所有色彩的亮度进步,饱和度下降。下面给大家说一下提纯的具体操作。

我们以#0737b5这个颜为例。为了便于大家懂得,我在取色器画了一条线,这条线的左边颜色偏亮,右边偏暗。以这条线为准,越往右颜色就会越脏,所以提纯最重要的是我们要把颜色往左边提,增添颜色的明度(如图7)。

详细解析UI界面配色配图使用技巧

图7

随着我把颜色往左边走,会发明颜色明度在进步,饱和度在减少。当然可以滑动旁边的色条,到达自己幻想的颜色(如图8)。具体到什么水平才是最适合的,这个就须要大家多多练习了。

详细解析UI界面配色配图使用技巧

图8

我们经常能看到好多作品会用到渐变色,我们同样可以依据提纯后的色彩做一下渐变色搭配,如何从单色变成渐变色呢?我要对我刚刚提纯的色彩下手了(如图9)。这里我用了给图层添加混杂选项的方式,便利及随时调出配色计划。

详细解析UI界面配色配图使用技巧

图9

或许有些童鞋好奇为什么要做成渐变色。渐变色可以体现一个图形有浅变深,从明入暗,由一个色彩奥妙得过渡到另一个色彩。对照起单色来,渐变有层次感,会显得丰盛许多。也会使的作品更加耐看。随着扁平化时期的到来,单色块也趋于风行,我们若是能在偏平中应用一点渐变颜色的搭配,会让作品饱和,更加灵动。

最后应用我们的色彩把所用的信息调剂,背景选用比拟轻快透亮的色彩,远景没有直接用白色,而是用了稍微发蓝的白色,(为了作品的整体性协调性,我们须要带入环境色)参加波浪和细节等我们的界面就完成一半了(如图10)。

详细解析UI界面配色配图使用技巧

图10

我对这张图的色彩进行了色彩标注(如图11),它们都取自刚刚提纯的色条,有些做了轻微的调剂。

详细解析UI界面配色配图使用技巧

图11

为了让界面清爽且充斥活气,我选择了白色作为背景,因为这个界面的背景漏出面积很大,所以用白色作为背景可以很有效地晋升全部界面的亮度。文字和图标就的色彩确定要和背景拉开差距,所以就选择了色条中的几个重色进行尝试,然后联合我的个人爱好,最终将图标和文字的色彩断定现在看到的这种蓝色。为了让画面有层次感,中间的圆环我做了高低两层,在配色的进程中,我发明如果圆环只用一种色彩,会比拟呆板,因为圆环本身在界面中所占的面积比拟大,所以我应用了渐变色。仔细的同窗可能会发明,界面中我标出来的色值和之前色条上的色值无法完整对应起来,这是因为在配色的进程中,我会不停作轻微调剂,已到达全部界面的协调统一。之前的色条只是一个参考尺度,并不代表必定要用色值完整一样的色彩。配色完成后,我发明这个界面稍微有些空,大面积的白色让这个界面显得太亮了,为懂得决这两个小问题,我在界面中参加了一些波浪,这样画面也丰盛了,背景太亮的问题也得到懂得决。当然波浪只是其中一种解决计划,还是激励大家多多尝试其它的解决计划。

三、界面配图技能

接下来我们就要开端配图了。在配图之前我先讲一下配图的几点技能。

界面设计由拟物化走向扁平化这是大家众所周知的事情,(比如男同窗们越来越爱好周迅而不是柳岩了 = =),扁平化的主要理念就是突出内容本身,所以好的内容(文字、图片、视频)就成了界面设计整体中特殊主要的一环。比如我们看这张图(如图12),同样的界面但配图不同,会让你感到他们的逼格不在一个宇宙里。

详细解析UI界面配色配图使用技巧

图12

我们来剖析一下这两个界面。右边不适合的配图会让界面看起来很山寨。在找图片的时候我们先得剖析我们已有的界面信息。以上界面在没有配图的情形下,信息已趋于饱和,所认为了调剂画面节奏感,我们须要找的是有空间感的配图,而不是右边那样构图很丰满的图,不然会损坏节奏感,使得全部界面秩序较差,不知道是先看图还是先看文字信息。左边的配图本身就有了空间,作为这个界面的配图,不仅能增添节奏感,还能营造气氛。当然,最主要的是,我们的配图和界面在配色上必定要到达统一。

我们在挑选一张好图的时候要注意贴近实际内容,不能因为图片本身的雅观和逼格疏忽了实际要表达的主题;还要注意图片上是否有过剩的信息影响主题的表达,如果有的话尽量去掉或是用另一张图片来调换;最后一点很主要,图片的清楚度必定要过关。总之,一张好图并不是简略的好看就可以,主要的是主题表达是否到位。

联合上面所说的技能,我们为刚才活动界面来配图,这个界面我事先预留了放置图片的地位(如图13)。

详细解析UI界面配色配图使用技巧

图13

因为是一款活动类的界面,所以我要找一张活动类图片,并且要贴合“活气”“清爽”这两个要害词,经过多次尝试,最终用“跑步男”这个要害词找到了我想要的素材(如图14)。

详细解析UI界面配色配图使用技巧

图14

首先这张人物素材的动作幅度较大,速度力气感都很到位,而且人物衣服的配色和我们界面的配色非常的搭;还有一点,人物倾斜的身材和眼神具有非常好的领导视线的作用,能领导用户注意界面中的主要信息,我想尝试把这一点应用到界面中,所以我决议选择这张图片。

我们放入设计稿之中看看吧!然后把人物调剂到适合的大小,这时候看起来好像也没什么弊病了(如图15)。

详细解析UI界面配色配图使用技巧

图15

但是没有对照就没有损害(如图16)。

详细解析UI界面配色配图使用技巧

图16

这是我调剂之后的,大家可以看看前后(图15为调剂前,图16为调剂后)的对照后果。下面我具体讲一下为什么调剂成这样。

首先,人物素材虽然服装配色和界面配色比拟搭,但是从明暗上显明比界面暗了几个等级,所以人物素材放在这个界面中会显得比拟暗色彩比拟脏。我们可以用吸管取色的方法来测试色彩。用吸管工具选取人物服装中介于最亮和最暗中间的色彩,为了更加正确我这里选取了5x5平均(如图17)。

详细解析UI界面配色配图使用技巧

图17

依据前边的剖析,色彩处于调色板中间的处所会看起来显脏(色彩偏灰暗),所以我做了如下调剂(如图18)。

详细解析UI界面配色配图使用技巧

图18

最终浮现后果如下(如图19)。

详细解析UI界面配色配图使用技巧

图19

于是我们完成了一个比拟满意的概念性设计。这样的概念性设计并不是直接用来投入产品的,而是用来丰盛我们的思维。在我们须要设计一个现实中的页面时,我们就可以找到我们的概念作品,将概念作品中的色彩和作风直接应用在真正的产品页面中(如图20)。

详细解析UI界面配色配图使用技巧

图20

须要注意的是:正式的产品设计里导航的高度、标签栏的高度等都是有具体规范的,我们须要遵照这些设计规范,不能天马行空。比如我们在iOS平台上设计APP的话,界面尺寸为750x1334px,顶部信息栏加导航栏的高度为128px,底部标签栏的高度为98px。如果你设计的平台是Android,那么须要遵照另外的规范。关于字体,概念性APP可以应用任何字体,但是我们须要投产的设计字体应是苹果的默认自带字体,英文通常为SF-UI字体,中文为苹方字体。

当当当!设计义务杰出地完成了!是不是要感激概念设计的铺垫呢(如图21)?

详细解析UI界面配色配图使用技巧

图21

四、颜色的配置方式

文章的最后,我想分享配色中的几个小方式。

1.颜色统一

在我们把握界面颜色的同时,我们要把控住颜色的明度、纯度、色相在必定范畴内,不能悬殊过大。我们可以看到下图中(如图22),画面中色彩明度纯度都差不多。

详细解析UI界面配色配图使用技巧

图22

想要作品比拟亮眼,最好避免应用纯度太高的色彩,纯度高的颜色组合在一起,虽然纯度上到达统一,但是也会显得十分的花哨和辣眼睛(如图23)。

详细解析UI界面配色配图使用技巧

图23

2.画面节奏感

节奏感是指我们在用色的时候,界面上难免会呈现冷色和暖色,在他们的配色比例上我们须要做到着重哪一边。大面积冷色调中如果呈现一点暖色,那么全部画面会呈现亮点和和谐。下图中(如图24),冷色面积和暖色面积比例还是有着重的,蓝色面积、灰色面积、红色面积和橙色的面积各不一样,这种颜色的层次感就增添了节奏感,给人带来印象深入的视觉冲击。

详细解析UI界面配色配图使用技巧

图24

3.颜色的重量

画过颜料画的同窗可能知道,在我们构建一幅画的时候,会有一个大调子,比如说冷色明亮的调子,暖色阴暗的调子。我们在亮调子的画中,会多加白色亮色颜料;在暗调子的画中,会参加深色的颜料协调。决议这些的因素是颜色的明度和纯度。我们把明度进步纯度下降,会使得画面变亮变轻,同时给人的感到是轻快放松的;我们把明度下降纯度进步会使得画面变繁重,给人的感到是沉稳冷淡。我们在思考一个界面配色的同时,不是看到好的配色就立马用到设计中,首先斟酌的是设计的主题是什么,符合什么样的特征,然后我们再依据剖析成果找到最匹配的颜色范畴。

这是我总结出来的一些配图以及如何让配图与界面整体更加协调的小技能,盼望各位都能设计出更棒的作品来!

最后来做一个作业吧,请根据今天所学,为下面三个消息界面配色配图(如图25)。源文件可下载。

详细解析UI界面配色配图使用技巧

图25

网友评论:

发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片

Copyright © 32K8.com. 上来看吧 版权所有.本站部分内容来源于网络,如侵犯到您的权利,请与我们联系!
QQ交谈( QQ552324123)

Top