国际主义风格在网页设计中的运用

　　第 3  章 国际主义风格在网页设计中的运用

　　3.1 国际主义中的数学思维。

　　网页设计在设计中使用的几何分析方法和数学的比例达到了前所未有的高度，对页面的分寸感的特点，秩序感，有连续性的，清晰的。从历史的记载来看自然造物和人造物中都存在比例关系、数学逻辑关系，并且人类存在对各种比例的认知偏好。19 世纪后期，德国心理学家 Gustav fesina（古斯塔夫·费希纳）从矩形对象如几种测量：

　　图书，报纸，建筑物的测试盒，试验结果得出大部分人更喜欢接近黄金分割比例的矩形物。

　　3.1.1 黄金分割比例。

　　黄金分割比例是网页设计中最基础的一个理论依据，在网页设计中运用黄金分割比例来规划版面，可以打破网页所带来的死板的局面，使版面变的生动。黄金分割是指将整体一分为二，较大部分与整体部分的比值等于较小部分与较大部分的比值，其比值约为 0.618.这个比例被公认为是最能引起美感的比例，因此被称为黄金分割。在黄金矩形中分割可形成更小的黄金矩形，并且可以无限分割。黄金分割的审美比例标准在欧洲古希腊时期已经形成，如巴特农神庙（Partenon）的建造就使用了这种比例关系，并且这种用于空间分割的比例手法被证明是当时最美的比例。朱光潜在其对黄金分割的评说中讲到"黄金分割一方面是整齐的，因为两边都是相等的；一方面是不断变化的，相对于分别对两侧相邻的长度来说。长边比短长度的形式很多，且长边的黄金地段，是正确的，因此能引起最美的视觉感受。另一方面，它能使人产生愉悦，这是因为有一个在人的潜意识的黄金分割比例，它是快乐的源头。"总体来说黄金分割比例是一种适度的美。

　　如这个是我设计的一家家具装饰的网站，在整理布局上我采用了标准的黄金比例。使得整个布局中各元素之间比例适当、大小相宜、恰到好处合理，科学。

　　3.1.2 德国标准尺寸比例。

　　德国标准尺寸比例也是国际主义网页设计中的一种重要的比例关系。德国标准比例的基础首先是求取一张长宽比为√2 且面积为 1 平方米（m?）的纸张。因此这张纸的宽长分别为 841 毫米和 1189 毫米（长宽比为√2:1），并且编号为 A0.若将 A0 纸张的长边对切为二，则得到两张 A1 的纸张，其宽长均为 594 毫米和 841 毫米。依此方式继续将 A1 纸张对切，则可以依序得到 A2、A3、A4 等等纸张尺寸。在制定标准时，尺寸均以整数为准，因此对切的纸张尺寸若带有小数（小于 1 毫米）则会舍入计算。下面案例网页设计中的就是参考了德国标准尺寸的比例设计。在这个二级页面的设计中，我采用了德国标准尺寸的布局形式。

　　3.2 网页设计中布局类型。

　　布局作为设计的前期工作之一，充当着束缚物的角色，布局的形式决定了版面的最终效果，方式不一的布局结构，最终体现了不用的功能作用和视觉效果的。

　　3.2.1 模块布局。

　　模块布局是指以正方形为一个单元，在版面设计中不断的重复排列所得到的布局形式。因为模块布局以正方形为基本单位所构成，所以又被称为正方形布局。我在这个网页设计中如图采用了模块布局也是网页设计中使用最普遍、最基础的形式之一。模块布局的优势在于可以把众多信息，图片以及需要展示给观众的元素有效的排列起来，这样的页面布局科学和合理。

　　3.2.2 突破型布局。

　　突破型布局是指以不规则变化的形态去打破布局版面过于平稳的格局。在保持整体布局统一的前提下，对局部元素做一些处理，比如：在下面这个网页设计中，我在保持大的布局的对称性的同时，用文字元素打破了死板的排版方式，使得网页版面中的文字元素更加吸引眼球突出了信息的重点。突破型的布局方式多应用于科技网站和体育类型的网页设计中，这种类型的网站能够更好的发挥突破型布局的运动的特性。

　　3.2.3 异形布局。

　　不规则布局是指由非水平的交叉点的形成和非垂直线的网络结构的基本布局的变化。 异形布局实际上是在有意的违背人们平时的阅读方式，以达到吸引观众注意力的设计效果。异性布局使能够允许大的变化存在的复杂的布局形式之一，异性布局体现了设计的自由理念。

　　我在完成异形布局的这个网页设计中（图 3-8）在设计的局部上少量运用动态的图形元素，如六边形给人活跃气氛的感受。有时在设计中我们会过多的使用异形布局，这样造成的后果可能是信息混乱，视觉效果上杂乱无章。

　　3.3 网页设计的应用。

　　要设计出一个优秀的网页版面，其中的文字要素要容易阅读；图片元素要具有强烈的视觉冲击力；同时注意页面的留白；因此优秀合理的网页设计中具有以下共同的特点：无衬线字体、非对称的版面、特殊处理的版面空白、左对齐的方式、具有比例关系和几何化的图片结构。

　　3.3.1 网页设计与无衬线字体。

　　无衬线体（Sans-serif）专指西文中没有衬线的字体，与汉字字体中的黑体相对应。

　　与衬线字体相反。该类字体通常是机械的和统一线条的，它们往往拥有相同的曲率，笔直的线条，锐利的转角。

　　我采用了无衬线字体表达信息，虽然不是很明显，但是同样成功的增强了可阅读性。无衬线字体的圆滑的笔画边缘更易于识别，因此成为广告和海报中最常用的字体。

　　3.3.2 页面布局中"空白空间".

　　所谓留白，有时也称作负空间，两者是同一个概念。尽管这个术语尤其指留"白",但它所指的区域并不一定要是白色的。它只是网页布局中环绕各元素的空白空间。这样的空间体现为多种不同形式，例如图片、图表、缝隙、外边距、列甚至一行行文字之间的空间。尽管它似乎"空无一物",里面没有任何其他设计元素占据一席之地，但我们不应该如此看待它。视之为"无物",也许打造美感与表现力的机会就流失了。

　　处理得当的话，留白确实可以为网页设计带来大量的益处。不应减少网页设计中的留白，相反，应该增加网页中的负空间。一些知名的大众品牌已经在朝这个方向前进，更多的设计师们也在追随他们的脚步。如图 3-10 用好留白图中网站的可读性与易读性都会得到改善。如果一个页面上的文字过于拥挤，它就会妨碍舒适的阅读体验，从而阻碍整体用户体验。更多的留白使文字更易浏览，从而提升阅读体验，也更易理解。