网页设计色彩、UI设计与布局（课堂PPT）

1、网页界面设计色彩搭配o色彩基本知识o色彩对比 o网页色彩搭配方法 1 色彩基本知识2色彩的形成红、绿、蓝三种波长的光是自然界所有颜色的基础，光谱 中的所有颜色都是由这三种光的不同强度构成。这三种光本身各自独立，其中任何一种都不能由其余两种光混合产生。所以我们把这三种颜色的光称为“色光三原色”“三原色”色彩是光照射在物体上而反射到人眼的一种视觉效应。我们日常所见到的白光，实际是由红、绿、蓝三种波长的光组成，物体经光源照射，吸收和反射不同波长的红、绿、蓝光，经由人的眼睛，传到大脑形成了我们看到的各种颜色，也就是说，物体的颜色就是它们反射的光的颜色。3色彩的分类4色彩的构成元素色相 色彩的相貌，类似

2、于人名，确切地表示某种颜色色别的名称。如：中国红，军绿色等明度 颜色明暗深浅表现，各种颜色的不同明度。黄色明度最高，蓝紫色最低，红色为中间明度 颜色越浅 明度越高 颜色越深 明度越低5色彩的构成元素o纯度（彩度、饱和度） 色彩的纯净程度，鲜艳程序，表示颜色中含有色部份的比例 纯色+白色 明度 越高 饱和度越低 纯色+黑色 明度越低 饱和度越低 纯色+灰色 明度不变 饱和度越低o色调：色相、明度、饱和度结合 到一起,分有彩色、无彩色 纯色+白色 浅色调 粉彩色调 纯色+黑色 深色调 暗色调 纯色+灰色 浊色调 浅灰色调6色相环o 色相环，是以三原色为基础并把它做为主要色相，再两两混合成次要色相，

3、两种次要色相混合，衍生而成（我们一般说的12色相环和24色相环就是如此）7冷暖色系o 产生于人们生活经验与直接联想同一色相中 明度越高，越冷 明度越低，越暖色相环 暖色系： 红橙黄 冷色系： 蓝绿紫 中间色：黑白灰8同一色系o 同一色相 不同明度 饱合度呈现现的色彩（同一色系色彩进行配色最安全配色）9色相环色相关系o 类似色 30-60度间的色彩o 临近色 左右相临的色彩o 对比色 120-150度色彩 差异很明显，注意颜色面积，比例，明 度，饱和度上的配置，才能显现出活泼， 轻快的感觉o 互补色 180度对角位置 10色彩混合： 色混合是指某一色彩中混入另一种色彩。两种不同的色彩混合，可获得

4、第三种色彩。色彩意象及传达： 色彩在人们的生活中都是有丰富的感情和含义的。 11 色彩的感觉o色彩冷暖感觉 明度越高 越冷 如 粉红深蓝 清凉 也与配色面积有关 较小黄配冷 冷 较小黄配暖色 暖色彩的联想，可以是具体的，也可以想象的，因每个人生活的经历等不同产生的联想也不同，以大多数人的联想为依据，这样所产生的形象误差会比较小联想所产生的心理感觉 比如冷 、热（以大多数人为主）12色彩的感觉色彩轻重感觉 明度越高 越轻 明度越低 越重 明度高，饱和度越低 越轻 明度低，饱和度越高 越重 冷轻- 暖重 女性网站 轻 温柔可爱 男性网站 重 稳重可靠色彩爽朗郁闷感觉 暖 爽朗 冷 郁闷 明度 越高

5、 爽朗 明度 越低 郁闷 白色 爽朗 黑色 郁闷 13色彩的感觉o 色彩兴奋沉积感 兴奋感觉 让心情沉稳 暖兴奋 冷 沉稳 明度越高 越兴奋 越低越沉稳 饱和度越高 越兴奋 越低越沉稳o 色彩华丽朴实感 饱和度越低越朴实 越高越华丽 色调 低明度暗色调与深 色调 朴实 高明度纯色调为主 华丽o 色彩酸甜苦辣14色彩的感觉o 色彩的酸甜苦辣 酸：蓝、绿、黄、橙黄 甜：黄、橙、粉红 、乳白 苦： 棕色、黑褐色、灰黑色 辣：红，黄、黄绿、绿15色彩的意向红色是最具有视觉冲击力的色彩；暗示速度和动态；可以刺激心跳速度、加快呼吸、刺激食欲；红色的衣服使人身形显大；红色的车最容易被偷红色的具象联想红色的具

