网页设计的要点范例6篇

前言:中文期刊网精心挑选了网页设计的要点范文供你参考和学习,希望我们的参考范文能激发你的文章创作灵感,欢迎阅读。

网页设计的要点

网页设计的要点范文1

本文简要地对网页设计与图形设计进行分析,通过其运用价值的总结,概括出了图形设计在计算机网页设计应用中的要点,以供设计工作者参考。

【关键词】

网页设计;图形设计;运用价值;运用要点

前言

科学技术的不断进步,促进了计算机技术以及互联网的迅速发展,在各个国家基本实现了全覆盖。随着信息时代的到来,人们对于信息的利用更加频繁,对网页的关注度逐渐升温,好的计算机网页设计会给企业以及浏览者带来更大的价值,要想成功吸引更多的人们注意网页,就需要将图形设计完美的融入其中,以达到想要的效果。

1网页设计与图形设计概述

网页设计,是为传递信息而进行页面设计的工作,其主要是依据企业的需求,利用计算机为媒介,将信息展示在浏览者面前。作为一种宣传媒介,网页设计的精美程度决定了浏览者对其的关注度,更绝对了其利用价值的大小。网页设计包含以下种类:功能型网页设计、形象型网页设计和信息型网页设计,其主要利用颜色、字体、图片、样式进行美化设计,根据用户要求策划和设计出满意的网页,高级的网页设计甚至会考虑到通过声光、交互等来实现更好的试听感受。网页设计最为常用的工具包含PS、FL、AL、DW等[1]。图形设计,是网页设计技术中的重要组成部分,影响着网页设计的效果,对提升网页的设计感和感染力具有重要作用。图形设计重在图形,它是传达信息的图像符号,通过不同的表现形式,将作品中要表达的意境表现出来[2],其重在创意上。图形设计拥有众多优势,有直观性、审美性、指示性、象征性等,这些都能够提升计算机网页的设计效果。

2图形设计在网页设计中运用的价值

2.1提升计算机网页设计的艺术效果

图形设计的创新性,可以在计算机网页设计的策划中与众不同,更能够提升计算机网页设计的艺术效果,将网页的别具一格的设计展现在用户面前,让更多的浏览者关注网页,激发用户群体的浏览兴趣,起到更好的传递信息的效果。在计算机网页设计中,利用图形设计中的完整的表达力,为用户打造信息传递的视觉盛宴,保证计算机网页设计的质量。据相关调查显示,最受关注的网页,往往是利用图形设计相结合的。

2.2增添计算机网页设计色彩,向多元化发展

图形设计的形式多种多样,更可以说是资源丰富多彩,其利用音频、图像以及艺术文字的形式进行计算机网页的设计,大大的增添了艺术色彩和愉悦的氛围,并使得传统的单一网页形式向多元化方向发展。传统的计算机网页只是通过简单的元素将信息传递给浏览者,在表达上基本上就是文字配以简单的图片,在信息的检索上更是以文字为主[3],将现代的图形设计加入到计算机网页设计后,用户可以通过音频以及图片进行搜索,这种表现形式的变化图形设计所起的作用功不可没。

2.3加强了视觉冲击力与感染力,更加人性化

计算机网页设计主要是通过文字和图像相结合向使用者展示信息,图像设计是将文字与图像再加工,利用其独特的处理技术,将文字与图像的表现形式更具有视觉冲击力与感染力,能够较深浏览者的印象,提升浏览效率。图形设计能够将文字与图像互相转换,满足浏览者的需求,并给人以简洁美观的效果,更能够体现设计者的理念,使计算机网页设计更加人性化。

3图形设计在网页设计中运用的要点

3.1图片格式设置要符合

在图形设计中,设计工作者一定要注意计算机网页设计中对图片格式的要求,只有符合的才能够实现其利用价值,才能够达到设计方案中的实际效果。我们在浏览网页中,经常会出现图片、音频打不开的现象,使得我们需要的信息没有很好的读取。因此,在计算机网页设计中,一定要合理的处理图像以及连接图片,使其格式满足网页设计的要求,为用户展现良好的视觉效果。

3.2图像大小要控制在要求范围内

在计算机网页设计中,对图像大小的要求非常严格,如果在利用图形设计中不控制好图像的大小,就会严重影响图像在浏览者面前呈现的效果。计算机网页设计本身就收资源空间大小的限制,只有控制好图像的质量与范围,才能够提升网页设计质量。例如,我们在浏览网页时会经常看见一些失真、或者比例失调的图片,不仅影响了我们浏览效果,还严重影响了我们继续浏览下去的兴趣。

3.3图片颜色配置要科学

