Web艺术设计精品课件

《Web艺术设计精品课件》由会员分享，可在线阅读，更多相关《Web艺术设计精品课件（105页珍藏版）》请在金锄头文库上搜索。

1、第4章 Web艺术设计,内容简介,本章主要介绍Web设计所需的美学原理和设计法则，具体涉及到影响网页观感的色彩、文字、图像、导航元件以及版面设计等方面的知识。,学习目标,1掌握：技术和艺术之间的限制关系；网页色彩设计的一般原则；网页设计流程、网页元素的基本知识及基本制作方法；网页创意设计的原则以及设计要点；导航设计的原则；版式设计的基础知识。2理解：网页设计中应用到的网络技术与传播特点、与传统媒体设计的区别；版式设计和平面设计的基本法则；色彩、文字、图像、版面设计中的一些概念。3了解：不同的制作软件、视听语言基础和网页设计的未来趋势。,4.1 Web设计环境,在进行网页设计和制作的过程中，了解

2、网络的相关技术以及访问者的外在条件（如访问者的访问速度、计算机平台、使用何种浏览器等）是十分重要的。这些因素将影响你设计的Web文件大小和设计复杂程度。 了解技术和媒体因素是网页艺术设计的前提，技术和艺术的结合是网页设计的最高境界。,4.1.1 Web的技术环境（1）,从技术为人服务的观念出发，应尽可能地从用户的角度来进行Web设计。要想有更多的人能很好地访问你所设计的站点，就应使Web站点适应不同的浏览器、操作系统和计算机平台访问的技术环境。,4.1.1 Web的技术环境（2）,1、关于浏览器的技术网页设计者首先面临的问题是如何使网页在不同浏览器中都能正常显示。由于每种浏览器对HTML文件标

3、签的解释都不同，导致对HTML文件的显示方式的解释存在差异。因此设计者应尽量在多种浏览器环境中测试自己的工作，以便对用户使用的浏览器提出要求或说明。,4.1.1 Web的技术环境（3）,为适合不同浏览器，可以采用以下几种方式： （1）采用可兼容的技术尽量使设计的网页可以在各种浏览器中使用。不使用最新版本的HTML规范编码，便于与各种版本的浏览器兼容。 （2）采用最新的技术设计这就要求用户采用最新的浏览器，还要有能够显示特殊媒体类型的增强插件，这样才能跟上设计者的步伐。 （3）采用对用户指定特定浏览器的方式,4.1.1 Web的技术环境（4）,总之，在对浏览器的选择上，可以采用一种能促进渐进开发

4、的策略。例如：在创建站点时使用前一个旧版本的HTML来编码，然后慢慢向其中加入一些增强特性，不断向最新版本靠近，使用户使用新旧版本的浏览器都可访问。若要加入一些需要插件支持的动画或特殊效果，则要使用大多数浏览器都支持的开发工具。,4.1.1 Web的技术环境（5）,2、关于屏幕分辨率的技术显示器的屏幕分辨率：是指显示器屏幕所能显示的象素总数，这一指标是由显示器和显示卡的性能决定的。通常用水平和垂直方向的象素数目的乘积表示。如：800600。随着计算机显示器和显示卡性能的提高，在网页设计中，很多人已经将800600作为基本的分辨率。,4.1.1 Web的技术环境（6）,3、关于宽带的技术网站设计

5、者要考虑用户的低带宽连接。如果由于页面包含庞大的、详细的图形或复杂的动画而导致下载速度缓慢，用户就会在页面内容显示之前改去访问别的站点。因此网站设计者应在不同的连接速度下进行浏览测试，以获得在不同的连接速度下浏览网页的真实情况。在设计时应尽量简化页面，少使用图形或将图形大小限制在1015KB范围之内。,4.1.2 Web的媒体环境（1）,考虑到计算机屏幕是网页的最终目的地，与传统的基于纸张的媒体完全不同，故在规划Web站点时应考虑以下几点： 1、计算机屏幕的形状 2、要有足够的对比度以利于用户阅读 3、屏幕分辨率比印刷品低得多由于信息显示的载体是计算机屏幕，因此必须针对屏幕进行设计，即应考虑布

6、局、字体和颜色，以及它们如何显示。还应考虑超文本的非线性特点，把合适的链接与相关内容有机地结合起来。,4.1.2 Web的媒体环境（2）,4、Web站点的观感 观感：指用户必须接触到的Web站点界面。由于用户访问站点的过程，就是观看并感觉站点的过程，他们可以根据站点允许的自由度，自主选择信息的访问路径。因此站点的观感就是站点的运行方式以及传达站点给用户的个性化设计。,4.1.3 Web的设计流程（1）,1、Web设计的两个阶段Web的设计流程通常包含两个阶段：第一阶段：了解客户需求，然后根据不同的网站类型进行创意，同时与技术人员沟通，了解设计所需的技术难度，确定方案。第二阶段：制作出页面样例，

