数字艺术设计概论-教学课件-作者-周苏-主编-第4-1讲:网页艺术设计及其计算环境_第1页
数字艺术设计概论-教学课件-作者-周苏-主编-第4-1讲:网页艺术设计及其计算环境_第2页
数字艺术设计概论-教学课件-作者-周苏-主编-第4-1讲:网页艺术设计及其计算环境_第3页
数字艺术设计概论-教学课件-作者-周苏-主编-第4-1讲:网页艺术设计及其计算环境_第4页
数字艺术设计概论-教学课件-作者-周苏-主编-第4-1讲:网页艺术设计及其计算环境_第5页
已阅读5页,还剩77页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

在线教务辅导网:教材其余课件及动画素材请查阅在线教务辅导网QQ:349134187

或者直接输入下面地址:在线教务辅导网:http://www.shangfuwang1数字艺术设计概论周苏教授浙江大学城市学院计算机学院Zs@QQ:81505050数字艺术设计概论周苏教授2第4章网页艺术设计网页艺术设计及其计算环境FireworksWeb图形制作初步FireworksWeb图形制作技巧第4章网页艺术设计网页艺术设计及其计算环境34.1网页艺术设计及其计算环境20世纪人类最重要的发明可能就是计算机及其网络技术了,因特网改变着世界,促成了网络经济的形成与电子商务的发展。由于因特网具有传播信息容量极大、形态多样、迅速方便、全球覆盖、自由和交互的特点,已经发展成为新的主流传播媒体。4.1网页艺术设计及其计算环境20世纪人类最重要的发明可44.1网页艺术设计及其计算环境从技术上讲,网络技术带来了通信革命,它使人们的信息交流变得方便快捷;从经济上讲,网络技术带来了电子商务,使传统产业及其商业模式都面临巨大的机遇、改造与挑战;从文化上讲,网络技术把我们真正带入了信息社会,给人们的生产方式、生活方式、思想观念都带来新的变化;4.1网页艺术设计及其计算环境从技术上讲,网络技术带来了54.1网页艺术设计及其计算环境从认知科学的角度来说,因特网是一种新的认知结构,通过它个体与社会相互作用,使知识得到延伸。网络空间中的网页体现给认知工效学提出了新的挑战。这个挑战及其内容和理论体系,形成了在超媒体环境中更容易获取知识的观点。4.1网页艺术设计及其计算环境从认知科学的角度来说,因特64.1.1基于信息的网络界面设计网络界面设计主要是网页设计,人性化设计是网络界面设计的核心,如何根据人的心理、生理特点,运用技术手段,创造简单、友好的界面,是网络界面设计的重点。4.1.1基于信息的网络界面设计网络界面设计主要是网页设74.1.1基于信息的网络界面设计(1)网页设计与传统平面设计的异同由于计算机及其网络技术条件的限制,网页设计与传统平面设计的主要区别有三个方面:4.1.1基于信息的网络界面设计(1)网页设计与传统平84.1.1基于信息的网络界面设计1)介质不同。传统平面设计作品大多是以印刷品的形式出现;而网页则主要出现在计算机显示器上。显示器的分辨率比较低,较细的线条不易显示,一般达到72dpi即可,色彩显示为RGB模式;印刷品要求分辨率须达到300dpi以上,色彩模式是CMYK。了解这一特点,在网页设计时应扬长避短,追求网页的色彩效果,避免过于在细节上做文章。4.1.1基于信息的网络界面设计1)介质不同。传统平面94.1.1基于信息的网络界面设计2)页面大小的限制。大多数电脑用户的显示环境为800×600(pixels),大多数门户网站的横幅为800pixels。这样,为达到不做滚屏便可显示完整页面,在上下与左右滚动条(scroll)中就只能选择其一。另一方面,下载速度的快慢直接关系到网页的访问率,要想提高网页的生命力,就必须在各方面下功夫,提高访问速度和下载速度。4.1.1基于信息的网络界面设计2)页面大小的限制。大104.1.1基于信息的网络界面设计3)交互性设计。几乎所有网页都有一个以上的链接或按钮,选择它们可以切换到其他网页或网站。更重要的是,用户通常可以通过网页参加讨论组、聊天、电子商务等,因此,应该尽可能减少不必要的交互障碍。4)多媒体功能。网站的最大资源优势在于它的多媒体功能。因特网可以利用文字、声音、图像、动画,甚至虚拟显示技术等与用户交互。但如果想在网页中添加音乐,应该添加一个按钮,可以让用户选择打开或关闭它。4.1.1基于信息的网络界面设计3)交互性设计。几乎所114.1.1基于信息的网络界面设计(2)网络界面设计中用户的地位由于因特网具有的无限延伸性,数以万计的信息在网络上传递,不同的人群对信息的需求也各不相同。但是,在商业网站中,用户的需求是第一位的,在商业网络界面设计中,网站对网络界面的要求就是网站用户的需求。只有充分分析、了解网站的用户需求,才能准确地把握设计的方向和尺度,设计出令人满意的界面。4.1.1基于信息的网络界面设计(2)网络界面设计中用124.1.1基于信息的网络界面设计一般地,用户上网主要有两种方式:搜索和浏览。搜索过程包含了用户下意识的活动,而浏览则更多的是一个无意识的过程。他们通常都不是针对某一项专门的任务,更多的是由于好奇心与求知欲,或者仅仅是为了娱乐。另外,浏览本身或多或少地被局限于个人兴趣。设计网站时,要将注意力集中于两个方面:内容选择和内容描述(信息是什么和怎么样)。在这里,设计问题必须考虑网页导航(描述)和用户兴趣(选择)。4.1.1基于信息的网络界面设计一般地,用户上网主要有两134.1.1基于信息的网络界面设计(3)网络界面设计中对信息的分析与控制网络是现代信息传播的主要载体,因此,在网页界面设计中,对信息进行有效的分析与控制,是十分必要的。4.1.1基于信息的网络界面设计(3)网络界面设计中对144.1.1基于信息的网络界面设计1)对信息的分析。一个网站通常都是由一系列的网页界面组成的。在网页界面设计中,设计师为保证用户在恰当的位置获得恰当的信息,首先要对信息进行分析。网站的信息有层次性的,各层次传达的信息都不相同。其中,网站首页传递的信息最为重要,如同门面。因此,首页的设计要体现网站的风格,突出网站的特点,向用户传达网站的概要内容,提供网站的最新消息等等。4.1.1基于信息的网络界面设计1)对信息的分析。一个154.1.1基于信息的网络界面设计2)网站信息繁多,而用户耐心有限。在商业网络界面设计中,如何对信息进行控制,建立快捷的途径,帮助用户迅速找到所要的内容,是设计师的职责。为此,要建立清晰明了的导航系统,每一级页面要有清晰明了的导航,在醒目位置有到下一级界面的按钮联接提示等。要通过设计适当的界面提示信息来引导用户。4.1.1基于信息的网络界面设计2)网站信息繁多,而用164.1.2网页设计的原则网页设计一般有以下原则:1)内容与形式的统一。这里的内容,是指网站的信息数据及文字内容,而形式指的是网页设计的版式、构图、布局、色彩以及它们所呈现出的风格特点。网页的形式是为内容服务的,但本身又有自己的独立性和艺术规律。4.1.2网页设计的原则网页设计一般有以下原则:174.1.2网页设计的原则无论是个体还是组织,设立网站都有自己的明确目的,网页设计的目的就是为了使网页内容得到更好的体现,使之更加形象、直观,更易于为受众所接受。因而,不同内容的网页要求用不同的设计形式。比如说,政府机构的网页形式应简洁、庄重;教育单位的网页应明快、大方;商业类网页可鲜艳夺目、丰富多彩;文化艺术类网页应讲求格调与品位。4.1.2网页设计的原则无论是个体还是组织,设立网站都有184.1.2网页设计的原则2)特色明确。特色鲜明的网站是精心策划的结果,只有独特的创意和赏心悦目的网页设计才能在一瞬间打动它的浏览者。设计者应该清楚地了解网站受众群体的基本情况,如受教育程度、收入水平、需要信息的范围及深度等,从而能够有的放矢。挑选关键信息,利用一个逻辑结构有序地组织起来,开发一个页面设计原型,选择用户代表来进行测试,并逐步精炼这个原型,形成创意。4.1.2网页设计的原则2)特色明确。特色鲜明的网站是194.1.2网页设计的原则3)统一整体的形象。网页(企业)标志以及标准色决定后,应该应用在每一幅页面上,使浏览者始终可以判定自己的方位,并且还会给浏览者留下深刻而统一的印象。主题要做到鲜明突出、力求简洁,要点明确。4)减少浏览层次。据调查,网页的层次越复杂,实际内容的访问率也将越低。所以,要尽量简化网页的层次,力求以最少的点击次数连接到具体的内容。5)了解浏览者的心理状态。从心理学的角度分析浏览者的心理状态,有助于网页页面的设计。4.1.2网页设计的原则3)统一整体的形象。网页(企204.1.3网页色彩设计在因特网上,给浏览者带来最强视觉冲击的要素就是网页色彩。色彩是人类视觉最敏感的东西,所以,在网页设计中,色彩设计是网页设计者首先要考虑的。4.1.3网页色彩设计在因特网上,给浏览者带来最强视觉冲214.1.3网页色彩设计色彩是一种语言,用来向人们传递信息,也用来吸引人们的注意。在一个具备色彩设计专业水平的网站,即使只使用很少的动画、图形和声音,通过色彩就可以给浏览者留下深刻的印象并提高访问率;色彩可以给浏览者带来舒适的视觉感受并易于人们浏览:通过色彩可以突出网页内容的重点和统一网站的风格;通过色彩还可以体现网站的特色和表明网站的主题。4.1.3网页色彩设计色彩是一种语言,用来向人们传递信息224.1.3网页色彩设计(1)网页色彩搭配的原则色彩搭配应以大众的欣赏习惯为标准,同时兼顾网站专业特点和艺术规律。网页色彩搭配应遵循以下几个原则:1)色彩的合理性。网页的色彩要漂亮、引入注目,同时还要照顾到人的眼睛的生理特点,不要用大面积的高纯度色相,它容易使人的眼睛产生疲劳。2)色彩的独特性。要有与众不同的色彩搭配,并且与行业特征相结合,以衬托出网站的个性,使得大家对网站的印象更深刻。4.1.3网页色彩设计(1)网页色彩搭配的原则234.1.3网页色彩设计3)色彩的艺术性。色彩设计属于艺术形式的范畴,按照内容决定形式的原则,色彩应服务于网站的内容,和网站的气氛相适应。蓝色、灰色常常用于工业高科技企业,如奥迪公司的网页大量使用灰色,显得十分高贵(/,见图4.1),而粉色则体现女性站点的柔美。青蛙公司的网站(,见图4.2),根据不同的设计领域和服务对象,采用不同的设计色彩。但其公司的青春、活泼的特色,基本是以绿色、浅黄色来体现的。4.1.3网页色彩设计3)色彩的艺术性。色彩设计属于艺24图4.1奥迪公司网站图4.1奥迪公司网站25图4.2青蛙设计公司网站图4.2青蛙设计公司网站264.1.3网页色彩设计每种色彩在纯度、明度上略微变化就会产生不同的感觉,以绿色为例,绿色中加上较多的黄色,有青春旺盛的视觉意境。而含有较多蓝色成分的绿色,则显得幽宁阴深。黑底色上点缀的高纯度红、黄、蓝、绿色使黑色变得透明。黑色令人想到黑夜,可用做娱乐业站点的基本色调;红色可用于商业、零售业站点等。总之,选择色调一定要和网站的主要内容相适应。4.1.3网页色彩设计每种色彩在纯度、明度上略微变化就会274.1.3网页色彩设计(2)搭配技巧专业研究机构的研究表明:从人的记忆效果看,对彩色的记忆是黑白的3.5倍,也就是说,在一般情况下,彩色页面较完全黑白页面更加吸引人。4.1.3网页色彩设计(2)搭配技巧284.1.3网页色彩设计1)非彩色的搭配。黑白是最基本和最简单的搭配,白字黑底,黑底白字都非常清晰明了。灰色是万能色,可以和任何彩色搭配,也可以帮助两种对立的色彩和谐过渡。如果实在找不出合适的色彩,那么用灰色试试,效果不会太差。一般印刷品较少用大面积的黑色,而网页设计中以黑色为底的网站以前比较多,主要是一些艺术网站。4.1.3网页色彩设计1)非彩色的搭配。黑白是最基本和294.1.3网页色彩设计2)彩色的搭配。同类色的应用:同类色是由一种色彩呈现出的不同透明度或者纯度(通俗地说,就是将色彩变淡或加深)时产生的色彩系列。由这样的色彩搭配出来的页面看起来统一、和谐、有层次感,比较适合于技术性、专业性站点。邻近色的应用:先选定一种色彩,然后选择它在色谱里相邻区域的颜色,如红和紫色互为邻近色;黄色与绿色互为邻近色,邻近色搭配可以使整个页面色彩丰富,但不花哨。4.1.3网页色彩设计2)彩色的搭配。同类色的应用:同304.1.3网页色彩设计对比色的应用:原色纯度较高的色彩搭配使用,即为对比色。各种色彩均可作为对比色使用,但应以一种颜色为主调,使它占有较大的面积同时,辅以对比色,起到点缀丰富的作用。例如以粉红色为主的色调,配以小面积的淡蓝、淡黄、淡绿或者土黄、土灰、土蓝,商业零售站点、新闻站点常常运用对比色,造成丰富充实的效果。网站的客户群体主要是青年女性,网页中的对比色显得活泼、明快,洋溢着青春的气息。4.1.3网页色彩设计对比色的应用:原色纯度较高的色彩搭314.1.4Web图像的基本要求在数字设计环境中完成一幅作品后,可以有多种方式来发表它,例如打印成硬拷贝,制成光盘在其他显示设备上观看,或是利用因特网在线发布等等。4.1.4Web图像的基本要求在数字设计环境中完成一幅作324.1.4Web图像的基本要求利用图像处理软件,可以很方便地将普通的数字图像转变成网络图像。例如AdobePhotoshop、AdobeImageReady和AdobeIllustator等软件都可以为网页创建图像。在Photoshop中可以优化图像质量,减小文件尺寸和在网站上准备在线显示的颜色;在AdobeImageReady中可以创建特殊效果,诸如在鼠标滑过或单击图像某一部分时启动和创建交互动画;4.1.4Web图像的基本要求利用图像处理软件,可以很方334.1.4Web图像的基本要求AdobeIllustrator可以用于创建矢量的网络图像。此外,常用的软件还有MacromediaFirework,其功能相当于AdobeImageImageReady,但在绘图方式上将矢量图和位图结合到了一起。矢量的平面设计软件MacromediaFreeHand与AdobeIllustrator功能相近。MacromediaFlash不仅具备一个网络界面的应有功能,还是创作多媒体网络动画的强大工具。4.1.4Web图像的基本要求AdobeIllustr344.1.4Web图像的基本要求最终的网页图像还需要在MacromediaDreamweaver或MicrosoftFrontPage网页编辑软件中进行整合,才能构建出一个完整的网站。4.1.4Web图像的基本要求最终的网页图像还需要在Ma354.1.4Web图像的基本要求与打印输出不同,为网页准备图像要注意其颜色、大小和文件格式。首先,创建网页图像时要注意使用RGB颜色模式;其次,在网页上发布图像,文件的大小十分关键,较小的图像方便网络服务器的存储和传送,观众能以很快的速度下载,而太大的图像则会给传送和观看带来速度上的麻烦。4.1.4Web图像的基本要求与打印输出不同,为网页准备364.1.5Web图像的格式在网页上文件格式是有限制的,文件格式会决定文件大小和显示特征,通常网页用的图像分为两类:位图和矢量图。位图的格式一般是gif、jpeg和png,图像的尺寸由像素的多少来决定,图像显示的大小也会因显示器而变化。矢量图一般是swf、svg格式,例如可以在Illustrator中创建,也可以使用Flash软件创建swf格式的动画文件,矢量图可以不受文件大小的限制,在网页上放大或缩小显示时可以保持图像的清晰度。4.1.5Web图像的格式在网页上文件格式是有限制的,文374.1.5Web图像的格式每一种网页图像格式都有自己的特点和用途:jpeg格式可以保持图像中连续色调的色彩和细节的变化,常用于照片的存储;gif和png-8格式常用于线图、标志、文字性的插图等,它可以有效地压缩平涂的颜色区域,并保持对比明显的细节,同时gif格式还用于创建简单逐帧的动画;svg和swf格式用于保存高质量的矢量图,文件的大小比位图要小得多。4.1.5Web图像的格式每一种网页图像格式都有自己的特384.1.6小结网页艺术设计及其计算环境基于信息的网络界面设计网页设计的原则网页色彩设计Web图像的基本要求Web图像的格式4.1.6小结网页艺术设计及其计算环境394.1.7实验与思考本节“实验与思考”的目的是:1)回顾和熟悉网络的基本概念,了解“网页设计”的基本内容。2)通过因特网搜索与浏览,了解网络环境中主流的网页制作技术网站;掌握通过专业网站不断丰富网页设计与制作最新知识的学习方法,尝试通过专业网站的辅助与支持来开展网页设计与制作应用实践。4.1.7实验与思考本节“实验与思考”的目的是:404.1.7实验与思考3)通过对一些成功网站进行的搜索、浏览与分析,了解网站建设需要注意的问题,学习网站建设和网页设计的成功经验。4)通过欣赏,熟悉网页色彩设计的表达与内涵。5)熟悉Web图像发布的基本要求和格式要求。4.1.7实验与思考3)通过对一些成功网站进行的搜索41在线教务辅导网:教材其余课件及动画素材请查阅在线教务辅导网QQ:349134187

