·网页特效库   ·网页工具库      
网页特效库
   
背景按钮导航特效图片特效文本特效时间特效状态特效另类特效网页制作网站首页
 
< 后退    |    收藏网页特效库
 推荐网页特效 更多推荐特效
 购物网站的导航效果,推荐!
 向上下左右滚动图片的特效
 超级变态广告代码
 设为首页
  加入收藏夹
 防止选择和复制
 新浪博客的提示窗口,推荐!
网页工具库 - 让网页制作更轻松
 推荐网页工具 更多网页工具
 在线html编辑器
 在线CSS编辑器
 滚动条颜色生成器
 弹出窗口生成器
 网页加密解密工具
 汉字转换成拼音工具
 文本繁简体转换工具
您的位置:网页特效库 >>  网页制作 >>  网站设计的思考 打印友好页面
网站设计的思考
作者:阿捷   出处:太平洋电脑网

确定网站的目录结构和链接结构

上篇讲到:我们在动手制作网页前,一定要考虑好以下三方面:

1.确定栏目和版块;
2.确定网站的目录结构和链接结构
3.确定网站的整体风格创意设计
今天我们继续来讨论“确定网站的目录结构和链接结构”。

一.网站的目录结构

网站的目录是指你建立网站时创建的目录。例如:在用frontpage98建立网站时都默认建立了根目录和images子目录。目录的结构是一个容易忽略的问题,大多数站长都是未经规划,随意创建子目录。目录结构的好坏,对浏览者来说并没有什么太大的感觉,但是对于站点本身的上传维护,内容未来的扩充和移植有着重要的影响。下面是建立目录结构的一些建议:

●不要将所有文件都存放在根目录下。

有网友为了方便,将所有文件都放在根目录下。这样做造成的不利影响在于:

1.文件管理混乱。你常常搞不清哪些文件需要编辑和更新,哪些无用的文件可以删除,哪些是相关联的文件,影响工作效率。

2.上传速度慢。服务器一般都会为根目录建立一个文件索引。当您将所有文件都放在根目录下,那么即使你只上传更新一个文件,服务器也需要将所有文件再检索一遍,建立新的索引文件。很明显,文件量越大,等待的时间也将越长。所以,给您的建议是:尽可能减少根目录的文件存放数。

●按栏目内容建立子目录。

子目录的建立,首先按主菜单栏目建立。例如:网页教程类站点可以根据技术类别分别建立相应的目录,象Flash,Dhtml,Javascript等;企业站点可以按公司简介,产品介绍,价格,在线定单,反馈联系等建立相应目录。

其他的次要栏目,类似what's new,友情连接内容较多,需要经常更新的可以建立独立的子目录。而一些相关性强,不需要经常更新的栏目,例如:关于本站,关于站长,站点经历等可以合并放在一个统一目录下。

所有程序一般都存放在特定目录。例如:CGI程序放在cgi-bin目录。便于维护管理。所有需要下载的内容也最好放在一个目录下。

●在每个主目录下都建立独立的images目录。

默认的,一个站点根目录下都有一个images目录。刚开始学习主页制作时,阿捷习惯将所有图片都存放在这个目录里。可是后来发现很不方便,当我需要将某个主栏目打包供网友下载,或者将某个栏目删除时,图片的管理相当麻烦。经过实践发现:为每个主栏目建立一个独立的images目录是最方便管理的。而根目录下的images目录只是用来放首页和一些次要栏目的图片。

●目录的层次不要太深。

目录的层次建议不要超过3层。原因很简单,维护管理方便。

其它需要注意的还有:

1.不要使用中文目录;网络无国界,使用中文目录可能对网址的正确显示造成困难。

2.不要使用过长的目录;尽管服务器支持长文件名,但是太长的目录名不便于记忆。

3.尽量使用意义明确的目录;上面的例子中,你可以用Flash,Dhtml,Javascript来建立目录,也可以用1,2,3建立目录,但是哪一个更明确,更便于记忆和管理呢?显然是前者!

随着网页技术的不断发展,利用数据库或者其他后台程序自动生成网页越来越普遍,网站的目录结构也必将飞跃到一个新的结构层次。

二.网站的链接结构

网站的链接结构是指页面之间相互链接的拓扑结构。它建立在目录结构基础之上,但可以跨越目录。形象的说:每个页面都是一个固定点,链接则是在两个固定点之间的连线。一个点可以和一个点连接,也可以和多个点连接。更重要的是,这些点并不是分布在一个平面上,而是存在于一个立体的空间中。

●我们研究网站的链接结构的目的在于:用最少的链接,使得浏览最有效率。

一般的,建立网站的链接结构有两种基本方式:

1.树状链接结构(一对一)。类似DOS的目录结构,首页链接指向一级页面,一级页面链接指向二级页面。立体结构看起来就象蒲公英。这样的链接结构浏览时,一级级进入,一级级退出。优点是条理清晰,访问者明确知道自己在什么位置,不会"迷"路。缺点是浏览效率低,一个栏目下的子页面到另一个栏目下的子页面,必须绕经首页。

2.星状链接结构(一对多)。类似网络服务器的链接,每个页面相互之间都建立有链接。立体结构象东方明珠电视塔上的钢球。这种链接结构的优点是浏览方便,随时可以到达自己喜欢的页面。缺点是链接太多,容易使浏览者迷路,搞不清自己在什么位置,看了多少内容。

这两种基本结构都只是理想方式,在实际的网站设计中,总是将这两种结构混合起来使用。我们希望浏览者既可以方便快速的达到自己需要的页面,又可以清晰的知道自己的位置。所以,最好的办法是:

