网页媒体设计 莫新平/2014年10月 52887452@qq.com.

Presentation on theme: "网页媒体设计 莫新平/2014年10月 52887452@qq.com."— Presentation transcript:

1 网页媒体设计 莫新平/2014年10月

2 网站视觉 网页版面布局 网页色彩设计 网站的风格 美的原则

3 网页色彩设计 一个网页的解剖 一个Web页面的元素是一样的器官；他们是至关重要的一个正确的功能和美观的网页。

4 网页色彩设计 标志 你的标志是你的身份和品牌。为标志的最常见的位置是在标题，左对齐。我们从左至右，从上到下，所以你的标志，将最有可能被你的访问者看的第一个元素。

5 导航 页面导航是最重要的元素之一；你的访客需要使用你的网站。它应该很容易找到和使用，这就是为什么它几乎总是位于页眉或至少在网页的顶部附近。有时导航类型用于高含量的网站。 导航类型： 水平：一系列环节内联显示，通常被称为“导航”。 垂直：一系列链接显示为一个垂直堆叠，通常被称为“菜单”。

6 网页色彩设计 主要内容 每个人都知道（或应该），内容是国王！当人们访问你的网站，这是他们想看的主要元素。它应该是一个Web页面的焦点，所以游客找到他们所寻找的快。

7 网页色彩设计 侧边栏 侧边栏是你的第二内容，如广告，网站搜索的元，订阅链接（RSS，推特，电子邮件，等等），联系方式，等。此元素不需要很多网站虽然使用它。这是最常见的右对齐，但可以左对齐或两个（两个边栏）只要不扰乱主要内容的浏览。网站使用水平和垂直导航栏，往往与垂直导航元素代替。

8 页脚 一个页面时，应始终使用脚注来让你的访客知道他们已经到了你的网页的完成。如页眉，页脚并不真的是一个特定的元素更是一个含有部分。在你的页脚将版权，法律和主要的联系方式。包括几个链接到你的站点如页面，最最重要的部分的主页，联系页面，这是一个好主意，等一些网站使用这个区域提供一些相关材料或者其他重要信息。

9 暗红（#cc3300）跟草绿（#99cc00）

10 暗蓝（#0066cc）跟橙色（#ff9933）

11 网页色彩设计 纯度，指色彩的鲜艳程度，纯度高的色彩纯，鲜亮。纯度底的色彩暗淡，含灰色。
色环。将色彩按“红->黄->绿->蓝->红”依次过渡渐变，就可以得到一个色彩环。 色环的两端是暖色和寒色，当中是中型色。 红.橙.橙黄.黄.黄绿.绿.青绿.蓝绿.蓝.蓝紫.紫.紫红.红

12

13 网页色彩设计 相近色：色环中相邻的三种颜色。如黄绿色，黄色和桔黄色。相近色的搭配给人的视觉效果很舒适，很自然。所以相近色在网站设计中极为常用。

14

15

16 网页色彩设计 互补色，色环中相对的两种色彩。如亮绿色跟紫色，另外如红色跟绿色，蓝色和橙色等。对互补色，调整一下补色的亮度，有时候是一种很好的搭配。就拿蓝色跟橙色来打个比方吧，调整了蓝色的亮度以后其搭配效果是不是更好呢？补色在网站设计中用得也极为普遍。

17 网页色彩设计 暖色，如黄色，橙色，红色，紫色等都属于暖色系列。暖色跟黑色调和可以达到很好的效果。暖色一般应用于购物类网站，电子商务网站，儿童类网站等等，用以体现商品的琳琅满目，儿童类网站的活泼，温馨等等效果。

18

19

20 冷色，如绿色，蓝色，蓝紫色等等都属于冷色系列。冷色一般跟白色调和可以达到一种很好的效果。冷色一般应用于一些高科技，游戏类网站，主要表达严肃，稳重等效果。

21

22

23 网页色彩设计 色彩的心理感觉。不同的颜色会给浏览者不同的心理感受。
红色——是一种激奋的色彩。刺激效果，能使人产生冲动，愤怒，热情，活力的感觉。 绿色——介于冷暖两中色彩的中间，显得和睦，宁静，健康，安全的感觉。 它和金黄，淡白搭配，可以产生优雅，舒适的气氛。

