从名称到页面-网站设计全攻略(3)

　4.如果网站是一个人，他拥有的个性是：________________

　　参考答案：
　　 思想成熟的中年人，狂野奔放的牛仔，自信憨厚的创业者

　　5.作为站长，你希望给人的印象是：____________________

　　参考答案：
　　 敬业，认真投入，有深度，负责，纯真，直爽，淑女

　　6.用一种动物来比喻，你的网站最象：__________________

　　参考答案：
　　 猫(神秘高贵)，鹰(目光锐利)，兔子(聪明敏感)，狮子(自信威信)

　　7.浏览者觉得你和其他网站的不同是：__________________

　　参考答案：
　　 可以信赖，信息最快，交流方便，

　　8.浏览者和你交流合作的感受是：______________________

　　参考答案：
　　 师生，同事，朋友，长幼。

　　你可以自己先填写一份答案，然后让其他网友填写。比较后的结果会告诉你：你网站现在的差距，弱点及需要改进的地方。

　　第三，在明确自己的网站印象后，开始努力建立和加强这种印象。

　　经过第二步印象的的"量化"后，你需要进一步找出其中最有特色特点的东西，就是最能体现网站风格的东西。并以它作为网站的特色加以重点强化，宣传。例如：再次审查网站名称，域名，栏目名称是否符合这种个性，是否易记。审查网站标准色彩是否容易联想到这种特色，是否能体现网站的性格等等。具体的做法，没有定式。我这里提供一些参考：

　　1.将你的标志logo,尽可能的出现在每个页面上。或者页眉，或者页脚，或则背景。

　　2.突出你的标准色彩。文字的链接色彩，图片的主色彩，背景色，边框等色彩尽量使用与标准色彩一致的色彩。

　　3.突出你的标准字体。在关键的标题，菜单，图片里使用统一的标准字体。

　　4.想一条朗朗上口宣传标语。把它做在你的banner里，或者放在醒目的位置，告诉大家你的网站的特色是...

　　5.使用统一的语气和人称。即使是多个人合作维护，也要让读者觉得是同一个人写的。

　　6.使用统一的图片处理效果。比如，阴影效果的方向，厚度，模糊度都必须一样。

　　7.创造一个你的站点特有的符号或图标。比如在一句链接前的一个点，可以使用,.。☆※○◇□△→（区位码里自己参看）等等。虽然很简单的一个变化，却给人与众不同的感觉，(为什么我没有想到呢？)

　　8.用自己设计的花边，线条，点

　　9.展示你网站的荣誉和成功作品。

　　10.告诉网友关于你的真实的故事和想法。

　　风格的形成不是一次定位的，你可以在实践中不断强化，调整，修饰，直到有一天，网友们写信告诉你："我喜欢你的站点，因为它很有风格！"

　　● 创意(idea)是网站生存的关键。这一点相信大家都已经认同。然而作为网页设计师，最苦恼的就是没有好的创意来源。

　　注意，这里说的创意是指站点的整体创意，(因为这个创意而产生这个站点，或者相同的内容，推出的创意不同),网页的平面设计创意我将在后面的版面布局窍门里介绍。

　　创意到底是什么，如何产生创意呢？

　　创意是引人入胜，精彩万分，出奇不意的；
　　 创意是捕捉出来的点子，是创作出来的奇招....
　　 这些讲法都说出了创意的一些特点，实质上，

　　创意是传达信息的一种特别方式。

　　比如Webdesigner(网页设计师)，我们将其中的E字母大写一下: wEbdEsigEr，感觉怎么样，这其实就是一种创意！

　　创意并不是天才者的灵感，而是思考的结果。根据美国广告学教授詹姆斯的研究，创意思考的过程分五阶段

　　1.准备期--研究所搜集的资料，根据旧经验，启发新创意；
　　 2.孵化期--将资料咀嚼消化，使意识自由发展，任意结合；
　　 3.启示期--意识发展并结合，产生创意；
　　 4.验证期--将产生的创意讨论修正；
　　 5.形成期--设计制作网页，将创意具体化。

　　创意是将现有的要素重新组合。

　　比如，网络与电话结合，产生IP电话。从这一点上出发，任何人，包括你和我，都可以创造出不同凡响的创意。而且，资料越丰富，越容易产生创意。就好比万花筒，筒内的玻璃片越多，所呈现的图案越多。你如果有心可以发现，网络上的最多的创意来自与现实生活的结合(或者虚拟现实)，例如在线书店，电子社区，在线拍卖。你是否想到了一种更好的创意呢？

