“黃金比例”在建筑、機(jī)械,、logo和圖片設(shè)計(jì)中扮演著重要的角色,。這里我不想寫太多關(guān)于什么是黃金比例的東西，你可以在維基百科上了解到,。我只能簡(jiǎn)明地說(shuō)下：我們的知覺(jué)傾向于協(xié)調(diào)和美觀,，我認(rèn)為黃金比例是讓產(chǎn)品變得更舒適和美觀的最優(yōu)雅方式。簡(jiǎn)而言之,，它是一種尋求設(shè)計(jì)平衡的工具,。

這個(gè)技巧在界面設(shè)計(jì)中并不流行，因?yàn)樗雌饋?lái)很難,。我會(huì)以一些簡(jiǎn)單的術(shù)語(yǔ)來(lái)解釋——如何建立一個(gè)典型的黃金比例并把它運(yùn)用到實(shí)踐,。

幾何圖形

黃金比例的黃金分割率是1:1.618。這很容易畫出來(lái)：

1. 首先畫一個(gè)正方形

2. 從正方形的中間（A點(diǎn)）畫一條斜線到對(duì)角（B點(diǎn)）

3. 畫一段弧線,。通過(guò)畫圓得到了一個(gè)矩形,。正方形和矩形組成的圖形就是“黃金比例矩形”。

4. 如果我們?cè)诖蠛托〉木匦卫锂嬓本€,，在交叉的地方就能得到一個(gè)焦點(diǎn),。把最重要的界面元素放在這個(gè)點(diǎn)來(lái)吸引用戶的注意力，這是個(gè)好主意,。

5. 這個(gè)形狀獨(dú)特的屬性在于它的分割性,，我們能得到一個(gè)更小的包含了一個(gè)正方形和一個(gè)矩形的矩形,，一種反向變大。

6. 最美妙的是：如果每個(gè)弧半徑等于正方形的邊,，我們就可以得到黃金比例的螺旋形,。

   矩形可能會(huì)旋轉(zhuǎn)或調(diào)整到畫布或界面的理想尺寸。

   
   

現(xiàn)在是三角形

1. 畫一個(gè)三角形,，一邊是另一邊的兩倍
   

2. 以B點(diǎn)為中心,，AB為邊長(zhǎng)畫一條弧線?；∠医徊娴玫搅薉點(diǎn),。

3. 現(xiàn)在以C點(diǎn)為中心，CD為邊長(zhǎng)畫一條弧線,，我們得到了E點(diǎn),。

4. 從E點(diǎn)畫一條直線與斜邊相交,。

   
   

結(jié)果是,，我們能得到其他更小的等比例三角形。順便說(shuō)下,，有一個(gè)顯而易見(jiàn)的黃金比例,，那就是一個(gè)元素是另一個(gè)元素的1.618倍。

自然之美

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

1,1,2,3,5,8,13,21,34,55,89,，..（每個(gè)連續(xù)的數(shù)字都是前面兩個(gè)數(shù)字之和）

如果你畫了這個(gè)黃金比例的螺旋形，以40或60度進(jìn)行旋轉(zhuǎn),，你會(huì)創(chuàng)造出這個(gè)美麗的圖形：

這是一個(gè)以20度的角度進(jìn)行旋轉(zhuǎn)的效果和水平形狀的一個(gè)投射：

使用了黃金比例,，能畫出任何圖形用在圖標(biāo)、logo,、界面等的設(shè)計(jì)中,。

移動(dòng)界面的設(shè)計(jì)

我做了兩個(gè)例子來(lái)說(shuō)明黃金比例的應(yīng)用。第一個(gè)是ASOS商店的一個(gè)卡片產(chǎn)品,。這個(gè)app的第一屏只能看到圖片和“喜歡,、播放、分享”的操作區(qū)域,。這個(gè)設(shè)計(jì)并不是很舒適,，因?yàn)槟惚仨毣瑒?dòng)頁(yè)面去找到產(chǎn)品大小、顏色,、材質(zhì)的描述或加到購(gòu)物車的按鈕,。結(jié)果是,，快速地查看產(chǎn)品變得很困難。

如果你畫一個(gè)黃金比例的矩形,，怎么擺放元素就變得有依據(jù)了,。這種結(jié)構(gòu)可以使第一屏展示更合理的用戶數(shù)據(jù)。

正如我們看到的,，在焦點(diǎn)區(qū)有“喜歡”操作,，這個(gè)app的一個(gè)關(guān)鍵性的操作。

在舒適的范圍內(nèi),，元素是醒目的,，每個(gè)元素，從屏幕的邊緣,，一個(gè)拇指就很容易按到,。

第二個(gè)例子就是博客界面。矩形可以把所有東西都放進(jìn)來(lái)：我們有一個(gè)很大的圖片,，以及很大的文字區(qū)域,。如果圖片是基于黃金比例，并不會(huì)扭曲移動(dòng)尺寸,。

把“喜歡”和“評(píng)論”放在右下角會(huì)讓它們顯得更大,，但并不張揚(yáng)。它們不會(huì)蓋過(guò)圖片,，然而對(duì)用戶可見(jiàn),。

希望你不會(huì)對(duì)1:1.618這個(gè)比例感到害怕，并且愿意嘗試用在界面設(shè)計(jì)中,。

原文地址：

https://blog./golden-ratio-in-ui-design-8d11e66582c3#.s4rd2mr6j