24 绿色和淡白

25 网页色彩设计 橙色——也是一种激奋的色彩，具有轻快，欢欣，热烈，温馨，时尚的效果。 黄色——具有快乐，希望，智慧和轻快的个性，它的明度最高。
蓝色——是最具凉爽，清新，专业的色彩。 它和白色混合，能体现柔顺，淡雅，浪漫的气氛。 白色——具有洁白，明快，纯真，清洁的感受。

26 网页色彩设计 黑色——具有深沉，神秘，寂静，悲哀，压抑的感受。 灰色——具有中庸，平凡，温和，谦让，中立和高雅的感觉。
每种色彩在饱和度，透明度上略微变化就会产生不同的感觉。以绿色为例，黄绿色有青春，旺盛的视觉意境，而蓝绿色则显得幽宁，阴深。

27 网页色彩设计 色彩均衡，网站让人看上去舒适，协调，除了文字，图片等内容的合理排版，色彩的均衡也是相当重要的一个部分。比如一个网站不可能单一的运用一种颜色，所以色彩的均衡问题是设计者必须要考虑的问题。色彩的均衡，包括色彩的位置，每种色彩所占的比例，面积等等。比如鲜艳明亮的色彩面积应小一点，让人感觉舒适，不刺眼。这就是一种均衡的色彩搭配。

28 色彩均衡

29 网页色彩设计 网页制作用彩色还是非彩色好呢？根据专业的研究机构研究表明：彩色的记忆效果是黑白的3.5倍。也就是说，在一般情况下，彩色页面较完全黑白页面更加吸引人。 通常的做法是：主要内容文字用非彩色（黑色），边框，背景，图片用彩色。这样页面整体不单调，看主要内容也不会眼花。

30

31

32 网页色彩设计 （二）色彩搭配的基本知识 1、非彩色的搭配 黑白是最基本和最简单的搭配，白字黑底，黑底白字都非常清晰明了。
灰色是万能色，可以和任何彩色搭配，也可以帮助两种对立的色彩和谐过渡。如果实在找不出合适的色彩，那么用灰色试试，效果不会太差。

33 网页色彩设计 2、网页色彩搭配的原理 （1）色彩的鲜明性。网页的色彩要鲜艳，容易引人注目。
（2）色彩的独特性。要有与众不同的色彩，使得大家对你的印象强烈。 （3）色彩的合适性。就是说色彩和你表达的内容气氛相适合。如用粉色体现女性站点的柔性。 （4）色彩的联想性。不同色彩会产生不同的联想，蓝色想到天空，黑色想到黑夜，红色想到喜事等，选择色彩要和你网页的内涵相关联。

34 网页色彩设计 3、网页色彩掌握的过程 随着网页制作经验的积累，用色有这样的一个趋势：单色->五彩缤纷->标准色->单色。一开始因为技术和知识缺乏，只能制作出简单的网页，色彩单一；在有一定基础和材料后，希望制作一个漂亮的网页，将自己收集的最好的图片，最满意色彩堆砌在页面上；但是时间一长，却发现色彩杂乱，没有个性和风格；第三次重新定位自己的网站，选择好切合自己的色彩，推出的站点往往比较成功；当最后设计理念和技术达到顶峰时，则又返朴归真，用单一色彩甚至非彩色就可以设计出简洁精美的站点。

35

36 网页色彩设计 网页色彩搭配的技巧 （1）用一种色彩
这里是指先选定一种色彩，然后调整透明度或者饱和度，（说得通俗些就是将色彩变淡或则加深），产生新的色彩，用于网页。这样的页面看起来色彩统一，有层次感。

37

38 （2）用两种色彩 先选定一种色彩，然后选择它的对比色如用蓝色和黄色，整个页面色彩丰富但不花稍。

39 网页色彩设计 （3）用一个色系 用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。

40 （4）用黑色和一种彩色。比如大红的字体配黑色的边框感觉很“跳”。

41 在网页配色中，忌讳的是： （1）不要将所有颜色都用到，尽量控制在三种色彩以内。 （2）背景和前文的对比尽量要大，不要用花纹繁杂的图案作背景，以便突出主要文字内容。

