网页设计原则.docx

网页设计原则.docx

《网页设计原则.docx》由会员分享，可在线阅读，更多相关《网页设计原则.docx（10页珍藏版）》请在冰豆网上搜索。

网页设计原则

网页设计中的功能与美

网页设计伴随着网络的快速发展而快速兴起，作为上网的主要依托，由于人们使用网络的频繁而变得非常的重要。

网页讲究的是排版布局，其功能主要就是提供一种形式给每个上网者，让他们能够了解网站提供的信息。

　　从网络的发展来看，网页设计从无到有，从低级到高级，是基于技术的原因而受到客观的限制的，因为受传输带宽的限制，最早的网页是纯字母和数字的，没有图片和声音更别说是动画了，只能将占用空间很小的数字和字母来进行传输。

　　由此看来网页最初就是在功能性的基础之上发展起来的。

到今天同样上网也离不开使用它的功能，所以网页的审美就首先要考虑其功能的要素（例如很多国外的大公司的网站也是这样做的）。

那么从功能出发来看待网页设计，我们就必须考虑，使用者如何从网页中得到功能，如何更好的得到功能。

这就需要站在使用者的角度来看待网页设计，才能使自己做出的网页受欢迎，从而达到基本的目的。

有的网页设计师说：

我是设计师，我站得比普通人高，欣赏水平也比他们高，应该引导潮流，应该引导他们学会欣赏美的网页。

作为设计师引导潮流没有错，但是不应该采用居高临下的方式，而是要贴近自己的使用对象，想他们所想，急他们所急，方便他们的使用，适时的将自己的设计风格融入到作品中去，接受他们的检验，只有经得起考验的设计才是好的设计。

而不是所谓的阳春白雪，成为孤家寡人，不适用。

作为设计师来说，就是要把自己的网页做得美一些（基于功能性的）。

　　谈到美，网页这种特殊环境下的美于传统的艺术上的审美有着明显的区别，因为一般的艺术上的美是海阔天空，无所顾忌的，只要符合人们的欣赏的习惯，能够在欣赏者的心里产生共鸣就是美的；而网页的布局上的审美却要受到很多的限制，当然它也有优于传统艺术的地方，最明显的就是它的交互性和更新速度的快捷，纯艺术很大程度上是作者的自我宣泄，但是网页设计直接面对的是大量用户，随时都会反馈回来对网页的批评建议等，可以根据实际情况进行修改，比如在建站时考虑不周到的地方，设计时没有得到重视的地方，可以根据要求进行调整。

同样不损整体效果，却可以使使用者用起来更加的方便。

这个过程可以在很短的时间里完成。

同时网页能融合文字、图片、声音、动画于一身。

这是传统艺术所达不到的。

当然最根本的在使用方面就限制了它不能够随意的挥洒自如，任设计师自由的发挥。

以下针对网络环境下的审美。

　　首先：

要考虑上网者的环境，通常可见的情况是：

上网者眼睛盯着一个冷冰冰的电脑屏幕，手移动鼠标，保持一定的姿势，而且一般是连续很长的时间。

在这种情况下，假如连接的网站的网页做得很差，不考虑排版布局的形式美的要素，一味的以刻板的文字或者是图片来充斥这个页面，那么使用者看久了就会厌倦，甚至讨厌。

同样在网络世界里，五花八门，涉及到各方面的内容，使用者通常是打开很多的窗口，在一种纷繁复杂的情况下接受信息。

这样假如他们浏览的网页是设计得又是特别花哨，图片、文字、动画等等堆砌的极为杂乱，那么更加剧了这种心理上的厌烦感，这种网页能算得上美吗？

所以从使用环境里的功能的因素来考虑美才是最根本的。

   其次：

考虑使用对象本身也是网页审美的一个重要方面，网页设计都是为每个具体的网站的做宣传，那么不考虑对象就如同闭门造车，这样会造成其根本的功能的损失，使使用者浏览起来困难。

例如一个儿童网站，设计得如同一些新闻专题的网页一样，纯粹是文字。

那么使自己的使用对象－儿童在浏览该网站的时候毫无兴趣，阻碍了网站的基本的目的，因为该网站的目的就是要使更多的儿童来光临这个网站，从而扩大网站影响。

