官網設計外包怎麼評估?老闆看得懂的 8 個設計品質判準與驗收清單

我們最近幫一位客戶做官網改版的前置盤點,翻他上一版官網的驗收紀錄時,發現一件很典型的事:當初的合約寫「完成公司形象網站一式」,驗收欄位只有一句「網站已上線」。結果這位老闆花了快 40 萬,拿到一個桌機看起來體面、手機一滑就跑版的官網,想改個聯絡按鈕的位置,廠商回他「這要動到版型,加收 5000」。他問我們:「當初到底該怎麼判斷這設計到底好不好?我又不是設計師。」

這個問題卡住的老闆,遠比你想的多。你付錢請外包做官網設計,對方交出一份看起來還可以的稿,你心裡隱約覺得哪裡怪、又說不上來;想改,又怕自己是外行亂改;最後改稿改到雙方都累了,草草驗收上線。等三個月後發現轉換率沒動、客戶在手機上根本找不到你的服務項目,才驚覺當初根本沒把關到重點。

設計品質好壞確實主觀,但「主觀」不等於「沒有判準」。這篇要做的,就是把老闆端評估官網設計品質的那把尺攤開來:好設計有哪 8 個可以逐項打勾的判準、常見的設計雷長什麼樣、改稿與驗收該有的標準流程,以及怎麼跟設計外包溝通品牌調性,讓你不用變成設計師,也能在驗收會議上問對問題、把關到位。

先講一個很多人忽略的前提。愛立歐、PageLab 等多家網頁設計公司的選商指南都提到同一件事:判斷設計品質時不要只看首頁視覺,更該看導覽邏輯、手機閱讀、表單位置與服務頁架構。這句話點破了老闆最常犯的錯。首頁美美的稿最好過關,但真正決定官網有沒有用的,是那些不那麼吸睛的細節。這也是我們接下來要拆的重點。

好官網設計的 8 個判準:老闆看得懂的驗收尺

設計師評估設計時,腦袋裡有一套訓練出來的直覺;老闆沒有那套直覺,但可以用一套「問對問題」的清單來補。這 8 個判準不需要你會 Figma、會 CSS,只需要你打開稿、打開手機、問幾個具體的問題。我們把它整理成一張表,你可以直接印出來帶進驗收會議。

下面把每一條展開,講清楚判準背後的「為什麼」,以及你在稿上具體要看哪裡。

品牌一致性:進到每一頁都像同一家公司

品牌一致性來自「設計系統」,也就是按鈕樣式、字型搭配、圖片處理、配色在全站統一。多家設計公司的品質指南都強調:用戶進到每一頁都應該感受到這是同一個品牌。驗收時你可以做一個很簡單的動作,把首頁、關於我們、服務頁、聯絡頁四張稿並排放在一起看。如果四頁的按鈕形狀不一樣、標題字型換來換去、藍色深淺不一,這就是設計師沒有先建立設計系統、每頁各做各的訊號。這種官網日後每加一頁都會更亂,因為根本沒有一套規則可循。

資訊層級:讓重要的東西自己跳出來

資訊層級是用大小、顏色、對比、位置,讓最重要的東西第一眼被看到。Hero 區(首屏)一定要有明確的主訴求,主要 CTA 按鈕要用對比色,次要資訊不要搶戲。新手設計師最常犯的錯,是把每個空白處都塞滿東西、什麼都想強調。好設計反而敢留白,讓眼睛能呼吸、讓重點能被看見。驗收時瞇著眼睛看稿(模糊化細節),如果模糊之後你還是一眼看得出「這頁要我做什麼」,層級就對了;如果模糊之後整頁糊成一片、找不到重點,就是層級沒做好。

易讀性與 CTA 動線:能不能看、能不能點

這兩條放一起講,因為它們決定了訪客「讀得下去」跟「知道下一步」。易讀性上有幾個可以直接量的數字:行動版字級不低於 16px、行高 1.5 倍以上、內文跟背景的對比要夠。CTA 動線則有一條被 Apple 人機介面指南與無障礙共識共同認可的底線:手機上按鈕的可點擊區至少要 44×44px,按鈕周圍要留白讓它成為視覺焦點。