　　创意思考的途径最常用的是联想，这里提供了网站创意的25种联想线索：

　　1.把它颠倒 2.把它缩小 3.把颜色换一下 4.使它更长
　　 5.使它闪动 6.把它放进音乐里 7.结合文字音乐图画 8.使它成为年轻的
　　 9.使它重复 10.使它变成立体 11.参加竞赛 12.参加打赌
　　 13.变更一部分 14.分裂它 15.使它罗曼蒂克 16.使它速度加快
　　 17.增加香味 18.使它看起来流行 19.使它对称 20.将它向儿童诉求
　　 21.价格更低 22.给它起个绰号 23.把它打包 24.免费提供
　　 25.以上各项延伸组合
　　 -------------(转载自樊志育《广告制作》)

　　需要一提的是：创意的目的是更好的宣传推广网站。如果创意很好，却对网站发展毫无意义，好比给奶牛穿高跟鞋，那么，我们宁可放弃这个创意！

　　关于风格和创意，可以讲得还有许多。感兴趣的网友可以自己找一些广告设计方面的书阅读。希望本文能帮助您对网站的设计有一个更新的认识和提高。谢谢！

首页的设计

　　在我们全面考虑好网站的栏目，链接结构和整体风格之后，我们就可以正式动手制作首页了。

　　有这么一句俗语："良好的开端是成功的一半"。

　　在网站设计上也是如此，首页的设计是一个网站成功与否的关键。人们往往看到第一页就已经对你的站点有一个整体的感觉。是不是能够促使浏览者继续点击进入，是否能够吸引浏览者留在站点上，全凭首页设计的"功力"了。

　　所以，首页的设计和制作是绝对要重视和花心思的。阿捷的经验是：一般首页设计和制作占整个制作时间的40%。你宁可多花些时间在早期，以免出现全部做好以后再修改，那将是最浪费精力的事。

　　这里，先插一个“封面”的问题。封面是指没有具体内容，只放一个logo点击进入或者只有简单的图形菜单的首页。

　　是否需要为站点设计一个“封面”？阿捷的个人观点是：没必要！

　　除非你是很艺术类的站点，或者可以确信内容独特，可以吸引浏览者进一步点击进入的站点，否则的话，封面式的首页并不会给你的站点带来什么好处。我们上网浏览需要的是快速，有价值的信息，如果等待xx分钟，只显示出一个粗劣的“ENTER”图标，那么相信没有人会再耐心等待进入下一页。

　　因为首页的重要性，阿捷将着重用８篇文章来仔细讨论有关首页设计的方方面面，大致提纲如下：

　　○版面布局的窍门
　　 ○色彩的搭配
　　 ○字体的设置和表格的嵌套
　　 ○细微之处见功力
　　 ○考虑不同的浏览器和分辨率
　　 ○设计好你的banner和位置
　　 ○meta标签的重要性
　　 ○首页设计的小建议

　　今天，只是关于首页设计的一个引子。让我们来大致了解一下首页设计的步骤。

　　首页，从根本上说就是全站内容的目录，是一个索引。但只是罗列目录显然是不够的，如何设计好一个首页呢？一般的步骤是：

　　●确定首页的功能模块
　　 ●设计首页的版面
　　 ●处理技术上的细节　　

　　一).确定首页的功能模块。

　　首页的内容模块是指你需要在首页上实现的主要内容和功能。一般的站点都需要这样一些模块：

　　网站名称(logo), 广告条(banner), 主菜单(menu),
　　 新闻(what's new), 搜索(search), 友情链接(links),
　　 邮件列表(maillist),计数器(count), 版权(copyright).

　　选择哪些模块，实现哪些功能，是否需要添加其他模块都是首页设计首先需要确定的。

　　二).设计首页的版面

　　在功能模块确定后，开始设计首页的版面。就象搭积木，每个模块是一个单位积木，如何拼搭出一座漂亮的房子，就看你的创意和想象力了。

　　设计版面的最好方法是：找一张白纸，一支笔，先将你理想中的草图勾勒出来，然后再用网页制作软件实现。

　　三).处理技术上的细节　

　　阿捷经常收到的来信问题就是：我制作的主页如何能在不同分辨率下保持不变形，如何能在IE和NC下看起来都不至于太丑陋，如何设置字体和链接颜色....等等,阿捷将在下面几篇文章里为大家详细介绍。

