《自由造型的网页外观设计》由会员分享，可在线阅读，更多相关《自由造型的网页外观设计（5页珍藏版）》请在金锄头文库上搜索。
1、自由造型的网页外观设计在过去传统的网页外观设计中，方形轮廓根本是占主导地位的，但随着技术的进步，如今出现了不少造型各异的新款式，带给我们视觉惊喜的同时也传递了新的设计观念。对于这种自由造型的网页外观设计，文章从几个层面分析了它的特点，并介绍了主要的表现形式，希望通过探究其中的方法和思路，激发出我们的灵感和新的创造力。题记随着计算机技术的飞速开展，网页设计风格日趋多样化和个性化，新的观念、新的手法不断涌现出来。根据主题表现的需要，某些追求丰富视觉效果、采用大量图片文件的版面出如今我们的视野中，这些或动或静的图片经过灵敏剪裁、合理布局创造出各种新颖的形式。其中较引人注目的是网页外观的自由造型设计。
2、这种设计打破单一方形外框的格局，形态生动，特色鲜明，它的出现，丰富了作品的视觉表现力，为网络世界增添了多彩的一笔，值得我们去深化研究与讨论。需要注意的是，这里讲的网页外观，空间上受限于阅读器，但造型上并不等同于阅读器的方框形，通过特殊设计，它可以拥有个性化的表现形式，即自由造型。现今，由于宽带上网的普及，网页设计师碍于下载速度而严格控制图片数量与质量的情况有所改善，许多漂亮的视觉元素被解禁出来，这样便有效地扩大了设计的可调配资源。而另一方面，个人电脑屏幕的加宽与分辨率的进步，增大了版面的信息包容量，页面内容不需要顶天立地式地占满整个屏的空间，大面积空白自留地的允许存在也为自由造型创造了条件，于
3、是，许多生动的视觉形象被创造出来。自由造型的外观设计是有其自身特点的，主要表达在意念传达、题材适应、版面显示及造型规律几个方面。第一，网页外观本身不仅仅是装载内容的外壳，它可以一定程度地传达信息，表达意念，而自由造型显然更利于这种作用的发挥。在技术条件允许下，形的多样化有赖于大量图片文件的构合，文字信息相应地减少，图片作为传情达意的重要工具，其优点在于表达上的直截了当又生动鲜活。而外观的整体特征通常又是阅读者的第一着眼点，不可无视的重要性迫使设计师需要煞费苦心地去创造各种别致的造型，区别于传统的方面孔，力求从主题宣传出发，以个性化设计求得视觉上“开门见山的传达效果。第二，在题材适应方面，自由造
4、型的外观设计多用于气氛轻松、休闲的网站。一般情况下，商务资讯或综合门户类的网站其设计风格都要求简便实用，简的原那么要求去除不必要的装饰，以方便信息更新，并获得最高的空间使用率，这使得设计容易倾向方形的块面处理，给人严谨、可靠和专业的印象。与之不同的是，某些追求创新、时尚、娱乐效应的网站，其设计为了衬托主题，大胆地放开了束缚，不惜使用各种装饰手法制造视觉亮点，以兴趣性和新奇性去吸引阅读者的青睐，于是，不拘一格的自由外形设计被广泛应用于此。第三，自由造型的外观设计更多地使用阅读器第一屏显示的设置。网页外观的造型有时本身就是特定的场景或有个体意义的形，假如主体形象过宽或过长，需要滑动滚动条才能看到全
5、部的内容，整体性将被大打折扣，影响了视观感受。其实，这里提到的自由造型第一屏显示，除了页面所有内容仅限于单屏，不出现滚动条的情况外，还有另一种特殊形式，即长条形多屏显示的页面中，形体变化丰富的部分被集中在第一屏中展示出来。好的设计总是讲究节奏排布的，内容比拟多的长页面不管可滚屏的空间有多大，也不可能在外轮廓上出现同等幅度且连续不断的造型变化，轻重缓急、疏密松紧总需要有度地安排。因此，这种页面的设计常常在开头部分，即在第一屏内进展大力度的外形加工，以下的部分那么边缘上相对地平整，变化减少。开头的重点突出有利于网站标题、企业形象等主要信息的渲染和强调，而后的简洁处理又为视觉提供了休息的时机，让读者
6、阅读起来既享受图形乐趣又不失感官舒适度。第四，自由造型加强了对曲线与斜线的运用，而区块的错落叠加也是外形变化的常用手法。毫无疑问，曲线和斜线具有极强的表现力，曲线能给画面营造出活泼、轻松与飘逸的视觉效果，而适度的斜线那么带来速度、果断与敏锐的感觉。但应用的时候，它们消耗的空间都比拟多，在过去惜土如金的传统设计中总是限制性地使用，不过在新的技术条件支持下，自由造型的设计给予了它们前所未有的施展空间，最终得以大显身手崭露头角。此外，不同的功能区块做成上下层叠的效果也是自由造型的一种有效的创作手法，这些区块在边缘处并不完全对齐而形成的错落，让本来单一的长直线边缘变成折线的组合，同时，从中增加的边角位
7、也正好可以放置饰线、图标、光影等小元素，于是，丰富效果就出来了。自由造型的外观设计在手法上是擅长打破传统的，但这种打破并不天马行空，技术要素与题材适应的约束总贯穿于整个创作过程，在一定的限制条件下如何发挥美感与创意的强大感召力，这就需要我们去认真考虑了。以下，笔者将介绍几种网页外观中自由造型的常见形式，分析它们整合与变化的手法，综合其中的构造规律，或许从中能给我们的创作带来某些灵感与启发。一、仿物风格仿物风格的外观设计是将页面的视觉元素，包括内文、图片、视频等都安置在物件模型或模型组合中，常见的模型有包装盒、电唱机、显示器、台历等。这些设计巧妙地处理了外包装与信息承载之间的关系，特别是在一些仿
8、电器外观的页面中，设计师总喜欢巧妙地将网页功能按钮与模型构造性按钮结合起来，如调音台刻度盘、按键等往往就是嵌藏网页导航区域的玄机处，既人性化又富兴趣性。仿物式外观的模型大部分是带立体效果的如图1。这立体的表现，一靠构造的纵深度描绘，二靠光的合成，两者的共同作用模拟出真实空间中的形体，从观感上来讲，一开场就能给阅读者贴近生活的可亲印象，极具吸引性。立体物造型的外观在制图时是非常注重细节描绘的，形的刻画、色彩的变化及质感的处理时常都要照顾周全，可见，写实才能从中起到非常重要的作用。另一方面，我们看到的立体模型是置身于一定虚拟环境的，背景的处理必然与非三维的效果有所不同，它不是简单的衬底，而是一个有
9、空间关系的场景，光的作用下，场景本身可以显现明暗变化，物体在其中也会投射影的效果，因此在设计中，我们要进步对它的重视程度，不可简单概念化地对待。此外，在接近平面的仿物模型中，较具代表性的是包装盒风格如图2，它在构造上完全仿造平摊的纸盒印刷稿，虽然布局特殊，但根据信息量大小能灵敏调整盒子的块面比例，而且有区域自然划分的优势，所以总体上一般都能保持大方整齐的特点。某些包装盒式的设计在边沿处还添加了细微的光影，实实在在地增加了一些空间的感觉，这也是用以丰富画面的一种简捷的手法，对此类造型偏平的物件表现显得特别有效。二、方框破形方框破形的手法，以四方外形为根底，加上一定的形体剪切或配以图片进展调整与修
10、饰，使得外轮廓克制单一的四直线加四直角的组合局限，在细节上作形的打破，但整体上仍保存方块的影响。事实上，它属于整体归一而部分变化的处理，作为变化的部分既要发挥破形的作用，在平淡中寻得新奇意趣，也要注意整体效果的维护，切忌零碎散乱。方框破形的方法很多，其中用得比拟多的有：图的穿插、按钮的特殊设计、边缘机理。图的穿插如图3是以图片作为打破点，冲出方形框造出特异的外形，作破形的图片在处理的时候，经常是抠去背景来使用，以部分外形的不规那么比照原直线直角营造的整齐与严谨。在这里，被突出的图片是视觉的焦点部位，所以对其所占比例、照应关系等要求都比拟高，否那么容易有粗糙牵强的感觉。按钮的特殊设计如图4，是将
11、处于布局边缘的按钮作为变化的对象，单个按钮的形状可方可圆，又可不规那么地成形，至于成组的按钮根据不同的需要，排列上既可呈散点式，也可呈规律式，它们在方形框边缘上等于是一个天窗，面积不大但非常生动灵气，自身精致化的同时又丰富了大外形。边缘机理如图5，是在方框边缘添加机理效果的手法，将坚硬锋利的直线以非规那么的纹理或笔触进展改造，本来平滑的外形变得或凸或凹，凹凸幅度相对大的部分也可以起到一定程度的变形作用。我们常见的边缘机理有水溅、碎纸、火烤、干笔触等，它们各有特色，用法灵敏，有方便调整的优点。三、边框虚化边框的虚化，并不等于没有边框，有时只是潜藏起来而已。如图6中的页面，内容只占据了阅读器3/5
12、的份额，没有占满所有的空间。从内容的摆放位置看，人的视觉习惯带着着我们从菜单的右侧末端垂直往下形成边线，而主形象下端因为没有详细内容，所以也可认为是到了页面的边缘了。因此，我们判断有效的页面编排是紧贴左上方对齐，往下往右2/3处以外的空余部分那么属于背景。由于阅读器背景是白色，详细画面的底也没有作色彩的区别处理，因此视觉上连成一片，网页的边呈虚化的状态，它并不出如今画面，但可以让观众感觉到它的存在。这种隐藏了外边缘的页面设计在实际应用中并不少见，其特点是页面有效范围不充满阅读器，内容大多居中或往上往左对齐，与背景间没有明确的界限，根据位置处于边缘处的各种元素其位置的视觉引导，可联结成虚拟的外轮
13、廓。这种虚化边框的处理与满屏的编排在外表效果上似有雷同，但本质区别在于考虑构图时的版面范围不同，一个只占阅读器的部分面积，一个那么布满整个图面，它们的空白区域担任着不同的版面职能，页面各元素的照应关系也不一样，因此，我们不能简单地把这两种布局方法等同起来。其实，边框虚化的处理手法是网页特殊技术条件下的产物，让屏幕在不同分辨率设置下阅读起来不会产生太大差异，但假设使用不当容易造成排版不完好的感觉，因此，我们在设计的时候，应该看实际采取灵敏的资源配置手法，不可牵强附会过于僵化。在自由造型网页外观中，除了以上三种常见形式外，其实还有很多有特点的类型，如半开放式、外形倾斜式等，它们在设计上没有固定的形
14、式，但新意往往隐藏在不经意的细节变化中。这就需要我们仔细观察、擅长发现与学习，才能领悟其中的微妙，掌握其中的技巧。结语网页外观相当于网络的一张面孔，前卫、浪漫还是方正、严谨，都一一表达于此，自由造型生动展现了设计师的过人智慧，也淋漓尽致地发挥了网络在信息传递中的强大作用。众所周知，当今的网络技术正以高速不断更新和进步，随之也推动了艺术手法的创新与开展，可实现的媒体效果也随之增多，将来的网页外观造型必然会以更丰富多彩的形式展示于众，开放的心态、擅长学习与创新的精神是时代对我们的要求，更多更炫目的视觉精彩正翻开着网络世界的新篇章。参考文献：1梁景红编著网页设计思维电子工业出版社，2022年2月2韩姜恩正、黄静慧著，周钦华译设计师谈成功网页设计原那么电子工业出版社，2022年12月3李乐山著人机界面设计科学出版社，2022年8月
