UI界面设计中的色彩设计说明教案资料
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
3 UI界面设计中色彩配色策略
1 UI界面设计中色彩设计的基本知识
UI界面设计中色彩设计的基本知识
01 色彩的三属性
色相：指色彩的相貌，是区别色彩的必要名称，例如红、橙、黄、绿、 蓝、紫等。
明度：指色彩显示的明暗程度，即是色光的明暗度。不同的颜色，反 射的光量强弱不一，因而会产生不同程度的明暗。
谢谢
知识回顾 Knowledge Review
放映结束 感谢各位的批评指导！
谢 谢！
让我们共同进步
本节带领大家重温色彩的基本知识，从色彩的本质、属性、色环、 色调开始，了解色彩对人的生理和心理作用，熟记色彩在界面设计中 的重要作用，学习界面设计中色彩设计的原则及配色策略。
• 作业
思考与练习 1、简述色彩的三种属性及概念理解？ 2、界面设计中色彩设计的原则都有哪些？ 实训课堂
准备五个网页界面设计素材，分析其中色彩搭配的技巧， 指出界面设计在色彩设计方面运用的合理性，结合所学理 解并掌握优秀的网页界面设计中的色彩的运用。
UI界面设计中色彩设计的基本知识
04 色调
色调指的是一幅画中画面色彩的总体倾向，是大的色彩效果。 色调是颜色的重要特征，它决定了颜色本质的根本特征。如在大自 然中，经常见到这样一种现象：不同颜色的物体或被笼罩在一片金 色的阳光之中，或被笼罩在一片轻纱薄雾似的、淡蓝色的月色之中； 或被秋天迷人的金黄色所笼罩；或被统一在冬季银白色的世界之中。 这种在不同颜色的物体上，笼罩着某一种色彩，使不同颜色的物体 都带有同一色彩倾向，这样的色彩现象就是色调。
• UI界面设计色彩配色策略
C 类似色配色
类似色配色也是常用的配色方法，对比不强给人感到平静、 调和的感觉。
• UI界面设计色彩配色策略
红黄双色主导页面，色彩基本用于不同组控件表现，红色用于导航控件、按钮和图标， 同时也作辅助元素的主色。利用偏橙的黄色代替品牌色，用于内容标签和背景搭配。
• 小结
UI界面设计中色彩设计的基本知识
03 色环
色环其实就是将光谱中的色彩，按照一定的顺序依次排列起，首尾 相连，首尾为红色和紫色，组成环形，构成了色环。
UI界面设计中色彩设计的基本知识
03 色环
在色环中，红、黄、蓝为三原色，因为它们不能用其他颜色调配而 成，故称为三原色。间色则是指光谱中的橙、绿、紫等，它们由两种 原色调配而成，也叫二次色。 类似色（同类色）：在色环中距离在45度以内的一些色彩称为类似色。 互补色（对比色）：在色环上相互正对，成180度角的两个颜色称为 互补色，也称对比色。 互补色：红----绿 黄----紫 蓝----橙
• UI界面设计色彩配色策略
B 同色系配色
同色系配色是指主色和辅色都在统一色相上，这种配色 方法往往会给人感到页面很一致化的感受。
• UI界面设计色彩配色策略
整体蓝色设计带来统一印象，颜色的深浅分别承载不同类型的内容信息，比如信息 内容模块，白色底代表用户内容，浅蓝色底代表回复内容，更深一点的蓝色底代表可 回复操作，颜色主导着信息层次。
色彩作为一种视觉元素，它是带有感情的，潜移默化的影响 着我们的行为和情绪 。充分利用色彩的温度感、距离感、重 量感、尺度感等满足满足受众人群的心理感受。
• UI界面设计色彩设计原则
距离感的界面设计
• UI界面设计色彩设计原则
• UI界面设计色彩设计原则
C 生动性原则
在色彩设计时，应避免过于单调，没有变化，缺乏氛围。在 色彩面积、色相、纯度、明度、光色、肌理等方面应进行有 秩序、有规律的变化，给人以丰富的变化感，让界面设计更 加生动。
UI界面设计中色彩设计的基本知识
04 色调
暖色调：红、黄、橙、赭石、咖啡、紫红等，具有热烈、明朗、兴 奋、奔放等特点，给人温暖的感觉。 冷色调：蓝、绿、紫等，具有安静、稳重、明快等特征，冷色调给 整个空间带来清新、凉爽之感。
• UI界面设计中色彩设计的基本知识
• UI界面设计色彩设计的基本知识
• UI界面设计色彩设计原则
色彩全局统一，细节凸显，面积对比法则，用色彩划分视觉区域。
3 UI界面设计中色彩配色策略
• UI界面设计色彩配色策略
A 邻近色配色
近邻色配色方法比较常见，搭配比同色系稍微丰富，色相柔 和过渡看起来也很和谐。
• UI界面设计色彩配色策略
纯度高的色彩，基本用于组控件和文本标题颜色，各控件采用邻 近色使页面不那么单调，再把色彩饱和度降低用于不同背景色和模 块划分。
UI界面设计色彩设计原则
A 统一性原则
色彩会因界面的不同而产生不同的情感，因此，为了使 界面整体达到和谐统一，色彩在界面设计中起到了重要的 Байду номын сангаас用，只有色彩达到了和谐统一，界面才能与浏览者答到 情感共鸣。
UI界面设计色彩设计原则
统一的整体色调，突出主题并且生动。
• UI界面设计色彩设计原则
B 情感性原则
纯度：指色彩纯净、饱和的程度。具体来说，是表明一种颜色中是否 含有白或黑的成份。
UI界面设计中色彩设计的基本知识
02 色彩的冷与暖
冷色和暖色是一种色彩感觉。冷色和暖色没有绝对的区分，色彩在 比较中才存在了冷暖。通常我们把红黄色系看作暖色系，具有温暖、强 烈、扩张的感受；蓝紫色系看作冷色系，具有寒冷、平静、收敛的感受； 而绿色系则看作是中性色系。
05 色彩对人的心理作用
当色彩以不同的光强度与不同的波长作用于人的视觉时，便会产生一系 列心理的反应，这些与人以往经验相联系时，便会引起各种联想，使色 彩具有情感、意志、情绪等各方面的象征意义。
黄色，似阳光普照大地，感到明朗、活跃、兴奋。 黑色，联想到黑夜、从而感到神秘、悲哀、不祥、绝望。
2 UI界面设计中色彩设计原则
UI界面设计中的色彩设计
目标 了解UI界面设计中色彩设计的基本知识，理解色 彩的属性、冷暖、色环、色调及对人的心理影响， 掌握UI界面设计中色彩的设计原则及配色策略。
重点 、难点
理解色彩的基本知识；重点掌握UI界面设计中 色彩的设计原则及配色策略。
1 UI界面设计中色彩设计的基本知识
目录 2 UI界面设计中色彩设计原则
1 UI界面设计中色彩设计的基本知识
UI界面设计中色彩设计的基本知识
01 色彩的三属性
色相：指色彩的相貌，是区别色彩的必要名称，例如红、橙、黄、绿、 蓝、紫等。
明度：指色彩显示的明暗程度，即是色光的明暗度。不同的颜色，反 射的光量强弱不一，因而会产生不同程度的明暗。
谢谢
知识回顾 Knowledge Review
放映结束 感谢各位的批评指导！
谢 谢！
让我们共同进步
本节带领大家重温色彩的基本知识，从色彩的本质、属性、色环、 色调开始，了解色彩对人的生理和心理作用，熟记色彩在界面设计中 的重要作用，学习界面设计中色彩设计的原则及配色策略。
• 作业
思考与练习 1、简述色彩的三种属性及概念理解？ 2、界面设计中色彩设计的原则都有哪些？ 实训课堂
准备五个网页界面设计素材，分析其中色彩搭配的技巧， 指出界面设计在色彩设计方面运用的合理性，结合所学理 解并掌握优秀的网页界面设计中的色彩的运用。
UI界面设计中色彩设计的基本知识
04 色调
色调指的是一幅画中画面色彩的总体倾向，是大的色彩效果。 色调是颜色的重要特征，它决定了颜色本质的根本特征。如在大自 然中，经常见到这样一种现象：不同颜色的物体或被笼罩在一片金 色的阳光之中，或被笼罩在一片轻纱薄雾似的、淡蓝色的月色之中； 或被秋天迷人的金黄色所笼罩；或被统一在冬季银白色的世界之中。 这种在不同颜色的物体上，笼罩着某一种色彩，使不同颜色的物体 都带有同一色彩倾向，这样的色彩现象就是色调。
• UI界面设计色彩配色策略
C 类似色配色
类似色配色也是常用的配色方法，对比不强给人感到平静、 调和的感觉。
• UI界面设计色彩配色策略
红黄双色主导页面，色彩基本用于不同组控件表现，红色用于导航控件、按钮和图标， 同时也作辅助元素的主色。利用偏橙的黄色代替品牌色，用于内容标签和背景搭配。
• 小结
UI界面设计中色彩设计的基本知识
03 色环
色环其实就是将光谱中的色彩，按照一定的顺序依次排列起，首尾 相连，首尾为红色和紫色，组成环形，构成了色环。
UI界面设计中色彩设计的基本知识
03 色环
在色环中，红、黄、蓝为三原色，因为它们不能用其他颜色调配而 成，故称为三原色。间色则是指光谱中的橙、绿、紫等，它们由两种 原色调配而成，也叫二次色。 类似色（同类色）：在色环中距离在45度以内的一些色彩称为类似色。 互补色（对比色）：在色环上相互正对，成180度角的两个颜色称为 互补色，也称对比色。 互补色：红----绿 黄----紫 蓝----橙
• UI界面设计色彩配色策略
B 同色系配色
同色系配色是指主色和辅色都在统一色相上，这种配色 方法往往会给人感到页面很一致化的感受。
• UI界面设计色彩配色策略
整体蓝色设计带来统一印象，颜色的深浅分别承载不同类型的内容信息，比如信息 内容模块，白色底代表用户内容，浅蓝色底代表回复内容，更深一点的蓝色底代表可 回复操作，颜色主导着信息层次。
色彩作为一种视觉元素，它是带有感情的，潜移默化的影响 着我们的行为和情绪 。充分利用色彩的温度感、距离感、重 量感、尺度感等满足满足受众人群的心理感受。
• UI界面设计色彩设计原则
距离感的界面设计
• UI界面设计色彩设计原则
• UI界面设计色彩设计原则
C 生动性原则
在色彩设计时，应避免过于单调，没有变化，缺乏氛围。在 色彩面积、色相、纯度、明度、光色、肌理等方面应进行有 秩序、有规律的变化，给人以丰富的变化感，让界面设计更 加生动。
UI界面设计中色彩设计的基本知识
04 色调
暖色调：红、黄、橙、赭石、咖啡、紫红等，具有热烈、明朗、兴 奋、奔放等特点，给人温暖的感觉。 冷色调：蓝、绿、紫等，具有安静、稳重、明快等特征，冷色调给 整个空间带来清新、凉爽之感。
• UI界面设计中色彩设计的基本知识
• UI界面设计色彩设计的基本知识
• UI界面设计色彩设计原则
色彩全局统一，细节凸显，面积对比法则，用色彩划分视觉区域。
3 UI界面设计中色彩配色策略
• UI界面设计色彩配色策略
A 邻近色配色
近邻色配色方法比较常见，搭配比同色系稍微丰富，色相柔 和过渡看起来也很和谐。
• UI界面设计色彩配色策略
纯度高的色彩，基本用于组控件和文本标题颜色，各控件采用邻 近色使页面不那么单调，再把色彩饱和度降低用于不同背景色和模 块划分。
UI界面设计色彩设计原则
A 统一性原则
色彩会因界面的不同而产生不同的情感，因此，为了使 界面整体达到和谐统一，色彩在界面设计中起到了重要的 Байду номын сангаас用，只有色彩达到了和谐统一，界面才能与浏览者答到 情感共鸣。
UI界面设计色彩设计原则
统一的整体色调，突出主题并且生动。
• UI界面设计色彩设计原则
B 情感性原则
纯度：指色彩纯净、饱和的程度。具体来说，是表明一种颜色中是否 含有白或黑的成份。
UI界面设计中色彩设计的基本知识
02 色彩的冷与暖
冷色和暖色是一种色彩感觉。冷色和暖色没有绝对的区分，色彩在 比较中才存在了冷暖。通常我们把红黄色系看作暖色系，具有温暖、强 烈、扩张的感受；蓝紫色系看作冷色系，具有寒冷、平静、收敛的感受； 而绿色系则看作是中性色系。
05 色彩对人的心理作用
当色彩以不同的光强度与不同的波长作用于人的视觉时，便会产生一系 列心理的反应，这些与人以往经验相联系时，便会引起各种联想，使色 彩具有情感、意志、情绪等各方面的象征意义。
黄色，似阳光普照大地，感到明朗、活跃、兴奋。 黑色，联想到黑夜、从而感到神秘、悲哀、不祥、绝望。
2 UI界面设计中色彩设计原则
UI界面设计中的色彩设计
目标 了解UI界面设计中色彩设计的基本知识，理解色 彩的属性、冷暖、色环、色调及对人的心理影响， 掌握UI界面设计中色彩的设计原则及配色策略。
重点 、难点
理解色彩的基本知识；重点掌握UI界面设计中 色彩的设计原则及配色策略。
1 UI界面设计中色彩设计的基本知识
目录 2 UI界面设计中色彩设计原则