扁平化设计在网页上的运用优势论文（共5篇）

第一篇：扁平化设计在网页上的运用优势论文

一、界面元素设计

扁平化设计使用的是正方形、长方形或者多边形等这样的基本形状，这些二维图形弱化了视觉上的复杂性，让浏览者不会过多的关注图形，而是强化了要表达的内容和信息，更加容易识别。当然，设计师也要了解每个元素所代表的含义与作用，并且应使用不同的形式来加以区别。扁平化设计强调的是信息本身，而不是繁复多余的界面元素。浏览者在浏览网页时，主要是获取信息，界面元素的主要功能是提示浏览者迅速找到他们所需要的信息。扁平化设计由于界面元素的简单且易于查找，所以更适合那些近视者和弱视者，能帮助到这些有特殊需求的人群。

二、色彩

扁平化设计页面中，因为追求极简主义，所以没有其他多余的装饰。因此，设计者在设计时需要更加注意色彩的搭配，这样将会收到更好的视觉效果。从色块、图形、导航到版面，色彩是一个关键的组成元素，好的色彩搭配会给人带来愉悦的心情和完美的视觉享受。总结扁平设计的色彩搭配大致分为两种：同类色搭配：同类色搭配，最常用的是把同一种颜色的黑、白、灰三种色调结合在一起，形成层次上的对比。在扁平化设计中，单色的使用不仅能分清层次感，同时也能把握住整体感。如图１，网页的背景使用了一张深灰的图片，界面元素则使用了红色系的同类色搭配。在导航部分运用了扁平化设计的样式，使用了与标志相同颜色的色块来展示。设计者通过调整色彩的饱和度以及透明度使单色产生一定的变化，使页面不单调，反看起来整体感十足，同时增加了信息的辨识度，让人一目了然。对比色：对比色搭配的使用可以使页面看起来极富活力又有丰富的色彩变幻，视觉效果醒目。在使用对比色进行搭配时，设计师要注意到在设计时应当先了解网页的主题，选用合适的颜色进行搭配。如图２，是一家房地产中心的首页，导航部分的扁平化设计运用了多种颜色来进行搭配。导航中的蓝色，绿色有蓝天，草地的寓意，间接烘托出小区优美的环境。黄色与蓝紫色是对比色，对比色会带给人一种色彩撞击的感觉，增强了画面的对比感，增添活力，使人眼前一亮。整体来看，网页的背景色又与导航的颜色相呼应，这样不仅不会觉得颜色杂乱，反而有很好的集中视线的感觉。

三、布局

扁平化设计基本使用的是网格布局，网格布局能使网页更便于使用，减少使用过程中的反复性，提升识别性。扁平化设计中删除了网格布局中多余的线条和边框，使用单纯的二维色块对页面进行大胆的分割，色块上使用大小不一的文字来标示内容中心或是使用多标题图片，都可容纳更多的内容，使每个图标都有属于自己的独特风格，同时内容从一个边缘流向另一个边缘，在一个轴上进行活动，增加了稳定感。在页面上，扁平化设计还会有大部分的留白，很多交互式设计都会在网页中尽可能的添加内容，这样反而让使用者不能准确的分辨出网页要传达的主题是什么，更多的留白空间才能使浏览者关注到主要信息。

四、字体

设计师通过文字来向浏览者传递信息，提供导航服务。而字体的选择不仅要符合扁平化设计的简约风格，同时还要符合整个页面主题的设计风格。一般扁平化风格的页面会使用无衬线的简单字体，并且大多只使用一种字体，再通过对字体的放大、缩小进行排版，文字的不同排版同样也可以带来不同的视觉体验，例如字号较大，或是粗体，都能帮助浏览者轻易地识别元素的指定功能，这样在内容上创造了一定的层次感。同时使用对比色的字体，可以提升内容的易读性和可读性。

网站界面风格似乎都在遵循着同一种设计审美，即：用拟物化的设计效果来突出界面元素的质感。随手打开一个网页，我们就可以看到这样的设计，不免会产生视觉疲劳。而扁平化设计既简单又明了，设计起来也非常方便。扁平化设计风格的逐渐兴起可以看作是对网页界面多年以来对过度设计的一次冲击。设计的本质是形式服务于功能，作为设计师，我们不仅要考虑视觉呈现方面的问题，而最重要的是应当关注到产品的功能上。

第二篇：网页设计论文

网页设计基础课程论文

摘要:随着互联网的不断发展和中国网络人口的日益增长，建立个人网站，不但可以更好的展示自己，而且可以提高自己在计算机应用方面的能力,网站越发普及，网站建设也有新的要求,网站已发展为一种工具，一个企业对外信息展示的工具.以前网站上常见的大幅图片，长达几十钟的flash动画，已悄然而逝，浏览者再也不用为了查找一些信息而必须等待动画的时间，可以简单方便的找到自己想要的东西，是浏览者主要的目的，也是网站设计时应该考虑的问题。以前只是一味的追求网站的外观，其实网站是一个公司的对外信息窗口，因此在考虑美观的同时也得考虑浏览者的感受，如有些色调是很亮丽，但是这些过于亮的色彩看的时间长了会让你的眼睛不舒服，这样浏览的人就不会长时间在网站上逗留，网站没把公司的信息完全的传达给客户． 关键词：网站网页设计发展趋势网站标准 正文：一:网页设计发展趋势: 1.更多的CSS3 + HTML5 这是期待已久的事情。在过去的几年设计师已经开始关注和使用CSS3+HTML5，但在以后CSS3+HTML5将会得到更广泛的应用。网页设计师最终会抛弃Flash。Flash不再是昔日的王者，新技术（指CSS3+HTML5）将会取而代之 2简单的配色方案

没有比纯色的背景更直观更简洁。纯色可以有很多种表达方式。不要老是黑白灰神马的，太不给力了。多点考虑绿、黄或者红作为你的网页主色调。当然，颜色最好保持使用2到3种。调整颜色的透明度，或许会给你意想不到的效果 3.移动互联网时代的到来