从这个功能层面上来理解，设计的美是同使用对象分不开的。

　　再者：

网页设计的美其实是一个满足使用者需求的过程，能够使他们使用起来方便快捷，排除他们使用中的问题，这就是美的，这就是纯粹从功能上的要求出发的。

就是最根本的功能被满足就是最根本的美。

不是吗？

假如我想上一个体育的网站了解一下当天的足球战报，那么我上网的目的性就是非常的明确，直接看足球的结果。

那么考虑一下我的上网过程就是先敲入网址，到主页上，然后尽快的找到足球的栏目，再找到比分的链接。

那么设计师如果考虑到上这个网站的很多人都非常想知道足球的比分，那么在主页上放上一个流动的临时更新的框，就可以使上站的使用者直接在主页上看到想要看的东西，这样快速而又方便的结果，其实质上是一个网页设计的成功的地方，这种网页就是美的，反之假如把网页设计得非常的“漂亮”（这里指的是纯粹的从艺术审美上的漂亮，满足一般的形式美的要求的，而不考虑使用环境的情况），但是把该链接做到不容易找到的地方，或者是由于满足“漂亮”的要求，增加了几级的链接，从而增加了使用者的不方便，这种网站也是不美的，至少它没有为自己的使用对象考虑，就是失败。

　　还有一个美的因素也不能不考虑，就是网站本身，其实也是功能来决定的，作为网站的目的就是要通过使用者的使用来得到体现，如何使更多的人来使用和使他们浏览过之后记住这个网站？

也就是通过自己的设计使网站的形象得到提升，使网站的形象在每个使用者的心目中扎根。

这是现在网页设计中普遍不受重视的，也许是还欠缺这种意识，才出现这种情况，有些网页做得很有味道，不管是用色还是布局的编排，都是非常的讲究，但是却没有注意到网站的本身的东西，例如网站的名称或者是网址没有得到强化，尽管使用了之后觉得好，但是第二次使用时却记不起是什么网站了，因为上网通常要看很多的网站，每一个都记录下来是非常不方便的，很多网友也不愿意这样做，再说收藏夹里收藏太多了也找起来来也不方便。

还要定期不定期的进行整理，也挺麻烦。

所以假如网页设计时注意了这个网站的名称和网址的因素，那么就会避免这一系列的问题，方便了使用者，从这个功能上来说是设计成功之处，也是网页设计美的一个观念的异化。

在把握住网站功能实现的基础上才能谈得上设计的美。

　　以上谈了几个涉及到网页设计的美的相关的功能的影响，由此可以得出网页美的标准（有些是一种美的标准另一种表达方式），那就是：

　　简洁实用：

这是非常重要的，网络特殊环境下，尽量以最高效率的方式将用户所要想得到的信息传送给他就是最好的，所以要去掉所有的冗余的东西。

　　使用方便：

同第一个是相一致的，满足使用者的要求，网页做得越适合使用，就越显示出其功能美

　　整体性好：

一个网站强调的就是一个整体，只有围绕一个统一的目标所做的设计才是成功的。

　　网站形象突出：

一个符合美的标准的网页是能够使网站的形象得到最大限度的提升的。

　　页面用色协调，布局符合形式美的要求：

布局有条理，充分利用美的形式，是网页富有可欣赏性，提高档次。

当然雅俗共赏是人人都追求的。

　　交互式强：

发挥网络的优势，是每个使用者都参与到其中来，这样的设计才能算成功的设计。

这样的网页才算真正的美的设计。

网页的审美需求

网页设计是一们新兴的设计类和网络的交叉学科，近几年随着网络的发展而逐渐收到人们的重视，它本身以网络为载体,把各种信息以最快捷、方便的方式传达给受众。

在这种标准的要求下，逐步产生了审美的需求。

人们对美的追求是不断深入的，网页设计同样如此。

网页不光是把各种东西放上去，能看就行，这是远远不够的！

要考虑如何受众能更多的和更有效率的接收网页上的信息，从而使他们对给网站留下很好的印象，那就更能促进自己网站的运作。

这就需要从审美的方面入手，结合使用方便的要求，就能制作出清晰、整体性好的页面。