CTA 的位置在 2026 的行動優先時代也變了:首屏要有一個、長頁面中段重複出現、內文段落結尾放一個,而且要以單手大拇指最容易點到的中下段為主。驗收時拿你自己的手機,單手滑一遍每個主要頁面,問自己:我知道現在該點哪裡嗎?那個按鈕大拇指按得到嗎?如果你自己都要找、要放大才能按,你的客戶只會更快關掉。

視覺信任感、載入速度與無障礙:被忽略的三個地基

視覺信任感很抽象,但影響很實際。素材有沒有廉價感、配圖跟你的產業搭不搭、留白整不整齊,這些加起來決定訪客潛意識裡覺得你「像不像一家可靠的公司」。載入速度則是體驗的地基,首圖過大、動效做太滿都會拖慢首頁,手機在外面用 4G 開你的官網等三秒還沒好,人就走了。

無障礙過去被當成政府網站才要顧的事,現在已經延伸成品牌形象與商業指標。設計圈引用的數據顯示,具備無障礙設計的網站平均停留時間比一般網站高出約 23%、轉換率提升約 12%。實務上你要盯的判準很具體:文字與背景對比至少達到 WCAG AA 標準的 4.5:1、圖片有替代文字、表單欄位有標籤、只用鍵盤也能操作完成。這些不只是照顧色弱或長輩,也是 Google 讀懂你網站的基礎。想再深入看無障礙與可用性怎麼落到系統開發驗收,可以參考我們寫過的 軟體驗收 SOP 與 UAT 測試清單。

行動優先不是「手機也能看」:跨裝置驗收怎麼做

我要在這裡表態一個判斷:如果一家設計外包交稿時只給你桌機版的稿、要你「上線後再看手機」,這個合作八成會出事。2026 的網頁設計已經不是「桌機做完順便縮小給手機」,而是以手機體驗為核心來設計、再放大到桌機。這個順序反過來,結果天差地遠。

為什麼這麼強調?因為「桌機正常、手機跑版」是 PTT、Dcard 上外包踩雷文的常客。有網友分享,低價方案交出來的網站在桌機看起來好好的,手機版排版整個垮掉;更常見的是模板站只換了資料、沒真的測手機,結果按鈕擠在一起、圖片被裁掉、選單點不開。你的訪客有超過一半是用手機來的,手機版垮掉等於官網的一大半直接報廢。

跨裝置驗收不難,難在你得知道要測哪些點。下面這張表是我們自己在做驗收時會跑的清單,你可以照著在三種裝置上各走一遍。

一個實用的技巧:別只在設計師給你的示範環境看,拿你自己的舊手機、用行動網路(不是公司 Wi-Fi)開一次。設計師的環境永遠是最好的,你的客戶不會都用最新旗艦機配光纖網路。這一步能抓出至少一半「在我這邊明明正常」的問題。想更完整地看整個外包從發包到上線的流程節奏,可以參考我們整理的 中小企業網站系統外包流程指南。

五種最常見的官網設計雷:認得出來才躲得掉

知道好設計長怎樣,還要認得出壞設計的樣子。這五種雷是我們在幫客戶做改版盤點時,反覆看到的舊官網通病。認得出來,你在看新廠商的作品集、或驗收新稿時,就能提早喊卡。

雷一:模板感,換了資料卻沒有靈魂

模板感是最隱性的雷,因為模板站「看起來」是完整的。有 PTT 網友花了六七萬,拿到的其實只是買主機、註冊網域、裝一個 WordPress 佈景主題,然後把文字圖片複製貼上,沒有文案、沒有針對你產業的視覺、手機版沒測、SEO 欄位空著。這種站的問題不在當下,而在它跟你的競爭對手撞臉,訪客潛意識就覺得「這家跟別家沒兩樣」。怎麼分辨?看廠商作品集裡的案子,如果每一個都長得像同一個模板換色換字,那你拿到的大概也會是。

雷二:跟風動效與華而不實,為了炫而炫