智能手机，ipad和上网本随处可见，将来这个将会更加明显。这意味着你的设计需要考虑更多的设备。4.Parallax Scrolling 先来解释下Parallax Scrolling，Parallax scrolling 是让多层背景以不同的速度移动，形成运动视差 3D 效果，虽然纯属视觉效果，但在内容滚动时形成的视觉体验仍然非常出色。2011年的网页设计趋势热点就是要创造这样的深度视觉效果。5.设计需考虑更多的触屏设备

触屏技术应用越来越广泛，触屏设备随处可见。这意味着，你的导航设计不再只是鼠标导航，你必须要要考虑你的设计适合触屏设备。6.深度判析

深度判析是关于在网页设计使用维数，这样可以使你的网页变得更加真实。如果运用得恰当，那将会是一个虚拟的3D效果，就像3D电影阿凡达那样。尽管3D技术还没有去到网站设计，你仍然尝试使用维数进行设计。7.大背景图

大背景图的网页设计应用在2011年将会更加明显。这些背景图像一般是高分辨率，覆盖这个网站。高清照片是一个迅速抓住你的读者的好方式，可以产生极具冲击力的视觉效果-游客的视线会不自觉地落在宽大的背景上。8.不拘谨于顶级域名

严格意义上这一点与网页设计无关，但这一点也是发展的趋势，将出现更多创造性的域名。.com域名的吸引力越来越少，主要是你很难再找到一个比较短的.com域名。2011年人们开始将视线慢慢转移到.me、.co和.cc等身上。想想域名的发展，抢先一步，不然你很可能再次错失先机。9.QR: Quick Response 如果你注意现在越来越多的名片、杂志或者其他地方出现方形条形码，证明你已经看到2011年的这个趋势热门

10.缩略图设计（Thumbnail Design）

Google已经向浏览用户推出它们的浏览预览技术。过去我们只能通过点击链接才能看到网页的内容，现在你只需点击放大镜然后将鼠标悬停在链接上就可以预览该链接的网页内容。11.持续联系/ Life Stream Lifestreaming, 一种在线记录个人日常活动的网络应用，包括直接通过视频feed或通过聚焦一个人的网络在线内容，比如博客日志，在社会性网络上面的更新，在线相册，聊天内容甚至只是一些喜欢的网站的链接等等.二:网站标准是在W3C（W3C.org）的组织下，商业公司（Netscape、Microsoft等）也认识到统一标准的好处。网站标准开始被建立（1998年2月10日发布XML1.0为标志），并在网站标准组织（webstandards.org）的督促下推广执行。

为什么要建立网站标准: 我们大部分人都有深刻体验，每当主流浏览器版本的升级，我们刚建立的网站就可能变得过时，我们就需要升级或者重新建造一遍网站。例如1996-1999年典型的“浏览器大战”，为了兼容Netscape和IE，网站不得不为这两种浏览器写不同的代码。同样的，每当新的网络技术和交互设备的出现，我们也需要制作一个新版本来支持这种新技术或新设备，例如支持手机上网的WAP技术。类似的问题举不胜举：网站代码臃肿、繁杂浪费了我们大量的带宽；针对某种浏览器的DHTML特效，屏蔽了部分潜在的客户；不易用的代码，残障人士无法浏览网站等等。这是一种恶性循环，是一种巨大的浪费。如何解决这些问题呢？有识之士早已开始思考，需要建立一种普遍认同的标准来结束这种无序和混乱。商业公司（Netscape、Microsoft等）也终于认识到统一标准的好处，因此在W3C（W3C.org）的组织下，网站标准开始被建立（1998年2月10日发布XML1.0为标志），并在网站标准组织（webstandards.org）的督促下推广执行。

采用网站标准的好处:

对网站浏览者的好处：

1、文件下载与页面显示速度更快

2、内容能被更多的用户所访问（包括失明、视弱、色盲等残障人士）；

3、内容能被更广泛的设备所访问（包括屏幕阅读机、手持设备、搜索机器人、打印机、电冰箱等）；

4、用户能够通过样式选择定制自己的表现界面；

5、所有页面都能提供适于打印的版本。对网站所有者的好处:

1、更少的代码和组件，容易维护；

2、带宽要求降低（代码更简洁），成本降低。举个例子：当ESPN.com使用CSS改版后，每天节约超过两兆字节（terabytes）的带宽；

3、更容易被搜寻引擎搜索到；

4、改版方便，不需要变动页面内容；

5、提供打印版本而不需要复制内容；

6、提高网站易用性。在美国，有严格的法律条款（Section 508）来约束政府网站必须达到一定的易用性，其他国家也有类似的要求。

参考文献： 一：温谦.HTML+CSS网页设计与布局从入门到精通[M].北京:人民邮电出版社,2010.3 二：http://www.xiexiebang.com

三：http://btgyjlbjx.nease.net(北极星网站域名）

课程论文

系院:土木工程学院

专业:建筑工程 姓名:王奎

学号:105140340043 网页设计基础

第三篇：平面构成在网页设计中的运用

平面构成在网页设计中的运用

易 星

目前，中国互联网的发展已经形成相当规模，据中国互联网网络信息中心（CNNIC）报告显示，预计中国网民数量在未来5年后将要超过美国，互联网已是继报纸、广播、电视等之后的第六大媒介。

随着互联网的发展，各类网站有如雨后春笋般。然而，有的站点日访问量高达几千万人次，而有的站点访问者寥寥无几。究其原因，访问量大的站点，除资源丰富外，网站的策划和精美的外观也是吸引访问者的重要因素。所以将美的形式规律和平面构成的手法结合到网页设计中，是当前网页设计的重要理论依据。

一、当网页设计遇上平面构成

（一）了解网页设计

