網站架構規劃

先決定要有哪些單元，其他事情才有辦法談

網站架設的討論常常從「我想要這種風格」開始，但版型設計要能定案，前提是知道網站有幾個單元、每個單元的內容量多寡、哪些需要特別強調。單元沒定，設計只能憑感覺畫，改版次數就會失控。

所謂「單元」，指的是網站的主要功能區塊，通常也對應到主選單上的一個項目。以下先看標準配置，再談取捨。

幾乎每個企業網站都會有的五個單元

這五個是基本盤。差別在於每一個要做到什麼深度——「產品」可以是一頁列表，也可以是有分類、規格表、詢價車的完整系統，兩者的工作量差距是數倍。

視行業別再加的單元

• 案例實績——工程、設計、顧問類最需要。客戶要看的是「你做過類似的嗎」
• 常見問答——技術門檻高、客戶疑問多的行業。同時是很好的長尾搜尋入口
• 技術文件／下載專區——製造業、儀器設備類，提供型錄與規格書
• 據點查詢——有多個門市或經銷商時
• 人才招募——長期缺人的行業，比人力銀行更能傳達公司文化
• 知識文章／部落格——需要靠內容累積搜尋流量的公司
• 會員專區——需要區分公開資訊與客戶專屬資訊時

一個判斷單元該不該做的方法

每加一個單元，就要問三個問題：

1. 誰會點進去看？ 說得出具體的人物與情境，才算數。「應該有人會看」不算
2. 裡面要放什麼內容？現在有嗎？ 這是最關鍵的一問。多數失敗的單元不是設計不好，是沒有內容可以放
3. 誰負責維護？多久更新一次？ 沒有明確的負責人，就會變成空殼

三個問題有任何一個答不出來，這個單元就先不要做。網站上線後要加單元並不困難，但一個長期空著的頁面，對訪客的印象是負面的——「這家公司好像沒在經營」。

常見的規劃錯誤

把組織架構直接搬到網站上

公司內部分成業務部、技術部、管理部，網站就照這樣分。但訪客不在乎你的組織架構，他們在乎的是自己的問題能不能被解決。網站結構應該依「訪客想找什麼」來分，不是依「公司怎麼分工」來分。

單元開太多

主選單超過七個項目，訪客就開始難以選擇。內容不夠多的單元，應該合併——「公司沿革」「經營理念」「組織架構」三個單元，多數情況下合成一個「關於我們」就夠了。

把「其他」當成單元

凡是出現「其他」「相關資訊」這種名稱，通常代表分類沒想清楚。這種單元訪客不會點，因為看不出裡面是什麼。

忘了規劃「沒有內容時長什麼樣子」

案例只有兩筆、消息只有一則的時候，版面會不會很空？這在規劃階段就要考慮，否則上線當天才發現版面撐不起來。

單元規劃與費用的關係

單元數量會影響費用，但影響更大的是每個單元的性質：

• 純靜態頁面（如關於我們）——成本最低，一次做好
• 列表型系統（如最新消息、案例）——需要後台管理程式，成本中等，但可重複使用
• 有篩選、搜尋、關聯的系統（如產品目錄）——成本較高，欄位越多越貴
• 牽涉交易或會員的系統——成本最高，且需考慮資安與個資

實務上，把「這個單元需要後台自行管理嗎」想清楚，比爭論單元數量更能有效控制預算。判斷方式詳見哪些內容需要做成後台可自行管理。

規劃順序建議

1. 列出所有「想要」的單元，不設限
2. 對每個單元問上面那三個問題，刪掉答不出來的
3. 把剩下的分成「上線必備」與「第二階段」兩組
4. 只針對第一組討論設計與報價
5. 第二階段的單元，在架構上預留位置即可

分階段的好處是：上線時間縮短、預算可控，而且第二階段的需求往往在網站實際運作幾個月後會變得更清楚——有些原本以為必要的，實際上根本不需要。

選單是網站的動線，不是目錄

很多人把選單當成「把所有頁面列出來」的目錄，但選單真正的功能是引導——讓不同目的的訪客，用最少的點擊到達自己要的地方。

一個規劃良好的選單，訪客不需要思考就知道該點哪裡。做不到這一點，網站的其他努力都會打折。

主選單的項目數量

建議控制在五到七個。理由不是美觀，是認知負荷——項目太多時，人會傾向不做選擇，直接離開或改用搜尋。

如果現在超過七個，處理方式：

• 合併相近項目——「公司簡介」「經營理念」「大事紀」合成「關於我們」
• 降級為次選單——不是每個頁面都需要出現在主選單
• 移到頁尾——隱私權政策、網站地圖、著作權聲明這類頁面，放頁尾就好
• 檢討是否真的需要——參考網站要規劃哪些單元的三個判斷問題