7、与客户交流征求意见，然后修改，直到确认，由制作人员协助完成设计。应该注意：制作前进行完整详尽的规划是十分必要的。,4.1.3 Web的设计流程（2）,2、Web设计的一般步骤Web站点的设计一般有如下步骤，但为了达到用户所希望的观感，实践中还需要灵活掌握。 1、首先要明确网站的性质和目的，这样才能针对不同类型的网站进行创意。 2、要分析网站的用户，使设计者的目标与用户目标尽量和谐统一。 3、确定页面的结构和框架。有时可根据好的创意来决定页面结构。 4、应在不同机器、浏览器和不同速度下测试网页，及早查处所出现的问题。,4.1.3 Web的设计流程（3）,3、Web站点的主要类型了解Web站点的类

8、型可在设计网站时进行更好的创意。目前网上主要的Web站点类型有： 1、公告牌 2、出版物 3、虚拟画廊 4、产品支持 5、电子商务和在线购物 6、内联网和外联网 7、特殊兴趣、大众兴趣及非盈利性组织,4.2 Web的设计元素,4.2.1 色彩网页的色彩选择和搭配在网页制作中起到非常重要的作用，也是网页设计的重点之一，因为它将决定浏览者对网站的第一印象，好的色彩搭配可以使网页独具魅力，相反则提不起浏览者的兴趣。网页色彩的选择包括：色调、背景、文字、图表、边框、链接应采用何种色彩，如何搭配等内容。,4.2.1 色彩（1）,1、网页设计的色彩基础 （1） 颜色的产生 色彩感觉：当光照射在物体上时,物

9、体的反射光刺激人的视觉细胞，并作用到大脑，从而引起彩色感觉。物体色是由于其反射特性引起的。 （2）色彩的属性（或三要素）任何一种色彩都具有三个要素：色相、饱和度、亮度（或明度）。,4.2.1 色彩（2）,1、网页设计的色彩基础色相（Hue）：指颜色的种类，它反映了颜色的基本面貌和性质。如：红、绿、蓝等各种颜色。饱和度（Saturation）：指颜色的深浅程度或浓淡程度。一般鲜艳的色彩其饱和度都比较高，较刺眼，故饱和度高的颜色一般不用作网页背景。亮度（Brightness）： 指颜色的明暗程度。如白色亮度高，黑色亮度低；黄色亮度最高，紫色亮度最低。非彩色（指黑色、白色和各种深浅不一的灰色）只有亮

10、度特征，没有色相和饱和度的区别。,4.2.1 色彩（3）,1、网页设计的色彩基础（续） （3） 色彩的三原色和色环三基色：任何色彩都是由三种基色（或原色）混合而成。根据物体是否发光有两种基色系统：发光物体的三基色（RGB）系统：红（R）、绿（G）、蓝（B）；等量的三基色混合成白光（适合发光的物体，如显示器）。不发光物体的三基色（CMYK)系统：青（Cyan）、紫或洋红（Magenta）、黄（Yellow）；等量的三基色混合成黑色（适合不发光的物体，如颜料）。,4.2.1 色彩（4）,1、网页设计的色彩基础（续） （3） 色彩的三原色和色环色环：将色彩按“红黄绿青蓝紫红”依次过渡渐变，就可以得到

11、一个色环。在色环中，可以将颜色分为：暖色、中性色和冷色几种。,色彩的色环,4.2.1 色彩（5）,1、网页设计的色彩基础（续）在24色色环中，根据位置的不同，可以构成4种关系，它们分别是：同类色：色环中相隔45的两个色相。属较弱的对比效果，是极为协调和单纯的色调。临近色：色环中相隔90的两个色相。色彩倾向近似，色调统一和谐，感情特征一致。对比色：色环中相隔135的两个色相。属中强对比效果。互补色：色环中相隔180的两个色相。是对比最强的色组，富于刺激性，有强烈的视觉冲击力和热烈感。,4.2.1 色彩（6）,2、色彩感觉 （1） 心理感受人们在面对色彩时，心理会受到颜色的影响而变化，这种变化虽然