网页有如门面，小到个人主页，大到政府及国际组织等，是构成一个网站的最基本单位。而网页实际上只是一个纯文本文件，它通过各种标记对页面上的元素进行描述（如颜色、大小），网页上传到互联网之后再由用户的浏览器对这些标记进行解释并生成页面，于是便有了现在千姿百态、百花齐放的互联网络。

打开一个网站，首先映入眼帘的是该网页的界面，如按钮的摆放、文字的组合、色彩的应用等等，这些都是网页设计的范畴。其实在网络刚兴起时，没有太多视觉设计的概念，很多网站都是程序员用HTML语言设计出只有功能取向的网页，那时候网页无法一边写一边观看，只能写好后到浏览器上执行，所以程式设计常常无法和基本的美观结合在一起。然而，在一个个可视化的网页编辑器相继问世，特别是许多平面设计师投入网页设计的行列后，整个网页视觉设计的行业起了重大的变化！

随着这几年网络的飞速发展及人们对美的不断追求，网页设计逐渐受到人们的重视，形式了一门新兴的学科。简单的讲，网页设计就是从审美入手，结合平面设计的特点，运用平面构成中的基本形式到网页中，让网页更加富有美感。例如将平面构成中的节奏与韵律、骨格与肌理溶入到网页中，会使内容繁多的页面更加有条理、主次分明，因此对平面构成的掌握与了解是关系到网页成功与否的重要基础。

（二）了解平面构成

艺术设计是人类文明的重要部分，涵盖了当代人类生活的各个领域。构成是一个近代造型概念，含义是指将不同或相同形态的几个单元重新组合成为一个新的单元，是以研究视觉语言的特性、构成原理以及审美规律为目的，重在研究和分析视觉的形态、空间、运动、比例等因素的变化和形式。

平面构成的认识源于自然科学和哲学认识论的发展，是建立在量子力学基础之上的微观认识论，这种由宏观到微观认识的深化，逐渐影响了造型艺术的发展。构成观念早在西方绘画中就可见其影子，如立体主义绘画、俄国的构成主义、荷兰的新造型主义，到后来的德国包毫斯设计学院的不断完善发展，形成一个完整的现代设计基础的教学体系，奠定了构成设计观念在现代设计应用中的地位和作用。二十世纪七十年代以来，平面构成作为一门设计基础课程，已广泛应用于工业设计、建筑设计、平面设计等领域。

（三）何为网页平面构成

平面设计在网页设计中占有相当大的比重，而平面设计的重要理论基础则是平面构成，所以说，平面构成也是网页设计的重要理论依据和知识基础。

在一堆杂志中，人们往往会拿起色彩丰富、图片艳丽、结构清晰的那本。同样，一个布局合理、重点突出、富有美感的网页，它不但能吸引用户点击，更能够完美表达网页的创意思维。所以，平面构成的出现，不得不让我们对单调、乏味、缺乏美感的HTML页面进行反思，为了拓展网页设计的艺术视觉，丰富网页设计的思维及表现手段，我们引进了网页平面构成的理论，这有点类似于传统平面设计中的构成理论，一般包含风格策划、页面构图、布局与色彩等方面，我们不妨将平面构成理论作为网页设计的理论指导，即“网页平面构成”。把网页设计看成是平面设计的一种审美方式的延伸，而点线面作为平面构成中的基本元素，在网页中巧妙地互相穿插、互相衬托、互相补充构成最佳的页面效果，完美表达设计意境。因此，网页设计作为一种视觉设计，特别讲究编排和布局，虽然主页设计不同于平面设计，但它们有着许多相近之处，如：对比、渐变和节奏美、韵律美，图/底关系或通过文字与图形的组合形成空间上的立体感。所以，灵活运用平面构成中的各种手法，通过页面各元素之间的有序排列使浏览者达到某种共鸣产生一种和谐的美感。

平面构成是一种设计语言，已为当今社会各个艺术设计领域所应用，它以一个全新的造型观念，给我们的网页设计注入新鲜的血液。

二、为网页设计注入新的血液

（一）人性化的网页设计与策划

“人们总以为设计有三维：美学、技术和经济，然而更重要是第四维：人性。”------美国设计师普罗斯

人类的艺术设计是一种审美活动，设计的任务是要实现设计者或用户的意图。网页设计是指设计师将客户要表现的主题和达到的效果，组合页面元素，通过艺术手法创造出符合大众审美观的界面。开始进行网页设计前，需要做很多调查，如客户的需求、站点的性质等，这些要求的不同设计出的网页也会不同，用现在最时髦的话来讲就是更具有人性化。

在网络的虚拟世界，互联网提供了天下大同的机会，充斥着无数站点，然而大多数网站的设计都缺乏灵魂和主旨，页面结构都比较松散、混乱，其原因就在于缺乏有效的策划。因此要想使你的网站从那些数不清的站点中脱颖而出，就必须对整个站点作好统筹规划，对所有的内容进行斟酌，再合理组织页面结构与色彩。

首先，了解一下同类站点的风格、特色，吸取他们的长处，找出自己的优势，做好市场调查，明确自己网站的主题、规模、主要特色及主要受众目标，再确定整个网站的整体风格。其次，网页的制作，设计者先要在纸上用笔画出大概的设计草图，等待客户确认后，才用计算机绘图软件画出平面效果图（色彩与页面结构），之后才能投入实际的制作。

（二）网页平面构成手法

平面构成是一种视觉形象的构成，其形态的抽象性特征和产生不同视觉引导作用的构成形式，组成严谨而富有节奏和动感的画面，营造一种秩序之美、理性之美和抽象之美。其构成形式主要有重复、近似、浙变、变异、对比、集结、发射、特异、空间、分割、肌理及错视等等。它的研究对象主要是在平面设计中，如何构造形象，怎样处理形象与形象之间的关系，如何掌握美的形式规律，并按照美的形式法则，构成设计所需要的图形。

