2026 網頁設計指南：網站做得靚為何無查詢？網頁設計核心標準、製作流程與預算分配 2026 網頁設計指南：網站做得靚為何無查詢？網頁設計核心標準、製作流程與預算分配

網頁設計、網站製作與網站開發，差別在哪裏？

三個詞在報價單上經常互換，計的錢卻不同，對照下表便知：

網站成不成功，看後台的數字

驗收一個網站，不是跟同行比漂亮。上線三個月後打開後台，看有沒有你要的數字：查詢、訂單，或者電話。

好讀：訪客一眼要找到重點

第一次來的訪客，不假思索就講得出這頁賣什麼、下一步按哪裏，這樣才算好讀。字級、對比、留白看似口味，其實都有可量度的底線，香港數字政策辦公室的無障礙手冊，正是按 W3C《無障礙網頁內容指引》2.2 版的 A 級與 AA 級準則編排。本地還有數碼無障礙嘉許計劃，由 HKIRC 主辦、數字政策辦公室協辦，私營公司參加費用全免。

視覺層級做得好與不好的首頁對照

• 視覺層級決定第一眼看哪裏

  打開你的首頁問一句：這頁的主角是誰？層級由大小、字重與顏色排出來，一頁只應有一個主角、兩三個配角；全部一樣大，等於全部不重要。一間觀塘診所把「網上預約」做成全頁最大的按鈕，訪客第一眼就知道按哪裏。有沒有做工不用靠感覺：在 Search Console 成效報告的「網頁」分頁揀出首頁，看首頁的點擊與預約頁的曝光有沒有一起升。兩邊各走各的，層級就只是好看。

• 色彩對比有數可查

  淺灰字配白底、金色字配深藍底，是兩種最常見的「靚但讀不到」。W3C《無障礙網頁內容指引》的對比度準則 AA 級訂明，文字與背景至少要有 4.5:1 的對比，大字放寬到 3:1；「大字」指 18pt 或 14pt 加粗，中日韓字型按等效大小計。驗收時用網上對比度工具量一次，比肉眼爭論省事。色彩怎樣進一步影響轉換與搜尋，看網站配色與 CRO/SEO。

• 字型與字級要經得起放大

  內文字級該多大，各家說法不一，驗收時不如改用有標準可依的動作。把瀏覽器放大到 200%，內容與功能不可以爛（字幕與文字圖片除外），這是 W3C AA 級準則 1.4.4 的要求。再讓訪客自己改行高與字距，版面同樣不可以爛，這是準則 1.4.12。

• 留白與圖片給版面呼吸

  把可點的東西彼此推開，手指才按得中，這是留白的第一個作用。圖片要壓縮到不拖慢載入，並補上替代文字，搜尋引擎與讀屏軟件靠它知道相裏是什麼。用手機開一間荃灣餐廳的首頁，整頁菜式塞進首屏，不放大，看得清名稱與價錢的不到三道，就是塞得太密。壓縮的實際做法，看網站圖片加速。

菜單和按鈕，怎樣才算好用？

好用只有一句：訪客不用思考，就知道自己在哪、下一步去哪。做到這一句，靠的是菜單、按鈕和全站一致的用字。

• 網站地圖與菜單

  對訪客而言，菜單（Menu）就是他的地圖，主要版塊用他們的字眼命名，不用內部術語。頁數一多就加麵包屑：Google 的說明文件寫明，它顯示該頁在網站層級中的位置，幫訪客理解和瀏覽，搜尋結果也會用它把該頁分類。交給搜尋引擎的 XML sitemap，講到技術關時再展開。

• 按鈕與操作回饋

  訪客按了一個按鈕，畫面沒有反應，多半會再按一次，然後離開。按鈕太細在手機上正是這樣；可點面積與鍵盤焦點的最低標準，講到行動呼籲時連出處一併給。預設、滑鼠移上、按下、停用四個狀態做得齊，訪客才知道自己剛才按到了沒有。

• 全站一致性

  同一個動作，全站用同一款按鈕；同一個概念，全站用同一個字。一頁叫「課程」、另一頁叫「班別」，訪客會當成兩樣東西。交稿前，列一張用字表逐頁對一次。

不醜的品牌感從哪裏來？

追上今年流行不是重點；看起來像一間有交代的公司才是，顏色有譜、字款有譜、語氣有譜。

