黄金分割在设计中的应用 - UCD大社区

Web设计中的黄金分割

被遗忘 — 2008-12-30 22:21:18

数学是优美的. 听上去有点奇怪? 当我第一次开始设计的时候，我确信如此。数学如此刻板乏味。你可能会惊讶的发现，最美观的设计，艺术作品，物体，甚至人都有数学上的共同点。尤其是黄金分割，也被称为神之比例，希腊字母表示其为 Φ (phi). 本教程会剖析一个网站的布局，以及如何对其黄金分割。

作者: Jarel Remick

是ThemeForest的一名作者，在Moscow, Idaho.

网页骨架

这些是web页面的主要元素。有很多不同的方法去组织它们，但是这种布局也许是最常用的。

Container

所有的web页面都用一个container，主要是为了同一个目的：去包含一些页面元素，然而这个方法实现各有不同。例如，body标签或者是最常用的div。甚至于过去常用的table（不要使用table作为你的container，这是一个破方法）。想想container作为你房子的外墙，里面包含卧室，厨房，起居室等等。

container的类型:

Liquid: 根据浏览器宽度填充。
Fixed: 指定的宽度，并不会根据浏览器宽度改变。

Header

header并不真的是一个特定的元素，尽管某些人会认为它是。它更多是用在涉及到你放置你的logo，导航栏，tagline的web页面顶层的地方。许多人更愿意把这些元素包含在一个div里以方便使页面样式和内容分离。header会被视为一个container，所以它有两种类型选择，就是上文提到的 liquid 或 fixed 。

Logo

你的logo是你的身份和品牌。最常用的是把logo放在你header的左上角。我们的阅读习惯是，从左往右，从上至下，所以你的log应该放在访问者第一眼能看到的地方。

Navigation

页面导航是最重要的元素之一;你的访问者需要用它来使用你的站点。它应该是容易被找到且易用的，这就是为什么大多数的人把它放在header部分，最少也是在页面顶端附近的原因。

navigation类型:

Horizontal: 水平显示，被称为‘navigation’。
Vertical: 垂直显示，被称为‘menu’

Main Content

每个人都（应该）知道，内容才是王道！当人们来参观你的站点，这是他们想看的主要元素。它应该是web页面的焦点，所以参观者才能快速找到他们想要的。

Sidebar

sidebar是放置你次要内容的元素，像一些广告，站点搜索，订阅链接(RSS, Twitter, Email, 等), 联系方法等。这个元素不是必需的，尽管右很多站点用它。它大多数是放在右边的，但是你也能把它放在左边或者两边，只要不扰乱主要内容的浏览就行。网站使用横向或纵向导航，sidebar往往是用纵向导航。

Footer

web页面的尾部总会有一个页脚，让您的访客知道他已经到达了你web页面的结束部分。和heaser一样，footer也不是一个特殊的元素。在你的页脚里包含版权，法律声明以及主要的联系方式。包含一些重要的链接是个好主意，比如home page, contact page, 等. 有些网站用这个区域提供一些相关材料或者其他重要信息。

"Whitespace"

你可能有强烈的愿望去填充这些页面上的空白，但是请不要这么做。“空白”也是相当重要的。你可以看看NetTuts网站是如何有效的使用空白区域的，创建了页面平衡给人一个好的感觉。

以上是web页面的骨架，现在我们来看如何黄金分割这些元素。

黄金分割和使用网格（Grids）

还记得之前我说数学是美丽的吗？我们认为视觉的吸引力是基于比例的（比如，黄金分割）。几千年来，艺术家，设计师，建筑师等都有意无意的在使用了一个共同的比例来增加他们作品的美感。这个神奇的数字是什么呢？ 1.62 (实际是 1.618...) 我不会说这个数字的起源，但是我会告诉你如何使用它。

使用黄金分割是非常简单的。比如你像找到你主要内容和sidebar列表的宽度。你将使用你内容区域总的宽度除以 1.62. 然后得到555.55px. 我们不需要那么精确，所以我们就用555px。现在你就知道你的主要内容元素是555px的宽度，你的sidebar是345px。看看多么容易？！

但是等等先，乐趣不止于此！你也可以应用黄金分割到其他元素的宽度和高度。

Using Grids

如果你和大多数的人一样，不想每次都抱着个计算器来计算这个黄金比率。那么最简单的方法就是用grid。所以你需要做的就是把你的宽度或是高度分成三分。