平面构成中最基本的形态要素是点、线、面，其构成要素有大小、方向、明暗、色彩等，以这些基本要素为条件，加以组合构成，便会创造出无数理想的抽象造型。

网页上的所有元素都可以看作构成的基本要素。在一幅成功的作品里，需要点、线、面的共同组合来构造整个页面。通过三者的组合，可以突出页面上的重要元素，突出设计的主题，增强美感，让访问者在感受美的过程中领会设计的主旨。

1、构成的基本元素点、线、面及其在网页设计中的运用

在页面构图中凡是表现视觉图形或文字，都可以简化或趋近于点、线、面的视觉感受。网页版面中的各种视觉元素正是以点、线、面的形式相互依存、相互作用，组合成各种视觉信息，形成千变万化的视觉空间和感受。因此，只有协调处理好点、线、面之间的相互关系，才能设计出最佳视觉效果的网页。

（1）点的运用

点是可见的最小的形式单元。在网页中，点是相互比较而言的，任何一个单独的细小的形象都可称之为点：按钮、字符、小色块等等。在网页中合理的安排点的布局，或者在页面设计中将某些视觉形象进行点化处理，并运用恰当的构成手法进行版面布局，不但可以协调画面，甚至可以起以画龙点 睛的作用。图1为个人主页，所以在形式上比较轻松活泼。网页中大面积的空白与中间的四个点形成强烈的对比，而且在点的处理上采用传统的中国水墨画的手法，更富有意境。在点的位置安排上也体现了一种节奏与韵律，形成视觉上的跳跃。

图１．点的运用（来自www.xiexiebang.com）

由这两个典型的例子可以看出，无论是什么样的法则都源自设计者本能的审美观的驱使，再应用到实际当中，当然在设计时不必十分刻意追求什么法则。应该从日常生活中，从自然界的事物中观察美的规律，培养构图的艺术美感。

（五）网页色彩构成

1、色彩的基础知识

“接天连叶无穷碧，映日荷花别样红。”-------杨万里

每次读这首诗，闭上眼睛仿佛就能看到：碧波万顷，微风吹拂，满塘荷叶轻轻摇曳，艳阳下的荷花鲜红欲滴。这句诗里的“碧”、“红”其实就是色彩。所以色彩对我们来讲是不陌生的，因为我们生活的世界中无处不存在着色彩。色彩以一种特别的方式传达信息，这些信息会影响观看者的心理和感受，左右他们的判断和选择，色彩对于设计而言实在太重要。

首先熟悉一下色彩的基本概念，三原色——红、黄、蓝，三间色——橙、绿、紫，三种间色互为“补色”。将图10中圆环中的任意一种颜色和黑色、白色、灰色按照不同比例混合就可以得到更多的颜色。例如，当色彩RGB值为（0，0，255）时为纯蓝色，饱和度100%。随着饱和度的逐渐降低，颜色会越来越接近灰色。

2、色彩心理

色彩，在不知不觉中作用于人的心理，据说伦敦泰姆士河附近有一座黑色的桥，它因每年在桥上自杀的人数惊人而著名，后来人们将 它改成了绿色，自杀人数剧减。有专家分析，如果将它改成粉红色、天蓝色等更明亮的色彩就可能使自杀人数将趋于零。图10．色环

当你看到色彩时，首先会勾引起对生活的联想与情感作用。蓝色来自天空和大海，它给人一种心胸开阔，文静大方的情操。绿色是大自然的颜色，它能令人充满青春活力。黄色饱含智慧与生命力，让人显得年轻有朝气。看到白色，使人觉得纯洁可爱，而紫色却有着神秘高雅的感觉，这些对于网页设计而言特别重要。我们经常说“第一印象最重要”，用户在访问网站时的第一印象实际上是来自整个网页的色彩！

所以色彩具有一定的含义和感情上的象征作用，人类确实存在色彩联想的共通性。在炎热的夏天人们更容易接收蓝色的“百事可乐”，而在较为冷的天气喝红色的“可口可乐”人是不是更多一点。在我们谈到这种象征印象时，不能过于主观、片面地看问题，人们对色彩的联想是相对，不同的色彩组合在一起也会起到不同的效果。

3、合理搭配色彩

色彩是艺术表现的要素之一。在网页设计中，设计师根据和谐、均衡和重点突出的原则，及色彩对人们心理的影响，合理地加以运用。将不同的色彩进行组合、搭配来构成丰富的页面。单纯的颜色 并没有实际的意义，和不同的颜色搭配，它所表现出来的效果也不同。比如绿色和金黄、淡白搭配，可以产生优雅，舒适的气氛。蓝色和白色混合，能体现柔顺、淡雅、浪漫的气氛。红色和黄色、金色的搭配能渲染喜庆的气氛。但也要考虑到网页的适应性，应尽量使用网页安全色。不同网站应当使用不同的色彩方案，与站点的主题相吻合的色彩方案决不仅仅可以让网站 “更加好看”，更重要的是在访问者心目中建立对这个网站的感性认识。所以，色彩方案的选择决不能草率，是网站建设的第一步。

按照色彩方案中色彩使用方式的不同，可以将色彩方案划分为几种常用类型，单色方案、相似色方案、对比色方案等。

（1）单色方案，是指在网页设计中使用一种基本颜色，通过调整这种基本颜色的灰度和亮度来得到更多的颜色。单色方案是一种比较稳重的方案，或者说比较保守的方案。给人整洁、经典的感觉，商业网站也比较适合使用此种颜色方案，使访问者容易建立对网站的信任感。

（2）相似色方案，在色彩圆环上彼此相邻的几种颜色构成的配色方案就是相似色方案。例如橙色、橙红色以及橙黄色就可以组成一个相似色方案。通常，相似色配色方案可以给人非常协调的感觉，因此在网站设计中非常实用。典型的运用方法就是，用一种颜色作为页面背景，而另外一种在颜色环中与其相邻的颜色作为前景色。