6、象联想火焰、鲜血、性、西红柿、西瓜瓤、太阳、红旗、口红、中国国旗。红色的正面联想红色的正面联想激情、爱情、鲜血、能量、热心、激动、热量、力量、热情、活力。红色的负面联想红色的负面联想侵略性、愤怒、战争、革命、残忍、不道德、危险、幼稚、卑俗。红色的文化域红色的文化域在非洲，红色代表死亡。 在法国，红色代表雄性。 在亚洲，红色代表婚姻、繁荣、快乐。 在印度，红色是士兵的颜色。 在南非，红色是丧服的色彩。16色彩的意向红色：热情、活泼、热闹、革命、温暖、吉祥、进取、活力、忠诚、危险、警示、引起注意、禁止等。 色相：大红、桃红、玫瑰红、砖红橙色：光明、华丽、兴奋、活力、快乐、警示、提醒等。 色相：大黄

7、、柠檬黄、土黄、柳丁黄、米黄绿色：和平、宁静、环保、通畅、正确、柔和、青春、安全、理想等。 色相：大绿、草绿、翠绿、橄榄绿、墨绿蓝色：专业、睿智、科技、深远、永恒、城市 、朴实、寒冷、历练等。 色相：湖蓝、普蓝、天蓝、深蓝17色彩的意向紫色：高贵、神秘、优雅、魅力、傲慢、柔软。 色相：正紫、耦合、贵族紫、葡萄紫、深紫白色：纯结、天真、空灵、明快、弱小、朴素、神圣、恐怖、无味等。 灰色：质朴、睿智、大气、谦逊、平凡、中庸、寂寞、犹豫、消极等。 色相：浅灰、中灰、深灰、老鼠灰、蓝灰黑色：神秘、严肃、崇高、坚实、诡异、黑暗、沉默、绝望、死亡、罪恶等。褐色：古朴、典雅、原始、古老、陈旧、稳重、厚重等

8、色相：卡其、象牙白、可可、麦芽、焦炭、原木、茶色18色彩对比1920 21 22 明度对比明度基调23 明度对比明度基调24 明度对比明度基调25 网页色彩搭配26颜色在网站中的运用颜色在网站中的运用o 颜色能赋予网站以意义。无论你是否打算为他们加上某种意义，颜色本身就有许多特定的印象。用户浏览网页时，颜色帮助转移用户的视线，指引用户怎么去浏览一个页面。、o 在许多企业的网站中可以看出，颜色表达了情感和价值观，向用户展示着他们的公司是怎样的、他们所售卖的产品是怎样的。o 配对色的运用能改变一个网站的意义。给以柔和的蓝色为色调的、表达出平静网站配上明亮的橙色，就能让它变成让人更多感受到兴奋和趣味

9、的网站。27网页色彩搭配原理o 色彩的鲜明性。网页的色彩要鲜艳，容易引人注目o 色彩的独特性。要有与众不同的色彩，使得大家对你的印象强烈o 色彩的合适性。就是说色彩和你表达的内容气氛相适合。如用粉色体现女性站点的柔性。o 色彩的联想性。不同色彩会产生不同的联想。蓝色想到天空，黑色想到黑夜，红色想到喜事等，选择色彩要和你网页的内涵相关联。28色彩使用技巧o黑白灰色彩的应用 灰色是万能色，可以根任意一种色彩搭配， 对一些明度较高的网站，配以黑色，可以适当地降低明度。 白色是网站用的最普遍的一种颜色。很多网站甚至留出大块的白色空间，作为网站的一个组成总部份。这就是留白艺术。很多设 计性网站较多运用留

10、白艺术。留白，给人一个遐想空间，恰当的留白对于协调页面的均衡起到相当大的作用。 29色彩使用技巧o确定主题色 一个网站不可能单一的运用一种颜色，让人感觉单调、乏味；但是也不可能将所有的颜色都运用到网站中，让人感觉轻浮，花哨。一个网站必须有一种或两种主题色，不到于让客户迷失方向，也不至于单调、乏味。所以确定网站的主题色也是必需考虑的问题之一 30色彩使用技巧用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱合度（将色彩加深或减淡），产生新的色彩。用于网页。这样的页面看起来色彩统一，有层次感31色彩使用技巧o 用两种色彩。先选定一种色彩，然后先择它的对比色。比如蓝色与黄色。这样搭配可以使整个

11、页面色彩丰富但不花哨o 用一个色系。简单的来说就是一个感觉的色彩，例如淡蓝，淡黄，淡绿，或者土黄，土灰，土蓝。o 用黑色各一种颜色。比如：大红的字体配黑色的边框感觉很“跳”。32色彩使用忌讳o 不要将所有颜色都用到，尽量控制在三种色彩以内o 背景和前文对比尽量要大，绝对不要用花纹繁复的图案作背景，以便主要文字内容o 根据文化背景适当的选择颜色： 黄色在信仰基督教的国家是下 等色。 33大公司的网站中颜色运用的例子大公司的网站中颜色运用的例子o 耐克耐克耐克常常更新他们的网站，但通常还是黑色和灰色的色调，它通常是暗。黑色显示着他们产品中的力量，留给大家他们向爱运动的顾客出售优质产品的印象。34大