• 品牌規範

  開工前寫定一頁紙：主色輔色、字款配搭、標題寫法、相片風格。這頁紙交給任何設計師，做出來的都像你；沒有它，每次換人都重頭開始。

• 簡潔與設計趨勢

  大圖、動效、深色模式，年年有新款。判斷只有一條：這個元素有沒有幫訪客完成動作？有就用，純粹因為別家有就慢一步再說。

頁首、內容、頁尾各做什麼？

客人打開一頁，頁首要一眼知道你做什麼：標誌、一句講清服務、主菜單、一個查詢按鈕，四樣夠了。往下到中間，看的是證據：一個主張，兩三個證據，一個下一步。最後到頁尾，找地址、電話、電郵與公司全名；其中公司名稱一項，更是寫進法例的要求。公司註冊處按《公司（披露公司名稱及法律責任狀況）規例》（第 622B 章）訂明，有限公司要在自己的網站，以清晰字樣載明註冊名稱與法律責任狀況，今晚就可以打開自己的網站對一次。

頁首、內容、頁尾各司其職

地址放得太深，客人要上門時就找不到。一間健身室把地址收在「關於我們」的第三層；這種事不必等客人投訴，驗收時開 Search Console 成效報告，「地址」「點去」這類字有曝光而點擊掛零，就是有人在找而找不到。新網站索性把地址搬到頁尾第一行，好讓全站每一頁都見得到。

頁首、內容、頁尾的角色不變，首頁、服務頁與聯絡頁各有側重，逐頁對下表：

版面層次就是說服的次序

首屏放一句主張加一個行動呼籲，講好處，不講口號。第二屏放證據：服務、案例、價目或常見問題；頁尾之前放最後一個行動呼籲，接住讀完的人。

次序排錯，訪客在第一屏抓不到主張，多半直接離開。手機與電腦的第一屏不能照搬，電腦一屏的內容，手機要捲幾屏，訪客看清楚的往往只有主張與按鈕。

訪客看完不行動，問題出在哪裏？

對照下面四個常見原因，逐項檢查：

• 行動呼籲不明確：整頁找不到下一步，按鈕又只寫「提交」
• 表單欄位太多，訪客填到一半已經放棄
• 信任訊號不足：無地址、無實景相片，也無客人反饋
• 內容對不上：訪客想看價錢，頁面卻由頭到尾都在講品牌理念

打開 Search Console 的成效報告，在「網頁」分頁揀出問題頁，比對曝光與點擊：有曝光、有點擊而查詢是零，問題在頁內不在搜尋；連點擊都沒有，才回頭改標題與描述。四項之中先改行動呼籲，改動最小，數據沒起色才動下一項。

在「網頁」分頁比對曝光與點擊，判斷問題在頁內還是在搜尋

行動呼籲與信任訊號

按鈕寫法有一條鐵律：動詞，加對方得到的東西。「取得報價」好過「提交」，「預約試堂」好過「了解更多」。信任訊號與按鈕並排放：地址與電話、實景相片、做過的項目、付款方式，有認證就放認證。兩者怎樣排次序，高轉換網頁設計邏輯有逐頁拆解。

按鈕還有兩個技術底線。W3C 的 WCAG AA 準則 2.5.8 訂明，可點目標最少 24×24 CSS 像素，手機按鈕細過這個尺碼，手指就按不中。狀態也不能只靠滑鼠：準則 2.4.7 要求鍵盤操作時焦點必須看得見，按鈕被選中時加一圈焦點框。

手機優先：Google 用手機版索引你的網站

Google 以智能手機代理程式抓取的手機版內容，用來索引和排名網站，官方文件稱之為手機優先索引，並建議採用響應式網頁設計，最容易做，也最容易維護；同一份文件講明，手機版內容比電腦版少的，要補到相等。響應式的做法，MDN 歸納為三件事：彈性網格、彈性圖片（max-width 設 100%）與媒體查詢，這套講法 2010 年由 Ethan Marcotte 提出。

同一網站的手機與桌面版面對照

速度要過 Core Web Vitals 三條線

Google 的 web.dev 為三個核心網頁指標劃了合格線，量的是第 75 百分位的載入表現，手機與電腦分開計，自己電腦開得快，不代表過關。

怎樣設計，搜尋引擎才讀得到？

