如何快速掌握正确的UI配色方案?6种技巧不容错过!

以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具

原文地址

用户体验设计涉及很多流程,需要足够的深思熟虑才能设计出符合用户需求的UI界面。虽然听起来不太复杂,但每个细节都需要设计师反复推敲。

用户界面创建过程中耗时最长的阶段便是颜色选择,设计师往往可能要花上几个小时才能挑选到合适的颜色。在本文中,我们将介绍六个实用的配色技巧,帮助设计师为界面选择最适合的颜色,并使选择过程更加轻松,更高效!

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

这一原则或者说技巧源于室内设计,因此经常被用于装饰房屋。这个技巧很简单:为了达到平衡的配色效果,所使用的颜色应以6:3:1的比例进行配色。占据最大比例的为主色,30%为辅助色,10%为装饰色,帮助提高整体亮度。

这样的配色比例被认为是令人愉悦的,从视觉感知上来讲,它带给用户一个舒适的色彩层次。掌握恰当的配色比例可以帮助设计师成功地组合颜色,避免了将用户界面变得光怪陆离。

技巧2:巧用色彩对比

色彩对比几乎是所有视觉构图中的关键部分。它赋予了每个UI元素独特性,并使其引人注目。需要注意的是:用户界面中来自相同色系的色彩对比度较低,无法达到吸引用户注意力的效果。此外,在这种用户界面上复制的文本内容辨认度较低,这使得设置产品交互也十分困难。

设计师硬根据所要实现的目标来控制色彩对比度的高低。例如,如果你需要用户注意到某个特定的界面元素,则最好使用像蓝色和红色这样高度对比的颜色。CTA按钮设计就常常使用高对比度的颜色。

但是,将UI作为一个整体来说,高对比度的颜色可能并不总是奏效。如果文本内容和背景颜色之间的差异太大,则很难读取或扫描文本。这就是为什么建议设计师采用温和的色彩对比,并只在某些特定元素上应用高对比度的颜色。通过在不同的设备上进行用户测试,可以帮助设计人员确保其配色方案的有效性。

提示3:考虑颜色的心理学

正如我们在前几篇文章中提到的,心理学是一种为设计工作流程的提供助力的研究之一。其中,色彩心理学就属于这种心理学的一个分支,它主要研究色彩对人类情绪和行为的影响。研究表明,我们的大脑会对不同的颜色做出多种反应,但我们通常都忽略了这些感知。当人的眼睛感知到一种颜色时,我们的大脑会向内分泌系统发出信号,释放出对应情绪的荷尔蒙,从而让我们产生不同的情绪和感受。

每种颜色对我们的感知都有其独特的影响力,了解用户对于颜色可能产生的反应可以帮助设计师传递正确的信息,并引导用户做出预期的行为。以下是一个颜色含义的列表可供参考。

红色,它既象征着爱情,自信,激情,也象征着愤怒。

橙色,这是一种充满活力和温暖的色彩,能带给人兴奋的感觉。

黄色,这是一种象征幸福,阳光,欢乐和温暖的颜色。

绿色,一种最接近大自然的色彩,给人平静和清新的感觉。

蓝色,它通常用于代表一些企业形象,给人沉静,可靠的感觉。

紫色,这是一种神秘又高贵的颜色,一直与贵族和财富有着密切联系。

黑色,它通常与悲剧和死亡联系在一起,象征着神秘。它同时符合传统的和现代的审美。

白色,这种颜色象征着纯洁和天真,也带给人纯粹和清晰的感觉。

另外,设计师需要记住,每个人的视觉感知都是独特的。除了年龄和性别等因素对色彩偏好有很大的影响,文化差异也是其中一个重要因素,因此了解受众的特征至关重要。

提示4:重视色彩的文化差异

总所周知,每种文化都有自己的传统和信仰,文化差异对于色彩的选择也有很大的影响。在不同国家对于同一种颜色可能有完全相反的含义。例如,在欧洲国家,白色象征纯洁,常用于婚礼。而在许多亚洲国家,这种颜色意味着死亡和悲伤。因此,不正确的色彩选择可能会导致用户对产品产生致命的误解。通过了解色彩不同的文化特点,设计师们能够大大降低产品被误解的风险。

提示5:促使色彩协调

色彩协调是UI设计师努力的重要目标。为了让用户感到舒适和满意,设计师试图将平衡引入用户界面设计。色彩的协调是指设计中色彩的排列,以最吸引人的、最有效的方式来吸引用户的感觉。协调的颜色有助于网站或应用程序的良好的第一印象。