使人浏览起来心情愉快，接收信息也会更加容易。

同时提升网站的形象。

运用一些平面设计中美的基本形式到网页中去就能是网页更加富有美感，例如将平面设计中的节奏与韵律和骨格的形式溶入到网页中，这样会使内容繁多的页面更加有条理，也会是人浏览起来主次分明。

当然这种美首先建立在页面的内容充实，而且实用，一个内容空洞无物的网页既使做得再漂亮也不会吸引人，顶多赢得几声赞叹，没有任何的用处。

没有实用性的东西是不会具有生命力的。

要想将页面做的更漂亮，就要求设计师要用较好的审美方面的素质，同时要有丰富的平面设计的经验。

这样才能在设计时驾轻就熟。

　　由于网页的从无到有，从满足基本的功能需要到追求美的较为高层次的需要，这是一个循序渐进的过程。

这使人不由得想起工业革命前夕，很多现代的产品那时候都没有，没有现成的模样可以参照，产品的设计都是满足基本的功能需要出发，所以做出来的产品非常粗糙，冷冰冰的，毫无生气。

由于商业竞争和工业化大生产的结果，使得人们不断的改进产品的功能，更为重要的是改进产品的外观，是产品更符合美的需要和使用方便。

从而使今天货架上出现了琳琅满目的漂亮的产品。

我想网页同样也是如此，在满足了基本的功能的要求之后，为了突出自己的特色，突出自己的优势，必须从审美上入手。

而目前很多国内网站的现状是什么样子的呢？

经常上网的网友可能会有所体会。

目前的网页存在着诸多的不足，以下简单的分析一下，希望能从中得到一些启示。

　　第一个可以用一个字来形容，那就是“塞”。

这是很多的网页都具有的特点，它将各种信息诸如文字、图片、动画等不加考虑的塞到页面上，有多少挤多少，不加以规范化，条理化，更谈不上艺术处理了。

导致浏览时会遇到很多的不方便，主要就是页面五花八门，不分主次，没有很好的归类，整体一个大的杂烩。

让人难以找到自己需要的信息，更谈不上效率了。

这种网页没有考虑采用一种美的形式来使页面上的信息以更整体性的方式来体现。

所以这种网页的设计含量是相当低的。

不仅仅从功能上分析。

从审美上看，这种页面太满、太堵，没有给读者一点空间，所以毫无美感可言。

　　第二也可用一个字“花”来形容，这类网站也有不少，显然这是很多不懂设计的人来制作的。

比较多是他们把页面做的很花哨，但是非常不实用，例如采用很深的带有花哨图案的图片作为背景，严重干扰了浏览，获取信息很困难。

同时有些还采用了颜色各异，风格不同的图片、文字、动画。

使页面五彩缤纷。

没有整体感觉，尽管有些页面内容不多，但是浏览起来仍然特别困难。

这种过度的包装甚至不如不加任何装饰的页面。

不加装饰最起码不会损害其基本的功能的需求。

所以这种网页属于粗制滥造的次品，是对自己的受众不负责任的表现。

或许他们的初衷是好的，就是想把自己的页面做的漂亮，结果却是适得其反。

是网页设计中的一大忌。

　　第三个现在网页设计中的误区就是千篇一律，缺乏自己的特色，当我们打开电脑，上网一看，好像哪个网站都是一样的。

从标题的放置，按钮的编排到动画的采用都是如此。

用色时随心所欲，只要能区分开文本和背景就达到目的。

造成这种原因就是网页设计师本身的原因，他们没有充分的利用自己的知识，分析自己网站的优势，发挥自己的网站的特点，而是采用的走捷径的方式，就是用大众化的方法去做，做起来当然很容易了，但是失去了自己特点的网页就像流水线上下来的产品，好像随便看哪一个都一样，这样就不能起到网页设计的目的。

至少不能算设计。

这也是对自己的用户不负责任的表现。

当然这里不是片面的唯美主义，不能只是看中页面的漂亮而不顾受众的使用的不方便。

例如有些网页将按钮溶入到页面的图片中去，倒是比较漂亮了，整体感强了。

但是受众有时候却找不到按钮，造成困难。

