010-64928252 400-6446-365

网页设计的版面配置重点

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

  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. 善用图片,吸引目光

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

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

  因此,一个成功的网页设计版型规划,就是能够达到图文并茂、相互呼应的境界。TAG标签耗时:0.0007631778717041 秒
010-64928252/400-6446-365 我现在就想找顾问聊聊
让决策变的简单
好的开始是成功的一半
您需要一位互联网
顾问提供专业咨询
高端网站建设 · 小程序 · APP · 微信 · H5网站 · 电商平台建设
网络营销 · 年度运营 · H5场景 、游戏 · VR 、AR · AI人工智能