【網頁設計大解密】五步驟教你如何替自己規劃網站架構

網站規劃

【網頁設計大解密】五步驟教你如何替自己規劃網站架構
2022-10-03

網頁設計並不是一般人會遇到的事物,所以許多人除非是自己要做網站了,或者老闆指派他當窗口尋找廠商,才會真正接觸到「網站」這回事。

在這裡,夏木樂告訴大家該如何規劃網站,不只自己自己尋找廠商時可以拿來溝通用,也可以參考這些建議替您的公司規劃未來的網站架構。

本文章目次:

  • 第一步:蒐集資料
  • 第二步:認識網站功能
  • 第三步:規劃網站頁面
  • 第四步:構思文案
  • 第五步:內部討論修改
  • 附錄:好用工具推薦

第一步:蒐集資料

茫茫網海毫無頭緒,第一步就是先找到參考案例。你可以先建立一張表格,列出所有你們同業、競業與相似產業的網站列表,讓團隊可以互相提供各自的經驗,整合大家的認知。

我們提供一份表格,讓大家可以快速取用:按此下載

如果對於蒐集案例網站毫無頭緒,也可以看看我們的網頁設計資源庫,裡面蒐集了許多集結個類設計案例的網站,絕對足夠您大飽眼福。

有了這些資料,對於自己想做什麼樣的網站,就可以有一個基礎的認識與理解。從別人的案例學習是一個好的開始。

第二步:認識網站功能

網站有許多獨特的結構,也有專屬的名詞對應。先理解與認知這些名詞,就能良好的幫助您規劃網站時,用正確的名詞來溝通。

主導覽、主選單

網站最上方的橫向選單,一般稱作主導覽。我們會確保最重要的頁面可以在這裡被找到。一般來說都會包含:

  • 首頁
  • 關於我們
  • 商品/服務簡介
  • 服務特色
  • 聯絡我們
  • FAQ

等等...最重要的大功能。

在呈現形式方面,主導覽有時候會採用下拉選單或 MEGA MENU 來容納更多子選項。

圖為簡易式下拉選單
圖為簡易式下拉選單
如果要容納更多子選單,會採用所謂的 MEGA MENU 設計
如果要容納更多子選單,會採用所謂的 MEGA MENU 設計

首頁大橫幅

又稱主視覺形象圖、或者輪播橫幅。主要用來展示最新優惠、網站特色介紹、活動資訊等

這是單張橫幅範例,用在視覺形象建立
這是單張橫幅範例,用在視覺形象建立
這是輪播橫幅案例,可以用在各類促銷
這是輪播橫幅案例,可以用在各類促銷

特色資訊

特色資訊可以放服務介紹、服務優勢與各類服務說明等。有很多種不同的設計模式,這邊就可以多看看別人家網站怎麼設計囉。

案例:至尊股票機
案例:至尊股票機
案例:六福村
案例:六福村
案例:CAA 亞洲創作者學院
案例:CAA 亞洲創作者學院

頁尾

頁尾可以繁複也可以簡潔,端看網站需求。好的頁尾設計可以達成更高的導覽效果。有時候,大型網站會把主選單塞不下的額外資訊都放在頁尾,例如「徵才」、「合作洽詢」、「隱私權宣告」等等。也有些公司會把主選單的內容全部攤開當做Sitemap,方便使用者快速找到需要的內容。

全部展開式頁尾(六福村)
全部展開式頁尾(六福村)
放額外資訊的頁尾(Datavideo)
放額外資訊的頁尾(Datavideo)
簡易風格頁尾
簡易風格頁尾

除了上面介紹的元素外,網站能用的資訊元素還有非常多。如果想要了解的話,歡迎追蹤我們喔 

第三步:規劃網站頁面

網站不只作為一個門面,更是您店鋪的網路入口大門,應該要嘗試讓訪客了解關於貴公司的重要資訊。

我們提供了一些常見的項目,您可以將這些頁面拿來組合或參考:

