个性化网页设计_relen

个性化网页设计之网页框架

Relen 2001-06-20

----------------------------------------------------------------------------------------------------------------------

前言：

在如今的信息时代，学做主页的人越来越多，投身到IT 浪潮的人也越来越年轻。而对于没有学过设计，以及没有学过美术的朋友而言，怎样去提高自己网页设计水平，或做出自己的个性网页呢？技术也只是为了设计而服务的，在技术的同等条件下，怎样来展示自己？

下面，我将会逐步的来给大家一些建议，以及一些归类。希望你能通过下面的章节，得到一些帮助，和对设计网页有一些了解及深入。

对于INTERNET 的发展史和基础知识，我这里就不多言了。那么一般网页编排内容有：文字(Text)、静态图片(Still Image) 和动画(animation Flash)。具体可实现的技术更多了，包括视频(Flash Movie Shockwave …)、音乐和音效﹝Music & Sound effects﹞、交互式网页，高科技虚拟等等。在设计网页时候，可以广泛的应用各种技术

为了尽快使大家有所了解，我将分八个步骤讲解：网页构架，页面设计，色彩搭配，内容艺术，前卫技术，创意无限，CI 行销，应用技巧。

如果把网页比喻成人的话呢？那么先要有骨架，也就是网页的排版的框架。

我进行了大致的分类，主要是：分栏式结构，区块分布，平面图片设计，以及非规律的设计。

分栏结构，也是最常见的方式。常见的有如Epitonic.com （http://www.epitonic.com/）的2分栏设计，七色谷(www.7cv.com)的三分栏，以及国外常见的四分栏结构，我甚至还特殊设计过5分栏(http://www.home2v.com/vcity) 的网页。通常的布局编排情况有如下图：

图1，是二分栏，图2是标准三分栏，图3是四分栏，图4-6是一些LOGO 以及导航在下面的情况，而通常会使用frame 。7-9图则是一般的变化，而我这里所列出的一些例子也是很泛泛的。见到一些网页的设计，判断上，有一些是以颜色来分栏的，有一些是利用导航分栏的。不论你用那种设计方法，最重要的是，心中有数，去排版自己的内容。设计也只是为了你的内容服务的。

一个快捷的方法是，在纸上勾画以下骨架，用你的内容名称填充一下。粗略的进行规划。在标准的构架上加一些变化，就会有很多新的编排形式出现，比如图7-9。有空多在纸上画画，也是一种锻炼，加一些小的变化，也就使你的设计与他人不同，脱颖而出。

区块编排，是以颜色，或线条，来划分一些区域的编排方式，其实也就是分栏结构的变异。如果说分栏设计太过规范没有新鲜的话，那么就要看看区块功用了。如下图例：

这样的设计，很漂亮。不过也要依据内容许可程度港台，国外用此类设计的很多。色彩运用上也很出色。以后我们会提到色彩问题。区域编排的设计，一般和竖分栏不同的是，页面一般情况下不长，一屏或一屏半左右的长度。用于信息量少的企业站点，和专业型站点，

还有就是看您是什么内容的个人主页，大部分情况都很适用。但是却不适合门户站点，和信息量很大的站点。我粗略画了几个图。但是区域编排更加灵活，有待你的开发

。

区域的设置可大可小，但是依据内容编排。在分栏式结构里面也可以套设区域结构。所以说，这重骨架”前途无量”。

平面设计，如果是非动态的web design，那么也可以划分为平面设计的一种。当然，在网页里面用整张图片分割的技法，也是非常有视觉效果的。这个也是个人主页，在内容很少的情况下，通常所选用的方式。

对于平面设计，以后在页面设计，和创意无限会分别具体讲解。

在这里我就给大家一些好的网站观赏：

http://www.yimeng.org

http://www.coolhomepages.com

多留心学习，才能提高自己。多看多思考。

你可以把看过的站点，你认为好的做快照。把它们作为图片（gif ）留下来，做资源，如果有一些你不理解的特效技巧的页面另存为，做参考，这个是很好的积累的过程。我想等你web 截图有2个GB ，哈哈，你一定很厉害了

为了能够更好的编排网页，以及显示个人的设计水平，现在有了更多的更好的构架涌现出来，其实也就是以上几种通常规律的结合。这也就到了考验你的时候了，而我能做的就是多多推荐一些好的站点给大家，更多是练习才能提高的。那么对于互动的网页来说，如全flash 网站的，除片头外，都逃不出以上的几条归类。

此节推荐网站设计：（因为报纸的可见程度，所以我这里就多出一些网站少做图片了。请大家一定要配合去看一些网站，加深直观感觉）

二分栏 国外的，free MP3 Music，设计很不错，紧凑，但是不会给人窒息的感觉。 每个单页色彩也好 易利信手机官方站点。有一个很不错的flash 片头。以及内部的2分栏设计

三分栏框架：

wayin 公司系列站点 超级站点，工作室，看看它的about us就知道，都是什么来头。也是很不错的三分。 设计出色，酷的很，资源多多。就是速度慢。

国内三分更多了。我这里就不推荐了。尽管三分很多见，但是做好了也不逊色。 四分栏框架： 英国王牌站点。厉害。 粉色，开花的flash 盆栽给人很多启发。

再这里多说几句，竖分栏的设计里面会有很多小的变化。但是归类也就这些。有时候看起来很模糊。但是就是因为变化了，才突出个性。这里的提示不多。要看你的内容来变化。会有更多意想不到好的创意出来

区块编排： 大都是英文的。我想可以给你很多提示。

另外酷站推荐： icon+flash，看看 德国的,flash

公司站点： 个性站点：

发表于2001年22期电脑报

个性化网页设计之页面设计

Relen 2001-06-25

----------------------------------------------------------------------------------------------------------------------

