网站建设一席谈
（小雷 2001年04月29日 01:10）
互联网发展之快，用迅雷不及掩耳来形容毫不过分。"亚马逊"网上书店的神话，.com公司的大行其道，"AOL"与时代华纳的巨人握手，《第一次亲密接触》的轻舞飞扬，今天你QQ了没有……。真是应了那句话——"不是我不明白，而是这世界变化太快"。互联网发展到今天，显示出了强大的潜力，但并没有出现当初预料的那种结果。商品买卖依旧多在传统的商店进行，有纸办公依然没有放弃纸笔，上网一词，更多地出现在购买力不足的新新人类口中……投入过多热情的网站，由于投资的归于理性而失去了烧钱的基础，于是乎，门户兼并，网站裁员，可谓山雨欲来风满楼，人人自危。但从互联网长远的目光来看，这段"网络冬天"未尝不是件好事，至少可以让我们静下心来审视一下，我们都走了一条什么样的路？以后这条路应该如何走下去？
呵呵，上面是一些我个人的一些废话。面对归于平静的互联网我并不想过多置言，只是想从网站建设方面，谈一谈如何让我们的网站建设也归于平静，并通过网站设计真正让它为价值服务。
由于网站建设是个比较抽象的概念，我们将用具体的例子来阐述观点：
一．匿名戒毒网站：
"我将女儿单独留在车里，自己出去买麻醉剂，然后回到车里并驾车离开。等开过五个城区时我才发现，女儿并不在车里......"深沉的黑色，苍白的字体，细述着一种无以表述的痛苦。文字最后是一个"More Story"的链接标志，表示还有更为详细的内容可以查看。
这是一个匿名戒毒网站首页的主要文字内容，另外，页面左上部是该网站的Logo，并且其他页面的左上部都保留该Logo标志，一方面用于快速返回主页，另一方面保持了站点风格的一致性，而且它还具有一项功能，从其他页面点按该标记返回网站首页时显示的不是上次访问首页所叙述的故事，而是"More Story"中紧跟着的那部分故事，这就避免了同一页面内容的重复性。首页右上部是四个主菜单，"Face of Addiction","Solution","Meetings","Membership"，分别对应着"症状"，"戒毒方案"，"匿名戒毒会议"，"会员登录"等服务。"症状"区罗列了早期，中期与晚期吸毒上瘾的详细症状；"戒毒方案"提供了不少有用的戒毒方法，一些更是曾经是瘾君子后来戒毒成功的人士的贴心忠告；"匿名戒毒会议"链接的是一幅美国地图，点击任意州就会弹出一个日程窗口，罗列了该州最新的极为详细的匿名免费戒毒会议日程表。整个页面干净简单同时又不流于轻浮，几十个字母却让登录的网友有了一个最为清晰的用户对象概念，同时四个简单的菜单提供了清楚明了的服务理念。
二．色彩搭配：
也许你要问这样的首页真正的用处在哪里，很普通嘛。当然，但设身处地地想一想，如果你是位有心恢复新生的瘾君子！生命的压抑，世人的冷眼，自信的脆弱，等等，我们的站点既然定位在他们身上，就得全心全意为他们进行贴心设计！我们不能单独地进行说教，而得把自己也扮演成一个与他们同类的人，跟他们一起探讨毒品的危害，跟他们一起经受身体与精神的煎熬，我们得是他(她)们的丈夫，妻子，情人，好朋友......因此，我们的站点就不能太过花哨，因为我们常常感觉自己已被扔在一个连自己都不清楚的社会的黑暗角落；我们的站点风格也不能太沉重，那样的话我们本来就已紧绷的神经受不了......于是，黑白搭配，这天地间最为谐调，最根本的色调成为我们网站的首要选择，让我们可以从漫漫黑夜中看到黎明的曙光，同时还能让我们感觉到这个网站如山一般深沉的底蕴与郑重。
三．图象还是文本？
也许你要说，这样的文字内容太没特色了。好的，我们就顺着你的意思，用Flash做段酷毙的动画：一个逼真的注射器图案逐渐变形成导航栏；或者从注射器管口滴下的血液溅在地上并变形成令人触目惊心的"Dangerous"字样？如果你要用它作为网页设计比赛的作品还行，但对于我们——曾经有过失足却想要重新拾回做人尊严的特殊人群，是没有任何意义的。我们需要的是切实可行的灵魂拯救方案，不是来欣赏你的艺术天分的。我们承认，一幅美丽或者体贴的图画能给访问者带来更多的感触，但我们却不能保证他们都有这份耐心等待一幅精美图象的完全载入。在传统的设计过程中，由于限制比较少，灵感空间比较大，设计师们不一定在最开始就清楚自己最终会做出多么具有创意，多么漂亮的作品，但在网页设计方面，带宽是一定的，空间是一定的，因此我们的最终作品，也带有更为复杂的限制性。传统的设计在于创意，网页的设计在于表意，即你要让你的用户了解些什么。图象此时的作用，在于更好地为表意服务。
跟许多同类网站相比，它的文字内容显得很特殊。我们已经习惯了诸如"Welcome to my Homepage"，"欢迎光临"之类不带感情色彩的中性语句，突然遇见这样一个让人心悬，有头无尾的小故事，不自觉地就会体会到那位主人公心中的一份沉重，不自觉地就会产生一种点击下去看看结果如何的冲动......有人说，平平淡淡才是美，这一点，该网站算是体现得淋漓尽致了！
四．菜单分类：
现在我们要谈一谈菜单分类。事实上，因特网上很多站点的总体规划都是很不错的，分类科学细致，内容也非常饱满，但最终反应却没有预料中的好，其中部分原因就在于菜单"过于为客户作想"。企图将站点所有信息浓缩到一个页面上并不是个好主意，特别是我们的首页，那样的话容易给人一个混淆不清的分类概念。国内的网站犹其爱犯这种错误，满版满版的信息扑面而来，让人拿着鼠标不知道该点哪里。
如上图，这样一个站点，你真正想做的，可能就是点按"返回"按钮......
说到导航菜单，有很多操作技巧，其中最关键的一点在于导航菜单的醒目性。下面给出一个网页样式，我们简单地谈一下它的问题：
在这个首页上，上部是Logo，Logo下是主导航菜单，正文中左边是细分菜单，右边是详细的内容。进入该网页，我们最先注意到的是其细分菜单，然后是正文内容，再接着是Logo(根据习惯的不同，这三个元素的注意顺序可能会不同)，但告诉我，你注意到它的导航菜单了吗？与Logo近似的背景颜色，不醒目的导航文字，这样的导航菜单也就失去了意义；与之相反的是，细分菜单通过具体的图标做得非常醒目，但造成喧宾夺主，这样最直接的后果就是给访问者造成了非合理架构的印象。因此，主导航菜单最基本的要求是：做得醒目！
五．界面设计：
界面设计只是网站设计的一部分，如果说网站要表达一定的内容，那么界面就是网站所要表达的内容的前后关系与联系。良好的网页界面从形象与结构方面回答了访问者两个主要的问题：
1.这是一个什么样的站点？它要表达哪方面的信息或提供哪方面的服务？是否有令访问者感兴趣的信息？在其他站点是否也有这样的信息？
2.这个站点的总体流程是什么？是否能够让用户快速找到自己感兴趣的东西？操作起来方便吗？
上面的说法也许显得太抽象了，我们换种说法来理解界面设计的概念：一部好电影，从一开始就把影片中的主人公放进激烈的对抗情节中以抓住观看者的心神，用到网页制作上，我们的娱乐网站完全可以吸收这种思想，用一种热烈喜庆的设计风格作为站点的主导；报纸上集结了多条新闻，但只是把大家最关注的新闻放在头条，承袭这种风格，我们的以内容服务为主的网站可以将最重要的内容进行醒目提示；商店里有很多商品，但只会把最富有特色，最能吸引顾客的商品放在最醒目的柜台，而我们的商业网站也可承袭这种界面设计风格。
一般地，界面设计得考虑到操作的便捷性与栏分细分和导航的科学性，并常常使用到诸如菜单条，具有互动作用的表单或特色按钮，以及交由访问者操作的诸如放大镜，左右键头等的使用工具。但如何组织这些具有导航作用的按钮或菜单却有着很大的考究。曾经风靡一时的文件夹图标以及带有倒角阴影的按钮现在在网上随处可见，于是有了追求更贴切，更美观的导航方式的必要。它们除了导航作用外，还应该具有如同商标一样的独特性，以及作为站点整体内容的强化与补充的作用。下面我们也将通过一个例子对界面设计进行阐述：
上图中的网站是一个比较出名的时尚站点(http://www.maryquant.co.uk)，显示的是二十世纪六十年代流行的迷你裙样式。灰白大块区域的对角相称，服装以深黑为主色，中间是一朵灰色的大花，整体上给我们一种素雅超然的感觉，同时还带点淡淡的历史怀旧。
从上部的菜单中我们可以看出，该网站将以五个部分作为构架基础:History, Makeup, Press Office, Shops,以及 Homepage，浅色的History图标表示访问者现在正处于此目录下。主图两边的两朵小花:Pre/Next是与前页及后页的链接标志。另外，通过点击服饰下部的文字还可弹出新的页面，上面有该款服饰的详细信息与订单申请。
由此页面我们可以看出，虽然它只是一个时尚站点，但在导航功能的便捷性与直观性方面做得很好，不但有诸如Next/Pre之类线程式的导航方式，还有直接分区跳接的大范围导航功能；不但有菜单条的导航，还有灵活的文字导航。
下面我们再看两个例子：
上图中的主导航菜单罗列出全部的分类，但由于下部更为醒目的服饰图片，显得并不拥挤。另外还有一个非常不错的特点，当你点选任意服饰，图象区右边的同一位模特将换上你点击的服饰。是不是很直观？
又一个全罗列式菜单网页，不过重点突出的是该服饰的详细资料，并具有订单申请功能。
六．复制与伪科学：
其实在这里用到这两个名词并不妥贴，一方面我们很难对复制做出什么真正的定义，另一方面，当一些不科学的东西成为习惯后就理所当然地变得"科学"了。
长久以来，大家都认为左边导航，右边放置内容的规划最为直观，符合"科学"。真是这样吗？其实不然，这种"科学"的由来非常简单，熟悉HTML语言早期版本的网友们应该知道，早期的HTML语言对表格的支持并不充分，但我们又非得使用表格，于是这种最便捷的设计方式就得到了采纳。同一个网站，导航栏大体是一致的，因此我们只需要费少量的精力编制好先出现在源代码中的左边的"导航栏"，然后在接下来的源代码中，分配更多的精力到内容的编制上。没错，早期采用这种风格并非是因为这样更直观，科学，而是在于制作更简便！
然后我们要说到复制。正是由于此种风格编制的简便，许多大型网站为了在大量内容与站点风格间取得一个平衡点，纷纷采用了这种"左导航栏右内容"的网页风格并取得了成功。它们的成功，连带着其他网站的跟风仿制。当我们的用户逐渐适应了这种风格时，这种不科学的"伪科学"也变得合理了。
随着互联网的发展，我们不但有了对表格全面支持的HTML4.0，还有了DHTML,CSS,JAVASCRIPT等等，所以，放心大胆地规划你的导航栏位置，因为我们知道那种所谓的"科学"并不科学。只要处理得当，我们绝对可以从众多千篇一律的网站风格中脱颖而出！
七．结束：
谈到站点建设，那是仁者见仁，智者见智，一百个人就会有一百种不同的规划方案。所谓"众口难调"，你不要想建立一个能够"成为所有人的朋友"的站点。针对你的用户，为他们定身制作一个：便于操作,风格一致的站点。如果有可能，再为他们提供一个具有模拟效果的仿真功能！
醒目易读，一目了然。http://www.Digital-Web.com
同样是Digital-Web.com，跟刚才的网页保持着同样的风格。
www.panic.com，一个主要提供Macintosh 软件服务的站点，不但提供了软件服务本身，还让用户可以在网页上直接如同在Macintosh 本机上操作的模拟环境，是不是很酷？
|