要产生更详细的gird，只需要继续三等分就行。如果你读了前一篇文章“与Blueprint CSS框架的亲密接触” 的话，你会看到Blueprint CSS框架用了一个详细的gird系统。不仅仅是gird设计更容易更快，而且它也创建了一个美观的布局。如果你还没有使用gird设计，那么这是一个很好的尝试机会。你可以为 fireworks，photoshops或者其他软件从 http://960.gs下载grid模板。

正如你看到的，NetTuts很好的遵循了黄金比率。顶端三分之一的网页再次分成了三分，非常接近黄金比率。难怪NetTuts的设计是如此吸引人！

如果你要做一个新的设计，我严重推荐你找一些流行的站点，评价他们的布局，以及如何应用黄金比率和gird。然后花一些时间去实践使用黄金分割，并在你的布局上面使用gird。

管理中心左侧栏的“黄金分割”宽度浅谈

残酷de乐章 — 2010-08-23 20:22:05

关于“管理中心”的界面设计框架，一般我们都会选择传统的“工”字结构，顶部是形象区，左侧是功能列表区，右侧是操作区，这种结构的功能扩展性和易用性都是非常好的，几乎90%以上的软件系统的后台管理中心都是采用这样的结构。

在实际设计工作中我们发现，用户总是希望能把操作区的区域尽量变大，以最大限度满足业务工作，提高使用效率。我们对信息的浏览习惯于向下扩展，进行纵向滚动。也就是说在显示器分辨率一定的前提下，信息可以在Y轴进行扩展，而X轴却是固定的，这就需要我们在侧栏上多下功夫了。所以我们一般都会设置1-2个hide按键，来控制顶部栏和左侧栏的消隐，这样以来既可以扩大操作区又不影响导航。

但是究竟左侧栏的默认宽度多少才是最合适，既能保持美观，最大限度的放大操作区，又可以不影响操作呢。下面我们就此问题进行一下研究。

我们首先将在左侧栏将会用到的元素罗列一下
滚动条：17px 图标：16px 文字（中文宋体）：11px 文字间距：1px

左侧栏需要具备的以下几个条件
1.一般来讲左侧会包括最多不超多4级的树形菜单
2.文字为一行不折行，且一般不会超过8个汉字
3.考虑到可能会出现的滚动条

综上所述，我们进行排版。（如下图）

最后我们计算得出左侧栏的“黄金分割”宽度为204px

黄金分割——设计师的设计利器

黄金体验 — 2011-02-18 00:16:59

设计师在设计的时候，总会遇到这样那样的问题，和人PK不断，修改不断。界面区域多大合适呢？ICON多大？颜色区间多少？为什么这么定义？什么是普世的美？很多UIer都说，50%靠设计，50%靠交流，那么在交流的时候如何说服别人呢？ADS定位、用户群、用户环境、调研都可以作为参考的依据，在这里再向大家介绍一下我们身边存在的黄金分割，希望作为设计的利器，或创作或PK。

一.植物

“黄金角度”生物学家发现植物种类繁多、叶子形态各异，但是叶子在茎上的排列却有着特殊的规律.我们从某种植物的顶端往下看，便会发现上下层相邻的两片叶子之间所构成的角约为137.50,如果每层叶子只画一片来表示，第一层和第二层的相邻两叶之间的角度约为137.50,以后二层到三层、三层到四层、四层到五层……两叶之间都成这个角度，这个角度对叶子的通风和采光最为有利.这叶子之间的137.50角与黄金数又有什么联系呢？我们知道，一周为3600，137.50： =137.50：222.50≈0.618.也就是说，各种植物叶子的生长规律中自然隐藏着黄金数。

向日葵花有89个花辫，55个朝一方，34个朝向另一方

枫叶

喷嚏麦

1.1.2.3.5.8.13.21.34.55.89.144…

后面的数除以前面的树，越往后越趋向于黄金比例。运用到设计当中，譬如一个齿轮的图标，齿的个数可以参考这组数列。PK词：这是自然的法则。

二.动物

由这组数列引出斐波那契曲线，斐波纳契是在解一道关于兔子繁殖的问题时，得出了这个数列。假定你有一雄一雌一对刚出生的兔子，它们在长到一个月大小时开始交配，在第二月结束时，雌兔子产下另一对兔子，过了一个月后它们也开始繁殖，如此这般持续下去。每只雌兔在开始繁殖时每月都产下一对兔子，假定没有兔子死亡，在一年后总共会有多少对兔子？ •　　在一月底，最初的一对兔子交配，但是还只有1对兔子；在二月底，雌兔产下一对兔子，共有2对兔子；在三月底，最老的雌兔产下第二对兔子，共有3对兔子；在四月底，最老的雌兔产下第三对兔子，两个月前生的雌兔产下一对兔子，共有5对兔子；……如此这般计算下去，兔子对数分别是：1, 1, 2, 3, 5, 8, 13, 21, 34, 55,89, 144, …看出规律了吗？ •从第3个数目开始，每个数目都是前面两个数目之和。

