产品能力提升｜互联网产品·视觉设计

「互联网产品·视觉设计」

一、色彩

2021/1/14
色彩同时具有三种属性：色相、明度、彩度，三种属性相对独立、相互关联、相互制约。

色相

1. 色相指色彩不同的相貌。
2. 任何一个色相都可以以自身为基准色，与其他色相形成同类、类似、邻近、对比及互补的关系。
3. 同类色相：同类色相对比是指色相相距15度以内的对比，由于对比的两色相距太近，色相对比太弱，一般归为同一色相。在视觉上形成单纯、稳定、安静、雅致的效果，处理不当容易变得单调呆板。
4. 类似色相：同类色相对比是指色相相距30度左右的对比，类似色相对比的几个色一般同属于一个大的色相范畴，其特点仍然是统一、和谐。
5. 邻近色相：邻近色相对比是指色相距离50～60度左右（90度以内）的对比，保持了统一的优点，克服了视觉不满足的缺点。
6. 对比色相：对比色相指色相相距120度左右的对比关系，有鲜艳的色相差异，效果强烈、兴奋，但容易使视觉疲劳，处理不当容易令人烦躁、不安定。是体现生动的最佳配色。
7. 互补色相：互补色相指色相距离180度的对比，是色相中最强的对比。通常是红、黄、蓝和绿、紫、橙之间形成的对比关系。给人饱满、活跃、生动、刺激的感受，处理不当容易过火、过愣，适合追求短时间内获得色彩相印的场合。

明度

1. 明度是指色的明暗程度，也可以称色的亮度、深浅。
2. 靠近白端为高明度色，靠近黑端为低明度色。
3. 高明度：容易营造轻快、爽洁的氛围。
4. 中明度：生动富于亲和力。
5. 低明度：营造沉重、冷峻、成熟。
6. 色彩的属性差异越大，注目度就越大，尤其是明度差异，是决定注目度的最主要因素。

彩度

1. 彩度是指色彩的鲜艳度，也叫饱和度。
2. 色相的彩度、明度是不成正比的。
3. 高彩度：是指高纯度、生动鲜明的颜色，红、橙、黄、棕一类的暖色、纯色属于高彩度色彩，容易给人兴奋感和活泼感。
4. 中彩度：采用中彩度的网站多于高彩度和低彩度的网站。
5. 低彩度：低彩度高明度的配色往往能营造出温和、洁净、隐约的色彩氛围。

色调

1. 色调是指三属性中除了色相以外，明度和彩度的复合称谓。
2. 色调可以分为：纯色调、强色调、明亮色调、淡色调、灰白色调、浅灰色调、隐约色调、灰色调、浞色调、深色调、暗色调。
3. 纯色调：没有混合任何色彩的纯色。
4. 强色调：与纯色调明度值相似，彩度比纯色调低一个阶段。
5. 明亮色调：在纯色调基础上混合了白色，明度值高。
6. 淡色调：与明亮色调相比，混合的白色更多，彩度值为中，明度值高。
7. 灰白色调：混合了很多白色，几乎可以认为是白色，彩度非常低。
8. 浅灰色调：混合了明亮的灰色，看起来柔和且有一定深度。
9. 隐约色调：混合了更多黑色，彩度、明度低了一个层次。
10. 灰色调：几乎接近于纯正的灰色。
11. 浞色调：具有隐约和低沉的意思，明度和彩度都位于中间位置。
12. 深色调：彩度为中上，明度较度。
13. 暗色调：明度最低、彩度也最低，几乎看不到色相。

---

二、主辅色与强调色

2021/1/14

1. 主色：是指界面色彩组合中的主要色相、色调，占绝对优势、代表总体色彩感觉的颜色。
2. 辅助色：仅次于主色，是用于烘托主色、配合主色的辅助色彩，以对比或调和的形态出现。
3. 强调色：是指和主色彩形成对比的色相、色调，面积较小但是引人注目。
4. 在配色时，需要注意强调色的使用面积，小面积能起到强调作用，过大则会颠倒主次。
5. 色彩作用：营造氛围、塑造风格。
6. 色调作用：决定网页整体印象，营造网页氛围。
7. 色相作用：给人带来不同联想，起到象征作用。
8. 色彩在网页或者界面中的另一重要作用就是配合网站/APP版式结构，强化视觉区域。
9. 界面配色中要遵循三大原则：准确、整体、个性。
10. 设计是一种沟通、对话，不是设计师的自我表现和自我满足，需要了解色彩心理形成的社会文化环境，充分考虑用户的感受。

---

三、基于色相的配色

2021/1/14

基于红色系的配色

红色

1. 具体：火焰、太阳、鲜血、国旗、消防车、圣诞、中国
2. 抽象：温暖、生命力、革命、国家与民族、热情、危险、兴奋、性感
3. 色彩情感特征（积极）：引人注目、兴奋和动感、刺激热烈情感、具有感染力
4. 色彩情感特征（消极）：暴力血腥带来的恐惧
5. 色彩的性格：煽动性、充满活力、敢作敢为、野性、冲动
6. 适用题材：运动品牌、跑车、越野车、快餐、辛辣食品、政治、革命和节庆题材

