神马文学网浅谈公司形象网站的设计流程
来源：百度文库 编辑：神马文学网 时间：2024/04/29 00:52:44
来源：中国论文下载中心 [ 09-11-18 14:57:00 ] 作者：刘力溯 张苏 编辑：studa20
【摘 要】本文试图以制作思沃特公司网站的经验,总结出此类公司形象网站的一般制作流程,并阐释其中的一些重要问题,为设计实践活动提供一定参考。
【关键词】形象 网站 设计
一、绪论
20世纪90年代以来,互联网开始在国内迅速普及,互联网主要通过大量的、每天至少有几千人乃至几十万人访问的网站,以前所未有的效率广泛传播着信息。
笔者曾为武汉思沃特房地产顾问有限公司制作过一个网站。该公司希望拥有一个简单的网站,将其作为公司宣传策略的一部分,其中与业务相关的实际内容并不多。因而此网站显然属于形象展示型的公司网站,应按相应的模式来设计。
二、网站策划
1.网站策划的职责
很多人都知道网页设计需要“美术”与“技术”两方面的相互配合,一个较为普遍的原则是“美工先行”,即由美工先作设计,再由技术人员制作,但这只是就单个页面制作层面而言,若从更广义的网站整体规划角度来说,本文认为在以上工作开始之前还应该有一个“网站策划”的环节。
有别于纯粹从“形象思维”出发的美工设计,策划具有一种“理念先行”的思维方式,他的职责在于准确地了解和把握客户的意图,并综合美学、人文、心理学等多方面因素进行理性思考,进而对网站的主题、规模、结构、风格提出要求,作出整体规划。
如果缺少策划的全盘考虑和指导,美工设计很可能陷于为形式而形式,为美观而美观,无法取得最合理的传达效果。
2.主题色的选择
思沃特公司的宗旨是“体验优质地产服务”。核心价值观是“诚信,团队,创意,灵活,分享”。通过比对和联系,我发现蓝色的含义与其企业文化正好吻合,很好地诠释了他们对于专业服务和团队合作的追求,于是在网站主题色和同期制作的VI标志上都选择了蓝色。不过,网站的主题色采用了一种与标志中最深的阴影部分相同的深蓝色,这是因为深一点的蓝色更加沉稳、睿智,排除了浅蓝色所带有的忧郁等其它感觉。
3.素材的搜集
网站制作的前期工作还包括搜集素材,素材包括图文两方面的内容。网站的文字内容一般是从委托方得到,如公司介绍等。
图片素材包括装饰性图片和插图,它们的搜集工作通常是由美工在制作过程中“顺手完成”的,本文却认为,素材搜集的随意性和分散性,和美工单纯考虑画面的倾向,容易导致图片与网站主题联系不强。不如在设计之初,由对网站主题有着深入了解的策划,预先对图片进行统一的准备和采集,包括实地拍摄等。
4.网站结构的划分
网站结构,是指组成网站的各个页面及相互之间的链接关系,从简单意义上可以理解为网站栏目的划分。在策划阶段,要以网站的实际内容和访问者的浏览习惯为基础划分栏目,从而决定分页面的数量和链接方式。还要从信息的易获取度方面考虑,采取尽量简化的原则。 三、美工设计
1.页面美术风格
从策划角度讲,为了体现该公司现代、高效、新锐的精神气质,需要一种简洁、明快、清新的美术风格,我在美工阶段按此基调进行了页面设计,调动各种视觉元素使其与此风格相符,如:(1)压缩页面大小,边缘留空。(2)减少页面信息量。(3)字体、图片尺寸小巧,以刚好能为观者识别为准,使页面就显得紧凑与精巧。
2.网站色彩方案
在美工阶段我继续完善了网站色彩方案,将主题色深蓝色用在了导航条上,选择了浅灰色、白色作为辅助色,用作页面中大面积的底色。灰色和白色在饱和度与明度上与主题色有着较大差异,能够对其起很好的陪衬作用,同时这两种颜色都具有中性,冷静的特质,与主题色的语境相通。
3.页面的“图窗”
由于页面信息量相对不足,如果再静止不动,那么网页将会有些单调乏味。因此我便参照了很多网站的做法,在首页导航条下方放置了一块很大面积的FLASH动画去活跃和丰富页面。FLASH约占据了页面有效部分的3/5大小,这是美学中的黄金分割比例,也是我常常处理图块之间大小关系的比例,可以使得页面有一种大小、主次的对比。
4.分页面版式设计
其它几个分页面的版式设计,是以静态图片充当页面“图窗”,并采用了两种基本版式:(1)图文左右混排。(2)图文上下混排,使得各页版式有一定的变化,避免了千篇一律。“联系方式”一页内容较少,就没有用图,直接以名片般的版式列出了信息,一目了然。
也有一个设计缺陷:部分页面的顶部图窗过于臃肿,造成页面文字栏目被向下积压,访问者如果不滚动浏览器窗口,就难以看到多少有用的内容。这其实是犯了网页设计中“第一屏”信息不足的错误。第一屏即指打开浏览器,不翻页的情况下看到的内容,这个区域一般高为700像素,在设计中要集中页面有用信息于此,才能让访问者不至于感到内容空洞、查看费劲。
四、技术制作
1.网站制作技术的选择
网页制作技术的选择,在制作中期决定了美工用什么软件去完成设计,及代码编写人员用何种方式去实现网页的最终效果。
目前采用较多的网页制作技术主要有三种:(1)用Flash制作网站。Flash软件创建图形和动画的功能强大,并可凭借Actionscript代码实现用户交互,所创作的网页有着最为丰富动画效果,因此被一些追求新颖,张扬个性的站点用来进行整站制作,不过缺点是技术上相对复杂。(2)用HTML语言制作网站。网页文档依靠HTML语言组织图文信息,设计师可以通过编写这种语言实现制作,也是国内外大多数网站采用的技术。它的优点是简单易掌握,缺点是代码冗余和非“语义化”,有被互联网逐渐淘汰的趋势。(3)用XHTML+CSS语言制作网站。制定网络标准的W3C组织在HTML语言之后,针对其弱点,又推出了改良语言XHTML,并与CSS样式语言混合使用,语法规范,成为当今网页制作新的技术标准。缺点是需要手写更多的代码,对美工的形象思维方式提出了挑战。
2.留言板的制作
“在线客服”页面中,公司需要搜集访客的留言信息。这一功能可以通过表单、论坛等形式实现,而一种能够即时发言和显示的ASP留言板,对该网站则最为合适。ASP留言板除对网站服务器空间稍有要求外,但制作、发布和维护都很简单。我从网上选择了一套ASP留言板模板,对其页面外观加以修改以配合网站整体风格,之后上传到服务器,即可正常运行。
参考文献:
[1]佚名.网页设计中的色彩设计艺术.
[2]朱印宏.CSS商业网站布局之道.清华大学出版社,2007.10.
[3]百度.知道关于软件Flash 的解释.
【摘 要】本文试图以制作思沃特公司网站的经验,总结出此类公司形象网站的一般制作流程,并阐释其中的一些重要问题,为设计实践活动提供一定参考。
【关键词】形象 网站 设计
一、绪论
20世纪90年代以来,互联网开始在国内迅速普及,互联网主要通过大量的、每天至少有几千人乃至几十万人访问的网站,以前所未有的效率广泛传播着信息。
笔者曾为武汉思沃特房地产顾问有限公司制作过一个网站。该公司希望拥有一个简单的网站,将其作为公司宣传策略的一部分,其中与业务相关的实际内容并不多。因而此网站显然属于形象展示型的公司网站,应按相应的模式来设计。
二、网站策划
1.网站策划的职责
很多人都知道网页设计需要“美术”与“技术”两方面的相互配合,一个较为普遍的原则是“美工先行”,即由美工先作设计,再由技术人员制作,但这只是就单个页面制作层面而言,若从更广义的网站整体规划角度来说,本文认为在以上工作开始之前还应该有一个“网站策划”的环节。
有别于纯粹从“形象思维”出发的美工设计,策划具有一种“理念先行”的思维方式,他的职责在于准确地了解和把握客户的意图,并综合美学、人文、心理学等多方面因素进行理性思考,进而对网站的主题、规模、结构、风格提出要求,作出整体规划。
如果缺少策划的全盘考虑和指导,美工设计很可能陷于为形式而形式,为美观而美观,无法取得最合理的传达效果。
2.主题色的选择
思沃特公司的宗旨是“体验优质地产服务”。核心价值观是“诚信,团队,创意,灵活,分享”。通过比对和联系,我发现蓝色的含义与其企业文化正好吻合,很好地诠释了他们对于专业服务和团队合作的追求,于是在网站主题色和同期制作的VI标志上都选择了蓝色。不过,网站的主题色采用了一种与标志中最深的阴影部分相同的深蓝色,这是因为深一点的蓝色更加沉稳、睿智,排除了浅蓝色所带有的忧郁等其它感觉。
3.素材的搜集
网站制作的前期工作还包括搜集素材,素材包括图文两方面的内容。网站的文字内容一般是从委托方得到,如公司介绍等。
图片素材包括装饰性图片和插图,它们的搜集工作通常是由美工在制作过程中“顺手完成”的,本文却认为,素材搜集的随意性和分散性,和美工单纯考虑画面的倾向,容易导致图片与网站主题联系不强。不如在设计之初,由对网站主题有着深入了解的策划,预先对图片进行统一的准备和采集,包括实地拍摄等。
4.网站结构的划分
网站结构,是指组成网站的各个页面及相互之间的链接关系,从简单意义上可以理解为网站栏目的划分。在策划阶段,要以网站的实际内容和访问者的浏览习惯为基础划分栏目,从而决定分页面的数量和链接方式。还要从信息的易获取度方面考虑,采取尽量简化的原则。 三、美工设计
1.页面美术风格
从策划角度讲,为了体现该公司现代、高效、新锐的精神气质,需要一种简洁、明快、清新的美术风格,我在美工阶段按此基调进行了页面设计,调动各种视觉元素使其与此风格相符,如:(1)压缩页面大小,边缘留空。(2)减少页面信息量。(3)字体、图片尺寸小巧,以刚好能为观者识别为准,使页面就显得紧凑与精巧。
2.网站色彩方案
在美工阶段我继续完善了网站色彩方案,将主题色深蓝色用在了导航条上,选择了浅灰色、白色作为辅助色,用作页面中大面积的底色。灰色和白色在饱和度与明度上与主题色有着较大差异,能够对其起很好的陪衬作用,同时这两种颜色都具有中性,冷静的特质,与主题色的语境相通。
3.页面的“图窗”
由于页面信息量相对不足,如果再静止不动,那么网页将会有些单调乏味。因此我便参照了很多网站的做法,在首页导航条下方放置了一块很大面积的FLASH动画去活跃和丰富页面。FLASH约占据了页面有效部分的3/5大小,这是美学中的黄金分割比例,也是我常常处理图块之间大小关系的比例,可以使得页面有一种大小、主次的对比。
4.分页面版式设计
其它几个分页面的版式设计,是以静态图片充当页面“图窗”,并采用了两种基本版式:(1)图文左右混排。(2)图文上下混排,使得各页版式有一定的变化,避免了千篇一律。“联系方式”一页内容较少,就没有用图,直接以名片般的版式列出了信息,一目了然。
也有一个设计缺陷:部分页面的顶部图窗过于臃肿,造成页面文字栏目被向下积压,访问者如果不滚动浏览器窗口,就难以看到多少有用的内容。这其实是犯了网页设计中“第一屏”信息不足的错误。第一屏即指打开浏览器,不翻页的情况下看到的内容,这个区域一般高为700像素,在设计中要集中页面有用信息于此,才能让访问者不至于感到内容空洞、查看费劲。
四、技术制作
1.网站制作技术的选择
网页制作技术的选择,在制作中期决定了美工用什么软件去完成设计,及代码编写人员用何种方式去实现网页的最终效果。
目前采用较多的网页制作技术主要有三种:(1)用Flash制作网站。Flash软件创建图形和动画的功能强大,并可凭借Actionscript代码实现用户交互,所创作的网页有着最为丰富动画效果,因此被一些追求新颖,张扬个性的站点用来进行整站制作,不过缺点是技术上相对复杂。(2)用HTML语言制作网站。网页文档依靠HTML语言组织图文信息,设计师可以通过编写这种语言实现制作,也是国内外大多数网站采用的技术。它的优点是简单易掌握,缺点是代码冗余和非“语义化”,有被互联网逐渐淘汰的趋势。(3)用XHTML+CSS语言制作网站。制定网络标准的W3C组织在HTML语言之后,针对其弱点,又推出了改良语言XHTML,并与CSS样式语言混合使用,语法规范,成为当今网页制作新的技术标准。缺点是需要手写更多的代码,对美工的形象思维方式提出了挑战。
2.留言板的制作
“在线客服”页面中,公司需要搜集访客的留言信息。这一功能可以通过表单、论坛等形式实现,而一种能够即时发言和显示的ASP留言板,对该网站则最为合适。ASP留言板除对网站服务器空间稍有要求外,但制作、发布和维护都很简单。我从网上选择了一套ASP留言板模板,对其页面外观加以修改以配合网站整体风格,之后上传到服务器,即可正常运行。
参考文献:
[1]佚名.网页设计中的色彩设计艺术.
[2]朱印宏.CSS商业网站布局之道.清华大学出版社,2007.10.
[3]百度.知道关于软件Flash 的解释.