UI设计中六大配色技巧 传递网页的真正情绪

网页设计中,最麻烦的就是色彩搭配,虽然色彩选择看起来不太复杂,但是找到真正能够和整个设计项目贴合、能够覆盖整个设计中所有元素需求的配色,却需要在设计中不断的调整和验证才能找到合适的。因此,一套强大而有效的配色方案,可能需要花费不少时间来回的打磨。

UI设计中六大配色技巧

技巧一:掌握60-30-10原则

UI设计中六大配色技巧 传递网页的真正情绪

这原则最早源於室内设计的领域,其中占据60%的是主色,而30%是次主色,占据10%的色彩应当为提亮色。

这一配色比例在视觉感知上,提供了令人感到舒适的色彩层次,同时还能让这个UI色彩以一种可控的比例呈现出来,而不是将整个设计变得好糟糕。

技巧二:对比是很好的方法

UI设计中六大配色技巧 传递网页的真正情绪

色彩的对比几乎是任何视觉构图的关键部分,对比度创造了UI元素的差异,同时也赋予他们的性格。

UI设计当中来自同一色系的色彩,往往不能呈现出明显的对比度,可适度较低的文本会令界面信息的传达和交互产生障碍。但文本内容和背景的对比度过大容易产生「晕影」的视觉效果,这会影响长时间的阅读体验。因此设计师需要采用温和的对比度控制,并且只在特定的元素上使用高对比度。

技巧三:参考色彩心理学

 

UI设计中六大配色技巧 传递网页的真正情绪

色彩心理学,主要研究色彩对於人类情绪和行为上的影响。我们大脑对於色彩的反应其实是相当敏感和多样,但在日常生活中却很难直观迅速地感受到。但当人的眼睛感知到某种色彩时,大脑的分泌系统会发出信号,释放并刺激产生对应情绪的激素。

每种色彩对於我们的感知和思维都有独特的影响力,了解这些可能的反应,能帮助设计师正确地传递信息,引导用户按照设计师的预期来执行。

技巧四:文化差异的影响

不同的文化优质不同的传统和信仰特徵,甚至同一种颜色在不同的国家也有着截然不同的解读方式。

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

技巧五:让色彩协调起来

UI设计中六大配色技巧 传递网页的真正情绪

通过色彩来营造富有吸引力的协调设计,能够让用户清晰明了地感知到UI中的内容,同时留下良好的第一印象。

比较基本的配色方案:

单色配色:同一色系,以不同明暗、饱和度的色彩组合到一起;

类似色:在色轮上彼此靠近的颜色;

对比色:色轮上彼此处於相对位置的色彩;

拆分互补色:配色原理和互补色相似,但会采用更多的颜色;

三原色:色轮上挑选互为120°的三个颜色类进行配色,建议使用其中的一种色彩作为主导,另外两种色彩用来提亮。

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

技巧六:从自然获取配色

UI设计中六大配色技巧 传递网页的真正情绪

大自然是世界上最好的艺术家和设计师,我们在自然环境中看到的色彩组合大多都非常的协调,甚至可以说接近完美。

就目前来看,网页设计受欢迎的程度,与配色方案的选取有关,舒适的配色方案不仅能让用户感到舒服,还能通过网页设计传递情绪,真正创造出深入人心的产品。

本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处https://www.cwhello.com/43949.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
InspirrInspirr订阅用户
上一篇 2022年6月25日 23:43
下一篇 2022年6月25日 23:43

相关推荐

  • 经验分享自己如何制作网站网页设计图片,如何介绍自己的网页设计。

    制作网站网页设计图片是一个涉及到多个步骤的过程,包括设计、编码和发布,以下是一些基本的步骤: 1. 确定目标:你需要明确你的网站的目标,这将帮助你确定你的设计应该包含哪些元素,以及如何布局这些元素。 2. …

    2024年6月28日
    04
  • 4个方法让网站更具个性。

    在如今各行各业网站都泛滥的今天,商家要想让自己的网站给客户留下深刻印象,提高转化率,那就一定要做出品牌个性。网站制作设计要怎样做才能更加专业、个性化呢?你可以看下面这个网站制作个性定制教程: 1.使用自…

    2022年7月4日 建站资讯
    0134
  • 如何更好的进行网页设计?

    现在很多公司都想进行网上推广,网站就是一个很好的宣传渠道,但是奈何找不到适合的网页设计技巧,不知道如何进行。那么这篇文章就针对网页设计进行简述,希望大家都能正确的进行网页设计,能用专业网站吸引更多的…

    2019年8月20日
    0285
  • 网站制作时提升网页样式布局

      第一方面:善用侧边栏 侧边栏通常可以帮助用户深入到下一个层级,用户交互起来也会更加的深入: 提供使用者想要看到的内容,而不是广告、相关文章和小控制项这样的东西。 将它设计成为使用者找到特定内容的…

    2022年6月25日
    0108
  • 常见的两种动效反馈方式

    出错 当用户在界面当中完成操作之後,若操作异常或者系统异常,动效往往会将错误报告迅速反馈给用户。这是最常见的动效反馈机制之一。如左右抖动,比较趣味而人性,有效缓解用户的紧张、焦虑等。同时还增强了界面的…

    2022年6月25日
    0133
  • 提升网页设计可用性的2个小技巧

    页面突出一个想要强调的焦点 很明显,每个页面都会有一个想要呈现的重要内容、元素、数据,以此帮助用户确定出一定的浏览目标。这样也能够形成视觉上的对比,减少用户继续走马观花的浏览。具体做法如页面标题部分合…

    2022年6月11日
    0120
  • 良好的用户界面与用户体验是决定seo优化排名的重要因素。

    用户界面代表用户界面,用户界面和用户体验代表用户体验。它们都是影响SEO排名的因素。随着移动终端的发展,其比例逐年上升,为了更好地理解它们对SEO的影响,我们需要了解UI和UE/UX是什么。接下来一起看看吧。 用…

    2023年2月18日
    02
  • 不会栅格系统?拿走这篇零基础使用指南。

    前言在如今多终端、多设备尺寸的加持下,多屏设计就成了商业设计中不可缺少的一部分,为了让所用界面的视觉表现出统一性和一致性、同时在不同系统及不同尺寸的设备上保持良好的用户体验,栅格系统就显得尤为重要,…

    2023年3月7日 SEO操作
    02

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息