（3）对比色方案，把一个颜色和它补色的左右边的色彩配合起来，可以得到强烈的视觉效果。运用这种方式容易塑造活泼、运动的网页效果，在设计时要注意主体色彩的运用，即以一种或两种色彩为主，其他色彩为辅。

4、色彩构成在网页设计中的细节体现

-----中国移动网与MTV网之色彩比较

图11．中国移动网（来自www.xiexiebang.com）

图12．MTV网（来自www.xiexiebang.com）由两幅图比较可以看出，企业的不同性质决定了网页的用色，首先，中国移动是一家面向全国用户的大型企业，他所服务的对象决定了网页用色必须考虑到所有用户的接受能力，必须稳重大方，可以看出整个界面采用冷静开阔的蓝色调，但是页面色彩却不单调，当用户将鼠标移动到导航栏上，蓝色的横线变成了明快的翠绿色，就这一点小小的细微动作却增强了用户的交互性。但整体而言，色彩还是比较单一，稳重有余而活力不足，作为一家年轻的企业，应该要有年轻人的活力。所以在大片的蓝色中夹杂了鲜艳的橘红色作为点缀，立刻整个页面就会显得比较活泼，再用渐变色丰富了色彩的层次。整体来看是一个比较成功的功能与美感并存的企业网站。

另外再来看看第二幅图，感觉立即不一样了，全黑的底与白色的文字形成视觉上的冲击力，而页面中间被等分成四块，分别用了淡、浅、深三种灰色引起视觉上的分割。并且在色彩上明显比第一幅图丰富，有桔色、黄色、绿色、青绿色、紫色等等。这是一家以娱乐服务为主的网站，他所面向的用户是以年轻人为主，符合潮流，走在时尚前沿。在用色上也大胆出位，全黑色的底，象征年轻人的叛逆与不羁，以及时尚感较强的紫色和青绿色的搭配更能吸引人的视线。

在细节上的设计与处理最能体现一个网站是否成功，可以看出来两个网页都是比较注重在这方面 的用色，总的主色调不变，以丰富多彩的小色块点缀，起到画龙点睛的作用。所以一幅比较成功的网页在色彩的设计上也要独具匠心，充分合理的利用细节，结合色彩的感情，才可以使作品具有更加深刻的艺术文化内涵，才能够让网页设计的个性创造和审美意识得到淋漓尽致的展现，设计出的网页会更加富有生命力。

三、不同审美文化中的网页设计

（一）文化背景对网页设计的影响

美学(Aesthetics)，德文原义为“感性学”，是一门研究人类审美活动的学科。“审”者，看也。通俗地说，就是人们对现实生活中各种美好现象的感受和欣赏，是人类最基本的精神文化活动，因而也最通俗、最具大众化，在东西方都有着极为悠久的历史。

21世纪是一个经济飞速发展的时代，是一个时时事事讲求审美格调的时代，其实审美就是一个民族精神世界的流露。中国的审美观是中国人的人格、修养、品行、文化、艺术的高度统一的综合表现。具有时代的、民族的和阶级的烙印。也就是说不同时代、不同民族和不同阶级在文化艺术审美格调的追求上有着不尽相同的倾向和标准。且不说汉代人如何会在卢浮宫不屑一顾；古希腊人如何会在故宫拂袖而去，就是同为中国的唐汉两代对美的欣赏都不一致。所以说，各国的地域环境、气候条件、经济情况、人文思想不同所形成的审美观也会不同，从网页设计方面来看，各国都有自己的特色。

1、欧美风格的网页设计

欧美国家进行工业化比较早，经济相对比亚洲发达。美国早在二十年代就已经是世界上工业化程度化最高的国家，特别是二战后，更成为世界上的经济大国。随后进入90年代，计算机业迅速发展，高度的工业机械化对其网页设计也有一定影响，除注重实用性之外特别在细节元素上的处理更显精致，网页的艺术表现更是别具一格，其中肌理的表现形式独具特色。另外，美国是一个移民国家，有着一个多元化的社会，其短暂的历史，自由的人性，在网页设计中表现出丰富的幽默感与创造性。图13中所示：整个网页由机械化式的线条相互组合构成，刚强有力，将金属的质感充分的表现出来。

图13．欧美网页中肌理的表现形式（来自www.xiexiebang.com/fr）

德国则不同，气候干燥而寒冷，地形复杂多山的自然环境造就了严肃的德国人，因而，德国设计更加体现其科学性和逻辑性，德国网站设计也充分体现了 “实用”和“简洁就是美”的观点，如图15所示。

图15．简单实用的德国网页（来自www.xiexiebang.com）20），对字体、字型及字号的选择除要符合审美标准 外还要考虑到显示屏的大小，及整个页面结构的把握，是借助框架（也叫骨骼）或是其他，以及如何更有效的在手机上使用多媒体技术，使得网页艺术设计的表现力更加丰富。

在未来，网页的显示模式将会发生翻天覆地的变化，不论是在电脑、手机、手表抑或是电视上，我们看到的网页对美的追求会更加彻底，平面构成中的重复、变异、韵律、连续以及图/底关系处理等，是任何一种设计的基本原理，尽管处于不同文化背景中的设计师在运用这些视觉构成元素时都不经相同，但是，所有的文化都涉及到这些视觉基本要素，都离不开形式美的法则。美与技术并存将会在未来完美体现，所以，在未来网页设计将真正走进每个人的生活，设计将会不再不拘于形式，更加的灵活，看重的是网页设计的灵魂。因而，平面构成也就必然成为网页设计的重要基础。

五、主要参考资料

