多语言展示
当前在线:643今日阅读:39今日分享:10

UI设计中的色彩运用研究

UI设计中色彩的功能  色彩作为视觉传达中非常重要的要素在UI设计中具有非常重要的作用,可以归纳为以下几个方面。
方法/步骤
1

1)显示界面的整体架构  一个UI界面总是借助图形化的外观直接作用于客户的视觉系统。用户接触一个UI界面,看到的往往是一个由底色、其他几何色块、图标、按钮等元素构成的图形符号系统。用色彩可以非常直观的凸显出背景、导航栏、状态栏,按钮等构成元素,并显示出UI界面的逻辑架构。  2)明确视觉层级关系  UI设计中不同的内容属于不同的层级关系,如菜单于菜单间的同级关系、内容间的从属关系等等。用同色系色彩、不同色相色彩间的差距可以非常直观地区分内容的层级关系,还可以通过色彩间的强对比突出关键内容。  3)营造界面整体风格  UI界面虽然是个复杂的视觉图形系统,但通过主色调、辅助色、装饰色之间的对比调和关系会呈现出明显的风格倾向。用不同的色系或者同色系色彩之间的对比与调和关系,可以塑造出不同的界面风格。如适合男生的金属质感的黑色、灰色、蓝色系,女生喜欢的梦幻甜美色系、糖果色系。界面风格定位于品质已经成为用户体验中最重要的部分之一。

2

2 UI色彩设计方案  在进行UI设计时,要通过对产品及用户体验的分析确定明确的色彩搭配反感,形成“标准色彩规范”,在这个基础上再进行具体界面、线框、图标等细节设计。标准色彩规范中要规定出最主要主色、辅助色、装饰色的色号,方便设计师的设计稿的色彩统一。  1)主色调  主色用量基本占据全部用色的75%,基本决定了整个界面的视觉风格。主色选择要符合产品本身的气质、诉求和色彩心理学规律,可在主色的基础上通过明度与纯度的变化衍生出同色系色调作为主色调范围。  根据色彩在视觉中的能量值,一般主色倾向于选择饱和度高、明度低的色彩,往往会在在同一界面中占据较大的面积或明显的凸现于背景。

3

2)辅助色  辅助色起到辅助主色的作用,在全部用色中约占据20%。用与主色同色系色彩作为辅助色可以呈现柔和、整体、统一的视觉效果;而用主色邻近色作为辅助色可以让界面有丰富的变化,产生活泼感;用主色调对比色作为辅助色可以让主色更为突出。  3)装饰色  占全部色彩方案的5%的装饰色起到点缀、提醒的作用。并界面增加个性化、富于趣味的视觉元素。装饰色要与界面整体色调相区别,一般在明度、饱和度上要有明显差异,一般会用明度或饱和度高的颜色。

推荐信息