上一节讲过网页构架后，我们基本上已经了解了主流的骨架的设计与编排。但是还有些误区。①用于文章内容，或新闻内容的页面，通常只有一篇文字这样的叫通栏。通栏是分栏式骨架的特殊情况。②三分栏页面很多，不是所有的设计都是左右两边栏有颜色变化（中间白色）的情况。看看http://www.ya.com，这个站点则是中栏为红色的设计。③区域编排中区域可以不规则的划分。不规则的区域更能加深印象。但是也要你的内容适合如此的框架 () 。

有了骨架，我们来给网页添内容。也就是页面设计。页面设计包括甚多。可大可小。我分以下几个要点与大家讨论。页面平铺、整体规划、功能易用性、气氛情感表达、平面设计编排构成。

页面平铺

把页面平铺开，主要的物件有：导航栏、LOGO 、BANNER 、按扭、图片、文字、超级链接。那么下面我就针对这最主要的几个部分具体讲解。

1．导航。导航栏的作用是很大的。没有了导航，进入一个站点，我们会失去方向。这样的聚焦点，如果设计的恰到好处，是会给网页本身增色很多。不要太花哨，它属于功能物件，喧宾夺主就不好了。导航栏有一排，两排，多排，图片导航，或frame 框架快捷导航等等各种情况的设计。有时候是横排，有时候则是竖排。另外还有一些动态的导航栏，很精彩的flash 导航。设计导航我归纳以下几点：

(1) 在导航不多的情况下，通常是一排，横竖都可以，其实超过６个就可以考虑用两排。

(2) 导航栏目很多的情况，也可以多排，甚至不规则的多排（一排个数不同，或长度不

同）。商业设计或门户站点通常都会有很多频道，设计起来，就要考虑横向双排。使用竖排，会占用太大空间。

(3) 通常是内容不多，使用区域编排的框架的站点设计成竖多排。而此类站点，它可能

不是很清楚的显示栏目，也有可能无所谓栏目，站点就包括如导航的具体内容。（图

一）。

(4) 双排导航未必要挨在一起，可以自由一些，如图二，上排有，分开图片后另有一排。

(5)

图片式导航，很漂亮，也会占

用页面空间比较大。如图二中每一个孩子就是一个点击热点。

(6) 我很推荐flash 制作导航，体积小，变化多，最重要的是，引人入胜，加深理解。

(7) 内容很丰富的站点。可以考虑使用快捷导航。比如 ，我称

之为frame 框架快捷导航，是因为不管你进入哪个页面，右边的导航是一直存在的。在哪里，你都可以快速的跳跃到另外的栏目，不会失去方向。

(8) 利用dhtml ，js ，动态隐藏层等等的技术实现的多变化的导航。就要浏览器支持问题。

不推荐给信息很多的门户站点此导航。

(9) 不防尝试一下，最近很多酷站流行的下拉菜单式的导航(JUMP MENU) 。

(10) 不是所有的网站都有导航的， 就属于没有导航。

2．LOGO 。中文是企业标志。关于logo 的设计我会在ci 行销中具体讲解。关于logo 我归纳下列几点：

(1) 网站的logo ，现阶段并不正规。不适宜所有的企业标志也是网站的标志。一般

网站的标志只是相对于传输，不适合使用渐变色彩。企业标志则是对于印刷。

情况各异。如果你的LOGO ，既要用于印刷，还要用于网站，设计的时候一定

要考虑周全。

(2) 网站的标志一定要长方形么？肯定不是！所以，不要做页面设计的时候看见很

奇怪形状的logo 就头疼，任何情况都有解决的办法。

(3) Logo 的位置通常在页面的左上角。根据你的设计，它不是一成不变的。所谓个

性的设计，不论商业或个人，都要去大胆尝试。我粗略的做了几张logo 位置图

片，以做参考。（图三）

网站的LOGO ，虽然有动态的，但是绝对不适宜过分的动感。且不是所有的网

站标志都适合选用动态。比如娱乐，儿童等等可以在很小的细节上有一点动态。

做好了可以画龙点睛，做不好了就会失去形象。小心慎用。

3．BANNER 。广告条。国际尺寸（pixels ） 类型如下：

468*60 全尺寸BANNER

392*72 全尺寸带导航条BANNER

234*60 半尺寸BANNER

125*125 方形按钮

120*90 按钮#1

120*60 按钮#2

88*31 小按钮

120*240 垂直BANNER

以上几种国际尺寸的banner ，其中468*60的和88*31最多用。就主要的谈一下。

(1) 468*60 全尺寸BANNER ：

① 虽然尺寸为国际标准，但是在设计页面的时候，完全可以根据你的页面占

用空间来制定banner 广告位，和广告条大小。如图四，利用在上方安放广

告位的方法解决区域4分割较大的问题。根据区域4的横长，运用以上几

种广告条都不适合。就可以考虑根据你的页面改变广告条尺寸。比如使用

200*50。所以网路上有很多种尺寸的banner 。我曾在榕树下看到过146*178

尺寸的banner （图五）

② 一个页面内不易超出两个468*60 全尺寸banner 。两个条的时候，一般是

上面一个，下面一个，如图四。为了标新立异，banner 和logo 可以不在一

排。如新浪http://www.sina.com.cn。

③ 设计banner 配合页面的两种情况：a) 单看banner 很难看，但是放入网页

中，却会使网页丰富而旋目。一般也就是468*60的banner 有这个本事。

b) 设计的时候还要考虑互换给给他人的未必适合他人的网页。该多做一些不

同颜色不同情况的banner ，以防万一。

(2) 关于88*31的banner 。

①大家俗称它为logo 。代表你的网站的形象，好像标示一样。

②好的banner 也要符合网站的风格。经常遇到一个很棒的banner 点开却是很难看的叶子。虽然有被欺骗的感觉，但是从行销的角度讲，它设计的越好。点击率越高，也越成功。

