遵义建站:6面向WordPress网页设计师的配色技术-极简慕枫

遵义建站:6面向WordPress网页设计师的配色技术

2019-04-24

遵义建站在使用颜色的背后有一种心理。许多客户想要闪亮和浮华,他们选择颜色是因为他们喜欢。但是他们喜欢的颜色可能没有预期的效果。色彩在UX的成功中起着重要的作用。用户倾向于点击和扫描对他们有吸引力的东西。如果使用正确,颜色是漂亮的。一般人都会看漂亮的。这就是为什么颜色匹配是如此重要的网站。

作为遵义建站网页设计师,我们需要能够为网站选择正确的颜色组合。这包括每个视觉元素的布局:颜色的字体,按钮,标题,背景,标题,链接,边框等。颜色甚至在你的品牌中起着重要的作用。

在这篇文章中,我们将看到一些颜色匹配技术,以帮助网页设计。

色彩理论与心理学的理解与运用

遵义建站

图片来源:aekikuis/ShuterStock.com

色彩选择是一门需要很长时间和丰富经验的艺术。这也是主观的。这取决于它的背景。网站的主题和情绪将有助于确定最适合观众的颜色。每个案件都没有一个正确的答案。对一个观众有效的东西可能对另一个观众不起作用。在一个观众喜欢柔和的颜色的地方,另一个观众可能更喜欢柔和的色彩。

配色方案将取决于你想要的感觉。某些主题需要某些颜色。例如,猎人和渔民被乡村色彩所吸引。白色在关于婚礼的网站上很突出。配色方案与主题相符。在这些情况下,您可以试验不同的颜色,以突出和口音,同时保持原色基础。

这并不意味着每个关于特定主题的网站都应该是相同的颜色。每个网站都有具体的目标。应该选择与这些目标相匹配的颜色。首先也是最重要的是项目的需求。颜色通常与感情有关。他们可以制造情绪。错误的颜色会让读者跑去寻找下一个网站。正确的颜色可以把它们画进去并保持在那里。它有助于使用一点色彩心理学。

色彩心理学

下面是对颜色心理学的简要介绍万德莱设计:

  • 黑,白,灰-冲击。这些都适合背景。黑色意味着权力。白色代表无辜。黑人和白人合作得很好。灰色是中性的,是传统和平静的好选择。如果使用不当是会缺乏能量的。这三个人都表现得很认真。
  • 褐色的批发。他们既冷静又优雅。这是一个很好的选择,为纹理背景的网站,希望显示传统。坦斯表现出虔诚。深棕色显示出可靠性。布朗是伟大的网站,希望显示可靠性和经验。
  • 蓝色平静。这对于那些想要显示可信和可靠性的网站来说是很好的。深色显示经验和成功。浅色是友好的。
  • 红色-令人兴奋。与激情、权力和愤怒有关。温暖的颜色可以是强烈和舒适的,是伟大的网站,想要描绘坚实的质量砖墙。明亮的色彩是精力充沛的,适合于面向年轻人的网站。
  • 粉红色-年轻的女性气质。这是开玩笑,天真和理想的女性观众。
  • 橙色-精力充沛,诱人。这是一个很好的选择,网站谁想描绘运动和精力。
  • 黄色-充满活力。它与温暖和幸福联系在一起。明亮的色调对孩子很好。更深的阴影暗示着古老,这是与智慧相关的,是描述权威和智慧的好选择。
  • 绿色-冷静和恢复活力。暗色调与金钱相关,对于那些需要描述增长和稳定的网站来说是很好的。较轻的色调与春天有关,是很好的网站描绘放松,诚实和道德标准。
  • 紫色-高贵。深紫色意味着财富和奢侈。浅色是浪漫的。

当然,在美国以外的文化中,这些颜色可能有不同的用途或反应。最终,这取决于你的目标受众。

看例子

遵义建站

最好的地方之一,获得想法是从其他成功的网站。颜色匹配是那些没有确切答案的主题之一,但有些选择比其他主题更适合特定的目的。许多网站采取了与其他网站不同的方法,它们可以让你更好地了解哪些是有效的,哪些是不可行的。看看流行网站的颜色组合,看看什么样的调色板工作。还可以看看特定于你的利基的网站。试着理解网站用来向观众展示信息的角度。评估他们的观众是谁,看看他们是如何运用色彩心理学来吸引观众的。

另一个获得想法的地方是杂志。几乎每个话题都有一本杂志。看看他们如何建立他们的品牌色彩,他们的网页,标题,背景等。虽然这是一种完全不同的媒介,但观众对色彩的使用仍然适用。

谷歌搜索

Google Search

