UI界面设计中的色彩设计说明PPT课件_第1页
UI界面设计中的色彩设计说明PPT课件_第2页
UI界面设计中的色彩设计说明PPT课件_第3页
UI界面设计中的色彩设计说明PPT课件_第4页
UI界面设计中的色彩设计说明PPT课件_第5页
已阅读5页,还剩26页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

1、.,1,UI界面设计中的色彩设计,.,2,目标,了解UI界面设计中色彩设计的基本知识,理解色彩的属性、冷暖、色环、色调及对人的心理影响,掌握UI界面设计中色彩的设计原则及配色策略。,重点、难点,理解色彩的基本知识;重点掌握UI界面设计中色彩的设计原则及配色策略。,.,3,1,2,3,UI界面设计中色彩设计的基本知识,目录,UI界面设计中色彩设计原则,UI界面设计中色彩配色策略,.,4,1,UI界面设计中色彩设计的基本知识,.,5,UI界面设计中色彩设计的基本知识,色相:指色彩的相貌,是区别色彩的必要名称,例如红、橙、黄、绿、蓝、紫等。明度:指色彩显示的明暗程度,即是色光的明暗度。不同的颜色,反

2、射的光量强弱不一,因而会产生不同程度的明暗。纯度:指色彩纯净、饱和的程度。具体来说,是表明一种颜色中是否含有白或黑的成份。,色彩的三属性,01,.,6,UI界面设计中色彩设计的基本知识,冷色和暖色是一种色彩感觉。冷色和暖色没有绝对的区分,色彩在比较中才存在了冷暖。通常我们把红黄色系看作暖色系,具有温暖、强烈、扩张的感受;蓝紫色系看作冷色系,具有寒冷、平静、收敛的感受;而绿色系则看作是中性色系。,色彩的冷与暖,02,.,7,UI界面设计中色彩设计的基本知识,色环其实就是将光谱中的色彩,按照一定的顺序依次排列起,首尾相连,首尾为红色和紫色,组成环形,构成了色环。,色环,03,.,8,UI界面设计中

3、色彩设计的基本知识,在色环中,红、黄、蓝为三原色,因为它们不能用其他颜色调配而成,故称为三原色。间色则是指光谱中的橙、绿、紫等,它们由两种原色调配而成,也叫二次色。类似色(同类色):在色环中距离在45度以内的一些色彩称为类似色。互补色(对比色):在色环上相互正对,成180度角的两个颜色称为互补色,也称对比色。互补色:红-绿黄-紫蓝-橙,色环,03,.,9,UI界面设计中色彩设计的基本知识,色调指的是一幅画中画面色彩的总体倾向,是大的色彩效果。色调是颜色的重要特征,它决定了颜色本质的根本特征。如在大自然中,经常见到这样一种现象:不同颜色的物体或被笼罩在一片金色的阳光之中,或被笼罩在一片轻纱薄雾似

4、的、淡蓝色的月色之中;或被秋天迷人的金黄色所笼罩;或被统一在冬季银白色的世界之中。这种在不同颜色的物体上,笼罩着某一种色彩,使不同颜色的物体都带有同一色彩倾向,这样的色彩现象就是色调。,色调,04,.,10,暖色调:红、黄、橙、赭石、咖啡、紫红等,具有热烈、明朗、兴奋、奔放等特点,给人温暖的感觉。冷色调:蓝、绿、紫等,具有安静、稳重、明快等特征,冷色调给整个空间带来清新、凉爽之感。,色调,04,UI界面设计中色彩设计的基本知识,.,11,UI界面设计中色彩设计的基本知识,.,12,UI界面设计色彩设计的基本知识,当色彩以不同的光强度与不同的波长作用于人的视觉时,便会产生一系列心理的反应,这些与

5、人以往经验相联系时,便会引起各种联想,使色彩具有情感、意志、情绪等各方面的象征意义。,色彩对人的心理作用,黄色,似阳光普照大地,感到明朗、活跃、兴奋。,黑色,联想到黑夜、从而感到神秘、悲哀、不祥、绝望。,05,.,13,2,UI界面设计中色彩设计原则,.,14,UI界面设计色彩设计原则,统一性原则,A,色彩会因界面的不同而产生不同的情感,因此,为了使界面整体达到和谐统一,色彩在界面设计中起到了重要的作用,只有色彩达到了和谐统一,界面才能与浏览者答到情感共鸣。,.,15,统一的整体色调,突出主题并且生动。,UI界面设计色彩设计原则,.,16,UI界面设计色彩设计原则,情感性原则,色彩作为一种视觉

6、元素,它是带有感情的,潜移默化的影响着我们的行为和情绪。充分利用色彩的温度感、距离感、重量感、尺度感等满足满足受众人群的心理感受。,B,.,17,UI界面设计色彩设计原则,距离感的界面设计,.,18,UI界面设计色彩设计原则,.,19,UI界面设计色彩设计原则,生动性原则,在色彩设计时,应避免过于单调,没有变化,缺乏氛围。在色彩面积、色相、纯度、明度、光色、肌理等方面应进行有秩序、有规律的变化,给人以丰富的变化感,让界面设计更加生动。,C,.,20,UI界面设计色彩设计原则,色彩全局统一,细节凸显,面积对比法则,用色彩划分视觉区域。,.,21,3,UI界面设计中色彩配色策略,.,22,UI界面

7、设计色彩配色策略,邻近色配色,近邻色配色方法比较常见,搭配比同色系稍微丰富,色相柔和过渡看起来也很和谐。,A,.,23,UI界面设计色彩配色策略,纯度高的色彩,基本用于组控件和文本标题颜色,各控件采用邻近色使页面不那么单调,再把色彩饱和度降低用于不同背景色和模块划分。,.,24,UI界面设计色彩配色策略,同色系配色,同色系配色是指主色和辅色都在统一色相上,这种配色方法往往会给人感到页面很一致化的感受。,B,.,25,UI界面设计色彩配色策略,整体蓝色设计带来统一印象,颜色的深浅分别承载不同类型的内容信息,比如信息内容模块,白色底代表用户内容,浅蓝色底代表回复内容,更深一点的蓝色底代表可回复操作

8、,颜色主导着信息层次。,.,26,UI界面设计色彩配色策略,类似色配色,类似色配色也是常用的配色方法,对比不强给人感到平静、调和的感觉。,C,.,27,UI界面设计色彩配色策略,红黄双色主导页面,色彩基本用于不同组控件表现,红色用于导航控件、按钮和图标,同时也作辅助元素的主色。利用偏橙的黄色代替品牌色,用于内容标签和背景搭配。,.,28,小结,本节带领大家重温色彩的基本知识,从色彩的本质、属性、色环、色调开始,了解色彩对人的生理和心理作用,熟记色彩在界面设计中的重要作用,学习界面设计中色彩设计的原则及配色策略。,作业,思考与练习1、简述色彩的三种属性及概念理解?2、界面设计中色彩设计的原则都有哪些?实训课堂准备五个网页界面设计

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论