浅谈公司形象网站的设计流程.docVIP

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