荔园在线
荔园之美，在春之萌芽，在夏之绽放，在秋之收获，在冬之沉淀
[回到开始]
[上一篇][下一篇]
发信人: hawkwolves (十一狼), 信区: Homepage
标 题: 关于网站的建设（第五天）
发信站: BBS 荔园晨风站 (Tue Jun 6 11:33:41 2000), 转信
关于网站的建设（第五天）
(05/15/2000)
第一页：可视化设计
现在你已经对你的网站有了一定的了解：为什么要建网站，访问者是谁，网站
上有什么（即网站的内容），所有的方面如何组织起来。你现在可以进行可视化设
计了，这通常是网站设计中人们最愿意做的部分。
网站的可视化设计的主要目的是提供给用户一个可以去的地方。他们需要知道
他们正在哪儿，去过哪儿，和怎么去想去的地方。一个好的网站结构包含了有效的
可视化设计，使用户对网站在脑海中有一个景象。
本课的目的是把网站的结构应用到可视化设计中。一些工具对可视化设计很有
用。第一步是制作定义网站在页面一级上的结构和组织的布局网格。然后设计建立
一般表现的框架。布局网格和设计框架一起构造页面模型，同时它们又是基于Web
的原型的结构。
在这儿，你需要图形设计人员、艺术指导、创作指导和产品工作人员的帮助。
第二页：布局网格
布局网格是描述网页的模板。内容-每页的焦点-需要放在第一位。你应该缩减全局
导航和局部导航的空间，并把可能不是网站结构一部分的网站的其它方面集成到此
空间中。公司的商标应出现在每页上。广告和赞助者也应包括在设计中。
下面是布局网格的一个例子：
开始时，参照网站结构的列表建一个所有可能页类型的清单。所有主要部分内
的页的形式应该很相似。回顾内容清单，确定两种或三种一般的页面类型。以设计
这些页面类型开始，并把它们作为所有其它页面类型的基础。
开始时，用速写本或你最喜欢的图形软件，画一个矩形表示一个页，然后开始
页面中其它元素的定义。既然内容是最重要的元素，就以内容开始-虽然有点儿可
笑，因为你还不知道页上还有其它什么内容。必需考虑的其它元素包括：商标、广
告和赞助、导航、页标题、顶端图形、脚标（包括版权）。
商标在每页中起重要作用因为它告诉用户他还在网站上。商标一般放在页的左
上角。
广告和赞助可以以多种方式结合在一起。或许你在每页上有一个全幅的广告条
（一般为468*60像素）。你是把它放在顶部吗？你把它放在每页标题下面吗？你怎
样集成赞助？赞助集成在每页的图形标题中吗？每页的底部有一个小的赞助标志吗
？-这都是你要回答的问题。
最后，导航也很重要。全局导航在网站的每页中保持一致。局部导航系统可以
根据内容有所变化，但尽可能保持一致。
这是一个反复性的过程。你可能几次修改布局网格。如果有时间，你可能需要为布
局设计两种或三种风格。
第三页：设计框架和页面模型
设计框架用来建立对网站的直观感受。它可以与修饰风格或网站结构基本原理
结合起来，但不是绝对必要。通常项工作可以与其它信息-结构过程同时进行，因
此你可能已经完成了框架的设计并得到了客户的赞成。
框架不一定要代表结构或组织。但是，图形设计者确实应该知道图形文件的大
小，还有其它的技术限制。
下一步是设计页面模型，通过把设计框架和布局网格结合起来实现真正的网站
。用你最喜欢的图形软件建立网站的框架。在布局网格的不同部分之间剪切和粘贴
组件。另一种选择是用HTML做页面模型，把设计框架的组件作为图形。
页面模型是基于Web的原型的基础，如果你的网站足够小，是建立实际网站的
基础。页面的模型需要得到客户的同意，尽管对你进行到原型过程来说，得到对网
站结构和设计框架的认同就足够了。
现在你已经完成了建造网站信息结构的所有步骤！你已经拥有了建原型的所有
材料，其它别的也该各就各位了。在你建原型之前，在你的设计文档中加入最后一
部分。
第四页：设计文档
你的工作快结束了。你现在要做的只是把网站的可视化设计作成文档。在设计
文档中加入新的一章：“可视化设计”。把布局网格做在文档中，包括你作的图表
。编辑设计框架，把丰满页面的图片加入文档。如果可能，加入基于Web的原型。
设计文档现在就完成了，提供了对网站设计的完整描述。文档在建造网站、增加内
容和不可避免地修改网站时很有用。
例如：
5.可视化设计5.1布局网格5.2设计框架5.3页面模型5.4基于Web的原型你现在
已经学完了最后一课。要实现真正的信息结构还得多做练习。
--
┏━┳━┳━┳━┳━┳━┳━┳━┓
┃当┃你┃你┃你┃去┃我┃我┃我┃ My e-mail:11_wolf@163.net
┃了┃跟┃也┃没┃做┃手┃要┃不┃
┃小┃在┃没┃有┃老┃敲┃把┃再┃
李┃尼┃身┃有┃讲┃和┃木┃你┃烦┃ My homepage:http://192.168.35.20
敖┃姑┃后┃哭┃话┃尚┃鱼┃忘┃恼┃
※ 来源:·BBS 荔园晨风站 bbs.szu.edu.cn·[FROM: 192.168.35.20]
[回到开始]
[上一篇][下一篇]
荔园在线首页 友情链接：深圳大学 深大招生 荔园晨风BBS S-Term软件 网络书店