这同样是不可取的。

　　还有一类站点的网页是一种纯技术化的网页，在这种网页上，充斥了许多的纯为了炫耀技术的东西，如多个风格迥异的动画（缺乏美感甚至是与主体无关的动画），还有大量的利用javascript和动态HTML的技术，然而始终没有把握住整体这个中心，造成页面的混乱。

这与第一种有些类似，但是这种网页很多是技术上的高手。

但是结果给人只有羡慕技术之外毫无收获。

这样的网页也是不适合于需要的，是网页设计上的失败，更为严重的是大量的采用这种技术或者动画，造成浏览上由于受带宽的限制而非常的慢。

所以不管是从功能上还是从形式上都是不可取的。

　　综合以上的分析，可以找出很多目前网页设计上设计的不足，特别是审美上的不足，照顾网页功能上的需要的前提下，需要有针对性的采用一些美的形式。

来使网页做得更加有生气，更吸引人。

　　那么加入美的因素，也要遵循一定的形式美的法则。

这种美的形式有很多种，合理的利用，可以给网页增光添彩。

赏心悦目。

是受众浏览起来更加有效率，有力的提升网站的形象。

下面逐一分析这些美的形式，并考虑如何将它们融入到网页之中，以解决以上遇到的很多网页设计上的审美不足的问题。

　　从古至今，很多艺术家和学者提出了各种关于形式美的规律，很多经得起推敲的作品都是遵循这些规律去创作，以期完成其审美价值的。

因此，在网页设计过程中，设计者必须去研究，掌握并主动地、有意识的运用这些规律，才能创作出好的作品。

当然，不同时代有不同的设计审美观念，也有不同的美学特征。

在信息特别发达的今天，竞争日趋激烈，给人们带来了新的审美需求，对于网页设计，客观上将其推向了更高层的表现境界，这是网页设计的必然趋势。

去追求一种和谐的单纯，即追求清晰的视觉冲击力和巨大的张力，我们应该把美的形式规律同现代的网页设计的具体问题相结合起来。

下面具体谈谈。

　　先谈谈变化和统一。

变化是各个组成部分之间的区别，统一是个部分之间的内在关联。

完美的图形设计，形式上要丰富有条理（即对图形的大小、方圆、动静、强弱等方面的处理；组织上要有秩序而不单调，不混乱。

即图形的主从关系，叙事关系，呼应关系等方面的处理）。

在图形设计中运用变化与统一的规律，是处理形象和组织的对立统一过程，那么在网页设计中同样要恰当的利用这种规律，在我们把大量的信息塞如到网页上去的时候，考虑怎样把它们合理的用统一的方式来排布，使整体感强同时又要有变化，这样使页面更丰富，更有生气，看起来就不感到枯燥，很多网站诸如体育的网站，排布的新闻从上到下几十条，没有一点变化，显得单调而乏味，就是违反这种形式美的规律，所以要充分的运用变化来改进它，从排布的形式上或者是颜色上都可以。

　　再看条理与反复，其中反复是有规律的连续与延伸，有组织的变化与扩展并加以归纳，概括而富于条理化，。

条理与反复的原则是图形构成整体的秩序美的基础，是变化中的统一，也是运动发展中求得协调一致的表现方式，由他可以演化出多种多样的图形变化。

这种在很多较为优秀的网站中运用较多，同时应用得也比较自如，这时由于很多网站丰富，信息含量大，不得不运用一定的方式将其条理化，同时又在一定程度上加以归纳后重复的利用，使网页较为整齐，脉络清楚，读起来也能着重点。

当然，内容较少的网站同样需要条理与反复，以达到更为富有变化和清晰的视觉效果。

如文字的合理编排，图片和文字的结合。

如何呼应等等。

　　对比和调和。

对比是指在质或量方面相互差异甚大的两个要素同时配置在一起时，两者之间有相互作用的性格，更加令人感到彼此强烈地相互衬托。

对比是为了使主题画面具有变化和生气而运用的方法。

而调和是构成美的对象在部分与部分之间的相互关系。

它无论是在质的方面还是量的方面都没有矛盾，各部分所传达给人的感受和意念之间不是相互分离或排斥，而是一个部分多样性的整体统一来表现美的状态。

