UI中的黃金比例

“黃金比例”在建筑、機械、logo和圖片設計中扮演著重要的角色。這里我不想寫太多關于什么是黃金比例的東西,你可以在維基百科上了解到。我只能簡明地說下:我們的知覺傾向于協調和美觀,我認為黃金比例是讓產品變得更舒適和美觀的最優雅方式。簡而言之,它是一種尋求設計平衡的工具。這個技巧在界面設并不流行,因為它看起來很難。我會以一些簡單的術語來解釋——如何建立一個典型的黃金比例并把它運用到實踐。

幾何圖形
黃金比例的黃金分割率是1:1.618。這很容易畫出來:




首先畫一個正方形
從正方形的中間(A點)畫一條斜線到對角(B點)
畫一段弧線。通過畫圓得到了一個矩形。正方形和矩形組成的圖形就是“黃金比例矩形”。
如果我們在大和小的矩形里畫斜線,在交叉的地方就能得到一個焦點。
把最重要的界面元素放在這個點來吸引用戶的注意力,這是個好主意。
這個形狀獨特的屬性在于它的分割性,
我們能得到一個更小的包含了一個正方形和一個矩形的矩形,一種反向變大。
最美妙的是:如果每個弧半徑等于正方形的邊,我們就可以得到黃金比例的螺旋形。
矩形可能會旋轉或調整到畫布或界面的理想尺寸。



現在是三角形



 
    畫一個三角形,一邊是另一邊的兩倍
 以B點為中心,AB為邊長畫一條弧線?;∠医徊娴玫搅薉點。
現在以C點為中心,CD為邊長畫一條弧線,我們得到了E點。
從E點畫一條直線與斜邊相交。
結果是,我們能得到其他更小的等比例三角形。
順便說下,有一個顯而易見的黃金比例,那就是一個元素是另一個元素的1.618倍。


自然之美

如果我們不斷地分割三角形,在三角形之間畫圓弧,
為什么幾乎所有自然界的事物都遵循著黃金法則,
就會變得很清晰。有時它們是以斐波那契數列排列:

1,1,2,3,5,8,13,21,34,55,89,..



如果你畫了這個黃金比例的螺旋形,以40或60度進行旋轉,你會創造出這個美麗的圖形:




這是一個以20度的角度進行旋轉的效果和水平形狀的一個投射:





使用了黃金比例,能畫出任何圖形用在圖標、logo、界面等的設計中。