网站设计流程

第4章 网站设计流程
4.1 网站设计流程
一些网站设计的大致流程. (具体内容第一章有详细介绍)
一, 明确建立网站的目标和用户需求
二,总体设计方案主题鲜明
三,网站的版式设计
四,网站测试和改进
五,内容更新与沟通
4.2 确定网站的类型
随着Internet的飞速发展,网络已经或正在成为人们学习,工作和生活中不可缺少的一部分,更重要的是,Internet潜在的商机已经日益显现.因此,不论个人还是团体,都希望在网络中找到适合自己的位置.于是,各种各样的网站如雨后春笋般的建立起来,综观Internet上数以百万计的网站,按照其功能和结构形式大体上可以分为以下几类 :
1. 门户网站 2. 普及型网站 3. 电子商务类网站 4. 媒体信息服务类网站
5. 办公事务管理网站 6. 商务管理网站
4.3 Web站点的主题与风格
4.3.1 确定站点主题
在选择网站题材的时候要注意以下几点.
1.主题要小,内容要精
2.网站的题材最好是自己擅长或者喜爱的内容
3.题材不要太滥,目标不要过高
4.3.2 确定站点的整体风格
网站的风格设计是最抽象,也是最头疼的一个问题.许多网站的建设者都是从事计算机和网络技术的,他们非常熟悉网页制作技术,但是却少有想法创作一个既美观又有独特风格的主页.另一方面,专业的美工师通常人事的都是传统的美工技术,对网页制作技术和因特网知之甚少,所以不知道如何设计最适合网络传输的图片.所以,网站的风格设计并不简单,它是一项综合的技术.
风格是抽象的,它往往无法用一个具体的物体来描述,它是指用户对网站整体形象的一种感觉.这个整体形象包括网站标志,色彩,版面布局,交互方式,文字编排,图片,动画等诸多因素.
风格又是独特的,是网站最不同于其他网站的地方.统一的风格使用户无论处在网站的哪一个网页,都明确知道自己正在访问的是这个网站.比如微软公司的网站,任何一个网页都有微软特有的蓝色和"Microsoft"网站标志.
总之我们在设计网站风格的时候要注意以下几个问题:
(1) 将网站标志尽可能地放在每个页面最突出的位置
比如:著名电子杂志网站"索易"(http://www.soim.com)是用英文soim作为标志的,而搜索引擎为特色的新浪网则用英文字母"sina"和眼睛图案作为标志的.
(2) 突出标准色彩
标准色彩是指能够体现网站形象和延伸内涵的色彩,主要用于网站的标志,标题,主菜单和主色块.适合作为网页标准色彩的有:蓝色,黄/橙色,黑/灰/白色三大系列.
(3) 使用标准字体
标准字体是用于标志,标题,主菜单的特有字体.一般网页默认的字体是宋体.为了体现网站的与众不同和独特风格,可以根据需要选择一些特别的字体.
(4) 使用统一的图片处理效果
图片有强化视觉效果,营造网页气氛,活泼版面的作用,处理时要注意图片阴影效果的方向,厚度,模糊度都必需一样,图片的色彩与网页的标准色彩搭配也要适当.
4.4 网站内容的确定
4.4.1 网页内容设计原则
以下是我们在设计页面时需遵循的一些基本原则 :
1,_ 日期时间和数字:
用户需要了解他们看到的信息是当前的,但他们不需要查看每个条目的日期和时间.设计日期和数字时就注意:
(1)仅对时间敏感的信息显示日期和时间.不要对没有时间敏感的信息显示时间和日期,不必显示星期几.
(2) 显示最后更新的时间,而不是计算机生成的时间.
(3) 日期的书写
不要只用数字表示日期,比如"01/02/03",它可能是2月1日,也可能是1月2日,因为有些国家的习惯不同.
(4) 当显示一列数字时,要对齐小数点.
2,欢迎词:
不要将主页上最重要的区域用于向用户打招呼.
3,弹出窗口和引导页面
一般来说最好立即显示站点内容.引导页面几乎没有必要使用,并且它使用户远离主站点的内容.
(1) 当用户键入主页网址时,或在别的页面上点击到站点的链接时,要将他们带到真正的主页上.
(2) 尽量避免弹出式窗口.
4,新闻和公告信息
(1) 标题应该简洁,应该用叙述语言,用尽量少的文字表达尽量多的信息.
(2) 精心编辑在主页上重点突出的新闻内容提要.
(3) 不必要在新闻提要中列出日期和时间,除非它确实是一条爆炸新闻并且经常更新.
5,网址:
尽可能使主页的网址简单记忆是非常重要的.
6,控件:
如果不让用户点击,决不要将控件作为屏幕的一部分.
尽量少用下拉菜单,尤其是当其中的项目本身不能说明自身意思的情况下.
7,链接:
(1) 尽量使链接更容易阅读. (2) 注意链接名称. (3) 用不同的颜色来表示链接状态.
8,主页内容:
(1) 使用用户关注的词语.类别和科目的划分要按照用户的取向划分,而不要按照公司的划分.
(2) 避免冗余内容.
(3) 不要使用成语,行话,否则用户很难明白您在说什么.
(4) 尽量少用命令式语言.
(5) 为强调效果,要避免不恰当的使用空格和停顿.
4.4.2 一般网站就包含的几项内容
一个标准的网站应该包括以下十项内容.
1. 站点结构图(SITE MAP) 2. 导航栏(NAVIGATION BAR)
3. 联系方式页面(CONTACT PAGE) 4. 反馈表(FEEDBACK FORMS)
5. 引人入胜的内容(COMPELLING CONTENT) 6. 常见问题解答(FAOs)
7. 精美的图片(GOOD GRAPHICS) 8. 搜索工具(SEARCHING MECHANISMS)
9. 新闻页面(NEWS PAGE) 10. 相关站点链接(RELEVANT LINKS )
4.5网站界面设计
4.5.1 栏目与板块编排
在栏目编排时需要注意的是:
(1)___ 尽可能删除与主题无关的栏目;
(2)___ 尽可能将网站内最有价值的内容列在栏目上;
(3)尽可能从访问者角度来编排栏目,以方便访问者的浏览和查询
辅助内容,如站点简介,版权信息,个人信息等不必放在主栏目里,以免冲淡主题.
另外,板块的编排设置也要合理安排与划分.
板块比栏目的概念要大一些,每个板块都有自己的栏目.举个例子:ENET硅谷动力(www.enet.com.cn)的站点分新闻,产品,游戏,学院等板块,每个板块下面又各有自己的主栏目.
一般来说,个人站点内容较少,只要分个栏目也就够了,不需要设置板块.如果有必要设置板块的,应该注意:
(1)_ 各板块要有相对独立性; (2)各板块要有相互关联; (3)_各板块的内容要围绕站点主题;
4.5.2 目录结构与链接结构
网站的目录是指建立网站时创建的目录.对于站点本身的维护,以后内容的扩充和移植有着重要的影响.所以建立目录结构时也要仔细安排,应该遵循以下原则:
不能把所有文件都存放在根目录下.
(2) 按栏目内容建立子目录.
(3) 在每个主目录下都建立独立的Images目录.
其它需要注意的还有:目录的层次不要太深,不要超过3层;不要使用中文目录,使用中文目录可能对网址的正确显示造成困难;不要使用过长的目录,太长的目录名不便于记忆;尽量使用意义明确的目录,以便于记忆和管理.
网站的链接结构是指页面之间相互链接的拓扑结构.一般的,建立网站的链接结构有两种基本方式:
(1) 树状链接结构(一对一),这类似DOS的目录结构,首页链接指向一级页面,一级页面链接指向二级页面.这样的链接结构浏览时,一级级进入,一级级退出,条理比较清晰,访问者明确知道自己在什么位置,不会"不知身在何处",但是浏览效率低,一个栏目下的子页面到另一个栏目下的子页面,必须回到首页再进行.
(2) 星状链接结构(一对多),类似网络服务器的链接,每个页面相互之间都建立有链接.这样浏览比较方便.但是由于链接太多,容易使浏览者迷路,搞不清自己在什么位置.
因此,在实际的网站设计中,总是将这两种结构混合起来使用.
4.5.3 版面布局
1,网页版面布局的基本概念
下面我们从以下几个方面来了解一下版面布局的基本概念.
(1) 页面尺寸:
由于页面尺寸和显示器大小及分辨率有关系,网页的局限性就在于你无法突破显示器的范围,而且因为浏览器也将占去不少空间,留下给你的页面范围变得越来越小.一般分辨率在800x600的情况下,页面的显示尺寸为:780x428个象素;分辨率在640x480的情况下,页面的显示尺寸为:620X311个象素;分辨率在1024X768的情况下,页面的显示尺寸为:1007x600.从以上数据可以看出,分辨率越高页面尺寸越大.
在网页设计过程中,向下拖动页面是惟一给网页增加更多内容(尺寸)的方法.但我想提醒大家除非你能肯定站点的内容能吸引大家拖动,否则不要让访问者拖动页面超过三屏.如果需要在同一页面显示超过三屏的内容,那么你最好能在上面做上页面内部连接,方便访问者浏览.
(2) 整体造型:
造型就是创造出来的物体形象.
2,网页布局的方法
(1) 纸上布局法
许多网页制作者不喜欢先画出页面布局的草图,而是直接在网页设计器里边设计布局边加内容.这种不打草稿的方法不能让你设计出优秀的网页来.所以在开始制作网页时,要先在纸上画出你页面的布局草图来.
准备一若干张白纸和一只铅笔,你要设计一个时尚站点.
*尺寸选择:
*造型的选择:
*增加文本:
*增加图片:
经过以上的几个步骤,一个时尚页面的大概布局就出现了.
(2) 软件布局法
如果你不喜欢用纸来画出你的布局意图,那么你还可以利用软件来完成这些工作.
3, 网页版面布局的技术
(1) 层叠样式表的应用 (2) 表格布局 (3) 框架布局