粉红色

1. 具体：小女孩健康的脸色、娇艳的花朵、少女的衣裳
2. 抽象：柔美、未成熟的青春、少女的情怀、柔弱
3. 色彩情感特征（积极）：有趣、兴奋、动感
4. 色彩情感特征（消极）：不成熟、人工感、矫揉造作
5. 色彩的性格：美丽、生气勃勃、未成熟的清新与浪、平易近人、亲切感
6. 适用题材：洋娃娃、塑料制品、化妆、美容，易随时尚波动

紫红色

1. 具体：葡萄酒、天鹅绒、成熟女性的服装
2. 抽象：成熟、高贵
3. 色彩情感特征：奢华、浪漫、华丽、充满魅力
4. 色彩的性格：优雅、魅力、神秘、艺术气质
5. 适用题材：奢侈品、高级时装、化妆品

基于橙色系的配色

橙色

1. 具体：太阳光芒、丰收的庄稼、美味的水果、卡通、玩具颜色
2. 抽象：明朗、丰收、可口、活跃、新鲜、愉快、食欲、能量
3. 色彩情感特征（积极）：轻松、明快、乐、饱满、热烈、新奇
4. 色彩情感特征（消极）：廉价、不成熟、不严肃
5. 色彩的性格：外向、好玩、社交性、孩子气
6. 适用题材：玩具、游戏、廉价的塑料制品、快餐

棕色

1. 具体：泥土、砖、古铜色皮肤、树干、落叶、皮革
2. 抽象：大地、乡土、年老、古典、成熟、深沉、安全、环保、信赖、温暖而单纯、无聊、沉重
3. 色彩情感特征（积极）：沉稳、坚实、硬朗、沉淀、踏实感、信任感
4. 色彩情感特征（消极）：脏、守旧、衰败枯竭、厌恶、失望、郁闷、悲悯
5. 色彩的性格：健康、踏实、诚恳、有阅历可信赖
6. 适用题材：休闲服装、环保食品

基于黄色系的配色

黄色

1. 具体：阳光、光线、香蕉、奶油、肤色、交通警告标志
2. 抽象：光明、温暖、可口、动感、乐观、警示、嫉妒、吝啬、佛教
3. 色彩情感特征（积极）：温暖与生机、活泼与动感
4. 色彩情感特征（消极）：低俗、危险、警示、厌恶、惊恐
5. 色彩的性格：引人注目、鲜明、亲和、生机勃勃
6. 适用题材：食品、餐厅

基于绿色系的配色

绿色

1. 具体：森林、草原、花草、蔬菜
2. 抽象：自然、春天、生命、希望、健康、中性、安全感
3. 色彩情感特征：优雅、稳定、沉着、财富、声望、新鲜、清新、生机勃勃、吸引力
4. 色彩的性格：平静、温和、安全、信赖、丰富、活力
5. 适用题材：个人卫生用品、食品

基于蓝色系的配色

蓝色

1. 具体：大海、晴空、水面、职业装
2. 抽象：沉静、理想、永恒、理性、干净、畅快、成功
3. 色彩情感特征：可靠、信任、承诺、信心、放松、平静、新奇
4. 色彩的性格：可靠、信赖、严肃、动感、活力
5. 适用题材：银行、金融机构、图书馆、医院、医生护士服装、饮料、食品包装

基于紫色系的配色

紫色

1. 具体：贵族服装、夜空、薰衣草、薄纱、葡萄酒、天鹅绒
2. 抽象：高贵、上流社会、忧郁、感伤、优雅、浪漫、成熟、贵重
3. 色彩情感特征：兴奋、性感、优雅、浪漫、哀伤、抑郁
4. 色彩的性格：创造性、优雅、富于魅力、精灵古怪、理想主义、神秘、艺术性、独特性
5. 适用题材：神秘的精神产品、最新高科技、高级时装、化妆品、汽车

基于黑色系的配色

黑色

1. 具体：钢铁、煤炭、法官牧师的服装
2. 抽象：刚劲、严肃、死亡、绝望、黑暗、恶
3. 色彩情感特征（积极）：有力、男人味、优雅、贵重、现代
4. 色彩情感特征（消极）：哀伤、恐怖、害怕、沉默
5. 色彩的性格：力量、坚毅、有震慑力、有内涵
6. 适用题材：富于产品力量、耐用、厚重感

基于白色系的配色

白色

1. 具体：冰雪、婚纱、白云、大米、白糖、盐
2. 抽象：纯真、高洁
3. 色彩情感特征（积极）：纯洁、简洁、明亮、平静、和平、朴素、清洁
4. 色彩情感特征（消极）：虚无感、寂寞感、死亡、冷淡
5. 色彩的性格：纯洁、朴素、安静
6. 适用题材：婴儿产品、个人护理产品、餐厅环境、食品包装

---