那么在网页设计中，如何利用它来达到好的效果呢？

首先合理的利用对比的因素，例如文本的排布、字体的大小、粗细、颜色，图片的宽窄、比例的反差、透明以及位置的放置等等，最终达到的目的就是如何取得较为强烈的视觉效果；不光如此，还要恰如其分的找到调和的因素，即构图的联系点，使整体感觉突出，不至于仅仅因为对比而造成割裂的感觉。

只有做到对比和调和的相辅相成，才能使网页页面鲜明、突出，更好的传达出设计者的意图。

　　均齐与平衡，这是动力与中心两者矛盾的统一所产生的形态，是设计中求得中心稳定的两种组织形式，均齐的组织方法是无论在哪一个中轴和中心支点各方面配置同形同量的图形，都要求图形整体结构严谨，形态安定整齐，平衡。

实际上也是一句中轴和支点保持平衡，所不同的是配置的形为等量不等形，它没有一定的组织原则，只要能在形式结构上掌握好中心即可，它要求在形式上自然合理。

所以均齐偏于静止的形式美感，而平衡却显得灵活多变，带有动感。

在网页设计中，在充分的考虑整体的页面上所有的图形、文字的基础上，如何比较整个页面上的组又两边的量与质？

是一个设计师自身经验的积累。

页面上的平衡是一个动态的平衡，因为页面上两边的配置不会总是一样的，即左边一个图右边就一个图，那是不多的。

更多的时候是图和文字以及大块的颜色轻的图和小块的颜色重的图的平衡，以及与文本的疏密和大小的平衡，所以这是一种动态的平衡。

只有通过不断的实践才能够在这方面驾轻就熟的

让你的主页更精彩

说到制作主页大家一定会想到用Frontpage2000、Dreamweaver等专用制作软件，但现在笔者要向大家介绍的是用修改HTML源代码的方法，来给主页添加点小“点心”，把你的“网上小屋”装扮得再漂亮一点。

下面请看第一道“点心”是什么……

　　1.浮动背景图像

　　当你拉住滚动条把页面向下拉动时，背景图像也跟着一起移动，这样就会导致浏览速度降慢。

我们可以在语句中加入如下属性，就能产生主页内容向下滚动而背景图像不动的效果。

　　其中image.jpg就是你主页里的背景图像。

　　2.使你的主页自动被搜索引擎收录

　　你一定为了让你的网站名扬天下而去各个搜索引擎注册吧？

在网上有很多机器人，它们自动搜寻关键字，你只要在网站上设立这样的关键字，就有可能被它们找到。

　　其中CONTENT这个属性主要让你放置一些你主页里的关键词，而且这些关键词最好容易使人想到。

　　3.提前下载图片

　　当你要访问一个内含很多图片的网页时，通常访问速度很慢；但我们可以在打开当前网页时提前下载图片，以便能够提高浏览速度。

要实现这个效果，我们可以在......语句中加入以下一行：

　　其中image.jpg就是你想要提前下载的图像名。

　　4.给某个链接添加说明信息

　　有些主页，当你把鼠标指向某个链接后，在状态栏会出现该链接的具体说明信息，是不是很方便呢？

其实，我们只要在网页里的链接语句中加入以下的HTML代码，就可以实现这个功能了！

　　5.使网页自动定时刷新

　　你可以添加如下HTML代码来实现这个要求，请在和语句中加入：

　　其中10代表当前网页完全下载完成10秒后自动链接到指定的URL，把URL去掉就表示每隔10秒自动刷新一次主页。

Web作为出版物的一种，同其他出版物如报纸，杂志等在设计上有许多共同之处，也要遵循一些设计的基本原则，不同之处在于每章提到的Web的“非所见即所得”特性和交互性。

因此，熟悉一些设计的基本原则，再对Web的特殊性作一些考虑，便不难设计出美观大方的页面来。

如果有美术设计基础，对Web页面的设计会很有帮助。

如果不具备这方面的背景知识，那么下面的一些原则将会对有所帮助。

  设计的3C原则

  所谓3C原则是指简洁、一致性、好的对比度。