12、公司的网站中颜色运用的例子大公司的网站中颜色运用的例子o 白宫白宫白宫的网站主要是白色和浅灰色，再加上一些蓝色和红色作强调色。白色象征着希望和自由，显露出平安和纯洁的价值。红色和蓝色当然是美国的代表色，红色代表着热情和能量，蓝色则代表着稳定与和平。35大公司的网站中颜色运用的例子大公司的网站中颜色运用的例子o 亚马逊亚马逊亚马逊的网站大多是白色的，白色有着最佳的对比度和可读性。它还显露出整洁性，让用户能自由地浏览网站。以橙色和蓝色的强调色则让用户能感到安定、兴奋，也让他们期望找到最满意的采购。36大公司的网站中颜色运用的例子大公司的网站中颜色运用的例子o Verizon公司公司红色是Veriz

13、on的企业品牌主色调，也是贯穿整个网站的颜色。红色有助于刺激用户的兴奋性，展示出一个出售让人兴奋和快速更新的产品的公司形象。白色背景的运用与亚马逊类似，通过一个整洁有序的界面来帮助用户阅读这个网站。37大公司的网站中颜色运用的例子大公司的网站中颜色运用的例子o 百思买百思买百思买的网站的色调是深蓝色，显露出他们在电子市场中的稳定和实力。顾客在百思买上的大量采购使得他们需要安全感与平和感。黄色散发的快乐气氛让他们在采购时感觉到兴奋与趣味。38大公司的网站中颜色运用的例子大公司的网站中颜色运用的例子o 嘉信理财嘉信理财嘉信理财是一家投资公司，在不稳定的市场环境下他们需要让消费者在他们的网站上感受到

14、平和。他们使用柔和的深蓝色调来实现这一点，并建立起一种平静、祥和的气氛。中性的棕色则是另一种帮助协调偏激的用户感受的企业色彩。橙色作为强调色，能让用户在买股票时产生兴奋感，同时也为网站带来了幸福感。39大公司的网站中颜色运用的例子大公司的网站中颜色运用的例子o 道奇道奇道奇的网站大多是黑色系，能让网站上的图片凸显出来。他们使用一种鲜艳的红色作为强调色。黑色给网站带来力量感，在一种精致与阳刚的氛围下展示他们的产品。黑色是一种不错的颜色，它能使产品看起来珍贵、有价值。红色则表达出激情和兴奋，是希望能让消费者认为他们是从一个值得信任、质量有保障的公司购买到的车辆。40色彩搭配原则色彩搭配原则 o 色

15、彩的鲜明性 o 色彩的独特性 o 色彩的艺术性 o 色彩搭配的合理性 41网页色彩搭配方法网页色彩搭配方法 o 同种色彩搭配：同种色彩搭配是指首先选定一种色彩，然后调整其透明度和饱和度，将色彩变淡或加深，而产生新的色彩，这样的页面看起来色彩统一，具有层次感。 42网页色彩搭配方法网页色彩搭配方法o 邻近色彩搭配 ：邻近色是指在色环上相邻的颜色 ，采用邻近色搭配可以里是网页避免色彩杂乱，易于达到页面和谐统一的效果。43网页色彩搭配方法网页色彩搭配方法o对比色彩搭配 ：对比色可以突出重点，产生强烈的视觉效果。 44网页色彩搭配方法网页色彩搭配方法o 有主色的混合色彩搭配 ：有主色的混合色彩搭配是指

16、以一种颜色作为主要颜色，同色辅以其他色彩混合搭配，形成缤纷而不杂乱的搭配效果。 45红色系红色系o 朱红色朱红色46深红深红47对比色：橙红色对比色：橙红色+蓝色蓝色 48配色：红色配色：红色+黑色黑色+灰色灰色 49黄色系黄色系 o 黄色系分析黄色系分析 50黄色同类色分析黄色同类色分析 51黄绿色调分析黄绿色调分析 52黄色邻近色（黄色黄色邻近色（黄色 红色）分析红色）分析 53黄色配色（黄色黄色配色（黄色 蓝色）分析蓝色）分析 54黑色系黑色系o 明度对比：黑色明度对比：黑色+ +白色白色 55黑色系分析：黑色背景黑色系分析：黑色背景56黑色配色：黑色黑色配色：黑色+橙色橙色57橙色系橙

