作者：Adit Gupta
2010年2月9日
“數(shù)學是美妙的?！睂τ谠跀?shù)字和公式面前畏縮的人來說，這聽起來也許是荒謬的。但是，從最小的貝殼到最大的漩渦星系，自然界和我們這個宇宙中大部分美麗的東西都呈現(xiàn)出數(shù)學特性。 其實，古代最偉大的哲學家之一亞里斯多德曾說過：“數(shù)學格外地展現(xiàn)了秩序、對稱和極限，而這些是美的極致形式”。
由于其美麗的天性， 數(shù)學一直以來都是藝術(shù)和建筑設(shè)計的一部分。但它至今還沒有在網(wǎng)站設(shè)計中發(fā)揮作用。其原因可能是因為我們大多認為數(shù)學是創(chuàng)造性的對立面。相反，其實數(shù)學可以成為創(chuàng)作創(chuàng)意設(shè)計的工具。也就是說，你不必在每個設(shè)計中都依賴于數(shù)學。關(guān)鍵在于應(yīng)將數(shù)學看作朋友，而非敵人。為了說明這個觀點，我們創(chuàng)建了幾個展現(xiàn)在本文中所討論數(shù)學原理的網(wǎng)頁設(shè)計。我們還贈送了幾個PSD格式的文件，以便于在以后的設(shè)計中你可以直接使用他們。
文中特載的布局都是為本文的目的而專門創(chuàng)建的。在設(shè)計過程中，我們確保本文展示的所有設(shè)計都遵循了數(shù)學的本質(zhì)本性，也就是展現(xiàn)秩序、對稱和極限。同時我們也遵循網(wǎng)絡(luò)設(shè)計運算法則——有獨立的主題、樣式和元素。為了保持簡單明了，我們嘗試堅持極簡主義的設(shè)計，同時也推薦單頁布局。顯然，文中的示例都應(yīng)充當簡單設(shè)計的基礎(chǔ)，而非作為已經(jīng)完成的設(shè)計直接使用。
黃金分割比率與黃金矩形
黃金分割比率也稱為神圣分割比例，它是一個數(shù)學無理常數(shù)，其值約為1.618033987。如果整體與較大部分之比等于較大部分與較小部分之比，那么這個數(shù)量就稱為黃金分割比率。
我們已經(jīng)發(fā)表了非常詳細的文章《在網(wǎng)頁設(shè)計中應(yīng)用神圣分割比例》來解釋如何在網(wǎng)頁設(shè)計中使用黃金分割比率。在今天的文章中，我們將關(guān)注如何在網(wǎng)頁設(shè)計中使用黃金矩形。黃金矩形是一個其邊長之比為黃金分割率之比1：（一比phi），即1:1.618的矩形。
黃金矩形的作圖是非常容易和簡單的。首先，創(chuàng)建一個簡單的正方形。然后從正方形一條邊的中點向?qū)钱嬕粭l線，以這條線為半徑畫一條弧來定義矩形的高。最后，完成黃金矩形剩下的部分就得到了一個完整的黃金矩形。
一種構(gòu)造黃金矩形的方法。正方形以紅色標注輪廓。由此得到的尺寸是1:Phi的比率，也就是黃金分割比率。
作為一個例子，考慮使用以下極簡派的設(shè)計。這個設(shè)計當中有6個黃金矩形，每一行有3個矩形。矩形的尺寸為299 × 185像素。因此，這些矩形的邊長大約遵循了黃金分割比率，即299/185 = 1.616。注意黃金矩形周圍的空白空間要留出多大才能創(chuàng)造出平靜而又簡單的氛圍，導航選項可以表示出并為這種氛圍的目的服務(wù)。盡管布局僅只使用了少量顏色并且所有信息塊的定位都非常相似，但導航的選項是顯而易見的。
但是，在保持設(shè)計一致性的同時，可能很難再添加一個新的黃金矩形塊了。也許這里唯一合理的設(shè)計方案是在需要的時候利用剩下的水平空間將其他的塊添加到第三行，或多或少這也是特色突出的設(shè)計。你可以點擊下圖觀看圖像的放大版本。
可能的應(yīng)用
黃金矩形的設(shè)計非常適宜于展現(xiàn)照片庫、作品集和以產(chǎn)品為導向的網(wǎng)站。黃金矩形還可以安排與其他合理的數(shù)學方法一起生成優(yōu)美的設(shè)計。你可能特別想使用它們?yōu)閭?cè)邊欄圖片或廣告的顯示分塊。當然，黃金矩形單純的集合并非專業(yè)、好看的設(shè)計。它還需要與網(wǎng)格、對齊、近似值和強調(diào)一起密切合作以達到設(shè)計的主要目的。例如，一個有趣的基于黃金矩形的設(shè)計解決方案將是以CSS / jQuery流體網(wǎng)格設(shè)計為重要部分，但是本文的介紹不涵蓋這項技術(shù)。
下載該版面設(shè)計的PSD格式文件
我們準備了遵照黃金分割比率和黃金矩形原則設(shè)計的PSD格式版面設(shè)計示例。 請隨意以任何方式使用它，同時如果你希望傳播相關(guān)信息的話請將本文的鏈接發(fā)給你的同事。
斐波那契設(shè)計
意如其名，斐波那契設(shè)計基于斐波那契數(shù)字序列。根據(jù)定義，斐波那契的前兩項數(shù)字為0和1，之后的每個數(shù)字是前兩項數(shù)字之和。 一些源資料省略了最初的0，取而代之的是以兩個1為數(shù)列的起始。因此斐波那契數(shù)列的頭兩項數(shù)字是給定的，而之后的每個數(shù)字是前兩項數(shù)字之和。 斐波那契序列的項數(shù)越高，其相鄰兩項的比值就越接近黃金分割比率。斐波那契序列是這樣的：
0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144...
在音樂中，斐波那契數(shù)有時被用于調(diào)音，而在視覺藝術(shù)中，斐波那契數(shù)用于確定內(nèi)容及形態(tài)構(gòu)成要素的長度和尺寸。約根·施米德胡貝的博文：基于斐波那契的設(shè)計論。但是，如果你對他創(chuàng)建的設(shè)計進行審查的話，可能會發(fā)現(xiàn)它有些死板僵硬，并且有些難于閱讀和導航。事實上，對數(shù)學的使用需要具有一定的創(chuàng)造性，而非盲目的遵循規(guī)則——數(shù)學為我們提供了一個可以應(yīng)用的指南，但是，更多的是關(guān)于在實施網(wǎng)站時引用數(shù)學，而非在我們的設(shè)計中應(yīng)用數(shù)學。
近似的和真實的的黃金螺旋線。綠色螺旋線由內(nèi)部每一個正方形和四分之一圓相切線構(gòu)成，而紅色的螺旋線是黃金螺旋線，它是對數(shù)螺旋線的一種特殊類型。重疊部分呈黃色。正方形的邊長被下一個更小的正方形分割，這就是黃金分割率。來源
這種設(shè)計背后的主要思想在決定內(nèi)容區(qū)域或側(cè)邊欄尺寸時利用斐波那契原理。黃金分割率和斐波那契原理都讓設(shè)計師有有據(jù)可依，是頁面容器與頁面容器內(nèi)塊的公比。
一般來說，使用斐波那契序列非常容易就可以開發(fā)出頁面布局?？梢韵冗x擇一個特定的基準寬度——例如90px。然后，在確定容器大小的時候，用基準寬度乘以來自斐波那契序列的數(shù)字。根據(jù)計算得到的結(jié)果，需要將它們用于頁面區(qū)。讓我們來看一個例子。下圖是基于斐波那契網(wǎng)頁設(shè)計的極簡派博客版式。
可以看到，該網(wǎng)頁被分為三列。每一列對應(yīng)一個斐波那契數(shù)。在這個設(shè)計中，我們使用的基準寬度是90像素。然后，將這個基準寬度乘以一個斐波那契數(shù)以得到某一特定列的寬度。例如，第一列的寬度為180像素（90 × 2）；第二列的寬度為270像素（90 × 3）；而第三列的寬度為720像素（90 × 8）。字體的大小也對應(yīng)于一個斐波那契數(shù)。該博客的標題字號為55px；文章標題字號為34px；而內(nèi)容的字號為21px。
基于斐波那契序列頁面布局設(shè)計的缺點在于：如果你得到的是一個特定固定的尺寸寬度（例如1000px），那么就很難使用這種方法了。在這種情況下黃金分割率更容易使用，因為你只需要簡單的用1000px乘以0.618就可得到618px，這就是內(nèi)容區(qū)塊的理想寬度。但是，如果你嘗試通過斐波那契本身來實現(xiàn)同樣的效果，首先需要在1000范圍內(nèi)計算出序列。
根據(jù)斐波那契序列計算器計算的結(jié)果，序列應(yīng)當為...,610，987，1597...事實上，987很合適，而你可以開始選擇使用在序列當中之前的數(shù)字作為更小的區(qū)塊寬度。但是，如果頁面布局的固定寬度是的更小或更大的話，那么應(yīng)該使用一些使結(jié)果推斷更完美的近似值。這個問題在一定程度上也可能出現(xiàn)在流設(shè)計或彈性設(shè)計中，但是那種設(shè)計有更大的設(shè)計自由度。
可能的應(yīng)用
下載該版面設(shè)計的PSD格式文件
我們準備了遵照斐波那契序列原則設(shè)計的PSD格式版面設(shè)計示例。請隨意以任何方式使用它，同時如果你希望傳播相關(guān)信息的話請將本文的鏈接發(fā)給你的同事。
五種元素，又名坤德里設(shè)計
另一種有趣的頁面布局技術(shù)來自于印度占星術(shù)，也叫作“坤德里”。基本上，坤德里是一個只需要三個步驟就可以得到的簡單圖形。畫一個正方形，然后畫兩條對角線。連接正方形每條邊的中點就可以得到坤德里圖。你將會注意到圖上的四個直角菱形。它們是網(wǎng)頁設(shè)計的基礎(chǔ)。
下面的設(shè)計就是根據(jù)坤德里幾何頁面布局得來的。你會發(fā)現(xiàn)設(shè)計中的氣卦(梵文，人體的七個能量中心，又稱七輪)同樣也具有數(shù)學特性。
這是一個單頁的頁面布局。如下圖所示，點擊一個元素會展現(xiàn)與之相關(guān)的更多信息。此外，你還可以加入一些簡單的jQuery動畫或jQuery工具提示，從而可以根據(jù)需要展現(xiàn)更多的信息。更高級的應(yīng)用是使用動畫顯示不同內(nèi)容區(qū)塊的滑動網(wǎng)頁；也許你還希望改變單一內(nèi)容區(qū)域的背景圖，從而讓它們顯得更與眾不同。
在下圖中，可以看到我們的設(shè)計僅只是一個簡單的三列布局：一個頁頭，三個列和一個頁腳。一點都不復雜。
可能的應(yīng)用
這種設(shè)計最適宜于展示產(chǎn)品信息和整套作品組合。可以通過JavaScript動畫框架技術(shù)的使用讓它更有趣。例如，可以通過使用拉斐爾庫應(yīng)用顏色轉(zhuǎn)換，或者可以使用jsAnim庫添加自由式動畫。當用戶點擊地球元素的時候可以讓樹發(fā)芽，或者可以顯示海洋生物在水元素中游泳。當使用這些JavaScript庫時，天空就是界限。
下載該版面設(shè)計的PSD格式文件
我們準備了遵照坤德里原則設(shè)計的PSD格式版面設(shè)計示例。請隨意以任何方式使用它，同時如果你希望傳播相關(guān)信息的話請將本文的鏈接發(fā)給你的同事。
正弦波設(shè)計
當談到數(shù)學時，你無需遵循眾所周知的黃金分割比率和斐波那契序列。也可以在你的設(shè)計中通過嘗試數(shù)學、化學及其他科學的公式來使用更普遍的公式和數(shù)值。
例如，讓我們考慮一下正弦波，也即正弦曲線這樣一個描述平穩(wěn)反復振蕩的數(shù)學函數(shù)。我們使用簡單的正弦波模式作為一個簡單原創(chuàng)的網(wǎng)頁設(shè)計和創(chuàng)建單頁布局的基礎(chǔ)。 當然，也可以為其他設(shè)計使用相同的方法，例如圖形或數(shù)據(jù)圖表的設(shè)計。
頁面布局仍舊很簡單，由一個頁頭、五個列和一個頁腳構(gòu)成?？梢允褂胘Query的工具提示使設(shè)計更具互動性。
可能的應(yīng)用
這種波形往往出現(xiàn)在自然界中，包括海浪、聲波和光波。此外，一個粗略的正弦曲線圖表可以在每天或每年的平均每日溫度平面圖表中看到，雖然這個圖形可能和倒置的余弦波看起來很像。也可以用它展現(xiàn)事件的時間表。它甚至還可以用于開發(fā)橫向?qū)Ш?。你可以使?a target="_blank">jQuery highlighter插件來增加互動性，jQuery highlighter插件通過強調(diào)每個元素（例如：DIV ），以便用戶可以把注意力集中于內(nèi)容。
下載該版面設(shè)計的PSD格式文件
我們準備了遵照正弦波原則設(shè)計的PSD格式版面設(shè)計示例。請隨意以任何方式使用它，同時如果你希望傳播相關(guān)信息的話請將本文的鏈接發(fā)給你的同事。
其他技術(shù)
三等分法則
這條法則規(guī)定，圖像應(yīng)假想被兩條等距水平線和兩條等距垂直線等分為九個相等的部分，而重要的組成元素應(yīng)當被放置在這些線上或它們的交叉點上。這也可以表達為一個簡單的數(shù)學方法：將任意頁面布局從左到右和從上到下三等分。
音樂邏輯
音樂作品的節(jié)奏或主題結(jié)構(gòu)可以應(yīng)用于頁面布局中元素之間的距離，如 ABA、ABAC等等。要了解更多關(guān)于音樂和數(shù)學的知識請參考這個維基百科條目。
有用的鏈接和資源