或者直接输入下面地址:在线教务辅导网:http://www.shangfuwang42数字艺术设计概论周苏教授浙江大学城市学院计算机学院Zs@QQ:81505050数字艺术设计概论周苏教授43第4章网页艺术设计网页艺术设计及其计算环境FireworksWeb图形制作初步FireworksWeb图形制作技巧第4章网页艺术设计网页艺术设计及其计算环境444.1网页艺术设计及其计算环境20世纪人类最重要的发明可能就是计算机及其网络技术了,因特网改变着世界,促成了网络经济的形成与电子商务的发展。由于因特网具有传播信息容量极大、形态多样、迅速方便、全球覆盖、自由和交互的特点,已经发展成为新的主流传播媒体。4.1网页艺术设计及其计算环境20世纪人类最重要的发明可454.1网页艺术设计及其计算环境从技术上讲,网络技术带来了通信革命,它使人们的信息交流变得方便快捷;从经济上讲,网络技术带来了电子商务,使传统产业及其商业模式都面临巨大的机遇、改造与挑战;从文化上讲,网络技术把我们真正带入了信息社会,给人们的生产方式、生活方式、思想观念都带来新的变化;4.1网页艺术设计及其计算环境从技术上讲,网络技术带来了464.1网页艺术设计及其计算环境从认知科学的角度来说,因特网是一种新的认知结构,通过它个体与社会相互作用,使知识得到延伸。网络空间中的网页体现给认知工效学提出了新的挑战。这个挑战及其内容和理论体系,形成了在超媒体环境中更容易获取知识的观点。4.1网页艺术设计及其计算环境从认知科学的角度来说,因特474.1.1基于信息的网络界面设计网络界面设计主要是网页设计,人性化设计是网络界面设计的核心,如何根据人的心理、生理特点,运用技术手段,创造简单、友好的界面,是网络界面设计的重点。4.1.1基于信息的网络界面设计网络界面设计主要是网页设484.1.1基于信息的网络界面设计(1)网页设计与传统平面设计的异同由于计算机及其网络技术条件的限制,网页设计与传统平面设计的主要区别有三个方面:4.1.1基于信息的网络界面设计(1)网页设计与传统平494.1.1基于信息的网络界面设计1)介质不同。传统平面设计作品大多是以印刷品的形式出现;而网页则主要出现在计算机显示器上。显示器的分辨率比较低,较细的线条不易显示,一般达到72dpi即可,色彩显示为RGB模式;印刷品要求分辨率须达到300dpi以上,色彩模式是CMYK。了解这一特点,在网页设计时应扬长避短,追求网页的色彩效果,避免过于在细节上做文章。4.1.1基于信息的网络界面设计1)介质不同。传统平面504.1.1基于信息的网络界面设计2)页面大小的限制。大多数电脑用户的显示环境为800×600(pixels),大多数门户网站的横幅为800pixels。这样,为达到不做滚屏便可显示完整页面,在上下与左右滚动条(scroll)中就只能选择其一。另一方面,下载速度的快慢直接关系到网页的访问率,要想提高网页的生命力,就必须在各方面下功夫,提高访问速度和下载速度。4.1.1基于信息的网络界面设计2)页面大小的限制。大514.1.1基于信息的网络界面设计3)交互性设计。几乎所有网页都有一个以上的链接或按钮,选择它们可以切换到其他网页或网站。更重要的是,用户通常可以通过网页参加讨论组、聊天、电子商务等,因此,应该尽可能减少不必要的交互障碍。4)多媒体功能。网站的最大资源优势在于它的多媒体功能。因特网可以利用文字、声音、图像、动画,甚至虚拟显示技术等与用户交互。但如果想在网页中添加音乐,应该添加一个按钮,可以让用户选择打开或关闭它。4.1.1基于信息的网络界面设计3)交互性设计。几乎所524.1.1基于信息的网络界面设计(2)网络界面设计中用户的地位由于因特网具有的无限延伸性,数以万计的信息在网络上传递,不同的人群对信息的需求也各不相同。但是,在商业网站中,用户的需求是第一位的,在商业网络界面设计中,网站对网络界面的要求就是网站用户的需求。只有充分分析、了解网站的用户需求,才能准确地把握设计的方向和尺度,设计出令人满意的界面。4.1.1基于信息的网络界面设计(2)网络界面设计中用534.1.1基于信息的网络界面设计一般地,用户上网主要有两种方式:搜索和浏览。搜索过程包含了用户下意识的活动,而浏览则更多的是一个无意识的过程。他们通常都不是针对某一项专门的任务,更多的是由于好奇心与求知欲,或者仅仅是为了娱乐。另外,浏览本身或多或少地被局限于个人兴趣。设计网站时,要将注意力集中于两个方面:内容选择和内容描述(信息是什么和怎么样)。在这里,设计问题必须考虑网页导航(描述)和用户兴趣(选择)。4.1.1基于信息的网络界面设计一般地,用户上网主要有两544.1.1基于信息的网络界面设计(3)网络界面设计中对信息的分析与控制网络是现代信息传播的主要载体,因此,在网页界面设计中,对信息进行有效的分析与控制,是十分必要的。4.1.1基于信息的网络界面设计(3)网络界面设计中对554.1.1基于信息的网络界面设计1)对信息的分析。一个网站通常都是由一系列的网页界面组成的。在网页界面设计中,设计师为保证用户在恰当的位置获得恰当的信息,首先要对信息进行分析。网站的信息有层次性的,各层次传达的信息都不相同。其中,网站首页传递的信息最为重要,如同门面。因此,首页的设计要体现网站的风格,突出网站的特点,向用户传达网站的概要内容,提供网站的最新消息等等。4.1.1基于信息的网络界面设计1)对信息的分析。一个564.1.1基于信息的网络界面设计2)网站信息繁多,而用户耐心有限。在商业网络界面设计中,如何对信息进行控制,建立快捷的途径,帮助用户迅速找到所要的内容,是设计师的职责。为此,要建立清晰明了的导航系统,每一级页面要有清晰明了的导航,在醒目位置有到下一级界面的按钮联接提示等。要通过设计适当的界面提示信息来引导用户。4.1.1基于信息的网络界面设计2)网站信息繁多,而用574.1.2网页设计的原则网页设计一般有以下原则:1)内容与形式的统一。这里的内容,是指网站的信息数据及文字内容,而形式指的是网页设计的版式、构图、布局、色彩以及它们所呈现出的风格特点。网页的形式是为内容服务的,但本身又有自己的独立性和艺术规律。4.1.2网页设计的原则网页设计一般有以下原则:584.1.2网页设计的原则无论是个体还是组织,设立网站都有自己的明确目的,网页设计的目的就是为了使网页内容得到更好的体现,使之更加形象、直观,更易于为受众所接受。因而,不同内容的网页要求用不同的设计形式。比如说,政府机构的网页形式应简洁、庄重;教育单位的网页应明快、大方;商业类网页可鲜艳夺目、丰富多彩;文化艺术类网页应讲求格调与品位。4.1.2网页设计的原则无论是个体还是组织,设立网站都有594.1.2网页设计的原则2)特色明确。特色鲜明的网站是精心策划的结果,只有独特的创意和赏心悦目的网页设计才能在一瞬间打动它的浏览者。设计者应该清楚地了解网站受众群体的基本情况,如受教育程度、收入水平、需要信息的范围及深度等,从而能够有的放矢。挑选关键信息,利用一个逻辑结构有序地组织起来,开发一个页面设计原型,选择用户代表来进行测试,并逐步精炼这个原型,形成创意。4.1.2网页设计的原则2)特色明确。特色鲜明的网站是604.1.2网页设计的原则3)统一整体的形象。网页(企业)标志以及标准色决定后,应该应用在每一幅页面上,使浏览者始终可以判定自己的方位,并且还会给浏览者留下深刻而统一的印象。主题要做到鲜明突出、力求简洁,要点明确。4)减少浏览层次。据调查,网页的层次越复杂,实际内容的访问率也将越低。所以,要尽量简化网页的层次,力求以最少的点击次数连接到具体的内容。5)了解浏览者的心理状态。从心理学的角度分析浏览者的心理状态,有助于网页页面的设计。4.1.2网页设计的原则3)统一整体的形象。网页(企614.1.3网页色彩设计在因特网上,给浏览者带来最强视觉冲击的要素就是网页色彩。色彩是人类视觉最敏感的东西,所以,在网页设计中,色彩设计是网页设计者首先要考虑的。4.1.3网页色彩设计在因特网上,给浏览者带来最强视觉冲624.1.3网页色彩设计色彩是一种语言,用来向人们传递信息,也用来吸引人们的注意。在一个具备色彩设计专业水平的网站,即使只使用很少的动画、图形和声音,通过色彩就可以给浏览者留下深刻的印象并提高访问率;色彩可以给浏览者带来舒适的视觉感受并易于人们浏览:通过色彩可以突出网页内容的重点和统一网站的风格;通过色彩还可以体现网站的特色和表明网站的主题。4.1.3网页色彩设计色彩是一种语言,用来向人们传递信息634.1.3网页色彩设计(1)网页色彩搭配的原则色彩搭配应以大众的欣赏习惯为标准,同时兼顾网站专业特点和艺术规律。网页色彩搭配应遵循以下几个原则:1)色彩的合理性。网页的色彩要漂亮、引入注目,同时还要照顾到人的眼睛的生理特点,不要用大面积的高纯度色相,它容易使人的眼睛产生疲劳。2)色彩的独特性。要有与众不同的色彩搭配,并且与行业特征相结合,以衬托出网站的个性,使得大家对网站的印象更深刻。4.1.3网页色彩设计(1)网页色彩搭配的原则644.1.3网页色彩设计3)色彩的艺术性。色彩设计属于艺术形式的范畴,按照内容决定形式的原则,色彩应服务于网站的内容,和网站的气氛相适应。蓝色、灰色常常用于工业高科技企业,如奥迪公司的网页大量使用灰色,显得十分高贵(/,见图4.1),而粉色则体现女性站点的柔美。青蛙公司的网站(,见图4.2),根据不同的设计领域和服务对象,采用不同的设计色彩。但其公司的青春、活泼的特色,基本是以绿色、浅黄色来体现的。4.1.3网页色彩设计3)色彩的艺术性。色彩设计属于艺65图4.1奥迪公司网站图4.1奥迪公司网站66图4.2青蛙设计公司网站图4.2青蛙设计公司网站674.1.3网页色彩设计每种色彩在纯度、明度上略微变化就会产生不同的感觉,以绿色为例,绿色中加上较多的黄色,有青春旺盛的视觉意境。而含有较多蓝色成分的绿色,则显得幽宁阴深。黑底色上点缀的高纯度红、黄、蓝、绿色使黑色变得透明。黑色令人想到黑夜,可用做娱乐业站点的基本色调;红色可用于商业、零售业站点等。总之,选择色调一定要和网站的主要内容相适应。4.1.3网页色彩设计每种色彩在纯度、明度上略微变化就会684.1.3网页色彩设计(2)搭配技巧专业研究机构的研究表明:从人的记忆效果看,对彩色的记忆是黑白的3.5倍,也就是说,在一般情况下,彩色页面较完全黑白页面更加吸引人。4.1.3网页色彩设计(2)搭配技巧694.1.3网页色彩设计1)非彩色的搭配。黑白是最基本和最简单的搭配,白字黑底,黑底白字都非常清晰明了。灰色是万能色,可以和任何彩色搭配,也可以帮助两种对立的色彩和谐过渡。如果实在找不出合适的色彩,那么用灰色试试,效果不会太差。一般印刷品较少用大面积的黑色,而网页设计中以黑色为底的网站以前比较多,主要是一些艺术网站。4.1.3网页色彩设计1)非彩色的搭配。黑白是最基本和704.1.3网页色彩设计2)彩色的搭配。同类色的应用:同类色是由一种色彩呈现出的不同透明度或者纯度(通俗地说,就是将色彩变淡或加深)时产生的色彩系列。由这样的色彩搭配出来的页面看起来统一、和谐、有层次感,比较适合于技术性、专业性站点。邻近色的应用:先选定一种色彩,然后选择它在色谱里相邻区域的颜色,如红和紫色互为邻近色;黄色与绿色互为邻近色,邻近色搭配可以使整个页面色彩丰富,但不花哨。4.1.3网页色彩设计2)彩色的搭配。同类色的应用:同714.1.3网页色彩设计对比色的应用:原色纯度较高的色彩搭配使用,即为对比色。各种色彩均可作为对比色使用,但应以一种颜色为主调,使它占有较大的面积同时,辅以对比色,起到点缀丰富的作用。例如以粉红色为主的色调,配以小面积的淡蓝、淡黄、淡绿或者土黄、土灰、土蓝,商业零售站点、新闻站点常常运用对比色,造成丰富充实的效果。网站的客户群体主要是青年女性,网页中的对比色显得活泼、明快,洋溢着青春的气息。4.1.3网页色彩设计对比色的应用:原色纯度较高的色彩搭724.1.4Web图像的基本要求在数字设计环境中完成一幅作品后,可以有多种方式来发表它,例如打印成硬拷贝,制成光盘在其他显示设备上观看,或是利用因特网在线发布等等。4.1.4Web图像的基本要求在数字设计环境中完成一幅作734.1.4Web图像的基本要求利用图像处理软件,可以很方便地将普通的数字图像转变成网络图像。例如AdobePhotoshop、AdobeImageReady和AdobeIllustator等软件都可以为网页创建图像。在Photoshop中可以优化图像质量,减小文件尺寸和在网站上准备在线显示的颜色;在AdobeImageReady中可以创建特殊效果,诸如在鼠标滑过或单击图像某一部分时启动和创建交互动画;4.1.4Web图像的基本要求利用图像处理软件,可以很方744.1.4Web图像的基本要求AdobeIllustrator可以用于创建矢量的网络图像。此外,常用的软件还有M

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论