干货分享:网页设计+黄金比例
什么是黄金比例？
通常我们会用线段分割来解释这个概念:一条线段分为两部分，较短部分的长度与较长部分的长度之比等于较长部分的长度与整个长度之比，该比是一个无理数，前三位的近似值为0.618。因为这种比例往往能给设计带来和谐与美感，所以人们称之为“黄金”比例(或黄金分割、中外比等。).
黄金比例被沿用了几千年，从埃及的金字塔到雅典的帕台农神庙，从米开朗基罗的西斯廷教堂到达芬奇的蒙娜丽莎，从推特的Logo设计到百事可乐的Logo设计，甚至人的面部都遵循这个数值比例。事实上，似乎我们天生更容易被黄金比例的物体和图片所吸引。这种反应几乎是下意识的，我们的大脑甚至会微调我们眼睛看到的东西以接近黄金比例，加深我们对事物的记忆和印象。黄金比例也可以应用于图形。最典型的就是黄金螺旋，也叫斐波那契螺旋。自然界中有很多斐波那契螺旋图案:蕨茎、花朵、贝壳甚至飓风。
那么如何利用黄金比例来提升网站中的设计美感呢？因为黄金比例是以各种形式呈现的，所以我们可以在版面、间距、内容、图像、图形中使用。
1.布局:将页面大小设置为黄金比例。
在版面中使用黄金分割比例是非常有效的。重点是控制比例和大小，把握0.618的黄金比例。例如，如果您使用960px的宽度布局，将它乘以0.618，得到594px，这是页面布局的高度。在此基础上，你可以把整个布局分成一列正方形和一列长方形，更直观地呈现黄金分割，让网站更有吸引力。这种两栏布局在网页设计中非常实用，很多网站都选择这种设计方式。就连知名的《国家地理》杂志也是如此。整个页面看起来整洁易读，元素组织有序，用户浏览会更加流畅。
2.间距:采用黄金螺旋布局。
间距和空白一样，是设计中的一个关键因素。合理的间距有利于突出网站的核心内容，使网站的布局更加协调，而间距不当则会影响用户体验和网站的品牌形象。同时，在网站中做一个合理的间距往往需要花费大量的时间。那么如何才能快速高效的安排网页的间距呢？使用黄金螺旋是个不错的选择。借助图形，合理放置各个元素，让网站间距按照精心计算的比例排版，而不仅仅是凭直觉。另外，如果是同时处理多个元素，还可以将黄金螺旋分层，让网页的比例设计更加协调。
Moodley设计工作室是一个模特，它为Bray gnc艺术节设计了海报、节目和标志。节目整体设计采用摄影图片拼贴的方式，大量留白，各种元素的设计比例、位置、留白借助黄金螺旋进行排列。
新加坡的LemonGraphic设计公司在为Terkaya财富管理公司设计视觉形象时也使用了黄金螺旋布局。卡上三要素:小鹰号、文字、老鹰的位置都是建立在合理的基础上的。
3、内容:沿着黄金螺旋的轨迹。
除了借助黄金螺旋来安排网站的间距，我们还可以用它来确定网页内容的位置。根据黄金螺旋定理，人的眼睛总是不自觉地关注螺旋的中心，所以我们要关注螺旋的中心，把用户可能感兴趣的最重要的内容放在这里，让访问者更容易获取信息。另外，更重要的信息要放在螺旋内部，这样更醒目。这里有三个相关的例子:
以国家地理杂志的网页为例。如果你仔细观察它的主页，你会发现它的内容是按照黄金螺旋的轨迹排列的。因为人们可能会下意识地关注这个轨迹的中心，《国家地理》杂志将其标志放在这里，再次凸显了品牌形象。网站中的其他重要元素也包含在螺旋中。
TimRoussilhe设计师的网站也是。虽然网站的内容和信息很多，但是网站的整体布局非常紧密，信息组织非常有条理，元素很多而不混乱。左上角的内容是按照黄金螺旋的轨迹设计的。访客在登录的瞬间会看到“BonjourMyNameisTim”的字样，然后是详细的文字、菜单按钮和左上角的Logo。用户在注意到足够的空白空间之前，已经浏览了所有必要的信息，这就是设计的目的。
赫尔姆斯工作室在为FullsteamBrewery设计品牌的时候，也是借助黄金螺旋来编排网站内容的。各种元素被放置在不同的区块中，参观者可以沿着中心人物、印章、ABV人物和制造商所在地的轨迹进行浏览。这种浏览体验自然又方便。
4.图片:黄金比例和三角学
图片的构图也很重要，无论图片是服务于信息传递的目的，还是审美呈现的目的。在图片中运用黄金分割和三等分，可以利用线条和交点来构建视觉中心，使其更加醒目，突出重要信息。在一张图片中使用黄金分割比例，就是把图片分成三个不相等的块，三个块的比例应该是1:0.618:1，也就是说第一列和第三列的宽度是1，而第二列的宽度是0.618，水平区域也是如此。这样我们就可以通过这些线条或者交叉点来合理的安排图片的位置和大小，看看如何吸引用户的注意力，增加趣味性和活力。除了黄金比例，我们还可以用三分法来切割图片。从某种意义上说，二分法是黄金分割法的变体，用起来更简单。它以1:1:1的比例将画面分成三等份，使画面完全均衡、均匀。这样，我们可以将重要的元素排列在中心矩形周围。
Complex杂志的封面是女演员SolangeKnowles的特别写照。它利用黄金分割比例，合理安排画面中的正空间和负空间。人物的鼻子和眼睛正好落在线条的交叉点上，这是吸引游客注意力的理想位置。
JasonMildren在设计《飞行员》杂志封面的时候，用三分法来构建视觉重心。图中模特的眼睛、拇指、手臂轴线都在视觉重心上，人物位于右下方，左上方留白，既突出了重点，又达到了和谐统一。
5、图形:黄金比例圆
正如黄金分割可以用来创建一个比例矩形，它也可以用在一个圆上。完美的圆应该遵循0.618的比例。下面我们就以百事可乐和推特的Logo来仔细分析一下黄金比例圆在网页设计中的应用吧！
百事可乐的标志由两个相交的黄金比例圆组成。虽然较小的圆圈在重叠部分不那么显眼，但确实为Logo中间的白色块奠定了基础。Twitter的Logo设计是借助几个黄金比例圆来构建的，但是在使用黄金比例圆的时候，并没有使用相邻的比例圆来构建。乍一看可能不够准确，但同样和谐。
黄金比例不仅可以使网站中的元素独立存在，还可以协调地将它们串联起来。在网站中巧妙地运用黄金比例，会让我们的网站设计更加优秀。
网页设计