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设计中的色彩知识

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

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

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

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

转载请注明出处我优求知网 » UI设计中的色彩运用

学习

梦幻西游手游平民打书技巧

阅读(27)

本文为您介绍梦幻西游手游平民打书技巧,内容包括梦幻西游手游平民打书,梦幻西游手游平民怎么打书,梦幻西游手游平民5开攻略。《梦幻西游》手游是由网易游戏基于原端游《梦幻西游2》开发的一款回合制角色扮演手机游戏,延续了端游的游戏背

学习

如何激发学生的数学学习兴趣

阅读(29)

本文为您介绍如何激发学生的数学学习兴趣,内容包括如何激发学生学习数学兴趣,如何激发学生学习数学的学习兴趣,数学教学如何激发孩子学习兴趣。日常生活中离不开数学。应让学生知道自己将来总该走向社会,成为一名社会劳动者。下面是整理

学习

浓情端午传承文化演讲稿精选

阅读(27)

本文为您介绍浓情端午传承文化演讲稿精选,内容包括端午节文化传承演讲稿,回味端午传承民俗演讲稿,关于端午的演讲稿800。古人历来崇尚中、正之道,“中正“之道在此表现得淋漓尽致。另,端亦有“初”的意思,因此午(五)月的第一个午日,亦谓端午。

学习

中秋节对朋友祝福语精选180条

阅读(27)

本文为您介绍中秋节对朋友祝福语精选180条,内容包括中秋节对朋友祝福语句,中秋节对朋友祝福语感动,中秋节对朋友祝福语大全。中秋是一个万家团聚的日子,特别的“爱”给特别的“您”,有哪些好玩有趣有意义的中秋节祝福呢?下面是为大家整理的

学习

比较浓情的中秋节祝福语

阅读(28)

本文为您介绍比较浓情的中秋节祝福语,内容包括不一般的中秋节祝福语,中秋节祝福语比较短,最有韵味的中秋节祝福语。在学习、工作乃至生活中,大家一定都接触过祝福语吧,祝福语是指对人们的美好祝福的语句。那么,怎么去写祝福语呢?以下是帮大

学习

七夕节蛋糕店文案

阅读(20)

本文为您介绍七夕节蛋糕店文案,内容包括鲜花蛋糕店七夕节文案,七夕蛋糕文案简短100句,蛋糕店七夕文案简短。随着社交网络的兴起和普及,越来越多人会在社交平台上发布文案,文案用于分享自己的奇闻趣事和生活日常。你知道什么样的文案才能算

学习

我喜欢的卡通人物作文精选

阅读(23)

本文为您介绍我喜欢的卡通人物作文精选,内容包括我和卡通人物的一天作文,我最喜欢的卡通人物作文范文,我最喜欢的卡通人物话题作文。在现实生活或工作学习中,大家都跟作文打过交道吧,根据写作命题的特点,作文可以分为命题作文和非命题作文

学习

如何激发学生的数学兴趣

阅读(25)

本文为您介绍如何激发学生的数学兴趣,内容包括如何才能激发学生学习数学的兴趣,如何激发学生的数学兴趣论文,如何激发孩子学习数学的兴趣。心理学认为兴趣是探究某种事物或进行某种活动的倾向。兴趣是求知的起点,是思维培养和能力的提高

学习

浓情端午节主题班会教案精选

阅读(26)

我送你一座后花园,园子里栽的是智慧树,流的是忘忧泉,开的是自在花,搭的是幸运桥,祝愿好运好心情,端午节安康。下面为大家整理的浓情端午节主题班会教案(精选9篇),仅供参考,大家一起来看看吧。

学习

弘扬端午文化传我浓情粽香演讲稿精选

阅读(36)

本文为您介绍弘扬端午文化传我浓情粽香演讲稿精选,内容包括浓情端午演讲稿,粽香情浓话端午演讲稿,浓情端午传承文化演讲稿。提起端午,人们不由想起令人垂涎欲滴的粽子,想起趣味横生的龙舟。下面是帮大家整理的弘扬端午文化传我浓情粽香演

学习

绚丽多彩的秋天写景作文600字精选

阅读(28)