層級深度：三層是上限

從首頁點擊到任何一個內容頁，最多三次點擊。超過三層會有兩個問題：

• 訪客找不到——每多一層，願意繼續點下去的人就少一截
• 搜尋引擎抓取深度不足——層級越深的頁面，被收錄的優先度越低，更新後重新被抓取的時間也越久

如果內容多到三層裝不下，通常不是層級要加深，而是分類方式要重想。可以考慮改用篩選（依用途、依規格、依價位）取代層層點擊，讓訪客用不同角度切入同一批內容。

項目名稱怎麼取

用訪客的詞，不是公司內部的詞

「解決方案」「整合服務」「產品矩陣」這類詞，公司內部講得很順，訪客看了不知道裡面是什麼。直接寫「工業風管設計」「冷氣安裝維修」反而清楚。

判斷方法：把選單念給一個完全不懂你這行的人聽，問他每一項裡面會有什麼。答不出來的就要改。

字數盡量一致

「關於我們」「產品」「我們提供的專業技術服務項目」——長短差太多，視覺上不整齊，手機版更明顯。盡量控制在二到五個字。

避免只用英文

ABOUT、SERVICE、CONTACT 看起來俐落，但對搜尋引擎而言，中文的選單文字才是有效的關鍵字訊號。建議中文為主，英文作為視覺副標，兩者並存。

手機版的選單

目前多數網站的流量以手機為主，選單規劃必須同時考慮小螢幕：

• 漢堡選單是標準做法，但重要的動作（如聯絡電話、詢價）建議直接常駐在畫面上，不要藏在選單裡
• 下拉式選單在手機上不好操作——沒有滑鼠停留的概念，需要改成點擊展開
• 三層以上在手機幾乎不可用，這也是層級要控制的原因之一
• 選單項目的點擊區域要夠大，手指不像滑鼠那麼精準

容易被忽略的三個動線

麵包屑

顯示「首頁 › 產品 › 空調設備 › 型號」這樣的路徑。作用有二：讓訪客知道自己在哪、以及提供往上一層的捷徑。從搜尋結果直接進入內頁的訪客特別需要它——他們沒有經過首頁，對網站結構毫無概念。

內容之間的橫向連結

看完 A 產品的人，可能對 B 產品也有興趣；看完某篇文章的人，可能想看相關文章。這些連結不在選單裡，但實際上承擔了大量的瀏覽動線，對搜尋引擎理解網站結構也有幫助。

頁尾

頁尾是訪客看完一頁內容後的落點。除了公司資訊，建議放上主要單元的連結與聯絡方式，讓人不必捲回頂端。

規劃階段的檢查方法

選單畫好之後，用三個真實情境走一次：

1. 第一次來的訪客——想知道這家公司做什麼、可不可信。他要點幾下才有答案？
2. 有明確需求的訪客——已經知道要找什麼產品。他能不能直接找到？
3. 要聯絡的訪客——決定要詢價了。電話和表單在任何頁面都找得到嗎？

三個情境都能在三次點擊內完成，這個選單就合格了。走不通的地方，就是要調整的地方。

選單與網址結構的關係

選單的層級通常也會反映在網址上。規劃時建議一併決定，因為網址結構在上線後要改動，成本遠高於一開始想清楚——所有舊網址都需要 301 轉向處理。

相關考量可參考樹狀圖與網站地圖怎麼畫。

為什麼要先畫出來

網站架設最常見的糾紛，是雙方對「網站長什麼樣」的想像不同。口頭討論很難精確，等到設計稿出來才發現落差，修改成本已經產生。

規劃階段用兩種圖把架構具體化，可以大幅降低這個風險：

• 樹狀圖——網站有哪些頁面、彼此的層級關係
• 線框圖——單一頁面上要放哪些區塊、順序如何

兩者都不需要美術能力，用紙筆或簡單的線上工具就能完成。

樹狀圖怎麼畫

基本形式

首頁
├─ 關於我們
│   ├─ 公司簡介
│   └─ 服務據點
├─ 產品介紹
│   ├─ 空調設備
│   │   └─ （產品明細頁）
│   └─ 通風工程
├─ 施工實績
│   └─ （案例明細頁）
├─ 最新消息
│   └─ （消息明細頁）
└─ 聯絡我們

畫的時候要標註三件事

1. 這一層是列表還是單頁——「產品介紹」點進去是列表，「公司簡介」點進去是一頁內容，兩者的程式工作量完全不同
2. 哪些是後台可管理的——用不同顏色或符號標示。這直接對應報價
3. 預估數量——產品有 20 項還是 500 項，決定要不要做分類與搜尋功能

