（设计艺术学专业论文）论网页设计课程的教学设计.pdf

南京艺术学院硕 ：学位论文 论网页设计课程的教学设计 中文摘要 网页设计是一fj 包含了网络基础、平面设计、动画设计、视频音频等多方面基本 要素的综合课程。作为一种建立在新型媒体之上的设计，网页设计具有很强的视觉效果、 互动性、互操作性、受众面广等其它媒体所不具有的特点，但是学生在学习完网页设计专 业课程后，并不能制作出效果非常好的作品，因为在教学的过重中，往往只重视了软件的 学习与运用，忽略了最重要的设计。 虽然现在很多院校都开设了网页设计课程，但大多数在课程设置上没有对设计与 软件的结合找到很好的切入点，冈此本文在研究分析了优秀的课程设计之后，做了一些相 应的课程设计，实现教学中技术与设计的结合。 关键词：网页设计网页设计课程设计思维形态分析视觉语言创意思维交互 v i 南京艺术学院硕上学位论文 as t u d yo nt h et e a c h i n gp l a nf o r “w e bd e s i g n “c o u r s e a b s t r a c t w e bd e s i g n i sai n t e g r a t e dc o u r s ei n c l u d e sn e t w o r k f o u n d a t i o n ，g r a p h i cd e s i g n ，a n i m a t i o nd e s i g n ，v i d e o ，a u d i o ， a n dm a n yo t h e re l e m e n t s a sat y p i c a lk i n do fd e s i g nb u i l d i nn e wm e d i a ，w e bd e s i g n i n gi se x c e l l e n to nv i s u a le f f e c t s ， i n t e r a c t i v i t y ，i n t e r o p e r a b i i i t y ，a n db r o a da u d i e n c e m o s to f t h es t u d e n t sa r en o tc a p a b l et od e s i g nt h ew e bw i t hv e r y g o o dv i s u a le f f e c t si n d e p e n d e n t l ya f t e rf i n i s ht h ec o u r s e b e c a u s eu s u a l l ym a i np o i n to ft e a c h i n gi so ns o f t w a r eu s i n g b u tn o th o wt od e s i g n s oim a d es o m em o d i f i c a t i o nt ot h e c o m m o nc o u r s ea f t e ra n a l y z i n gm a n yg o o dc o u r s e s it h i n k t h ec o n t e n ti nt h i sc o u r s ea r ef o c u so nb o t ht e c h n i q u ea n d d e s i g n i n g k e y w o r d s ： w e bd e s i g n 、w e bd e s i g nc o u r s e s 、d e s i g nt h i n k i n g 、 m o r p h o i o g i c a l a n a l y s i s ，v i s u a ll a n g u a g e ，c r e a t i v et h i n k i n g ，i n t e r a c t i v e v i i 南京艺术学院硕i ：学位论文 南京艺术学院研究生学位论文独创性声明和使用授权书 独创性声明 本人声明所呈交的学位论文是本人在导师指导下进行研究工作取得的研究成果。本 人声明：除了文中特别加以标注和致谢的地方外，论文中不包含其他人已经发表的或撰 写过研究成果，也不包含其他人为获得南京艺术学院或其他教育机构的学位或证书而使 用过的材料。与我一同工作的同志对本研究所做的任何贡献均已在论文中作了明确的说 明并表示谢意。 学位论文作者签名： 签字日期：矿矿年年月厂日 学位论文使用授权书 本学位论文作者完全了解南京艺术学院有关保留、使用学位论文的规定，即南京艺 术学院有权保留并向国家有关部门或机构送交本院博士、硕士论文的复印件和磁盘，允 许论文被查阅和借阅。本人授权南京艺术学院可以将学位论文的全部或部分内容编入有 关数据库进行检索，可以采用影印、缩印或扫描等复制手段保存、汇编学位论文。 ( 保密的学位论文在解密后适用本授权书) 学位论文作者签名：氲律 签字日期： o 嚣年印月i 歹日 i l 导师签名： 签字日期： d p 年4 月矿日 ，律 ，豫 南京岂术学院预 = 学位论文 引言 网页设计是一门高度综合的课程，是一个庞大的体系，包含了网络基 础、平面设计、动画设计、视频音频等多方面的基本要素。作为一种建立在新 型媒体之上的新型设计，网页设计具有很强的视觉效果、互动性、互操作性、 受众面广等其它媒体所不具有的特点，它是区别于报刊、影视的一个新媒体。 它既拥有传统媒体的优点，同时又使传播变得更为直接、省力和有效；为了适 应当今时代发展，必须增加艺术设计院校的网页设计课程，将它和传统媒体进 行比较，了解它的优势所在；一个成功的网页设计，首先在观念上要确立动态 的思维方式，其次，要有效地将图形引入网页设计之中，增加人们浏览网页的 兴趣，在崇尚鲜明个性风格的今天，网页设计应增加个性化因素。 十六大提出要大力发展教育和科学事业，把教育摆在优先发展的战略地位， 全面贯彻党的教育方针，坚持教育创新和全面推进素质教育，并且开展了精品 课程建设工作。建设精品课程的核心就是解决好课程内容建设问题，从而提高 学生质量，推动优质教育资源的共享，使学生得到最好的教育，从而达到全面 提高教育教学质量的目的。随着全国精品课程工作的开展，各个院校都着手对 课程教学进行相应的改革，网页设计课程也不例外。我们可以看到，许多院 校对这门设计课程提出了一些新的内容，使之更适应社会与学生的需要。作为 一名多媒体设计专业的研究生，我在学校的时候学习过网页设计的课程，也参 与过网页设计课程的教学，在学习与教学的过程中对网页设计课程教学中存在 的一些问题进行了思考。 论嘲贞设计课程的教学设计 第一章网页设计的设计 第一节软件不能替代设计 网页设计关系到一些技术软件的使用，如d r e a m v e a v e r 、f l a s h 、f i r e w o r k s 、 p h o t o s h o p 等等，但是网页设计是技术与艺术相结合的一门设计学科，软件操作作为技 术手段是最终帮助实现设计的辅助工具。 作为艺术设计相关专业的一门主干专业必修课，网页设计课程一般的总学时为6 4 学时，要在这6 4 个学时里充分解决设计软件的教学并不是一件容易的事，这就从另一 个侧面体现了教学过程中对设计部分的教学含量达不到这门课所需要的程度。网页艺术 设计以视觉艺术为主要表现形式，是网站建设从技术形态的延伸。网页艺术设计涉及平 面、网络、音频、视频等诸多内容，但这些内容之间不是孤立存在的，而是互为依存的 关系。设计师以技术和艺术经验为基础，依照设计目的和要求，自觉地对网页的构成元 素进行艺术的创造性思维活动，创造出艺术化、人性化的浏览界面。它不仅与网站主题 的策划、访客的定位、智能交互的实现、网站的宣传推广等有密切的关系，还包括对图 形图像处理、版式设计、音频和视频编辑等方面的艺术化处理，包含了审美的基本要素， 如造型、色彩等视觉传达设计中的因素等，有着庞大的知识体系，不仅仅是会使用一两 个网页制作软件就能解决问题的。 序号 教学内容总学时讲授上机实验 lf i r e w o r k sm x2 0 0 4 基础、文档操作 431 2 绘制矢量图形、图像编辑 43l 3 文字制作、位图制作431 4 层和遮罩、按钮制作 43 1 5 动画制作431 6 切片制作、优化导出431 7 网页制作基础、网站的创建43l 8 网页文字制作、网页图像处理43l 9超链接制作、表格制作 43l 1 0布局视图、框架网页制作 431 1 1 层的使用 43 l 1 2c s s 样式表、模板与库 431 1 3行为的席用、 43l 1 4 多媒体网页制作 4 3l 1 5扩展的使用 43l 1 6综合网站实例与实际应用4 4 上图是某个学校网页设计课程的教学计划，浏览大多数网页设计课程的教 学大纲，在网上搜索“网页设计”或在书店寻找网页设计的相关书籍，均发现所涉及的 内容实际上绝大多数仍然是对设计软件使用的介绍，而没有谈到设计。其实质都是网页 2 论州爽i 芟汁谍槿的敦掌驶计 制作，与设计思维无关，只是一些设计软件技术的传授，与一般职业技术学校以及社会 上的电脑培训学校的教授课程无异。然而作为设计学院的专业课，网页设计应当是指将 一整套的设计思维( 如整个网页的风格定位等) 贯串在整个网页设计的教学过程中，这 也是一个网页形象的建立，而不单单只是设计软件的操作，单纯操作这样的设计课程是 没有任何意义的。我们在进行网页设计课程设置的时候应当分清设计与制作的轻重关 系，技术只能作为设计的一个辅助工具，帮助我们实现设计作品。如果想要在课堂内同 时解决设计与制作的问题，一方面，可以增加学时，或者要求学生在课程开始前先掌握 软件的使用，这样对课程中的设计部分的内容不会造成太大的压力。 第二节有待提高的设计思维 所谓设计思维，即指创意、方法、实施等等。掌握设计思维的方法可以有联想、同 构、整合等等。联想需要学生阅读大量的书籍，拓宽知识面，平时多观察生活，注意细 节；同构的方式可以带来趣味性，增强视觉观感，吸引受众；整合则指多种信息的结合， 例如文字、图形、排版等视觉元素的综合。网页设计是内容与形式的结合。纵观互联网， 能够让人过目不忘的，不仅仅在视觉艺术，在操作、阅读环境及技术实现的效果等方面， 同样可以确立网站独特的风格。形成独具风格的网页，一是视觉设计的独特性，一是文 化信息传达的准确性，既要构思有别于其他网站作品，又不能一味追求特殊忽略了信息 根源。上面这些都不是单纯的技术教学或者学习就可以实现的，要从网站的信息根源出 发，将内容与形式结合，准确的传达网站信息。而我们的学生，一般，拿到一个网页设 计的课题，第一件事是上网或者翻阅资料查找类似的网站，选择风格相近的进行参考， 直至变成了照搬，但这只是从形式上的一味模仿，而忽略了别人的想法与观念，以至于 设计出千篇一律毫无特色和生命力的作品。或者，他们只关心这个网页上的按钮效果是 如何实现的，f l a s h 动画是如何制作的，关注的内容都流于表面化，形式化，忽略了设 计真正的本质。这种情况的出现，一方面，与我们枯燥的教学方式不无关系，在教学过 程中应当重视对学生设计思维的系统培养。 第三节交叉性学科的特色 网页设计是一们新兴的设计类和网络的交叉学科，它本身以网络为载体，把各种信 息以最快捷、方便的方式传达给受众。网页不光是把各种东西放上去，能看就行，要考 虑如何使受众能更多的和更有效的接收网页上的信息，从而使他们对给网站留下很好的 印象。这就需要从审美的方面入手，结合使用方便的要求，设计出好的页面，使人浏览 3 论嘲贝驶计课程的教学没计 起来心情愉快，接收信息也会更加容易。同时提升网站的形象。运用平面设计中一些美 的基本形式到网页中去能使网页更加富有美感，例如将平面设计中的节奏与韵律和骨格 的形式融入到网页中，这样会使页面更加有条理，也会使人浏览起来主次分明。网页设 计既要求设计师有较好的审美方面的素质，同时要有丰富的平面设计的经验，这样才能 在设计时驾轻就熟。设计教育应与市场相适应，学生用从学校所得来的知识很快能够接 受市场的桃战_ 才是设计教育真正的成功。但是现在，国内的设计教育与市场出现脱节的 情况，这与教师的排课，并非按照逻辑、结构的需求安排不无关系，忽略了教学体系的 科学件、完整性。网页设计作为视觉传达设计的一部分，是以平面设计为基础的，两个 学科有很多共性，也有各自的特点，帮助学生把握好网页设计与平面设计的联系与区别， 有利于我们更好的把握网页设计的视觉设计。 第二章形态分析的课程 所谓形态，指事物在一定条件下的表现形式。形态分析，是根据形态学来分析事物 的方法。其特点是把研究对象或问题，分为一些基本组成部分，然后对某一个基本组成 部分单独进行处理分别提供各种解决问题的办法或方案最后形成解决整个问题的总 方案。瑞典的茨维基把形态分析法分为五个步骤：( 1 ) 明确地提出问题并加以解释， ( 2 ) 把问题分解成若干个基本组成部分，每个部分都有明确的定义。并且有其特性；( 3 ) 建立一个包含所有基本组成部分的多维矩阵( 形态模型) ，在这个矩阵中应包含所有可能 的总的解决方案；( 4 ) 检查这个矩阵中所有的总方案是否可行并加以分析和评价；( 5 ) 对各个可行的总方案进行比较，从中选出一个最佳的总方案。我们这里所提到的形态分 析可以理解为网页中图形、字体等元素的善用，版面的安排，使设计的关系变成一种沟 通，而不只是装饰。纵观国内外与网页设计课程有关的课程设置、课题设计，其中也不 乏一些值得我们学习和借鉴的课题设计与教学方式，如澳大利亚亚格里菲斯大学昆士兰 艺术学院的数码设计教育中网页设计方面的课题，以及国内南京化工职业技术学院的网 页设计精品课程。 第一节优秀网页赏析 南京化工职业技术学院的网页设计精品课程课题。 虽然是化工职业技术学院，但在网页设计方面的要求和我们要解决的问题一致，即 要不断提高学生的设计水平。该校在教学过程中，注重调动学生的自主性：在每次理论 4 论网贝设计课程的教学设计 课程结束后，实践课程中要求学生找出理论知识的实际运用，或自己设计一个和理论知 识相关的作品；课后指出学生的优缺点，进行发扬或改正。课程内容在有趣轻松的环境 下进行，学生的积极性能够得到提高，不断提升教学效果。 一课程受众 职业技术学院的受众为学生、一些进修人员等。 二课程内容 优秀网站赏析作为一个整体来进行讲解，首先将各种类型的网页进行分解，通 过分析归纳，得出所有的优秀网站都满足的六个基本条件，通过总的概括讲解，让同学 们对网页赏析产生兴趣，有一个好的印象。再结合实例具体讲解几个基本条件，辅助以 上机实践，要求按照网站的类型来赏析网站的三个构成空间分布，并着重了解标题在网 站中的作用及明示标题在实际中的应用。 三课程目的 从创意、色彩、版式等几个方面学习网页的赏析，为以后设计制作网页打基础。进 一步提高同学的审美观和艺术设计能力，提高网页制作的质量。 四课程评述 在以往高职计算机类专业课程的开设中，网页艺术设计很少被关注到。学生在学习 完专业课程以后，对于软件操作技能很熟悉，但是并不能制作出效果非常好的作品。也 就是说没有将技术与艺术做到很好的结合，本课程采用了讲授法、实例法、实践法，通 过赏析和循序渐进的教学，使学生具备比较全面的网页艺术设计的能力，掌握了明示标 题、明示信息、整合信息、传达信息等形成优秀网页设计的几个基本条件。 第二节从文章到网站 澳大利亚亚格里菲斯大学是一所综合性大学，格里菲斯大学昆士兰艺术学院是澳大 利亚历史最悠久、最负盛名的艺术设计学院之一。考虑到数码设计专业的特殊性，该学 院在教学上强调创意、设计与技术三者的结合，在课题的设置上强调专业性，注重培养 学生学习的独立性。在课程开始前，学生可以通过学校网络开放式课程，查询每门课程 的目的、所需参阅的书籍与资料、整个课程的进度安排以及课题要求，如果是网页设计 这类课程，还可以观看往届学生的优秀设计作品。以课程“多媒体与因特网”为例，在 5 堡塑鉴堡生堡堡箜塾兰堡生 讲授完网页设计理论与实践知识后，第一个课题是设计完成一个简单的网站。要求如下： 教师向学生提供一些关于网页设计的专业网站，每个站点中都有很多有关于网页设计的 文章。学生要做的就是每个人选择其中一篇，以独立网站的形式呈现该文章。 一课程受众 该校的学生来自全球2 0 多个不用文化背景的国家。 二课程内容 学生想要顺利完成课题，大概要经过四个步骤：首先要大致了解都有哪些文章并找 出个人感兴趣的一篇，分析该篇文章的内容、结构；其次是根据文章的内容与结构确定 网站的层级结构，如分几个主题，有几个菜单，页面导航等；再次是思考网站界面的视 觉表现形式；第四步是进行网页设计，包括按钮、文字、图形图像等细节设计。 三课程目的 培养学生学习的独立性，能独立完成一个简单的网站设计。 四课程评述 在这个课题里，学生在老师的引导下，阅读了大量的专业文章，从理论体系上丰富 了自己关于网页设计的专业知识，同时，作业同过独立网站设计的形式呈现，训练了学 生的操作技能，是一个把专业知识和软件技能做到了很好的结合的课题。学生通过这次 课题的完成，不仅能独立完成网站设计，还阅读了大量专业文章。 第三节网页规划设计 来自湖北职业技术学院网页设计精品课程课题。一个专业的网站建立在合理的规划 前提之下，网页规划既有战略性的内容，也包含战术性的内容，既决定了一个网站的发 展方向，同时对网站本身也具有指导意义。 一课程内容 要完成这个课题要经历以下几个步骤：第一步，介绍一个网站的基本要素：包括介 绍本课程的基本内容和工学结合的基本形式以及介绍一个网站的基本要素、域名、域名 的申请方法、标志、框架结构等；第二步，设计一个站点：将学生分成6 人一组，每组 的学生自己进行任务分工，构思出一个网站域名和标志，设计出一个网站的框架结构， 6 论网贞设计课摧的敦学改计 并在图纸上绘制出来：第三步，作品评价：首先，由每个小组的主创人员讲解设计思路， 设计内容，特点，实现的主要技术手段；全部展示完后，由第二组对第一组进行评价， 第三组对第二组进行评价，第四组对第三组进行评价，第一组对第四组进行评价，以此 类推。 二课程目的 本次课程以了解一个网站的基本要素为前提，练习构思一个网站域名和标志，设计 一个网站的框架结构。一个优秀的完整的网站不是一个两个设计师独立工作就能完成 的，是要经过技术设计人员的共同努力才能达到的效果，这次由于是分组进行课程的实 践，可以很好的培养学生的团队意识和协作精神。 三课程评述 本次课程由同学分为四个小组分别设计了几个网站，初步了解了一个完整网站的基 本要素，以及一个网站的框架结构。同学们在课堂上都展示了各自小组的作品，表达了 各自设计网站的思想和理念，对于同学之间是一个很好的交流与学习的机会。 第四节从理论到设计 上面三个课题案例中，从不同方面进行网页设计的教学，但不无例外的从设计出发， 从网页设计本身出发，在理论的基础上强调实践、强调交流。在其课程设置上可以总结 出以下几点： 一理论教学 这一教学方法的目的是：向学生全面、系统地介绍基本知识、内容、原理和方法。 在教学中，除了理论讲授外，也强调师生互动，通过提问、讨论等方式活跃课堂气氛。 二案例讨论 这一教学方法的目的是：通过实例分析和讨论，向学生全面、简明地介绍网页设计 的基本观点、设计原则和设计方法。在教学中，既有教师介绍案例，也有学生评述案例， 也有教师、学生共同点评案例，形式多样，气氛活跃。 三实践参与 7 论嘲页设计课程的教学设计 设计是和实际应用以及市场需求结合紧密的一门实践性很强的学科，针对具体的教 学内容，鼓励学生积极参与实际课题，通过有针对性的实际课题的锻炼，能够使学生初 步掌握网页设计的方法、步骤，为今后的实际工作或学习深造奠定了基础。 四作业与竞赛或实际课题相结合 为了提高学生的学习兴趣，本课程的作业设置可以与相关的设计竞赛或实际课题相 结合，一方面可以激励学生的参与意识，增强他们的自信心，另一方面可以培养他们的 实践操作能力和全面考虑问题的方法。 第三章视觉语言的体现 网页设计作为一种视觉语言，特别讲究编排和布局，虽然主页的设计不等同于平面 设计，但它们有许多相近之处。版式设计通过文字图形的空问组合，表达出和谐与美。 多页面站点页面的编排设计要求把页面之间的有机联系反映出来，特别要处理好页面之 间和页面内的秩序与内容的关系。为了达到最佳的视觉表现效果，整体布局需要合理， 使浏览者有一个流畅的视觉体验。色彩是艺术表现的要素之一。在网页设计中，我们的 设计师根据和谐、均衡和重点突出的原则，将不同的色彩进行组合、搭配来构成页面。 根据色彩对人们心理的影响，合理地加以运用。网页设计为了将丰富的意义和多样的形 式组织成统一的页面结构，形式语言必须符合页面的内容，体现内容的丰富含义。在解、 分析、学习了一些比较好的课题设计之后，我们更应该重视的是如何在此基础上，举一 反三的从设计上进行教学设计。在结合自身的教学实践，作者进行了一些相应的尝试， 设计了下面这些课题。 第一节阅读形态的阐释 一课程内容 学生要顺利完成这个课题，需要全面认识网站，深入研究各个网站的主题、信息、 版面等各个方面，了解各种分类的网站设计与功能上的区分，做到对网站的全面认识与 把握。随着互联网的迅速发展，互联网已经渗透到我们生活中的各个层面，网站的内容 即丰富又全面，能够满足各种不同需求的浏览者。随着网络作为第四媒体逐渐走向成熟 和完善的时候，网页设计业也逐步形成了特殊而独立的体系，我们对网站视觉审美及网 站功能应用等多个方面的认知也应该进入一个更新的高度，帮助我们进行正确的创作。 8 论l 卅贝砹计课程的教字仪计 ( 一) 网页艺术设计的意义 要想对网页艺术设计有一个全面的了解，在教学的过程中要结合以下5 点，对网页 艺术i 殳计做一个大概的介绍：1 网页艺术设计的原则2 网页艺术设计的内容3 网页艺 术设计的特点4 网页艺术设计的过程5 网页艺术设计的工具 信息及筛选信息 网站既是信息的容器，又是信息的载体。网站的立意、设计、宣传、发展都和信息 内容息息相关。常见的信息形式主要有文字、图形图像、动画、音乐等。在网页上，处 理信息形式之间的协调性，使它们呈现出一种可读性、易被接受的状态，是设计师最主 要的工作。从设计的角度来看，它们既是信息的内容又是创作素材和创作依据。信息的 来源主要是针对目的而言，网站的建立就是为了浏览者能浏览其中的信息内容。我们都 知道，在琳琅满目的互联网上充斥着大量的信息，要找到想要的信息并非一件简单的事 情，作为设计师，想要尽快地抓住浏览者的眼球，信息标题和信息摘要就成了最关键的 一环。同时，还要针对网站的媒体性质，从它的网站文化、传播内容、经营特色等多角 度去探索。 首先，现今已经不像十年前那样只有数的出来的几百个网站，而是有无法估量的上 千万个网站，主题相同或者雷同的网站更多到无数，想要从千百万个相同主题的网站中 脱颖而出，并不是一件容易的事。在这竞争加剧的情况下，网站的视觉设计也就变成了 竞争中及其重要的一环。其次，由于信息结构变得越来越复杂，网站已经不再是发布几 条消息或者放上几个广告那么简单的载体了，繁多的信息如何管理，不同类的信息如何 分主次，同类信息如何分层等等诸多问题摆在我i 1 1 艮前，“页面上有文字就可以”这一 原则已经无法解决现今互联网的信息问题，在这样的状态下需要我们对信息进行科学的 管理，并给用户提供美好的视觉环境。再次，浏览者是为了不同的目的登录到相关网站 上查询信息的。信息不同，网站的气氛也截然不同。网站的信息概念传递错误，就会导 致浏览者对网站的设计的不认可以及网站本身的不被认可。第四，网站作为新媒体的媒 介主体，具有与传统媒体不同的特征和特性。因此网页设计的形式和使命与传统媒介的 “设计 截然不同，网页设计是网站的视觉内容部分，是浏览者进入网站时第一时间接 受到的视觉信息，是给浏览者的一个概念一个印象。 ( 二) 分析面板的制作 当我们需要对某个网站的整体结构以及网页设计的细分要素进行详细分析的时候， 我们可以制作分析面板。分析面板也就是把网站的主页面、子页面、页面间的连贯性、 导航结构、信息架构、用户界面等网页设计及内容构成这些网站、具体网页的所有视觉 9 要素都总结并且打印出束，进行分析和借鉴 分析面扳样酎 二课程目的 在课堂上引导学生搜索同种类型的大量的网站了解各种分类的网站设计与功能上 的区分，通过分析，能够分辨出网站设计的好坏。分别分析好、中、差二个网站，制作 分析面板。 三课程小结 互联网中的同类网站非常多，其中不乏优秀网站，但是绝大多数网页作品仍然给人 种像是一个模子罩印出来的的感觉，这是因为我们的设计师，还是在用教条的、形式 化的方式来醴汁网页。评价一个网页设计的好坏，应浚要看设计足否正确地传递了目的 和合理的包装了网站，例如同类的知名国际时装品牌的官方网站，都是流行时尚的典范， 但却传递出彼此互不相同的文化内油，他们从文化1 0 形式都是鞋一无一的，这就是设计 师成功将文化通过网站设计传递给了终端客户。 对于我们的学生而言在面对众多的嘲站时，首先要具备辨别网页设计好坏的能力， 好中择优进行分析与学习，帮助我们形成第一印象。 第二节色彩情感的描述 色彩很少以孤立的或静止的面貌存在，即使我们在白纸l 平涂一块颜色，也要与白 纸形成一种对比关系。不仅足色相本身，色块的面积、形状、色彩问的比例关系，都会 产q 三视觉落差，使浏览者的心理产生微妙的变化。借助r 色彩的不同处理，使网站易于 人们的认_ i 识别有助于创造个性化的阿站形象，从向强化信息记忆。 1 0 谓n q f 豁帘盯 艘灌 * “”* # * h 一课程内容 ( 一) 色彩的语言艺术 什么是色彩? 这个删题可以从各个角度进行探讨，从自然科学到纯艺术，从窀内刮 环境，从心理学到美学，说到底，就是对色彩的感觉、表现效果和欣赏的研究。我们平 时又是如何去认识色彩的呢? 对色彩的良好感觉是建立在人的健全视觉能力的基础e ， 认识色彩的唯一媒介是人的视觉，但对于色彩的认识却并不单纯地依赖于视觉而是需 要凭借每一个人的知觉经验。学习和研究色彩的知识与理论体系，能够使我们更深刻、 全面、科学地认识色彩，改变我们的视觉与思维方式，丰富自己的色彩表现能力和审荧 能力。 网页视觉不只有色彩一项，单一色彩一样不能决定一切。色彩之间的协调和统一， 色彩与页面、排版、信息、插图等元素的结合与延伸对页面创作也十分重要。 ( 二) 色彩的情感描述 无论我们在描述个网站或是与客户沟通时，总习惯用个形窑词柬表达网站所传 达出的视觉感。如娱乐网站、体育网站、儿童网站等，多数需要表现出活泼、动感的、 鲜艳的视觉效果：医院的网站通常需要十净的、庄重的、可信任的；家居类网站则需要 具有亲和力、温暖的、舒适的感觉；与文化有关的诸如博物馆、文化节等站点传达的 是人文的、历史悠久的感觉。其实，这主要涉及的是网站配色上的内容。色彩与情绪状 态、象征意义、文化内涵以及审美情趣密切相关，除此之外，由于文化语境的不同，表 示颜色的各种语言名称也多种多样，并且语言本身也在不断地演变，比如，一种语占可 能在其发展的起始阶段只有一个或两个表示红色的词语，而后随着这种语言的发展，又 出现了成百上千关于红色的特定词汇。同样是蓝色，但三星的蓝与索爱的蓝传达的又是 完全不同的视觉感受。色彩在网页形象的视觉情感表达中的作用同样不可忽视。 聚? | - ：- j 崞 l 如图以蓝色网站为例。监”涵盖的范围很光湖监、尤监、深蓝、 蓝绿等都是蓝色，但这些蓝色形成的情感差异却报人给人留下的印象也 截然不同。天蓝刺眼而浮躁却也散发山夏天和青释的气心+ 鲢适合运用 m 时尚感强的网页中，还能有效地突出个性特征：监灰世沉稳、 业、智 慧的代丧，适合的类型更广：深海蓝则神秘而迷人，还订种辽制的空间 感。 论嘲贝哎计课程的教学设计 ( 三) 色彩与信息 在进行设计前，要了解你的网站所要传达的信息。选择可以加强这些信息的颜色。 例如，如果在设计一个强调稳健的余融机构，那么就要选择冷色系、柔和的颜色，像是 蓝、灰或绿。在这样的状况下，如果使用暖色系或活泼的颜色，可能会破坏了该网站品 牌。了解你的受众群，文化差异可能会使色彩产生非预期的反应。同时，不同地区与不 同年龄层对颜色的反应亦会有所不同。年轻族群一般比较喜欢饱和色，但这样的颜色却 引不起高年龄层的兴趣。选择颜色时要注意时效性。例如同一个色彩很容易就充斥着整 个市场，且消费者很快的就对流行色彩感到麻木。但从另外一个角度来看，你可以使用 几十年前的流行色，引起人们的怀旧之情。注意考虑功能性的颜色，将关键信息部分建 立专门的功能性的颜色，例如标题和超链接等。 ( 四) 网页色彩的创作特点 网页的色彩创作与其他视觉形式有着较大的差异，对于平面设计而言，色彩是“静 止 的，创作完成作品也就完成了，观众只能是被动地接受信息；对于网站来说信息是 “流动 的，页面的信息会变化，网页的色彩也会随着信息的变化而发生变化。浏览者 在浏览网站时，和网站之间是互动的关系，网站对于浏览者而言是可用的，色彩不仅仅 是传达了某种信息，更多的时候，色彩可以帮助浏览者阅读信息。色彩的创作并不是任 意的，而是为信息而服务的，是有目的的。网站不是平面海报，每个网站都是由多个页 面多个栏目组成的，栏目不同，信息的内容也不同，页面格局亦会随着信息格局的变化 而做出相应调整，色彩分布也相应会发生变化。人们的对网站的评价也来自于浏览多个 页面后的综合印象，色彩的规划与调整需要从目的出发，兼顾信息内容与其他视觉元素 的创作。色彩是视觉设计学科的一大门类，我们只能仅仅从网页色彩基础和信息传达的 角度进行探讨研究，掌握网页色彩设计的特殊性。网页色彩的重点在于让网页配色为传 达信息、配合阅读而服务，简单而直接的信息交流才是好的信息交流。 二课程目的 从色彩的错觉，色彩的心理，色彩的象征、色彩的和谐与对比等方面引导学生，并 对优秀网站配色进行分析以及再创作。在整个课程的进行过程中，学生要顺利完成这个 课题，需要调查与阅读相关色彩知识书籍，对网站色彩按照形容词、名词、心理感觉等 进行分类。通过对门户类、资讯类、时尚类、企业类、电子商务类、文化生活类、政府 机构类、娱乐类、个人类和另类站点的色彩构成进行梳理，从色彩视觉上直观地理解不 1 2 论网贞设计课程的教学设计 同类别网站的不同风格。选择例如可口叮乐、索尼、三星等著名品牌站点，从风格、结 构、色彩等方面，逐一进行归纳和赏析，总结分析：色彩是如何在网站的信息传达中发 挥作用的，怎样对网站功能产生影响；从企业形象的角度，如何运用色彩对网站进行准 确定位与推广。 评论文章以站点的形式呈现，并能准确连接到你所举例的网站。 三课程小结 网页设计对外渗透的情感、文化、信息，需要依靠色彩、图形等视觉元素综合地起 作用，例如灵活运用对比与调和、对称与平衡、节奏与韵律以及留白等手段，通过空间、 文字、图形、色彩之间的相互关系建立整体的均衡状态，产生和谐的美感；加入一些富 有动感的文字、图案，或采用夸张的色彩手法来打破均衡的呆板，达到较好的视觉表现 效果。点、线、面作为视觉语言中的基本元素，巧妙地互相穿插、互相衬托构成最佳 的页面效果，充分表达完美的设计意境。孤立地看待网页上任何一种视觉元素的作用都 是不对的，只有通过各种设计技巧和创意手段，才能产生事半功倍的视觉效果。 第三节风格“视觉疲劳刀吗? 艺术作品在整体上呈现出的具有代表性的独特面貌就是风格。是由艺术品的独特内 容与形式相统一，艺术家的个性特征与作品的题材、体裁以及社会、时代等历史条件决 定的客观特征相统一而形成的。艺术风格就是创作个性的自然流露和具体表现。黑格尔 对风格作了发挥：“风格在这里一般指的是个别艺术家在表现方式和笔调曲折等方面完 全见出他的人格的一些特点。”刘勰说：“才有庸俊，气有刚柔，学有浅深，习有 雅郑，并情性所铄，陶染所凝，是以笔区云谲，文苑波诡者矣。”艺术家各不相同的 创作个性，以及艺术欣赏者审美需要的多样性，决定了艺术风格的多样化。 一课程内容 ( 一) 形式与设计 设计是计划与组织，设计产生组织与计划，将杂乱无章的东西加以处理，使之形成 一种秩序，也即我们所说的形式美。设计运用形式的法则，以使用功能与审美统一为最 高目的，审美观念的更新也会带来形式美法则的变化，好的形式使得设计得以推广，由 此，我们也可得出形式对设计的重要性。 不同类型的网站网页能够承载的设计形式也各不相同。从广义上来说，设计是指为 了达到某一特定的目的，从构思到建立一个切实可行的方案，并用明确的手段标示出来 1 3 * m , f i & 日r 救 的系列行为。在现代社会中，设计也承载了促进人际交流的重要性，标志、图形、广 告各种产品和包装设计以及我们所讨论的网站网页设计等等都包古丁交流的内容。 例如，红色具有“危险性”的心理暗示，全世界的救火车车体无干例外的采川红色这 种信息变流无需通过占语解释。设计的交流作用就是要使得人们之问的交流越束越便 利。 对r 浏览者而占，网页导航好比内容的目录，通过导航，洲览者大致会知道网站的 内容是否有阅读的价值或者荫哪个部分是对自己有用的，是想要阅读的。导航是一个 成功的网页设汁不可或缺的元素，能起到集中浏览者视线，并迫使浏览者寻找、点击、 再点击导航的艺术性和趣味性会给浏览者带来无限的乐趣，f l a s h 技术的进步给 富有创意的导航动画系统与网站整体设计之自j 建立了深厚的纽带。 梢失的导航条充满趣味的导航设计吸引浏览者 不断点击 ( 二) 视觉与流程 】视觉流程跬计的意义 设计本身就是一种构想和计划的形象化与视觉化，它通过对设计要索一定的表现和 组合来传达一定的信息。人对一件事物产生视觉感官刺激，在一个界定的范围内，人的 注意力会发生变化，发生视线的移动就是视觉运动。而注意力价值受视域优选(般情 况时，注意力价值最人的足上部 郭，左上和巾l 这义被称为视域优选) 和构成要 1 4 一一 论嘲页设计课程的教学设计 素( 图象、说明、标题等) 的影响，构成视觉运动的法则。将这一法则应用于设汁之中， 从注意力的捕捉，经视觉流向的诱导，设定信息的传达，直到最后映像的存留而结尾， 这一程序的规划，谓之视觉流程设计。 2 视觉流程设计的原则 视觉流程设计的原则归纳来说是，视觉流程的逻辑性，视觉元素的可视性和设计构 成的战略性。这告诉了我们，设计师在对一个设计对象有一个比较系统的总体设计和构 想之后，应该根据各种视觉体的方向性暗示，客观信息强弱不同的诱导，视域优选择以 及构成要素在构成上的主次要求，将这些元素融会贯通，并且注意视觉语言被大众的认 知程度，以及相邻视觉构成要素间距的安排等问题，才能设计出一个成功的视觉流程设 计。 3 视觉流程的筹划 视觉流程是网页版式设计的重要内容，可以说，视觉流程运用的好坏，是设计者技 巧成熟与否的表现。视觉流程的筹划包括几个重要的因素，页面中不同的视域，注目程 度不同，给人心理上的感受也不同。一般而言，上部给人轻快、漂浮、积极、高昂之感； 下部给人压抑、沉重、限制、稳定的印象；左侧，感觉轻便、自由、舒展，富于活力； 右侧，感觉局促却显得庄重。网页中最重要的信息，应安排在注目率最高的页面位置， 这个位置便是页面的最佳视域。人们阅读材料时习惯按照从左到右，从上到下的顺序进 行。浏览者的眼睛首先看到的是页面的左上角，然后逐渐往下看。根据这一习惯，设计 时可以把重要信息放在页面的左上角或页面顶部，如公司的标志、最新消息等，然后按 重要性依次放置其他内容。重要的信息应该让浏览者最容易发现，而不是深藏在多层链 接之后。 4 视觉流程类型 视觉流程主要包括以下几种类型：线型视觉流程、曲线视觉流程、焦点视觉流程、 反复视觉流程、导向视觉流程、散点视觉流程等。 一个成功的视觉流程设计，应能引导观者的视线按照设计者的意图，以合理的顺序， 快捷的途径，有效的感知方式，去获取最佳印象。 ( 三) 网页的布局设计 1 5 论嗍贝砹汁谍程的教学设汁 l 网页的版面设计 版面设计也可以理解为布局设计，就是我们在浏览器上说看的一个完整的页面。设 计师将所有要体现的内容有机的整合和分布，达到某种视觉效果，这就叫做版面布局。 版式的研究也是对视觉秩序构成原理的研究，设计师知觉和理性的运用这些原理和 手段进行本能感觉的创作。我们应当阐述形式对于精神表现的作用，从来自于设计的形 式证明形式的设计效用、形式的功能与审美作用。在形式上，我们经常倡导一句“玩形 式”，我们只有对形式有透彻的了解与掌握，才有可能实现精神的自由表现。形式美原 则会给我们的创作与设计提供一个坚实的基础。这个形式研究不仅包括传统构成知识的 必要内容，更要强调来自人的视觉特性，使得形式的语言有更多的发展和延伸的可能性。 形式课程的教学内容：通过大量优秀网站的实例和课程训练，帮助学生积累视觉词汇， 加深对网页视觉元素的理解，掌握形式语言创造的基本规律与法则，强化和提升形态元 素的个性化视觉表达的能力，讲述形式的美感与作用，形式与内容的关系。 2 网页版式设计的特点 网页的版式设计同报刊杂志等平面媒体的版式设计有很多共同之处，它在网页的艺 术设计中占据着重要的地位。网页的版式设计，是在有限的屏幕空间上将视听多媒体元 素进行有机的排列组合，将理性思维个性化的表现出来，是一种具有个人风格和艺术特 色的视听传达方式。它在传达信息的同时，也产生感官上的美感和精神上的享受。但网 页的排版与平面媒体的排版又有很多差异。都有固定的尺寸，网页则不然，它的尺寸是 由读者来控制的。而且，网页的组织结构不像平面媒体那样为线性组合，这给网页的版 式设计带来了一定的难度。网络具有多种维度的链接形式。超级链接的出现，使网页的 多维性变得更加明显，通过点击链接，用户可以在不同的界面间自由跳转。网络设计整 合了平面、三维、动画、音频、视频等多种媒介元素的特点。浏览者与网络间的互动一 即时的交互性是w e b 成为热点的主要原因，也是进行网页设计时必须考虑的问题。传统 媒体，如广播、电视节目、报刊杂志等，都以线性方式提供信息，即按照信息提供者的 感觉、体验和事先确定的格式来传播，是一种单向的信息传递。而在w e b 的页面环境下， 人们不再是一个传统媒体方式的被动接受者，也可以一个主动参与者的身份，加入到信 息的加工处理和发布之中。信息发布，不再仅仅是传统媒体供应商的事，任何人都可以 参与到这个过程中。通过网络界面，人们可以对网站等等视觉传达内容进行自由的点选。 网页的版式设计和所能承受的形式是网络形象识别系统的重要部分，恰当的形式才能有 助于网站形象的确立和信息的传达。 1 6 论m 血计* 程教社 如倒是一个博物馆的刚站它的成功 之处在于页面右r 部的二维模型，它可以 告诉你，你在博物馆中的准确位置并由 这个虚壬c 【的模犁带领浏览者浏览博物馆的 方方面面。这个构心独特，使人过目不忘 的，不仅仅是视觉艺术方面。还有它给用 户所带来的操作、阅凄环境和技术实现的 教果等方面。 二课程目的 要求学生从游戏主题、体育主题、门户网站、财经主题、博物馆网站、教育网站、 新闻资讯类网站中选择三个类型，进行网页风格的设计。提供彩色平面设计稿。包括导 航、主页面、子页面等，风格一致，符合主题。学生要顺利完成这个课题需要总结研究 i q i l 类型的网站，确立网页的风格与特点。例如，以白纸为例，我们为白纸制造空日j 效 果的方式是多种多样的，不论是加上阴影，还是把反面折叠上来，都可使人获得立体感， 如果在刚贞上能使洲览者感受到网页平面是浮起的，也就有了翻动的兴致，带给浏览者 更丰富的视觉感受和冲击力。设计时要注意版面的平衡与留白空间的处理、版面设计的 视觉平衡、网页设计前后的一致性。 课程小结 网络e 的二三维空问是个假想空问，这种空问关系需借助动静变化、图像的比例关 1 7 丝堕壑堡生堡堡塑茎兰堡兰 系等空问因素表现出来。在页面中，图片、文字位置f j 后叠压，或页面位置变化所产 生的视觉效果都各不相同。网页上常见的是页面上、下、左、右、中位置所产生的空i 日j 关系，以及疏密的位置关系所产生的空间层次，这两种位置关系使产生的空问层次富有 弹性，同时也让人产生轻松或紧迫的心理感受。现在，三维世界的诱惑开始吸引更多 的人，虚拟现实也要在w e b 网上展示其迷人的风采。网站的存在依赖于信息内容，页面 上的各个组成部分自然离不开信息，正如巧妇难为无米之炊，网页上的各个组成部分正 是设计师手中的材料，色彩、版式等视觉元素则是调味料，由设计师将这些食材结合起 来，制作一道视觉大餐。与网页视觉设计关系最为密切的是导航、版式、色彩、风格等 四个方面，就像是我们手中的兵器，将他们的形式进行巧妙的排列组合才能出奇制胜， 达到非凡的效果。 第四章创意思维课程的教学设计 创作就好比是在人脑的多维立体空间里，寻找一个方向感。我们对于环境事物的感 觉经验，都是源于过去的接触积累。尽管个人生活背景，学习经验各异，但经过不自觉 的归纳，秩序化的本能，多数人内心的感官经验相似。就线条或色彩本身而言，是没有 任何情绪的。但由于经验的积累，才使人感受到粗线的厚重，细线的纤柔，不同的颜色 有了不同的情绪象征意义。就像中国的书法艺术，利用点，线，面的规划，产生抑扬顿 挫，缓急的节奏，表现出节奏和旋律，进而达到优美旋律的追求。这是有别于知识性的 思考，成功的设计者，就是利用“创意思维 来思索点，线，面的构成，设计出有效的 唤起美感体验的作品。 第一节分析目的的阐释 设计总是为了目的而存在的。设计是一种审美活动，成功的设计作品一般都很艺术 化。但艺术只是设计的手段，而并非设计的任务。设计的任务是要实现设计者的意图， 目的的存在正是我们做设计的源头与动力。网页设计的任务，是指设计者要表现的主题 和要实现的功能。站点的性质不同，设计的任务也不同。建设网站是一个实实在在的任 务。明确建设网站的原因非常重要，如建立网站是为了销售产品，还是为了文化传播， 网站服务的对象是哪些，你的网站要给浏览者传递出何种信息等等。即使同一个类型的 网站，目的性和实施方针也会根据具体的不同情况而有所偏差，这些偏差却是真j 下能反 映出网站的唯一性和特殊性。如果没有明确网站建设的目的，那么，设计师把网页设计 i r h “h * # 教学设* 得再华丽也不能起到真l e 的作用 一课程内容 学生要顺利完成这个课题，首先要对所选叫站的主题、目的、性质、信息有个全 面而整体的掌握。 ( 一) 性质不同的网站设计 目前，互联网上的网站类型，我们可以大致分为，信息、商务、组织、专题、个人 等，而每个大类晕又可有细分，网站类型的不同直接表现出网站建设的目的的不同。 例如，像新浪、刚易、搜孤等fj 户网站一类的资