返回

从零开始学 UI

#设计知识
#知识库
25%
进度
0/14
知识点
0
笔记
概述
移动端UI设计的基本认识
移动端UI设计的基本认识
UI 界面设计所需的技能解析
UI 设计的软件介绍
移动端的基础规范认识
移动端的规范认识
屏幕和分辨率的规范
设计的单位和格式
UI 中的字体与显示
UI 文字的属性设置
基本色彩模式的认识
UI 设计中的原子理论
iOS 的基本规范认识
iOS 的控件和组件认识
标准规范下的APP 设计演示
苹果音乐主页的设计
资料库页面的设计
专辑页面的设计
播放页面的设计
界面的合并和输出
移动端的基本控件和组件设计
UI 中的尺寸定义逻辑
按钮的设计逻辑
输入框的设计逻辑
列表行的设计逻辑
图标的尺寸定义
分页器控件的设计
轮播广告组件设计
快速入口的设计
瓷片区的设计
动态卡片的设计
商品卡片的设计
模态弹窗的设计
移动端页面设计的解析
登录页面的设计
综合型主页设计
动态列表页面设计
商品列表页面设计
电商详情页面设计
影音详情页设计
用户设置页面设计
表单页面设计
UI 中的视觉风格
夜间模式的设计
UI 中的投影应用
首页知识库设计知识从零开始学 UI

基本色彩模式的认识

UX百科编辑部 编辑于 2023-12-1448人正在学
60

配色是一门很复杂的学问,在学习配色的方法之前,首先要理解的是色彩的模式。

色彩模式是一种用来描述、记录色彩的方法,而不同场景,方法就不一样。因为不同的场景中组成色彩的要素不同,如果不做区分,就会造成颜色记录和使用上的误差。

常见的色彩模式包含HSB、RGB、CMYK 三个大类。

色彩模式分类

HSB 是描述自然界所有颜色的方法,将颜色分成色相(Hue)、饱和度(Sauration)、明度(Brightness)三个维度,通过对这 三个维度的数值定义,来获得我们想要的色彩

RGB 是电子屏幕上显示色彩的模式,因为电子屏幕上的颜色就是像素点上的颜色,每个像素点的颜色由背后的三个发光晶体管控制,分别是红(Red)、绿(Green)、蓝(Blue),即三基色。

CMYK 则是用于现实世界印刷、染色时使用的色彩模式,染料主要也由三个颜色组成,分别是青色(Cyan)、品红(Magenta)、黄色(Yellow),也叫三原色。而多出来的 K(Black)则是染料中的黑色了,黑色在染印中是个特殊的颜色,出于色彩特性和经济成本考虑独立出来,所以一般打印机中都会包含彩色墨盒和黑色墨盒两种。

UI 设计中不会涉及 CMYK,但会经常使用 HSB。因为 HSB 的模式下设置颜色直观、简单,并且必然会被软件自动解析成 RGB 显示出来,而 RGB 的模式下则很难设置,且 RGB 参数难以记忆。所以我们打开软件色彩面板的第一个操作,就是将色彩选择模式改成 HSB。

色彩的显示逻辑

不管什么色彩模式,只要在电子屏幕中显示,都一定要先被转换成 RGB 才能显示。但光知道这个是不够的,因为不同的电子屏幕,即使使用相同的 RGB 色值,表现出来的色彩也可能并不相同。

这种差别对 UI 的设计过程会造成非常重大的干扰和影响,比如在公司电脑上做完的设计放手机、客户、投影仪、甚至家里电脑上,就可能完全不一样。

造成 UI 设计师设计内容色彩差异的原因主要有两个:

  • 硬件规格
  • 配置文件

硬件规格是显示器本身电路板、显示面板、晶体管、工艺水平的总和。技术方案、成本不一样,就必然导致 Gamma、色域、亮度的差异,最终显示效果的差异,这问题网上屡见不鲜。

除了硬件外,在一个屏幕系统内,不同的软件展示相同的设计稿,都可能出现不同的颜色,而这一般都是由色彩配置文件引起的。

色彩配置文件(ICC,也叫色彩描述文件)是一个用来告诉系统应该如何显示色彩的规范。任何系统、显示器,都会加载这个规范来呈现色彩,相当于叠加一层 “滤镜”。它的本质作用是确保不同设备(包括印刷设备)、环境对相同色彩信息的呈现保持一致。

色彩配置文件并不只有一个,不同厂商、标准会根据相关需求制定出不同配置文件,在电脑相关设置中就可以找到。

一般软件显示内容跟随系统的色彩配置,但是对于我们用的专业软件,是可以独立选择。无论是 PS 还是 Figma、Sketch。如果出现色彩不一致的情况,就是色彩配置文件没有保持一致。

点赞
收藏
学会
10286048
下一篇: UI 设计中的原子理论
在界面设计中,对包含的元素进行分析就能发现,界面是由最基础的四个元素组成,分别是文字、几何、图标、图片。 但这些元素太底层,不利于对页面作用、内容的解释和构建,所以行业还需要搭建对层级更高的内容的解释。 国外的网页设计师 Brad Frost 受元素周期表的启发,原子结合可以形成分子,分子可以组成细...
笔记 (6)
只看自己
logo
上课困难户 记录于 2024-06-26
色彩规范,类似于达芬奇调色面板中的设置。
原文: 色彩配置文件(ICC,也叫色彩描述文件)是一个用来告诉系统应该如何显示色彩的规范。任何系统、显示器,都会加载这个规范来呈现色彩,相当于叠加一层 “滤镜”。它的本质作用是确保不同设备(包括印刷设备)、环境对相同色彩信息的呈现保持一致。
木可杨 记录于 2024-05-13
那是否有解决办法?应该如何去解决?
原文: 一般软件显示内容跟随系统的色彩配置,但是对于我们用的专业软件,是可以独立选择。无论是 PS 还是 Figma、Sketch。如果出现色彩不一致的情况,就是色彩配置文件没有保持一致。
Tutti 记录于 2024-02-06
色彩配置文件
原文: 一般软件显示内容跟随系统的色彩配置,但是对于我们用的专业软件,是可以独立选择。无论是 PS 还是 Figma、Sketch。如果出现色彩不一致的情况,就是色彩配置文件没有保持一致。
Tutti 记录于 2024-02-06
ICC
原文: 色彩配置文件(ICC,也叫色彩描述文件)是一个用来告诉系统应该如何显示色彩的规范。任何系统、显示器,都会加载这个规范来呈现色彩,相当于叠加一层 “滤镜”。它的本质作用是确保不同设备(包括印刷设备)、环境对相同色彩信息的呈现保持一致
Tutti 记录于 2024-02-06
颜色设置
原文: UI 设计中不会涉及 CMYK,但会经常使用 HSB。因为 HSB 的模式下设置颜色直观、简单,并且必然会被软件自动解析成 RGB 显示出来,而 RGB 的模式下则很难设置,且 RGB 参数难以记忆。所以我们打开软件色彩面板的第一个操作,就是将色彩选择模式改成 HSB。
Tutti 记录于 2024-02-06
颜色分类
原文: HSB 是描述自然界所有颜色的方法,将颜色分成色相(Hue)、饱和度(Sauration)、明度(Brightness)三个维度,通过对这 三个维度的数值定义,来获得我们想要的色彩。
© 2023 uxbaike.com All rights reserved
版权声明意见反馈联系我们
weixinlogo
mx-auto
TOP
mx-auto
笔记
mx-auto
点赞