恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
如何为你的网站选择颜色
0.0°
2021-09-27 自译外文 经验/观点 原作者: Eva V. 举报 3134 8 3 0

颜色极大地影响了我们组织、识别和解释信息以了解环境的方式。事实上,85% 的人报告说颜色对他们购买的东西有重大影响。

这一切都始于生存的一个因素

一些花使用颜色来吸引特定昆虫进行授粉。一些昆虫使用颜色来警告潜在的捕食者防御性毒素。

一些动物,例如墨鱼,甚至可以改变颜色以适应周围环境。


|  在人性中,我们对不同的颜色有不同的情感反应。

它极大地影响了我们组织、识别和解释信息以了解环境的方式。事实上,85% 的人报告说颜色对他们购买的东西有重大影响。

资料来源:Usertesting.com


  • 红色——我们体内的红色给了我们生命,但如果它逃脱了我们,它也可能意味着死亡。它几乎总是与强烈的情感有关。从这个意义上说,红色会引发刺激、饥饿并吸引注意力。
  • 橙色 ——与橙色相关的一个熟悉的图像是太阳的升起和落下。它通常与温暖、滞留、警告和成长有关。
  • 黄色 ——对我们来说是最明显的颜色。我们可以从比任何其他颜色更远的距离看到黄色。这可能就是为什么大多数路标都是黄色的原因,也是为什么我们可以从远处看到麦当劳 M 的原因。
  • 绿色 ——与红色完全相反,绿色具有平静的品质,由于它与自然和清新的联系,它使您放松。
  • 蓝色 ——是 天空和水体的颜色;蓝色有一些平静的特质,比如绿色。当我们看到蓝色时,我们甚至会释放镇静剂。这可以解释为什么我们在很多病房里看到蓝色。
  • 粉红色——是希望的象征。粉红色是一种欢快的颜色,能激发温暖和舒适。它带走了红色的所有热情,用白色的纯洁调和它,给我们留下了温柔和深情的颜色。
  • 紫色——在欧洲的绘画和艺术作品中,紫色代表着上流社会、皇室和财富。有钱有势的人在罗马帝国只穿一种叫做“泰瑞亚紫”的颜色。
  • 棕色——污垢、泥土和粪便是我们脑海中常见的棕色。它代表大地色调,可以表现出与自然、舒适或户外有关的任何事物。
  • 黑色——是所有颜色的缺失。我们可以将它与广阔的空间或无意识的深渊联系起来。黑色会让人联想到精致和力量等感觉。但同时,它也可能是神秘和恐惧。
  • 白色 -与清晰感和反思感相关联。它还可以唤起无尽的感觉。在视觉上,您可以通过多种方式使用白色来突出深度、形状和阴影。


为您的网站选择颜色的 5 个技巧

1. 选择原色

您首先需要了解您提供的服务类型或销售的产品类型。之后,您可以轻松决定适合用户口味或氛围的原色。

˚F Ø R实施例中,如果你想实现一个更豪华的服务,去与白色,黄色或紫色。但是,如果您想吸引更广泛的受众,蓝色是一种令人放心且明亮的颜色。

一些大品牌的例子是:

  • 红色:可口可乐——兴奋和幸福
  • 橙色:Nickelodeon——友好而有趣
  • 黄色:麦当劳——乐观和快乐
  • 绿色:全食——新鲜和自然
  • 蓝色:美国运通——可靠和放心
  • 紫色: Hallmark — 品质历史
  • 布朗: Nespresso——可靠且简单
  • 黑色:香奈儿——奢华与优雅
  • 白色:苹果——时尚且用户友好


2. 选择其他颜色

选择附加颜色的一个很好的起点是考虑颜色补充。每种颜色都有一种使彼此流行的平行颜色,称为“颜色恭维”。

因此,如果您使用黄色作为网站的主要颜色,那么在号召性用语按钮上实施紫色是个好主意。或者使用紫色来突出基本特征。

尝试将您的附加颜色限制为最多 2 种颜色。不仅如此,你的设计也会变得混乱,没有什么会脱颖而出。

一个简单的例子可以是 Meco 的网站。它以蓝色为原色,并使用橙色来突出其基本部分。我们可以看到蓝色和亮橙色如何相互对比。

资料来源:meco.com


3. 选择背景颜色

