首页 > 文章中心 > 正文

平面构成与网页设计研讨

平面构成与网页设计研讨

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结语

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

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