海薇站长网 - 让网站建设、优化、维护从此简单!

海薇站长网

当前位置: 海薇站长网 > 网站建设 > 网站设计 > 怎么样进行网站版面设计

怎么样进行网站版面设计

时间:2018-08-11 20:34:36来源:建站网 作者:365天天网 点击:
每个网站都会有不同的需求,有些公司需要线上购物来贩售商品,有些公司则需要电子相簿来呈现大量的商品照片,这就是为什么在网站开始设计之前,都要先做好网站架构规划。

网站版面设计是什么,怎么样进行网站版面设计,网页设计的版面配置重点有哪些。

在确认过网站的架构及主要视觉风格之后,接下来就是要开始思考网页设计的版面配置。网页设计的版面配置 (也可以说版型规划) 有几项重点如下:

1. 运用视觉,强调重点

每一个网站,最重要的都是首页;每一个首页,最重要的就是最上方的部分,我们称之为"Header" ,因为这个地方是每一位浏览者打开网页后,第一眼所看到的画面,所以它的设计及规划自然是整个网站的首要重点。

Header 中通常会有大篇幅的横幅,有的是图片,有的是动画,我们称之为 "Banner" ,也就是俗称的『网站主视觉』。随着HTML5 及 CSS3 的日益普及,传统的 Flash 动画已经渐渐被取代,愈来愈多的网站使用大篇幅精致图片来强调企业或品牌的重点。因为图片并不像 Flash 动画那样需要较长的等待读取时间。例如 Apple 的首页,一打开就立刻看到非常大面积的横幅,图片宽度达到 980px ,让浏览者一看就知道这是目前 Apple 正在主打的热门商品。

所以,把整个企业或品牌的重点,运用大篇幅的精美图片呈现在 Header 或 Banner 中,就是网页设计版型配置的第一个重点。

2. 掌握架构,落实配置

每个网站都会有不同的需求,有些公司需要线上购物来贩售商品,有些公司则需要电子相簿来呈现大量的商品照片,这就是为什么在网站开始设计之前,都要先做好网站架构规划。

因此,在开始进行版面配置之前,设计师一定要全盘掌握网站的基本架构,了解这个网站会有哪些功能项目,如此一来,才能知道主选单 (Menu) 该放哪些项目?网页主体 (Content) 该有左栏 (Left) 还是右栏 (Right) ?网页底部 (Footer) 要不要有版权宣告或联络资讯?最新消息要显示 5 则还是 10 则?首页要有主打商品还是人气商品?要放几笔?广告连结要放在左边还是下面?要放几则广告?

掌握这些版面配置的重点后,设计师可以先在草稿上勾勒出版型的初稿,以方便接下来的其他版型设计处理。

3. 统一色彩,营造整体

一家公司的形象,最重要的就是 企业识别系统 (CIS) ,一个网站也是,最重要的就是色彩是否达到协调性与一致性。

选择色彩,首要考量当然就是公司或品牌的主要颜色,例如 Facebook 的蓝色,法拉利的红色。除了主色系之外,也要谨慎选择配色,决定色彩之后,不论浏览者切换到哪一个页面,整个网站的风格都具有一致性,如此一来,网站除了能清楚的表达企业或品牌的精神之外,也能展现其独特性,提高企业的识别度。

4. 主次分明,简洁有力

同样是标题,重要性不同,文字大小就必须不同;同样是图片,重要性不同,图片尺寸也就不同。

例如本周主打商品,就要用比较多的篇幅来介绍,文字大一些,图片更精??美一些,其他的次要商品,就使用较小的文字及图片,干净整齐的排列即可。较重要的讯息,除了文字图片大小有差异之外,也可以使用颜色来区别,例如在十笔文章标题中,可以把较重要的标题用红色来表示,并且放在第一笔。除此之外,所有的文字及图片,都要有适当的间距及留白,才能使画面阅读起来轻松不费力。

把最重要的 (也是您最优先想让客户知道的) 讯息凸显出来,主次分明,排版整齐,就能达到成功的网页设计版型规划。

5. 善用图片,吸引目光

一般人阅读网页的习惯,通常是由上到下,由左到右,但是当遇到图片时,就会呈现跳跃式的阅读,也就是说,人们会先看图片,看到有兴趣的,才会继续看文字。所以,适当的在必要的地方放置图片,才能更吸引住阅读者的目光。

一张网页中,如果都是文字,那阅读起来肯定枯燥无味,但如果都是图片,那内容又太过空洞,因此在产品列表中,最好有至少一张的图片,搭配产品简介文字,让阅读者可以迅速的浏览图片,看到有兴趣的产品时,就能再看看它的文字介绍,进而点进去查看产品的详细内容。

因此,一个成功的网页设计版型规划,就是能够达到图文并茂、相互呼应的境界。

你也许会喜欢如下的文章?
(责任编辑:365天天网)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
推荐内容