色彩分析、设计解析
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
2. 设计的加减法哲学
从第一个像素开始，我们开始不断用加法进行创造，搭建出完美的设计作品，然 而这就是极致么？在设计适时运用放大或减少，不断地变化，可以更好的趋向极
简，反复历练考究每一个必要的元素存在的价值。
pc.qq.com 每当到达这个阶段，设计师需要静下心来思考，当加法到一定的量的时候再转做 减法设计，考验的是设计师对整体把握能力。减法设计是在加法比较成熟的情况 下才能去尝试的设计方式。理论上来说，加法设计比减法设计相对更加容易。减 法设计更能体现设计师的功力和积累，目标要求的是少而精炼。
1-
我们可以写下必须要的内容：logo、介绍、导航等等。和你的产品经理一起，去 掉其它一切不需要的元素，尽可能的丢掉它们。
labs.qq.com
2-
这里的关键并非让网站有较少的功能，而是去掉不是必要的元素或将多个部分整 合到一个更简单的布局。你也可以分割内容到独立的页面，给予内容的每个部分 更多关注。
www.31three.com
鼓起勇气大胆的去除边框，让画面更加通透大气，空间视觉元素不多 不少，但又显得很丰富、美观。 这个加减的过程正是让设计不断趋向完美的历练之路。
3. 让空间更加透气
通过去除与隐藏的方式降低设计复杂性的方法中，减少“视觉感知”的复杂性也 是很重要的。空白与对比无疑成为行之有效的减少视觉干扰的重要方法。 视觉布局中适当的空白对平衡即将出现在页面中的少量元素是必要的平衡。它应 是你默认的布局工具。经典法则之一：如果可以使用空白就不要放置其他设计元 素。如果用这种方式布局，你会很惊讶调整界面的空白就可以完成布局了
0099cc
ccff66
666666
3399cc
cc3366
cccccc
336699
ffff66
6699ff
应用色 主体色
032951
辅助色
+
FBB217
11406C 8AABCA FFFFFF
019ED5
=
01wk.baidu.comD67
AEDD81
6BC235
068043 03230E FF0000 000000
蓝色 Blue
www.areyoufrank.com
3. 善用色彩的心里暗示
简约而通透的白色页面
白色，因其明度最高，无色相，明亮干净、畅快、朴素，永恒无暇，
在自然界象征着极致的纯净与贞洁。白色优雅、平和而简单，没有强烈 的个性，因而网站设计中，白色具有高级，科技的意象，是永远流行的 主色调。
轻快的白色可以给人很好的轻快速度感，运用得当可以让其它任何浅颜色及亮颜 色呈现出其深度、明度和饱和度的不同，通过对比让其亮色更加明快、专注和舒 适。整洁、大空白的同时让用户保持欢快的情感进行浏览。
红色Red
红色是热烈、冲动、强有力的色彩，它能使肌肉的机能和血液循环加快 ——是一种激奋的色彩。有刺激效果，能使人产生冲动、愤怒、热情、活力的感觉 ——兴奋、精力、热情、欲望、速度、力量、热爱、侵略
所谓的“多媒体”
进入21世纪所谓【多媒体传播时代】，运用电脑储存与再取信息的技术，将各种沟通媒体如 文字、图像、声音、影像、动画和录像结合成不同的【多媒体系统】，随时随地与不同时候， 不同地点的人互通信息。
www.apple.com
www.dbushell.com 灰色无论是作为背景颜色还是标题或者主字体颜色都很流行。灰色也是极简主义 网站设计的首选色彩，这类网站通常会选用浅灰色作为背景色彩，然后选用深灰 色作为主要的字体颜色。这里是一些使用灰色的几个很不错的网站设计。
www.iconwerk.de
2008.dconstruct.org
设计作品欣赏与学习
1. 精致高雅的灰色绅士
“灰质(Gray matter)”让人联想到智商与脑力。它不像黑色那么鲜明，又
不像纯白那样苍白，灰色是黑与白的过度，是完美的补色。灰色可以和任何色彩 搭配，由于它的中立性，它常常被用作背景颜色，可以让其它色彩突出。使用浅 灰色替代白色或者用暗灰色替代黑色，能够赋予网页与众不同的高雅之感。
下面的网站展示了如果使用白色来呈现内容和一个网站自身的潜力：
www.istockphoto.com/index.php
白色页面设计小技巧：
让链接更容易识别, 使用浅色或亮色； 减少杂乱广告图片； 不要使用过小的字体， 避免页面看起来琐碎和疲劳；
www.flickr.com
明快的文字颜色，让内容更易识别
蓝色是博大的色彩，天空和大海这辽阔的景色都呈蔚蓝色。蓝色是永恒的象征，它是最冷的 色彩。纯净的蓝色表现出一种美丽、文静、 理智、安祥与洁净。 ——是最具凉爽、清新、专业 ——和平、平静、稳定性、和谐、统一、信任、真相、信心
白色 white
白色具有高级，科技的意象 ——具有洁白、明快、纯真、清洁的感受 ——尊敬、纯净、简洁、清洁、和平、谦卑、精密、清白、青春、出生
Pc.qq.com 透气的留白不等于无力的苍白，让有趣的设计大胆的去激发用户的视觉神经，让 设计更有思想，不断趋向简洁和完美。
/www.devia.be
1 色彩分析 色环
暖色
阳
暖色 冷暖过渡色
阴
冷色
简单的、洁净的、进步的
CCCCCC
FFFFFF
666699
ccff66
ffffff
oo3366
99ccff
ffffff
333399
cccc33
ffffff
336699
0099ff
ffffcc
666699
99cc33
cccccc 000000
cccccc
003366 99ccff
(辅助色)
黄色 Yellow
黄色的灿烂、辉煌，有着太阳般的光辉，象征着照亮黑暗的智慧之光。黄色有着金色的光芒， 有象征着财富和权利，它是骄傲的色彩。 ——具有快乐希望、智慧和轻快的个性，它的明度最高 ——享受、幸福、乐观、理想主义、想象力、希望、阳光、夏天、哲学
绿色 Green
在商业设计中，绿色所传达的清爽，理想，希望，生长的意象 ——介于冷暖两种色彩中间，显得和睦、宁静、健康、安全的感觉。 ——自然、环境、健康、好运气、更新、青春、努力、春天、慷慨、富饶
因此从人类进化的角度来看，多媒体并不是一个时髦的名词；甚至多媒体的沟通方式乃人 类最自然的沟通方式。目前我们一般所谓【多媒体】所包括的媒体有以下几种： （1）文字和旁白（Text&narration) （2）图案和插画（Graphics&illustration) （3）静态的照片（Still photographs) （4）图表和图形（Charts&graphs) （5）视讯和动画（Video&animation) （6）音乐盒音效（Music&Sound effects)
www.kylestanding.com 虽然使用空白多多益善，但也要尽可能的保证有对比感。设计师应使用最小的视 觉变化来表达想法。事实上这就是意味着元素之间要有主次感。
4. 空白不等于苍白
页面变得苍白？是不是整版的文字缺少图片的点缀？在保留有必要的留白空间后， 试着为文字配上一张点睛的美图吧，或者给段落文字总结一个示意小图标，适当 的点缀必不可少。
www.janreichle.com
1. 产品原型视觉转化
设计开始之初，从原型稿到视觉稿的转化过程中，擅长图形化识别的视觉设计师 们，在面对繁杂而单调的线稿内容时，往往急于上马大施拳脚展开创作，缺忽略 了清晰梳理判断整体页面结构的重要环节。
哪些属于重点模块需要突出展示，哪些次要模块可以移动到更优化的布局或者精 简合并？这是一个需要长期经验积累，不断磨练耐心和提高理解判断能力的成长 过程，也是职业化的开端。
若从科技整合的角度来看，多媒体则是艺术、戏剧、传播与新媒体科技的结合。 多媒体传播时代是一个信息爆炸的时代，这时人类所面对最大难题是：越多的信息充斥，越少 的时间去做消化。我们常常因为大量信息的蜂拥而至，而产生对信息的恐慌。对于这个问题， 巧妙地组合各种媒体组件，使其相辅相成、相得益彰的【多媒体系统】提供了一个解决之道。 【多媒体】也成为一种新而有效的信息传播观念。
2 设计解析
越简单 越丰富
如何让杂乱又咄咄逼人 的网页变得轻薄简洁而 美观
又需保留完整功能、同时很好的区分出重点模块？这往往是让 设计师困扰纠结之源；如何更好的将多余的元素、色彩、形状 和纹理剔除，保留重点并梳理清晰的视觉流动方向？
如果一个页面有太多的元素，用户将迷惑于去看哪里或误解每个元素的优先级。 设计师需要用设计语言将焦点正好引导到正确的内容上，正如提到的，极简的网 页视觉能够将最重要的内容带到最前面并为用户避免分散注意力，比如，在一个 黑白设计上的任何色斑，都会引起用户的注意力，色彩本身也将成为焦点，这便 成为我们即将要展开探讨的小小话题。
2. 权衡布局及简化设计
排版布局中的平衡、对齐及对比关系，对页面视觉效果至关重要。如果画面效果 头重脚轻，或者左右不均衡，会让用户感觉到压迫感，从而影响到浏览信息的顺 畅。
水平对称
近似水平对称
径向对称
不对称
实现简化设计的第一步，不是简单的去掉大部分图片，而是要重新考虑内容并将 其简化到无遮盖的需求。只有那样才能让页面中最重要的元素实现其预期的效果。
从第一个像素开始，我们开始不断用加法进行创造，搭建出完美的设计作品，然 而这就是极致么？在设计适时运用放大或减少，不断地变化，可以更好的趋向极
简，反复历练考究每一个必要的元素存在的价值。
pc.qq.com 每当到达这个阶段，设计师需要静下心来思考，当加法到一定的量的时候再转做 减法设计，考验的是设计师对整体把握能力。减法设计是在加法比较成熟的情况 下才能去尝试的设计方式。理论上来说，加法设计比减法设计相对更加容易。减 法设计更能体现设计师的功力和积累，目标要求的是少而精炼。
1-
我们可以写下必须要的内容：logo、介绍、导航等等。和你的产品经理一起，去 掉其它一切不需要的元素，尽可能的丢掉它们。
labs.qq.com
2-
这里的关键并非让网站有较少的功能，而是去掉不是必要的元素或将多个部分整 合到一个更简单的布局。你也可以分割内容到独立的页面，给予内容的每个部分 更多关注。
www.31three.com
鼓起勇气大胆的去除边框，让画面更加通透大气，空间视觉元素不多 不少，但又显得很丰富、美观。 这个加减的过程正是让设计不断趋向完美的历练之路。
3. 让空间更加透气
通过去除与隐藏的方式降低设计复杂性的方法中，减少“视觉感知”的复杂性也 是很重要的。空白与对比无疑成为行之有效的减少视觉干扰的重要方法。 视觉布局中适当的空白对平衡即将出现在页面中的少量元素是必要的平衡。它应 是你默认的布局工具。经典法则之一：如果可以使用空白就不要放置其他设计元 素。如果用这种方式布局，你会很惊讶调整界面的空白就可以完成布局了
0099cc
ccff66
666666
3399cc
cc3366
cccccc
336699
ffff66
6699ff
应用色 主体色
032951
辅助色
+
FBB217
11406C 8AABCA FFFFFF
019ED5
=
01wk.baidu.comD67
AEDD81
6BC235
068043 03230E FF0000 000000
蓝色 Blue
www.areyoufrank.com
3. 善用色彩的心里暗示
简约而通透的白色页面
白色，因其明度最高，无色相，明亮干净、畅快、朴素，永恒无暇，
在自然界象征着极致的纯净与贞洁。白色优雅、平和而简单，没有强烈 的个性，因而网站设计中，白色具有高级，科技的意象，是永远流行的 主色调。
轻快的白色可以给人很好的轻快速度感，运用得当可以让其它任何浅颜色及亮颜 色呈现出其深度、明度和饱和度的不同，通过对比让其亮色更加明快、专注和舒 适。整洁、大空白的同时让用户保持欢快的情感进行浏览。
红色Red
红色是热烈、冲动、强有力的色彩，它能使肌肉的机能和血液循环加快 ——是一种激奋的色彩。有刺激效果，能使人产生冲动、愤怒、热情、活力的感觉 ——兴奋、精力、热情、欲望、速度、力量、热爱、侵略
所谓的“多媒体”
进入21世纪所谓【多媒体传播时代】，运用电脑储存与再取信息的技术，将各种沟通媒体如 文字、图像、声音、影像、动画和录像结合成不同的【多媒体系统】，随时随地与不同时候， 不同地点的人互通信息。
www.apple.com
www.dbushell.com 灰色无论是作为背景颜色还是标题或者主字体颜色都很流行。灰色也是极简主义 网站设计的首选色彩，这类网站通常会选用浅灰色作为背景色彩，然后选用深灰 色作为主要的字体颜色。这里是一些使用灰色的几个很不错的网站设计。
www.iconwerk.de
2008.dconstruct.org
设计作品欣赏与学习
1. 精致高雅的灰色绅士
“灰质(Gray matter)”让人联想到智商与脑力。它不像黑色那么鲜明，又
不像纯白那样苍白，灰色是黑与白的过度，是完美的补色。灰色可以和任何色彩 搭配，由于它的中立性，它常常被用作背景颜色，可以让其它色彩突出。使用浅 灰色替代白色或者用暗灰色替代黑色，能够赋予网页与众不同的高雅之感。
下面的网站展示了如果使用白色来呈现内容和一个网站自身的潜力：
www.istockphoto.com/index.php
白色页面设计小技巧：
让链接更容易识别, 使用浅色或亮色； 减少杂乱广告图片； 不要使用过小的字体， 避免页面看起来琐碎和疲劳；
www.flickr.com
明快的文字颜色，让内容更易识别
蓝色是博大的色彩，天空和大海这辽阔的景色都呈蔚蓝色。蓝色是永恒的象征，它是最冷的 色彩。纯净的蓝色表现出一种美丽、文静、 理智、安祥与洁净。 ——是最具凉爽、清新、专业 ——和平、平静、稳定性、和谐、统一、信任、真相、信心
白色 white
白色具有高级，科技的意象 ——具有洁白、明快、纯真、清洁的感受 ——尊敬、纯净、简洁、清洁、和平、谦卑、精密、清白、青春、出生
Pc.qq.com 透气的留白不等于无力的苍白，让有趣的设计大胆的去激发用户的视觉神经，让 设计更有思想，不断趋向简洁和完美。
/www.devia.be
1 色彩分析 色环
暖色
阳
暖色 冷暖过渡色
阴
冷色
简单的、洁净的、进步的
CCCCCC
FFFFFF
666699
ccff66
ffffff
oo3366
99ccff
ffffff
333399
cccc33
ffffff
336699
0099ff
ffffcc
666699
99cc33
cccccc 000000
cccccc
003366 99ccff
(辅助色)
黄色 Yellow
黄色的灿烂、辉煌，有着太阳般的光辉，象征着照亮黑暗的智慧之光。黄色有着金色的光芒， 有象征着财富和权利，它是骄傲的色彩。 ——具有快乐希望、智慧和轻快的个性，它的明度最高 ——享受、幸福、乐观、理想主义、想象力、希望、阳光、夏天、哲学
绿色 Green
在商业设计中，绿色所传达的清爽，理想，希望，生长的意象 ——介于冷暖两种色彩中间，显得和睦、宁静、健康、安全的感觉。 ——自然、环境、健康、好运气、更新、青春、努力、春天、慷慨、富饶
因此从人类进化的角度来看，多媒体并不是一个时髦的名词；甚至多媒体的沟通方式乃人 类最自然的沟通方式。目前我们一般所谓【多媒体】所包括的媒体有以下几种： （1）文字和旁白（Text&narration) （2）图案和插画（Graphics&illustration) （3）静态的照片（Still photographs) （4）图表和图形（Charts&graphs) （5）视讯和动画（Video&animation) （6）音乐盒音效（Music&Sound effects)
www.kylestanding.com 虽然使用空白多多益善，但也要尽可能的保证有对比感。设计师应使用最小的视 觉变化来表达想法。事实上这就是意味着元素之间要有主次感。
4. 空白不等于苍白
页面变得苍白？是不是整版的文字缺少图片的点缀？在保留有必要的留白空间后， 试着为文字配上一张点睛的美图吧，或者给段落文字总结一个示意小图标，适当 的点缀必不可少。
www.janreichle.com
1. 产品原型视觉转化
设计开始之初，从原型稿到视觉稿的转化过程中，擅长图形化识别的视觉设计师 们，在面对繁杂而单调的线稿内容时，往往急于上马大施拳脚展开创作，缺忽略 了清晰梳理判断整体页面结构的重要环节。
哪些属于重点模块需要突出展示，哪些次要模块可以移动到更优化的布局或者精 简合并？这是一个需要长期经验积累，不断磨练耐心和提高理解判断能力的成长 过程，也是职业化的开端。
若从科技整合的角度来看，多媒体则是艺术、戏剧、传播与新媒体科技的结合。 多媒体传播时代是一个信息爆炸的时代，这时人类所面对最大难题是：越多的信息充斥，越少 的时间去做消化。我们常常因为大量信息的蜂拥而至，而产生对信息的恐慌。对于这个问题， 巧妙地组合各种媒体组件，使其相辅相成、相得益彰的【多媒体系统】提供了一个解决之道。 【多媒体】也成为一种新而有效的信息传播观念。
2 设计解析
越简单 越丰富
如何让杂乱又咄咄逼人 的网页变得轻薄简洁而 美观
又需保留完整功能、同时很好的区分出重点模块？这往往是让 设计师困扰纠结之源；如何更好的将多余的元素、色彩、形状 和纹理剔除，保留重点并梳理清晰的视觉流动方向？
如果一个页面有太多的元素，用户将迷惑于去看哪里或误解每个元素的优先级。 设计师需要用设计语言将焦点正好引导到正确的内容上，正如提到的，极简的网 页视觉能够将最重要的内容带到最前面并为用户避免分散注意力，比如，在一个 黑白设计上的任何色斑，都会引起用户的注意力，色彩本身也将成为焦点，这便 成为我们即将要展开探讨的小小话题。
2. 权衡布局及简化设计
排版布局中的平衡、对齐及对比关系，对页面视觉效果至关重要。如果画面效果 头重脚轻，或者左右不均衡，会让用户感觉到压迫感，从而影响到浏览信息的顺 畅。
水平对称
近似水平对称
径向对称
不对称
实现简化设计的第一步，不是简单的去掉大部分图片，而是要重新考虑内容并将 其简化到无遮盖的需求。只有那样才能让页面中最重要的元素实现其预期的效果。