背景颜色是一个重要的选择。您网站的背景可能比任何其他颜色占用更多空间。但是,如果您可以将其减少到只有 2 个选项,这将是一个简单的选择。

  • 第一个选择是使用更柔和的原色版本。看看 goodreads 如何使用它们的主要颜色来巩固他们的品牌。

资料来源:goodreads.com


  • 第二种选择是您可以将整个网站设为灰白色。这是一个更常见的选择,你可能见过很多。由于其微妙而经典的风格,它会弹出你想要的任何东西——文本、图像或链接。


4. 选择字体颜色

下一步是找到你的字体颜色。你现在可能很容易说黑色,但有许多不同类型的黑色字体。

请记住,白色背景上的纯黑色文本会导致眼睛疲劳。有 100% 的对比度,如果您的网站让他们难以阅读,人们可能会点击离开。

您可以使用灰色或浅灰色为您的网站提供更吸引人的外观,如 Penguin Books 的网站。他们为文本使用了更柔和的色调,这比鲜明的黑白对比要弱得多。

资料来源:penguin.co.uk


5.不要过火

尽量不要低估白色的重要性。这是提供对比、整理和将您的设计联系在一起的好方法。请务必使用它。

此外,更多并不总是更好。一个流行的设计经验法则是尽量坚持不超过 3种不同的颜色。如有必要,将调色板扩展到不同深浅的原色。

当一个品牌与特定颜色有很强的联系时,您可能不想与它分得太远。但请记住,采用您的原色并稍微调整一下饱和度是很有趣的。

例如,看看这篇 TechCrunch 文章中的社交媒体选项。它们都是类似的绿色,但亮度不同。

资料来源:techcrunch.com


还有一些提示

  • 确定您的目标受众——这是选择调色板时要考虑的重要因素。您的产品是否主要针对特定人群进行营销?也许您的目标是男性、女性或儿童。颜色在不同地区也可以承载不同的含义。所以要注意区别。尽量避免无意中疏远您的听众。
  • 不要忘记品牌——如果您要为现有品牌建立网站,则配色方案需要与徽标相匹配。但是,如果您正在为新业务工作,请抓住机会将网页设计纳入更广泛的品牌战略。
  • 让 CTA 按钮脱颖而出——在这一点上,我们都知道号召性用语按钮的重要性。研究表明,号召性用语按钮的可见性与转化率上升之间存在显着相关性。所以一定要使用颜色来提高可见度。
  • 测试一下——除非你测试一下,否则没有多少信息可以为你的设计提供完美的颜色。进行足够的研究并缩小选择范围,然后进行一些A/B 测试以在实践中找出答案。


概括

颜色在生命中的所有生物中都起着至关重要的作用。它有能力让我们有某种感觉,并以我们甚至可能意识不到的方式引导我们的眼睛。

网页设计师的主要关注点是创建具有凝聚力和视觉吸引力的产品。

以下是您需要考虑的 5 个提示:

  • 选择原色:选择适合您服务氛围和活力的颜色。
  • 选择您的其他颜色:选择一种或两种其他颜色来补充您的原色。您应该考虑色彩搭配,使您的原色“流行”。
  • 选择背景颜色:对于您网站的背景,请选择比原色更柔和的颜色。
  • 选择字体颜色:请记住,不建议使用白色背景上的纯黑色字体,这会导致眼  睛疲劳。
  • 不要太过分:使用白色来对比和整理您的设计。并使用您的原色并使用饱和度。


还有一些提示:

  • 确定您的目标受众。
  • 不要忘记品牌。
  • 让 CTA 按钮脱颖而出。
  • 请测试一下,测试一下,再测试一下。


你有它,一些有用的技巧,可以在你的设计中利用色彩心理学的力量。并且不要害怕测试不同的颜色组合以最终找到完美的组合。


Powered by Froala Editor

更新:2021-09-27

收藏

8人已收藏

Talon

原迅雷高级UI设计师

  • 31

    作品

  • 103

    粉丝

  • 9

    关注

  • 如何设计更好的空状态?
  • 设计中的留白:每个设计师都应该知道的留白准则
  • LEXUS 官网重新设计
  • 深色模式 UI 最佳实践
相关标签

    猜你喜欢

      2021-09-27 自译外文 经验/观点 原作者: Eva V. 举报 3134 8 3 0

      如何为你的网站选择颜色

      0.0°

      你确定要举报如何为你的网站选择颜色

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2021年09月26日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      3
      8
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录