①．毛溪，2003．平面构成(第一版)．上海：上海人民美术出版社，122． ②．李凇，2000．中外美术对谈录（第一版）．中国工人出版社，2 ③．姜伟，2004．网页美工传奇（第一版）．机械工业出版社，2 ④．徐希景、陈笋，2003．网页平面构成的创意手法分析．福建商业高等专科学校学报，47 ⑤．刘永翔、唐良瑞，2004．网页设计中的视觉构成分析．北京工商大学学报，58 ⑥．杨萍，2005．抽象形、空间、肌理——平面构成在教学实践中的思考．黔南民族师范学院学报，78 15

第四篇：商业网页设计论文

摘要:商业网页设计中具体的字体、图形、图象、标志等等，常常表现为点线面、色彩、动静、主次等视觉因素，这些因素的不同使用都会影响读者的视觉习惯和心理变化。本文将分析商业网页设计视觉因素的心理规律，揭示网页设计如何通过视觉因素更有效、更合理的表现与传达信息。

关键词: 网页设计 视觉心理因素 构成要素 视觉流程

商业网站是企业向用户和网民提供产品和服务的一种方式,是企业开展电子商务的基础设施和信息平台，其网页页面由具体的文字（标题、广告语、单位名称、Email地址等）、企业标志、商标、产品图形、和信息菜单等内容组成，这些内容又常常表现为点线面、色彩、动静、主次等视觉因素，这些因素的不同使用都会影响读者的视觉习惯和心理变化。

本文将试析商业网页设计视觉因素的心理规律，揭示商业网页设计如何通过视觉心理因素更有效、更合理的表现与传达信息。展现企业形象、介绍产品和服务、体现企业发展战略。

一、商业网页设计中点、线、面视觉心理因素的运用

点、线、面是商业网页设计基本的视觉元素，是表现视觉形象的基本设计语言。从视觉角度看网页设计主要是如何经营好三者的关系，因为不管是任何视觉形象或者版式构成，归结到底，都可以归纳为点、线和面。

1.网页设计造型要素中的点

商业网页设计中的点是构成网页的最基本单位，是指页面中具备点的视觉特点、体积较小的物象。相对于整体背景而言一个单独的点是相比较而言的；是有大小、形状和体积的。点的大小、形态、位置不同，所产生的视觉效果、心理作用也不同。一个网页往往需要有数量不等，形状各异的点来构成，可以是具体产品、商品标志等，也可以是感觉上的点。例如，天空中的飞鸟、沙滩上的脚印、花瓣上的蜜蜂等，在其周围背景衬托下，都给人以“点”的视觉心理感受。

点在设计中即可以起一种稳定造型的作用，亦可起到活泼生动、吸引视觉中心的作用，使用得当，甚至可以画龙点睛；点的形状、方向、大小、位置、聚集与发散，还能够给人带来不同的心理感受。

(1)单点的应用：点在人们的视觉中具有很强的吸引作用，如：点（商品）设计在网页的上方或左右位置，则给人不稳定感和相对的动感。

(2)多点的应用：两点（二商品）之间会产生心理连线的感觉，多点时则会出现不同排列，顺序的虚拟的面或形体。

2.网页设计造型要素中的线

点的延伸形成线。线在页面中的作用在于表示方向、位置、长短、宽度、形状、质量和情绪。线是分割页面的主要元素之一，是决定页面现象的基本要素。商业网页设计视觉因素中的线主要指文字的行线，商品图形、图象的轮廊线，各种装饰线。线的形态主要有直线和曲线两大类：

(1)直线给人一种紧张、锐利、简洁、刚直感，从心理或生理感觉来看具有男性特点。直线又有：细直线，给人纤细、敏锐的心理感觉；粗直线，给人豪爽、拙朴、厚重的感觉；垂直线，给人一种挺拔、庄严感；水平直线则给人方向感和强烈的动感。

(2)曲线表现出一种动态，活泼，轻快的意味，显示了女性美的特征，商业网页设计中运用文字行、图象轮廊线或装饰线的造型，创造一种女性化的审美感。自由曲线是最好的情感抒发手段。打破了水平线组成的庄严和单调，给商业网页增加了丰富、流畅、活泼的气氛。水平线和自由曲线的组合运用，形成新颖的形式和不同情感的对比。

3.网页设计造型要素中的面

线的推移形成面。面是无数点和线的组合。面具有一定的面积和质量，占据空间的位置更多，因而相比点和线来说视觉冲击力更大更强烈。面在网页设计中通常指各种图形、色块的形状设计，不同形状的面具有自己鲜明的个性和情感特征，能给人不同的心理感受，如方形的面具有沉着，稳重，厚实，坚强的男性特征；三角形、梯形面常给人一种稳定、端正之感；但如果将它们倒过来设计，则给人一种轻、不稳定的感觉。圆形充实、圆满、活泼的感觉，比较适合表现儿童产品或者女性用品。菱形或不规则形体则给人一种活泼、轻快之感。

在商业网页的视觉构成中，点、线、面既是最基本的造型元素，又是最重要的表现手段。在确定商业网页主体形象的位置、动态时，点线面将是需要最先考虑的因素。必须熟练掌握设计语言。要善于根据商业特性采用不同的组合去体现不同的情感诉求，达到推销、销售商品和服务的作用。只有合理的安排好点线面的互相关系，才能设计出具有最佳视觉效果的页面，充分的表达出商业网页最终的诉求！

二、商业网页设计中色彩视觉心理因素的运用

商业网页设计中色彩是确立网站风格的灵魂。色彩能产生强烈的视觉效果，使页面更加生动。色彩设计的好坏直接影响阅读者的观赏兴趣与心理变化。因此，地位十分重要。商业网页的色彩设计应从以下几个方面把握和利用其心理特征：

首先，整个页面要确定一个主色调，其有利于体现网站主题。每一种色彩都具有它自身的性格，如：彩度高，明度高的色彩常给人一种华丽感，相反彩度低，低明度的色彩则给人一种朴实感。暖色系、高明度的色彩能给人一种面积大的前进感。冷色系、低明度的色彩则能给人一种面积小的后退感。每个人群对色彩的喜好也有所不同，如男性较喜欢冷色，女性则偏好暖色或高明度、高彩度的色彩，儿童喜好纯色，讨厌浊色，老人则偏好浊色，中年人或文化层次较高的人偏好冷灰色等。因此在设计中要考虑主要读者群的背景和构成以及如何与商品的属性相呼应。

