首页的设计
在我们全面考虑好网站的栏目,链接结构和整体风格之后,我们就可以正式动手制作首页了。
有这么一句俗语:"良好的开端是成功的一半"。
在网站设计上也是如此,首页的设计是一个网站成功与否的关键。人们往往看到第一页就已经对你的站点有一个整体的感觉。是不是能够促使浏览者继续点击进入,是否能够吸引浏览者留在站点上,全凭首页设计的"功力"了。
所以,首页的设计和制作是绝对要重视和花心思的。阿捷的经验是:一般首页设计和制作占整个制作时间的40%。你宁可多花些时间在早期,以免出现全部做好以后再修改,那将是最浪费精力的事。
这里,先插一个“封面”的问题。封面是指没有具体内容,只放一个logo点击进入或者只有简单的图形菜单的首页。
是否需要为站点设计一个“封面”?阿捷的个人观点是:没必要!
除非你是很艺术类的站点,或者可以确信内容独特,可以吸引浏览者进一步点击进入的站点,否则的话,封面式的首页并不会给你的站点带来什么好处。我们上网浏览需要的是快速,有价值的信息,如果等待xx分钟,只显示出一个粗劣的“ENTER”图标,那么相信没有人会再耐心等待进入下一页。
因为首页的重要性,阿捷将着重用8篇文章来仔细讨论有关首页设计的方方面面,大致提纲如下:
○版面布局的窍门
○色彩的搭配
○字体的设置和表格的嵌套
○细微之处见功力
○考虑不同的浏览器和分辨率
○设计好你的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、尽量用图片解说---此法对不能用语言说服、或用语言无法表达的情感,特别有效。图片解说的内容,可以传达给浏览者的更多的心理因素。
------------(转载自广告大师樊志育《广告制作》)