42 网页色彩设计 （三）页面各要素颜色搭配 1、 背景与文字
如果一个网站用了背景颜色，必须要考虑到背景颜色的用色，与前景文字的搭配等问题。一般的网站侧重的是文字，所以背景可以选择纯度或者明度较低的色彩，文字用较为突出的亮色。让人一目了然。 当然，有些网站为了让浏览者对网站留有深刻的印象，他在背景上作文章。比如一个空白页的某一个部分用了很亮的一个大色块，是不是让你豁然开朗呢！此时他为了吸引浏览者的视线，突出的是背景，所以文字就要显得暗一些，这样文字才能跟背景分离开来，便于浏览者阅读文字。

43

44 网页色彩设计 2、 LOGO和BANNER LOGO和BANNER是宣传网站最重要的部分之一，所以这两个部分一定要在页面上突迎而出。怎样做到这一点呢？将LOGO和BANNER做的鲜亮一些，也就是色彩方面跟网页的主题色分离开来。有时候为了更突出，也可以使用与主题色相反的颜色。

45

46

47

48 网页色彩设计 3、 导航，小标题 导航，小标题是网站的指路灯。浏览者要在网页间跳转，要了解网站的结构，网站的内容，都必须通过导航或者页面中的一些小标题。所以我们可以使用稍微具有跳跃性的色彩，吸引浏览者的视线，让他们感觉网站清晰，明了，层次分明。想往哪里走都不会迷失方向。

49 网页色彩设计 4、 链接颜色设置 一个网站不可能只是单一的一页，所以文字与图片的链接是网站中不可缺少的一部分。这里特别指出文字的链接，因为链接区别于文字，所以链接的颜色不能跟文字的颜色一样。现代人的生活节奏相当快，不可能浪费太多的时间在寻找你网站的链接上。设置了独特的链接颜色，让人感觉他的独特性，自然而然好奇心必然趋使他移动鼠标，点击鼠标。

50 版面布局遵循的原则 （1）正常平衡，亦称“匀称”。多指左右、上下对照形式，主要强调秩序，能达到安定诚实、信赖的效果。
（2）异常平衡，即非对照形式，但也要平衡和韵律，当然都是不均衡的，此种布局能达到强调性、不安性、高注目性的效果。 （3）对比，所谓对比是不仅利用色彩、色调等技巧来做表现，在内容上也可涉及古与今、新与旧等对比。

51 异常平衡

52 版面布局遵循的原则 （4）凝视所谓凝视是利用页面中人物视线，使浏览者仿照跟随的心理，以达到注视页面的效果。
（5）空白，空白有两种作用，一方面对其他网站表示突出卓越，另一方面也表示网页品位的优越感，这种表现方法对体现网页的格调十分有效。 （6）尽量用图片解说，对不能用语言说服、或用语言无法表达的情感，特别有效。图片解说的内容可以传达给浏览者的更多的心理因素。

53 凝视

54 空白

55 空白

56 网站的风格 风格是抽象的。是指站点的整体形象给浏览者的综合感受。
这个“整体形象”包括站点的CI，Corporate Identity（标志，色彩，字体，标语），版面布局，浏览方式，交互性，文字，语气，内容价值，存在意义，站点荣誉等等诸多因素。如：我们觉得网易是平易近人的，迪斯尼是生动活泼的，IBM是专业严肃的，这些都是网站给人们留下的不同感受。 风格是独特的，是站点不同于其他网站的地方。可能是色彩、技术、交互方式等能让浏览者明确分辨出这是你的网站独有的。 风格是有人性的。通过网站的外表如内容、文字、交流可以概括出一个站点的个性可能是温文儒雅、执著热情、是活泼易变、是放任不羁等。 有风格的网站与普通网站的区别在于普通网站你看到的只是堆砌在一起的信息，你只能用理性的感受来描述，比如信息量大小，浏览速度快慢。但你浏览过有风格的网站后你能有更深一层的感性认识，比如站点有品位，和蔼可亲，是老师，是朋友。其实风格就是一句话：与众不同！

57 网站的风格 体现风格的一些参考： （1）将你的标志LOGO，尽可能的出现在每个页面上。或者页眉，或者页脚，或则背景。
（2）突出你的标准色彩。文字的链接色彩，图片的主色彩，背景色，边框等色彩尽量使用与标准色彩一致的色彩。 （3）突出你的标准字体。在关键的标题，菜单，图片里使用统一的标准字体。

