要開始規劃版面時,我想蠻多網站企劃也跟我一樣毫無頭緒

這時候,不彷暫時離開電腦,拿出紙筆,什麼都別想讓心裏平靜一下。

等你覺得差不多了,那就在紙上開始畫出你想像中的版面。

先想著這個網站有什麼功能、該怎麼呈現、SEO與CSS需要注意什麼...等等。

其實,當你在一邊畫一邊修改時,已經慢慢完成網站首頁的版面了。

相信我,這個方法很有效,常常會畫出你想要的網站版型。

那麼 這次我就來介紹幾種比較常用的網站版型。

 

先介紹單欄式網站,以荷斯特數位網頁設計的版面為例

  ideahost

 

藍色區塊代表:最重要、最容易引人注意的區塊。

黃色區塊代表:次重要引人注意的區塊。

紅色區塊代表:最不容易引人注意的區塊。


單欄式版面

A:網站LOGO,放置網站的標誌及主導覽列。

B:動畫形象區,放置網站的Flash形象展示動畫。

C:最新作品區,放置近期最新的作品。

D:資訊公告區,發佈最新公告的資訊。

E:最新消息區,發佈有關於網頁設計等相關資訊,以增加閱讀性。

F:版權資訊區,放置有關於網站的文字連結與版權宣告等資訊。

 

這是一個簡單的網站版面設計,也是這個網站想要呈現的效果。

以白色為基底的設計是想要傳達簡單、明亮、清楚的感覺,並以綠色點綴版面。

另外,E區在視覺瀏覽上是比較弱的,所以將資訊呈現半閱讀狀態

讓資訊能夠吸引瀏覽者並點選按鈕,繼續閱讀下去。

類似的單欄式網站如OGILVY奇美NIKESONY可口可樂...等等。

 

 

兩欄式網站,以宏碁的版面為例:

acer

 

兩欄式版面

A:網站LOGO,放置網站Logo、聯絡我們與產品搜尋。

B:導覽功能表,放置網站最新消息與產品資訊供瀏覽者直接點選。

C:動畫形象區,放置網站的Flash形象展示動畫與主導覽列。

D:產品廣告區,放置產品搜尋、相關連結與公司簡介等資訊,並設計兩個AD廣告區塊。

 

兩欄式網站的優點就是版面設計清楚、簡單,瀏覽者馬上就可以找到想得知的資訊。

類似的兩欄式網站如emome手機王天下雜誌...等等。

 

 

最後,介紹三欄式網站的版面設計,以哩哩叩叩雜貨網做為例:

lilicoco.com

 

 三欄式版面

 

A:網站LOGO,放置網站的標誌與AD1、AD2與次導覽列。

B:導覽功能表,為主導覽列,以文字方式呈現產品分類,主分類點選後則出現次分類下拉式選單

C:會員訊息區,放置會員登入、如入會員、忘記密碼與最新消息。

D:動畫商品區,放置網站的Flash形象展示動畫與推薦商品。

E:商品廣告區,放置新品上市與AD3-AD5的廣告輪播。

F:版權資訊區,放置有關於網站的文字連結與版權宣告等資訊。

 

這是一個簡單的購物網站,因此採用商品簡單上架的基礎原則,讓使用者來瀏覽時不會眼花撩亂。

三欄式設計通常較為大器,常用於資訊量大、更新速度快,並給人開闊、有氣勢的感覺。

這種三欄式架構在運用在很多不同類型的網站上,如博客來黑秀網燦坤3C.、城邦誠品..等等。

 

 博客來版面設計

 

燦坤3C版面設計

 

基本上,網站的整體架構是差不多的,只是要思考如何將網站的資訊規劃適當的位置呈現出來。

因此,在規畫細項功能時,我們可以先畫出大架構在以拼圖的方式慢慢將功能擺上適當的位置。

對了!!在告訴大家一件事,那個欄位架構圖是用Visio畫出來的喔,不是AI

朋友們 可以去玩玩看這一個軟體,真的蠻好用的~

 

相關文章: - 網站企劃 - 製作網站企劃書

                 - 網站企劃 - 網頁版面設計

                 - 網站企劃 - 網站首頁的版面設計

                 - 網站企劃 - 購物網站的概念

                 - 網站企劃 - 購物車系統

                 - 網站企劃 - 網站的基本規劃

                 - 網站企劃 - 企劃書的前置作業

                 - 網站企劃 - Visio你用了嗎

                 - 網站企劃 - 用Visio設計網站版面雛型

                 - 網站企劃 - 建構網站前的製作要點

                 - 網站企劃 - 網頁企劃書的概念補充

--------------------------------------------------------------------------------------------------------------

標籤:網頁設計版面設計網站企劃欄位架構圖

創作者介紹

索尼的紅燈人生

索尼 發表在 痞客邦 PIXNET 留言(6) 人氣()


留言列表 (6)

發表留言
  • 史萊姆
  • 要設計漂亮網頁真的很難,當我把所有元素組合後,美感都不見了
  • 茵
  • 很實用耶...借我引用哦..謝謝您

    Dear版主您好:

    看來真的很實用耶..借用引用回家囉..謝謝您無私分享好康..呵
  • 呵呵 謝謝你啦
    請儘管用 不用客氣~

    索尼 於 2009/05/06 17:32 回覆

  • cyanuric
  • 這邊好多東西都可以參考~真好^^
    會不時來晃晃囉~
  • 哈哈 歡迎你常來

    索尼 於 2009/06/14 23:48 回覆

  • 熊ㄝ
  • 您好~因為我要製作畢業網站,版面固定可能是800*600或1024*768(沒有捲軸)
    想請問一下有沒有一些推薦參考的網站
    只要是固定視窗就好了
    不用一定要我上面兩種規格~~~
    大概類似海尼根的網站
    可否推薦些許相似網站
    謝謝喔~
  • 那我介紹你一本書好了 你可以去誠品找找看
    Web Design Index by Content.04 這是介紹美國方面的網站
    應該可以找到你想要參考的網站 今年六月才出版的 很新鮮喔

    索尼 於 2009/07/08 23:06 回覆

  • 悠閒一下
  • 你寫得非常淺顯易懂
    真的很感謝你的介紹~~
  • 呵呵 不會啦 歡迎你常來

    索尼 於 2009/07/23 15:47 回覆

  • 悄悄話
找更多相關文章與討論