③如图四中区域7内的一般的广告条， 88*31banner也可以用来丰富页面。这样的情况少见，才应该引起注意。 (4)

其他设计banner 要注意的：

（1）banner 有动态和静态两种。在浏览网页的过程中，虽然闪烁的图案会瞬间产生记忆刺激，引起注意，但这种记忆往往为压迫性的，久之易产生负面效应，从而模糊记忆。而稳定的画面不易引发特殊的关注，但如果有良好的界面引导和内容，可产生良性的记忆，持久而牢固。根据粗略统计，100个banner 里面有1/3是静态的。看来大家对动态的banner 更加看好。

（2）banner 的“重量”要轻！以468*60banner为例，最好是15k 左右，不要超过22k 。而88*31 banner最好在5k 左右，不要超过7k 。目前BANNER 设计的方法有很多。我推荐flash 制作的banner ，可以设计的很漂亮，还很“轻”！

（3）一个经过精心设计的Banner 和一个创意平淡的Banner 在点击率上将会相差很大。设计注意事项：

①Banner 的文字不能太多，用一两句话来表达即可。②广告语要朗朗上口。③图形无须太繁杂，文字尽量使用黑体等粗壮的字体，否则在视觉上很容易被网页其他内容淹没。④图形尽量选择颜色数少，能够说明问题的事物。⑤如果选择颜色很复杂的物体，要考虑一下在低颜色数情况下，是否会有明显的色斑。 当然有时候色斑效果也不错。⑥尽量不要使用彩虹色、晕边等复杂的特技图形效果，这样做会大大增加图形所占据的颜色数，增大体积。

4．按扭。网页设计是新的行业，没有很久的历史，和规范的教本。对按钮的定义不是很清晰。在我的归类里面什么是算是按钮呢？如图六（大鹏证券局部页面）：

大鹏用户登录，登录按扭，more 按钮，个股推荐等等类似物件，我都统称为按钮。某种意义上导航的存在形式也是按钮。只是它的功能很特殊。如果经常做网页，就会感觉在设计按钮要求越来越高。归纳几个要点：⑴设计按钮要符合页面的整体感觉，不能太高调。⑵有的页面很单调，还要依靠花哨的按钮来提一下。⑶选用的字体，选用的插图，或插图及字体搭配，都要考虑字迹清楚，色彩简单一些，不要超过4种。⑷很长的按钮可能就是框架的分界，尽量要纤细一些，否则叶面会臃肿。

5．图片。为了美化页面，我认为是任何一个页面都要用的到的。因为要考虑网速，能不用就不用，用图片也要用的劲道，用的合理。对于商业行为的网站，注意以下几点：⑴图形的主体最好清晰可见。⑵图形的含义最好简单明了。⑶图片内所含文字应该清晰容易辨认。背景的使用：⑴背景与主体明度对比为 3:1 到 5:1 之间为宜。⑵淡色系列的背景有助于整体和谐。⑶淡色材质背景为佳，能与主题分离之浅色标志或文字背景亦可。

6．文字。文字也有设计。对于商业行为的站点，注意以下几点：⑴每一行文字的长度最好 20 到 30 个中文字﹝40 到 60 个英文字母﹞。⑵行距与字距已由软件内定。设计者能以段落与段落间空行，及首行 缩排方式以辅助阅读。⑶标题以 H1 到 H3 为佳，内文 font size = 3 到 4 级为佳。⑷同版面字型最好在三种字型以内。⑸文字的颜色最好也是三种颜色以内。⑸文字在颜色上要与背景区分。⑹内文的排列向左对齐并与左边界保持适当距离。可以善用表格填入文字以达此效果。⑺表格或清单内的字运用相同字型与字体大小，以利辨别。这些都是为了用户服务的设计，很重要哦！而字体运用，我会在创意无限去具体讲解。

7．超级链接。不用我解释什么是超级链接了吧，每个页面都应该具有的，否则就进了死胡同。链接没有设计么？要的！起码要注意其文字链接的颜色变化。一个页面的链接颜色点击前后，还有鼠标移动时候的产生的动感，都是页面设计很重要的环节。在一个页面上有多个同向连接热点，其实是很失败的设计，混淆视听，使得访问者迷惑。点击前后的色彩要有变化，方便用户区分那些是看过的，那些还没有。

时间紧迫，篇幅限制，关于页面平铺暂时挑重要的说了说。抓住这几部分细节，设计不会差的。

二、整体规划。设计要有整体规划。⑴有共性，就有统一，有细节区别，就有层次。⑵防止设计与实现过程中的偏差，不要定死具体要放多少条信息。⑶设计各部分的物件，要符

合整体感觉。夸张一点好象vi 。⑷不仅页面上各物件间统一，而且网站的各级别页面也要统

一。⑸页面要“透气”，就是不要太过集中信息，以及文字编排太紧密。⑹不要有太多分担注意力的点。动态闪烁要适中。⑺页面留白部分，要根据平面设计原理来设计。分栏式结构不易留白。⑻还有要考虑到浏览器上部占用的屏幕空间，防止断截图片等造成视觉效果不好。

而对于首页留白布局，我粗略做了张图（图八）。以做参考。

三、功能易用性。任何网站都要把这个问题排在第一位。设计导航，设计背景图片，设

计超级链接，设计文字编排，易用第一。注意以下几点：导航最先调入，以便常客快速前往所需信息空间。页面长度要短，使得用户在信息空间内迅速移动。导航设计方向要一致。支持导航的层次按钮应当从上到下或从左到右，但不要两者都用，不要混用方向。在以上其他各部分提过的和有关易用性的要点，不再复述了。最后要说窗口的问题。很多站点为了不考虑用户机器分辨率，而固定弹出窗口大小。窗口尽量不要用全屏。以及过大的窗口干扰浏览者正在进行其他的工作。

