网页设计色彩、UI设计与布局.ppt

网页界面设计 色彩搭配 色彩基本知识色彩对比网页色彩搭配方法 色 彩 基 本 知 识 色彩的形成 红 绿 蓝三种波长的光是自然界所有颜色的基础 光谱中的所有颜色都是由这三种光的不同强度构成 这三种光本身各自独立 其中任何一种都不能由其余两种光混合产生 所以我们把这三种颜色的光称为 色光三原色 三原色 色彩是光照射在物体上而反射到人眼的一种视觉效应 我们日常所见到的白光 实际是由红 绿 蓝三种波长的光组成 物体经光源照射 吸收和反射不同波长的红 绿 蓝光 经由人的眼睛 传到大脑形成了我们看到的各种颜色 也就是说 物体的颜色就是它们反射的光的颜色 色彩的分类 色彩的构成元素 色相色彩的相貌 类似于人名 确切地表示某种颜色色别的名称 如 中国红 军绿色等明度颜色明暗深浅表现 各种颜色的不同明度 黄色明度最高 蓝紫色最低 红色为中间明度颜色越浅明度越高颜色越深明度越低 色彩的构成元素 纯度 彩度 饱和度 色彩的纯净程度 鲜艳程序 表示颜色中含有色部份的比例纯色 白色明度越高饱和度越低纯色 黑色明度越低饱和度越低纯色 灰色明度不变饱和度越低色调 色相 明度 饱和度结合到一起 分有彩色 无彩色纯色 白色浅色调粉彩色调纯色 黑色深色调暗色调纯色 灰色浊色调浅灰色调 色相环 色相环 是以三原色为基础并把它做为主要色相 再两两混合成次要色相 两种次要色相混合 衍生而成 我们一般说的12色相环和24色相环就是如此 冷暖色系 产生于人们生活经验与直接联想同一色相中明度越高 越冷明度越低 越暖色相环暖色系 红橙黄冷色系 蓝绿紫中间色 黑白灰 同一色系 同一色相不同明度饱合度呈现现的色彩 同一色系色彩进行配色最安全配色 色相环色相关系 类似色30 60度间的色彩临近色左右相临的色彩对比色120 150度色彩差异很明显 注意颜色面积 比例 明度 饱和度上的配置 才能显现出活泼 轻快的感觉互补色180度对角位置 色彩混合 色混合是指某一色彩中混入另一种色彩 两种不同的色彩混合 可获得第三种色彩 色彩意象及传达 色彩在人们的生活中都是有丰富的感情和含义的 色彩的感觉 色彩冷暖感觉明度越高越冷如粉红深蓝清凉也与配色面积有关较小黄配冷冷较小黄配暖色暖 色彩的联想 可以是具体的 也可以想象的 因每个人生活的经历等不同产生的联想也不同 以大多数人的联想为依据 这样所产生的形象误差会比较小联想所产生的心理感觉比如冷 热 以大多数人为主 色彩的感觉 色彩轻重感觉明度越高越轻明度越低越重明度高 饱和度越低越轻明度低 饱和度越高越重冷轻 暖重女性网站轻温柔可爱男性网站重稳重可靠色彩爽朗郁闷感觉暖爽朗冷郁闷明度越高爽朗明度越低郁闷白色爽朗黑色郁闷 色彩的感觉 色彩兴奋沉积感兴奋感觉让心情沉稳暖兴奋冷沉稳明度越高越兴奋越低越沉稳饱和度越高越兴奋越低越沉稳色彩华丽朴实感饱和度越低越朴实越高越华丽色调低明度暗色调与深色调朴实高明度纯色调为主华丽色彩酸甜苦辣 色彩的感觉 色彩的酸甜苦辣酸 蓝 绿 黄 橙黄甜 黄 橙 粉红 乳白苦 棕色 黑褐色 灰黑色辣 红 黄 黄绿 绿 色彩的意向 红色是最具有视觉冲击力的色彩 暗示速度和动态 可以刺激心跳速度 加快呼吸 刺激食欲 红色的衣服使人身形显大 红色的车最容易被偷红色的具象联想火焰 鲜血 性 西红柿 西瓜瓤 太阳 红旗 口红 中国国旗 红色的正面联想激情 爱情 鲜血 能量 热心 激动 热量 力量 热情 活力 红色的负面联想侵略性 愤怒 战争 革命 残忍 不道德 危险 幼稚 卑俗 红色的文化域在非洲 红色代表死亡 在法国 红色代表雄性 在亚洲 红色代表婚姻 繁荣 快乐 在印度 红色是士兵的颜色 在南非 红色是丧服的色彩 色彩的意向 红色 热情 活泼 热闹 革命 温暖 吉祥 进取 活力 忠诚 危险 警示 引起注意 禁止等 色相 大红 桃红 玫瑰红 砖红橙色 光明 华丽 兴奋 活力 快乐 警示 提醒等 色相 大黄 柠檬黄 土黄 柳丁黄 米黄绿色 和平 宁静 环保 通畅 正确 柔和 青春 安全 理想等 色相 大绿 草绿 翠绿 橄榄绿 墨绿蓝色 专业 睿智 科技 深远 永恒 城市 朴实 寒冷 历练等 色相 湖蓝 普蓝 天蓝 深蓝 色彩的意向 紫色 高贵 神秘 优雅 魅力 傲慢 柔软 色相 正紫 耦合 贵族紫 葡萄紫 深紫白色 纯结 天真 空灵 明快 弱小 朴素 神圣 恐怖 无味等 灰色 质朴 睿智 大气 谦逊 平凡 中庸 寂寞 犹豫 消极等 色相 浅灰 中灰 深灰 老鼠灰 蓝灰黑色 神秘 严肃 崇高 坚实 诡异 黑暗 沉默 绝望 死亡 罪恶等 褐色 古朴 典雅 原始 古老 陈旧 稳重 厚重等色相 卡其 象牙白 可可 麦芽 焦炭 原木 茶色 色 彩 对 比 明度对比 明度基调 明度对比 明度基调 明度对比 明度基调 网 页 色 彩 搭 配 颜色在网站中的运用 颜色能赋予网站以意义 无论你是否打算为他们加上某种意义 颜色本身就有许多特定的印象 用户浏览网页时 颜色帮助转移用户的视线 指引用户怎么去浏览一个页面 在许多企业的网站中可以看出 颜色表达了情感和价值观 向用户展示着他们的公司是怎样的 他们所售卖的产品是怎样的 配对色的运用能改变一个网站的意义 给以柔和的蓝色为色调的 表达出平静网站配上明亮的橙色 就能让它变成让人更多感受到兴奋和趣味的网站 网页色彩搭配原理 色彩的鲜明性 网页的色彩要鲜艳 容易引人注目色彩的独特性 要有与众不同的色彩 使得大家对你的印象强烈色彩的合适性 就是说色彩和你表达的内容气氛相适合 如用粉色体现女性站点的柔性 色彩的联想性 不同色彩会产生不同的联想 蓝色想到天空 黑色想到黑夜 红色想到喜事等 选择色彩要和你网页的内涵相关联 色彩使用技巧 黑白灰色彩的应用灰色是万能色 可以根任意一种色彩搭配 对一些明度较高的网站 配以黑色 可以适当地降低明度 白色是网站用的最普遍的一种颜色 很多网站甚至留出大块的白色空间 作为网站的一个组成总部份 这就是留白艺术 很多设计性网站较多运用留白艺术 留白 给人一个遐想空间 恰当的留白对于协调页面的均衡起到相当大的作用 色彩使用技巧 确定主题色一个网站不可能单一的运用一种颜色 让人感觉单调 乏味 但是也不可能将所有的颜色都运用到网站中 让人感觉轻浮 花哨 一个网站必须有一种或两种主题色 不到于让客户迷失方向 也不至于单调 乏味 所以确定网站的主题色也是必需考虑的问题之一 色彩使用技巧 用一种色彩 这里是指先选定一种色彩 然后调整透明度或者饱合度 将色彩加深或减淡 产生新的色彩 用于网页 这样的页面看起来色彩统一 有层次感 色彩使用技巧 用两种色彩 先选定一种色彩 然后先择它的对比色 比如蓝色与黄色 这样搭配可以使整个页面色彩丰富但不花哨用一个色系 简单的来说就是一个感觉的色彩 例如淡蓝 淡黄 淡绿 或者土黄 土灰 土蓝 用黑色各一种颜色 比如 大红的字体配黑色的边框感觉很 跳 色彩使用忌讳 不要将所有颜色都用到 尽量控制在三种色彩以内背景和前文对比尽量要大 绝对不要用花纹繁复的图案作背景 以便主要文字内容根据文化背景适当的选择颜色 黄色在信仰基督教的国家是下等色 大公司的网站中颜色运用的例子 耐克 耐克常常更新他们的网站 但通常还是黑色和灰色的色调 它通常是暗 黑色显示着他们产品中的力量 留给大家他们向爱运动的顾客出售优质产品的印象 大公司的网站中颜色运用的例子 白宫 白宫的网站主要是白色和浅灰色 再加上一些蓝色和红色作强调色 白色象征着希望和自由 显露出平安和纯洁的价值 红色和蓝色当然是美国的代表色 红色代表着热情和能量 蓝色则代表着稳定与和平 大公司的网站中颜色运用的例子 亚马逊 亚马逊的网站大多是白色的 白色有着最佳的对比度和可读性 它还显露出整洁性 让用户能自由地浏览网站 以橙色和蓝色的强调色则让用户能感到安定 兴奋 也让他们期望找到最满意的采购 大公司的网站中颜色运用的例子 Verizon公司 红色是Verizon的企业品牌主色调 也是贯穿整个网站的颜色 红色有助于刺激用户的兴奋性 展示出一个出售让人兴奋和快速更新的产品的公司形象 白色背景的运用与亚马逊类似 通过一个整洁有序的界面来帮助用户阅读这个网站 大公司的网站中颜色运用的例子 百思买 百思买的网站的色调是深蓝色 显露出他们在电子市场中的稳定和实力 顾客在百思买上的大量采购使得他们需要安全感与平和感 黄色散发的快乐气氛让他们在采购时感觉到兴奋与趣味 大公司的网站中颜色运用的例子 嘉信理财 嘉信理财是一家投资公司 在不稳定的市场环境下他们需要让消费者在他们的网站上感受到平和 他们使用柔和的深蓝色调来实现这一点 并建立起一种平静 祥和的气氛 中性的棕色则是另一种帮助协调偏激的用户感受的企业色彩 橙色作为强调色 能让用户在买股票时产生兴奋感 同时也为网站带来了幸福感 大公司的网站中颜色运用的例子 道奇 道奇的网站大多是黑色系 能让网站上的图片凸显出来 他们使用一种鲜艳的红色作为强调色 黑色给网站带来力量感 在一种精致与阳刚的氛围下展示他们的产品 黑色是一种不错的颜色 它能使产品看起来珍贵 有价值 红色则表达出激情和兴奋 是希望能让消费者认为他们是从一个值得信任 质量有保障的公司购买到的车辆 色彩搭配原则 色彩的鲜明性色彩的独特性色彩的艺术性色彩搭配的合理性 网页色彩搭配方法 同种色彩搭配 同种色彩搭配是指首先选定一种色彩 然后调整其透明度和饱和度 将色彩变淡或加深 而产生新的色彩 这样的页面看起来色彩统一 具有层次感 网页色彩搭配方法 邻近色彩搭配 邻近色是指在色环上相邻的颜色 采用邻近色搭配可以里是网页避免色彩杂乱 易于达到页面和谐统一的效果 网页色彩搭配方法 对比色彩搭配 对比色可以突出重点 产生强烈的视觉效果 网页色彩搭配方法 有主色的混合色彩搭配 有主色的混合色彩搭配是指以一种颜色作为主要颜色 同色辅以其他色彩混合搭配 形成缤纷而不杂乱的搭配效果 红色系 朱红色 深红 对比色 橙红色 蓝色 配色 红色 黑色 灰色 黄色系 黄色系分析 黄色同类色分析 黄绿色调分析 黄色邻近色 黄色红色 分析 黄色配色 黄色蓝色 分析 黑色系 明度对比 黑色 白色 黑色系分析 黑色背景 黑色配色 黑色 橙色 橙色系 橙色系分析 橙色同类色分析 邻近色 黄色 橙色 橙红色 分析 橙色系对比 橙色 绿色 分析 蓝色系分析 同类色 浅蓝色 蓝色邻近配色 蓝色绿色 蓝色系强对比 蓝色红色 绿色系 绿色系分析 高纯度配色 绿色 对比色组合 邻近色配色 绿色 蓝色 对比色配色 绿色 红色 紫色系 紫色系分析 浅紫色 紫色配色 紫色 绿色 紫色配色 紫色 红色 低纯度配色 紫色 绿色 网 站 设 计 什么是UI UI的本意是用户界面 在人和机器的互动过程中 最重要的一个方面就是我们所说的界面大致界面可分为感觉 视觉 触觉 听觉等 和情感两个层次 用户界面设计的三大原则是 置界面于用户的控制之下 减少用户的记忆负担 保持界面的一致性 三大原则 用户研究 使得网站界面的设计更容易被人接受 使用和记忆 发掘用户的潜在需求 对于设计师来说就是研究如何使自己的网站页面更收浏览者的欢迎交互设计 如何使浏览者在使用网站时可以轻松自如的找到自己想要的资源界面设计 俗称为 美工 一个友好美观的界面会给人带来舒适的视觉享受 拉近人与电脑的距离 为网站创造卖点 界面构成要素 文字 文字元素作为网站内容传达的主体 文字有着其他任何元素无法取代的重要作用 图形 图形往往能引起人们的注意 并激发阅读兴趣 合理的运用图形 可以生动直观 形象地表现设计主题 视频 音频 动画 这些是界面构成中最吸引人的元素 好的多媒体元素不但可以增加网站的活力还可以有效的提高网站与浏览者之间的互动交流 三 网站界面布局 网页设计源于平面设计但又与平面设计有所区别不同 相同的是在设计中多运用平面构成的基本原理 不同的是它的大小比较固定 传载的媒体只限于电子显示器 包括手机 PDA等 这样就为设计者提出了更为苛刻的要求 一 页面尺寸 由于网页的浏览多是基于显示器实现的 所以显示器的分辨率就决定了网页设计者设计网站页面的大小 目前比较流行的显示器的尺寸为800 600 1024 768 1125 864 1280 720 1280 768 1280 960 1280 1024而目前主流设计网站页面的大小一般为600 300 760 420 995 436 原则 一般情况下宽度是一定的 但可以根据内容的多少而进行调整1 最保守而最有兼容性的一屏大小是 779 4322 最广泛的一屏大小是 1003 6003 适合目前国内的情况 一屏大小是995 436 二 视觉顺序 网页是通过视觉元素的引人注目而实现信息内容的传达 因此 设计时应该研究各种视觉造型元素之间的距离 位置 面积和视觉流程的问题 视觉总有一种自然的流动习惯 先看什么 后看什么 再看什么 平面的视觉影响力上方强于下方 左侧强于右侧 上部和中上部被称为 最佳视域 在网页设计中一些突出的信息 如主标题 每天更新的内容等通常都放在这个位置 视觉顺序 在布局设计中多使用平面的设计规律如 九分法 等 三 布局步骤 草图 简单的用画笔在白纸上将创意的大致轮廓画出来 粗略布局 将纸上的轮廓在电脑上体现出来 对画面进行分割 也可以用色块进行填充 确定好在什么地方布置什么栏目 他们的大小等