不同的色彩表现形式有所不同,同一的色彩会显得单调,多种色彩搭配会显得凌乱,在计算机网页设计中使用图形设计时,无论哪种颜色都要优化配置好,并要有一定的科学性。在图形设计中,可以通过PS实际软件对图片进行颜色调整,使其适合计算机网页设计整体色调,为浏览者展示良好的画面感。

4结束语

计算机网页设计本身就具有一定的难度,图形设计的加入使之更加的繁琐,设计人员在运用过程中一定要加以注意,更具网页设计的实际要求进行图形的选择与处理,才能够增强图形设计在计算机网页设计中的视觉效果,实现其使用价值。

作者:占怡 单位:江西乐平市信息中心

参考文献

[1]王正红.探讨网页设计中图形的应用[J].现代装饰(理论),2014,11:86.

网页设计的要点范文2

通过视差滚动技术对网页进行设计,有着多方面的特点。一般的情况之下,网页是由分辨率较高的图像元素进行重新组合而成的,其中,不同颜色和不同组成元素之间的相互交叉,会使得图像呈现出新的面貌。另外,在网页设计之中还应当对视频以及动画等文本形式进行重新设计,以图像为文本的相关内容,并不是对传统文本的摒弃,而是通过对其他文本的内容进行重新融合,形成一个依附于图像文本的次文本形式。另外,通常情况之下的网页设计,一般采用的是单一化的页面排版形式,此种排版的形式舍弃了传统的子网页设计理念,以一种全新的尺寸,来进行页面的重新排版,进而产生出一种强烈的视差滚动设计效果,可以增强页面的艺术性,增强页面设计对于观看者的感染力。

二、视差滚动在网页设计中的应用细节

根据上文针对当前现代化的网页设计工作之中视差滚动相关技术的应用进行综合性的研究,可以明确视差滚动技术操作应用过程当中应当注重的技术原理和技术要点,同时也可以明确视差滚动技术特点。下文将针对技术应用原则进行细致的研究,旨在不断促进现代化网页设计工作的进步与发展,更好的完善基础环节,促进整体设计效益的增强。尽管视差滚动的应用还存在很多弊端,但这丝毫不减观者对此类网页的浏览热情。因为相对于被动接受型的观看方式来说,观者更倾向于互动探索型的观看方式。首先是平面与立体的相互结合,平面与立体的相互结合,可以形成一种独特的三维和二维空间,而通过视差滚动技术的应用,也可以使得一个全新的三维空间得到展示,形成独特的背景层,另外,将前景层以及贴图层进行重新的设计,则可以成为全新的三维展示空间。在鼠标滚动的同时,也是一种相互独立的整体,在静止之时,则可以形成独立的二维空间结构,与三维空间形成有机的整体,上述特性的相互结合,则可以展现出非常特殊的设计效果,给予独特的视觉体验。总的来讲,在网页的设计之中,视差滚动的应用有着相当重要的应用,实践中还应加强技术的分析和探讨。在今后的工作当中,还应当重点的对视差滚动网页的特点及形成原因进行探讨,以更好的深入研究技术核心点,最终促进视差滚动在网页设计中应用的水准不断提高,为新时期的网页设计工作稳步向前发展作出必要的贡献。

三、结语

网页设计的要点范文3

关键词 网页设计 课程整合 课程体系 课程设置

1 引言

“计算机网页设计”是近年来计算机专业领域发展最快和应用最广泛的课程之一,当今社会急需培养掌握计算机网页设计、面向不同应用层次的专业人才。因此,学生对这门课程教学的要求越来越高。面对众多的网页设计技术和课程,如何为各类学生开设好“计算机网页设计”课程,需要我们积极思考。

作者根据在大、中专学校讲授“计算机网页设计”课程的切身体会,结合自身多年企业网站开发设计的实际经验,就目前如何面向各类院校不同层次的学生开设“计算机网页设计”方面的课程进行探讨。

2 “计算机网页设计”课程体系分析

“计算机网页设计”作为一种专业技能的培养,不是作为一门课程孤立存在的,它要靠多门学科的知识给予支撑。它们相互渗透和依赖,因此构成一个科学的、完整的课程体系。

根据图1所示,如果暂不考虑网页设计涉及到艺术类的课程外,我们可以把“计算机网页设计”的相关课程大致分为三类:“计算机网页图形图像、动画设计”课、“静态网页开发与设计”课、“网站管理和动态网页开发与设计”课,如表1所示。

其中,动态网页设计的课程,内容和方向比较明确,学习难度大,可根据学生的知识结构层次和培养方向选择开设。

3根据培养目标进行课程内容的整合

