界面设计中色彩的运用
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
• 画面上冷暖色对比，同时占有相同面积及 地位。界面上两色不分主次，对比强烈， 色彩华丽，装饰性很浓。
19
三、 对比色
20
三、 对比色
21
多页面间风格的统一
• 前面展示的WEB页面，多个页面之间是不 同，却很明显可以感觉到是同一个站点， 这就是因为它们保持着相同的色彩、布局 风格。
22
IBM站点分析
2
色彩的作用
• 当我们看到不同的颜色时，心理会受到不 同颜色的影响而发生变化。色彩本身是没 有灵魂的，它只是一种物理现象。 • 我们长期生活在一个色彩的世界里，积累 了许多视觉经验，一旦知觉经验与外来色 彩刺激发生一定的呼应，就会在人的心理 上引出某种情绪。这种变化虽然因人而异， 但大多会有下列心理反应。
28
• 网站中的WEB页面大体只有一种色彩—— 蓝色，但是由于不同的明度与饱和度又分 了几个不同的蓝色，这样就有一色彩的层 次。不会觉得色彩单调，也不会觉得色彩 过多。并且在后期加入一些图片时，由于 整站的色彩不是很多，所以图片可发挥的 空间就加大了！
29
IBM站点分析
30
总结
• WEB站点设计中，色彩的运用是UI设计的 关键部分。色彩运用成功与否很大程度上 决定了网站设计的成功与否。
13
一、 整体色
14
二、 重点色
• 在同调的色中，局部加上不同调的色，形 成视觉美点。色彩的点缀在界面中产生一 种紧张感，成为整体的一个着力点。点缀 的色应该采用小的面积，并与其他色形成 强烈反差，以加强吸引力，形成视觉中心。
15
二、 重点色
16
二、 重点色
17
二、 重点色
18Fra Baidu bibliotek
三、 对比色
8
一、 整体色
• Windows XP的蓝色看起来很舒服。原因在 于蓝色的亮度最低，不刺眼，同时，在蓝 色上显示白字的对比度最高。而如果换成 绿色的风格，则白色的文字不容易识别。
9
一、 整体色
10
一、 整体色
11
一、 整体色
12
一、 整体色
• 黑色代表严肃、庄重，权威，以及恐怖、 严酷 • 灰色具有枯淡的平静感和稳定性
3
色彩的作用
• 红色给人的感受是强烈，热情、喜悦，也 使人表现急躁与愤怒 。 • 黄色是明亮、年轻、光明、开朗，充满活 力。 • 绿色给人以清新 、清爽、年轻的印象感， 像春天般充满活力。 • 蓝色具有理智的、寂静的印象感，令人觉 得清凉和整洁 。
4
色彩的作用
5
一、 整体色
6
一、 整体色
7
一、 整体色
• 色彩 -- 低调而不低沉 • 页面的整体视觉感觉偏重，色彩并不张扬。
26
IBM站点分析
27
IBM站点分析
• 在页面之中的色彩全部变成了黑白灰了， 看看这里的“黑”、“白”、“灰”三者 之间的关系： • 页头与页脚都是黑色，中间分布着不同层 次的灰度，而面积最大的还是白色。这样 色彩就行成了一个梯度。大约是45%的白， 35%的灰，20%的黑。一般情况下黑色较 多就会很沉重，灰色较就会没精神，软绵 绵，白色较多就会显得很苍白。
界面设计中色彩的运用
1
色彩的作用
• 色彩给人视觉上造成的冲击力是最为直接与迅速 的。作为第一视觉语言，色彩在界面设计中的作 用是字体与图像等其他要素所无法替代的。由于 对色彩的爱好是人类一种最本能、最普遍的美感， 它对观看者的影响便是最为直接的。 • 界面设计者要考虑读者最初一瞬间的色彩感觉， 牢牢地捉住他们的眼光，以达到引起关注的目的。
31
• 在众多商业网站中，IBM始终以稳重、大方、 低调的形象示众。 • 看一下首页的整体效果 • 布局 -- 平稳而不单调
23
IBM站点分析
24
IBM站点分析
• 首页的布局是横向的四行，为了打破四行 过于单调的特性，特别在中间分开了几个 不同的栏目，这样就使得页并不那么单调 乏味了。
25
IBM站点分析
19
三、 对比色
20
三、 对比色
21
多页面间风格的统一
• 前面展示的WEB页面，多个页面之间是不 同，却很明显可以感觉到是同一个站点， 这就是因为它们保持着相同的色彩、布局 风格。
22
IBM站点分析
2
色彩的作用
• 当我们看到不同的颜色时，心理会受到不 同颜色的影响而发生变化。色彩本身是没 有灵魂的，它只是一种物理现象。 • 我们长期生活在一个色彩的世界里，积累 了许多视觉经验，一旦知觉经验与外来色 彩刺激发生一定的呼应，就会在人的心理 上引出某种情绪。这种变化虽然因人而异， 但大多会有下列心理反应。
28
• 网站中的WEB页面大体只有一种色彩—— 蓝色，但是由于不同的明度与饱和度又分 了几个不同的蓝色，这样就有一色彩的层 次。不会觉得色彩单调，也不会觉得色彩 过多。并且在后期加入一些图片时，由于 整站的色彩不是很多，所以图片可发挥的 空间就加大了！
29
IBM站点分析
30
总结
• WEB站点设计中，色彩的运用是UI设计的 关键部分。色彩运用成功与否很大程度上 决定了网站设计的成功与否。
13
一、 整体色
14
二、 重点色
• 在同调的色中，局部加上不同调的色，形 成视觉美点。色彩的点缀在界面中产生一 种紧张感，成为整体的一个着力点。点缀 的色应该采用小的面积，并与其他色形成 强烈反差，以加强吸引力，形成视觉中心。
15
二、 重点色
16
二、 重点色
17
二、 重点色
18Fra Baidu bibliotek
三、 对比色
8
一、 整体色
• Windows XP的蓝色看起来很舒服。原因在 于蓝色的亮度最低，不刺眼，同时，在蓝 色上显示白字的对比度最高。而如果换成 绿色的风格，则白色的文字不容易识别。
9
一、 整体色
10
一、 整体色
11
一、 整体色
12
一、 整体色
• 黑色代表严肃、庄重，权威，以及恐怖、 严酷 • 灰色具有枯淡的平静感和稳定性
3
色彩的作用
• 红色给人的感受是强烈，热情、喜悦，也 使人表现急躁与愤怒 。 • 黄色是明亮、年轻、光明、开朗，充满活 力。 • 绿色给人以清新 、清爽、年轻的印象感， 像春天般充满活力。 • 蓝色具有理智的、寂静的印象感，令人觉 得清凉和整洁 。
4
色彩的作用
5
一、 整体色
6
一、 整体色
7
一、 整体色
• 色彩 -- 低调而不低沉 • 页面的整体视觉感觉偏重，色彩并不张扬。
26
IBM站点分析
27
IBM站点分析
• 在页面之中的色彩全部变成了黑白灰了， 看看这里的“黑”、“白”、“灰”三者 之间的关系： • 页头与页脚都是黑色，中间分布着不同层 次的灰度，而面积最大的还是白色。这样 色彩就行成了一个梯度。大约是45%的白， 35%的灰，20%的黑。一般情况下黑色较 多就会很沉重，灰色较就会没精神，软绵 绵，白色较多就会显得很苍白。
界面设计中色彩的运用
1
色彩的作用
• 色彩给人视觉上造成的冲击力是最为直接与迅速 的。作为第一视觉语言，色彩在界面设计中的作 用是字体与图像等其他要素所无法替代的。由于 对色彩的爱好是人类一种最本能、最普遍的美感， 它对观看者的影响便是最为直接的。 • 界面设计者要考虑读者最初一瞬间的色彩感觉， 牢牢地捉住他们的眼光，以达到引起关注的目的。
31
• 在众多商业网站中，IBM始终以稳重、大方、 低调的形象示众。 • 看一下首页的整体效果 • 布局 -- 平稳而不单调
23
IBM站点分析
24
IBM站点分析
• 首页的布局是横向的四行，为了打破四行 过于单调的特性，特别在中间分开了几个 不同的栏目，这样就使得页并不那么单调 乏味了。
25
IBM站点分析