2026 有一批很潮的視覺趨勢,像是沉浸式互動、3D、大幅動效。這些用對地方是加分,用錯地方就是災難。跟風把首頁塞滿滑動視差、進場動畫、滑鼠跟隨特效,結果是手機上卡頓、載入變慢、訪客還沒看到你賣什麼就頭暈。我們的判斷是:動效要為「引導視線、強化重點」服務,不是為了證明設計師很會。如果你的產業真的需要進階視覺(例如產品需要 3D 展示、空間需要沉浸式呈現),那要評估的是廠商有沒有真的做過這類技術,而不是套個現成特效。這方面我們寫過一篇 3D 官網技術能力的判斷指南,可以幫你看廠商是真有本事還是只是套件。

雷三:設計師跑版,稿很美但切出來變形

這是老闆最容易忽略的一關。設計稿(Figma / PSD)是「靜態的圖」,切版上線後是「活的網頁」,兩者中間有一段落差。有時候稿看起來很精緻,但切版工程沒做好,實際網頁在不同螢幕寬度下就跑版、間距亂掉、字被切掉。驗收時千萬別只看設計稿的截圖就簽字,一定要在「實際可以點的網站」上驗收,而且要在多種裝置上。稿美不美是設計問題,切出來準不準是工程問題,兩個都要過。

雷四:忽略內容,版面漂亮卻沒東西可填

設計師常拿假字(Lorem ipsum)排版,版面看起來平衡漂亮。但等你把真實的服務說明、案例、公司介紹填進去,才發現有的地方字太多爆版、有的地方根本沒內容只能放空。內容跟設計要一起想,不能設計先做完才回頭硬塞。驗收前把真實內容填進去看一遍,是揪出這個雷的唯一方法。

雷五:好看不好用,美則美矣但轉換掛零

最貴的雷是這個:官網很美,得了設計獎,但沒人詢問、沒人下單。原因通常是設計把「美」放在「好用」前面,CTA 藏起來、動線繞、資訊架構跟著視覺跑而沒有跟著訪客的決策走。官網的本質是一個做生意的工具,不是拿來展示的作品集。判斷標準很簡單:一個第一次來的訪客,能不能在 30 秒內搞懂你是做什麼的、找到他要的資訊、知道怎麼聯絡你。做不到,再美都是失敗的設計。

改稿改到死的根源:回饋方式錯了,不是設計師的錯

接案圈最常聽到的抱怨之一,是「改稿改不完」。有趣的是,這件事設計師跟業主兩邊都覺得自己是受害者。設計師覺得業主意見反覆、改到耗盡耐心最後只能敷衍;業主覺得改幾次就被收費、越改越貴。好心地文創的設計溝通文點破了核心:問題往往出在「隨機式回饋」:業主收到稿,想到什麼說什麼,意見分散、沒重點、甚至前後矛盾,浪費了寶貴的修改額度。

真正的解方是把回饋「結構化」。與其說「這裡怪怪的、那個顏色我不喜歡、感覺不夠大氣」,不如說清楚兩件事:哪裡不喜歡、想改成什麼樣。具體的回饋才改得動。下面這張表把常見的模糊回饋翻譯成設計師能執行的版本,你可以直接照用。

除了把回饋講清楚,還有兩個紀律能大幅減少改稿輪數。第一,把所有意見集中一次給,不要今天想到一個丟一個、明天再丟一個,零碎的意見最耗改稿額度。第二,回饋前先跟公司內部對齊,別老闆說要 A、行銷說要 B,設計師夾在中間改了又改。內部先吵完再給設計師一個統一版本,是對雙方都好的做法。

我們可以把「一次到位」的改稿流程畫成一張圖,照這個節奏走,大部分專案兩到三輪就能收斂。

把改稿次數與驗收標準寫進合約:發包前就要談的事

上面談的是溝通技巧,但技巧救不了一份含糊的合約。網站委外最怕的,是做完後才發現改稿次數沒寫、驗收標準沒訂、權限拿不到。這些都要在發包前、白紙黑字談清楚。

先講改稿次數。多家設計公司的合約範本都建議:設計稿階段「大改 2 次、小改不限」或「2 到 3 次免費修改、超出按次計費」是比較合理的行情,而且要區分階段,把設計稿修改、切版後修改、功能測試修改各自算各自的。沒寫清楚會走向兩種糟糕結局:一種是設計師被無止境改稿耗到擺爛,一種是你多改一次就被收 3000 到 5000。