下面再简单介绍下斐波那契，了解下周边总是可以唬人的。

意大利数学家，12、13世纪欧洲数学界的代表人物。生于比萨，早年跟随经商的父亲到北非的布日伊（今阿尔及利亚东部的小港口贝贾亚），在那里受教育。以后到埃及、叙利亚、希腊、西西里、法国等地游历，熟习了不同国度在商业上的算术体系，他认为使用印度－阿拉伯数码最方便。1200年左右回到比萨，潜心写作。他的书保存下来的共有5种。最重要的是《算盘书》（1202年完成，1228年修订），算盘并不单指罗马算盘或沙盘，实际是指一般的计算。全书共15章，1～7章系统介绍了印度数码与记数制度，以及整数、分数的各种计算方法，结果用弃九法来验算。还列有乘法表、素数表和因子表等若干数表。8～11章是商业上的计算题,如物价、利润、利息、货币换算等，反映了中世纪地中海地区的广泛商业交往。

黄金分割的算法：1.如果线段AB被点C分成线段AC和BC，且，那么称线段AB被点C黄金分割，点C叫做线段AB的黄金分割点，AC与AB的比叫做黄金比。通过计算可知黄金比为。2.黄金矩形：一个矩形如果两边之比具有黄金比值，则称这种矩形为黄金矩形．它是由一个正方形和另一个小黄金矩形组成。事实上，如图（4），如果设大黄金矩形的两边为a、b，则，分出一个正方形后，所余小矩形的两边分别为（b－a）和a，它们的比为（b－a）：a ．这表明小的矩形也是黄金矩形。

3.如何得到线段的黄金分割点C呢？这里介绍一下操作方法：首先画一个参考Y轴（纵轴），如图所示。A点位于Y轴上，水平画出AB直线，长度任意。以A为中心，AB为半径，画一个圆，得到与Y轴相交的X点。即AX＝AB。取AX的中心点Z，即AZ＝ZX。连接ZB，并以Z为中心，ZB为半径绘制一个圆，得到与Y轴相交点Y（下方相交点）。即ZB＝ZY。最后，以A为中心点，AY为半径绘制一个圆，得到与AB相交的C点，此时AC＝AY。C点即为黄金分割点。

鹦鹉螺的曲线黄金分割构图也体现在网页构图上，如titter的IPad版。

三.人物

1.面部比例。相貌对不起观众的人各有千秋，美丽的人却有很多相似的地方。奥黛丽赫本有这标准的三平五眼，作为公众的美女，我们看看他的脸部有那些黄金分割吧。

再以一个普通人凤姐为例，对比看看，在画卡通形象的时候可以夸大面部各部分的黄金比例。

2.身体比例

肚脐：头顶－足底之分割点；(2)咽喉：头顶－肚脐之分割点；(3)、(4)膝关节：肚脐－足底之分割点；(5)、(6)肘关节：肩关节到中指尖之分割点；(7)、(8)乳头：躯干乳头纵轴上这分割点；(9)眉间点：发际到颏底间距上1/3与中下2/3之分割点；(10)鼻下点：发际到下巴底间距下1/3与上中2/3之分割点；(11)唇珠点：鼻底到下巴底间距上1/3与中下2/3之分割点；(12)颏唇沟正路点：鼻底到颏底间距下1/3与上中2/3之分割点；(13)左口角点：口裂水平线左1/3与右2/3之分割点；(14)右口角点：口裂水平线右1/3与左2/3之分割点。（15）在人体中三分之二是水；在22.5 ℃的环境中人体的新陈代谢处于最佳状态，而22.5 ℃是人体正常体温36.5 ℃的0.618倍；（16）心脏中心位于胸腔的黄金分割点上；（17）整个脊柱的0.618是胸与腰的分界处，也就是第12胸椎处，从肩至中指指尖的0.618是肘关节，从肘关节至中指指尖的0.618为腕关节，从膝关节至足尖的0.618是踝关节。（18）姿态优美，身材苗条的时装模特和偏偏起舞的舞蹈演员，他们的腿和身材的比例也近似于0.618的比值。

思考：如果小明的身高是1.75米，假如肚脐在0.97米位置，增高垫用多高能使肚脐达到人体的黄金分割点？答案最下面公布。