括號表示的「明細頁」是同一個版型重複套用，不需要各自設計。這一點常被誤會成「有 100 個產品就要設計 100 頁」，實際上只需要設計一個明細頁版型。理解這件事，對看懂報價單很有幫助。

線框圖怎麼畫

線框圖只處理結構與優先順序，不處理顏色、字體、圖片。用方框和文字標示即可。

以首頁為例，由上而下排出

1. 主視覺——一句話說明你是做什麼的
2. 核心服務——三到四個區塊
3. 為什麼選我們——具體事實，不是形容詞
4. 代表案例——三筆
5. 最新消息——三筆
6. 聯絡方式與行動呼籲

重點在於順序。畫在上面的就是你認為最重要的，這個排序才是設計要溝通的核心，比「用什麼顏色」重要得多。

每個區塊要註明的事

• 這一區要放幾筆資料
• 資料從哪裡來（後台哪個系統）
• 手機版時這一區怎麼變化，或要不要隱藏

兩種圖各自解決什麼問題

順序不能顛倒：樹狀圖沒定，報價就只能是估算；線框圖沒定，設計稿就會反覆修改。

用樹狀圖檢查三件事

一、深度有沒有超過三層

從首頁數下來超過三層的頁面，訪客不容易找到，搜尋引擎的抓取優先度也較低。

二、有沒有孤島頁面

沒有任何地方連過去的頁面，等於不存在。規劃時就要確認每一頁「從哪裡進得去」。

三、內容量是否失衡

如果某一個分支特別龐大，其他分支都很單薄，通常代表分類方式需要調整——把大的拆開，或把小的合併。

樹狀圖也是驗收與後續維護的依據

網站完成後，樹狀圖可以直接用來核對：每個規劃的頁面是否都存在、後台管理項目是否都做出來了。這比憑印象驗收可靠得多。

上線後，這張圖也是製作網站地圖檔案的基礎——把結構化的頁面清單提交給搜尋引擎，有助於完整收錄。

如果不知道怎麼開始

最實際的做法：找三個同業的網站，把它們的選單抄下來排在一起比較。 你會很快看出哪些單元是這個行業的標準配備、哪些是各家差異、以及哪些做法你覺得不好。

這不是抄襲，是理解使用者的既有預期。訪客逛過同業網站，對「這類公司的網站應該長怎樣」已經有預設，太偏離反而造成困擾。

整理完之後，再回頭問那三個判斷問題，決定自己要保留哪些。

這個決定直接影響報價與長期成本

網站的頁面可以分成兩種：一種是做好就固定的，要改必須找廠商；另一種是有後台管理程式，可以自己新增修改。

後者的建置成本明顯較高，因為要多做一整套管理介面、資料庫與權限控制。但長期來看，需要頻繁更新的內容如果沒做成可管理，每次修改都要付費，累積下來反而更貴，而且更新速度受制於廠商。

所以問題不是「要不要做後台」，而是「哪些單元值得做，哪些不必」。

判斷的四個問題

一、多久會改一次？

二、改的是內容還是版面？

後台管理處理的是內容——文字、圖片、資料筆數。如果需求是「把這個區塊移到上面」「換個配色」，那屬於版面調整，後台通常做不到，仍需要廠商處理。

釐清這一點很重要，否則會有「我明明有後台為什麼還是不能改」的落差。

三、有沒有人會用、願意用？

這是最常被忽略的一問。做了後台但公司沒有人負責更新，這筆錢就浪費了。實務上很多網站的最新消息停留在上線那天，就是這個原因。

規劃時就要指定負責人，並確認對方的能力與意願。如果全公司只有老闆會用電腦而他沒空，那不如做成靜態頁面，需要時請廠商改。

四、資料是否有結構性？

如果內容是重複格式的多筆資料——每筆都有標題、日期、圖片、說明——那非常適合做成系統。反之，如果是一頁獨一無二的排版設計，做成後台反而會限制呈現效果。

常見單元的建議

後台功能的深度也有差別

「產品可以自己管理」這句話，實際上可能是三種不同的東西：

1. 基本——新增、修改、刪除、排序
2. 進階——加上分類、標籤、上下架時間、關聯商品、規格表
3. 完整——再加上庫存、多規格價格、詢價車、訂單串接

三者的成本差距很大。討論需求時，請具體說明「要管理哪些欄位」，而不是只說「要能自己改」。欄位清單是報價精確度的關鍵，也是日後驗收的依據。

兩個常見誤解

「全部都做成後台最保險」

成本會明顯上升，而且過度複雜的後台反而難用。真正每週在更新的通常只有一兩個單元，把資源集中在那裡才有效益。

「靜態頁面比較不利 SEO」