再講驗收標準,這是最多合約偷懶的地方。驗收條款不能只寫「完成網站」,要對照頁面、功能、裝置與瀏覽器逐項列出。一份及格的驗收標準會長成這樣:每一個頁面要交付、每一個功能要能動、在指定的幾種裝置與瀏覽器上都要正常。這樣驗收時你有依據、廠商也有明確的完工定義,不會各說各話。這套「把驗收標準寫具體」的思路,跟軟體開發驗收是相通的,我們在 客製化系統交付驗收的 SOP 裡拆得更細,官網驗收可以借用同一套精神。

特別提醒交付物那一列。網站委外最容易被卡的,是做完後權限不清、原始碼跟後台拿不回來,想換廠商或自己維護都動不了。發包前就要確認網域、主機、原始碼、資料庫、修改權限全部歸你。關於報價區間怎麼抓、各價位帶買到什麼,我們另外整理了 企業官網設計外包採購完整指南 跟 客製化網站的費用行情,可以搭配這篇一起看。

跟設計外包溝通品牌調性:發包前先給對輸入

改稿地獄有一半的成因,是發包時給的輸入太模糊。你只說「做一個專業一點、大氣一點的官網」,設計師只能用猜的,猜不中就開始改稿循環。與其事後改,不如事前把品牌調性講清楚。myMKC 的設計溝通文提到,跟客戶溝通設計時最缺的往往是「共同的語言」,而建立共同語言的責任,發包方也要分擔一半。

怎麼給對輸入?不用你會設計術語,只要準備四樣東西。第一,3 到 5 個你喜歡的參考網站,並說出「喜歡它哪裡」(是配色、是排版乾淨、還是文案語氣)。第二,3 到 5 個你不喜歡的例子,同樣說原因,反例往往比正例更能框住方向。第三,你的品牌識別素材:logo、標準色、既有的視覺規範,有什麼給什麼。第四,一句話講清楚這個官網最重要的目標,是收詢問單、是建立形象、還是導購。目標不同,設計的重點完全不同。

這裡有個常被忽略的觀念:設計是為商業目標服務的,不是為得獎服務的。你把「這個官網要幫我收到更多詢問單」這件事講清楚,好的設計團隊會反過來用資訊架構、CTA 動線、視覺信任感去支撐這個目標,而不是只給你一個漂亮的外殼。這也是為什麼我們一直強調,發包前先想清楚商業目標,比先想「要什麼風格」更重要。如果你的官網背後還牽涉到系統功能(會員、預約、金流),那設計就不能只找純視覺的設計工作室,要找能把設計跟系統一起想的團隊,這部分可以看我們的 客製化網站與系統開發服務 怎麼把兩件事接起來。如果你還在挑選外包廠商的階段,也可以參考 網站開發公司評估指標 這篇的選商框架。

我們怎麼看:設計品質的把關,3 年內會變成老闆的基本功

看看接下來的方向。AI 生成設計稿正在快速變便宜,這代表「產出一張好看的稿」的門檻會愈來愈低,市場上漂亮但沒策略的官網只會更多。這個趨勢下,真正稀缺的不是「會不會做出漂亮的稿」,而是「能不能判斷這個設計有沒有真的支撐商業目標」。3 年後,懂得用判準把關設計品質的老闆,會比只會說「我喜歡這個顏色」的老闆,在外包這件事上省下大量金錢與時間。

我們的取捨是:與其教你追每年的設計趨勢(趨勢每年變,追不完),不如給你一套不太會過期的判準:品牌一致性、資訊層級、易讀性、CTA 動線、跨裝置、無障礙,這些底層原則五年後大概還是這些。對中小企業老闆來說,現在該做的不是去學設計軟體,而是把這篇的判準表印出來,下次驗收時逐項問過一遍。你不需要變成設計師,你只需要問對問題,把關就到位了。

如果你正卡在一份看不懂好壞的設計稿前,或準備發包卻怕重蹈改稿地獄,可以把你現在的情況丟過來。我們陪你對著這 8 個判準看一遍,直接告訴你哪些是真的問題、哪些是可以接受的取捨。想聊的話,歡迎到 我們的 UI/UX 設計服務 或 聯絡我們,一起看看你的官網從哪一塊開始把關最划算。