17、色系 o 橙色系分析橙色系分析 58橙色同类色分析：橙色同类色分析：59邻近色（黄色邻近色（黄色+橙色橙红色）分析橙色橙红色）分析 60 橙色系对比（橙色橙色系对比（橙色+绿色）分析绿色）分析 61蓝色系分析蓝色系分析o 同类色：浅蓝色同类色：浅蓝色 62蓝色邻近配色：蓝色绿色蓝色邻近配色：蓝色绿色 63蓝色系强对比：蓝色红色蓝色系强对比：蓝色红色64绿色系绿色系 o 绿色系分析绿色系分析 65高纯度配色：绿色高纯度配色：绿色+对比色组合对比色组合66邻近色配色：绿色邻近色配色：绿色+蓝色蓝色67对比色配色：绿色对比色配色：绿色+红色红色68紫色系紫色系 o 紫色系分析：浅紫色紫色系分析：浅紫

18、色 69紫色配色：紫色绿色紫色配色：紫色绿色70紫色配色：紫色紫色配色：紫色+红色红色71低纯度配色：紫色低纯度配色：紫色+绿色绿色72网站设计73什么是 UI o UI的本意是用户界面，在人和机器的互动过程中，最重要的一个方面就是我们所说的界面大致界面可分为感觉（视觉、触觉、听觉等）和情感两个层次。o 用户界面设计的三大原则是：置界面于用户的控制之下；减少用户的记忆负担；保持界面的一致性。74三大原则o 用户研究：使得网站界面的设计更容易被人接受、使用和记忆；发掘用户的潜在需求。对于设计师来说就是研究如何使自己的网站页面更收浏览者的欢迎 o 交互设计：如何使浏览者在使用网站时可以轻松自如的找

19、到自己想要的资源o 界面设计 ：俗称为“美工”。一个友好美观的界面会给人带来舒适的视觉享受，拉近人与电脑的距离，为网站创造卖点。75界面构成要素o 文字：文字元素作为网站内容传达的主体，文字有着其他任何元素无法取代的重要作用。o 图形：图形往往能引起人们的注意，并激发阅读兴趣，合理的运用图形，可以生动直观、形象地表现设计主题。o 视频、音频、动画：。这些是界面构成中最吸引人的元素，好的多媒体元素不但可以增加网站的活力还可以有效的提高网站与浏览者之间的互动交流。 76三、网站界面布局三、网站界面布局o 网页设计源于平面设计但又与平面设计有所区别不同，相同的是在设计中多运用平面构成的基本原理，不同

20、的是它的大小比较固定，传载的媒体只限于电子显示器（包括手机、PDA等），这样就为设计者提出了更为苛刻的要求。77（一）页面尺寸（一）页面尺寸o 由于网页的浏览多是基于显示器实现的，所以显示器的分辨率就决定了网页设计者设计网站页面的大小，目前比较流行的显示器的尺寸为o 800*600、1024*768、1125*864、1280*720、1280*768、1280*960、1280*1024o 而目前主流设计网站页面的大小一般为o 600*300、760*420、995*436 78 有效可视区域（单位：有效可视区域（单位：px）屏幕一二三800600102476812801024IE6.077

21、9(+21) 432(+168) 1003(+21) 600(+168) 1259(+21) 856(+168) IE7.0779(+21) 452(+148) 1003(+21) 620(+148) 1259(+21) 876(+148) Firefox2.0783(+17) 417(+183) 1007(+17) 585(+183) 1263(+17) 841(+183) Opera9.0781(+19) 461(+139) 1005(+19) 629(+139) 1261(+19) 885(+139) 79原则o 一般情况下宽度是一定的，但可以根据内容的多少而进行调整o 1. 最保守而最

22、有兼容性的一屏大小是：779432 o 2. 最广泛的一屏大小是：1003600 o 3. 适合目前国内的情况，一屏大小是995*43680（二）视觉顺序o 网页是通过视觉元素的引人注目而实现信息内容的传达，因此，设计时应该研究各种视觉造型元素之间的距离、位置、面积和视觉流程的问题。视觉总有一种自然的流动习惯，先看什么，后看什么，再看什么。平面的视觉影响力上方强于下方，左侧强于右侧。上部和中上部被称为“最佳视域”，在网页设计中一些突出的信息，如主标题、每天更新的内容等通常都放在这个位置。81视觉顺序：在布局设计中多使用平面的设计规律如“九分法”等82（三）布局步骤o 草图草图：简单的用画笔在白纸上将创意的大致轮廓画出来。o 粗略布局粗略布局：将纸上的轮廓在电脑上体现出来，对画面进行分割，也可以用色块进行填充，确定好