查看颜色组合的最佳方法之一是在Google上搜索“颜色组合”,然后包含您感兴趣的颜色。这将给你的结果,包括Pinterest,cololCombos.com,以及更好的家庭和花园。您还可以进行图像搜索,并看到许多组合体的例子。您可以使用颜色匹配工具从您喜欢的图像中获取颜色,稍后我们将看到这一点。

调色板搜索

Google Search palette

还可以搜索调色板。通常,调色板会给你十六进制或RBG值。如果没有,则可以使用其中一个颜色滴管工具来捕获颜色并重新创建调色板。

试验颜色

Xterm_color_chart

维基共享网站图片

以较少的颜色开始,随着你的舒适而增加。在添加第三种颜色之前,最好有两种颜色一起工作。使用一种颜色作为主导,另一种颜色用于高亮。选择一种颜色,然后选择另一种颜色。试着用一个阴影作为背景,另一个用于高光。

由于企业的品牌往往具有主导色彩,你应该考虑这种颜色,但不要害怕尝试不同的东西。最终,它不应该与品牌色彩冲突。

这就是A/B测试派上用场的地方。你可以把一种颜色传递给一半的观众,另一种颜色给另一半。然后,您可以跟踪统计数据,看看哪些有效,哪些不起作用。A/B测试将添加到Divi 2.7中。这将是一个很好的实验工具。

对比试验

Image by -Albachiaraa- / shutterstock.com

图片由-Albachiaraa-/ShuterStock.com

对比让颜色彼此独立。选择有趣对比的颜色。如果没有足够的对比,这将是太难阅读的文本,它会使读者感到眼睛紧张。如果有太多的对比,或错误的对比,读者会拒绝,因为它只是看起来不好。正确使用,反差可以引起注意。对比应与按钮、链接、图标等一起使用。这是一个很好的工具,引导用户到你的行动电话。

用工具练习配色技术

有很多工具可以帮助设计调色板和配色。你可以选择一种颜色,你会得到对比和混合的颜色。毫不奇怪,许多免费的在线工具都是专门为谷歌的材料设计制作的。还有几个很好的图像编辑应用程序。我包括了一些最受欢迎的应用程序和一些具有专业功能的免费应用程序。

材料设计调色板

Material Design Color Palettes

这是来自Google的一整套调色板,它为Android、Web和IOS的口音提供了匹配颜色的原色。

Material Design Color Palettes 2

每种颜色都提供一个十六进制值。它还提供了示例应用程序,这样您就可以看到它们是如何一起工作的。它包括光、暗和不同程度的不透明度。你可以的自定义Android的调色板。还有一个可下载压缩文件包含用于Photoshop和IlluStrator的色块。

材料调色板

Material Palette

材料调色板是一个为谷歌的材料设计的在线颜色生成器。这是一个颜色工具,以帮助您选择调色板的网站。

Material Palette 2

选择任意两种颜色,您将得到一个与这些颜色一起工作的调色板。它将把它们确定为:

  • 暗原生
  • 初等
  • 光初级
  • 文本/图标
  • 重音
  • 主要文本
  • 辅助文本
  • 分频器

这就消除了猜测,试图找出哪些颜色用于什么。如果你不想要对比,你也可以关闭其中一种颜色。你可以下载你的调色板并在社交媒体上分享它。

材料用户界面

Material UI

材料用户界面是一套用于材料设计、平面设计和社交媒体的工具。它给出了每个颜色的列表,您可以很容易地获得十六进制或RGB值。下面简单地看一下每一个。

材料设计色彩

Material Design Colors

“材料设计颜色”是MaterialUI中的一种工具,它允许您选择颜色,然后在操作中看到它们。选择颜色会将值添加到剪贴板中。一旦您选择了您的颜色,单击调色板创建者。

Material Design Colors 2

它将向您展示您的调色板在移动设备上的样子。您可以更改调色板内的任何颜色,以查看它们在一起的外观。它显示原色和重音颜色,并给出十六进制和RGB值,以便您可以使用这些颜色,即使您没有使用材料设计。如果你愿意的话,你可以在社交媒体上分享你的调色板。

平面UI颜色

Flat UI Colors

这个来自MaterialUI的工具提供了一个颜色列表,您可以从中选择平面设计。您可以选择感兴趣的颜色,并将十六进制或RGB值复制到剪贴板上。演示文稿可以让你看到它们是如何工作的,以及它们之间的对比。

社会色彩

Social Colors

MaterialUI中的社会性颜色与平面UI颜色的工作方式相同,您可以选择感兴趣的颜色,并将十六进制或RGB值复制到剪贴板上。这些颜色都是用他们所使用的社交网络的名字来标记的。这个布局给你一个很好的指示的颜色如何一起工作。

