當企業主決定要做一個網站，開場白常常是「我想要一個好看的網站」。好看當然重要，但網頁設計實際涵蓋的工作，遠比畫面呈現要來得廣：從決定放哪些內容、內容用什麼順序出現，到畫面怎麼排、程式怎麼實作、手機上怎麼顯示，每一段都會左右訪客進站之後的感受與行動。這篇文章不談報價、也不談怎麼挑合作對象，而是把一個案子從無到有會經過哪些工作攤開來看，讓你在開口提需求之前，先清楚自己買的是什麼，也先知道自己該準備什麼。
網頁設計不是單一工種，而是好幾種專業疊在一起
很多人以為網頁設計就是「設計師畫圖」，但實務上至少會牽涉到四到五種不同性質的工作。有人負責釐清這個網站要解決什麼問題、放哪些內容；有人負責把內容整理成訪客看得懂的層次；有人負責視覺呈現，決定顏色、字體、圖片風格與版面比例；有人負責把設計稿寫成真的能在瀏覽器裡運作的網頁；還有人負責讓同一套內容在手機、平板、桌機上都不失控。
這些工作在小型案子裡可能由同一個人全包，在大一點的案子裡則會拆給不同角色。理解這件事的好處是：當你提出一個需求時，你會知道它落在哪一段。像是「我覺得首頁太空」屬於版面配置與內容密度的問題，「我要加一個報名表單」同時牽涉內容架構與前端實作，「手機上看字太小」則是行動版適配的範疇。把需求歸位，溝通會快很多，也比較不會出現雙方各說各話的狀況。
視覺設計與版面配置：網站看起來像誰、內容怎麼擺
視覺這一層要處理的東西，包含主色與輔助色的搭配、字體選用與字級層次、圖片與插圖的風格、按鈕與表單元件的長相、以及大量的留白安排。這些決定合起來會形成一種氣質，訪客往往在幾秒內就接收到了：這是一家嚴謹的顧問公司，還是一家活潑的餐飲品牌，或者是一個專業但親切的在地服務商。
視覺設計最常被忽略的一項是對比與可讀性。淺灰字配白底在設計稿上看起來很雅致，但實際在戶外陽光下用手機瀏覽時可能完全讀不到；主視覺大圖上面壓文字，如果沒有做遮罩或加深處理，文字會隨著圖片內容變得忽明忽暗。另一個常見狀況是字級層次不足，標題、小標、內文的大小差異太小，整頁看起來就像一片平的文字，訪客沒有辦法快速掃到重點。好的視覺不只是漂亮，而是讓人讀得省力。
與視覺決定同時進行的是版面配置，也就是空間分配的問題。首屏要放什麼、放多高；主要內容區與側邊資訊的比例；一排放幾個區塊、區塊之間留多少距離；捲動時哪些元素要固定、哪些要跟著走。這些看似瑣碎的決定，其實決定了訪客的視線會怎麼移動。
一個實用的判斷基準是：打開任何一頁，先問「沒有捲動之前，訪客看到的是什麼」。如果首屏被一張沒有訊息的大圖佔滿，或者是一段誰都能寫的空泛標語，那這塊最貴的版位就浪費掉了。另一個基準是掃描性，多數人不會逐字閱讀，而是快速掃過標題、粗體字、清單與圖片說明，所以版面要刻意製造這些可以被掃到的落點，而不是把資訊全部塞進一大段文字裡。
內容架構：決定訪客看到什麼、按什麼順序看
內容架構是最容易被跳過、卻最影響成敗的一段。它要回答的問題是：這個網站總共要有哪些頁面、頁面之間怎麼歸類、導覽列要列出哪幾項、每一頁內部的段落要用什麼順序排列、頁與頁之間要怎麼互相引導。
常見的做法是先把所有想放的內容列成一張清單，再依照訪客的關心程度分群，而不是依照公司內部的組織架構分群。舉例來說，企業內部習慣把服務拆成不同部門的業務，但訪客其實是照「我遇到什麼問題」來找答案的；如果導覽列照部門來排，訪客就得先猜自己的問題歸哪個部門管。內容架構做得好，訪客通常在兩到三次點擊之內就能到達他要的頁面，而且每一頁結尾都自然地把他帶往下一步，而不是走到死巷。
這一段也包含文案的分工。設計稿上如果先填假文字，最後才把真實文案硬塞進去，版面通常會歪掉；比較穩的做法是讓文案與版面同步推進，至少在設計之前先確定每個區塊大致要講幾句話、放幾個項目。
前端實作：把設計稿變成真的能用的網頁
設計稿只是一張圖，要讓它變成可以互動的網頁，需要把版面寫成程式碼，處理滑鼠移過去的變化、表單的欄位驗證、選單展開收合、圖片的載入方式、以及各種瀏覽器之間的差異。這一段的品質不會直接顯示在畫面上，但會透過幾件事被感受到。
第一是載入速度，圖片沒有壓縮、沒有做延遲載入、字體檔案一次載入太多套，都會讓頁面開得很慢。第二是互動的穩定度，表單送出去以後有沒有明確回饋、按鈕在手機上好不好按、選單在小螢幕會不會蓋住內容。第三是無障礙與語意標記，標題階層有沒有照層次寫、圖片有沒有替代文字、表單欄位有沒有對應的標籤，這些既影響使用輔具的訪客，也影響搜尋引擎理解頁面結構的能力。
行動版適配：多數訪客是拿手機看你的網站
行動版適配不是「把桌機版縮小」。螢幕寬度變窄之後，原本並排的三欄要改成上下堆疊，原本橫向的表格可能要改成卡片式，原本靠滑鼠移入才出現的說明必須改成常駐顯示或點擊展開。導覽列通常會收成選單按鈕，這時候就要決定哪幾個項目重要到必須留在外面。
幾個實務上最常出問題的地方：按鈕與連結太小或彼此太近，手指點不準；表單欄位在手機上跳出的鍵盤類型不對，輸入電話時還要自己切換到數字鍵盤；固定在畫面下方的橫幅佔掉太多空間，內容區只剩一小條；橫向捲動跑出來，通常是某張圖片或表格寬度寫死造成的。這些都應該在實機上檢查，而不是只把瀏覽器視窗拉窄看看。
一個案子從無到有的完整輪廓
把上面幾件事串起來，一個網頁設計案大致會經過這幾個階段：
- 需求釐清：確認網站目的、主要客群、希望訪客做的動作，以及既有素材有哪些
- 架構規劃：整理網站地圖、每一頁的內容大綱與彼此的連結關係
- 版面草圖：用簡單的線框把每頁的區塊順序與比例先講清楚，此時還不談顏色
- 視覺設計：定調色彩、字體、元件樣式，產出代表頁的設計稿
- 文案與素材：把真實文字、照片、商品資料填進去，過程中回頭微調版面
- 前端實作與後台串接：寫成可運作的頁面，接上表單、後台編輯功能與分析工具
- 測試與上線：跨裝置檢查、表單實測、連結檢查、設定分析追蹤，確認之後正式對外
- 上線後調整：依照實際使用狀況修正內容與版面，這一段通常是持續的
階段的名稱各家說法不同，但順序大致如此。值得注意的是，越前面的階段改動成本越低。在線框階段調整區塊順序只是移動幾個方框，等到前端都寫完才說整頁要重排，代價就完全不一樣了。所以在草圖與設計稿階段多花一點時間確認，通常是划算的。
開始之前，企業主該先準備的三件事
很多案子卡住不是因為設計能力不夠，而是因為需求方自己還沒想清楚。開工前先把這三題寫下來，後面會順很多。
第一，這個網站的目的是什麼。是要讓陌生客戶認識你、讓已經聽過你的人確認你可靠、讓客戶直接下單、還是讓求職者了解公司？不同目的會導向完全不同的網站。想讓陌生客戶認識你，內容就要多、要能被搜尋到；想讓人確認你可靠，重點會落在實績、流程說明與聯絡方式的清楚程度。目的如果有好幾個，請排出主次，不要讓每個目的都平均分配版位。
第二，主要客群是誰。不是「所有人」，而是具體一點的描述：他是自己做決定還是要向上呈報、他在意的是價格還是風險、他通常在什麼情境下找到你、他對這個領域的專業術語熟不熟。客群描述會直接影響文案的深淺、案例的選擇，甚至影響視覺的氣質。
第三，你希望訪客做什麼動作。打電話、填表單、加通訊軟體、下載資料、直接結帳，這些動作對訪客的門檻不同。選定一個主要動作，讓它在每一頁都找得到、都長得一樣、都講得清楚，比放五個按鈕讓訪客自己選要有效得多。
另外可以順手準備的還有：現有的商標檔案與品牌色、可用的照片素材、要放上去的服務或商品清單、以及你自己覺得順眼的幾個參考網站（並說明你喜歡它哪一點，是排版、氣質還是功能）。這些東西備齊，能省下大量來回猜測的時間。
常見問題
網頁設計和網站架設是同一件事嗎？
兩者重疊但不完全相同。網頁設計偏重內容架構、視覺呈現與使用體驗，也就是網站長什麼樣、怎麼被使用；網站架設偏重技術面的底層選擇，例如要用哪一套系統、網域與主機怎麼安排。實務上一個案子會同時包含兩邊，但釐清需求時分開講會比較清楚。
我已經有一個舊網站，是要改版還是重做？
可以先看三件事：內容架構是否還符合現在的業務、既有內容有多少可以沿用、以及底層系統還能不能維護。如果只是視覺老舊、架構沒問題，改版通常足夠；如果連導覽結構都要重排、後台已經無法更新，重做反而比一直修補省事。建議先做一次完整的內容盤點再決定。
設計階段我應該參與到什麼程度？
需求釐清與架構規劃階段最需要你，因為只有你最清楚業務與客戶；視覺設計階段請把意見集中在「是否符合品牌調性、訊息是否清楚」，而不是逐個像素的位置；實作階段則以測試回饋為主。回饋時盡量描述問題而不是直接給解法，例如說「我擔心客戶看不懂這段在講什麼」會比「把這段改成紅色」更有幫助。
上線之後就結束了嗎？
通常不是。網站上線之後才開始有真實數據，可以觀察訪客從哪裡來、停在哪一頁、在哪一步離開。依照這些觀察調整標題、順序與行動呼籲，是讓網站持續變好的方式。至少要記得在上線時把分析工具裝好，否則之後想回頭看也沒有資料。
如果你正在評估要不要做新網站，或者手上已經有一個網站但不確定問題出在哪裡，創昇SEO提供免費的網站健檢，會從內容架構、行動版顯示、頁面速度與搜尋能見度幾個面向整理出一份現況說明，讓你先看清楚目前的狀態再決定要不要動工。
我們也提供全台免費到府解說。如果你比較習慣當面把需求講清楚，或是想讓公司內部幾位負責人一起聽，可以直接約時間，我們會帶著健檢結果過去，一項一項說明給你聽，不需要先決定合作與否。