网页界面设计—色彩搭配、UI布局设计
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
色彩华丽朴实感 饱和度越低越朴实 越高越华丽 色调 低明度暗色调与深 色调 朴实 高明度纯色调为主 华丽
色彩酸甜苦辣
色彩的感觉
色彩的酸甜苦辣 酸：蓝、绿、黄、橙黄 甜：黄、橙、粉红 、乳白 苦： 棕色、黑褐色、灰黑色 辣：红，黄、黄绿、绿
色彩的意向
红色是最具有视觉冲击力的色彩；暗示速度和动态；可以刺激心跳速度、 加快呼吸、刺激食欲；红色的衣服使人身形显大；红色的车最容易被偷
冷暖色系
产生于人们生活经验与直接联想
同一色相中 明度越高，越冷 明度越低，越暖
色相环 暖色系： 红橙黄 冷色系： 蓝绿紫 中间色：黑白灰
同一色系
同一色相 不同明度 饱合度呈现现的色 彩
（同一色系色彩进行配色最安全配色）
色相环色相关系
类似色
30-60度间的色彩
临近色
左右相临的色彩
色彩的独特性。要有与众不同的色彩，使得大 家对你的印象强烈
色彩的合适性。就是说色彩和你表达的内容气 氛相适合。如用粉色体现女性站点的柔性。
色彩的意向
红色：热情、活泼、热闹、革命、温暖、吉祥、进取、活 力、忠诚、危险、警示、引起注意、禁止等。 色相：大红、桃红、玫瑰红、砖红
橙色：光明、华丽、兴奋、活力、快乐、警示、提醒等。 色相：大黄、柠檬黄、土黄、柳丁黄、米黄
绿色：和平、宁静、环保、通畅、正确、柔和、青春、安 全、理想等。 色相：大绿、草绿、翠绿、橄榄绿、墨绿
在许多企业的网站中可以看出，颜色表达了情感和 价值观，向用户展示着他们的公司是怎样的、他们 所售卖的产品是怎样的。
配对色的运用能改变一个网站的意义。给以柔和的 蓝色为色调的、表达出平静网站配上明亮的橙色， 就能让它变成让人更多感受到兴奋和趣味的网站。
网页色彩搭配原理
色彩的鲜明性。网页的色彩要鲜艳，容易引人 注目
红色的具象联想 火焰、鲜血、性、西红柿、西瓜瓤、太阳、红旗、口红、中国国旗。
红色的正面联想 激情、爱情、鲜血、能量、热心、激动、热量、力量、热情、活力。
红色的负面联想 侵略性、愤怒、战争、革命、残忍、不道德、危险、幼稚、卑俗。
红色的文化域 在非洲，红色代表死亡。 在法国，红色代表雄性。 在亚洲，红色代表婚姻、繁荣、快乐。 在印度，红色是士兵的颜色。 在南非，红色是丧服的色彩。
对比色
120-150度色彩
差异很明显，注意颜色面 积，比例，明
度，饱和度上的配置，才 能显现出活泼，
轻快的感觉
互补色
180度对角位置
色彩混合： 色混合是指某一色彩中混入另一种色彩。两种不同的色彩混合，可获
得第三种色彩。
色彩意象及传达： 色彩在人们的生活中都是有丰富的感情和含义的。
色彩的感觉
黑色：神秘、严肃、崇高、坚实、诡异、黑暗、 沉默、绝望、死亡、罪恶等。
褐色：古朴、典雅、原始、古老、陈旧、稳重、 厚重等 色相：卡其、象牙白、可可、麦芽、焦炭、原 木、茶色
色彩 对 比
明度基调
明度对比
明度基调
明度对比
明度基调
明度对比
网页色彩 搭 配
颜色在网站中的运用
颜色能赋予网站以意义。无论你是否打算为他们加 上某种意义，颜色本身就有许多特定的印象。用户 浏览网页时，颜色帮助转移用户的视线，指引用户 怎么去浏览一个页面。、
红、绿、蓝三种波长的光是自然界所有颜色的基 础，光谱 中的所有颜色都是由这三种光的不同强 度构成。这三种光本身各自独立，其中任何一种 都不能由其余两种光混合产生。所以我们把这三 种颜色的光称为“色光三原色”“三原色”
色彩的分类
色彩的构成元素
色相 色彩的相貌，类似于人名，确切地表示某种颜
色色别的名称。如：中国红，军绿色等
网页界面设计—色彩搭配、UI布局 设计
网页界面设计—色彩搭配
色彩基本知识 色彩对比 网页色彩搭配方法
色彩基本 知 识
wk.baidu.com彩的形成
色彩是光照射在物体上而反射到人眼的一种视觉效应。 我们日常所见到的白光，实际是由红、绿、蓝三种波长的光组成， 物体经光源照射，吸收和反射不同波长的红、绿、蓝光，经由人 的眼睛，传到大脑形成了我们看到的各种颜色，也就是说，物体 的颜色就是它们反射的光的颜色。
色彩的感觉
色彩轻重感觉 明度越高 越轻 明度越低 越重 明度高，饱和度越低 越轻 明度低，饱和度越高 越重 冷轻- 暖重 女性网站 轻 温柔可爱 男性网站 重 稳重可靠
色彩爽朗郁闷感觉 暖 爽朗 冷 郁闷 明度 越高 爽朗 明度 越低 白色 爽朗 黑色 郁闷
郁闷
色彩的感觉
色彩兴奋沉积感 兴奋感觉 让心情沉稳 暖兴奋 冷 沉稳 明度越高 越兴奋 越低越沉稳 饱和度越高 越兴奋 越低越沉稳
色彩的联想，可以是具体的，也可以想象的，因每个人生活的经历等不同 产生的联想也不同，以大多数人的联想为依据，这样所产生的形象误差会 比较小 联想所产生的心理感觉 比如冷 、热（以大多数人为主）
色彩冷暖感觉 明度越高 越冷 明度越低 越暖
如 粉红<鲜红 温暖 如 浅蓝>深蓝 清凉
也与配色面积有关 较小黄配冷 冷 较小黄配暖色 暖
明度 颜色明暗深浅表现，各种颜色的不同明度。黄
色明度最高，蓝紫色最低，红色为中间明度
颜色越浅 明度越高 颜色越深 明度越低
色彩的构成元素
纯度（彩度、饱和度） 色彩的纯净程度，鲜艳程序，表示颜色中含有色部份的比例
纯色+白色 明度 越高 饱和度越低 纯色+黑色 明度越低 饱和度越低 纯色+灰色 明度不变 饱和度越低
蓝色：专业、睿智、科技、深远、永恒、城市 、朴实、 寒冷、历练等。 色相：湖蓝、普蓝、天蓝、深蓝
色彩的意向
紫色：高贵、神秘、优雅、魅力、傲慢、柔软。 色相：正紫、耦合、贵族紫、葡萄紫、深紫
白色：纯结、天真、空灵、明快、弱小、朴素、 神圣、恐怖、无味等。
灰色：质朴、睿智、大气、谦逊、平凡、中庸、 寂寞、犹豫、消极等。 色相：浅灰、中灰、深灰、老鼠灰、蓝灰
色调：色相、明度、饱和度结合 到一起,分有彩色、无彩色
纯色+白色 浅色调 粉彩色调 纯色+黑色 深色调 暗色调 纯色+灰色 浊色调 浅灰色调
色相环
色相环，是以三原色为基础并把它做为 主要色相，再两两混合成次要色相，两 种次要色相混合，衍生而成（我们一般 说的12色相环和24色相环就是如此）
色彩酸甜苦辣
色彩的感觉
色彩的酸甜苦辣 酸：蓝、绿、黄、橙黄 甜：黄、橙、粉红 、乳白 苦： 棕色、黑褐色、灰黑色 辣：红，黄、黄绿、绿
色彩的意向
红色是最具有视觉冲击力的色彩；暗示速度和动态；可以刺激心跳速度、 加快呼吸、刺激食欲；红色的衣服使人身形显大；红色的车最容易被偷
冷暖色系
产生于人们生活经验与直接联想
同一色相中 明度越高，越冷 明度越低，越暖
色相环 暖色系： 红橙黄 冷色系： 蓝绿紫 中间色：黑白灰
同一色系
同一色相 不同明度 饱合度呈现现的色 彩
（同一色系色彩进行配色最安全配色）
色相环色相关系
类似色
30-60度间的色彩
临近色
左右相临的色彩
色彩的独特性。要有与众不同的色彩，使得大 家对你的印象强烈
色彩的合适性。就是说色彩和你表达的内容气 氛相适合。如用粉色体现女性站点的柔性。
色彩的意向
红色：热情、活泼、热闹、革命、温暖、吉祥、进取、活 力、忠诚、危险、警示、引起注意、禁止等。 色相：大红、桃红、玫瑰红、砖红
橙色：光明、华丽、兴奋、活力、快乐、警示、提醒等。 色相：大黄、柠檬黄、土黄、柳丁黄、米黄
绿色：和平、宁静、环保、通畅、正确、柔和、青春、安 全、理想等。 色相：大绿、草绿、翠绿、橄榄绿、墨绿
在许多企业的网站中可以看出，颜色表达了情感和 价值观，向用户展示着他们的公司是怎样的、他们 所售卖的产品是怎样的。
配对色的运用能改变一个网站的意义。给以柔和的 蓝色为色调的、表达出平静网站配上明亮的橙色， 就能让它变成让人更多感受到兴奋和趣味的网站。
网页色彩搭配原理
色彩的鲜明性。网页的色彩要鲜艳，容易引人 注目
红色的具象联想 火焰、鲜血、性、西红柿、西瓜瓤、太阳、红旗、口红、中国国旗。
红色的正面联想 激情、爱情、鲜血、能量、热心、激动、热量、力量、热情、活力。
红色的负面联想 侵略性、愤怒、战争、革命、残忍、不道德、危险、幼稚、卑俗。
红色的文化域 在非洲，红色代表死亡。 在法国，红色代表雄性。 在亚洲，红色代表婚姻、繁荣、快乐。 在印度，红色是士兵的颜色。 在南非，红色是丧服的色彩。
对比色
120-150度色彩
差异很明显，注意颜色面 积，比例，明
度，饱和度上的配置，才 能显现出活泼，
轻快的感觉
互补色
180度对角位置
色彩混合： 色混合是指某一色彩中混入另一种色彩。两种不同的色彩混合，可获
得第三种色彩。
色彩意象及传达： 色彩在人们的生活中都是有丰富的感情和含义的。
色彩的感觉
黑色：神秘、严肃、崇高、坚实、诡异、黑暗、 沉默、绝望、死亡、罪恶等。
褐色：古朴、典雅、原始、古老、陈旧、稳重、 厚重等 色相：卡其、象牙白、可可、麦芽、焦炭、原 木、茶色
色彩 对 比
明度基调
明度对比
明度基调
明度对比
明度基调
明度对比
网页色彩 搭 配
颜色在网站中的运用
颜色能赋予网站以意义。无论你是否打算为他们加 上某种意义，颜色本身就有许多特定的印象。用户 浏览网页时，颜色帮助转移用户的视线，指引用户 怎么去浏览一个页面。、
红、绿、蓝三种波长的光是自然界所有颜色的基 础，光谱 中的所有颜色都是由这三种光的不同强 度构成。这三种光本身各自独立，其中任何一种 都不能由其余两种光混合产生。所以我们把这三 种颜色的光称为“色光三原色”“三原色”
色彩的分类
色彩的构成元素
色相 色彩的相貌，类似于人名，确切地表示某种颜
色色别的名称。如：中国红，军绿色等
网页界面设计—色彩搭配、UI布局 设计
网页界面设计—色彩搭配
色彩基本知识 色彩对比 网页色彩搭配方法
色彩基本 知 识
wk.baidu.com彩的形成
色彩是光照射在物体上而反射到人眼的一种视觉效应。 我们日常所见到的白光，实际是由红、绿、蓝三种波长的光组成， 物体经光源照射，吸收和反射不同波长的红、绿、蓝光，经由人 的眼睛，传到大脑形成了我们看到的各种颜色，也就是说，物体 的颜色就是它们反射的光的颜色。
色彩的感觉
色彩轻重感觉 明度越高 越轻 明度越低 越重 明度高，饱和度越低 越轻 明度低，饱和度越高 越重 冷轻- 暖重 女性网站 轻 温柔可爱 男性网站 重 稳重可靠
色彩爽朗郁闷感觉 暖 爽朗 冷 郁闷 明度 越高 爽朗 明度 越低 白色 爽朗 黑色 郁闷
郁闷
色彩的感觉
色彩兴奋沉积感 兴奋感觉 让心情沉稳 暖兴奋 冷 沉稳 明度越高 越兴奋 越低越沉稳 饱和度越高 越兴奋 越低越沉稳
色彩的联想，可以是具体的，也可以想象的，因每个人生活的经历等不同 产生的联想也不同，以大多数人的联想为依据，这样所产生的形象误差会 比较小 联想所产生的心理感觉 比如冷 、热（以大多数人为主）
色彩冷暖感觉 明度越高 越冷 明度越低 越暖
如 粉红<鲜红 温暖 如 浅蓝>深蓝 清凉
也与配色面积有关 较小黄配冷 冷 较小黄配暖色 暖
明度 颜色明暗深浅表现，各种颜色的不同明度。黄
色明度最高，蓝紫色最低，红色为中间明度
颜色越浅 明度越高 颜色越深 明度越低
色彩的构成元素
纯度（彩度、饱和度） 色彩的纯净程度，鲜艳程序，表示颜色中含有色部份的比例
纯色+白色 明度 越高 饱和度越低 纯色+黑色 明度越低 饱和度越低 纯色+灰色 明度不变 饱和度越低
蓝色：专业、睿智、科技、深远、永恒、城市 、朴实、 寒冷、历练等。 色相：湖蓝、普蓝、天蓝、深蓝
色彩的意向
紫色：高贵、神秘、优雅、魅力、傲慢、柔软。 色相：正紫、耦合、贵族紫、葡萄紫、深紫
白色：纯结、天真、空灵、明快、弱小、朴素、 神圣、恐怖、无味等。
灰色：质朴、睿智、大气、谦逊、平凡、中庸、 寂寞、犹豫、消极等。 色相：浅灰、中灰、深灰、老鼠灰、蓝灰
色调：色相、明度、饱和度结合 到一起,分有彩色、无彩色
纯色+白色 浅色调 粉彩色调 纯色+黑色 深色调 暗色调 纯色+灰色 浊色调 浅灰色调
色相环
色相环，是以三原色为基础并把它做为 主要色相，再两两混合成次要色相，两 种次要色相混合，衍生而成（我们一般 说的12色相环和24色相环就是如此）