Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >必读!UI设计中颜色使用的10条原则

必读!UI设计中颜色使用的10条原则

作者头像
用户5009027
发布于 2020-07-28 09:17:23
发布于 2020-07-28 09:17:23
4.1K0
举报
文章被收录于专栏:静Design静Design

1.颜色术语

颜色术语构成了我们颜色知识的基础。将诸如色调,色调和阴影之类的颜色术语视为我们可以用来开发独特调色板的工具。

色相(Hue)

色相是色彩的技术术语。色相是指父色-一种饱和色,没有添加白色或黑色。

着色(Tint)

将白色添加到色相(Hue)时,将创建着色效果。

阴影(Shade)

将黑色添加到色相(Hue)时,将创建阴影。

色调(Tone)

将灰色(白色和黑色)添加到着色时,将创建一个色调。

明暗值(Value)

值是指颜色的明暗程度。它指示反射的光量。

饱和度(Saturation)

饱和度是指颜色的亮度和强度。高度饱和的颜色充满活力和光芒,而低饱和度的颜色则暗淡。

2.层级结构

当元素的外观与其周围环境形成对比时,表明该元素具有更高的重要性。我们可以使用颜色和颜色权重在接口内建立层次结构。

通过使用色彩,我们可以为元素分配不同的重要性级别。如果一个元素比另一个元素更重要,则它应该具有更高的视觉重量。这使用户易于快速浏览页面并区分重要和次要信息。更加醒目,大胆的信息是首先要吸引用户的眼睛,然后他们将继续浏览其下方的信息。

3.表现力

在令人难忘的时刻展示品牌色彩,以增强您品牌的独特风格。

考虑一下您的品牌颜色,例如一盘鳄梨吐司上的盐和胡椒粉。盐分过多,会压倒自然风味,而盐分过少,则平淡无奇。

在添加颜色以增强品牌在界面上的效果时,请考虑在何时添加颜色,以及添加颜色的位置。

4.包容性

在设计产品的时候,必须考虑到所有人群(比如残障人士,盲人等)。

Web内容可访问性指南(WCAG)提出了一些建议,以确保运动,听觉和认知障碍人士可以访问我们界面中的颜色。例如,他们的文字标准至少需要4.5:1的对比度。