12、有个人的差异，但大多数会有冷暖、轻重、软硬、华丽朴素、积极消极等几方面的心理效果。虽然色彩本身不带任何含义，但人的心理感觉将它们分成不同的类别。,4.2.1 色彩（7）,2、色彩感觉（续） （2） 颜色的联想色彩的联想作用虽然是属于心理学的问题，但它的适用性在设计上是很重要的。由于色彩与人的情绪有着微妙的联系，因此利用不同的色调设计网页会给浏览者不同的心理感受。,4.2.1 色彩（8）,2、色彩感觉（续）一般认为，不同的色调对浏览者的感觉有如下规律：红色：是一种激奋的色彩。代表热情、奔放、喜悦、庆典，有刺激效果，能使人产生冲动，有愤怒、热情和活力的感觉。绿色：介于冷暖色之间，代表植物、生命、生

13、机、蓬勃向上、和睦、宁静、健康、安全的感觉。橙色：具有轻快、欢欣、热烈、温馨、时尚的效果。黄色：代表高贵、富有，具有快乐、希望、智慧和轻快的个性，它的亮度最高。,4.2.1 色彩（9）,2、色彩感觉（续）蓝色：是最具凉爽、清新、专业的色彩。代表天空、清爽、深远的感觉，能体现柔顺、淡雅、浪漫的气氛。紫色：代表浪漫、爱情，并给人以神秘、压迫的感觉。棕色：代表土地。白色：代表纯洁、单纯、简单，具有洁白、明快、纯真、清洁的感受。黑色：代表严肃、庄严、夜晚、沉着，具有深沉、神秘、寂静、悲哀、压抑的感觉。灰色：代表阴暗、消极，具有中庸、平凡、温和、谦让、中立和高雅的感觉。,4.2.1 色彩（10）,2、色

14、彩感觉（续）有些色彩有双重的意义，此外不同的国家、民族、年龄层次的人对色彩有不同的理解，因此设计者必须根据使用对象的特点来选择色彩，以便尽量符合人们普遍接受的意义。,4.2.1 色彩（11）,3、色调和色彩的搭配 （1）色调：在颜色三要素中，色相容易区别，但饱和度和亮度有时不易区别，因此将亮度和饱和度合在一起称为色调。色调是色彩作品的总倾向和总特征，是直接传达设计意念的关键。色彩的主色调分为以色相关系为主的调子，如：冷色调、暖色调、红色调、绿色调等；也可分为以灰色、明暗关系为主的调子，如：明灰调、暗色调等。,4.2.1 色彩（12）,3、色调和色彩的搭配 （2）配色：指对两种以上的颜色进行组合

15、和搭配，以便产生更美的效果。主要有以下几种方式：色相搭配：分为类似色搭配和补色搭配两种。主要利用了“当两种颜色放在一起时，会产生相互反衬的对比效应，并各自走向自己的极端”。亮度搭配：分为高亮度、中亮度、低亮度和明暗对比。暗色与高亮色对比，会给人清晰强烈的刺激；中性色与低亮度色对比；给人模糊、朦胧、深奥的感觉；纯色与高亮度色的对比，给人跳跃、舞动的感觉；纯色与低亮度色对比，给人以强硬和不可改变的感觉。,4.2.1 色彩（13）,（2）配色（续）饱和度搭配：分为高饱和度、中饱和度、低饱和度的搭配。纯色或三基色之间的对比给人的视觉刺激最强烈，使色彩的效果更明确和肯定。通常可通过加入黑色、白色或灰色来

16、降低饱和度。整体色调搭配：设计作品给观众的感受是由整体配色效果决定的，作品的最终的配色效果都由整体的色调而定，并取决于配色的色相、亮度、饱和度的关系和色彩面积大小的关系。,4.2.1 色彩（14）,4、计算机色彩计算机显示器显示的任意一种色彩都是由RGB（红、绿、蓝）三种基色光混合而成的。在HTML语言或其它图像处理软件中，色彩的表达是用这三种颜色的数值来表示的。如：红色（255，0，0）【十进制】或（FF0000）【十六进制】，十六进制颜色值为6位数字，前2位定义红色，之间2位定义绿色，最后2位定义蓝色。,4.2.1 色彩（15）,4、计算机色彩在计算机显示中有关色彩的概念有： （1）色彩模式（主要有三种）RGB模式：任意色彩由RGB三基色构成适合于本身发光的物体的颜色（如显示器）。CMYK模式：图像由青（C）、洋红（M)、黄（Y）和黑（K）四种颜色混合而成。适合于不发光的物体颜色（如：彩色印刷及绘画领域）Lab模式：Photoshop的标准模式，也是RGB向CMYK转换的中间模式。,