搜尋引擎看的是頁面內容本身，不在乎它是怎麼產生的。靜態頁面只要內容完整、標題正確，一樣能被收錄與排名。

後台對 SEO 的真正幫助是降低更新門檻——因為好更新，所以會持續更新，內容才能累積。這是間接的效果，不是技術上的差異。

規劃時的建議做法

1. 把樹狀圖上的每個單元列出來
2. 逐一標註更新頻率、負責人、要管理的欄位
3. 更新頻率高且有負責人的，列為必做
4. 其餘的先做成靜態，但請廠商在架構上保留日後升級的可能
5. 把這份標註過的清單，作為報價與驗收的依據

第四點值得特別注意：詢問廠商「這個單元日後要改成可管理，需要重做嗎」。答案會透露對方的架構是否有彈性。

樹狀圖的畫法見樹狀圖與網站地圖怎麼畫。

網站延期，多數不是設計問題

實務上網站架設進度落後，最常見的原因不是設計改不完，而是業主的資料遲遲沒有到位。版型都做好了，但產品照片還沒拍、公司簡介還沒寫，網站就只能空在那裡。

這篇整理規劃階段就該開始準備的資料清單。建議在簽約時就一併確認準備時程，比設計進度更需要提前安排。

一、文字內容

公司基本資料

• 公司全名（中英文）、統一編號
• 地址、電話、傳真、電子信箱
• 營業時間、服務區域
• 各據點資訊（若有多處）

公司介紹

• 公司簡介（建議 300 至 800 字）
• 經營理念、服務特色
• 重要沿革或大事紀
• 證照、獎項、認證資格

寫作提醒：避免只寫形容詞。「品質優良、服務至上」對訪客沒有意義，具體事實才有說服力——成立幾年、服務過多少客戶、有哪些認證、施工件數多少。這些數字是最有效的信任來源。

產品或服務說明

• 分類方式與各分類名稱
• 每項產品的名稱、規格、說明文字
• 價格（若要公開）

說明文字建議每項至少 100 字。只有產品名稱和一張圖的頁面，搜尋引擎沒有內容可以判讀，等於放棄了這個頁面的搜尋機會。

二、圖片素材

需要準備的類型

• 公司識別——Logo 的原始向量檔（重要，放大不失真）、標準色色碼
• 環境照——外觀、辦公室、廠房、設備
• 人物照——團隊、施工中、服務中的畫面
• 產品照——每項產品至少一張，主打商品建議多角度
• 案例照——完工前後對照特別有說服力

拍攝與規格建議

• 橫幅照片用於主視覺，拍攝時預留上下裁切空間
• 解析度足夠——手機直出的原始檔通常夠用，但翻拍型錄或從舊網站另存的圖多半太小
• 光線與背景——產品照建議統一背景，整體視覺才不會雜亂
• 不要提供已經壓過浮水印、或壓縮到模糊的圖

版權提醒：所有圖片必須是自行拍攝、或已取得授權。 從網路搜尋下載的圖片不能使用，即使是同業網站上的產品照也不行。這一點在網站上線後若被追究，處理成本很高。

三、既有資產的帳號與資料

如果不是全新開始，以下資料請一併整理：

• 網域——註冊商、後台帳密、註冊人資料、到期日。若尚未註冊，可先參考網域名稱該怎麼挑選
• 舊網站——後台帳密、主機資訊、原始檔或備份
• 公司信箱——目前使用哪家服務、現有帳號清單
• 既有的分析工具帳號——過去的數據有參考價值，不要重開
• 社群帳號——需要串接時會用到

這些資料在人員異動後常常找不到。如果現在找不齊，請盡早開始找，臨到上線才發現網域在前任員工的個人帳號下，會嚴重卡住進度。

四、需求說明

除了素材，這些訊息對設計方向影響很大：

• 目標客群——B2B 還是 B2C、年齡層、決策者是誰
• 參考網站——三到五個你覺得好的網站，並說明好在哪裡。只給網址不說原因，設計師只能猜
• 不喜歡的風格——這往往比喜歡什麼更有用，可以直接排除方向
• 希望訪客做什麼——打電話、填表單、加 LINE、下載型錄。這決定了整個頁面的動線設計
• 是否需要多語言版本——影響架構規劃，需及早確認

準備時程建議

如果資料真的準備不出來

誠實跟廠商說。多數網頁設計公司可以協助或轉介：

• 文案撰寫——由你口述重點，對方整理成文字
• 商業攝影——安排拍攝團隊
• 合法圖庫——購買授權素材作為情境圖使用

這些通常是另計費用的加購項目，但比網站空著半年、或勉強放上不合適的內容要好。在規劃階段就把這件事提出來討論，遠比進度落後後再補救有效率。