網頁設計並不是一般人會遇到的事物，所以許多人除非是自己要做網站了，或者老闆指派他當窗口尋找廠商，才會真正接觸到「網站」這回事。
在這裡，夏木樂告訴大家該如何規劃網站，不只自己自己尋找廠商時可以拿來溝通用，也可以參考這些建議替您的公司規劃未來的網站架構。
本文章目次：
第一步：蒐集資料
茫茫網海毫無頭緒，第一步就是先找到參考案例。你可以先建立一張表格，列出所有你們同業、競業與相似產業的網站列表，讓團隊可以互相提供各自的經驗，整合大家的認知。
我們提供一份表格，讓大家可以快速取用：按此下載
如果對於蒐集案例網站毫無頭緒，也可以看看我們的網頁設計資源庫，裡面蒐集了許多集結各類設計案例的網站，絕對足夠您大飽眼福： 【夏木樂精選】 33個實用的網頁設計靈感相關資源
有了這些資料，對於自己想做什麼樣的網站，就可以有一個基礎的認識與理解。從別人的案例學習是一個好的開始。
第二步：認識網站功能
網站有許多獨特的結構，也有專屬的名詞對應。先理解與認知這些名詞，就能良好的幫助您規劃網站時，用正確的名詞來溝通。
主導覽、主選單
網站最上方的橫向選單，一般稱作主導覽。我們會確保最重要的頁面可以在這裡被找到。一般來說都會包含：
首頁
關於我們
商品/服務簡介
服務特色
聯絡我們
FAQ
等等...最重要的大功能。
在呈現形式方面，主導覽有時候會採用下拉選單或 MEGA MENU 來容納更多子選項。
首頁大橫幅
又稱主視覺形象圖、或者輪播橫幅。主要用來展示最新優惠、網站特色介紹、活動資訊等
特色資訊
特色資訊可以放服務介紹、服務優勢與各類服務說明等。有很多種不同的設計模式，這邊就可以多看看別人家網站怎麼設計囉。
頁尾
頁尾可以繁複也可以簡潔，端看網站需求。好的頁尾設計可以達成更高的導覽效果。有時候，大型網站會把主選單塞不下的額外資訊都放在頁尾，例如「徵才」、「合作洽詢」、「隱私權宣告」等等。也有些公司會把主選單的內容全部攤開當做Sitemap，方便使用者快速找到需要的內容。
除了上面介紹的元素外，網站能用的資訊元素還有非常多。如果想要了解的話，歡迎追蹤我們喔
第三步：規劃網站頁面
網站不只作為一個門面，更是您店鋪的網路入口大門，應該要嘗試讓訪客了解關於貴公司的重要資訊。
我們提供了一些常見的項目，您可以將這些頁面拿來組合或參考：
| 項目 | 說明 |
| 徵才資訊 | |
| 合作提案 | |
| 部落格 | 較為軟性的與顧客互動或傳遞訊息的空間 |
| FAQ 常見問答 | 常見問題集，讓顧客不會重複問一樣的問題 |
| 服務條款 | |
| 隱私權條款 | |
| 經營團隊介紹 | |
| 經營理念 | |
| 全省經銷商 | 提供各地經銷商(門市)通訊錄 |
| 服務項目 | 介紹服務項目、性質 |
| 線上訂購/報價 | 提供表單供消費者訂購、預約、報價或索取產品資料 |
| 產品注意事項 | 產品使用注意事項說明 |
| 售後服務 | 售後服務專區 |
| 意見留言區 | 留言板供使用者提供對服務、產品的評分或意見 |
| 產品討論 | 討論區可提供客戶服務，回答客戶意見 |
| 申請維護服務 | 申請表單可申請服務 |
| 聯絡我們 | 填寫表單電郵至公司信箱及公司聯絡相關資訊 |
| 最新消息 | 公司最新公告、活動、展覽訊息…等等 |
| 訓練課程 | 最新課程表 |
| 合作、結盟廠商 | 合作、結盟廠商資料與連結 |
第四步：構思文案
網頁的內容切忌長篇大論，訪客不會有那麼多時間仔細閱讀。一般來說，網頁是分成一個區塊一個區塊的展示內容。
每個區塊的文字精簡扼要，有需要閱讀詳細訊息再點到內頁就好。我們提供一些範例可以參考。
特色
您應該要思考一下，公司的特色是什麼? 有什麼優於他人的優勢與服務，如果能夠濃縮成關鍵字、條列清單，肯定更有幫助。
問題或解決方案
描述您的目標客群可能面對的問題，並針對這些問題提供什麼解決方案。如果描述得夠精準，打到痛點，肯定會讓訪客想要認真點進去看個所以然。
精選商品/服務
您的產品或服務，有沒有什麼非常經典、熱門、獲獎、或主推的重點商品? 這些都可以優先放在首頁中，讓訪客一進站就看到您最精彩的火力展示。
促銷資訊
促銷資訊的文案要非常精確，最好是直接打中人們的渴望，或者是提供明確的數字，例如「只要2000」、「最後5天」等等，打破訪客內心的猶豫，直接前往下單。
嘉儀家品，用倒數計時器，建立機會不再有的緊迫感
以上只是一部份的文案推薦寫法，如果您還想要參考更多案例，歡迎參觀我們的作品集。
第五步：討論與修改
如果要與公司內部或團隊討論，可以考慮做成簡單的列表清單，例如：
接下來可以善用 Word 的 Smart Art 來產生樹狀圖：
或者用 Excel or Google 試算表，製作詳細的頁面說明。如下圖是我們在與大型網站的客戶討論時用的表格，可以精確呈現各種頁面的內容與操作邏輯。
如果您為了格式感到苦手，我們提供了範例文件：按此下載
附註：好用工具推薦
整理以上資料時，如果您有合適的工具，用來統整資訊與相互討論絕對會更方便。我們推薦幾套私房的好用工具給你們：
| 名稱 | 用途 |
| Notion | 非常直覺且功能強大的協做平台，也可以當做個人化筆記工具。（有免費） |
| Evernote | 老牌強大的雲端筆記工具，可以離線編輯，多裝置同步（有免費） |
| Balsamiq | 簡單易懂的框線圖繪製軟體，可以繪製簡單的介面供討論用 |
| Figma | 目前非常流行的UI/Prototype繪製工具 |
| Axure RP | 業界功能最強大的 prototype 軟體，偏專業使用 |
到了以上階段，算是很足夠一般工作室或公司自行規劃網站架構了，整理出來的表格或清單，也很適合聯繫網頁設計公司提供後續服務。有了自行規劃的網站文件，網頁公司可以非常快速的理解您的網站需求，並給予報價與適當建議，節省了非常多的時間。
如果您已經有了一份自己規劃的文件，需要更專業的建議。或者您希望有專業團隊幫你進行詳細的網站規劃，歡迎聯繫夏木樂團隊。
(PS. 本文章的所有案例，都是我們製作的喔)
延伸閱讀：