搜尋引擎讀的是文字、連結與結構：標題用真正的標題標籤，圖片補替代文字，別把菜單做成只有滑鼠才看得懂的特效。Google 建議頁數多（約 500 頁以上）、新站而連結少的網站提交 sitemap，但同一份文件講明，sitemap 只幫搜尋引擎發現網址，不保證每一項都被收錄。HTTPS 是正面訊號：web.dev 寫明 Google 把它當正面的搜尋品質指標；不過 Google 的網頁體驗說明頁同時講清楚，核心網頁指標以外的項目，不會直接令網站排得更高。

AI 搜尋來了，GEO 要做什麼？

Google 的 AI 摘要（AI Overviews）與 AI Mode，官方地區清單現時包含香港，支援中文（繁體），你的網頁有機會被引用在結果頂端的答案裏。官方立場兩點值得記：不需要另做機器可讀檔案、AI 文字檔或標記，這類檔案不加分不扣分；真正有用的是第一手、有獨特角度的內容，官方舉的例是第一手評測勝過摘要式重述。

SSL 與安全連線的新時間表

沒有加密的網站，2026 年 Chrome 會先彈出警告，攔在客人和你的網站中間。Google 保安網誌公布的時間表：4 月的 Chrome 147 先向十億以上選用強化安全瀏覽的用戶，開啟「一律使用安全連線」的公開網站版本；10 月的 Chrome 154 改為預設開啟。證書續期要記入年費，Let's Encrypt 的官方 FAQ寫明，預設證書有效期 90 天，建議每 60 天續一次。

開工前，需求要釐清什麼？

這一步做的都是紙上功夫，也是最省錢的一步。

• 先分網站類型

  一頁式解決「有個網址可以派」；形象網站要服務頁、查詢表單與可自行更新的內容；網店要收款、庫存與物流對接；再加會員、預約或系統對接，就進入開發項目。類型決定預算級距，講錯類型，後面全部錯。

• 目標與受眾

  寫一句話就夠：這個網站給誰看、要他做什麼。給打算裝修的業主看，動作是約量度；給批發客看，動作是索取報價單。這句話後面每一頁都對得上，網站就不會散。

• 需求講不清時怎樣問出來

  講不出想要什麼不是你的問題，是常態。開會帶三樣東西就可以推進：三個你喜歡的網站（講得出喜歡哪裏）、一個你討厭的、客人最常問的五條問題。同時留意對方問你什麼，合格的設計方會問你的客人是誰、憑什麼買你、上線後內容由誰更新；對方不問，你不妨先講，看他接不接得上。

• 舊站重做先量現況

  舊站有流量就有資產：先用 Search Console 記下現有的查詢字與點擊頁面，重做時逐條保住。要改網址，Google 官方建議用伺服器端的永久轉址，索引流程會把 301、308 當成訊號，把轉址目標視為正文所在。改版後流量斷崖，多數斷在這一步沒做，上線後第一週開「網頁索引」報告，大批舊網址報「找不到（404）」，就是轉址清單漏了。

內容規劃：一張逐頁的架構表

開一張表，逐頁一行：頁面名稱、網址、標題、內容由誰準備、狀態。設計師最怕的不是改稿，是設計做完才發現文案沒有人寫；內容誰準備，同時是第七節價錢的最大變數之一。架構表確認了，才進線框。

線框圖階段，就是你要喊停的時候

灰底、只有框與字的骨架，就是線框圖，不談美觀，只談每頁放什麼、先後怎樣排。這是整個流程裏修改最便宜的一步：改線框是移一個框，改視覺稿是重畫一頁，上線後改就是工程。審線框的動作只有一個，逐頁講得出「這頁要訪客做什麼」，講不出的頁，先刪。

線框圖與視覺稿對照：喊停要趁早

視覺設計稿怎樣確認？

確認的對象是第二節的三個標準與品牌規範，不是個人喜好。改字級、改顏色、換相，都是正常修改；要動架構，退回線框那一步。會看這條界線的設計方，值得合作。

開發、測試與驗收

測試至少過四關：自己的手機實機開一次、每個表單真的送出一次、速度跑一次分、查詢按鈕由首頁按到完成。驗收就用架構表逐頁對，對完簽名；口講的「大概做好了」，不算驗收。

上線之後：維護與量度怎樣做

上線不是完結，三件事接着做：Search Console 驗證並提交 sitemap、講明內容由誰更新、定好每月看哪幾個數字。量的是查詢數與訂單，不是排名；排得高而沒有查詢，回第三節清單對一次。

四種做法的分界

哪裏可以免費設計網頁？免費方案的限制

