UI设计中的色彩运用

UI设计中的色彩运用

　　色彩的美是一种形式美，色彩的情感表达不仅仅只限于某一种色彩的特定内涵及社会属性上，也大量体现于色彩之间的关系。也就是说以色彩关系为基础表现出来的整体感觉就是色彩的美感。下面小编为您带来UI设计中的色彩运用！

　　UI设计中的色彩运用

　　1 UI设计中色彩的功能

　　色彩作为视觉传达中非常重要的要素在UI设计中具有非常重要的作用，可以归纳为以下几个方面。

　　1）显示界面的整体架构

　　一个UI界面总是借助图形化的外观直接作用于客户的视觉系统。用户接触一个UI界面，看到的往往是一个由底色、其他几何色块、图标、按钮等元素构成的图形符号系统。用色彩可以非常直观的凸显出背景、导航栏、状态栏，按钮等构成元素，并显示出UI界面的逻辑架构。

　　2）明确视觉层级关系

　　UI设计中不同的内容属于不同的层级关系，如菜单于菜单间的同级关系、内容间的从属关系等等。用同色系色彩、不同色相色彩间的差距可以非常直观地区分内容的层级关系，还可以通过色彩间的强对比突出关键内容。

　　3）营造界面整体风格

　　UI界面虽然是个复杂的视觉图形系统，但通过主色调、辅助色、装饰色之间的对比调和关系会呈现出明显的风格倾向。用不同的色系或者同色系色彩之间的对比与调和关系，可以塑造出不同的界面风格。如适合男生的金属质感的黑色、灰色、蓝色系，女生喜欢的梦幻甜美色系、糖果色系。界面风格定位于品质已经成为用户体验中最重要的部分之一。

　　4）基于人体工程学的色彩运用。

　　由于色温会影响到光源显示的颜色，大于 6500K 就会偏冷（白蓝），小于 6500K 就会偏暖（黄红）。而蓝光大量存在于电脑显示器、荧光灯、手机、数码产品、显示屏、LED等光线中，由于蓝光是一种高能量的短波光线，因而会较为严重的伤害视力。基于人体工程学保护视力考虑，苹果手机Iphone7和iphone7plus手机背光显示设计了Night Shift 的屏幕去蓝光保护功能，开启后会在晚间自动将屏幕显示调成暖黄色调，减少视觉疲劳。

　　此外，UI界面中，考虑到电子设备的显示特点。背景色要与图标色彩之间至少有5.38以上的对比差，才能够易于区分。而在此差值范围内的配色则会因为过于接近而在显示环境中对辨认造成困扰。

　　还有一些特殊人群，如红绿色盲人群，由于特殊视觉需求而需要进行特别的配色设计。

　　2 UI色彩设计方案

　　在进行UI设计时，要通过对产品及用户体验的分析确定明确的色彩搭配反感，形成“标准色彩规范”，在这个基础上再进行具体界面、线框、图标等细节设计。标准色彩规范中要规定出最主要主色、辅助色、装饰色的色号，方便设计师的设计稿的色彩统一。

　　1）主色调

　　主色用量基本占据全部用色的75%，基本决定了整个界面的视觉风格。主色选择要符合产品本身的气质、诉求和色彩心理学规律，可在主色的基础上通过明度与纯度的变化衍生出同色系色调作为主色调范围。

　　根据色彩在视觉中的能量值，一般主色倾向于选择饱和度高、明度低的色彩，往往会在在同一界面中占据较大的面积或明显的凸现于背景。

　　2）辅助色

　　辅助色起到辅助主色的作用，在全部用色中约占据20%。用与主色同色系色彩作为辅助色可以呈现柔和、整体、统一的视觉效果；而用主色邻近色作为辅助色可以让界面有丰富的变化，产生活泼感；用主色调对比色作为辅助色可以让主色更为突出。

　　3）装饰色

　　占全部色彩方案的5%的装饰色起到点缀、提醒的作用。并界面增加个性化、富于趣味的视觉元素。装饰色要与界面整体色调相区别，一般在明度、饱和度上要有明显差异，一般会用明度或饱和度高的颜色。

