平面构成与网页设计研讨

前言：本站为你精心整理了平面构成与网页设计研讨范文，希望能为你的创作提供参考价值，我们的客服老师可以帮助你提供个性化的参考范文，欢迎咨询。

1网页平面设计的特点

从技术手法来讲，网页设计遵循HTML标准规范。其标记式代码构成正是针对网页视觉元素组织编排的描述语言。如规定文字、图片的位置、大小、透明度、色彩等。通过这种标记语言，清楚的表达了设计者的创作意图，使人能够一目了然。这是一种易于借鉴、重用、修订的设计手法。从观者体验来讲，网页相对与其他媒体更能吸引人的眼球。人们每日频繁打开网站，浏览大量网页，将其作为获取信息的主要渠道。报纸、广播、电视只是单向的提供信息内容给受众，而网络却提供了对信息进行筛选、拓展、深化的手段。网页必将远超报纸、广播、电视在社交媒体中的作用。优秀的网页设计应该能以简洁的布局、明确的导航、统一的风格、便捷的交互带给人们流畅的浏览体验。网页文件大小、分辨率、浏览器等因素都可能影响人们的浏览体验，而传统的平面设计却无需考虑媒介载体问题。

2平面构成在网页设计中的应用

平面构成用于网页设计应为信息内容的流畅传递服务。“不要把信息随意的摆放在屏幕上。要把信息放在由窗口和面板构成的背景中，窗口、面板和基本的网格应有一致、清晰的联系”。遵循传统平面构成的认知，网页中的信息仍可归结为点线面的视觉元素。诸如重复、对比、渐变等构成形式，是将视觉信息元素有序化、艺术化的必要手段。

2.1网页设计中的点线面应用

点是网页设计的基本构件，是不可分割的信息元素和视觉元素，即人们浏览网页的着眼点所在。譬如超链接、按钮、logo、表单输入项、标题、列表项。依笔者所见，网页中的点可以是图片，也可以是文字；可以体现内容，也可以提供交互功能。线是点的移动轨迹，是面的边际，是不同信息内容的板块划分。在网页中，线具有分割、联结、牵引、装饰、组织等作用。在网页设计中，线的作用弱于传统媒介。因为网页处理的多是有规则轮廓的线，有虚实之分。实线如：图片、表格的边框，网页中专门有一个标记<hr>用来画出横线，以示区域间隔。虚线如：无边框网页元素的内外间距（magin和padding），将为信息视觉元素绘制无形的边线，将其与内外层的元素区分开来。网页并不支持无规则的线独立完整的存在。网页的结构布局本质上是由矩形容器，按从上到下的瀑布式排列、嵌套组合而成。横线、竖线之外的斜线、不规则线条最终都是切割、分解到不同行列的矩形容器中拼接而成的。从浏览器看到的完整效果只是假象。即使通过<map>标记创建形状（shap）为多变不规则形（polygon）的热点链接，其所指向的图片本身仍是处于矩形容器中。所谓的不规则链接区域，只是为了表征如地图中特定地点之类的信息内容，却与网页的布局和视觉元素实体无关。面在网页中的表征，即大大小小的矩形容器。和不存在不规则的线条一样，网页结构中也不存在不规则的面。这似乎是一个束缚平面设计师手脚的枷锁。实际上，网页设计并不排斥任何的线面形式呈现。瀑布式排列、嵌套组成网页的虚拟矩形容器，可视为组成报纸、电子屏幕的点阵系统。包括线、面，甚至色彩等视觉元素都可以无碍的呈现在人们面前，只是其实质的结构受到了精密的分解和组织而已。这种组织本身就是平面构成设计最基础的重复构成的应用。对此，火狐浏览器提供了三维视图的查看工具，可以让人更加形象的了解网页中各视觉元素的层次关系。

2.2网页设计中的平面构成基本形式应用

2.2.1重复构成

网页中同质内容的视觉表达，一般通过重复构成来实现。如搜索引擎的检索结果、导航、菜单、背景图片、表格内容等。重复是规律性、整齐性、秩序性的体现。重复出现的视觉元素，能够形成一种趋势引导，使得信息点的集合延展成面。不同的面便具备了不同的功能效用。如搜索引擎的检索结果列表，它引导人们的视线从上到下的移动，进而对检索结果的实用价值进行迅速的判断；视线行至底部，分页链接按钮又是从左到右排列，提示人们还有更多的检索结果，也许所寻找的信息内容正在其中。这是绝对重复的应用，且符合视觉流动习惯。而同一个新闻文章列表各个链接，在点击进入后，显示布局排版重复而信息内容迥异的新闻文章页面，又是相对重复的效用。

2.2.2渐变构成

渐变能够体现基本形的有规律变动，具有韵律感、节奏感。在网页设计中，渐变的应用也很普遍，如很多网站的背景色采用从上到下的渐变过程。渐变不能过快，否则缺少连贯性，也不能过慢，重复累赘，应以能够体现空间透视的韵律感为准。除了背景色，网页中的渐变还可用来表现视觉元素如图片、文字的大小、位置、疏密、方向等。与静态媒介的渐变不同，网页可以通过编程的方式动态的呈现渐变过程。如在某种情境触发下，使网页视觉元素位置、透明度、色彩、大小、粗细等属性发生变化。此时的网页鲜活生动，运动感十足又兼具灵性的。人们的操作体验也会增分不少。

2.2.3对比构成

对比作为一种自由的构成方式，利用特定的参照体系，突出显示视觉对象之间或模糊或明确、或简单或复杂的差异性。利用对比，形成层次感和视觉冲击力。通常，网站logo的用色与整体页面的用色产生强烈的对比，才能够使其不至于迷失在网页的具体内容中。又如在网上购物网站中，正在低价热销的产品会突出显示，和普通产品会形成鲜明对比，紧紧抓住顾客的眼球，充分吸引了人们注意力的焦点。以google首页为例，大量的留白使得处于中央区域的检索词输入框和Logo等主要信息异常突出。且搜索按钮是页面中最大的可点击元素，正说明了用户对它的使用率远远超出了其他链接或按钮。

3结语

网页设计是一种受限的艺术形式，平面构成的知识技能更显重要。对于高职艺术设计类专业教学而言，如何在网页设计中自觉贯彻传统的平面构成，尤其是针对网页平面视觉设计的特点，灵活运用诸如点线面、对比渐变等手法，使学生迅速的在网页上实现自己的创意设想，将美学与科学，艺术与技术进行完美的糅合，最终设计出叫好又叫座的作品，是一个不断深入探讨的课题。

作者：李翠轻郭军城董龄烨单位：石家庄铁路职业技术学院河北交通职业技术学院