面对如此众多的网页设计课程,如何有针对性、有选择,又最有效地为学生开设计算机网页设计课程,应达到怎样的培养目标,根据培养目标进行怎样的课程整合,这是本文要说明的主要问题。

3.1知识速成型课程整合

“计算机网页设计”是一个学科体系,但作为一个普通学生,不可能花大量的时间用在学习图形设计、程序设计等知识上,他们想用最短的时间掌握简单又实用的网页设计技能,以应对日常的工作。基于这种想法,我们可以将计算机网页设计课程整合成两门课程:

(1)Photoshop

(2)Frontpage

这种课程整合是以Frontpage为教学主线,中间集中花一两周讲述或授课中穿插讲述Photoshop知识。由于Frontpage与Word同出一宗(Word是新生入学后必学的一门计算机基础课程),界面十分相似,学生学习起来很容易上手,因此,Frontpage是学生学习网页设计入门的最佳课程。Frontpage 课程教学的重点在于:编辑网页、超级链接、使用表格、运用框架、应用组件等。在网页设计中,必然会涉及到图片的处理,而Photoshop是图片处理普及率很高的工具之一,是网页设计者必须掌握的一个软件工具。Photoshop课程教学内容偏重于图像尺寸大小设置、格式转变、简易GIF制作、工具箱的使用等。通过这两门课程,学生可以掌握网页设计的基本技能,能够对一些结构简单的网页进行设计。

3.2网页设计师型课程整合

学生的需求层次不仅仅局限于制作简单的网页,越来越多的学生更希望在国际互联网上拥有自己的一片天地,在网页设计方面追求技术与艺术的完美结合。因此,网页设计师型课程整合应运而生。网页设计师岗位要求工作人员不仅了解网页或者网站的目标、对象、定位、风格要求、功能等基本需求,还要将效果图变成具体的页面,所以网页设计师要精通设计和制作。我们将网页设计师的课程整合为三门课程:

(1)Dreamweaver

(2)Fireworks

(3)Flash

Dreamweaver、Fireworks、Flash是Macromedia公司的旗舰产品,号称“网页设计三剑客”。这种课程整合是以Dreamweaver为教学主线,中间集中三至五周讲述Fireworks和Flash知识。这三门课程对于非计算机专业学生而言,学习起来存在一定的难度。Dreamweaver课程授课内容重点为:HTML基础构建、网站的开发、页面设计制作、动态广告效果、网站的文件上传与维护、可视化的网页设计和网站管理工具、可视化网页设计、图像编辑、处理Flash、Shockwave等媒体格式和动态HTML、基于团队的Web创作。Fireworks课程授课重点为:网页图形图像制作及优化、GIF动画、动态网页及菜单、创建网络相册、制作网页上很流行的阴影、立体按钮等效果。Flash授课内容重点为:网页动画制作及设计艺术、动态按钮设计、动态加载页面。通过这三门课程的学习,学生可以掌握网页设计师岗位技能要求,对一些中小型企业网站进行独立的设计和开发。但要达到一个熟练的程度,还需要在长期的实践训练中巩固和运用。

3.3 程序开发型课程整合

目前各类院校的计算机实验条件普遍较好,学生对于静态网页设计软件自学起来相对容易。由于网页设计的主流技术在于动态网页的开发与设计,学生在实践中也碰到诸如用户注册、用户登录、在线调查、用户管理、订单管理等动态网页,这些功能仅仅有静态网页制作技术是无法实现的,因此程序开发型网页设计课程整合正是为有一定的静态网页基础的学生开设的。程序开发型网页设计课程整合为三门课程:

(1)HTML超文本语言

(2)网络数据库的应用

(3)动态网页开发技术

这种课程整合以动态网页开发技术课程为教学主线,授课前集中一周讲述HTML超文本语言的知识,授课中期涉及到Web数据库访问时,则集中两周讲述网络数据库的知识。动态网页开发技术可选择ASP、、JSP、PHP等交互语言来教学,建议选取ASP作为教学内容,原因是ASP为微软新一代开发动态网页的技术,具有开发简单、功能强大等优点,可以非常直观简易地实现复杂的Web应用,十分适合初学者学习。动态网页开发技术――ASP授课内容重点为:运行环境的调试、VBScript、JavaScript、ASP内置对象、ASP组件、ADO技术、ASP的调试及效率、Web应用程序案例。HTML超文本语言授课内容重点为:HTML基本结构、页面布局、文字设计、列表、表格、超级链接、多媒体效果、框架。网络数据库的应用课程可选用SQL 2000作为教学内容,它可以很好地与ASP技术结合,其授课内容重点为:建立数据库、删除数据库、建立表、删除表、建立索引、创建存储过程、创建触发器、结构化查询语言。通过这三门课程的学习,学生可以掌握一些交互式网站建设的基本技术,可设计和开发出简单的Web应用程序,如留言板、BBS、聊天室、注册系统、查询系统等。