58 网站的风格 （4）想一条朗朗上口宣传标语。把它做在你的banner里，或者放在醒目的位置，告诉大家你的网站的特色是……
（5）使用统一的语气和人称。即使是多个人合作维护，也要让读者觉得是同一个人写的。 （6）使用统一的图片处理效果。比如，阴影效果的方向，厚度，模糊度都必须一样。 （7）创造一个你的站点特有的符号或图标。虽然很简单的一个变化，却给人与众不同的感觉。 （8）用自己设计的花边，线条，点。

59 美的原则 什么是美呢? 美的事物应该具备什么条件呢?
根据人类美感的共通性可以定出十个美的原则：连续、渐变、对称、对比、比例、平衡、调和、律动、统一、完整。

60 美的原则 ﹝一﹞连续 「连续」是一种没有开始、没有终结、没有边缘的严谨性秩序排列，它只是反复的一种特殊情形，因此有规律的反复并不一定能产生连续。「连续」是无限地扩张，它可超越任何架框限制。

61

62 美的原则 ﹝二﹞渐变 渐变就是逐渐的改变，其有一定的秩序与规律。渐变除形状渐变外，尚有大小渐变、色彩渐变、位置渐变和方向渐变等等，均可单独或混合运用。 任何构成元素之渐变，都有其开始与终结，或由一方开始，经渐变又回复原来的循环现象。例如形状渐变，可从某一形状开始，逐渐变化成为另一形状，或由另一形状又逐步回复到某一形状。无论是开始或终结，在渐变的设计中均可成为设计上的焦点，且在开始与终结的整个重复过程中，均会造成节奏感。 渐变形成的方式可由上而下、由左而右、或由中央发射、或作多元化的发展。 渐变的表现形式包括： ﹝1﹞自然形象之渐变、﹝2﹞形状之渐变、﹝3﹞大小之渐变、﹝4﹞位置之渐变、﹝5﹞方向之渐变、﹝6﹞色彩之渐变。

63

64 美的原则 ﹝三﹞对称 视觉上，以一个点或一条线为基准，上下或左右看起来相等的形体，称为对称。对称具有相称、均齐、均整的意思。左右对称的形体向来都被认为是安定且具有机能的。 对称的表现形式包括： ﹝1﹞线对称、﹝2﹞点对称、﹝3﹞感觉对称。 通常对称的图形具有单纯简洁的美感，以及静态的安定感，但易流于单调、呆板。一般来说，单纯的对称图形具有大方、强力的性格；细密的对称图形则能增加作品的充实感。许多商品设计即运用此特性而设计。

65 美的原则 ﹝四﹞对比 将相对的要素配置一起，相互比较，以形成二种抗拒的紧张状态，称为对比。这种造成相对排斥性质的要素，即一般所谓的对比要素。
对比要素包含的范围非常广泛，举凡造形、色彩、质感、方向、面积等均属之。圆形、三角形、方形是属于造形的对比，例如红砖、金砖两者具有相同的造形，而其质感因明显的不同，具有对比的性质。 对比现象的强弱与否，依赖对比要素的配置关系而定。一般而言，不同的要素结合在一起，彼此刺激，会产生对比的现象，使强者更强、弱者更弱、大者更大、小者愈小。亦即经由对比的关系可以增强个别要素所具有的特性。 对比的表现形式包括： ﹝1﹞线形的对比、﹝2﹞形状的对比、﹝3﹞份量的对比、﹝4﹞明度的对比、﹝5﹞彩度的对比、﹝6﹞色相的对比、﹝7﹞质地的对比、﹝8﹞动态的对比、﹝9﹞位置的对比、﹝10﹞其它的对比。

66