Web页面设计需要遵循这三条原则。

  简洁

  设计并不再现具体的物象和特征，它要表达的是一定的意图和要求，在适当的环境里为人们所理解和接受。

它与绘图有内在联系，但又不同于绘画，它以满足人们的实用和需求为目标，因而它比绘画更单纯，清晰和精确。

页面设计属于设计的一种，同样要求简练，准确。

  从人记忆能力角度来说，由于人的大脑一次最多可记忆五到七条信息，因此如果希望人们在看完你的Web后能留下印象，最好也应该用一个简单的关键词语或图像吸引他们的注意力，如天极网的的“YESKY”.，醒目易记。

  保持简洁的常用做法是使用一个醒目的标题，这个标题常常采用图形来表示，但图形同样要求简洁。

另一种保持简洁的做法是限制所用的字体和颜色的数目。

一般每页使用的字体不超过三种，一个页面中使用的颜色少于256种。

页面上所有的元素都应当有明确的含义和用途，不要试图用无关的图片把页面装点起来，初学者容易犯的一个错误是把页面搞的花里呼哨，却不能让别人明白他到底要突出表达的是什么内容，主题和意念。

  一致性

  一致性是表现一个丫点的独特风格的重要手段之一。

  要保持一致性，可以从页面的排版下手，各个页面使用相同的页边距，文本，图形之间保持相同的间距；主要图形，标题或符号旁边留下相同的空白；如果在第一页的顶部放置了公司标志，那么在其他各页面都放上这一标志；如果使用图标导航，则各个页面应当使用相同的图标。

   一致性还包括：

页面中的每个元素与整个页面以及站点的色彩和风格上的一致性。

所有的图标都应当彩相同的设计风格，比如全部采用图象的线条剪辑画或全部使用写实的照片等。

  另一个保持一致性的办法是字体和颜色的使用。

文字的颜色要同图像的颜色保持一致并注意色彩搭配的和谐。

一个站点通常只使用一到两种标准色，为了保持颜色上的一致性，标准色一致或相近。

比如，站点的主题色彩如果为红色，可能就需要将链接的色彩也改为红色。

  对比度

  使用对比是强调突出某些内容的最有效的办法之一。

好的对比度使内容更易于辨认和接受。

实现对比的方法很多，最常用的是使用颜色的对比，比如，内容提要和正文使用不同颜色的字体，内容提要使用蓝色，而正文采用黑色；也可以使用大的标题，也即是面积上的对比；还可以使用图像现对比，题头的图像明确的向浏览者传达本页的主题，这里同样需要注意的是链接的色彩，在设计页面时我们常常会只注意到未被访问的链接的色彩，而容易忽视访问过的链接色彩将使得链接的文字难地辨认。

  还有一种实现对比的方法是使用学体变化。

在文字排版中，可以使用斜体和黑体实出关键内容，但是注意不要滥用，否则就达不到应有的强调效果。

  使用对比的关键是强调突出关键内容，以吸引浏览者，鼓励他去发掘更深层次的内容。

  为了对3C原则上有直观的认识，可以到————等优秀的站点上看看，体会一下这些站点对简洁，一致性和对度等原则的把握。

  页面设计要点

  WebWebWeb上的内容包罗万象，版式丰富多彩，但无论怎样的变化，好的Web站点总是有许多共同之处，例如：

  精心组织的内容；格式美观的正文；和谐的色彩搭配；较好的对比度，使得文字具有较强的可读性；生动背景图案；页面元素大小适中，布局匀称；不同元素之间留有足够空白，给人视觉上休息的机会；各元素之间保持平衡；文字准确无误，无错别字、无拼写错误；总的来说评价一个页面设计的好坏基本上要考虑以下几个方面的因素。

  组织内容

  设计Web页面时，所发布的材料必须经过精心组织，比如说按逻辑、按时间顺序或按地理位置等等进行组织，而且这种内容组织应当是易于理解的。

  材料组织好后，下一步就是在Web页面上布置文本、图片等内容，目的是引导浏览者在页内浏览。

我们应该控制页面上的元素的放置顺序和它们相互之间的空隙。

比如，可以把与一段文字相关的图形放在段落旁边或嵌入段落中，但不要把与段落无关的图形放在段