网页设计中版面布局的研究

朱纪兰

江苏省扬中市供电公司，江苏镇江 212200

1 版面设计方法与布局原则

1.1 版面设计方法

网页版面设计的方法和技巧主要有以下几点：

1)简洁

网页版面首先映入眼帘的是布局，而布局最重要的原则就是简洁，简洁的版面设计能够给人带来焕然一新的感觉，这有利于浏览者更顺利的进行网页信息阅读，对其更好的选择，只有先简洁的阅读网页主题内容，其次才是从属的内容。往往浏览者会被网页图片的精美吸引住，所以这时网页只有在访问中体现它的使用价值，他们才会反复性的进行浏览访问。这个网页版面在百度、谷歌中比较常见，因为他们给人的感觉简洁、浏览器来更高效。

2)要有主色调

网站版面给人的第一感觉，要从主色调说起，主色调主要布局与网站网页设计中。主色调多的页面会给客户带来厌烦的感觉，不利于浏览者长期观看。简单来说，网页版面的主色彩应用中不能超过5 种，而且其中应以一种主色调为主，让其占主导地位，用其他4 中颜色作为衬托和点缀。网页版面设计的主色调一般包括黄色、蓝色、橙色、灰色、黑白色系列。

3)注意字体的设置

网页版面的布局也包括字体的样式，字体在网页版面中也应遵循简易的原则，也以不超过3 种样式为主。既然遵循简易原则，且版面设计字体应不要太大，这样在网页版面显示的字体会给浏览者带来更多有用的信息。哪些闪烁的文字就最好不要出现在网页版面设计中，图片的闪烁会给浏览者带来厌烦的感觉，甚至会不舒服。一般而言，标题栏中的字体应比正文相对大些，颜色也应该区分开来。

4)视觉效果要好

网页版面中的网页结构与排版设计中最重要的成分是视觉效果。优秀的设计者能制作出更完美的网页排版和结构，翻阅那些成功的网页分析发现，网页主题部分设计的比例是1：2；2：1；再者也可以按1：2：1 的结构，这些比例结构是网页版面设计中较为常见和比较流行的结构方式。网页版面的标题和结尾处，也应合理的发布网页信息，更应遵循合理组织、灵活多变的结构方式去布局。

1.2 版面布局原则

网页版面的布局类似于杂志排版的布局。作为一种页面布局，可以是图片、或者是文字，也有可能是动画等等。同时，或大或小的文本，图片的大小；动静态的运用。当浏览者浏览版面时，看到的画面是由文字和图片构成的，假如文字和图片杂乱五章的罗列在一起，会显得页面比较复杂。所以版面的布局应根据版面的内容需要，进行合理的排序编辑，布局，这样在版面布局中形成一个有机的整体，让用户更好的浏览。以下是版面布局的原则：

1)整体布局，和谐统一。网页设计中占据关键地位的整体布局页面，起着主导作用。聪明的整体布局，充分显示了设计师的想法，设计师的灵感，这个页面必须协调统一。

集成是布局的传统方法是使用一个对称的形式。通过空间，和之间的交互文本和图形建立整体的均衡状态，产生和谐的美感。然而，对称平衡有时使页面显得呆板，僵化、缺乏活力。对称平衡辅助设计一些新的单词和模式，需要时可以使用一些夸张，和强烈的紧张和运动，能给对称页面添加一些生动、有趣；

2)主次分明，中心突出。在一个页面布局中，您必须首先考虑视觉中心，该中心一般在页面的关键领域，即中部和上部的位置。因此应该最沟通的信息，在这个网站最具吸引力的内容。在视觉的中心可以安排那些次要的内容，略，突出关键页面上的，优先考虑。

最终的目的是使页面布局页面产生清晰有序，更好地突出主体，达到最好的显示效果，因此，内容页面的视觉中心应该是主体。网页可以视觉秩序、空间层次、主从关系和相互之间的逻辑关系，通过组织掌握和使用来突出主体。空间层次，按照订单的主从关系使得放大视觉中心的主要形象，表达主体思想，将一个总体布局设计文档在各种信息，帮助建立的主要形象，和双方的主要形象适当地增加一些空白，可以让更突出强调的主要形象；