四、气氛情感表达。当你进入一个娱乐站点，或时尚站点，再或儿童漫画站点。你会有

不同的感觉。气氛激发出一种情感。不管它来自图片，颜色，标题，或者是动态的广告。只要是来自页面，页面本身就具备了一种表达思想。举个对比很鲜明的例子。浏览恐怖站点。和浏览圣诞节庆祝页面，你会有怎样的感觉呢？根据页面定风格的时候，要考虑适宜性图片，颜色，音乐等。这个方面，个人主页的斑竹做的很好。但是不要太过，不要太嚣张。而商业站点，做的欠加。可以做的更好一些，让别人一进来就知道你要展现给大家的是什么。这个就是特性，个性:0

五、平面设计编排构成。我不想讲太深，也不用术语。提出几个要点，配上图，让你有

个了解。无论是图片，还是页面，或其他编排构成问题，都可以解决。而且。就算是没有感觉的时候。有理论的基础也能创作出具有水平的设计。简单一点说，对比及平衡是轴心。韵律和节奏是双翼。加上一点理论分析。

大小的对比。大小差别少，给人的感觉较沉着温和；大小差别大，给人的感觉较鲜明，而且具有强力感。视线会从小的物件转动到大的物件。在相同大小的物件间流动。（图九）

明暗的对比。设计页面的时候，色彩运用要平衡，明暗得当（图十）

粗细的对比。字体愈粗，愈富有男性的气概。若代表时髦与女性，则通常以细字表现。细字如果份量增多，粗字就应该减少，这样的搭配看起来比较明快。（图十一）

质感的对比。质感是对情感表达具有最强烈的影响力。松弛感、平滑感、湿润感等等皆

是形容质感。质感不仅表现出情感，而且与这种情感融为一体。外行人就容易疏忽这一点。去收集图片背景的网站，细心观察那些背景图片。看看都适合那类站点。

位置的对比。画面的上下、左右和对角线上的四角，都是潜在性的受力点，而在此力点

处配置照片、大标题或标志、记号等等，来产生对立关系使画面产生紧凑感。（图十二）

主与从的对比。版面设计上也有主角和配角，有了主从，也就把视觉集中到特定位置，观众的心理会安定下来。视线不会在如图九中同等大小的两个圆间流动。版面中表现出何者为主角，会使读者更加了解内容。

动与静的对比。没有静，哪里来的动。太多的动，就会引起画面不平衡，一定不会舒服。访客不会长时间停留。

对比的作用就是要强调另一部分的存在，就是因为有了正面反面，宇宙各种物态得以平

衡。我觉得有了对比，就要考虑平衡，与失重。不平衡的设计，接受的人少。可平衡的设计，是挑不出毛病的。对比还有曲线和直线、垂直与水平、锐角与钝角等种种不同的对比。如果再将前述的各种对比和这些要素加以组合搭配，即能制作富有变化的画面。

比例。上学的时候学过黄金分割吧。其实版面设计中的受力点的选取和这些有直接的关

系。如果能参照「黄金比」来处理页面，能产生稳重平衡的画面。（图十三

）

配合留白问题解释一下图十三，在没有黑色圆点的地方留白可以，但是如果说，在没有

地方不留白，而有的地方留白。如何也构成不了三角稳定状态，画面一定失重。设计要有重心平衡，失重的画面不会好看。

韵律感。韵律感是美的最基本的表现形式。具有共同印象的形状，反复排列时，就会产

生韵律感。不一定要用同一形状的东西，只要具有强烈印象就可以了。有节奏的画面，也会有层次。自然给你如飘扬的音符的快感。

形态的意象。各种形态都有情感。比如锐角的三角形有锐利、鲜明感；近于圆形的形状，有温和、柔弱之感。相同的曲线，也有不同的表情，用仪器画出来的圆，有硬质感，可是徒手画出来的圆就有柔和的圆形曲线之美。运用图形，可以加上些思考。

留白。空白的多寡对版面的印象，有决定性的影响。如果空白部分加多，就会使格调提

高，且稳定版面；空白较少，就会使人产生活泼的感觉。若设计信息量很丰富的版面时，采用较多的空白，显然就不适合。

很少的几点原理。但是我觉得对于没有学过设计的，不懂理论的朋友。只要抓住平衡就

可以设计的不出错，抓住节奏就可以设计的很出色。理论不是很好理解。这样说，黄金分割是平衡的。对角受力是平衡的。反正你把物理科学到的东西。用来试试，哈哈，设计也是相通的。可以这样考虑，好像杠杆原理。把你的画面，在中间切一条线，看看两边东西的体重是不是一样多。色彩也是这样，都是浅色的，不一定稳定。加一点黑色，压一下，万事ok 。这个说法不是很规矩，也不要钻牛角尖，只是告诉你一个轻松的理解方式。明白了平衡就不会出现头重脚轻等设计失误。比例得当，就会有美感。

本节推荐站点:

导航： 非常不错的flash 导航。 德国mtv 站点。导航很典雅。 值得学习的下拉菜单式导航，进去任何一个页面你就看见了哪个flash ，真的很漂亮。 右置导航并不常见。 简易的导航，也很舒服

介绍二个收集banner 的站点。可以学习一下别人的创意，提高自己。 按钮： 苹果按扭，经典且著名 台湾Mtv 简洁的页面，不特殊的botton ，和风格统一。 日本Mtv ，我觉得它的按钮真的不错。简洁特别

图片运用比较好的站点推荐：看看他们的背景运用，还有其他图片运用。以及处理图片

的方式，和图片的编排。用心能学的很多。

整体感觉不错的网站：找有品牌名称的英文，象http://www.名牌英文名称.com/输入，

通常设计的都不错。 爱立信手机

首页的留白：

页面内的留白： 它还是右边导航的，以及图片运用也很好。

气愤情感烘托好的站点： 秘密花园，看看人家的图片运用，和音效运用，整体感觉。 时尚站点，一个很棒的flash 。