其次，在主色调下的色调搭配。若页面空间整体、色彩和谐统一，则给人一种幽雅、宁静感；若以对比手法处理，图形文字色彩明快突出于背景色，则页面空间氛围会显得活跃而有生气。但是，要注意不能有强烈的色彩对比，因为过于丰富的背景色彩会影响前景商品图片和文字的取色，使文字溶于背景中，不易辨识。所以背景一般应以单纯为宜。

最后，作为设计师在考虑网页设计时，还应考虑到时代流行性色和企业标准色的问题。所谓流行色，是指在一定范围内和时间内，非常盛行并易为人们接受的某些式样或颜色。而标准色的运用在网上扩大了品牌效应，也是对公司整体形象的统一应用，从而构成了企业识别系统（CIS）的重要部分。

三、商业网页设计中动、静的视觉心理因素的运用

商业网页设计构成要素可分为两种状态：静态与动态。静态要素设计具体指静止的商品图形、文字、按纽等；动态要素，具体指动态按纽、按纽连接、网页动画和视频等，它们是丰富、生动网页、张显个性、突出主题重要手段。

动静以及不同的动静组合都可以反映不同的心理与性格，如，动大体上给人活泼、生动的印象，但极慢的动常给人忧虑感；迅速或突然的动常给人焦虑、惊慌感。另外，静也常给人宁静、沉闷两种感觉。

商业网页设计中要注意处理好动静的关系，要整体和谐统一，给人生动而不躁动或厌恶感。同时还要遵循动态性原则与交互性原则。

1.动态性原则，即要有四维空间或五维空间的运作观念。一件网页商品、图片不仅是二维的平面或三维的视觉，也要有时间与空间的变换，情感与思维认识的演变等多维因素。

2.交互性原则，即界面设计强调交互过程。一方面是物的信息传达，另一方面是人的接受与反馈，对任何物的信息都能动地认识与把握。

四、商业网页设计中视觉流程心理因素的运用

商业网页设计是通过视觉元素引起人注目而实现商品信息内容的传达，为了使网页获得最大的视觉传达功能，使网页真正成为可读强性而且新颖的媒体，必须适应人们视觉流程的心理和生理的特点。

视觉流程的形成是由人类的视觉特性所决定的。心理学家葛斯达认为：人们阅读时，版面的上部比下部的注目价值高，左侧比右侧的注目价值高。因此，版面的左上侧位置最为引人注目，因此，在网页设计中一些突出的商品信息，如主标题、每天更新的内容等通常都放在这个位置。以便于一开始就吸引受众的视线，诱导其由上到下，由左到右地移动。此位置也被称作视觉的最佳视域。也就是最优选的地方。当然视觉流程是一种感觉而非确切的数学公式，只要符合人们认识过程的心理顺序和思维发展的逻辑顺序，就可以更为灵活地运用。设计者可以利用视线移动规律，诱导读者的视线作左右流动、上下流动以及斜线的不稳定流动，通过编排设计，人为地产生最佳视域，突出主要商品，以达到一定的视觉效果，传递商品信息。

商业网页作为一种新的企业开展电子商务的基础设施和信息平台，它的发展虽然没有多长时间，却兼容了传统平面设计的特征，又具备其所没有的优势，成为今后商品信息交流的一个非常有影响的途径。其设计是一种综合性的设计，它所涉及的范围非常的广泛，包括消费者心理学、视觉设计美学、人机工程、哲学等诸多方面，而本文中只从视觉心理因素的角度进行了一些阐述与分析，仅作抛砖引玉之用。

参考文献:

[1]李彬彬:设计效果心理评价[M].北京:中国轻工出版社,2005.1

[2]赵殿泽:构成艺术[M].沈阳:辽宁美术出版社，1994

[3]赵国志:色彩构成[M].沈阳:辽宁美术出版社，1994

[4]张国良:传播学原理[M].上海:复旦大学出版社，2000.1

第五篇：个人网页设计(论文)

炎黄职业技术学院信息工程系

毕业设计（论文）

个人网页设计

年 级: _ 2009级___ _ 学 号: _ 0******17 _ 姓 名: __ _****_____ 专 业: 网络数字媒体 _ 指导老师: __ ****__ __

二零一一年十二月 炎黄职业技术学院 信息工程系毕业设计（论文）

摘 要

本论文将对个人网页设计与制作的方法、工具等展开研究和探讨。在介绍网页设计与制作语言的基础上，着重使用CSS样式表作为工具语言进行网页设计与制作的实际操作，分别对基于对象的JavaScript语言、用于编辑HTML语言的软件进行了详细的介绍。

本论文主要章节如下，炎黄职业技术学院 信息工程系毕业设计（论文）

炎黄职业技术学院 信息工程系毕业设计（论文）

炎黄职业技术学院 信息工程系毕业设计（论文）

1、是一种脚本编写语言

JavaScript是一种脚本语言，它采用小程序段的方式实现编程。像其它脚本语言一样,JavaScript同样已是一种解释性语言,它提供了一个易的开发过程。

它的基本结构形式与C、C++、VB、Delphi十分类似。但它不像这些语言一样，需要先编译，而是在程序运行过程中被逐行地解释。它与HTML标识结合在一起，从而方便用户的使用操作。

2、基于对象的语言。

JavaScript是一种基于对象的语言，同时以可以看作一种面向对象的。这意味着它能运用自己已经创建的对象。因此，许多功能可以来自于脚本环境中对象的方法与脚本的相互作用。

3、简单性

