自由造型的网页外观设计

在过去传统的网页外观设计中，方形轮廓基本是占主导地位的，但随着技术的进步，如今出现了不少造型各异的新样式，带给我们视觉惊喜的同时也传递了新的设计观念。对于这种自由造型的网页外观设计，文章从几个层面分析了它的特点，并介绍了主要的表现形式，希望通过探索其中的方法和思路，激发出我们的灵感和新的创造力。

——题记

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

需要注意的是，这里讲的网页外观，空间上受限于浏览器，但造型上并不等同于浏览器的方框形，通过特殊设计，它可以拥有个性化的表现形式，即自由造型。现今，由于宽带上网的普及，网页设计师碍于下载速度而严格控制图片数量与质量的情况有所改善，许多漂亮的视觉元素被解禁出来，这样便有效地扩充了设计的可调配资源。而另一方面，个人电脑屏幕的加宽与分辨率的提高，增大了版面的信息容纳量，页面内容不需要顶天立地式地占满整个屏的空间，大面积空白自留地的允许存在也为自由造型创造了条件，于是，许多生动的视觉形象被创造出来。

自由造型的外观设计是有其自身特点的，主要体现在意念传达、题材适应、版面显示及造型规律几个方面。

第一，网页外观本身不仅仅是装载内容的外壳，它可以一定程度地传达信息，表达意念，而自由造型显然更利于这种作用的发挥。在技术条件允许下，形的多样化有赖于大量图片文件的构合，文字信息相应地减少，图片作为传情达意的重要工具，其优点在于表达上的直截了当又生动鲜活。而外观的整体特征通常又是浏览者的第一着眼点，不可忽视的重要性迫使设计师需要煞费苦心地去创造各种别致的造型，区别于传统的方面孔，力求从主题宣传出发，以个性化设计求得视觉上“开门见山”的传达效果。

第二，在题材适应方面，自由造型的外观设计多用于气氛轻松、休闲的网站。一般情况下，商务资讯或综合门户类的网站其设计风格都要求简便实用，简的原则要求去除不必要的装饰，以方便信息更新，并获得最高的空间使用率，这使得设计容易倾向方形的块面处理，给人严谨、可靠和专业的印象。与之不同的是，某些追求创新、时尚、娱乐效应的网站，其设计为了烘托主题，大胆地放开了束缚，不惜使用各种装饰手法制造视觉亮点，以趣味性和新奇性去吸引浏览者的青睐，于是，不拘一格的自由外形设计被广泛应用于此。

第三，自由造型的外观设计更多地使用浏览器第一屏显示的设置。网页外观的造型有时本身就是特定的场景或有个体意义的形，如果主体形象过宽或过长，需要滑动滚动条才能看到全部的内容，整体性将被大打折扣，影响了视观感受。其实，这里提到的自由造型第一屏显示，除了页面所有内容仅限于单屏，不出现滚动条的情况外，还有另一种特殊形式，即长条形多屏显示的页面中，形体变化丰富的部分被集中在第一屏中展示出来。好的设计总是讲究节奏排布的，内容比较多的长页面不管可滚屏的空间有多大，也不可能在外轮廓上出现同等幅度且连续不断的造型变化，轻重缓急、疏密松紧总需要有度地安排。因此，这种页面的设计常常在开头部分，即在第一屏内进行大力度的外形加工，以下的部分则边缘上相对地平整，变化减少。开头的重点突出有利于网站标题、企业形象等主要信息的渲染和强调，而后的简洁处理又为视觉提供了休息的机会，让读者浏览起来既享受图形乐趣又不失感官舒适度。

第四，自由造型加强了对曲线与斜线的运用，而区块的错落叠加也是外形变化的常用手法。毫无疑问，曲线和斜线具有极强的表现力，曲线能给画面营造出活泼、轻松与飘逸的视觉效果，而适度的斜线则带来速度、果断与敏锐的感觉。但应用的时候，它们消耗的空间都比较多，在过去惜土如金的传统设计中总是限制性地使用，不过在新的技术条件支持下，自由造型的设计给予了它们前所未有的施展空间，最终得以大显身手崭露头角。此外，不同的功能区块做成上下层叠的效果也是自由造型的一种有效的创作手法，这些区块在边缘处并不完全对齐而形成的错落，让原本单一的长直线边缘变成折线的组合，同时，从中增加的边角位也正好可以放置饰线、图标、光影等小元素，于是，丰富效果就出来了。

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

一、仿物风格

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

二、方框破形

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

三、边框虚化

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

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

结语

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

参考文献：

[1]梁景红编著．网页设计思维．电子工业出版社，2007年2月．

[2]（韩）姜恩正、黄静慧著，周钦华译．设计师谈成功网页设计原则．电子工业出版社，2006年12月．

[3]李乐山著．人机界面设计．科学出版社，2004年8月．