振宇網頁設計公司
關於振宇 網站設計作品 網站排名 線上洽詢
神之比例 黃金分割在Web頁面設計中的運用(二)
作者 Sunming   
2009/05/13

神之比例 黃金分割在Web頁面設計中的運用(一)
神之比例 黃金分割在Web頁面設計中的運用(二) 

 

  Main Content

  眾所周知,內容才是王道。當人們來參觀你的網站,這是他們想看的主要元素。它應該是web頁面的焦點,所以參觀者才能快速找到他們想要的。

  Sidebar

  sidebar是放置你次要內容的元素,像一些廣告,網站搜索,訂閱連結(RSS, Twitter, Email, 等), 聯繫方法等。這個元素不是必需的,儘管右很多網站用它。它大多數是放在右邊的,但是你也能把它放在左邊或者兩邊,只要不擾亂主要內容的流覽就行。網站使用橫向或縱向導航,sidebar往往是用縱向導航。

0513a005.jpg

  Footer

  web頁面的尾部總會有一個頁腳,讓您的訪客知道他已經到達了你web頁面的結束部分。和header一樣,footer也不是一個特殊的元素。在你的頁腳裡包含版權,法律聲明以及主要的聯繫方式。包含一些重要的連結是個好主意,比如home page, contact page, 等. 有些網站用這個區域提供一些相關材料或者其他重要資訊。

  "Whitespace"

  你可能有強烈的願望去填充這些頁面上的空白,但是請不要這麼做。"空白"也是相當重要的。你可以看看NetTuts網站是如何有效的使用空白區域的,創建了頁面平衡給人一個好的感覺。

  以上是web頁面的骨架,現在我們來看如何黃金分割這些元素。

  黃金分割和使用網格(Grids)

  視覺的吸引力是基於比例的(比如,黃金分割),幾千年來,藝術家,設計師,建築師等都有意無意的在使用了一個共同的比例來增加他們作品的美感。這個神奇的數字是什麼呢? 1.62 (實際是 1.618…) 我不會說這個數字的起源,但是我會告訴你如何使用它。

0513a006.jpg

  使用黃金分割是非常簡單的。比如你像找到你主要內容和sidebar清單的寬度。你將使用你內容區域總的寬度除以 1.62. 然後得到555.55px. 我們不需要那麼精確,所以我們就用555px。現在你就知道你的主要內容元素是555px的寬度,你的sidebar是345px。看看多麼容易?!

  同樣,還可以應用黃金分割到其他元素的寬度和高度。

0513a007.jpg

  Using Grids

  如果你和大多數的人一樣,不想每次都抱著個計算器來計算這個黃金比率。那麼最簡單的方法就是用grid。所以你需要做的就是把你的寬度或是高度分成三分。

0513a008.jpg

  要產生更詳細的gird,只需要繼續三等分就行。如果你讀了前一篇文章"與Blueprint CSS框架的親密接觸"的話,你會看到Blueprint CSS框架用了一個詳細的gird系統。不僅僅是gird設計更容易更快,而且它也創建了一個美觀的佈局。如果你還沒有使用gird設計,那麼這是一個很好的嘗試機會。你可以為 fireworks,photoshops或者其他軟體。

0513a009.jpg

  如果你要做一個新的設計,我嚴重推薦你找一些流行的網站,評價他們的佈局,以及如何應用黃金比率和gird。然後花一些時間去實踐使用黃金分割,並在你的佈局上面使用gird。

 

神之比例 黃金分割在Web頁面設計中的運用(一)
神之比例 黃金分割在Web頁面設計中的運用(二) 

最後更新 ( 2009/07/22 )
相關文章
更多網頁設計教學

網站設計 FAQ

網站架構圖及設計流程

More...

網頁設計包括哪些費用?

More...

網站建置需要多少時間?

More...
預算有限,想先體驗網路行銷的效果嗎?
More...
如何讓商機源源不絕而來?
More...
我需不需要自行架設主機呢?
More...
什麼是網域名稱(網址)?什麼是虛擬主機(網站空間)?
More...

RUS Website Design 瑞宇.台中網頁設計公司  Copyright © 2004 振宇網頁設計 All rights Reserved.  線上詢價
振宇首頁關於振宇設計作品線上洽詢常見問題新聞時事網頁設計教學友站連結網站地圖  免費交換連結
回到首頁 聯絡振宇