网页设计的版面配置重点

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

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

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

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

010-64928252/400-6446-365 我现在就想找顾问聊聊

网页设计的版面配置重点

更多网站案例

更多解决方案