彩色搅拌机

ColorBlender

颜色搅拌器允许您使用RGB滑块创建调色板。您可以从他们预先制作的调色板中进行选择,也可以任意调整它们。它有一个自动匹配模式,它将调整重音颜色以匹配您对主颜色所做的调整。您可以在直接模式下独立地更改颜色。一旦您满意您的颜色,您可以下载混合为Photoshop,IlluStrator,或简单地使用HTML和RGB值。你也可以发邮件给你。如果您喜欢混合中的特定颜色,您可以使用该颜色作为主要,其余将匹配它。它也将建议Pantone匹配。你可以保存你的混合物,然后再重新装载。

帕莱顿

Paletton

Paletton提供了一个有趣的颜色轮,它允许您以不同的方式选择颜色。一旦你选择了你的原色,它将显示你的重音颜色,每个颜色家族都有主次颜色。当你在颜色上鼠标移动时,它会给出十六进制值。

Paletton 2

您可以预览调色板,并查看带有颜色选择的示例网站。你可以选择光明,黑暗,积极和消极。它还将展示动画和艺术品。每个选择都有多个选择。这是一个很好的工具,可以查看WordPress主题中的颜色,而不必将颜色放置在主题中。

Adobe颜色CC

Adobe Color CC

AdobeColor CC是一个交互式颜色轮,它将在调整主值时调整重音值。您还可以在保持主值的同时调整重音值。所有其他值都会自动调整以匹配。您可以从7种不同的匹配规则中选择,包括允许您独立控制每种颜色的自定义模式。它为每种颜色提供RGB和十六进制值。你可以保存你的颜色,然后再回来。

Adobe Color CC 2

它有一个探索工具,您可以在这里查看、比较、编辑和保存预先制作的调色板。

从图像中选择颜色

Pick Color from Image

从图像中挑选颜色&匹配PMS颜色是一个有趣的工具。你可以上传一个标志,得到潘通的颜色。它也会给你最接近的PMS颜色,这样你就可以看到Pantone颜色的变化。此外,您还可以从色轮中选择一个颜色,并得到最接近它的PMS颜色。上传徽标图像是一个有用的方法,以获得颜色值,如果你没有Photoshop或IlluStrator。除了Adobe产品之外,还有几种替代品具有很好的滴管功能。

Paint.net

Paint.NET

NET是一款免费的个人电脑图像编辑应用,具有一些高端功能。如果您找到想要的颜色,但没有RGB或十六进制值,只需将图像粘贴到Paint.NET中,选择颜色选择器,然后单击所需的颜色。该颜色将成为您的主要,并将给您的RGB和十六进制值。您还可以选择次要颜色,然后保存您的调色板供以后使用。

瘸子

Gimp

gimp是适用于Windows、OSX、Linux和更多的免费应用程序,具有高端功能,包括一个伟大的颜色选择器和调色板构建工具。粘贴到要获取颜色的图像中,选择颜色选择器,然后选择颜色。您可以使用它来构建和重用调色板。

Photoshop

Photoshop

Adobe的Photoshop是可视化设计工具中的黄金标准。它运行在Windows和Mac上,拥有几乎所有您可以想象的颜色匹配和调整功能,包括可定制的索引表、从图像中选择颜色的滴眼器,以及构建您自己的调色板、色块、颜色面板等等。您可以预览前景上方的采样颜色。您可以通过RGB、十六进制、HSB、Lab和CMYK选择颜色。颜色选择器有一个网页安全的功能,给你216种颜色,这将很好地工作在任何系统。这是最昂贵的选择,但我无法想象需要做一些它做不到的事情。Photoshop是专业人士的工具。

素描

Sketch

草图是Mac的一个设计工具,具有许多高端设计功能。它非常适合构建可伸缩的向量和可重用的UI元素。它有一个内置的颜色选择与滴头,所以你可以采样任何照片,以建立你的调色板。它有很多第三方扩展,包括一些允许您保存和重用调色板的扩展。

它有一个名为素描调色板这使您可以保存调色板并将调色板加载到颜色选择器中。

最后思想

色彩的运用和科学一样是艺术。颜色可以帮助你塑造游客的情绪。它可以帮助激发他们的兴趣,让他们感到安全,把网站看作权威,让他们觉得好玩,让他们继续回来,等等。正确匹配颜色可以提高您对行动的响应和分担率.正确的颜色选择可以吸引访问者并保持他们在网站上。有了一些配色技术和工具,你就可以利用色彩心理学来发挥你的优势。最终,这需要大量的实践和经验,但这是一个值得投入时间的实践。你只有一次机会给人留下很好的第一印象。