SEO > 新闻资讯 > 网页设计 > 网页设计中的六大配色技巧

网页设计中的六大配色技巧

分类:网页设计作者:小邱 发布时间:2019-12-25 14:42:05访问人数:
本文标签: 网页设计网站设计

  在构建用户界面的过程中,最耗时的是颜色的选择。它需要在设计中不断的调整和验证,才能真正匹配整个设计项目,覆盖整个设计的所有元素。一个强大和有效的配色方案可能需要几个小时来回打磨。

网页设计中的六大配色技巧
网页设计中的六大配色技巧

  因此,在今天的文章中,我们总结了六种关键的颜色匹配技术,以帮助设计师在设计网页时选择正确的颜色,从而使颜色匹配的过程更加简单和高效。

  技巧1、掌握60-30-10原则

  60-30-10原则最早是源自于室内设计领域,室内设计师借助这一原则,创造出协调的室内设计配色。这一原则很容易理解,为了达到平衡的配色,几种色彩遵循这60%—30%—10%这样的色彩配比。其中占据60% 的是主色,而30%则是次住色,而占据10%的色彩应当为提亮色。

  这一的配色比例被认为是颇为令人愉悦的,在视觉感知上,它提供了一个颇为让人舒适的色彩层次,这样的控制让整个网页的色彩以一种可控的比例呈现出来,而不是将整个设计弄得一团糟。

  技巧2、对比是你最好的朋友

  色彩的对比几乎是任何视觉构图的关键部分。对比度创造了UI元素的差异,也赋予它们以性格。值得注意的是,UI当中来自同一色系的色彩往往不会呈现出明显的对比度,而可识别度较低的文本更是界面信息传达和交互的障碍。

  设计师需要根据设计目标,来合理地控制整个产品的对比度高低。举个例子,如果你需要让用户注意到特定的元素,那么最好使用高对比度的色彩来达到引人瞩目的视觉体验,比如使用高对比度的红色和蓝色。CTA按钮常常就是使用这样的色彩。

  但是,将UI视作为整体的话,高对比度的色彩可能并总能奏效。文本内容和背景的对比需要控制在一个合理的度上面,否则就会因为对比过大产生「晕影」的视觉效果,这会影响长时间阅读的阅读体验。这就是为什么会建议设计师采用温和的对比度控制,并且只在特定的元素上使用高对比度。通过在不同的设备上测试,可以让设计师保持配色的可用性和泛用性。

  技巧3、参考色彩心理学

  正如同我们在前文中所提到的,大量我们所熟知的设计工作流程都是基于心理学原理开展的。色彩心理学是和设计息息相关的一个心理学分支,它主要研究色彩对于人类情绪和行为上的影响。我们大脑对于色彩的反应其实是相当敏感和多样的,但是在日常生活中我们很难直观地、迅速地感受到。当人的眼睛感知到一种色彩的时候,会向大脑内的分泌系统发出信号,并且释放刺激产生对应情绪的激素。

  每种色彩对于我们的感知和思维都有独特的影响力,了解这些可能的反应最终可以帮助设计师正确地传递信息,并且引导用户按照设计师的预期来执行。下面是一些颜色的基本的特征和含义:

  红色,象征爱情,自信,激情和愤怒,它是充满活力和温暖的色彩,给人带来兴奋的感觉。

  黄色,能传递出幸福,阳光,喜悦和温暖的情绪。

  绿色,则常常能给人自然、清新、富有生命力的感觉。

  蓝色,是目前最受欢迎的颜色之一,企业常常会使用蓝色来传递自信和让人信赖的感觉。

  紫色,和皇室、财富关联密切,这也是代表神秘和茉莉的色彩。

  黑色,虽然和死亡、悲剧有关,但是也能营造沉稳大气的高级感。

  白色,代表纯洁无暇,传达出高雅,纯粹和清晰的感觉。

  除此之外,设计师还需要明白一个事情,就是人和人的视觉感受通常是不同的,对于色彩的认知还受到文化背景的影响,性别的因素对于色彩偏好的影响也不小。因此,了解目标用户的特征是很有必要的。

  技巧4、不要忘了文化差异

  正如同前文所说的,文化背景对于色彩有着深刻的影响。不同的文化有着不同的传统文化和信仰特征,甚至同一种颜色在不同的国家有着截然不同的解读方式。白色在欧美国家常常象征着纯洁和高贵,但是在亚洲地区,丧事也常常被称为“白事”,代表着死亡和悲伤。在中国,色彩饱和度高的正色是传承了几千年的视觉文化元素,但是在日本,却以间色和低饱和度的色彩为美。

  只有在专业的色彩知识架构下,深入了解受众当地的文化特征,才能更好的降低被误解的风险,创造出优秀的设计。

  技巧5、努力让色彩协调起来

  协调的UI设计是设计师的目标之一,而这意味着配色一定要和谐而令人感到舒适。通过色彩来营造富有吸引力的协调设计,能够让用户清晰明了地感知到UI中的内容,同时留下良好的第一印象。

  随着多年的摸索,在配色方案上前人总结了一些基本的配色方法:

  单色配色。单色配色并不是说只有一种颜色,而是基于同一色系来进行配色,不同明暗、饱和度的色彩组合到一起,构成配色方案。

  类似色。在色轮上彼此靠近的颜色构成的配色方案。

  对比色。色轮上彼此处于相对位置的色彩能够构成鲜明的对比,这些对比色能够构成高对比度的配色方案。

  拆分互补色。拆分互补色的配色原理和互补色相似,但是不同的地方在于,这样的配色当中会采用更多的颜色,当你选择蓝色之后,与之搭配的不是对位上的橙色,而是橙色两侧的黄色和红色。

  三元色。它是在色轮上挑选互为120度角的三个颜色类进行配色。建议使用其中的一种色彩为主导,另外两种色彩用来提亮。

  双互补色。采用两对互补色来作为主要的配色方案。

  技能6、天然配色

  大自然是世界上最好的艺术家和设计师。我们在自然环境中看到的大多数色彩组合都非常和谐,甚至近乎完美。人们喜欢日落与黎明、秋叶与冬山,因为这些色彩组合有着独特的美感。

  • 项目经理.png

    扫描添加

    项目经理微信

    享受专业顾问服务

  • 微信公众号.jpg

    关注公众号

    获取更多专业资讯

  • 已赞(3)
    分享:

    版权:【注明为本站原创的文章,转载请注明出处与原文地址!本站部分转载文章能找到原作者的我们都会注明,若文章涉及版权请发至邮箱:[email protected],我们以便及时处理,可支付稿费。向本站投稿或需要本站向贵司网站定期免费投稿请加QQ:1175062249】 更多信息请关注微信:1175062249

    本文关键词:网页设计,网站设计,网站设计风格
    阿里云服务器
    SEO按天计费
    域名注册
    网站建设
    君创网络启动新征程

    Copyright © 2013-2020 昆明君创网络科技有限公司 版权所有 滇ICP备19009793号-1 beianico.png滇公网安备 53011102001061号

  • QQ
  • 电话
  • 首页
  • 留言
  • 返回顶部