本文为您介绍绚丽多彩的秋天写景作文600字精选,内容包括秋天写景作文600字10篇,关于秋天写景作文600字锦集6篇,实用的秋天写景作文600字汇编10篇。大家都写过作文,肯定对各类作文都很熟悉吧,尤其是在作文中有重要意义的写景作文,写景作文是

学习

精选五年级童年作文通用

阅读(25)

本文为您介绍精选五年级童年作文通用,内容包括五年级的童年作文集锦5篇,实用的五年级童年作文3篇,五年级童年400字作文全篇。在日复一日的学习、工作或生活中,大家对作文都再熟悉不过了吧,借助作文可以提高我们的语言组织能力。如何写一篇

学习

最新情人节走心文案精选

阅读(27)

本文为您介绍最新情人节走心文案精选,内容包括情人节简短走心句子高端文案,情人节走心的文案,情人节文案简短撩人走心。最新情人节走心文案(精选250句)

学习

2022重阳节小朋友对老人的祝福语精选

阅读(29)

本文为您介绍2022重阳节小朋友对老人的祝福语精选,内容包括重阳节小孩对老人祝福语简单,重阳节小孩对老人的祝福语大全,小朋友重阳节对老人的祝福语。一、重阳节送什么给老人好呢?

学习

秋天的色彩作文通用

阅读(22)

本文为您介绍秋天的色彩作文通用,内容包括秋天的色彩优秀作文通用,秋天的色彩作文大全,秋天的色彩作文450个字左右。在平平淡淡的日常中,大家对作文都不陌生吧,作文是人们以书面形式表情达意的言语活动。那么你有了解过作文吗?以下是为大家

学习

青春的色彩记叙作文700字精选

阅读(27)

本文为您介绍青春的色彩记叙作文700字精选,内容包括我的青春色彩700字记叙文,青春的色彩初三作文共12篇,青春的色彩1200字作文记叙文。在学习、工作、生活中,大家对作文都不陌生吧,写作文是培养人们的观察力、联想力、想象力、思考力和记

学习

青春的色彩作文

阅读(29)

本文为您介绍青春的色彩作文,内容包括青春的色彩优秀作文600字,作文青春的色彩范文,青春的色彩作文合集。在平时的学习、工作或生活中,大家都经常接触到作文吧,通过作文可以把我们那些零零散散的思想,聚集在一块。相信许多人会觉得作文很难

学习

九色鹿教学设计精选

阅读(25)

本文为您介绍九色鹿教学设计精选,内容包括九色鹿教学设计和设计意图,九色鹿教学设计与反思,九色鹿教学设计第二课时。什么是教学设计?教学设计是根据课程标准的要求和教学对象的特点,将教学诸要素有序安排,确定合适的教学方案的设想和计划

学习

《灯笼》教学设计

阅读(26)

本文为您介绍《灯笼》教学设计,内容包括灯笼教学设计一等奖,灯笼教学设计表格式,灯笼教学设计思路及反思。作为一名老师,时常需要用到教学设计,教学设计把教学各要素看成一个系统,分析教学问题和需求,确立解决的程序纲要,使教学效果最优化。

学习

色彩斑斓的窗户美术教案范文通用

阅读(28)

本文为您介绍色彩斑斓的窗户美术教案范文通用,内容包括五彩斑斓的窗户三年级美术,多彩的窗户美术优质教案,美术多彩的窗户教案。作为一位无私奉献的人民教师,时常会需要准备好教案,教案有助于学生理解并掌握系统的知识。那要怎么写好教案

学习

普罗米修斯教学设计一等奖优秀通用

阅读(25)

本文为您介绍普罗米修斯教学设计一等奖优秀通用,内容包括普罗米修斯教学设计,普罗米修斯第二课时优秀教学设计,普罗米修斯优质课一等奖教案。作为一名教师,常常要写一份优秀的教学设计,教学设计是一个系统化规划教学系统的过程。我们应该

学习

《大卫科波菲尔节选》教学设计

阅读(25)

本文为您介绍《大卫科波菲尔节选》教学设计,内容包括大卫科波菲尔节选教学,大卫科波菲尔节选课文赏析,大卫科波菲尔节选高中语文。一、方案的写作结构