界面的色彩设计在线视频

同学们

今天我们来学习第三节

界面的色彩设计

我们学习了上一个内容后

了解到关于界面设计风格上的一些知识

接下来

我们要对界面设计中的色彩设计

进行进一步的学习

在第三节分为三个部分进行讲解

第一部分是色彩的基本理论

第二部分是色彩搭配原则

第三部分是常见色彩搭配

然后我们来讲一下第三节的第一部分

色彩的基本理论

在讲基本理论之前

首先我们可以大致地了解一下

色彩在界面设计中

起到了一个什么样的作用

在众多的界面设计元素中

色彩是视觉元素的重要组成部分

它给人造成的视觉冲击也最为直接 迅速

在设计界面的时候

通过使用准确而且科学的色彩

给用户良好的视觉感受

使得界面更加具有感染力

同时也能更加准确 清晰地表达出

设计者的设计意图

例如下面两个界面

第一个是关于运动健身的软件

第二个是关于女生的软件

这两款软件第一眼看上去

其最明显的色彩差异

就说明了他们是针对不同的方向

进行的界面的色彩设计的

因此

色彩在界面设计中起到了至关重要的作用

可以根据色彩

来确定整个软件的方向

以及目标用户

接下来我们就来具体了解一下

色彩设计在界面设计中的作用

大体来说其作用分为三点

第一 显示界面的整体框架

第二 明确视觉层级关系

第三 营造界面整体风格

下面我们对这三点进行具体的分析

并举例说明

首先是第一点

显示界面的整体构架

一个UI界面

通常会借助图像化的外观

直接的呈现在用户的眼前

同时用户接触到一个UI界面时往往看到的是由底色

其他几何色块 图标 按钮

等元素构成的图形符号系统

而且用色彩可以非常直观的突显出背景

导航栏 状态栏 按钮等构成元素

并显示出UI界面的逻辑架构

例如第一张图

这个界面设计运用了许多色块

设计者将需要表达的众多内容

通过色彩分割展示出来

同时导航栏 状态栏 按钮等构成元素

也是通过这种方法来进行展示

整个界面通过色彩分割

将整体的构架清晰地展现出来

方便用户的使用

第二张图是我们比较熟悉的界面下方的

静音 取消 免提三个功能

也是通过不同功能的不同颜色来进行区分

并且有序的进行排列

通过这些形成了一个整体的构架

接下来第二点

明确视觉层级关系

UI设计中不同的内容属于不同的层级关系

例如菜单和菜单间的同级关系

内容之间的从属关系等等

通过使用同色系色彩 不同色相色彩间的差距

可以非常直观地区分内容的层级关系

还可以通过色彩间的强对比突出关键内容

例如图中的界面

通过使用色彩的对比

将需要展现的内容

按照不同的重要程度进行排列

这样就在视觉上使得层级关系更加明确

下面要讲的是第三点

营造界面整体风格

UI界面虽然是个复杂的视觉图形系统

但通过主色调 辅助色

装饰色之间的对比调和关系

会呈现出明显的风格倾向

而且使用不同的色系

或者同色系色彩之间的对比与调和关系

可以塑造出不同的界面风格

例如上面两个界面

适合男生的金属质感的黑色 灰色和蓝色系

女生喜欢的梦幻甜美色系 糖果色系

现在

界面风格定位于品质

已经成为用户体验中最重要的部分之一

接下来我们要讲的是色彩基本理论的第二点

界面色彩的元素构成分析

这点主要分成三个部分

第一 背景色彩

第二 文本色彩

第三 图像图形色彩

下面我们来对这三个部分逐个进行分析

首先我们要讲的是第一部分背景色彩

首先来讲一下背景色彩

背景色在界面中所占的比重较大

是形成色调的重要因素

同时背景色也是影响

诱导用户的情绪的重要因素

第二个要讲的是文本色

在界面中

文本主要对界面上的内容进行介绍 说明 概括等

因此其色彩具有显练性 表意性

显练性就是说文本的色彩应该较为单一

尽量避免多色彩综合使用

表意性是说

色彩作为语言

其本身具有表情 表象和联想的功能

因此呢

不同的颜色表达不同的情感和气氛

而且应该注意的是文字的色彩

要与背景形成对比

这样文字就会更加突出

图中的界面文本颜色为灰色

与背景色白色形成了一定的对比

文字较为突出

而且白色和灰色的对比度又不是很大

不会太过于抢眼

第三个要讲的是图形图像色彩

图形图像相对于色彩和文本来说

它能大量的传递出各种信息

但是在使用图像时

应该注意其构图

要做到新颖简洁

主题突出