发表于2001年23期电脑报

个性化网页设计之色彩搭配

Relen 2001-06-30

----------------------------------------------------------------------------------------------------------------------

有了好的框架和页面设计，而色彩把握不准，则会导致整个设计失败。色彩，是最先也是最持久地给浏览者以网站形象的因素。色彩和谐的重要性，是你我都明白的：）。如何做得好的色彩搭配呢？下面我总结了几个色彩实用设计的要点，希望能给你带来帮助。

确定主体色，遵循主从关系。这是最稳定的处理色彩原则。

通常我们形容页面颜色会这样说：榕树下(http://www.rongshuxia.com)是绿色的。蚁盟(http://www.yimeng.org)是紫色的。红、黄、绿、蓝、紫等每一个字都代表一类具体的颜色，也就是色相。指色彩的相貌，是区别色彩种类的名称。在页面上，除白色为背景外，大量使用的颜色，则是这个网页的主体颜色。如果在同一个页面内运用了多种颜色，把握不好的话，就先确定哪个是主体色。其他的颜色面积不能过大，遵循主从关系。否则就会像这个站点上方banner 所在的区域使用的紫色和侧栏的深玫瑰红色搭配混乱。

选择色彩相近的，容易搭配。

先来解释两个名词。假设在红色里面加白，红色就会越来越亮，明度提高。而加黑，红色就越来越暗。明度降低。那么色彩的明度就是指任何一种色彩的明暗程度。（图一）明度随箭头方向逐渐提高。

假设在蓝色里面加了黑、白、灰，或另一种颜色，就会使得蓝色不纯，不再鲜艳。那么色彩的纯度就是指有彩色系中每个色彩的鲜艳程度。

同色彩系（同色相时），明度不同或纯度不同的几种颜色容易搭配，比如挑几种深浅不同的绿色来搭配，一般页面不会有太大问题；同一页面尽量不要多出4种颜色。超级连接的色彩搭配也是遵循以上的原则。而文字颜色的搭配，则要与背景分离。有个一小方法：打开photoshop6看到色彩（Swatches ）的控制面板，调入Anpa colors.aco(图三) 。如果把他们6色为一组的话，每组都是很不错的配色方案，但是都比较高调：）其实如果搭配颜色的时候遇到麻烦，就可以在photoshop 的swatches 面板，调入不同的几种色系，看看他们相临的颜色，或隔几种色来搭配，找合适你页面的颜色绝对不难：）

色彩均衡，是比较保险的配色互补原则。

多种颜色同时存在的时候不容易把握好，要调和统一。比如利用色彩错视现象，其中的

重量错视在实用设计用处很多。也就是明度高的浅亮色看起来交轻；明度低的深暗色则

较重。（图三）

那么在网页设计中，如果运用了较多明度较高的颜色。比如图三中左边都是比较浅的颜

色，或亮的颜色。就可以用黑色，或同色相的深色小面积的压一下，点缀一下，使得页面不要太轻，达到色彩重量的平衡，好象天平^-^。平衡的颜色较符合多数人的色彩心理。根据你的情况拉，选用黑色，可能会严肃和庄重。用同色相的深色，则轻松一些。

黑白灰是宝贝。

如果在用色上遇到麻烦，可以大面积的加白、灰；小面积的加黑来调节其他颜色搭配不

当。遇到使用纯度很高的颜色，比如正蓝，正黄等，这样的搭配会很鲜艳，比较兴奋。把这样的颜色明度抬高或降低，搭配上灰、白色，也是调节的方法。 用黑色调节红和绿，搭配的和谐稳定。

色彩心理与情感。选择适合内容风格的颜色。

1. 由于色彩的冷暖感觉。儿童类站点不要使用冷色系，且色彩要丰富一些。

2. 色彩有柔软和坚硬感。同色相，明度高，有柔软感。明度低，有坚硬感。女性

站点，适量选用柔美的淡粉色或高级灰。而男性类站点，可以使用棕色，深兰

色。

3. 从色相看，暖色给人的感觉华丽。从明度看，明度高的感觉华丽。从纯度看，

纯度高的色彩给人的感觉华丽。由此首饰类站点可以使用高雅的咖啡和金黄

色，而香水类站点可以用明度高的淡绿或浅蓝色。

4. 色彩的联想。主要色相的抽象的联想（省略具象的联想）：

红色：热情。橙色：温暖、欢喜。黄色：光明、快活。绿色：和平、新鲜。蓝

色：安宁、平静、理智。紫色：优雅、高贵、庄重、神秘。黑色：恐怖、死亡。白

色：纯洁、神圣、清净。灰色；谦逊。等等。根据这些联想。游戏站点，适合黑色，

暗色比较神秘。旅游类站点，可以选用草绿搭配黄色。政府类站点，可以使用红色，

蓝色。时装类站点，可以选择高级灰、紫色等，突出高雅氛围。校园类站点也适合

绿色。科技类适合深蓝色。新闻类适合深红色，或黑色，搭配高级灰。等等。

5. 色彩明度的高低与声音的高低相关。强烈的色彩如亮黄色、鲜红色，具有尖锐、

高亢的音乐感。暗浊色如海蓝色、深灰色等具有低沉浑厚的音乐感。现代音像

艺术正是采用了视觉与听觉等多媒体相结合的方法，展现了丰富、新颖的视听

效果。http://mapage.noos.fr/melon/online.html

6. 根据色彩的味觉感。绿色、黄绿色是未成熟的果实色彩，有酸、涩的味感。橙

色、浅黄色、浅棕色、粉红色使人想到了成熟的瓜果色彩而产生甜甜的味感。

设计饮食类站点，就可以遵循以上原则。

页面中的色彩分配。

如图四以二分栏结构，假设已有页面部分为：网页内容（3）、网页标头（1）、导航菜

单(5)、侧栏(2)、页脚(4)。

1.

2.

3.

4.

5.

6. 网页内容，是信息存储空间，要求背景要亮，文字要暗，对比度要高。一般是白地黑字，如果是黑地，也可以是灰字，可以用很淡的颜色来做，淡到让人可以忽略。 网页标头，是logo 和主要信息放置的地方。一般要深色。具有较高对比度，以便用户能够非常方便看到他在该站点的所在位置。标题通常与页面其它部分有不同的“风貌”，它可以使用与网页内容非常不同的字体或颜色组合。也可以采用网页内容的反色。 导航菜单所在区域。把菜单背景设置的颜色暗一些，然后依靠较高的颜色对比度、比较强烈的图形元素或独特的字体将网页内容和菜单的不同目的准确地区分开。 侧栏，尽管不是所有网页都使用侧栏，它不失为显示附加信息的一个有用方式。它应与网页内容清楚地区分开，同时也需要易于阅读。 页脚，这一项的最不重要，不应该喧宾夺主。可以考虑和侧栏相同的颜色，或稍微压一下的深一些的颜色。 在配色上使用一些比较跳跃的颜色，用来引导视线。灰棕色为主题色。用跳跃性的橙色来做导航、按扭，指引视线的去向。

七、此节推荐站点。 红和绿，几近完美的结合。 相近的色相，明度高一些，加入大量的白，搭配非常好看。 多色相的平衡。 墨绿和黑色是主题。金黄色来引导视线。 金黄加绿，高雅华贵，美丽的秋天感觉。 这个站点的配色，实在太温暖了。 类似的高阶调的颜色搭配，如果你接受不了，就适量加入一些黑色，或大量的白色调和

一下。 最后一个酷站，看看色彩的魅力，带给你的享受和联想。顺便学习一下人家的色彩搭配。

发表于2001年24期电脑报

个性化网页设计之内容艺术

Relen 2001-06-31

----------------------------------------------------------------------------------------------------------------------

WWW ，全球信息网是一种交互性的信息流通空间。每一个站点就是一个信息储备空间，以及提供信息空间。相对于单个网站来说，第一重要的是其具有的信息量大小，和流通速度。简单一点说，一个好的网站，它的内容一定要丰富，且存储放置合理，以方便查阅。下面我们讨论一下内容的艺术！！且分五部分：命名、管理、构建、包装、积累。此节，基本针对个人主页。

信息空间的命名

1． 主页的命名

一个网站给别人的第一印象是它网站的名称。不管你是从搜索引擎、友情连接、或推荐站点得到此网站的连接，都是由这个站点的名称开始的。即使你看到了这个站点，大脑反应出来的印象概括还是这个站点的名称。一个网站的名称代表了很多情绪，意义，内容概述。如果想让你的网站吸引人或感动人，有个好的名字是很重要的：）

我的建议是：①内容性很强的网站最好是用其内容来命名，比如，游戏天堂、游戏攻略、歌词18G 。好处就是别人一看便知道，且不会有什么麻烦。如果搞个让人家猜不出的，或很诗意的名称，可能会失去大量受众。②个性化极强主页，就可以根据你的喜好来定名字，当然很奇怪的名字，势必会引起好奇，而得到一部分访问量。随口就能叫出一些：虚拟彼方、杀死敌机、另一种表情。③不管是否为内容命名，或为了喜好命名，都要朗朗上口。还要避免重复。④用自己的网名命名，打出名牌。这绝对是个性的体现。如colorbird ，蓝色理想：）

2． 栏目的名称

简单一点说，网站形式的信息存储空间，是不可能没有栏目的。栏目的设置，如果把握不准，要先做个调研。所谓调研，其实就是看看同类的站点，都有那些内容那些栏目。确定了具体内容，把他们归类。设置了栏目，就要给他们命名。

我的建议是：①名称要有规律，最好字数相同。比如“动漫派”的栏目以某某派为规律。图一 不失个性且用内容命名。②栏目名称的命名类似网站名称命名。没有人喜欢在金钱与网速间玩捉迷藏的游戏，所以最好使用以内容来命名，节省时间。③如果同类站点很多，同类站点相仿栏目很多。那么最好起大家都用的栏目名称，这并非是失去个性，而是为访问者的习惯找想。太大的跳跃会不自然，使得访问者反感。④假设你的主页，既包括了漫画，又包括了音乐，也就是说，它不属于专一内容的网站。那么内容设置，可能跳跃很大。此类站点，不容易精致。如果说是为了个人喜好，你可以考虑分出大类，把他们明了化。让访问者清楚的了解此网站有那些内容，指引给大家方向。再根据区域编排的框架来设计，会有不同感觉。

3． 域名的艺术

域名对一个网站的重要意义不言而喻。为自己的网站起域名，一如给自己的宝宝起名字，带有美好寄托、深远意义。

我的建议是：①域名一定要琅琅上口、简单易记。②好的英文域名所剩不多，那么可以考虑用拼音来做域名，只要不太长。如人人--Renren ③不喜欢拼音可以用汉字谐音来做域名，如Joyo--卓越、Xoyo--逍遥等域名。④数字域名很被看好，你可以抢注谐音的域名或喜欢的数字组合。⑤把中文和英文谐音一起组合也非常不错，比如chinaren ⑥英文和数字组合是我最喜欢的了，一如Home2V.com 、80mb.Net 都是我的主页^-^

信息空间的管理

1． 首页导航艺术

很简单的道理，把主要的内容放在最上面，或最显眼的地方。让他最先调入。以及把栏目名称使用不同于其他栏目的颜色，或闪烁的动画，引起浏览者注意，确立一段时间的主打栏目。把深层重要信息，提到首页来做宣传，为了吸引受众进入信息空间探索。这些都是内容导航的艺术。也是页面设计的重点。如图二的主任信箱用动态。或如新浪导航里面的标注的红色栏目。

2． 善用侧栏

对于分栏式结构的设计，一般都会有侧栏。灵活的运用侧栏，是很重要的。建议：①侧栏的内容不为非常主要的，但是也是不可少的。注意编排不要杂、乱、无序。②如果没有什么要特别放置到侧栏的信息，也就是说侧栏是空的，那么最好不要用这样的框架了。换一种设计会好很多。③把功能区设置在侧栏是很合理的。比如会员登陆、友情连接等。

3． 网站纵深度

不要把信息放置过深，一般最终信息到三级页面就可以了。而四级页面还有内容的话，就使用弹出窗口。什么是几级页面呢？网站首页 = 一级页面，栏目首页 = 二级页面。就这样一层一层下去。如果信息放置过深，会给访问者带来很多麻烦，浪费很多时间，也会把耐性磨完的。而弹出窗口不要太大，可以使用滚动条，如果太大，那不就和开个新窗口一样了么？宽不要大于600像素、长不要超过480像素。

4． 相关信息跳跃

在搜索结果页面上，会看见旁边有相关信息导读。这样的合理安排是很重要的。不要认为这些是功能问题，不需要考虑。越是小的让人注意不到，却会带给受众很大的方便。日久天长，你就会发现，功能上的艺术会招来很多“回头客”的：）

5． Back 键

信息要流通、那么就让访问者不要见到“死胡同”。这一点很多朋友都不在意。我觉得在网站设计的严谨性上来说，一定要放置Back 键、Home 键，还有关闭窗口键。可能制作上麻烦了一点，但是从管理信息方面考虑，还有信息的翻滚，非常有必要！

6． 斑竹的语言

个性的语言、幽默的语言、有力的语言等等，在更新日志的体现，其实也是信息空间中信息的一个部分。怎样才能做的好，我没办法给你一个标准的答案。做你自己，不与人重复，有你的品位和理念，来经营好属于你的空间。

信息空间的构建

1． 内容定位

决定了，你要做什么类型网站后，搜集资料，要全面，要有特点。另外，把自己定个位。好对收集来的信息有个筛选。不可乱，不可杂，要明确。经常看到一些个人主页的站点，什么都有，

喜欢的 flash,还有做怪的小程序.乱七八糟的.如果你想做的就是你喜欢的东西.那么即使更新 的日志,也要写的清楚一些,都是些什么类别.存储信息的时候,更要条理分明.让访问者一看 便知道,主人的嗜好. 2. 内容互补性 信息的互补性,比如一个 MP3 歌曲的下载站点,最好能有此歌的歌词浏览.信息互补,是信 息空间的补充,完善.假设你做了一个游戏站点,提到了某单个游戏,而你只做很简单的介绍, 你可以提供它的相关网站,来完善你的信息空间. 3. 内容连续性 好象文章的连载,步步更新,吸引"回头客",确立固定访客群.做系列的内容,步步深入. 比如你的站点是做在线教程的,那就需要信息的连贯性,和逐步的提高难度.可以不要一起更新, 而步步更新. 4. 专题栏目 在特定的时间段,给某个内容做专题,使它为主打栏目.或一直存在的专题栏目,为了满足 很大范围的受众.比如,你做了一个桌面站点,其中有明星壁纸这一栏目,但是喜欢深田恭子的 人非常多,就可以单做一个恭子的专题.为了满足受众. 5. 周边资源 这个不用说太多了吧,把你的信息空间以金子塔形建立起来.那么就要做的全面些,感觉丰 富些,专业些.对于花边资源,绝对不能漏掉一条.如果有精力,那么别人有的,我们也要有, 别人没有的,我们更要有.嘿嘿! 信息空间的包装 网站的内容不仅仅是由文字组成的,视觉元素在网站中也占有重要的位置.做一个符合你的信息 内容的设计页面,也是必要的.而定期改版,是一定要重视起来的.看惯了一个页面,和看腻了 一个页面是有不同的待遇的.超过了一定时限,看惯的感觉就变成了看腻的厌弃.所以,信息空 间的包装,以及更新,不可忽略: ) 信息的积累 一个好站,是要靠长期的更新,长时间的确立品牌,长时间的等待受众的习惯.不可以,天 天改版和更换名字.也不可以玩闭站的游戏.这是要很大的热情和信念.即使你是做个性化的叶 子,也要持之以恒.网络就是因为有了各式各样的个人主页才富饶起来的.大家还要多多努力才 是.) :

