搜索
现代平面设计系列讲座第八讲：平面设计演义之网站(网页)设计主讲：黄炯青网站(网页)设计是当代网络化时代新兴的设计行业，它已成为现代信息社会不可或缺的设计门类。据了解从事网站（网页）设计者大多是平面设计工作者，近年来本公司也逐渐承担这方面的业务，尤其是我身边的设计师们特别热衷于网站（网页）设计，在本章节中为我提供了很好的帮助。加之，网站（网页）设计与平面设计几乎一脉相通，不同的是它还具有声音、动画等多媒体功能，这些都构成了网站设计的特点。网站设计大体分两个方面，一方面是纯网站本身的设计，比如文字编版、图片制作、平面设计、三维动画设计、静态无声图文、动态有声影像等;另一方面是网站的延伸设计，包括网站的主题定位和浏览群的定位，智能交互、制作策划、形象包装、宣传营销等等。这两方面相辅相成，以下是大致的提纲:(1)网站主题和名称的定位;(2)网站形象的定位;(3)栏目和版块的确定;(4)网站的层次结构和链接结构;(5)网站整体风格和创意设计的确定;(6)首页的设计;(7)内页设计与布局;(8)色彩的视觉效果。(一)网站主题和名称的定位设计一个站点，首先遇到的问题就是网站主题的定位。所谓主题也就是你的网站的题材。如传达的目的是以品牌、形象或产品为主要诉求点，还是炒作某种事物信息等等。主题是设计网站的轴心，选题尽可能集中、精练。如果你想包罗万象，把所有认为精彩的东西都放在上面，那么往往会事与愿违，给人的感觉是没有主题、零乱以及没有特色，因为您不可能有那么多的精力去维护它。网络的最大特点就是新和快，有的主页都是天天更新甚至几小时更新一次。这恐怕是网站不同于其他媒体的风格特点。题材最好是您自己擅长或者喜爱的内容。比如:您若擅长编程，就可以建立一个编程爱好者网站；对足球感兴趣，可以报道最新的战况，球星动态等。这样在制作时，才不会觉得枯燥或者力不从心。兴趣是制作网站的动力，没有热情，很难设计制作出杰出的作品。网站名称也是网站设计的一部分，而且是很关键的一个要素。设计一个叫得响、有时代感或内涵的名称会让人记忆深刻。根据中文网站浏览者的特点，最好使用中文名称，不要使用英文或者中英文混合型名称。这样倒会适得其反。另外，网站名称的字数应该控制在六个字以内，名称要有特色。如朗朗爽口、新颖、具有一定的内涵，给浏览者更多的视觉冲击和空间想象力。一个好的名称能增加浏览者的兴趣。总之，题材的定位和好的名称是设计网站的第一步，也是很重要的一部分。(二)网站形象的定位拥有一个杰出的网站，浏览者即使没有看到某家企业，也能从中了解企业的实力，它是企业形象的组成部分，目前，企业导入CI往往把网站纳入其中，这是平面设计师不能忽视的。既然把网站视为某个企业、团体机构的形象来对待，那么，网站必须体现CI的特点，如标志、标准色、标准字体以及网站本身的标头设计风格，这样既表达网站所要表现的主题，同时又传达了企业CI形象，这一点十分重要。loriannmusic.com华润石化（集团）网站(三)网站栏目和版块的确定网站的结构层次如同写文章，首先要拟好提纲，主题明确，层次清晰；也好比造一座楼宇，首先要设计好框架图纸，才能使楼房结构合理。网站设计栏目板块是设计者不可忽视的问题。首先在制定栏目前，要深思熟虑，合理安排将要设计的内容构架。在主题的框架下，分层次设计板块，例如要引起注意是分栏目，要适当控制，不要孤立的设计，主栏目标头要比分栏目突出，这就是设计的层次关系问题。如果是企业在首页中有目录栏，目录中可分为企业理念、企业介绍、产品、销售、社会生活、荣誉等等,每个版块下面有各自的主张诉求。一般的个人网站内容少，只有主栏目(主菜单)就够了，不需要设置版块。如果你觉得的确有必要设置版块的，应该注意三点:(1)各版块要有相对独立性;(2)各版块要有相互关联;(3)版块的内容要围绕站点主题。(四)网站层次结构和链接结构的确定1.网站的层次结构网站的层次是指你建立网站时创建的系列目录。例如:在用frontpage98建立网站时都默认建立了根目录和images子目录。目录的结构是一个容易忽略的问题。大多数网站都是未经规划，随意创建子目录。目录结构的好坏，对浏览者来说并没有什么太大的感觉，但是对于站点本身的维护，内容未来的扩充和移植有着重要的影响。不要将所有文件都存放在根目录下。网站目录的建立，首先按主菜单栏目建立。例如:网页教程类站点可以根据技术类别分别建立相应的目录，企业站点可以按公司简介，产品介绍，价格，在线定单，反馈联系等建立相应目录。其他的次要栏目，类似what'snew，友情连接内容较多，需要经常更新的可以建立独立的子目录。而一些相关性强，不需要经常更新的栏目，站点经历等可以合并放在一个统一目录下。所有程序一般都存放在特定目录。例如：CGI程序放在cgi-bin目录。便于维护管理。所有需要下载的内容也最好放在一个目录下。一个站点主目录下都有一个images目录。刚开始学习网页制作时，往往会习惯将所有图片都存放在这个目录里。可是后来发现很不方便，当你需要将某个主栏目打包供网友下载，或者将某个栏目删除时，图片的管理相当麻烦。经过实践发现:为每个主栏目建立一个独立的images目录是最方便管理的。而根目录下的images目录只是用来放首页和一些次要栏目的图片。在目录设置过程中，应注意把握以下几个问题：(1)目录栏的层次不要太复杂，最多不超过3层，否则维护管理不方便。另外选择采用中文或英文目录；要根据网站的诉求面而定。如果你要求网站对海外开放，最好使用英文目录，使用中文目录不利于网络全球化。(2)不要使用过长的目录;尽管服务器支持长文件名，但是太长的目录名不便于记忆。(3)尽量使用意义明确的目录;目录如同一个文章的标题，明确、概括的目标使人一目了然。随着网页技术的不断发展，利用数据库或者其他后台程序自动生成网页越来越普遍，网站的目录结构也必将飞跃到一个新的结构层次。2.网站的链接结构网站的链接结构是指页面之间相互链接的关系。它建立在目录结构基础之上，也可以跨越目录，每个页面都是一个固定点，链接则是在两个固定点之间的连线。一个点可以和一个点连接，也可以和多个点连接。更重要的是，这些点并不是分布在一个平面上，而是存在于一个立体的空间中。我们研究网站的链接结构的目的在于：用最少的链接，使得浏览最有效率。一般的，建立网站的链接结构有两种基本方式：(1)树状链接结构（一对一）。类似DOS的目录结构，首页链接指向一级页面，一级页面链接指向二级页面。立体结构看起来就象蒲公英。这样的链接结构浏览为，一级级进入，一级级退出。优点是条理清晰，访问者明确知道自己在什么位置，不会迷路。缺点是浏览效率低，一个栏目下的子页面到另一个栏目下的子页面，必须绕经首页。(2)星状链接结构（一对多）。类似网络服务器的链接，每个页面相互之间都建立有链接。如同一个立体网架。这种链接结构的优点是浏览方便，很方便找到自己所需的页面。缺点是链接太多，容易使浏览者迷路，或者看了多少都不清楚。一般情况下，或者是最佳方式，总是将这两种结构混合起来使用。我们希望浏览者既可以方便快速的达到自己需要的页面，又可以清晰的知道自己的位置。采用什么样的链接结构直接影响到版面的布局。例如你的主菜单放在什么位置，是否需要用分帧框架，是否需要加入返回首页的链接。在连接结构确定后，再考虑链接的效果和形式。韩国网站《醉画仙》(五)网站整体风格和创意设计的确定(1)风格是什么，如何树立网站风格？(2)创意是什么，如何产生创意？风格实际上是一种个性的体现。是指站点的整体形象给浏览者的印象特征。这种风格个性化的体现，包括站点的CI（标志，色彩，字体，标语），版面布局，浏览方式，交互性，文字，语气，内容价值，存在意义，站点荣誉等等诸多因素。首先我们要给网站个性化的定位，是人性化的，现代的、传统的，或是活泼的还是严谨等不同形式，迪斯尼是生动活泼的，IBM是专业严肃的。这些都是网站给人们留下的不同感受。任何艺术形式都具有其本身的风格，网站设计也不例外，行业不同，风格差异化容易体现；行业相同，更要有区别各自的风格特点，后者的设计表现比前者更难，这是网页设计者不可忽视的问题。设计风格实际上就是体现人性化的东西。通过网站的视觉形象、文字，如图片、插图、版面创意等均可根据创意者的灵感发挥。目前，网站的创新手法越来越多，严谨大方的、活泼离奇的，都是一种人性的表达。什么叫创意，创意实际上就是设计者的个人主张，灵感不是生来具有，是通过日积月累，是专业知识成熟的一种表现，是在实际工作中思想高度集中后的思想升华。网站设计本来只有很短的历史，但从笔者所浏览过国内外网站所见，专业人士与非专业人士设计的网站仍有很大的艺术价值之别，因此，它并非一日之寒。(六)首页的设计首页的设计成功与否是十分关键的问题。人们往往看到第一页就已经对你的站点有一个整体的感觉。是否能够吸引浏览者停留下来或继续观看下去，全凭首页设计的“功力”了。如何设计好一个首页呢？以下几点不可忽视：●确立首页的设计形式●构建首页的功能模式●设计首页的版面1.确定首页的设计形式前面谈了网络设计的风格，风格是由形式表达出来的，首先要根据主题定位设计形式，深入了解内容，内容决定形式，如活泼的、严谨的、平面形式、立体及动画的相互构建关系等等。只要确立了艺术风格的形式，才可以准确表达内容，并达到创意目的。2.首页的功能模块首页的内容模块是指你需要在首页上实现的主要内容和功能。一般的站点都需要这样一些模块：网站名称、机构标志、理念或广告语、主菜单、新闻、搜索、友情链接、邮件列表、计数器、版权。选择哪些模块，实现哪些功能，是否需要添加其他模块都是首页设计首先需要确定的。3.设计首页的版面在功能模块确定后，开始设计首页的版面。就象搭积木，每个模块是一个单位积木，如何拼搭出一座漂亮的房子，就看你的创意和想象力了。设计版面的最好方法是：找一张白纸，一支笔，先将你理想中的草图勾勒出来，然后再采用专业网页制作软件来实现设计者的意图。(七)内页设计与布局在网站设计过程中，除了网页首页设计的重要性，版面布局也是一个让人头疼的问题，这里我们将它作为网站设计的基本布局作一下介绍，以利大家从中得到一些启示。在网页中常见的布局类型大概有以下几种：1.“T”型布局。即指页面顶部为横条网站标头，多数在版面左下方为主菜单，右方为内容的布局。它是网页设计中用的最广泛的一种布局方式。优点是页面结构清晰，主次分明；缺点是容易使画面呆板。2.分割式布局。页面上下各有一个广告条，左面是主菜单，右面放友情链接等，中间是主要内容。优点是充分利用版面，信息量大;缺点是页面显得较为拥挤，灵活性不够。3.条型布局。页面上分布了两条横向的色块，将页面整体分割为几个部分，色块中大多放广告条。4.对称布局。采取左右或者上下对称的布局，一半深色，一半浅色，一般用于设计型站点。优点是视觉冲击