第二章2.1-2.5 色彩在移动的界面中的应用（1）（课件）-高二《移动端UI设计》同步精品课件（电工版2022）

移动端UI设计 1 初识移动端界面设计 2 色彩在移动的界面中的应用 3 移动端界面设计要素 7 综合案例 6 界面的设计与制作 5 移动端界面图标与组件设计 目 录 4 移动端界面版式设计 2 色彩在移动界面中的应用 2 色彩在移动界面中的应用 针对界面设计，设计者往往需要遵循“总体协调、局部对比”的基本原则。而正是因为色彩所特有的情感属性，使产品本身脱颖而出，所以色彩成为了App界面中不可或缺的视觉因素，而良好的色彩组合是产品本身的利器。用户通过色彩来了解产品，同时色彩也影响着用户的情绪。合理选择色彩和协调划分色彩区域，更能突出重点，使用户第一时间合理使用产品。 通过普通配色，人们似乎很难看到模块的“意义”。用户在使用过程中，很难找到“切入点”，更谈不上色彩是否融入主题环境。在众多文本内容中，采用图和形突出重点，可以形成导向性的使用模式。在满足导向的同时，“导航”逐渐开始起到关键作用，而导航按钮与整体界面色调的基本统一，又使色彩具有了一定的象征意义。抛开软件本身的功能性，倘若颜色从产品的本身分离出来，将色彩与软件本身反向融合，将其创意概念用色彩充实或者暗示，而带给用户以全新的记忆点，更能增加用户习惯性的“依赖”使用，迎合用户心理使用需求。 2 色彩在移动界面中的应用 2.1终端显示色彩基本知识 色彩具备三个基本的重要性质：色相、明度、纯度，一般称为色彩三要素或色彩三属性。 1．色相（Hue） 又叫色调（Hue，简称H）是区分色彩的名称，也就是色彩的名字，就如同人的姓名一般，用来辨别不同的人。 2．明度（Value） 明度（Value简称V）光线强时，感觉比较亮，光线弱时感觉比较暗，色彩的明暗强度就是所谓的明度，明度高是指色彩较明亮，而相对的明度低，就是色彩较灰暗。 3．纯度（Chroma） 又叫彩度（Chroma，简称C）是指色彩的纯度，通常以某彩色的纯度所占的比例，来分辨彩度的高低，纯色比例高为彩度高，纯色比例低为彩度低，在色彩鲜艳状况下，通常很容易感觉高彩度，但有时不易作出正确的判断，因为容易受到明度得影响。譬如，人们最容易误会的是，黑白灰是属于无彩度的，他们只有明度。 移动终端屏幕的颜色属于色光混色。在屏幕内侧均匀分布着红色（RED）、绿色（GREEN）、蓝色（BLUE）的荧光粒子，这三种颜色也是色光三原色。（图2-1所示为RGB色彩模式）当接通电源时屏幕发光，并通过三原色的混合将所有的颜色呈现出来。也就是说显示器中的所有颜色都是通过红色（RED）、绿色（GREEN）、蓝色（BLUE）三原色混合而来的，将显示器的这种颜色显示方式统称为RGB色系或颜色空间。 同时，屏幕性能与显示终端的不同也会导致其所显示的颜色数量、颜色效果不尽相同。由此就诞生了网页安全色的概念。网页安全色是各种浏览器及设备可以无损失无偏差输出的色彩集合。在设计界面的时候应该尽量使用网页安全色，这样不会让用户看到的效果与设计构想差异太大，避免出现严重的偏色情况。 2 色彩在移动界面中的应用 图2-1 RGB色彩模式 2.2色彩的组成 1.基本色 一个色环通常包括12种明显不同的颜色。如图2-2所示，如果细分的话色相环还可以变为24色，如图2-3所示，或甚至更多的颜色。 2 色彩在移动界面中的应用 图2-2 12色色相环 图2-3 24色色相环 2.三原色 从定义上讲，三原色是能够按照一些数量规定合成其他任何一种颜色的基色。红、黄、蓝三原色也可以构成界面色彩，因为三原色纯度都比较高，所以视觉效果会很强烈。如图2-4所示，就是三原色组成的界面图形。 3.近似色 近似色是色相环中相类似的颜色，如：红色与橙红或紫红相配，黄色与草绿色或橙黄色相配等。如果从橙色开始，并且想要它的两种近似色，就应该选择红和黄。用近似色的颜色，主题可以实现色彩的融洽与融合，与自然界中能看到的色彩接近。如图2-5所示近似色组成的界面效果。 2 色彩在移动界面中的应用 4.补色 正如人们所知道的相对色一样，补色是色环中的直接位置相对的颜色，如图2-2中经过圆心的直线所连接的两种颜色。若要使色彩强烈突出，则选择对比色比较好。假如正在组合一幅柠檬图片，用蓝色背景将使柠檬更加突出。如图2-6所示补色组成的界面效果。 5.暖色 暖色由红色调组成。比如红色、橙色和黄色。它们给选择的颜色赋予温暖、舒适和活力，它们也产生了一种色彩向浏览者显示或移动，并从页面中突出出来的可视化效果。如图2-7所示暖色组成的界面效果。 6.冷色 冷色来自于蓝色色调。譬如蓝色、青色和绿色。这些颜色将对色彩主题起到冷静的作用，它们看起来有一种从浏览者身上收回来的效果，因此它们被用作页面的背景色比较