发表于 2001 年 25 期电脑报

个性化网页设计之创意无限

Relen 2001-07-07 ---------------------------------------------------------------------------------------------------------------------网站的整体风格及其创意设计是站长们最希望掌握,也是最难以学习的.它没有一个 固定模式以供的参考和模仿.同一个主题,任何两人都不可能设计出完全一样的网站.而在 原有条件下,如何来提高或开启思维呢?: )我建议,多看多学多思考,逐步来提高设计. 这东西很难量化给大家讲解,我就与大家讨论几个要点吧:风格定位,色彩角度,字 体运用,视听效果,信息模式. 一,风格定位 风格是什么?风格就是与众不同的地方.要么色彩,要么技术,或者是交互方式,或 是信息管理模式, 能让浏览者明确分辨出这是你的网站独有的. 甚至即使你只看到其中一页, 也可以分辨出是哪个网站的. 风格的形成不是一次定位的, 你可以在实践中不断强化, 调整, 修饰. 如何做出风格?我给大家一些简单的建议:①确立网站的 VI!就没有与之重复的了. 走到那里,都可以一目了然,这是你的站点.②利用图形图像制作技术来确立风格,比如: 金属风格的网站,像素风格的网站(图一),苹果按扭类晶莹剔透的站点.可这类模式的站点 已经很多了.要么,你的技术更高.要么,你可以做其他材质的设计.比如把整个站点用木 头的感觉来做.这只是个提示,更多的还要你自己根据你现有的技术来思考.③平面设计你 不行,还可以从 Css,Js 下手.利用别人没有的特效,来突出个性.④设计方面都不行, 那么就用简洁的页面来烘托,内容的美丽,别人没有你网站的信息,你是独一无二的,这也 是一种风格:)

