网页版式设计常用的布局形式和布局步骤

　　摘    要：　从网页版式设计的概念、传统印刷版式设计与网页版式设计的差异、网页版式设计常用的布局形式和步骤等几方面进行了研究与探索。

　　关键词 :     版式设计;网页版式设计;排版布局技巧;

　　随着我国信息化高速发展和人们对网页设计要求的逐步提高，网页设计技术快速兴起，并逐渐受到人们重视。网页设计分为网页技术设计与网页艺术设计，也就是在运用JAVA、HTML等编程技术进行网页技术设计的同时，对网页的文字、版式设计、颜色搭配等艺术视觉设计进行充分融合及统一，针对网络信息不同的特点进行全方位的展示。网页艺术设计主要由版式设计、视听元素设计等共同组合而成。本篇文章主要从版式设计与网页设计的差异，以及网页设计的布局类型等方面，对网页的版式设计进行分析与探究，从而使设计者根据具体情况找到更适合网站的版式形式。

　　一、版式设计与网页版式设计的概念与差异

　　1. 概念

　　版式设计，又称为版式设计，是平面设计中的一大分支指，是设计人员根据设计主题和视觉需求，在预先设定的有限版面内，运用造型要素和形式原则，根据特定主题与内容的需要，将文字、图片（图形）及色彩等视觉传达信息要素，进行有组织、有目的的组合排列的设计行为与过程。随着信息技术的高度发展，网页、海报、广告、平面及影像等众多领域都会涉及到版式设计。版面设计除了设计者的艺术构思，也需要与编排技术相结合，是艺术与技术的统一体。

　　网页版式设计是指设计者在网页基本形态要素的支撑下，按照一定的艺术规律进行美化和组织布局，同时，结合网页的文字、图像、动画、音频、视频等元素，使其形成整体统一的视觉效果，设计师所采用的的视觉艺术规律和艺术风格，在给浏览者带来感官上的美感和精神上的享受的同时，也在有限的屏幕空间内体现了设计者的想法、意图，从而达到了有效传达信息的目标。

　　2. 网页版式设计的作用

　　如今网络技术快速发展，网络覆盖面积逐步增大，怎样体现网站最大的信息价值，对浏览者产生更强的吸引力，是大家普遍关心的问题，这就对网页版式设计提出了更高的要求，设计出符合要求的网页是提高网站浏览量的途径之一。

　　网页版式设计决定了网站的类型特点和艺术风格，它以直观的视觉配置牵引着网页页面之间的方向性，网页内容的表达效果也随之增强，在感性表达的同时，设计者要兼具考虑网页空间是否合理，页面下载速度快不快、页面效果是不是最优等技术因素，这也需要设计者在设计过程中具有理性思维。

　　3. 网页版式设计与传统印刷版式设计的差异

　　网页版式设计与传统的报刊杂志等媒体平面设计有着较强的相似性，很多传统出版行业版面设计的规则和禁忌，也大都适用于网页的设计，但也存在较大差异。具体表现如下：