经过多年的探索,设计师们区分了一些基本的配色方案,使其色彩运用更加有效。以下是一些基础的配色方案:

单色,单色配色是基于一种颜色,选择其不同的色调进行色彩组合。

类似色,该配色方案应用于色轮上彼此相邻的颜色。

互补色,它是在色轮上彼此相对放置的颜色组合方案,旨在产生色彩的高对比度。

拆分互补色, 这个配色方案的工作原理类似于互补色,但是不同的是采用了更多的颜色。例如,如果你选择了蓝色,配色则需要组合两个与其相反颜色(橙色)相邻的其他颜色(黄色和红色)。

三元色,它基于色轮上等距的三种不同的颜色。专业人士建议使用一种颜色作为主色调,其他两种色彩用来提亮。

双色互补,这种配色方案采用了两对互补色组合。如果连接这四种颜色在色轮上的位置,就会形成一个矩形。

提示6:从大自然中获取灵感

大自然是世界上最好的艺术家和设计师。我们在自然环境中看到的颜色组合总是接近完美的。人们喜欢看的日落和黎明,秋天的森林和冬天的山脉,因为他们充满了自然的色彩组合。

那么,你为什么不试图从中获取一些想法呢?去美丽的大自然里散散步,你一定会找到灵感!

数码产品的成功在很大程度上取决于设计师为其用户界面所选择的颜色,正确的颜色给用户带来极大的舒适感。设计师通过运用合适的配色方案,就能使用户迅速明白产品的设计思想,引导他们执行适当的操作。

作者:Tubik Studio

地址:https://uxplanet.org/color-matters-6-tips-on-choosing-ui-colors-260f56197a7b

学习工具,但不受限于某种工具。Mockplus做原型,更快更简单,现在下载Mockplus,免费体验畅快的原型设计之旅。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏CSDN技术头条

数据可视化之美:经典案例与实践解析

本文来自作者在GitChat(ID:GitChat_Club)上的精彩分享,CSDN独家合作发布。 随着DT时代的到来,传统的统计图表很难对复杂数据进行直观地展...

37260
来自专栏Web行业观察

Material Design的概述与环境

Material Design 是我们将经典的设计原则和科技、创新相结合而创造的设计语言。这份文档会随着我们对 Material Design 的探索而不断更新...

20750
来自专栏MixLab科技+设计实验室

03 使用Echarts制作可视化图表 |数据爬取及可视化系列

这是《数据爬取及可视化系列》的第三篇文章。 前2篇文章,可以查阅: 01基于位置的用户画像初探 02技能之谷歌Chrome爬虫 ---- 最近在结合新学的爬虫...

43280
来自专栏VRPinea

抖机灵的VR解决方案|实现3D追踪、提高刷新率、保证图像渲染质量

这些方案,一定程度上能帮助解决VR体验现存的帧率不足、刷新率与图像分辨率不够高、成本昂贵、设备不够便捷等问题。

11120
来自专栏黄成甲

互联网产品如何建立用户画像?

过年时,闲来无聊,便想起年前和啊喔科技的的朋友聊到过“不写就出局”用户活跃度的话题,大家共同讲起了需要建立产品的用户画像。去年十月,雨花客厅程冲老师在产品课程上...

44820
来自专栏VRPinea

想用话语砸死人?《Word Vomit 3D》将你说的每个单词“实体化”

29580
来自专栏人工智能

【PaaS】【机器学习】

1 用 LINQ 编写 C# 都有哪些一招必杀的技巧? 作者简介: 曹某某,来自南京的 .NET 码农,微软 MVP,CSDN 版主。将近10年里干过架构师,也...

25480
来自专栏AI科技评论

业界 | Facebook将反馈融入AI系统,视觉障碍者现在也能“读懂”照片啦

AI科技评论按:Automatic Alt-Text (AAT) 的发布让盲人(或使用屏幕阅读器的用户)更好地读懂新闻推送 (News Feeds) 里的照片...

30490
来自专栏CDA数据分析师

【零一】#操作教程贴#从0开始,教你如何做数据分析#中阶#第六篇

HI~!我是零一,好久不见了。今天开始我们一起来学习数据分析的中阶课程。我的公众微信号是start_data,欢迎大家关注。 今天的内容主要是理清数据分析的主要...

202100
来自专栏PPV课数据科学社区

干货:数据可视化6步法

在当前互联网,各种数据可视化图表层出不穷,本文尝试对数据可视化的方法进行归纳,整理成6步法。 一般的数据图表都可以拆分成最基本的两类元素: 所描述的事物及这个事...

404120

扫码关注云+社区

领取腾讯云代金券