3.4 网站管理员型课程整合

无论静态网页或是动态网页,最终都要上传到互联网,供用户访问,并且需要不定期对网站进行更新和维护。网站管理涉及到多种技术,既要懂得一般性网页设计,还要懂得网站的建设和维护。因此,网站管理员型网页设计课程可整合为两门课程:

(1)Dreamweaver

(2)网站建设与管理

这种课程的整合是以网站建设与管理课程为教学主线,授课前几周讲述Dreamweaver知识。网站建设与管理的授课主要内容为:域名、IP地址、网页空间、IIS的设置与管理、建设FTP服务器、建立虚拟目录、安装DNS服务器、安全管理技术、CGI交互技术等,其中IIS的设置与管理是网站建设与管理的重要内容。Dreamweaver授课的主要内容为:定义站点、页面设置、文图编辑、首页、子页、表格、框架、导航条、网页、可视化网站管理。通过这两门课程的学习,学生可以掌握网站建设和网站管理的基本技术,能处理网站运行中出现的一些简单问题,可独立完成一个中小型网站网页设计、建站、管理、维护工作。

3.5版面设计师型课程整合

网页追求版面美观,是为了更好地传播网页信息。作为一个初学网页设计的人,一般不会关心是否使用与主题相符的字体和图形,这往往是造成网页丧失可观赏性的主要原因。随着对网页设计技术感兴趣的学生越来越多,如何能制作美观、层次分明的网页页面,成为很多网页设计爱好者的一个热门话题。在版面设计元素中,图像是很重要的一个组成部分,网站整体的版面设计效果直接取决于所设计的图像效果,因此,我们在设计版面设计师型网页设计课程时,偏重于网页图像图形方面的教学,版面设计师型课程可整合为三门课程:

(1)Photoshop

(2)CorelDraw

(3)Fireworks

这种课程的整合是以网页版面设计内容为教学主线,每门课程花4周左右的时间讲述,剩余6~8周则是结合3门课程进行版面设计案例练习与讲解。Photoshop的主要授课内容为:绘画工具、创建选区、通道与蒙版、图层应用、滤镜效果、切片。CorelDraw的主要授课内容为:绘图基础、基本设置、绘图工具、基本绘图、填充对象与高级绘图、文字与排版、排列与管理对象。Fireworks的主要授课内容为:文档基本操作、图像的绘制及修改、颜色的调整及填充、位图文件处理、图层与蒙层、图像优化、热点、切片和轮替按钮技术等。通过这三门课程的学习,结合课程案例的练习和课程设计,学生可以掌握网页版面设计要点,明确网页版面设计的步骤,设计出有一定特点和较为专业的网页。

4 结束语

这些课程整合措施在我院实施了两年,一方面是运用在选修课上,另一方面运用在一些网络课程专业,如市场营销、电子商务、海关业务等,我们开设与专业相关的一些网页设计课,收到不错的教学效果,学生均反映很好。但“计算机网页设计”毕竟是一门新型的学科体系,每个学校均有自身的实际情况,如何更加科学和合理地开设课程和整合课程,需要广大教育工作者不断探索和创新。

参考文献

[1]韩陵宜. 高职院校“网页制作”课程教学的探讨[J].电脑知识与技术,2005,6.

网页设计的要点范文4

网页设计作为一种网络应用程序被普遍应用在互联网上,设计开发具有创新风格和专业水准的网页已成为高职高专院校许多学生的必备技能。因此,《网页设计》成了目前高职高专院校IT类相关专业学生普遍开设的基础技能课程,甚至在许多高职高专院校也是非IT类专业学生的公共选修课。网页设计作为UI(UserInterface)的一种,体现了设计者的设计思想和专业技能,所以《网页设计》相对于其他专业课程有自己的特点,他不仅体现了技术性,更体现了他的艺术性、个性体现等特点。

(一)技术性网页

作为一种应用程序,开发者必须具备一定的网络知识和编程思维,对基础的HTML语言和CSS规则以及JavaScript技术都要熟练掌握,并且对网页开发软件比如网页三剑客(Dreamweaver、Flash、PhotoShopCS)也要熟练使用。随着网络技术日益发展和多媒体在网页中的传播,客户对于网页的要求也越来越高,例如,交互式动画、在线视频、三维虚拟展厅、在线数据库管理等。所以网页设计课程对技术要求具备一定的知识的积累和掌握。

(二)艺术性网络

