文章來源（侵刪）：http://www.ui.cn/detail/285750.html

1.黃金比例

蒙娜麗莎和谷歌的logo有什么共同點？人類歷史上最具代表性的畫作和成立于1998年的科技巨頭之間會有什么關(guān)聯(lián)呢？

答案就是，它們都應(yīng)用了黃金比例，公認(rèn)的經(jīng)典比例。從數(shù)學(xué)角度來說，黃金比例約等于1.618。

根據(jù)維基百科，兩數(shù)之和與較大數(shù)之比等于較大數(shù)與較小數(shù)之比時，這兩數(shù)之比為黃金比例。

眾所周知，黃金比例是人眼覺得最舒服的比例，這對于藝術(shù)家、建筑師和設(shè)計師來說十分有用。最直觀的展示形式就是黃金矩形，如下圖。

誠然，黃金矩形直接出現(xiàn)的情況并不多見，但是黃金比例的應(yīng)用十分普及。它無處不在，并時刻吸引人們的目光。它是許多l(xiāng)ogo、字體和界面布局背后的基本原則。

如上圖所示，谷歌logo的兩個圓周長之比為黃金比例。不只是谷歌，很多公司也使用黃金比例來優(yōu)化產(chǎn)品界面。

黃金比例是在設(shè)計實踐中應(yīng)用最廣泛的數(shù)學(xué)概念，也是數(shù)學(xué)影響設(shè)計的有力證明。

2.斐波那契數(shù)列

斐波那契數(shù)列由0和1開始，之后的數(shù)字是由前兩數(shù)相加而得。

0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144…

這個數(shù)列是斐波那契式設(shè)計的基礎(chǔ)，尤其適用于內(nèi)容復(fù)雜的網(wǎng)站布局（如博客或其他線上出版物）。

上圖的博客頁面雖然簡單，但是細(xì)節(jié)很好。頁面內(nèi)容結(jié)構(gòu)明確，字體大小比例清晰、可讀性強，排版布局干脆整潔。這就是斐波那契式設(shè)計的一個很好的例子

舉例來說，頁面中三列的寬度比例根據(jù)斐波那契序數(shù)（2，3和8）確定。前兩列寬度比例為3：2，后兩列為8：3。

還可以使用斐波那契序數(shù)來規(guī)范字號大小。在這個示例中，頁面大標(biāo)題字號為55px，文章標(biāo)題字號為34px，內(nèi)容字號為21px。最終呈現(xiàn)出信息層級清晰、比例和諧美觀的效果。

另一種斐波那契數(shù)列在設(shè)計中的應(yīng)用是劃分頁面模塊。如下圖的矩形，由邊長為斐波那契序數(shù)的正方形組合而成。

下圖是一個非常常見的網(wǎng)頁形式，大家應(yīng)該經(jīng)常見到，甚至使用過?？梢詤⒖糉astCompany的網(wǎng)頁。

這個頁面中最主要的內(nèi)容標(biāo)記為“塊1”，是頁面中面積最大的模塊，搜索功能和其他導(dǎo)航內(nèi)容的模塊組成了“塊2”。

關(guān)于斐波那契數(shù)列還有一個特點：在數(shù)列后添加數(shù)字，隨著數(shù)列加長，數(shù)列前后兩項之比會趨近1.618，也就是黃金比例。

3.三分法則

三分法則被很多人所熟知。就算不是設(shè)計界的人，也會對三分法則有所耳聞。這一點不像黃金比例和斐波那契數(shù)列。說到數(shù)學(xué)法則在網(wǎng)頁設(shè)計中的應(yīng)用，就不能不提“三分法則”。

三分法則指的是，使用兩條豎線和兩條橫線將畫面均分為9個部分，形成一個基本的網(wǎng)格，從而輔助界面布局。

舉例來說，四條線的交叉點位置是放置關(guān)鍵信息的好位置，可以將需要著重顯示的元素布局在這些位置。在網(wǎng)頁設(shè)計中，左上的交點是最醒目的位置，是用戶在瀏覽網(wǎng)頁時，目光最容易注意到的位置。

我們來看一下EQRec的首頁。網(wǎng)站的主標(biāo)題——來自世界上最好錄音棚的邀請——位于首頁左上的交點處，其他頁面元素按照三分法則分布在頁面中，特別是頁面上下的導(dǎo)航欄。

透過數(shù)字做設(shè)計

也不能依靠數(shù)學(xué)來解決全部問題。用戶體驗終究是要靠創(chuàng)新的思維來提升的。