網站雛型這個名詞好像是最近才開始流行起來的,但對於行走在網頁設計業的企劃們應該不陌生。

之前我都稱為首頁示意圖或是網站版面架構圖,這張圖代表著網站首頁、內頁的雛型規劃

內容大概包括主導覽列、次導覽列、最新消息、圖片展示或是聯絡資訊。

我想對於網站企劃來說,最難的是怎麼把網站的重點濃縮、視覺考量呈現於首頁。

接下來,我以香蕉王的網站(製作網站企劃書)為範例,並使用Visio 2007 設計網頁示意圖,請大家參考看看

 

1. 增繪圖

點選 "檔案>新增>新增繪圖" 或是 "Ctrl + N" ,接著選取元件圖形,基本上我只會選取基本流程圖形來用。

雖然它有概念性網站圖形可以用,但是我覺得很醜,所以我只用基本流程圖形,這就是所謂的一招半式走江湖啦

下一步,你可以在工具列選取 "圖形"  或是選取 "檔案>圖形",然後再選取你要的元件圖形。

新增繪圖元件

 

2. 變區塊外型

將右側元件導覽列的程序,點選拖曳出來放在繪圖區,並選擇你要的區塊大小。

點選 "右鍵>格式>線條",改變區塊的線條粗細與顏色,粗細選 "9" 、 圓角 "2mm" 、 顏色 "黑色濃淡25%"

改變區塊外型

線條功能選項

 

3. 面配置

設定完成後就先配置網站首頁的版面位置(可參考網頁版面設計),大小形狀會視規劃情況而調整。

 

首頁區塊配置

先將網站區分為三大區塊,網站識別區、頁面資料區、資訊聯絡區,每個區域適合放置功能大概如下:   

#1:網站識別區,適合放置主導覽列、次導覽列、AD廣告、文字廣告等。

#2:頁面資料區,適合放置分類導覽列、最新消息、熱門商品、FLASH主視覺動畫、會員登入區等等。

#3:資訊聯絡區,適合放企業聯絡資料、文字分類連結(有助於Spider程式搜尋)。


4. 劃內容

主導覽列包含,香蕉王簡介、運動訊息、商品情報、香蕉留言板、聯絡香蕉王。

次導覽列包含,加入香蕉會員、登入、Sitemap、電子報、回首頁。

香蕉王首頁示意圖

編輯文字,選擇工具列的 "文字工具" ,即可編輯。

若在要區塊裡面編輯文字,也只要在該區塊點選兩下即可編輯,接著將圖形"Ctrl+A" 全選、"Ctrl+C" 複製。

"Ctrl+V" 貼上WORD就可以了,完成的頁面和註解說明如下

香蕉王首頁版面

A:網站識別區,此區域放置,網站Logo、主導覽列、次導覽列。

B:FLASH動畫區,此區域放置FLASH動畫,

C:最新消息區,顯示近期運動訊息或是優惠活動等資訊。

D:AD廣告區,可由後端管理系統控制,並支援.swf、.jpg、.gif格式。

E:商品展示區,設定為當季新品圖片播放,可左右輪播。

F:版權資訊區,內容包含分類文字連結頁面,版權宣告等資訊。

 

製作首頁示意圖的最大優點莫過於縮減首頁的設計時間,並可以減少客戶對於首頁的認定差距。

雖然 剛開始發想是很辛苦,但是對於一個專業的網站企劃來說 這個過程是很重要的

在這個什麼都要求快的網頁設計行業裡,什麼都可以快,但是唯獨這個過程不能快

當設計與程式拿到首頁示頁圖的時候,立刻了解首頁頁面需要怎麼設計,要寫什麼功能

所以 這一張圖的功用遠比一張簡單的報價單或是一堆廢話文字來的更有意義。

 

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

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

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

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

                 - 網站企劃 - 購物車系統

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

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

                 - 網站企劃 - Visio你用了嗎

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

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

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

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

標籤:網頁設計網站企劃VISIO網站雛型首頁示意圖版型設計

 

創作者介紹

索尼的紅燈人生

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


留言列表 (7)

發表留言
  • sinchen
  • 原來這套軟體除了來拿,作軟體的流程圖之外,還有這麼多功能啊!(筆記)
  • 是阿 真的很方便
    我都靠這套軟體騙吃騙喝的 哈哈哈

    索尼 於 2009/04/04 20:50 回覆

  • Ausir
  • 你這個很讚喔 ^^

    學會一招~~

    :: corAusir :: 程式逗設計

    - 提供 平面設計 與 程式設計 的資料 -

    有提供 FLEX FLASH 以及 PHOTOSHOP 與 AI 的教學喔~

    http://blog.corausir.org

    或 點我的名字參觀喔

  • 哈哈 謝謝啦~

    索尼 於 2009/04/04 20:50 回覆

  • lzwceo589
  • 有時間
    也來玩<設計>
  • 哈哈哈 我很期待你的作品耶~

    索尼 於 2009/04/06 19:48 回覆

  • 悄悄話
  • 您的暱稱 ...八里人
  • 非常感謝你的部落格,大學老師教用visio畫平面設計圖真的是搞死我了。沒想到用來做網頁的版型設計這麼的方便,也感謝你的網站企劃文章對我幫助很大。 ^_^
  • 呵呵 歡迎你常常來 有問題也可以一起討論看看

    索尼 於 2010/12/14 21:52 回覆

  • lin Susan
  • 我的電腦沒有visio,我最近要自己架php網站,卡再版型
    可以請你幫忙做版型嗎
  • 頭目
  • 索尼你好 :

    看了幾篇你在網站設計、企劃上的文章。
    真的覺得相當相當的受用。

    不知道有沒有機會邀請你,來看看目前我以及夥伴所設立的網站平台 ?

    我留下e-mail給你,為了不想主動去打擾你,如果你有時間的話,請回信給我 :
    tt.traveltogethergmail .com

    麻煩你惹 ~
    m(_ _)m
找更多相關文章與討論