　　3 UI设计中对色彩三要素的运用

　　色相、明度、饱和度是色彩的三要素，对这三个色彩要素的理解和运用体现在UI设计中整个色彩方案中。

　　色相是色彩的首要特征，是不同色彩相区分的重要因素。色相也是色彩搭配中进行色彩对比的主要因素。对主色色相的选择往往决定了一个UI界面的整体风格与气质，或奔放活泼，或冷静深沉，或淡雅清新，或浓郁艳丽。其他辅助色则起到对比或调和的作用。因而一个UI界面的主色选择要符合产品本身的特质。以手机APP为例，淘宝、百度外卖、大众点评等许多电商类APP常常用容易让人兴奋、热烈的红色、橙色作为主色调；而主打探索与求知的“知乎”APP则使用理性、冷静的蓝色作为主色。

　　色彩的明度是色彩的明亮程度，是对色彩进行调和的主要因素。同色相色彩的明度变化可以在同色系中呈现一种调和统一的变化关系，协调而具有层次感。常常用于配合主色进行图标、菜单、导航等设计。明度变和也会带来色彩性格上的差异，明度升高会让色彩变得明亮、呈现清凉感；而明度降低则会让色彩变得暗淡，呈现温暖感。

　　饱和度是指色彩的鲜艳程度，也是色彩进行调和的主要因素。饱和度的改变同样会让色彩呈现从浓烈活泼到安静深沉等不同的“色彩性格”。此外饱和度的改变还会让色彩呈现不同的质感，如金属的不透明、坚硬、光泽感；糖果色的清新甜美感等等。

　　4 UI设计中的色彩心理学运用

　　色彩具有非常强的联想性。不同的色彩会在味觉、空间、冷暖、情绪等不同方面引发人们不同的综合感受。UI界面在主色调的选择中往往会利用人们对于色彩的联想习惯突出产品的定位。仍以ios系统手机APP为例；以介绍美食菜谱的“香哈”APP，主色采用最容易诱发食欲的红、橙色系；而具有丰富中国民俗传统的万年历APP则采用了充满中国传统文化涵义的中国红作为主色并配合这一气质采用篆书字体作为文字标识。

　　综上所述，由于色彩的重要性，对色彩的理解和驾驭对整个UI界面的设计产生着巨大的影响。

　　UI设计中的色彩知识

　　色彩的美是一种形式美，色彩的情感表达不仅仅只限于某一种色彩的特定内涵及社会属性上，也大量体现于色彩之间的关系。也就是说以色彩关系为基础表现出来的整体感觉就是色彩的美感。

　　色彩平面设计即将不同的基本图形，按照一定的规则在平面上组合成图案的图形。主要在二度空间范围之内以轮廓线划分图和地之间的界限，描绘形象。现如今我们看到不管是现在的户外广告、杂志广告、还是我们比较常见的广告海报等，都是由这些要素通过巧妙的安排、配置、组合而成的。

　　色彩拥有深浅浓淡不同的色阶和色相。这些色阶和色相互相调和与对比，就可以形成各种不同的色彩情感，使人们享受到色彩所带来的美感享受。所以色彩搭配的和谐，决定着色彩的美感。那么色彩的和谐表现最主要是通过对比与调和产生的。对比与调和是一对相互依存的对立统一体，凡是对这种“对立统一”的破坏都不会产生画面色彩的和谐。

　　在艺术作品中，丰富的素材和色彩、表现手法的多样化可丰富作品的艺术形象，但这些变化必须达到高度统一，使其产生一个和谐的视觉形象，这样才能构成一种有机整体的形式。对比与调和是任何设计作品中都具有的组成部分，它们的区别是艺术的对比与变化，而它们两者之间的联系，又有机地组合一个整体，这就是所谓的艺术统一与色彩和谐的表现。在平面设计中巧妙运用色彩的对比与调和，使其产生和谐的画面，这将会使作品更具表现力和生命力、这样才能创造成功的作品。