UI界面设计中如何正确使用色彩覆盖

2016-11-21  本文已影响0人  UI设计讯

颜色几乎是所有设计的一个重要组成部分。无论你的颜色是明亮的,大胆的色彩或更简约的黑色和白色,你如何使用颜色在整体设计上都有重大影响。

使用颜色的方法之一发表一项声明,是一个设计,采用了叠加颜色。这意味着你的图像或视频与半透明带有颜色的框。的影响,可以添加图像的意义,让人们关注一个设计并帮助你做出最有限的艺术选择。

今天,我们要去看看各种颜色覆盖,作为创建您自己的一点灵感。

尝试渐变

炫酷的渐变。他们会成为一个巨大(引人注目)的选择,当你想用颜色覆盖工作。

什么样的渐变是特别好的呢,你可以使用几个颜色-想想你的品牌--或使用一种单一的颜色来创建焦点。光明的配对可以帮助用户设计,并给出图像的一些两点。

这种趋势能够连接到返回到Spotify,开始利用渐变和双色调覆盖,突出播放列表。彩色图像新的生命,用户习惯看到(音乐家)的新闻照片。

这是一个对你来说很容易复制和概念:

选一张照片。

创建一个渐变与品牌色。

玩得开心!

纯色内定下一种基调

纯色作为一个梯度覆盖,可同样引人注目的模式,但往往更多的是一种不同的意义,可以与颜色的选择。考虑一个深褐色层,比如说。这立即激起了旧的时代和历史的感觉。

也可以这么说,选择时尚的颜色选择。通过使用一个明亮,饱和的颜色相关单位或材料设计,你可以唤起现代主义或高级时装。

当使用一个单一的颜色覆盖,想想颜色的饱和度和透明度。这些元素可以添加意义。更重的颜色组合-的透明度和更多的饱和比颜色本身更注重形象的背后。更轻,更微妙的组合更注重形象。

考虑黑暗或光线

你并不总是必须使用本身创建一个覆盖颜色。有时它可以是黑色,白色或灰色。使用这些色彩和色调的真的可以改变心情的一个项目。

你可能会希望,黑暗覆盖创建一个主题更幽暗撩人的环境。较轻的覆盖关联的乐趣。另一贡献因子,当谈到这些感情和黑色和白色的是图像本身。它是如何工作与色调或音调?做图像和颜色与消息一起工作吗?

(上图)使用一个白色的覆盖图,以有助于人们注意屏幕上的字上面的黑白照片。但注意表达对摄影师的脸:他是微笑着一个大大的笑容。颜色和图片相结合的邀请,让你想与之交互的摄影师,甚至可能雇用他一份工作。

选择高对比度图像

当一个图像叠加在一个设计项目的规划,组成的图片(或视频)是很重要的。一个平淡的图像会留给你一个温和的颜色叠加的结果。你会得到最好的结果,如果你从大量的照片与黑暗与光明的对比图像中的空间。

如果你的形象没有足够的对比,可以考虑添加照片编辑软件或另一图像的对比。不然,图像效果可能达不到预期的效果。

有另一种伎俩,以实现这一效果是从一个黑白照片。特别是对初学者来说,可以更容易地看到在黑色和白色的形象和对比度增强。只是行动提供了一个很好的例子,彩色图像旁边的黑色和白色的形象覆盖。(另外,它是一个很酷的效果对图像没有颜色和颜色鲜艳的对比。)

图像看起来应该是自然(或不)

当谈到工作与色彩覆盖你有两个选择:

1、图像仍然应该看起来自然。应该出现在一个自然的颜色和照明和阴影的位置。覆盖是有些微妙的,如亚伯尼歌咖啡(上图)。

2、图像看起来完全改变了。没有猜那一个颜色覆盖了大部分的使用(如本文中的例子)。

这里没有一个真正的中间地带。如果图像没有落入这些“极端之一,”用户可能想得太认真的颜色选择,不注重网站的内容。你不想让一个颜色叠加技术;它应加强设计。

试着覆盖颜色

虽然上面的例子显示了如何使用颜色覆盖,对于大图像来说,如英雄头样式选项,这不是唯一的方式,以充分利用这项技术。颜色叠加的影响,就像地方口音一样可以交流得很好。

以上的两个例子表明,以不同的方式有效地实现这一点的。

结衣(顶部)采用明亮的绿色与透明度的导航栏。这进一步突出了上面的坚实的脑卒中。影响帮助维护整个品牌的调色板设计,而在各种其他颜色展示项目。效果是简单的,帮助页面看起来有点软,比如果导航是纯色和内页面,并通过设计下,提请眼睛。

坚果和伍兹以另一种方法。该设计采用颜色叠加作为一个悬停效果,告诉你更多关于具体项目的网站上。获取一个红色的覆盖的任何元素也是可点击的元素。有什么值得注意的事,这个设计是颜色覆盖的用户提供了一个视觉提示,告诉他们,正是他们想知道整个内容,并提供了一个路径链接。

结论

用颜色覆盖,这些技术不工作之一所有的时间。大多数设计师发现,他们只能离开之前与它用于一个或两个项目似乎有些过头了。(口音覆盖的地方可能是一个更好的选择。)

正如任何设计技术,确保它在正确的上下文中的应用。你绝不应该使用一种颜色覆盖只是因为你一直在另一项目的启发;拯救它只是正确的设计理念和使用。

本文由U点意思翻译,原文链接:https://designshack.net/articles/graphics/how-to-design-color-overlays/

更多UI设计学习资料分享请加QQ:370226457,

上一篇下一篇

猜你喜欢

热点阅读