已经成为一种互动的大众媒体,由于其他各大媒体包装的越来越商业化,网页作为人们天天交互的界面,人们对他的外观的要求也越来越高。既要把设计艺术中的构成因素整合到网页设计艺术中,又要集多媒体技术于一体。尤其是现在的客户对网页的视觉冲击力和它的艺术感染力提出更多的要求。所以我们的网页设计课程更要培养学生的审美情趣,在课堂上展示更多的国内外的优秀作品,还要学习平面设计及其色彩学等知识,吸取其他平面设计的灵感,使学生的作品不仅有可实用性,更具有可观赏性。

(三)个性网页

作为平面设计的一种,必然体现了设计者自己的设计理念和设计风格,并张扬自己新颖独特的个性。所以在网页设计课程中,要尽量调动学生的自主性和积极性。所以教学过程中,教师不仅要重视学生对书本知识的理解,更重要的是激发学生的创新能力。在课程考核的时候,教师可以结合知识点以项目要求的形式布置题目,让学生分组选择项目或者自己调研确定项目,小组合作进行项目规划和页面设计。

二、网页设计时尚教学注意要点

(一)时尚的网页布局

网页布局是网页给人的整体印象,和其他平面媒体一样将信息分版块清晰的呈现给读者。在过去的几年内,网页设计的布局已经形成了几种固定的格式,大致可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型。但是现在的客户要求自己网站在美术上要符合自己企业的文化定位和企业形象,希望自己网页的布局,要不拘一格地给人留下深刻的印象。当下网站已经被企业视为自己宣传和传播的一种重要的媒体形式,所以越来越多的视觉传媒公司加入到网页设计的行业中来,导致大量的美术人才参与到网页创作中来,大大提高了网络中网页版面的艺术气质。这些人设计的网页作品往往构图考究、精美绝伦、简洁明快,富有时尚气息,更重要的是他们的网页的布局常常的出人意料,又显得赏心悦目。所以在教学过程中,除了让学生掌握几种常见的布局形式之外,更重要的是鼓励学生打破常规,以自己青春和具有鲜活生命力的视角,结合颜色、构图、和文字,去大胆地规划网页版面的布局,结果往往会有非常好的作品出现。

(二)时尚的网页色彩搭配

色彩在网站信息传达中发挥着重要作用,透露了每个企业独特的企业文化。网页的背景,文字,图标,边框,超链接等要采用合适的颜色搭配才能准确表达出设计内涵。对于初学者来讲,在设计时往往盲目的胡乱搭配颜色,给人非常纷乱的感觉。那么在教学过程中,就要向学生补充色彩原理的相关知识,以及网页设计中颜色搭配的规则常识,比如网页的颜色不能超过三种,背景和前文的对比尽量要大等等,并向保证网页中的颜色的鲜明性、独特性、合适性。网页作为一种电子艺术形式,和服装、包装一样都有流行的潮流,所以一个网站的版面往往会随着时尚的波动而修改,比如现在流行的韩国清新风格、欧美的时尚简约风格、90后的非主流风格等等。而我们的学生往往对时尚是最敏感的人群,也是互联网最忠实的用户。所以我们在教学过程中,教师要提高学生的艺术品位,准备丰富的教学资源和设计资源,介绍学生使用几种常用的网页配色工具,并鼓励学生大胆合理地使用颜色去创作具有视觉冲击的优秀作品。

(三)网页主流技术的综合应用

网页除了色彩和布局等方面的更新要求之外,网页的表现形式也随着使用者的要求也在更新换代,传统的网页布局方式从表格布局,逐渐得被CSS+DIV布局的形式所替代,所以教师要将新技术要映射到我们的课堂上去,引导学生用?CSS+DIV的布局的理念充斥自己的头脑。教师更可以设置相同的DIV内容,让学生去设计不同的CSS规则,这样可以让学生直接地体验到CSS+DIV的局部优势。除了布局的技术在更新,网站首页的呈现形成也在发生变化,在首页中大幅广告的使用可以让使用者留下深刻印象,Flash交互按钮可以增强使用者的体验乐趣,这些表现形式要用到Flash软件和JavaScript脚本语言,所以在我们的课堂中教师要关注技术流行趋势,将技术代码介绍给学生使用,并指导学生运用到自己的网站作品中。

网页设计的要点范文5

关键词:视觉风格;审美情趣;用户体验

1图标设计的原则与风格

移动终端的大规模普及让过量的信息涌向客户端,受众产生了对信息的识别失能。所谓信息识别失能是指在信息过量的情况下,受众不能有效地消化这些信息,信息群转化为无效的信息符号。为了有效解决信息接收用户对信息的识别困境,标准化和识别特征明显的图标设计成为网页设计的重要视觉元素和关键性信息识别标志。以下笔者将就网页设计的图标风格定位和设计原则进行总结和阐述。