注意细节可以弥补现有设计的不足:①将你的标志 logo,尽可能的出现在每个页面上. 或者页眉,或者页脚,或则背景.②突出你的标准色彩.文字的链接色彩,图片的主色彩, 背景色, 边框等色彩尽量使用与标准色彩一致的色彩. ③突出你的标准字体. 在关键的标题, 菜单,图片里使用统一的标准字体.④使用统一的语气和人称.即使是多个人合作维护,也 要让读者觉得是同一个人写的. ⑤创造一个你的站点特有的符号或图标. 比如在一句链接前 的一个点,可以使用:☆※○◇□△→虽然很简单的一个变化,却给人与众不同的感觉. 二,色彩角度 已经谈过了"色彩搭配",为什么这里我还要来讲色彩运用的角度呢?色彩搭配很适宜, 但是未必就有个性.同样两个搭配适宜的红色网站,为什么会有不同的感觉?对!不仅仅有 色彩搭配的问题.还有色彩选择与运用.以前都是鼓励大家用最稳妥的方式,那么现在谈到 创意,就要多多放开些.比如同样是蓝色,不要惧怕别人也在用,你可以使蓝色偏绿.或偏 红,选择不完全纯的蓝色来设计,也就是创出同样为蓝色网页不同的个性来.

三,字体运用 很多人都不太在意这点.其实字体本身都是有表情的,它会把某种特性带入你的设计 中来.不管是按扭,标题,图片,文字,只要运用了字体,都要考虑适宜性. 1.先来谈英文.从去年起,很多站点都运用了 04-08 号字体(图二) ,它可以在 6 号字 的情况下,显示非常清楚.但是,这类游戏机型,像素式的字体本身有一种高科技感和窒息 感.它实在太小了.运用起来有一定的好处,但是不代表它适合一切网站.