67 在造型上所谓的「比例」乃是指长度或面积等属于量度之间的一种比率，它描述的是部份与部份；或部份与全体之间的关系。
美的原则 ﹝五﹞比例 在造型上所谓的「比例」乃是指长度或面积等属于量度之间的一种比率，它描述的是部份与部份；或部份与全体之间的关系。 在人类的历史中，「比例」一直是被运用在建筑、家俱、工艺以及绘画上。尤其是希腊、罗马的建筑中「比例」被当是一种美的表征。除了建筑之外，有几个理想的比例，古代的学者就把它公式化，而作为设计的基本原理，以便求得统一与变化。其中最基本并且最重要的比例就是「黄金比例」。古希腊人把「黄金比例」认为是最完美的比例而活用时造型中。它的基本方法是把一条线分割成大小两段，小线段与大线段之长度比等于大线段与全部线段之长度比。这种比例分割方法就是「黄金比例」。

68 比例

69 美的原则 ﹝六﹞平衡 平衡是指两个力量相互保持的意思，也就是说把两种以上的构成要素，互相均匀地配置在一个基础的支点上，以保持力学上的平衡而达到安定的状态。 在造形的秩序中，平衡是极重要的一项。由于造形的作品，并不是真正讲究实际的重量关系，所以平衡一词，在平面造形的世界中，应当是属于视觉的平衡。这和力学的平衡、数学的平衡以及其它学科中所讲的平均是不一样的。对平衡来说，有对称和非对称平衡之分。在平衡的练习中，着眼点在于如何求得视觉上的安定与心理上的平衡。例如形态、色彩、材质在画面中所具有的重量、大小、明暗、色彩、强弱、质感等，都必须保持平衡状态，才会令人产生安定的感觉。

70

71 美的原则 ﹝七﹞调合 当两种构成要素共同存在时，若差距过大，即造成「对比」。若两种构成要素相近，则对比刺激变小，能产生共同秩序使两者达到调和的状态。如黑与白是一种强烈对比的颜色，而存于其间的灰色便是两者的「调和」。 调和在视觉上可使我们产生美感。因此，调和的原则一直是人们关心的课题，尤其是色彩或造形皆是须不断探讨的问题。然而为了达到调和，各要素间的统一仍是必要的；如色相的配合、明度的配合，皆能产生调和。在造形上如线的粗细与形的大小均会影响，但只要在造形上能一致的话，也可产生调和感。 调和要素除了色彩与造形外，质感也是相当重要的因素。如以同材质作为建筑物或庭园设计的材料，也是获得调和的方法之一。

72 美的原则 ﹝八﹞律动 凡是规则的或不规则的反复和排列，或属于周期性、渐变性的现象，均是「律动」。它给人具有抑扬顿挫而又有统一感的运动现象。
一般说来，律动和时间的关系密切，因为在其它具有时间性的艺术领域中，均能表现律动美，如音乐、舞蹈、电影、戏剧、诗歌等。以音乐来说，利用时间间隔会使声音的强弱或高低表现出律动美，而呈现抑扬顿挫的变化。而在我们的生活环境中，四季的变化、植物的成长、动物的运动以及各种生理反应等都存在着律动的现象。此外自然界中的海浪、沙丘、麦浪、炊烟、屋瓦等形象，亦具有连续发展的反复，并呈现出视觉的一种律动美。

73

74 美的原则 ﹝九﹞统一 结合共同的要素，把相同或类似的形态、色彩、肌理诸要素作秩序性或画一性的组织、整理，使之有条不紊而相互发生关连或共通的作用，是为「统一」。 「统一」是美好的根本秩序。一般说来，统一可表现高尚权威的情感，也可以达成如平衡及调和的美感。然而过份的统一，将会失去生动而流于呆板。例如大小形态、色彩完全相同，且作等距离排列时，便会产生单调的感觉。 所以在讲究统一的同时，还须要注意到变化的问题。「变化」也是美的形式之一，所谓「变化」是在异质的诸要素中求变化。换句话说，即是将不同的形态、大小、色相、明度、彩度、方向、肌理作有机性的组织使之生动、活泼而不流于紊乱，才是适切的变化。

75 美的原则 ﹝十﹞完整 任何一件艺术作品，不论运用了那一种美的原则，或经过多么复杂的创作过程，艺术家到作品完成的那瞬间追求的是作品的“完整”性。完整性依人类的感觉、需求的不同分为感官方面（包括各种知觉）、意念方面、功能方面。譬如一出好的戏剧演出，除了带给观众视觉和听觉方面的完整性外，也会为观众提供剧作家想表达的一个完整的创作意念。

76 谢谢！ Thanks!