(1)网页设计图标使用信息适量原则。

网页指示图标信息表达不宜过量,如果网页交互指示图标传达的信息超过信息受众的一般信息接收量,图标信息在传达的过程当中很容易导致信息受众的识别失能。并且,由于短时记忆的信息容量很小,信息接收用户和网络程序使用者在选择图标指示时是调动自身大脑指挥的短时记忆,因而网页视觉图标应该表达适量的信息。

(2)网页设计图标使用合理性原则。

在图标设计之前,应该由相关设计人员进行实地调研,重视网站使用者的用户体验和感受。充分研究网络信息使用者通过“手段目的”解决通用问题的方式的操作行为特性,并考虑使用者在操作上发生错误的各种可能性,研究图标使用的可能性和合理性。

(3)网页设计视觉图标的含义清晰明确的原则。

尽量不选择容易造成含义混淆的视觉图标,含义清晰明确的视觉图标便于人明确获得操作步骤的信息及正确做出选择判断,而图标含义的不明确,会让受众无法操作对操作行为产生不愉快的知觉感受。简洁的图标使人对操作的感知更容易被储存记忆激发,在转化成愉快操作信息后记忆加深。

(4)网页设计视觉图标的目标用户熟悉度原则。

尽量使用信息接受者和目标用户更为熟悉的认知图形,或者使用目标消费者通过视觉呈现元素的刺激更容易产生联想的图标。例如,要表达“购物商城”这一操作信息,用购物车、购物篮等视觉图标更容易唤起人的联想和熟悉度,从而更好地理解图标的含义,以及该图标与其他图标的区别。

2色彩的渲染与运用

色彩是网页设计和用户体验当中重要的印象元素,它是美丽而丰富的,它能唤起人类的心灵感知。举例来说,红色是热情奔放的颜色,象征蓬勃的生命力和进取精神;黄色彰显活力、华丽、明快;绿色就像广袤开阔的草原铺陈出的颜色,意味着纯净、无污染、宁静和生长,带给消费者和网站信息受众安宁、和平与安全的视觉印象。颜色是光的折射产生的,红、黄、蓝是三原色,其他的色彩都可以用这三种色彩调和而成。在网页设计的视觉艺术风格呈现和展示的过程当中,网页设计师可以用颜色的变化来表现光影效果的变化和商品的质感,这无疑将使网页设计作品更贴近目标用户人群。色彩代表了不同的信息内涵和情感指征,给网站目标用户带来完全不同的视觉印象和信息指示。色彩渲染和光影明暗在网页设计中所蕴含的象征含义是网站目标用户所能感知到的信息特征和品牌印象,它因人的年龄、地域、时代、民族、阶层、经济地区、工作能力、教育水平、风俗习惯、、生活环境、性别差异而有所不同。网页设计当中单纯的颜色变化和选择并没有重大的视觉意义,而不同颜色的搭配和渲染则能够带来有效的视觉用户体验,它所表现出来的效果也不同。例如,绿色和金黄、淡白搭配,可以产生优雅,舒适的气氛;蓝色和白色混合,能体现柔顺、淡雅、浪漫的气氛;红色和黄色、金色搭配能渲染喜庆的气氛。设计的任务不同,配色方案也随之不同。在进行网页设计时,应当充分考虑到网页视觉体验的普适性,尽量使用能让大众产生共鸣和愉悦感的安全配色方案。

3基于用户体验的网页设计过程

设计的实现可以分为两个部分。第一部分为网页的版面布局,第二部分为网页的制作。基于良好的用户体验而进行的网页设计首先要关注整个网页的版面布局。我们可以将网页看作传统的报刊杂志来编辑,这里面有文字、图像乃至动画,我们要做的工作就是以最适合的方式将图片和文字排放在页面的不同位置。第二个步骤就是网页设计师通过相关的设计软件来对视觉元素进行组合,将设计的审美构想变为现实。视觉元素包括了颜色的铺陈和碰撞,介绍文字的字体形态变形等视觉效果,图片形状风格的使用,动画效果的设计和渲染和布局造型的重叠铺排。

4网页设计元素的有机组合

