- APP UI 设计手册
- 孙芳编著
- 1270字
- 2025-03-01 08:41:59
2.1 UI与色彩
色彩是十分重要的科学性表达,是主观上一种行为反应,在客观上是一种刺激现象和心理表达。色彩最大整体性就是画面的表现,把握好整体色彩的倾向,再去调和色彩的变化,才能做到更有具体性。色彩是一种诉说人情感的表达方式,对人的心理和生理都会产生一定的影响。在设计中,可以利用人对色彩的感受来创造富有个性层次的画面,从而使设计更加突出。






2.1.1 色相、明度、纯度
色彩的属性是指色相、明度、纯度三种性质。
色相是指颜色的基本相貌,它是色彩的首要特征,是区别色彩最精确的准则。色相又是由原色、间色、复色所组成的。而色相的区别就是由不同的波长来决定,即使是同一种颜色也要分不同的色相,如红色可分为鲜红、大红、橘红等,蓝色可分为湖蓝、蔚蓝、钴蓝等,灰色又可分红灰、蓝灰、紫灰等。人眼可分辨出大约一百多种不同的颜色。


明度是指色彩的明暗程度,明度不仅表现为物体照明程度,还表现在反射程度的系数上。明度又可分为9个级别,最暗为1,最亮为9,并划分出3种基调:
◆ 1~3级为低明度的暗色调,给人沉着、厚重、忠实的感觉;
◆ 4~6级为中明度色调,给人安逸、柔和、高雅的感觉;
◆ 7~9级为高明度的亮色调,给人清新、明快、华美的感觉。


纯度既是色彩的饱和程度,也是色彩的纯净程度。纯度在色彩搭配上具有强调主题和意想不到的视觉效果。纯度较高的颜色虽可给人造成强烈的刺激感,能够使人留下深刻的印象,但也容易造成疲倦感,要是与一些低明度的颜色相配合则会显得细腻舒适。纯度也可分为3个阶段:
◆ 高纯度——8~10级为高纯度,产生强烈、鲜明、生动的感觉;
◆ 中纯度——4~7级为中纯度,产生适当、温和的平静感觉;
◆ 低纯度——1~3级为低纯度,产生一种细腻、雅致、朦胧的感觉。


2.1.2 主色、辅助色、点缀色
APP UI设计必须注重色彩的全局性,不要使色彩偏向于一个方向,否则会使空间失去平衡感。APP UI设计通常由主色、辅助色、点缀色组成。下面就对此一一进行介绍。
1.主色
主色能够定义一个APP主体基调,并发挥着主导作用;能够令整体空间看起来更为和谐,是空间中不可忽视的一部分。一般来说,设计中占据面积比例最大的颜色即为主色。


2.辅助色
辅助色可以补充或辅助手机界面主体色的色彩,在页面中它可以与主色是邻近色,也可以是互补色,不同的辅助色会改变空间蕴含的情感,给人带来不一样的视觉效果。


3.点缀色
点缀色是在界面中占有极小部分面积的色彩,具有多变性,又可突破整体造型效果,还能够烘托整个应用的风格,彰显出自身固有的魅力。点缀色可以理解为点睛之笔,是整个设计的亮点所在。




2.1.3 邻近色、对比色
邻近色与对比色在APP UI设计中运用比较广泛,设计过程中不仅要注重功能项,还可以用色彩来表现界面的丰富景象,与不同的元素相结合,能够完美地展现出界面的魅力所在。
1.邻近色
从美术的角度来说,邻近色在相邻的各个颜色当中能够看出彼此的存在,你中有我,我中有你;在色相环中,两种颜色之间相距90°,色相彼此相近,色彩冷暖性质相同,具有一致的情感色彩。

2.对比色
对比色是人的视觉感官所产生的一种生理现象,是视网膜对色彩的平衡作用。两种颜色在色相环中相距120°或180°。




