自由造型的网页外观设计研究

邓铁桥

[摘要]随着计算机技术的飞速发展,网页设计风格日趋多样化和个性化,新的观念、新的手法不断涌现出来。根据主题表现的需要,某些追求丰富视觉效果、采用大量图片文件的版面出现在我们的视野中,这些或动或静的图片经过灵活剪裁、合理布局创造出各种新颖的形式。其中较引人注目的是网页外观的自由造型设计。这种设计打破单一方形外框的格局,形态生动,特色鲜明,它的出现,丰富了作品的视觉表现力,为网络世界增添了多彩的一笔,值得我们去深入研究与探讨。

[关键词]网页 外观设计 虚拟 风格

自由造型的外观设计在手法上是善于突破传统的,但这种突破并不天马行空,技术要素与题材适应的约束总贯穿于整个创作过程,在一定的限制条件下如何发挥美感与创意的强大感召力,这就需要我们去认真思考了。以下,笔者将介绍几种网页外观中自由造型的常见形式,分析它们整合与变化的手法,综合其中的构造规律,或许从中能给我们的创作带来某些灵感与启发。

一、仿物风格

仿物风格的外观设计是将页面的视觉元素,包括内文、图片、视频等都安置在物件模型或模型组合中,常见的模型有包装盒、电唱机、显示器、台历等。这些设计巧妙地处理了外包装与信息承载之间的关系,特别是在一些仿电器外观的页面中,设计师总喜欢巧妙地将网页功能按钮与模型结构性按钮结合起来,如调音台刻度盘、手机按键等往往就是嵌藏网页导航区域的玄机处,既人性化又富趣味性。仿物式外观的模型大部分是带立体效果的。这立体的表现,一靠结构的纵深度描绘,二靠光的合成,两者的共同作用模拟出真实空间中的形体,从观感上来讲,一开始就能给浏览者贴近生活的可亲印象,极具吸引性。立体物造型的外观在制图时是非常注重细节描绘的,形的刻画、色彩的变化及质感的处理时常都要照顾周全,可见,写实能力从中起到非常重要的作用。另一方面,我们看到的立体模型是置身于一定虚拟环境的,背景的处理必然与非三维的效果有所不同,它不是简单的衬底,而是一个有空间关系的场景,光的作用下,场景本身可以显现明暗变化,物体在其中也会投射影的效果,因此在设计中,我们要提高对它的重视程度,不可简单概念化地对待。此外,在接近平面的仿物模型中,较具代表性的是包装盒风格,它在结构上完全仿造平摊的纸盒印刷稿,虽然布局特殊,但根据信息量大小能灵活调整盒子的块面比例,而且有区域自然划分的优势,所以总体上一般都能保持大方整齐的特点。某些包装盒式的设计在边沿处还添加了轻微的光影,实实在在地增加了一些空间的感觉,这也是用以丰富画面的一种简捷的手法,对此类造型偏平的物件表现显得特别有效。

二、方框破形

方框破形的手法,以四方外形为基础,加上一定的形体剪切或配以图片进行调整与修饰,使得外轮廓克服单一的四直线加四直角的组合局限,在细节上作形的突破,但整体上仍保留方块的影响。事实上,它属于整体归一而局部变化的处理,作为变化的部分既要发挥破形的作用,在平淡中寻得新奇意趣,也要注意整体效果的维护,切忌零碎散乱。方框破形的方法很多,其中用得比较多的有:图的穿插、按钮的特殊设计、边缘机理。是以图片作为突破点,冲出方形框造出特异的外形,作破形的图片在处理的时候,经常是抠去背景来使用,以局部外形的不规则对比原直线直角营造的整齐与严谨。在这里,被突出的图片是视觉的焦点部位,所以对其所占比例、呼应关系等要求都比较高,否则容易有粗糙牵强的感觉。按钮的特殊设计,是将处于布局边缘的按钮作为变化的对象,单个按钮的形状可方可圆,又可不规则地成形,至于成组的按钮根据不同的需要,排列上既可呈散点式,也可呈规律式,它们在方形框边缘上等于是一个天窗,面积不大但十分生动灵气,自身精致化的同时又丰富了大外形。边缘机理,是在方框边缘添加机理效果的手法,将坚挺锋利的直线以非规则的纹理或笔触进行改造,原本平滑的外形变得或凸或凹,凹凸幅度相对大的部分也可以起到一定程度的变形作用。我们常见的边缘机理有水溅、碎纸、火烤、干笔触等,它们各有特色,用法灵活,有方便调整的优点。

三、边框虚化

边框的虚化,并不等于没有边框,有时只是潜藏起来而已。内容只占据了浏览器3/5的份额,没有占满所有的空间。从内容的摆放位置看,人的视觉习惯带领着我们从菜单的右侧末端垂直往下形成边线,而主形象下端因为没有具体内容,所以也可认为是到了页面的边缘了。因此,我们判断有效的页面编排是紧贴左上方对齐,往下往右2/3处以外的空余部分则属于背景。由于浏览器背景是白色,具体画面的底也没有作色彩的区别处理,因此视觉上连成一片,网页的边呈虚化的状态,它并不出现在画面,但可以让观众感觉到它的存在。这种隐藏了外边缘的页面设计在实际应用中并不少见,其特点是页面有效范围不充满浏览器,内容大多居中或往上往左对齐,与背景间没有明确的界线,根据位置处于边缘处的各种元素其位置的视觉引导,可联结成虚拟的外轮廓。这种虚化边框的处理与满屏的编排在表面效果上似有雷同,但本质区别在于考虑构图时的版面范围不同,一个只占浏览器的局部面积,一个则布满整个图面,它们的空白区域担任着不同的版面职能,页面各元素的呼应关系也不一样,因此,我们不能简单地把这两种布局方法等同起来。其实,边框虚化的处理手法是网页特殊技术条件下的产物,让屏幕在不同分辨率设置下浏览起来不会产生太大差异,但若使用不当容易造成排版不完整的感觉,因此,我们在设计的时候,应该看实际采取灵活的资源配置手法,不可牵强附会过于僵化。

在自由造型网页外观中,除了以上三种常见形式外,其实还有很多有特点的类型,如半开放式、外形倾斜式等,它们在设计上没有固定的模式,但新意往往隐藏在不经意的细节变化中。这就需要我们仔细观察、善于发现与学习,才能领悟其中的奥妙,掌握其中的技巧。

四、结语

网页外观相当于网络的一张面孔,前卫、浪漫还是方正、严谨,都一一体现于此,自由造型生动展现了设计师的过人智慧,也淋漓尽致地发挥了网络在信息传递中的强大作用。众所周知,当今的网络技术正以高速不断更新和进步,随之也推动了艺术手法的创新与发展,可实现的媒体效果也随之增多,未来的网页外观造型必然会以更丰富多彩的形式展示于众,开放的心态、善于学习与创新的精神是时代对我们的要求,更多更炫目的视觉精彩正翻开着网络世界的新篇章。

参考文献:

[1]王令中.视觉艺术心理[M].人民美术出版社,2006.

[2](美)鲁道夫•阿恩海姆.艺术与视觉[M].中国社会科学出版社,1984.

[3]蓝先琳.平面构成[M].中国轻工业出版社,2005.