为了确保您符合这些标准,请下载Stark(https://www.getstark.co/),它将检查您的设计是否可访问。您还可以模拟色盲的使用环境,并根据需要,使用插件对设计进行调整。

5.色彩的意义

颜色会引起不同的感觉或情感,因此,通过了解颜色的心理,我们可以使用与目标受众产生共鸣的品牌颜色。

重要的是,要认识到您的听众是谁,并记住他们。对颜色的感知因文化而异,因地区而异。例如,在西方文化中,白色通常与婚礼相关联,而在东南文化中,白色被视为哀悼的颜色。

公司在其品牌和行销活动中都使用色彩作为一种策略。注意几乎每家快餐店的品牌都使用红色和黄色吗?这是因为红色触发刺激,食欲,饥饿,并引起人们的注意,而黄色则触发幸福和友善的感觉。

6.限制颜色使用数量

通过限制在应用程序中使用颜色,可以使重要的区域受到更多关注,例如文本,图像以及按钮等单个元素。

您会注意到,在如Instagram或Twitter这样包含很多色彩和不可预测内容的应用程序中,它们的界面往往非常简洁。这种设计非常微妙,它将用户的视觉焦点从界面移开,并将其聚焦在内容上。

7.状态

颜色是我们可以在界面中显示状态变化的一种方式。通过把按钮的颜色变灰,表示按钮已禁用,或者通过将其突出显示为红色,来表示错误。我们还应该在错误颜色旁边附加错误消息和图标,以确保清晰度并提示色盲用户注意。

8.一致性和上下文

设计的颜色用法应保持一致,因此即使上下文发生变化,颜色也始终统一。

如果在我们的设计中,主色调使用红色,则应避免使用它来通知错误状态。我们可以使用其他颜色(例如黄色)来避免混淆。

这是一个很容易解决的问题,因此没有理由避免在我们的品牌中使用红色或黄色。

9.调色板

那么问题来了,如何获得完美的调色板和配色呢?首先从颜色理论和基本的工具理解开始。

第一步:主色调和系统颜色

一旦有了主色调,就需要为文本,背景,容器等添加颜色。通常,我会选择用于文本的深色和用于背景的浅灰色。

第二步:创建调色板

UI选择基本颜色后,将这些颜色放入Google颜色工具https://material.io/design/color/the-color-system.html#tools-for-picking-colors(位于此页面底部附近)中,以获取该颜色的不同阴影和色度。

这并不总是完美的,但是它是生成近乎完美的调色板的一种简单方法,我可以根据需要添加或调整它。

如果我需要互补色或要测试辅助功能,则可以使用Google颜色工具完成所有这些操作。一站式操作~

第三步:将所有颜色放在一起

10.60-30-10原则

60%是氛围色,30%是辅助色,10%是点睛色(主色)

“这种室内设计规则是一种永恒的装饰技术,可以帮助您轻松地将配色方案组合在一起。60%+ 30%+ 10%的比例是为了使颜色平衡。这个公式之所以有效,是因为它创造了一种平衡感,并使眼睛舒适地从一个焦点移动到另一个焦点。”

与我之前提到的技巧类似,例如少量使用颜色来增加强调和加强品牌烙印,60–30–10是确保我们不会在色彩上占上风的粗略工具。

我还想从界面往后退后几步,眯起眼睛。如果我使用的颜色过多,模糊的图像将使我对层次结构有更好的了解。

福利:色彩工具和资源

·Google配色工具

https://material.io/design/color/the-color-system.html#color-theme-creation

这是我所知道的用于生成调色板的最佳工具。它利用一种算法来创建易于访问且美观的调色板。

· https://dribbble.com/colors/

Dribbble是我最喜欢获得UI灵感的地方。通过按颜色搜索功能,可以轻松了解其他设计师如何在设计中使用特定颜色。

· https://coolors.co/palettes/trending

提供了流行的颜色配色方案

· https://prowe214.github.io/color-shader/

Shaderade是一种快速简便的工具,可利用数值精确的色彩和色调生成单色配色方案。

原文:https://uxdesign.cc/10-principles-for-color-usage-in-ui-design

作者:Danny Sapio

翻译:静电

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2020-07-27,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 静Design 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
UI界面的配色小技巧及案例演示
前言:在UI界面的配色中,你是怎么配色的呢?是不是直接参考别人如何搭配就跟着怎么搭?这样一直下去是不行的,我们要了解一些UI配色的基础知识,后续才会进步。我最近在做Dribbble,所以总结了一些UI配色的小技巧,希望能帮助到大家。
超级小可爱
2024/01/27
9080
UI界面的配色小技巧及案例演示
科研绘图配色
颜色需要有自身的意义。不同的颜色表示不同的分组,相近的颜色表示同一个分组;配色需要展现数据逻辑关系,突出关键数据,比如重要的数据用深色或暖色表示,不重要的数据用浅色或冷色表示。
Twcat_tree
2023/11/30
3.9K0
科研绘图配色
「 泛政务设计 」可视化色彩体系的配色方法探索
图表是中后台产品最常见的界面信息元素之一,能够直观地展示数据、支撑观点。因大脑对视觉信息的处理优于对文本的处理,所以把数据进行可视化,可以更容易的解释数据模式、趋势、统计规律和数据相关性,也让视觉上也更丰富、美观。 图表的色板是传达信息、美感和情感的重要元素之一。配色不仅要清晰、准确传达信息,给予用户基本的美感,同时需要在多种颜色中,兼顾品牌感,使图表配色不脱离整体的品牌气质。 那是否有什么方法来指导辅助色的建立呢?本文总结了政务类产品在可视化图表配色上的一些探索思路和实践方法。 设计背景与目标 1. 现状
腾讯云设计中心
2022/05/05
2.3K0
「 泛政务设计 」可视化色彩体系的配色方法探索
数据可视化配色指南:三大配色方法,做出咨询报告一样的图表丨附在线工具资源
可是学习色彩设计,又是十分费工夫的一件事,不仅要搞明白RGB、CMYK等各种颜色体系,搞懂各种配色方法,重点是还要看大量的案例,培养良好的审美观,防止自己做出来的东西辣眼睛……
量子位
2019/10/31
8840
数据可视化配色指南:三大配色方法,做出咨询报告一样的图表丨附在线工具资源
漂亮很重要!UI设计师必备的7种色彩搭配方案
合理运用色彩是每个设计师都应必须具备的技能,特别是插画师和UI设计师。色彩理论知识的重要性也变得愈加明显!
用户5009027
2019/08/08
1.8K0
漂亮很重要!UI设计师必备的7种色彩搭配方案
不懂设计的产品不是好开发
通过这篇文章,我将向大家介绍下关于设计的一些基本知识,让广大开发者在平时的开发中,可以更好的和设计、产品合作(撕逼)。
用户1907613
2022/03/31
2.8K0
不懂设计的产品不是好开发
深度译文:设计系统中的自适应颜色(Part 01)
静电说:在今年苹果的开发者大会设计分会场中,苹果设计师在演讲中就提到了色彩可用性的问题,过小的,不便于阅读的配色没有可用性低下,反之则可用性高。本文来自Nate Baldwin ,由静电翻译。来听听他如何探讨如何在多变设计环境中运用自适应颜色来解决问题。这一系列三篇的文章稍显晦涩,但却用一种严谨的方式来阐述了这个问题,非常值得设计师进阶阅读。
用户5009027
2019/07/30
1.1K0
深度译文:设计系统中的自适应颜色(Part 01)
数据可视化配色指南:三大配色方法,做出咨询报告一样的图表
可是学习色彩设计,又是十分费工夫的一件事,不仅要搞明白RGB、CMYK等各种颜色体系,搞懂各种配色方法,重点是还要看大量的案例,培养良好的审美观,防止自己做出来的东西辣眼睛……
Python数据科学
2019/10/31
1.8K0
数据可视化配色指南:三大配色方法,做出咨询报告一样的图表
UI技巧 | 用户界面设计的10个小技巧
点击上方[我分享我快乐]→[...]右上角→[设为星标⭐]即可第一时间获取最新设计资源
用户1730674
2020/05/22
1.5K0
UI技巧 | 用户界面设计的10个小技巧
UI界面配色方法终极指南!一篇长文搞定所有问题
静电说:要培养对颜色的敏感度,你必须要了解色彩的原理。在这个基础上去感悟,久而久之,色彩会在你手中变的游刃有余。下面这篇终极色彩指南非常值得一看~让我们不妨再系统梳理一下你的配色技巧吧!
用户5009027
2022/05/23
3.1K0
UI界面配色方法终极指南!一篇长文搞定所有问题
之于图片主色调提取算法
算法的主要目的是从真彩色图像所能表现的大约16M中颜色中选取最代表性或者出现频率最高的256种颜色。
cpuimage
2018/05/10
6.3K5
机器学习+颜色=智能配色,解读Brandmark的解决方案color-wheel
当我们提起机器学习和颜色的时候,首先想到的可能是黑白照片着色和风格迁移2类应用。虽然这些像素级技术适用于照片,但它们对于艺术的插画风格的图片效果并不是很好。Brandmark称此类图片为flat的图,于是开发了一款子产品color-wheel,专门用于此类图片的风格迁移。
mixlab
2018/10/22
1.9K0
机器学习+颜色=智能配色,解读Brandmark的解决方案color-wheel
超全可视化基础讲解,这一次,拿下色彩搭配~~
当您筛选新闻提要时,什么往往会引起您的注意呢?视频、动画、GIF图片、图片?又或者其他视觉内容?
DataCharm
2022/02/17
1.5K0
超全可视化基础讲解,这一次,拿下色彩搭配~~
【OpenCV】HSV颜色识别-HSV基本颜色分量范围
一般对颜色空间的图像进行有效处理都是在HSV空间进行的,然后对于基本色中对应的HSV分量需要给定一个严格的范围,下面是通过实验计算的模糊范围(准确的范围在网上都没有给出)。
用户2965768
2018/08/30
7.5K0
【OpenCV】HSV颜色识别-HSV基本颜色分量范围
腾讯文档-构建科学有效的色彩系统
“色彩是我们感知世界的重要媒介,对于信息传达有着重要的作用,能使人们能够更有效的感知设计的意图和内涵,使传达更高效。且人对色彩的视觉感知与想象能力,能够指导人做出预测、理解和决策。” ——lyft kevyn arnott 随着世界的数字化转型进程大爆发,科技把每一张有形的办公桌移到了云端,用户沉浸在数字构建的世界中。腾讯文档作为先进的生产力工具,产品生态越来越多元丰富,多品类多终端的复杂环境展现在我们面前,开始真正的朝复杂庞大的大规模设计迈进。我们希望能以更加专业、高效的设计姿态迎接腾讯文档的未来挑
腾讯ISUX
2021/04/13
6710
10道题搞懂色彩搭配的6大准则,让你的图表开口说话!
导读:如果你有时间只专注于改进图表中的一件事,那就选择改进颜色。大多数软件无法直观地挑选与你的背景匹配的颜色。
IT阅读排行榜
2020/09/08
1.5K0
10道题搞懂色彩搭配的6大准则,让你的图表开口说话!
萧蕊冰:了解UI设计配色技巧,让你的设计更和谐!
哈喽大家好,今天的分享是关于UI设计配色技巧的,怎么才能让我们的界面配色更加和谐,是一个设计师需要重视的问题。我们要对颜色的敏感度,颜色的运用常识要有所了解。今天的文章将帮助你更加了解UI设计配色中的技巧、理论知识以及如何运用它们。
萧蕊冰
2020/06/19
5770
2022年8大色彩趋势新鲜出炉!这些配色方案值得你使用
静电说:近期知名媒体GraphicMama总结了2022年流行的八种配色方案,静电经过翻译分享给大家,希望给大家的UI配色带来帮助。
用户5009027
2022/10/27
1K0
2022年8大色彩趋势新鲜出炉!这些配色方案值得你使用
Python Seaborn (2) 斑驳陆离的调色板
颜色显然比图形风格的其他方面都更加重要,因为颜色使用得当就可以有效显示或隐藏数据中的特征。有许多的好资源都可以了解关于在可视化中使用颜色的技巧,推荐Rob Simmon的《series of blog posts》和这篇进阶的技术文章,matplotlib文档现在也有一个很好的教程,说明了如何在内置色彩映射中构建的一些感知特性。
数据猿
2019/03/06
2.9K0
Python Seaborn (2) 斑驳陆离的调色板
颜色系(color palette)是什么?一文带你掌握全部用法!
颜色的选择是创建有效图表的主要因素。一组好的颜色将突出您希望数据讲述的故事,糟糕的颜色会隐藏或分散可视化数据的目的。
DataCharm
2021/12/21
3.9K0
颜色系(color palette)是什么?一文带你掌握全部用法!
推荐阅读
相关推荐
UI界面的配色小技巧及案例演示
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档