在網站建置前,你應該先準備四件事情,分別為:畫好網站架構圖、準備網站內容素材、以及素材的處理、以及想好網頁名稱與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/