|
神之比例 黃金分割在Web頁面設計中的運用(一)
神之比例 黃金分割在Web頁面設計中的運用(二)
Main Content
眾所周知,內容才是王道。當人們來參觀你的網站,這是他們想看的主要元素。它應該是web頁面的焦點,所以參觀者才能快速找到他們想要的。
Sidebar
sidebar是放置你次要內容的元素,像一些廣告,網站搜索,訂閱連結(RSS, Twitter, Email, 等), 聯繫方法等。這個元素不是必需的,儘管右很多網站用它。它大多數是放在右邊的,但是你也能把它放在左邊或者兩邊,只要不擾亂主要內容的流覽就行。網站使用橫向或縱向導航,sidebar往往是用縱向導航。
Footer
web頁面的尾部總會有一個頁腳,讓您的訪客知道他已經到達了你web頁面的結束部分。和header一樣,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或者其他軟體。
如果你要做一個新的設計,我嚴重推薦你找一些流行的網站,評價他們的佈局,以及如何應用黃金比率和gird。然後花一些時間去實踐使用黃金分割,並在你的佈局上面使用gird。
神之比例 黃金分割在Web頁面設計中的運用(一)
神之比例 黃金分割在Web頁面設計中的運用(二)
|