我建议大家,去尝试新的字体.①如果你喜欢英文,可以到国外的免费字体站多多看 看,去下载一些你喜欢的字体做备用.②看看字体本身的特性,是否适合你的页面.如果是 儿童类,女性类,或随意型的站点,可以使用手写体,卡通的,或草体的.如果是游戏类, 或桌面类站点,可以使用冲击力很强的字体,比较张力,有感觉.③不要把字体的运用不当 一回事,精益求精,才有好作品.如果在是图片上附字体,那么运用把握不准的时候,可以 多试试. 效果会很不同. ④在字体的搭配上, 不要使用超过三种的字体. ⑤在字体的编排上, 要疏密得当.且不要有窒息感. 2.对于中文字体!我想很多朋友都有这样的感觉:头疼.看到一个好的英文站点,照搬 过来换为中文,却非常难看.为什么?道理很简单啊,他们不是方块汉字.中文体积大,且 使用宋体过多没有感情. 而印刷体编排起来很难突破, 做出好的创意. 使用图片来定位字体, 会失去过多的网速,怎么都不划算. 提示:①可以去看看国外的网站,但不是英文的了.而是日本,朝鲜,韩国,泰国等 国家的站点,因为他们与我们相同都是方块汉字.如果他们设计的很好看,且模式运用起来 很舒服,那就会同样适用于中文的站点.②而对于中文字体本身的运用上.也如英文字体一 样,要考虑中文字体的个性情感问题.方正字体,文鼎字体,还有经典字体,都是很不错的, 装来多看看.③有的字体很适合做标题,或 LOGO 中的标准字.比如:综艺体(图三)④彩 云体(图四),琥珀体实在太大了,圆头圆脑,少用为佳.⑤还有!不要认为最常见的宋体没 有魅力,你可以在 banner 中运用粗宋体,老宋体等,或在平面图片中编排起来都会很好看.

四,视听效果 视觉方便不难理解,可很多人忽略了音效,音乐的魅力.幽雅的旋律,神秘的音效, 若符合你的页面风格的特色音乐,就可以考虑运用到页面中.它不仅多了一种知觉感受,也 加深了对视觉设计的理解.极富个性的网站都可以尝试.使用 flash 格式放置,栽入快,且 方便.注意两点:①不要过多使用大家太熟悉的影视插曲,听太多了,会厌腻.②可以找一 些网友原创的曲子,没有听过的,才个性嘛! 五,信息模式 风格是建立在有价值内容之上的.一个网站有风格而没有内容,就好比绣花枕头一包 草.看过一遍,绝对不会在来.所以!首先保证信息的质量和价值性.这是最基本的,无须 置疑. 在信息排版方面的建议:①突出个性化,可以不遵守段落空两格的原则.②标题的设 计可以多样化.③段落间可以多些修饰.图片,横线等,但是要有规律,要统一.④落款方 式固定,以及页眉,页角要统一. 六,推荐站点: 字体站点: http://www.fontface.com 这个站点的所有字体,我去年就当完了.我欣赏它的字体缩略图,用颜色来区别有表 情的字体,感觉棒极了. http://www.4gee.com/font/index.htm 中文字体的下载. http://home.intercity.or.jp/users/masak/ 这里有很多日文字体的下载. 韩国设计站点:我挑了几个我最喜欢的.你可以到 Yahoo 上去找! http://oullim.kidp.or.kr/ http://www.dreamworksrec.com/forestforthetrees/ http://webcook.mooni.co.kr/ 金属风格的站点: http://www.sevenstudio.com http://ourworld.topcool.net/ 像素风格: http://www.habbohotel.com/ http://www.nothing.ch

发表于 2001 年 26 期电脑报