　　首页设计是整个网站设计的难点和关键，阿捷希望能够通过和大家的交流，总结出一套较为合理易学的设计方法，从而举一反三，使我们能够更加轻松的完成整个站点的设计制作。如果你愿意将你的心得体会和大家分享，请来信ajie@soim.com,谢谢！

　　版面布局的原理

　　设计首页的第一步是设计版面布局。

　　就象传统的报刊杂志编辑一样，我们将网页看作一张报纸，一本杂志来进行排版布局。虽然动态网页技术的发展使得我们开始趋向于学习场景编剧，但是固定的网页版面设计基础依然是必须学习和掌握的。它们的基本原理是共通的，你可以领会要点，举一反三。

　　版面指的是浏览器看到的完整的一个页面（可以包含框架和层）。因为每个人的显示器分辨率不同，所以同一个页面的大小可能出现640*480像素,800*600像素,1024*768像素等不同尺寸。

　　布局，就是以最适合浏览的方式将图片和文字排放在页面的不同位置。你可能注意到：“最适合”是一个不确定的形容词，什么才是最适合的呢？抱歉的是阿捷不能也不可能给您一个完整的正确的答案。就好比有人希望知道成功的秘诀是什么，成功者只能建议您用什么方法，什么途径才能最容易获得成功，而不可能有一步成功的"秘诀"告诉您。

　　我们在设计思考系列文章第四篇讲过站点整体的创意，版面布局也是一个创意的问题，但要比站点整体的创意容易，有规律的多。让我们先来了解一下版面布局的步骤：

一.草案

　　新建页面就象一张白纸，没有任何表格，框架和约定俗成的东西，你可以尽可能的发挥你的想象力，将你想到的"景象"画上去(我们建议您用一张白纸和一支铅笔，当然用作图软件photoshop等也可以)。这属于创造阶段，不讲究细腻工整，不必考虑细节功能，只以粗陋的线条勾画出创意的轮廓即可。尽你的可能多画几张，最后选定一个满意的作为继续创作的脚本。

二.粗略布局

　　在草案的基础上，将你确定需要放置的功能模块安排到页面上。(注：功能模块我们在"首页设计-引子"中提过，主要包含网站标志,主菜单,新闻,搜索,友情链接,广告条,邮件列表,计数器,版权信息等)。注意，这里我们必须遵循突出重点、平衡谐调的原则，将网站标志，主菜单等最重要的模块放在最显眼，最突出的位置，然后在考虑次要模块的排放。

三.定案

　　将粗略布局精细化，具体化。（靠你的智慧和经验，旁敲侧击多方联想，才能作出具有创意的布局。）

　　在布局过程中，我们可以遵循的原则有：

　　1、正常平衡---亦称"匀称"。多指左右、上下对照形式，主要强调秩序，能达到安定诚实、信赖的效果。
　　 2、异常平衡---即非对照形式，但也要平衡和韵律，当然都是不均整的，此种布局能达到强调性、不安性、高注目性的效果。
　　 3、对比---所谓对比，不仅利用色彩、色调等技巧来作表现，在内容上也可涉及古与今、新与旧、贫与富等对比。
　　 4、凝视---所谓凝视是利用页面中人物视线，使浏览者仿照跟随的心理，以达到注视页面的效果，一般多用明星凝视状。
　　 5、空白---空白有两种作用，一方面对其他网站表示突出卓越，另一方面也表示网页品位的优越感，这种表现方法对体显网页的格调十分有效。
　　 6、尽量用图片解说---此法对不能用语言说服、或用语言无法表达的情感，特别有效。图片解说的内容，可以传达给浏览者的更多的心理因素。
　　 ------------(转载自广告大师樊志育《广告制作》)

　　以上的设计原则，虽然枯燥，但是我们如果能领会并活用到页面布局里，效果就大不一样了。比如：

　　○网页的白色背景太虚，则可以加些色快；
　　 ○版面零散，可以用线条和符号串联；
　　 ○左面文字过多，右面则可以插一张图片保持平衡；
　　 ○表格太规矩，可以改用导角试试。

　　经过不断的尝试和推敲，你的网页一定会亮丽起来的哦:)

　　看看我们经常用到的版面布局形式：

　　1."T"结构布局。所谓"T"结构。就是指页面顶部为横条网站标志+广告条，下方左面为主菜单，右面显示内容的布局，因为菜单条背景教深，整体效果类似英文字母"T",所以我们称之为"T"形布局。这是网页设计中用的最广返的一种布局方式。(图略)