　　(1）印刷品都有固定的规格尺寸，网页则不然，它的页面尺寸可能会出现1024X768像素、800X600像素等不同的规格，由显示器的分辨率来确定，其组织结构也不是线性组合，页面上每个元素的尺寸和位置对于网页设计者是很难精确控制的。

　　(2）传统印刷品的设计者除了可以在版式设计中进行优化，还可以通过指定使用的纸张和油墨，让设计效果得以最佳呈现；而网页设计者却不能要求浏览者使用什么样的智能设备，最终在呈现上还要受浏览者浏览器的色彩、分辨率和浏览者浏览习惯的制约，设计者对呈现效果的可控制性较低。

　　(3）传统的印刷品具有成熟的印刷标准，而互联网正处于不断发展之中，网页设计中的每个事件都可能随时发生变化，从而带来网页版式设计中的变化。

　　(4）网页设计作为一种特殊的版面，既有文字、图片、视频，还有些流动窗口和广告等，内容更加繁多、复杂，设计在强调艺术性的同时，还要使页面内容和形式达到有机统一，考虑页面的可读性和网络浏览的特性，并兼具整体美感。

　　(5）动态化也是网页版式设计区别于传统印刷版式设计的显着特征。网页版式设计的动态设计是增强网页的可读性，参与性与趣味性的有力手段。同时，网页设计人员必须根据网站各个阶段的发展需求以及用户的反馈信息，经常对网页版式进行调整和修改，更具灵活性。

　　二、网站类型的不同所体现出的网页版式特征

　　网页版式设计根据内容性质，在布局上会产生差异，可划分为如下几个类型：

　　1. 政府门户类网站。

　　在此类网页中，文字居多，图片运用较少，并运用Icon功能识别图标使用户可以快速预知按钮的功能、文本的意义，从而快捷的引导用户进入功能页面办事，通过文字的叙述和图标的运用，注重信息发布和办事功能的展示，增加政府部门的权威性。注意，在此类网页版式设计时，是不能增加其他方面的广告信息的，只能阐述与主题相关的内容。

　　2. 新闻或门户类网站。

　　这类网站在首页上，会根据内容的不同，划分出新闻、教育、娱乐、财经、科技等多个模块。以文字为主，穿插一定量与板块内容相关的高品质图片，来吸引浏览者的注意，且为了便于浏览者的阅读，版面大多较为整齐工整，且具有一定的韵律感，就像一首歌曲，每个模块具有不同的节拍，但在细节上加以区别，保持整个页面的统一协调。一般来说，在这类的网页设计中，横向的内容通常是不变的，让浏览者在浏览时有整体连贯性的体验，主要通过纵向的板块变化，层叠的展示出栏目板块，纵向延展开去，网页能存储的信息量也随之庞大。

　　3. 商务类网站。

　　网站主要体现对企业、产品的介绍和推荐功能，除了一些企业介绍、通知公告等文字类板块外，产品的图片或视频展示窗口也需要安排在适当的位置，并配以产品的文字说明，通过文字与图像之间占比大小的相互配合，吸引浏览者进一步的了解企业、产品，从而达到有效的宣传目标。

　　三、网页版式设计常用的布局形式

　　网页版式设计布局，简单的理解就是将图片、视频和文字排摆放在页面的不同位置给浏览者带来最适合的浏览体验，兼顾网站内容的呈现、美感和浏览者体验达到最佳的形式。经过网页设计者大量的实践总结，常见的网页布局形式包括：“同”字形布局、“T”字形布局、“三”字形布局、“川”字形布局等，下面我们就7类网页布局设计一一加以解析。

　　1.“同”字型结构布局，也称为“国”字型。

　　在页面的顶部位置是网站Logo及广告条，往下可分为三栏，左右两栏分列两小条内容，中间位置是网站的主要部分，与左右两栏并列纵向延伸到网站底部，版权信息、友情链接、网站地图等汇集于网页底部。

　　2.“T”形结构布局。

　　此类结构页面顶部同上，网站Logo一般置于顶部左上角，往下分为二栏，左栏设置为主导航区，网页主要内容分列在右栏为。左导航区的一般背景一般设置为较深的颜色，整体效果类似英文字母“T”。这种布局的优点是页面条理清晰、主题突出，是初学者最容易掌握的布局方法。缺点是对色彩细节搭配要求比较高，如果搭配不当，会给人以规矩呆板感，容易引人厌烦。

　　3.“口”形结构布局。

　　这种布局类似一个方框，表现为页面顶部和底部是广告条，中间区域分为三栏，左栏是主菜单，中间为网页主要内容，右栏是热点推荐、友情链接或图片展示区域等。这种布局的优点是充分利用版面，网页布局紧凑，信息丰富，但四面封闭，易使人产生压抑感。

　　4. 对称对比结构布局。

　　整个网页采取左右或者上下对称的布局，非常醒目，在颜色上选择一半深色，另一半浅色，两部分搭配协调，会具有很强的视觉冲击力，但将两部分有机地结合比较困难，不易掌握，此类布局一般用于设计型站点。

　　5. POP结构布局。

　　这种布局就像一张宣传海报，整个页面中间是一幅醒目且设计精美的大图片，大图中间再穿插一些图片和文字，设计漂亮吸引人，但大量的运用图片会导致图形分辨率偏大，网页下载速度慢，浏览不顺畅，且提供的文字信息量有限。此类布局常用于时尚类或教育类站点。

　　6. Flash布局。

　　这种布局整个页面就是一个Flash动画，画面绚丽，动感十足，由于Flash的强大功能，页面所表达的信息更加丰富，也能直观的体验觉效果和听觉效果，是比较新潮的一种布局方式。

　　7. 标题文本型结构布局。

　　这种类型的页面最上部往往是主题标题，下面是正文，页面内容以文本为主，比如一些文章页、投票、注册等内容的页面多采用此类布局。

　　以上是目前网络上较为常见的几种布局，在具体的使用时可灵活使用。比如板块内容非常多，就要考虑用“国字型”；而如果一些说明性的内容比较多的时候，例如新闻或者门户网站的正文页，则可以考虑标题正文型；如果是企业网站或个人主页，不需要表达过多的文字信息，那么可采用POP结构、Flash布局或对称对比结构，能大大丰富网页视觉和听觉效果，引人瞩目。

　　四、网页版式设计布局的步骤

　　1. 草案。

　　这属于初步的创造阶段，不讲究过多考虑美工细节和技术功能功能，网页也不必精美整齐，也，只以简单的线条布局出网页的轮廓。此阶段多在于设计者的构思创意，尽可能多思考多探索不同类型和风格，最后选定一幅满意的作为继续创作的脚本，在实际工作中，根据客户需求也需要准备多幅创作脚本，以供选择。

　　2. 粗略布局。

　　梳理出网站Logo、主导航、搜索、友情链接、广告栏、联系方式和版权信息等必须放置到页面上的功能模块。通常将网站Logo、主导航等最重要的模块放页面上部最显眼、最突出的位置，最好是屏幕第一屏的位置，往下可以根据逻辑关系考虑次要模块的排放位置。

　　3. 定案。

　　将粗略布局继续美化，使其更加精细和具体，最后达到满意定案。

　　对于网页版面布局的设计，以下原则需要设计者重视：加强视觉效果，加强文案的可视度和可读性，强调页面的统一感。一些新鲜和个性化的布局将更能体现设计者的创意，也更能吸引观者的注意，便于对网站加深印象。

　　参考文献

　　[1]王靓、董继先:《论版式设计的艺术化》，《艺术与设计:理论版》2007年第5期