开发技巧:网页设计中的黄金比例

在网页设计发展到一定阶段的时候就必然会和其他学科或领域只是产生交汇和共鸣，在阅读《超越CSS：web设计艺术精髓》这本书的时候，发现原来web设计还可以这样。比较突出的例子是现在经常被设计师提到的网页栅格设计，TAOBAO UED曾经探讨过这个问题，通过很有逻辑性的公式换算加上一定的数学分析，得到对网页设计有建设性的概念指导，从一定程度上说算是一种创新。

也许有的设计师会认为使用这些所谓的规范性东西会是一种限制而不是创造，在我看来这些新的概念对网页设计来说是一种尝试和提升，会给你接下来的创意构思提供一个坚实的基础，让人从一个新的视角来看待好的网页设计。

在《超越CSS》这本书中，就提到了网页设计中的黄金比例这个概念。对于很多做设计的人来说，黄金比例并不陌生，它是最符合自然界美感的一个很神奇的东西，在古希腊的艺术雕塑中频频体现出来。对于我们网页设计师来说，只要记住一个数字就可以了：“1.62”，以950局中的页面为例：

我们要为一个950px宽度局中页面来设计栏目，根据黄金比例原则，可以这样设计：这样的Web布局具有一定的平衡感，整个页面也比较和谐。

现在的页面布局一般都是比较弹性的设计，因为这样页面可以充满浏览者的屏幕空间，而不管视窗的大小尺寸是多少，这对于那些高分辨率宽屏的用户来说是有意义的。而对于坚持固定像素宽度的设计者来说，1024*768就是王道，摒弃了两端的使用人群。在超越css这本书中还提到，即使是固定宽度的设计，减掉浏览器的滚动条宽度和浏览者打开了工具栏的宽度之后，水平宽度就显得不够用了：

许多设计师在设计版面的时候都是随意制定一下宽度就开始他们的设计，往往会出现挑选的宽度没有考虑到说要表现的内容，在后期出现内容问题的时候就很受限制。还有很多开发人员在实现页面的时候，并没有完全依靠视觉效果图来实现，有时就大致量了一下然后根据以往经验来定制宽度，而这种宽度往往不能很好的适应他们的内容，所以，这时候，黄金比例的使用就很重要了。

黄金比例不仅在大的布局上可以使用，在小的栏目设计中也可以灵活使用。可以细化到很小的设计元素，比如一块图片信息展示区域：

书中还提到可以根据内容反向推导出大的区域宽度，例如网页的首页上需要放一个宽度为500的banner图片，那么我们可以用黄金比例算出整个网页可以选择的合适宽度：500*1.62=810px，并不一定要是950或者800这些被很多人推崇的页面宽度。