JavaScript的简单性主要体现在：首先它是一种基于Java基本语句和控制流之上的简单而紧凑的设计, 从而对于学习Java是一种非常好的过渡。其次它的变量类型是采用弱类型，并未使用严格的数据类型。

4、安全性

JavaScript是一种安全性语言，它不允许访问本地的硬盘，并不能将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据的丢失。

5、动态性的

JavaScript是动态的，它可以直接对用户或客户输入做出响应，无须经过Web服务程序。它对用户的反映响应，是采用以事件驱动的方式进行的。所谓事件驱动，就是指在主页(Home Page)中执行了某种操作所产生的动作，就称为“事件”(Event)。比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。

6、跨平台性

JavaScript是依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算机，并支持JavaScript的浏览器就可正确执行。从而实现了“编写一次,走遍天下”的梦想。

实际上JavaScript最杰出之处在于可以用很小的程序做大量的事。无须有高性能的电脑，软件仅需一个字处理软件及一浏览器，无须WEB服务器通道，通过自己的电脑即可完成所有的事情。

总之，JavaScript 是一种新的描述语言，它可以被箝入到 HTML 的文件之中。JavaScript语言可以做到回应使用者的需求事件(如：form的输入)，而不用任何的网路来回传输资料，所以当一位使用者输入一项资料时，它不用经过传给伺服端(server)处理，再传回来的过程，而直接可以被客户端(client)的应用程式所处理。

炎黄职业技术学院 信息工程系毕业设计（论文）

JavaScript 和 Java 很类似，但到底并不一样！Java 是一种比 JavaScript 更复杂许多的程式语言，而 JavaScript 则是相当容易了解的语言。JavaScript 创作者可以不那麽注重程式技巧，所以许多 Java 的特性在 Java Script 中并不支援。

2.3 CSS样式表

级联样式表（Cascading Style Sheet）简称“CSS”，通常又称为“风格样式表（Style Sheet）”，它是用来进行网页风格设计的。比如，如果想让链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种风格。通过设立样式表，可以统一地控制HMTL中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表，可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力。

CSS目前最新版本为CSS2,能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象盒模型的能力，并能够进行初步交互设计，是目前基于文本展示的最优秀的表现设计语言。

在网页上使用样式表有三种方法可以在站点网页上使用样式表：

将网页链接到外部样式表。

在网页上创建嵌入的样式表。

应用内嵌样式到各个网页元素。

当要在站点上所有或部份的网页上一致地应用相同样式时，可使用外部样式表。在一个或多个外部样式表中定义样式，并将它们链接到所有网页，便能确保所有网页外观的一致性。如果人们决定更改样式，只需在外部样式表 — 中作一次更改 — 而该更改会反映到所有与该样式表相链接的网页上。通常外部样式表以.css 做为文件扩展名，例如 Mystyles.css。

当人们只是要定义当前网页的样式，可使用嵌入的样式表。嵌入的样式表是一种级联样式表，“嵌”在网页的 标记符内。嵌入的样式表中的样式只能在同一网页上使用。

使用内嵌样式以应用级联样式表属性到网页元素上。

如果网页链接到外部样式表，为网页所创建的内嵌的或嵌入式样式将扩充或覆盖外部样式表中的指定属性。

炎黄职业技术学院 信息工程系毕业设计（论文）

炎黄职业技术学院 信息工程系毕业设计（论文）

图2-2 随笔

相册效果图2-3如下：

图2-3 相册

音乐效果图2-4如下：

图2-4 音乐

关于我效果图2-5如下：

炎黄职业技术学院 信息工程系毕业设计（论文）

图2-5 关于我

3.2 网站主题

本网站是一个简单的个人网站设计，以动漫为主题，主要包括了本人的自我介绍、比较喜爱的动漫作品以及平时的娱乐等。

3.3 网站风格

1.本网站主要体现了清新自然的风格，以简洁为主。2.网站的主色调为绿和白，充分衬托清新自然的风格。

炎黄职业技术学院 信息工程系毕业设计（论文）

炎黄职业技术学院 信息工程系毕业设计（论文）

(1)执行“插入”—“新建元件”命令，创建一个名称为“拉伸的叶片”的影片剪辑元件。

(2)选择矩形工具，设置填充颜色，在舞台上绘制一个无描边举行，在属性面板中设置宽和高。

(3)选择矩形，将其转换成“名称”为“叶片”的图形元件。(4)选择

onmouseout=“makevisible(this,1)”

onmouseout=“makevisible(this,1)” 炎黄职业技术学院 信息工程系毕业设计（论文）

2.输入文字，制作超链接。

4.6 xiangce4.html页面的制作

1.制作图库页面。

(1)新建一个网页文档，建立图库页面的基本布局。

(2)将光标定位在页面左侧的 炎黄职业技术学院 信息工程系毕业设计（论文）“1”，单击[确定]按钮回到行为面板，将此行为事件改为“onclick”。

(2)用同样的方法，给另外3张图像添加同样的行为，将 炎黄职业技术学院 信息工程系毕业设计（论文）

致

谢

本论文历时两个多月，我系统综合地将我所学的知识运用于毕业设计的全过程。在完成毕业设计中，首先我要感谢我的指导教师****老师。*老师耐心细致地指导我毕业设计，提出了很多精辟而富有建设性的建议。*老师认真负责的工作态度，严谨的治学态度都给我留下了深刻的印象，在学习上给予了我极大的关心和帮助，在此表示衷心感谢！

同时，感谢炎黄职业技术学院为我提供了一个良好的学习环境，感谢学院的领导和老师们！他们无微不至的关怀、精心的培养使我到了很多的知识，终生受益！

炎黄职业技术学院 信息工程系毕业设计（论文）

参考文献

[1] 缪亮.Dreamweaver CS3 基础与实训教程.电子工业出版社，2008年.[2] 李冬芸.Flash动画实例教程.电子工业出版社，2010年.[3] 缪亮，郭刚.Photoshop平面设计实用教程.清华大学出版者，2008年.