●首页和一级页面之间用星状链接结构,一级和二级页面之间用树状链接结构。

举个例子。一个新闻站点的页面结构如下:

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

一级页面 二级页面

财经新闻页 -- [财经新闻1,财经新闻2...]
/ |
首页 -- 娱乐新闻页 -- [娱乐新闻1,娱乐新闻2...]
\ |
IT新闻页 -- [IT新闻1,IT新闻2...]

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

其中,首页,财经新闻页,娱乐新闻页,IT新闻页之间是星状链接,可以互相点击,直接到达。而财经新闻页和它的子页面之间是树状连接,浏览财经新闻1后,你必须回到财经新闻页,才能浏览IT新闻2。所以,有站点为了免去返回一级页面的麻烦,将二级页面直接用新开窗口(POP up windows)打开,浏览结束后关闭即可。

注意:以上我们都是用的三级页面举例。如果您的站点内容庞大,分类明细,需要超过三级页面,那么建议你在页面里显示导航条,可以帮助浏览者明确自己所处的位置。就是您经常看到许多网站页面顶部的,类似这样:“您现在的位置是:首页->财经新闻->股市信息->深圳股->深发展”

关于链接结构的设计,在实际的网页制作中是非常重要一环。采用什么样的链接结构直接影响到版面的布局。例如你的主菜单放在什么位置,是否每页都需要放置,是否需要用分帧框架,是否需要加入返回首页的链接。在连接结构确定后,再开始考虑链接的效果和形式,是采用下拉表单,还是用DHTML动态菜单等等。

随着电子商务的推广,网站竞争的越来越激烈,对链接结构设计的要求已经不仅仅局限于可以方便快速的浏览,更加注重个性化和相关性。例如,一个爱婴主题网站里,在8个月婴儿的营养问题页面上,你需要加入8个月婴儿的健康问题链接,智力培养链接,或者是有关奶粉宣传的链接,一本图书,一个玩具的链接。因为父母不可能到每个栏目下去寻找关于8个月婴儿的信息,他们可能在找到需要的问题后就离开网站了。如何尽可能留住访问者,是网站设计者未来必须考虑的问题。

讲到这里,阿捷忽然觉得自己很厉害,居然会总结出这么大一套理论:)什么,皮厚?可能吧,这么多高手都没发言呢!有意见请来信ajie@soim.com

下次我们继续讨论“确定网站的整体风格创意设计”。

确定网站的整体风格和创意设计

网站的整体风格及其创意设计是站长们最希望掌握,也是最难以学习的。难就难在没有一个固定的程式可以参照和模仿。给你一个主题,任何两人都不可能设计出完全一样的网站。当我们说:"这个站点很cool,很有个性!"那么,是什么让你觉得很cool呢?它到底和一般的网站有什么区别呢?本文试图用最简明的语言来说明:

1.风格是什么,如何树立网站风格?
2.创意是什么,如何产生创意?

●风格(style)是抽象的。是指站点的整体形象给浏览者的综合感受。

这个“整体形象”包括站点的CI(标志,色彩,字体,标语),版面布局,浏览方式,交互性,文字,语气,内容价值,存在意义,站点荣誉等等诸多因素。举个例子:我们觉得网易是平易近人的,迪斯尼是生动活泼的,IBM是专业严肃的。这些都是网站给人们留下的不同感受。

风格是独特的,是站点不同与其他网站的地方。或者色彩,或者技术,或者是交互方式,能让浏览者明确分辨出这是你的网站独有的。例如新世纪网络(www.century.2000c.net)的黑白色,网易壁纸站的特有框架,即使你只看到其中一页,也可以分辨出是哪个网站的。

风格是有人性的。通过网站的外表,内容,文字,交流可以概括出一个站点的个性,情绪。是温文儒雅,是执著热情,是活泼易变,是放任不羁。象诗词中的“豪放派”和“婉约派”,你可以用人的性格来比喻站点。

有风格的网站与普通网站的区别在于:普通网站你看到的只是堆砌在一起的信息,你只能用理性的感受来描述,比如信息量大小,浏览速度快慢。但你浏览过有风格的网站后你能有更深一层的感性认识,比如站点有品位,和蔼可亲,是老师,是朋友。

看了以上描述,你可能对风格是什么可能依然模糊。其实风格就是一句话:与众不同!

如何树立网站风格呢?我们可以分这样几个步骤:

第一,确信风格是建立在有价值内容之上的。 一个网站有风格而没有内容,就好比绣花枕头一包草,好比一个性格傲慢但却目不识丁的人。你首先必须保证内容的质量和价值性。这是最基本的,无须置疑。

第二,你需要彻底搞清楚自己希望站点给人的印象是什么 。可以从这几方面来理清思路:

1.如果只用一句话来描述你的站点,应该是:_____________

参考答案:
有创意,专业,有(技术)实力,有美感,有冲击力

2.想到你的站点,可以联想到的色彩是:________________

参考答案:
热情的红色,幻想的天兰色,聪明的金黄色

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.以上各项延伸组合
-------------(转载自樊志育《广告制作》)

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

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

上一页   1  |   2  |   3  |   4  |   5  |   6  |   7  |   8  |   9   下一页
 上一篇:一流设计专家网站设计必知的.. 返回列表  下一篇:网站设计65条原则
网页工具库 - 让网页制作更轻松
 
网页特效库 关于我们 | 联系本站 | 免责声明 | 版权声明 | 网站地图 | 友情链接 | 鄂ICP备05023174号
Copyright © 2008 www.butong.net.All Rights Reserved.