具有艺术感染力

一般主体内容在画面上所占的面积

位置 色度 亮度等

应引人注目

画面整体要均衡 稳定

达到形式与内容的协调一致

色彩应清新 明快 搭配合理

图中界面上的图像位于整个界面靠上的地方

面积适中

在色彩方面对比较强

属于比较引人注目的

接下来要讲第七节的第二部分

色彩搭配的原则

在这里需要讲的有三点

第一是色彩的和谐对比原则

第二是色彩的平衡美感原则

第三是色彩元素的节奏

首先我们来讲一下色彩的和谐对比原则

和谐就是协调 调和 融合的意思

是强调对比与调和 变化与统一的规律

在某种程度上说色彩美

就是一种既包含色彩的差异与对比

又在整体上协调一致的美

这种和谐来源于同类色和邻近色

在这两幅图中

图一的界面虽然有很多不同的色块组成

但是各个色块之间相互调和

有一定的对比在里面

但是又不会显得很不和谐

接下来我们来看一个反例

在图二中我们可以看出

设计者是想要突出界面中的三幅图片及其解释

但是红色和绿色是互补色

两个互补色放在一起会使人产生强烈的排斥感

给视觉产生疲劳

因此这样的界面没有做到相互调和

第二是色彩的平衡美感

在这里有两点

首先

在配色时

我们难免会遇到两个临近的颜色过于相近

这个时候我们可以用另外一种颜色来进行间隔

使两者之间更加清晰

其次

相邻两色对比过于强烈时

同样可以用第三种色彩

来使原来的效果更加和谐

这种方法叫做间隔

又叫分隔

它是平衡色彩的又一重要手段

在图中界面虽然出现了大量的白色背景

但是消息的分层还是很清晰

没有混乱的感觉

因为在两个消息之间设计者采用灰色线条

将每条信息进行分割

这样整个界面就会显得更加和谐 整体

第三是色彩元素的节奏

色彩元素的节奏又有三种类型

第一张图是渐变的节奏

这是一种色相

纯度

明度和一定的色形状

色面积等像光谱或色阶依次排列

或由大到小

或由强到弱等逐渐过渡的节奏

显得色彩丰富而富有变化

第二张图是反复的节奏

这里的反复主要有加强印象的意味

使用同一色相 明度 纯度

或同一色形状

色面积

色肌理等

色要素连续反复所获得的节奏

其反复的要点可以是一个要素

也可以是几个要素组成的小单位

这一节奏效应是最为普遍和最易被察觉的

第三张图是多元性节奏

在配色时从色彩的冷暖 明暗 鲜浊 形状等入手

将色彩进行高低 起伏 重叠

转折 强弱 方向等的变化

在视觉上即可获得一种强而动的节奏

是一种比较自由的节奏形式

这种节奏最大的特点就是

运动感强 有生气 充满个性

在配色中

不同颜色的性格加上不同线形的意义

往往可感受到一种带有方向性的节奏

接下来我们进入到第二部分

常见的色彩搭配

在这里常见的色彩搭配有

简洁朴素类型

活泼愉快类型

神秘感类型

现代感类型这四种

下面我们先来讲一下简洁朴素类型

这样的色彩风格首先要以整洁的环境为基础

所以营造这种氛围时应避免使用过多的颜色

在保持相同的色相或色调的前提下进行配色

通常都能够得到较好的整洁典雅的效果

每一类APP都有不同的风格

图上面分别可以看到两张运动类APP界面

和两张音乐类APP

他们的界面设计

都是采用简洁类型的设计

配色较为简单

没有使用过多的颜色

下面我们先来讲一下活泼愉快类型

这种类型需要营造活泼愉快的氛围时

应该使用高对比度 高亮度的颜色

而那些低对比度的生硬沉重颜色要尽量避免使用

在这里我们看几个例子

相机类APP和游戏类APP

这两类APP都属于娱乐类APP

在色彩方面

设计者通常采用纯度较高的 鲜亮的颜色

来营造出愉快的氛围

第三个是神秘感类型

有很多人认为金属光泽和较冷的 人工化的颜色

可以表现出未来的神秘感觉

第一个图是一个关于闹钟的APP界面设计

第二个图是关于天气的APP界面设计

这两个APP界面不论是从配色还是图形上来看

他都不同于我们常见的闹钟类APP界面

其用色给用户带来一种不可知的神秘感

第四是现代感类型

通常人们将大都市中使用最多的

单纯而又老练感觉的颜色

称为现代的颜色

上面两个界面都是新闻类的APP界面

通过使用传统的红色

同时和其他色彩结合

来使整个界面显得更加成熟

并且具有现代感