在网页设计中,我们主要通过视觉传达来表现主题。在视觉传达中,视觉元素的有机组合是交互网页设计当中很重要的一个设计环节。交互网页画面上的图片、文字、图标、动画等视觉元素可以统一作为画面的基本构成要素点、线、面来进行处理。在一幅成功的作品里,需要点、线、面的有机组合与搭配来呈现一个视觉风格独树一帜、和谐优美的交互界面。网页设计当中可以使用的组合手法有秩序、比例、均衡、对称、连续、间隔、重叠、反复、节奏、韵律、归纳、变异、特写、反射等等,它们都有各自的特点。在交互网页设计当中应根据网站宣传主题和机构形象地位,选择最适合的视觉元素组合方式,这样有利于网站设计主题的表现。交互网页设计通过点、线、文字、图片、光影、颜色等元素的有机组合,可以充分展现交互页面上的重要元素,突出设计的主题,增强美感,让观者在感受美的过程中领会设计的主题,从而实现设计的任务。造型的巧妙运用不仅能带来极大的美感,而且能较好地突出网站机构的品牌形象。将网页上的各种元素有机地组织起来,它甚至还可以引导目标使用群的视觉注意力和强烈的用户体验欲望。

5基于交互体验的网页设计原则

网页交互设计是有原则的,无论采用什么样的设计手法对画面中的元素进行组合,都应当遵循以下四大原则:分割、统一、对比及和谐。分割是指将交互页面分成若干个小块,小块之间有视觉上的明显区分,这样可以使目标受众对交互网站的分类信息设置一目了然。在交互网页信息量庞大的情景下,使目标受众能够清楚观察并点击自己需要的信息,这个信息甄别过程离不开对交互页面进行有效的分割。分割不仅是视觉呈现形式的需要,换个角度来讲,分割也可以被视为对于页面内容的一种分类归纳。统一是指设计作品的整体性,一致性。设计作品的整体效果是至关重要的,在设计中切勿将各组成部分孤立分散,那样会使画面呈现出一种枝蔓纷杂的凌乱效果。交互页面视觉元素的对比就是通过层次参差和颜色碰撞,使网页设计风格更加富有生气。对比手法很多,如强与弱、粗与细、明与暗、长与短、疏与密、虚与实、主与次、黑与白等等。交互网页设计当中使用对比的设计手法应当谨慎,层次参差与视觉元素对比过强容易破坏美感,影响网页视觉风格的统一。和谐是指整个交互页面设计风格符合美的标准,浑然一体。如果交互网页设计师认为网页设计仅仅是数字、图片、动画等元素的任意混合,那么网页设计作品将不但没有“生动风格”,而且也根本无法实现网站主旨的视觉设计功能。交互设计和谐不仅要看视觉元素的布局是否和谐,最重要的是网站目标用户的使用体验和视觉印象,这才是成功的网页设计风格与用户体验的二元交互。

参考文献:

[1]邬燕,邱海涛.体验UI用户界面设计[D].2004年国际工业设计研讨会.

[2]张新红,吕文静.网页设计与制作[M].北京:化学工业出版社,2009.

网页设计的要点范文6

1.1教学目标与职业岗位相衔接

高职《网页设计与制作》课程相关的职业岗位主要有:网页设计与制作、网页美工、网站管理、界面设计、网页编辑等。教学目标的制定应包括技能目标和职业素养目标两个方面。从技能要求方面,传统的《网页设计与制作》设计课程的教学目标要求主要包括掌握网站的建设与管理;熟练使用Dream-weaver,Flash和Potoshop,也是就是俗称的“网页三剑客”制作静态页面。而对于计算机网络专业、计算机应用专业和电子商务专业的学生来说,Flash和Potoshop只能达到会使用软件,与同样开设《网页设计与制作》的美术专业的学生相比,他们显然没有优势,也达不到网页美工和界面设计岗位要求。因此,计算机网络专业、计算机应用专业和电子商务专业的《网页设计与制作》课程相关的职业岗位主要有:网页设计与制作、网站管理和网页编辑等。由于web2.0标准的出现,现在网页设计与制作以及网页编辑等工作不仅要求会用Dreamweaver软件,而且要用web2.0标准的要求进行网页设计与编辑,对JavaScript网页脚本编辑要求也比较高。因此《网页设计与制作》教学目标中对技能的要求应该是掌握网站的建设与管理;熟练使用Dreamweaver制作静态页面;熟练掌握CSS与DIV对网页进行布局与设计;掌握JavaScript的基本语法并能使用JavaS-cript做简单的动态页面效果。由于JavaScript属于网页脚本编程,也可以将JavaScript作为独立的课程放在《网页设计与制作》课程之后学习。从职业素养方面,传统的《网页设计与制作》课程的教学目标中对于职业素养的培养提及得较少,而对于企业来说,职业素养是很重要的。从图1电子商务网站开发流程中不难看出,一个网站的建立到页面设计,再到网站的运行与管理必须有一个团队才能完成,团队里的每一个人都需要有合作精神,要对自己所负责的工作尽心尽力;网站是为客户而建,页面的设计也是需要满足客户的需要,因此,与客户的沟通显得格外重要;网页设计技术不断更新,网页内容可涉及到各行各业,因此,从业人员也需要不断提高自己的技术水平,同时能够涉足更广的知识,这些对于从业人员的自学能力提出了一定的要求。根据职业岗位对职业素养的要求,《网页设计与制作》课程应培养学生的团队合作精神、敬业精神、沟通能力和自学能力。

