网页设计从何做起.doc

网页设计从何做起 摘 要 随着科学技术日新月异的发展,崭新的传播媒体因特网诞生了。在因特网这个世界里，国界的概念消失了，人与人之间的距离，由天涯变为咫尺。因特网的出现，带动了“网页设计”新领域，更为网页设计爱好者提供了广阔的活动空间。对网页设计及其作用和意义进行了描述，并针对一个网页从它开始动工到结束整个设计制作过程遇到的具体问题从方法论角度上进行了分析和阐述。关键词 网页设计 计划书 风格 像素 滚动条 导航 下载速度 容量 压缩 GIF JPEG网页不是书籍。也不是CD-ROM。更不是广播电视。当然，网页像书籍一样有文字有图像；像电视一样有动态影像；像光盘一样有多媒体的存在。但是，它们从根本上却是完全不同的。网页有自己独自的语言、独自的美学、独自的问题与不足，它几乎融合了所有媒体的特性。今后，它不仅会作为一个独立的媒体而成长，而且势必影响到许多传统媒体的发展。网页在这个信息化时代确实有着不可或缺的地位，它的内容、版式、速度都大大影响着信息的传达和媒体的交流。那么，我们要设计一个美观实用的网页该从何做起呢？网页设计不仅涉及到庞大的数据库，而且还存在着多媒体的体验，以及传统平面设计师们所陌生的动画、影像、声音、VRML、三维空间等等因素，最后还要在广阔的WEB宇宙中遨游，经受那些无数的不明正体的通信末端、以及各种各样不同版本的浏览器与不明国籍的网民们的检验。正因网页这种双方向性的信息传达与交流的媒体，有着自己独特的结构构成原理与独自的机能，要想设计一个好的网页，仅仅有平面设计、色彩构成原理等美工方面的知识以及丰富的想象力与创造力是不够的，还必须了解网络的特性、浏览器、制图工具等常规软件的发展变化，更需要对HTML, CSS等设计语言的理解。在了解了有关原理与机能之后，加上自己独特的方式方法，网页设计的实施就有章可循了。一、首先，了解你的客户和分析用户，建立计划书在你拿起铅笔之前、在你起动Photoshop之前，不要忘记与你的客户交流。不管是小型的个人网还是大型的企业网；教育网还是商业网，都必须建立一个详细的网页设计项目书。了解他们建立网的目的是什么、针对的是哪些人，二十岁左右的青年还是四五十的中年人，主要是男性还是女性，是教育工作者还是企业打工一族，主要反映哪个方面的信息，等等。在开始阶段，类似上述的情报掌握的越多，网页设计的计划书就会作得更准确更完善。也许会耗费些许时间，但根据软件工程的需求原理，这为后期的制作和管理将会节约更多的时间，更有利。有这样一些客户，他们自己对于建立网站的目的也不很明确，与这样的客户打交道是比较辛苦的。这样的时候，你必须站在客户的角度，同客户一起探讨建网的目的，应该提供什么样的服务，应该针对的是哪些用户，网站建成后会得到什么样的效果，在网站运营上应该注意一些什么样的问题等等。具体到页面设计上也是同样，例如笔者做的宝中校园网，领导要求在主页上把本校的所有信息都放上去，教育管理理念、校徽以及其他学校的网址、图片等等，这种时候，难免要对网页设计中应该注意的一些问题，下载速度等等作一番解释。也可以说要做一些WEB以及网页设计常识的普及教育。这是难免的，因为作为网页设计者，应该具有丰富的WEB知识与经验，而你的客户是各种各样的，也许他们对WEB只是一知半解。同时要考虑到用户的一些因素，如经验、忍耐度等，在技术分析方面，对用户的定义是非常重要的。下载速度、上网场所（自家还是单位）、末端环境、浏览器、上网经验等等，对目前与将来的网站建设都有着非常重要的参考价值。这些分析结果直接影响到网页设计风格的定位，网页设计的复杂程度。为了避免日后的混乱，这样的前期作业一定要做得踏踏实实。二、设计形式与风格的设定在完成了以上分析之后，下一步就要对网页的设计形式与风格做一个设定。WEB上的所有网页基本上都是在纯艺术与纯商业这两点一线之间的某个部分存在着。当你制作网页时，你的网页将放置在连线之间的那个部分，这是一个非常重要的问题，你必须清楚地认识到自己要作一个什么类型的网站，而且确定这个网站应在的方位，这才是网页设计的第一步。再拿笔者做的校园网为例子，它是一个关于教育教学的网站，面对的是学校里的老师和学生，他们上网或者浏览新闻通知或者察看学习资料或者下载文件，但网上经验并不多。他们从学校上网的应该占多数。学校里一般都是专用线，下载速度是比较好的。借助以上分析，网页的设计风格就有了一个比较明确的定位。这个判断要根据以上的分析然后由你自己来决定。也即是让大多数师生来看的信息提供型的网页，那么设计的简练性，普遍性，技术上的泛用性，下载速度的快捷性等等，就成为最重要的课题。所以，这个网站在技术上没有采用大量的象Flash等技术，但考虑到用户都是一些老师学生，所以在网页设计上既要强调严肃但又不缺乏朝气，色彩上应该要鲜明。另外，在网页画面尺寸的设定上也要考虑，现在的电脑显示环境大多都是800X600象素，浏览器都是IE5.0以上。这些因素都要考虑进去。如果你的网页只是针对特定的一部分人的话，也就是说，你的网页更接近纯艺术性的话，那你自然可以不用过分地考虑哪些束缚你的想象力的问题，你应该把更多的精力放在对风格与个性的追求上，即便你的网页下载速度有所降低也不是最关键的问题，只要你的网页有足够的魅力能够吸引人的话，相信人们是会耐心等待的。三、确定网页画面尺寸1像素确定网页和印刷品不同。设计印刷品的时候，为了让印刷效果达到自己的设计要求，可以直接到印刷厂，亲自监督和不断调整，直至达成目的。而网页设计却不然，一旦公开之后，在访问者眼中的效果是难以完全控制的。比如显示屏的画质、解像度的千差万别。显示屏表示的尺寸是以pixel为单位。好在640X480pixel、800X600pixel、1024X768pixel是最普遍的。尽管这样说，还是有一些比以上解像度或大或小的显示屏，甚至还有与上述的横竖比例都不同的显示屏。虽然现在还没有非常有效的解决方法，但对于大多数用户所使用的显示屏有个清楚的认识是极为重要的。现在显示器的幅宽已渐渐变大，绝大部分用户都拥有800X600pixel或者更高解象度的显示屏。所以设计的时候一般是以800X600pixel为标准。2滚动条问题在网页尺寸中，滚动条的制限也是个很重要的问题。你的用户在浏览网页的过程中，也许不得不经常地拖动滚动条，如果这种行为的频率过高的话，则说明你的设计是欠考虑的。所有重要的信息最好是在不滚屏的状态下完全的显示出来。这是一个最理想的状态。但由于现在的网页往往都很多内容，以至无法在所有情况下都保持不滚屏，即便如此，我们也应该尽量使它只出现一个滚动条，要么是上下滚动，要么是左右滚动；据观察，大部分人一般习惯于上下的滚动。而且大多数用户在使用滚动条看下面的信息之前，往往都在现有的显示信息中，点击进入其它页面。过多的滚屏会防碍用户对整个网页的理解，用户需要做很多动作之后才会看到网页的全貌，这对用户来说并不是一种愉快的行为。四、统一网页形象这个概念来自于企业形象设计系统(CIS)的设计原理。这个原理在网页设计中也同样适用。网页标志的设计或网页标准色的制定或大致框架的设计等等，应该在页面与页面之间保持统一性和整体感，从而加强网页的整体形象，使用户对网页产生更深刻的印象。许多优秀的网页设计都有相对统一的设计风格。比如网易(163.com)，虽然网站本身内容多样，在色彩使用上也有很多变化，但读者在所有网页上始终可以看到“网易”的标志，“淡灰”背景的主菜单栏，和风格一致的广告条。又如宝安教育在线，几乎每个页面都有相同的LOGO、标准色“天蓝”与一致的导航条。这种标志、标准色与标准尺寸的应用，使网页在整体形象上得到了统一，也同时能够给读者留下一个深刻的印象。五、网页导航系统我们都知道，文章在突然截断之后，我们只要翻到下一页就可以看到文章的继续。热心的编者们为了让人们更快的找到特定的内容，设计出了目录。而网页和书籍有着异曲同工之处，书籍用的是目录指引读者，而网页中用的是有超级链接功能的导航。网页的阅览方式是不定的，跳动性的，也可以说是含糊不清的，如果没有明确的指南引导，我们的用户将不知何去何从，这样便导致他们离开这里。那么，该如何做呢？我们知道读者的阅览网页的方式是自由地跳动性的，所以，我们就要做到无论读者在网站里的什么位置上，都可以自由的跳到其它重要的页面上去。这就要求我们在所有的页面上都设有复数的连接点，而且最好是一次点击就可以进去。除了主栏目的导航外，某些页面也要视情况增加“首页”、“返回”、“上一页”、“下一页”、“NEXT”等等链接的指南。其实，网页设计与建筑设计在很多原理上是很类似的，首先要设计一个漂亮入口，因为给顾客留下的第一印象是很重要的，然后要有很多通路以及电梯等设备，尽快使顾客到达自己要去的地方，以及现在的方位，如何去其它的楼层，在那里有些什么等等。让你的顾客迷路是一种最危险的行为，因为在网上的顾客会马上跳到其它的网站里。网页导航机能的要点在于简明易懂，以及使用上的简单便利。无论你自己认为是多么优秀的设计，用户不明其意，或者不知如何使用的话，一切都等于零。而且，用户为了看到想要的信息，要经过数次点击，这种点击次数越多，越会引起读者的不快。以最少的点击获得最多的结果是网页设计的一个原则。据调查，如果主页的访问率为100人次的情况下，经过第一次点击到达下一页的访问率将下降到30到50人次，再下一页的话，访问率会减少到10至20人次。这个调查说明，网页的层次越复杂，实际内容的访问率也将越低，情报也就越难传达到读者的手里。所以，尽量把网页的层次简要化，力求以最少的点击次数链接到具体的内容，最理想的是只通过两三次点击就可以达到目的地。六、关于图像制作图像并不是网页必不可少的元素，但它有画龙点睛或锦上添花的妙处。它的好坏直接关系到网站的成功与失败，因为它是直接影响下载速度的关键。所以掌握图像制作的技巧对网页设计起着举足轻重的作用。在这里我们就谈谈在制作图像时应该注意的一些问题。1、图像容量确定在制作网站时，最优先考虑的是下载速度，HTML文件对下载速度没有太大的影响，对它影响最大的还是图像。所以，尽量减少图像的字节byte量，在图像保存时大多选择WEB调色板，这样做的图像在PC环境下可以得到更好的显示。既要考虑下载速度又必须保证更好的作品效果的话，每一页的总重量难免超出范围，作品图像的大小一般控制在25K字节之内。2、压缩方法的选定如何把图像做得精致恰当，选用什么样的压缩方式也是提高下载速度的关键。现在网页上经常使用的图像压缩方式还是以JPEG和GIF为主。这里说的压缩不是指图像尺寸上的大小，而是图像作为文件其容量上的大小，也就是指字节量(byte)的多少。这两种压缩形式GIF和JPEG各有什么特点，又有什么不同，以及选择哪一个更好呢？这是由设计时的具体情况决定的。要根据图像的种类、到底要压缩到什么程度及如何能使之更好更快的下载等因素来决定的。GIFGraphic Interchange Format的压缩方式是说从左向右，由上到下的。如果许多Pixel行是以同样的色素组成的话，那么它的压缩率就会大大提高。如果是由一些不同的色素点组成的复杂纹样的话，它就无法进行有效地压缩。由此可见，色彩比较单纯的宣传画、按扭图像、插图等，在平涂颜色面积较大的情况下，渐变色彩较少的图像作成时，使用GIF形式压缩比较合适。它不适合照片的压缩，但是如果照片等图像的尺寸小于100100像素(pixels)的话，用GIF形式压缩也是比较合适的。另外，在加工GIF形式的图像时，如果这个图像在经过透明化处理后，对整体设计没有影响的话，应尽量把图像以透明形式加工处理，在这个加工过程中，可以进一步减少多余的色素，使图像的容量(bytes)降低。JPEGJoint Photographic Experts Group是一个摄影团体发明的压缩方式，它是最适合照片之类图像的压缩。图像的压缩率可以自由调整，适于大幅图像的制作，随着压缩率的提高，下载速度也就会相应提高。色彩复杂的图像选择JPEG形式的理由是，这种形式可以保存几百万种色素，而GIF形式的色素保存却被限制在256种之内。JPEG形式的缺点是随着压缩率的提高，图像的质量便会越来越差。另外，如果要修改这些图像的话，应该打开原始图像进行修改与尺寸变更。因为通过这两种形式压缩保存的图像，在质量上已有所降低，若再次利用它们修改保存的话，质量就