免費平台存在，入門真的不用錢，限制卻寫在官方文件裏。以 Wix 為例，免費方案有 500MB 儲存與 1GB 頻寬，網址是 wixsite.com 子網址、不可自訂，站上有 Wix 品牌標示，亦無電商與收款功能，要賣東西、除標示、接自己域名，全部要升級付費。免費做樣板、試市場反應可以；用它收錢做生意，第一步已經卡住。

選平台要看什麼？

選平台先問三條：網站可不可以匯出、寄存在哪裏、域名可不可以帶走。Wix 官方支援頁寫明，Wix 網站必須寄存在 Wix 的伺服器上，不支援外部寄存；域名可在別處註冊再連過來，網站本身搬不走。平台是租約，不是資產。

公司與 freelancer，分別在責任

公司有團隊分工，設計、開發、測試不是同一人，請假有人補位；freelancer 溝通直接、彈性大，但一人生病全項目停擺。收費差距方面，香港暫時沒有獨立數據可引用；合約裏看清楚交付什麼、出事找誰，比只比價錢重要。

什麼時候該找專業公司？

三種情況值得找公司：要接系統或付款、要長期有人維護問責、舊站重做而流量不能斷。政府統計處同一份調查講明，大中型公司具有網絡存在的比例高於小型，大公司花這個錢，買的是穩妥，不是漂亮。

BINGO 網頁設計團隊

BINGO (HK) 的網頁設計服務由全球百人團隊執行，每個網站專案由 3 至 8 人小組負責，通過 ISO 9001、ISO 20000 及 ISO 27001 認證，累積 20 多個無障礙嘉許獎項。項目類型由公司網站到網上商店都有，當中包括 800+ 國際電商品牌網站與 100+ 政府資訊型網站。完成後設永久保用及終身維護保證。

做一個網頁多少錢？先看影響價錢的因素

香港網頁設計的市場價區間，政府統計處與貿發局的公開統計都沒有這一項；市面見到的，全部是網頁設計公司自己掛的價目，各家一套。與其記區間，不如學會看報價單上的五個變數：

平台方案則有公開價目可對照：SHOPLINE 現時公開的年繳價，由基本開店的 HK$5,988 到 OMO 全方位電商的 HK$26,988，另按方案收每月系統流量維護費 0.3% 至 0.8%。這是開店平台的價，度身訂造網站另計，不要混着比。

第二年開始的年費

第一年報價單之外，每年還有一組固定開支，報價時逐項問：

逐項問清楚，第二年的帳才不會突然厚了一倍；「首年優惠、續期原價」是行內常見做法，問題是你簽約時知不知道。域名與寄存的服務範圍，另見域名服務與網頁寄存兩頁。

多付的錢，要付得講得出原因

低價常見的減項：共用模板、手機版將就、內容自備、上線後無維護。多付之前，用上面的因素表對一次，對方講得出貴在哪一格，錢才花得明白；講不出，那只是貴。同樣，平價也要平得知道讓了什麼。

推廣預算：設計費以外的第二筆錢

網站上線只是開了門，人不會自動來。推廣的錢有幾個去處：SEO、搜尋廣告、社交內容，見效時間與成本各異；香港中小企該編多少比例，暫時沒有可引用的行業數據。你可以自己驗算：上線三個月後打開 Search Console，看「查詢」與「點擊」兩欄，接近零就說明第二筆錢還未開始花。

選公司時要問清楚哪些事？

問題不用多，五條就夠：

• 域名與寄存登記在誰名下，第二年續期價是多少
• 網站完成後，原始碼與後台帳戶交不交回你手上
• 手機版的內容會不會比電腦版少、少多少
• 上線後的修改怎樣計費、包多少次，有沒有寫入合約
• 出事時多久有人處理，直接找到的是誰

手上已有報價單？逐行對一次這五條問題，對方答不出的行，就是簽約前要問到的那幾行。

所有權與戶口名義

換公司時最常出事的兩個位：域名與後台戶口。Search Console 的說明寫明，「擁有者」可以增刪使用者、調整設定，權限最大；「完整使用者」看得到所有資料，但不能增刪使用者。驗證擁有者的那一個，必須是你公司的電郵。域名用HKIRC 的公開 WHOIS查 .hk 登記紀錄，簽約前查一次，名義不對即刻改；未公開的聯絡資料要經註冊商申請，.com 域名則去所屬註冊商查。