儿童网站

2021/1/14

1. 不同页面可以采用不同的颜色背景，女孩产品页面采用较暖的粉色，男孩产品页面采用较冷的蓝色，充分利用色彩对信息的识别性进行引导。
2. 可以学习处理黄色和紫色这对互补色彩进行搭配，黄色占大面积作为主色，紫色作为强调色出现在logo、导航、重要的按钮和内容区域中。将黄色和紫色的色调统一为明亮色调，并使用同色调的蓝色、绿色进行穿插，使得黄紫互补对比再一次得到调和，使整体氛围多彩可爱，充满童真的幻想。

---

教育类网站配色「儿童人工智能教育网站设计与开发」参考用

2021/1/14

1. 教育类网站层次：学前教育网站，面向幼儿进行学前教育，提供教育、游戏等资源。
2. 教育类网站在色彩的选择和色彩搭配，应该追求体现网站的教育主题，以获得相应年龄用户的喜爱。
3. 暖色调：即红、橙、黄等色彩的搭配，可以使主页呈现温馨、和煦、热情的氛围，主要集中于低龄化的学前教育及中小学教育，更能体现孩子活泼可爱的天性。
4. 冷色调：即蓝、绿、紫等色彩的搭配，可以使网页呈现宁静、清凉、高雅的氛围，主要集中于高等教育类网站，体现严谨、权威、稳重、高雅的学术氛围和教学理念。
5. 对比色调：即把色性完全相反的色彩搭配在一起，例如红与绿、黄与紫、橙与蓝等，可以产生强烈的视觉效果，给人亮丽、喜庆、鲜艳的感觉，需要把握“大调和小对比”原则。
6. 教育网站的服务对象是师生、教育管理工作者及关心教育的一切人士，目的是让他们在此得到所需的教育相关的信息，色彩运用太多、太乱会影响教育类网站的质量，页面需要给人以清新、舒畅的感觉。
7. 「腾讯儿童」是腾讯大型门户网站的儿童频道，服务于3岁至小学儿童的教育类网站。主体采用蓝绿色到黄绿色的渐变，整体以蓝绿为主，辅助色为纯度及彩度较高的绿色及黄色，个别二级页面有红色及橙色作为强调色，整体搭配给人健康活泼之感。
8. 「WaWaYaYa」针对儿童的性格特征和成长需求，结合儿童的接受能力，在网上为儿童搭建了一个理念先进、内容充实、形式生动的学习游戏天地。网站主体色为黄色，辅助色为相邻色相的蓝色及绿色，色彩纯度很高，强调色为橙红色，颜色搭配跳跃活泼、充满活力。

---

加强界面色彩调和

2021/1/14

1. 类似色相、类似色调：通常传达出冷静整齐的感觉，在色调相同或者类似的情况下，通过色相的差别表现出细微不同的感觉；如果是同一色相或者类似色相，则通过色调的差别来打破单一。
2. 相反色相、类似色调：通过同一或者类似色调得到调和的配色方法，决定最终效果的是色调的面貌。如果使用了比较鲜艳生动的色调，那么色相的对比效果将得到强化而整体呈现动感的氛围；如果使用了暗色调，即使色相对比再强烈，也会呈现出安静沉着的面貌。

---

加强网页色彩对比

2021/1/14

1. 相反色相、相反色调：具有变化感和冲突性，需要根据主题和阅读的舒适度，综合色相和色调来调整和分配各个色彩所占比例的大小。
2. 相似色相、相反色调：特点是“统一中的突出效果”，在保持整齐、统一感的同时，做到更好的局部突出效果，而且色调的差异越大，突出的效果越明显。

---

渐变

2021/1/14

1. 色相渐变：是指在类似色调的基础上，通过色相的逐渐变化进行配色。
2. 色调渐变：是指在类似色相的基础上，通过色调的变化来进行配色。

---

分离

2021/1/14

1. 基于色彩排列的配色方式，通过向颜色与颜色之间插入一个分离色，通常使用的分离色是白色或黑色等非彩色，一般面积不宜过大，主要用需要分辨但颜色差异本身不太明显的配色环境中，也可通过插入到两个对比过于强烈的颜色中间达到缓冲效果。

---

三角调和

2021/1/14

1. 定义：凡是在色相环中构成等边三角形或等腰三角形的三个色是调和的色组，也可将这些等边或等腰三角形或任意不等边三角形在色环中自由移动，可找到无限个调和色组。
2. 延伸：相邻的三种颜色进行搭配，将这三个颜色用直线连接起来，所形成的三角形通常为等腰三角形，从色彩印象来说往往形成邻近统一的效果。
3. 延伸：相邻的两种颜色与其两者形成互补关系的第三种颜色也同样形成三角调和的关系，从色彩印象来说往往形成对比强烈但又不失统一的效果。

---

四角调和

2021/1/14

1. 定义：凡是在色相环中构成正方形或长方形的四个色是调和的色组，也可将这些梯形或不规则四边形在色环中自由移动，可找到无限个调和色组。