3.另外，和人体有关的黄金分割还有：一年12个月，12的0.618是7.4,7、8月份人体血液中的淋巴细胞最多，它可参与抵御细菌的侵袭，所以这时是人体抵抗力最强的时期。一天中气温最低的时间是凌晨2时气温最高是在14时，它们之间的黄金分割点为9.4，上午9,10时的气温是一天中最适宜的，这时人的头脑最清楚，办事效率最高。中医的三个主要健身穴位枣百会、涌泉和劳宫的位置也符合这一分割律：百会位于前发际至后发际的0.618处，涌泉位于足掌部的0.618处,劳宫位于手掌的0.618处。

4.DNA的比例。最有意味的是，在人的生命程序DNA 分子中，也包含着“黄金分割比”。它的每个双螺旋结构中都是由长 34个埃与宽21个埃之比组成的，当然34和21是斐波那契系列中的数字，它们的比率为1.6190476，非常接近黄金分割的1.6180339。这是否说明黄金分割律是比DNA中的遗传密码更基本的东西？因为承载DNA的结构——双螺旋结构——也遵循黄金分割律。

四.建筑雕塑

埃菲尔铁塔是一座纪念性建筑物，为了纪念法国大革命100周年，巴黎决定在1889年举办国际博览会，并要造一座永久性纪念建筑物。埃菲尔铁塔在1889年初建时，高度已达300米，是当时全世界最高的建筑物，直到1930年，仍是最高的（1959年在埃菲铁塔顶部增设广播天线，使塔高增加到320米。）埃菲尔铁塔在距离地面57米，115米和276米处，各有一个平台，计算表明：（300-115） 300=0.617。所得比值与黄金比0.618相差甚微，由此可见，埃菲尔铁塔第二层平台的位置，非常接近于全塔高度的黄金分割点，从图中可以看出，第二层平台正是埃菲尔铁塔张开的四条腿开始收拢的转折点。埃及金字塔的高和底部边长是黄金比例。

雕塑维纳斯的身体各部分也符合黄金比例。

五.绘画摄影

蒙娜丽莎的微笑

达·芬奇的“美丽密码”共有六大“法则”，其中包括脸的宽度必须是鼻宽的4倍；前额的宽度、鼻子的长度以及下颌骨长度必须都相等；研究人员吃惊地发现，“六大法则”中的5个都与现代人的审美标准奇迹般地吻合，只有一项关于“鼻子与嘴的比例”的法则与现代略有出入。小巧的嘴型是文艺复兴时期的审美标准，嘴的宽度是鼻宽的1.5倍被认为最完美。与之不同的是，研究发现，现代人普遍认为嘴宽与鼻宽的比例达到1.6的更美。达·芬奇的“美丽密码”要求如此严苛，以至于大多数普通人都不能全部符合其标准。因此研究人员也表示：“尽管这一研究结果显示脸部器官的大小、组合方式以及位置不同，都会对个人魅力产生影响。但一个人的美丽是一个复杂的组合，其中还涉及到其他许多因素。”

摄影的九宫构图法

九宫构图顾名思议,将画面平均九等分,而四个交叉点侧是黄金点,拍摄时将主体放在图中四个交叉点中的任何一个点上,而不是放在画面的中心或接近中心的位置上.而四个点中,一般认为,右上方的点,是最理想的位置。

六.其他

1.美剧中的黄金分割过场

•盛开的花瓣中隐藏着蜻蜓的翅膀，花心是费马螺线组成，而螺线的排列与黄金分割和斐波那契数列相关。

•青蛙的背后有希腊文第21个字母PHI(Φ)，这个字母用来代表黄金分割，1.6180339887。

•角的形状就是斐波纳契螺线，而仔细观察可以看到角上的数字，就是黄金分割数值Phi-Φ——1.6180

•海马的身上图形是Fibonacci Spiral斐波纳契螺线，同时，螺线里面包含的线代表了黄金分割的比例。海马的尾部是Fibonacci Spiral，一些图片中还包括了L-histidine 组氨酸和L-proline脯氨酸的结构图。

2.手机界面

•Iphone宫格界面，每个图标都是57*57，图标宽度与图标顶部到下一排图标的高度的比例是黄金比例。

•天语手机传统的九宫格形式，对屏幕也进行了视觉上的黄金分割。

•WM6.5的蜂窝系统，六边形一方面最省空间，一方面也接近于黄金比例的5边型。

关于黄金分割的总结就告一段落了，一些例子可以灵活的运用到设计当中，希望对看到这篇文章的同学们不管是设计或者PK都有所帮助。

欢迎讨论，谢谢：）

PS：小明的答案1.75*0.618-0.97=0.11米