項目 說明
徵才資訊
合作提案
部落格 較為軟性的與顧客互動或傳遞訊息的空間
FAQ 常見問答 常見問題集,讓顧客不會重複問一樣的問題
服務條款
隱私權條款
經營團隊介紹
經營理念
全省經銷商 提供各地經銷商(門市)通訊錄
服務項目 介紹服務項目、性質
線上訂購/報價 提供表單供消費者訂購、預約、報價或索取產品資料
產品注意事項 產品使用注意事項說明
售後服務 售後服務專區
意見留言區 留言板供使用者提供對服務、產品的評分或意見
產品討論 討論區可提供客戶服務,回答客戶意見
申請維護服務 申請表單可申請服務
聯絡我們 填寫表單電郵至公司信箱及公司聯絡相關資訊
最新消息 公司最新公告、活動、展覽訊息…等等
訓練課程 最新課程表
合作、結盟廠商 合作、結盟廠商資料與連結

第四步:構思文案

網頁的內容切忌長篇大論,訪客不會有那麼多時間仔細閱讀。一般來說,網頁是分成一個區塊一個區塊的展示內容。

如圖: 網站的文案都是一個個的區塊
如圖: 網站的文案都是一個個的區塊

每個區塊的文字精簡扼要,有需要閱讀詳細訊息再點到內頁就好。我們提供一些範例可以參考。

特色

您應該要思考一下,公司的特色是什麼? 有什麼優於他人的優勢與服務,如果能夠濃縮成關鍵字、條列清單,肯定更有幫助。

圖為【1號課堂 網站】特色區塊
圖為【1號課堂 網站】特色區塊

問題或解決方案

描述您的目標客群可能面對的問題,並針對這些問題提供什麼解決方案。如果描述得夠精準,打到痛點,肯定會讓訪客想要認真點進去看個所以然。

圖為永豐【效率投資成為你的投資鬧鐘】網站
圖為永豐【效率投資成為你的投資鬧鐘】網站

精選商品/服務

您的產品或服務,有沒有什麼非常經典、熱門、獲獎、或主推的重點商品? 這些都可以優先放在首頁中,讓訪客一進站就看到您最精彩的火力展示。

圖為 Datavideo 首頁精選商品
圖為 Datavideo 首頁精選商品

促銷資訊

促銷資訊的文案要非常精確,最好是直接打中人們的渴望,或者是提供明確的數字,例如「只要2000」、「最後5天」等等,打破訪客內心的猶豫,直接前往下單。

全聯: 夏日涼感愛情,用簡單的數字說明積分+費用換取商品
全聯: 夏日涼感愛情,用簡單的數字說明積分+費用換取商品
嘉儀家品,用倒數計時器,建立機會不再有的緊迫感
嘉儀家品,用倒數計時器,建立機會不再有的緊迫感

以上只是一部份的文案推薦寫法,如果您還想要參考更多案例,歡迎參觀我們的作品集

第五步:討論與修改

如果要與公司內部或團隊討論,可以考慮做成簡單的列表清單,例如:

接下來可以善用 Word 的 Smart Art 來產生樹狀圖:

或者用 Excel or Google 試算表,製作詳細的頁面說明。如下圖是我們在與大型網站的客戶討論時用的表格,可以精確呈現各種頁面的內容與操作邏輯。

如果您為了格式感到苦手,我們提供了範例文件:按此下載

附註:好用工具推薦

整理以上資料時,如果您有合適的工具,用來統整資訊與相互討論絕對會更方便。我們推薦幾套私房的好用工具給你們:

名稱 用途
Notion 非常直覺且功能強大的協做平台,也可以當做個人化筆記工具。(有免費)
Evernote 老牌強大的雲端筆記工具,可以離線編輯,多裝置同步(有免費)
Balsamiq 簡單易懂的框線圖繪製軟體,可以繪製簡單的介面供討論用
Figma 目前非常流行的UI/Prototype繪製工具
Axure RP 業界功能最強大的 prototype 軟體,偏專業使用

到了以上階段,算是很足夠一般工作室或公司自行規劃網站架構了,整理出來的表格或清單,也很適合聯繫網頁設計公司提供後續服務。有了自行規劃的網站文件,網頁公司可以非常快速的理解您的網站需求,並給予報價與適當建議,節省了非常多的時間。

如果您已經有了一份自己規劃的文件,需要更專業的建議。或者您希望有專業團隊幫你進行詳細的網站規劃,歡迎聯繫夏木樂團隊

(PS. 本文章的所有案例,都是我們製作的喔)

延伸閱讀:

Ask Simular