1.2课程设置和内容与职业资格标准相衔接

高等职业教育主要培养适应社会需求的高技术人才,衡量培养出来的学生是否是高技术人才,目前主要以取得职业资格证书为标准。与《网页设计与制作》课程相关的职业资格证书主要是CIW认证网页设计师,国内是CIW中国认证网页设计师,主要是对网页设计制作人员、Web开发人员及网页设计爱好者综合应用网页制作开发工具进行专业、高效Web设计与制作能力的权威认定。图2中显示的是CIW中国认证体系,从图中可见,CIW认证网页设计师证书需要“网页制作专家”、“动画制作专家”和“图像处理专家/平面设计专家/平面设计师”三科认证证书才能获得,《网页设计与制作》课程可以将“网页制作专家”认证的考试体系和考试内容作为课程设置与课程内容选择的标准,这样可以使课程设置和课程内容与职业资格取证相衔接。教师在教学过程中,可将所选的教材为基础,参考CIW网页制作专家认证考试大纲,将考试大纲的培训内容部分和认证考试要点部分作为主要的教学内容和教学目标,将教材内容进行调整,突出教学重点和难点。由于教学学时有限,学生又是从零点开始学习,教师可向学生提供网络学习资料,并提供近年来的CIW网页制作专家认证考试试题给学生练习。这样不仅巩固了课堂教学效果,而且还能培养学生的自学能力。

1.3教学过程与实际职业情景相衔接

职业教育突出的是教育的职业性,而一般高职学校的教学环境和教学条件还是传统的教学环境和教学条件,《网页设计与制作》课程的教学过程一般是在教室和机房里完成,无法让学生走进真正的职业情景。近年来,通过采用项目教学法、案例教学法、“教学做”一体化等新的教学方法以弥补这一空白,教学案例从简单的页面制作案例已经向项目化案例转变,教学内容从以前的重“理论”轻“实践”已经向以“理论”促“实践”,在“实践”中学“理论”转变。但学生如果毕业后直接从事网站建设、网页设计等工作,仍然不能很快地适应,因为教学中的“案例”和“项目”并不是真正的项目,教师和学生所处的教学情景不是实际的职业情景。要做到教学过程与实际职业情景相衔接,首先要了解实际的网站开发流程。首先是设计者与客户沟通制作意向,然后为用户制作网站规划方案,再同客户洽谈设计细节,如果双方达成共识,客户要提交网站相关资料,接下来设计者设计网站首页,客户对首页审核通过后,设计者再做整体设计,得到客户的最终确认后,将网站上传到服务器上,一个网站的开发才算完成。从这个开发过程中不难看出,仅仅靠教师在教学中让学生做若干个网页是无法达到一个项目对设计者的要求。学生要成为一个好的网页设计师,首先要会和客户沟通,了解客户的意图,才能做出客户想要的网页效果。其次要有团队精神,一个网站开发一般是由一个设计团队完成,如有人负责与客户沟通,做整体设计;有人负责美工部分;有人负责页面设计;有人负责页面脚本编程等,团队中的每个人都需要合作才能完成整个网站的开发。再是实际操作能力,对网页设计所需要的技能掌握得比较熟练,才能在规定的时间内完成任务。因此,教师在教学工程中也需要尽可能地让学生感受到实际职业情景。如在学习开始的时候就把学生分成几个团队,学生在团队中的角色是设计者,而教师在团队的角色不仅是教师,还可以是客户。当学生掌握一个章节的知识和操作技能后,教师可提出一项设计任务,让团队中负责设计的学生提出若干问题,以了解任务的需求,再给每个团队同样的设计素材,让团队拿出1-2个设计方案,最后拿出最终的页面设计。在学习完整个教学内容后,可提出一个综合性的设计任务,每个团队在规定时间内拿出自己的作品,然后进行演示和讲解,由每个团队代表进行打分,每个团队所取得的成绩可作为团队成员考试成绩的加法项目。这样的教学情景设置,不仅符合网页设计实际职业情景,通过工作过程导向教学,而且培养的学生的沟通能力和团队精神。学生在做项目的过程中肯定会遇到课堂中没有讲过的问题,这就促使他们课后去找资料来解决,从而锻炼了他们的自学能力。

2结束语