UI设计中的色彩运用研究.docVIP

UI设计中的色彩运用研究 　　摘要：该文通过UI设计中色彩的功能、UI色彩设计方案、UI设计中对色彩三要素以及色彩心理学的运用几个方面对UI设计中色彩的运用进行了的分析与阐述。 　　关键词：UI设计；人机交互；色彩方案 　　中图分类号：TP311 文献标识码：A 文章编号：1009-3044（2016）31-0193-02 　　20世纪90年代，由日本SONY公司推出的智能化移动手持设备T86通?^色彩绚丽的屏幕，漂亮的图形按钮以及流畅的操作刷新了用户对人机交互界面的体验。并在行业内引发了设计者对UI设计中风格、图形、色彩、操作体验等等方面的全新思索。经过二十多年的 发展。UI设计已经成为一门专门性交叉学科，通过对视觉思维、心理学、人体工程学等不同学科的研究，设计者从各个方面不断的改善用户的操作体验。早期的软件界面曾经通过“拟物化”设计（skeuomorphism）试图通过模拟真实物体的质感来让人机交互更趋向于人与现实世界的交互方式而“去虚拟化”；而21世纪以来，随着UI设计中对视觉传达规律的运用，“扁平化”设计（flat）成为更为主流的设计趋势。扁平化设计更为现代主义，通过简洁、单纯的色块的组合与运用帮助用户更好地理解与使用产品本身。 　　本文主要探讨现代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设计中对色彩三要素的运用 　　色相、明度、饱和度是色彩的三要素，对这三个色彩