3)疏密有度，错落有致。在版面布局的内容中，一定要紧密结合，恰当留出空白，合理的运用空格，例如字间距和行间距的制造；在对称的原则下讲究非对称和对称美；对于形态和色彩的运用更要结合黑白搭配，圆形和方形的搭配，进而更好的获得视觉带来的效果；

4)图文并茂，相得益彰。图形的美观，文字的整洁，都需要二者相互搭配，如果图形在版面设计中比例较大，而文字使用较少，就会大大降低页面所呈现的额信息容量；反之，文字占用太多则会显现出整个版面的沉闷，没有生气，所以图文并茂，合理搭配，互相协调，才能给网页版面带来灵活的展现，继而丰富了页面的内容。

2 常见版面布局

版面通常所指的是在网页浏览器中呈现的完整布局，布局呈现的文字和图形相得益彰，以下是常见的页面布局形式：

2.1 T 型布局

T 型结构是顶部的页面布局的条纹网站标语和横幅，下面左边主菜单的一部分，右侧的布局来显示内容。因为菜单背景更深，整体效果类似于英文字母T，T 布局，这是最广泛应用于网页设计布局。其优点是页面结构清晰，明确，主次是最容易学习初学者的布局方法;缺点是沉闷的，如果把握不好，不注意细节和色彩搭配，容易看后让人觉得无趣。T 的布局结构如图1 所示。

图1 T 型布局结构图

2.2 “口”型布局

“口”型布局映入眼帘的感觉是页面最中间的主题内容，像一个口字，左右为注册信息，内容导航以及搜索引擎，右侧往往是动态新闻，热点内容，以及友情链接，上下则为横条广告，以及横条菜单。而另一个口型布局相对简单些，主要有横条广告或标题以及主题内容来布局的。

2.3 “川”型布局

在页面布局中，川型布局是最特殊的，整个页面呈现川字形状，一般分为3 列，网站的内容栏目主要呈现3 列中，这样就可以更大限度的呈现主页的索引功能。这种布局针对网站内容栏目较多。它区别于国形布局，其内容主要是页面的二级链接，不足之处就在于栏目在配置的比例上是不平衡的，色彩也不容易得到统一。

2.4 POP 布局

流行布局的海报，一个美丽的照片作为页面设计中心，在适当的位置放置主菜单，用于POP 布局。这个布局不是上下和左右对称，但是需要平衡和节奏，可以实现动态效果，其优点是美丽迷人，缺陷是速度运行中是很缓慢的。

图2 POP 布局

3 新技术对企业网站的挑战

真正的媒体行业的变化是由数字信息传播方式演变而来的，传统媒体的企业应该跟上步伐，大胆的拥抱，积极为数字方式进行传输。终端设备的发展，使大量的桌面的网络时代企业再次面临严峻考验。新的在线阅读设备催生了新的开发技术，显示技术，当然也带来了新的设计技术。新一代的数字新媒体文化的游客的感知达到了不可逆转的趋势，他们会像往常一样，忘记了传统媒体网络的缓慢。通过互联网媒介为核心企业，因此，媒体，还需要继续跟踪新技术，密切关注数字波的进展，为了保持良好的市场竞争力，将不会被读者抛弃。网页设计的过程中，我们应该继承我国的传统文化，形成独特的设计风格，扩大的设计视觉语言的同时，我们还需要创新，突出现代化、引领时尚潮流。在现代极简主义风格中融入中国传统元素以及符号的提炼为版面设计做出突出贡献，促进网页设计变得更加强烈的视觉认知和艺术魅力，创造一个自然、合理、平稳的视觉过程，更好地激发人们的审美情趣和引导浏览者更好的接受信息。

[1]赵晓莉.iv+css布局在网页设计中的应用[J].管理学家，2010.

[2]章学明.浅谈水工自动化监测系统在城西水库的应用[J].管理学家，2010.

[3]严加琼.浅析网页设计中的页面布局[J].电脑学习，2010.

[4]艾妮.基于三维全景技术的通用电子商务系统的研究与开发[D].贵州大学，2009.

[5]马驰.语文课堂的幽默应充满理趣[J].小作家选刊（教学交流），2013.

[6]周欢.论网页设计留白[J].小作家选刊（教学交流），2013.

[7]李玲玲.关于"网页布局"方式的研究[J].淮北职业技术学院学报，2011.