【網站規劃篇】架設網站前的第一式：畫好網站架構圖

在網站建置前，你應該先準備四件事情，分別為：畫好網站架構圖、準備網站內容素材、以及素材的處理、以及想好網頁名稱與meta欄的資訊對吧。那麼，今天這集要來詳細說明，網站架構圖可以怎麼做。由於網站有分一頁式網站，或是多頁式網站。影片的內容，我根據這兩個類別，分別舉例這個架構圖的規劃。

一、畫好網站架構圖 (骨頭)  

二、網站內容素材的資料包 (血肉)：包含了圖文、表格和影片與鏈結等，依架構圖分門別類歸檔

三、內容素材處理：資料夾、文字檔案、和圖片命名要有規則性，圖片也要壓縮過

四、網頁名稱、關鍵字、meta描述欄資訊：這個部份特別是針對多頁式網站來說格外重要

由於網站有分一頁式網站，或是多頁式網站。以下我根據這兩個類別，分別舉例這個架構圖的規劃。 

一、一頁式網站

以一頁式網站來說，以下我用一個形象官網的首頁來做示範。比方，我是一個設計公司，我用ppt去做一個網頁的Layout，也就是做你一頁網站的佈局架構，記得，把ppt的頁面改成直式，這樣你畫架構的空間才會比較足夠，像我這邊已經先做好一個首頁Layout的範本來做示範。 

一頁式網站頁面Layout示範：

網站的最上頭是導航(功能列)，左邊放置logo，最右上角我打算放一個「聯絡我們」的按鈕。接著，網站進來看到的第一個視覺，是ㄧ個公司形象的大Banner，訪客要往下滑，會看到公司的最新消息，然後放置設計團隊的成員與他們的專長項目，接著就是設計團隊接過哪些專案以及他們的作品，這版塊我打算用圖冊的方式來展現，然後是這個設計公司的簡介，除了簡介的內容外，也打算在這區塊裡放置按鈕，讓訪客下載「公司的服務手冊」。接著，連絡我們的主題區塊，計畫讓訪客可以留言連絡，同時也附上公司地址，以及顯示公司位置的地圖；最後，放置公司社群的icon。 

以上，是針對一頁式網站製作前，你可以先用ppt做出一個頁面的規畫，這樣可以加速你與設計師溝通的速度，或是你自己在製作網站時，快速找到相對應的板塊模組，看該模組是否符合你的需求。 

二、多頁式網站的架構圖

至於多頁式網站的架構圖，以前我負責公司網站建置時，也是先用ppt畫出網站的layout，看起來像組織圖。這個架構是客製化網站的架構，Header是網站的表頭，包含站內搜尋、會員登入登出、訂閱電子報、網站語言版本的切換。 

在功能列(導航)這邊，包含產品、解決方案、技術與服務、夥伴專區、行銷資源、關於我們等。這些項目下，就是下拉式選單，也就是該主題項目下的第二層。如果你是在公司裡上班，這張架構圖的產生，就是你與內部幾個關鍵人士，經過不斷地討論與修改，最後才會確認定下來的結果。 

即便是多頁式網站，每個主題的網頁，我也是會畫出該頁面的Layout出來，比方產品頁面的版型與功能需求，我利用ppt做出layout，由於需要對外跟工程師溝通，因此，Layout的旁邊會附帶說明文字，一般來說，做到這裡即可。 

只是我多做ㄧ步，就是把我的草圖做個具象化的假網頁樣貌，這目的是為了促進我在內部的溝通速度，幫助他人想像畫面。就很像賣預售屋的建商，總是房子還沒蓋好，建商通常在廣告上已經以假的房子樣貌圖，讓許多客戶看，這樣客戶比較腦海有畫面，也比較容易買單。 

不過說實在的，以網站建置的專案負責人來說，做到我前面說的，把網站的架構圖，和主題網頁的Layout，以框框的方式畫出來，並加上ㄧ些功能需求上的說明文字就可以了。這對於如果你是發包給外部的工程師來做，是ㄧ個蠻重要的溝通項目，外包廠商才能知道你每一個類目下的頁面，該呈現甚麼樣貌，以及你的需求，工程師到底辦不辦得到。 

而基本的多頁式網站的內容主題，大多在這些主題上環繞：關於我們、產品與服務、聯絡我們(聯絡客服)、技術與服務(技術支援)、應用案例、解決方案、銷售地點(經銷商)、合作夥伴、線上商店、購物車、註冊/登入等。這些項目大多列在功能列或導航上，不是上面說的項目全部都出現在功能列上，而功能列上的項目，有的還會長出下拉式選單，也就是來到網頁第二層，甚至有的下拉選單到第三層，但這種情況不多，而且第三層已經是實際使用便利性上的極限了。 

有關架設網站前要準備的四件事情裡的其中第一件：畫好網站架構圖的部分，以上做幾個簡單範例，希望這個內容對負責網站製作專案的你有所幫助。 如果你採用觀看影片的方式，會更清楚我說的部份。

Strikingly網站架設平台：https://www.strikingly.com/a/pRKcCS

平面設計平台Canva：https://www.canva.com/zh_tw/​

線上免費圖片壓縮的平台：https://free.com.tw/squoosh/​