內容目錄
作為企業或個人的品牌形象入口，或因為需要收整大量的資訊、有系統地累積更容易被搜尋到的內容，抑或更彈性自由地規劃功能與設計，「網站」都可以同時回應以上的需求，也是建立網站之所以重要的原因。但一般人要建立網站時，最常問的問題就是：「網站設計怎麼做？」。
一個好網站能幫你加分，但什麼才是好網站呢？如果你不是工程專業，這題的確不容易。因此，這篇文章幫你整理了 5 個重要的網站設計原則以及 4 類實用工具，讓你的網站成為你的品牌資產而非負債。
要先說明的是，這裡說的「網站設計」，並不單指視覺上的設計或排版，還包含網站的資訊架構以及使用者體驗。好的網站須要依據網站目的創造友善的使用體驗，才能滿足使用者的需求、令人印象深刻。
6 種常見的網站設計類型
要創造好的使用體驗，前提是先確認網站的目的，才能以終為始來進行網站設計。以下整理常見的網站設計類型，分別是用「網站目的」以及「頁面數量」來區分，幫助你定位你所負責的網站，屬於哪一種。
一、以網站目的區分
1. 品牌形象官方網站
這就是常見的「企業官網」或「品牌官網」。目的以展現品牌形象為主，資訊則包含公司的重要內容，像是理念願景、提供的產品服務、聯絡方式等。
網站設計重點在於資訊規劃架構是否順暢，以及設計是否展現品牌風格。
2. 電商、購物網站
就是我們常聽到的「線上商城」、「網購網站」，規模大到如 PChome、蝦皮購物，小至個人經營的文創電商。目的就是讓大家能瀏覽商品，進而下單購買，所以網站設計重點在於如何創造安全、友善的購物流程，並建立品牌信任感。
3. Blog、媒體網站
這也是常出現在我們生活中的，例如「部落格」、「新聞網站」等。目的不外乎是為了傳遞資訊、累積內容建立知名度或專業度等。網站設計重點在於如何讓閱讀體驗更友善、方便查找使用者需要的資訊等。
4. 個人網站
個人網站最主要的差異在於它的背後是一個「個人」而非「組織」，所以只要背後經營的是個人，就可以稱為個人網站。
這一個分類底下又可依據個人目的不同，細分成個人履歷/作品集網站、個人社群媒體多連結頁面等，完整內容歡迎閱讀【網站架設全攻略】帶你從 0 開始架設個人網站。
二、以頁面數量區分
1. 一頁式網站（One-Page-Web，又稱單頁式網站）
顧名思義，就是不需要點選分頁，一直往下滑就能瀏覽完所有網站內容的網站。部分活動網站、產品網站、個人履歷/作品集網站、社群媒體多連結頁面等會是以這種形式呈現。
一頁式網站適合給需要呈現的資訊沒那麼繁雜的人，若資訊量太多且設計不當，一直往下滑反而會造成使用者的體驗下降，產生不耐。
所以網站設計重點在於資訊邏輯的安排、查找內容的友善度、引導動作規劃的流暢度等。
2. 多頁式網站
也就是頁面多於一頁的網站，大部分網站屬於這一個類型。適合給資訊量較多、資訊層級較複雜、動作較多的網站。
由於資訊較繁雜，網站設計的重點就在於把每一個分頁的資訊層級、彼此的關係規劃清楚，以及如何引導使用者穿梭在不同的分頁中，最後引導他做出你希望他做的行動，例如訂閱電子報或下單購買等。
網站設計的 5 個基本原則與要點
不管你的網站是以上 6 個類型的哪一種，接下來要介紹的網站設計基本原則，都能幫助你打造一個好網站。
為什麼設計一個好網站很重要？因為它能幫助你建立你的品牌視覺風格、增加使用者停留在網站上的時間，也就代表他喜歡使用你的網站，進而增加品牌信任感。最重要的是讓使用者願意下單購買、或再次造訪，甚至是推薦給其他人。
掌握以下 5 個基本原則，你也就掌握了網站設計的重要方向：
一、創造好的使用者旅程（User Journey Map）：UI/UX 佈局
一個網站最重要的就是能達到你的網站目的，而要達到網站目的，規劃友善的使用者旅程便十分重要，這就要仰賴 UI/UX 的佈局。
UI 指的是「User interface 使用者介面」，主要考量的是視覺上的美觀性以及使用上的便利性。例如網站的整體排版、字體大小、字型挑選、段落間距、顏色搭配、按鈕樣式等，為的是讓整體網站符合品牌風格、視覺美觀，以及閱讀操作上的友善。
UX 指的是「User experience 使用者體驗」，著重在這個網站使用起來的感覺。例如感覺起來好不好用、有沒有解決到他的問題或找到他想要的資訊，每一個動作之間夠不夠直覺與流暢等。這仰賴對使用者行為的研究、建立好的資訊架構、規劃使用者體驗流程等，才能打造出好的網站 UX。
有些公司會聘請專業的 UI/UX 設計師來進行以上工作，若你是個人工作者，建議可以多閱讀相關文章、多看其他的網站設計（例如 Awwwards），以及換位思考成為你的使用者，來發想與試用自己的網站，看看如何提升使用體驗。
二、確認你的網站有做好 RWD
RWD 指的是「響應式網頁設計 Responsive Web Design」，意思是網站的畫面會依據瀏覽器或載體的尺寸，自動調整網頁排版，讓網站閱讀與體驗上仍然順暢。
最標準的三種尺寸就是手機、平板與電腦。尤其現在使用手機上網的人又佔了八成以上（資料來源），很多網站公司甚至是從手機介面開始設計，再來調整成平板以及電腦的尺寸。
許多架站服務平台都有提供基本的 RWD 功能，讓你的網站可以自動在不同載具上調整排版，不過建議還是要親自檢查，因為如果有跑版或是因此功能壞掉，長期下來對品牌的損失其實很可觀。
（若不確定不同的架站服務平台是否能幫你做到 RWD，推薦閱讀【4 個免費架設個人網站的平台比較：Wordpress、Wix、Weebly、Portaly】來看不同平台的服務比較）
三、規劃友善的 SEO 架構
SEO 指的是「搜尋引擎最佳化 Search Engine Optimization」，白話就是讓 Google 更容易搜尋到你。
這是一種行銷技術，據一項 SEO 研究結果 Google 第一頁就佔據了 86.3% 的流量，也就是說，如果你的網站搜尋結果排在第一頁，就像路口的黃金店面，會吸引最多目光。
而要有好的 SEO，主要分成技術與行銷層面，技術上如果你不是工程師，通常比較難做，所以許多架站服務平台會提供 SEO 的套件讓你使用。
行銷層面則仰賴大量的內容累積，最直接的就是持續撰寫文章放在你的網站上。在撰寫前，要先研究並確認哪些搜尋關鍵字是你想經營的，然後才規劃與這個關鍵字有關的文章內容，接下來便要持續撰寫、累積內容，以及到 Google Analytics（GA）、Google Search Console（GSC）追蹤你的成果。
（延伸閱讀【個人網站的內容應該要放什麼？】來了解不同網站類型，到底適合放哪些內容？以及網站建好後，如何提升網站的 SEO 排名？）
四、提升網站載入速度
顧名思義就是你的網站需要讓人等多久才能看到內容、完成他想要的動作。等越久、讓人越不耐煩，就會讓越多人想跳出網站，你就流失了你的使用者，也對你的品牌形象扣了分數。你的網站的圖片大小、動畫數量、外掛數量、主機環境等都會影響到網站的載入速度，這也是你可以檢查的方向。
除此之外，Google 也直說網站載入速度會影響 SEO 的排名，載入速度越快，排名越高，可見其重要性。
五、與品牌一致的視覺設計
最後，是聽到「網站設計」會最直覺想到的「視覺設計」。一個好的網站視覺設計，會與你的品牌視覺有一定程度的一致性，所以建立一個清楚的品牌視覺規範便很重要。
品牌視覺規範的基本元素例如 logo、標準色、次要搭配色、品牌主要字型、次要字型、輔助圖形等。這些元素需要能運用在品牌的周邊產品上，最重要的像是你的名片、文件、社群媒體、網站等。
延伸品牌視覺基本元素，你甚至可以為網站建立一個屬於網站的視覺設計規範，例如按鈕顏色、標題字型顏色、次標題字型顏色等，讓你的網站有一個清楚的設計規則，且跟你的品牌具有一致性，藉此創造你的品牌識別度。
套版網站與客製化網站設計的差異
掌握以上網站設計要點後，接下來介紹網站設計的兩大形式，主要依據自由與彈性程度來做區分：
一、套版網站：自己做
套版網站指的是使用既定的網站版型來做有限程度的調整。
如果是跟網站公司合作，他們可能會提供過去做過的網站案例，給你挑選合適的來進行調整；若是使用架站服務平台，例如 Wix、WordPress，則基本上他們會提供多種版型選擇，套用後再讓你進行部分調整。
有一些架站服務平台，例如 Portaly傳送門，專門打造品牌的社群媒體多連結頁面，它的版型相對單純，所以操作起來也很簡單，可以一鍵選擇你的品牌色，就能套用在整個頁面上，讓你建立一致的網站視覺。此外，它本身就是符合手機介面的設計，不需要擔心不同裝置跑版的問題，也符合主流使用手機上網的趨勢。
（推薦閱讀【〖網站架設全攻略〗帶你從 0 開始架設個人網站】來認識三種主流的架站方式，及不會程式也能架站的五大工具）
二、客製化網站：找人做
客製化網站指的是完全依據你的視覺風格、內容規劃、目標需求等來做網站設計。若是選擇這個形式，一般會選擇請網站公司完全客製化網站，或是自己寫程式碼，依照自己的喜好來做網站設計。
如果是選用架站平台，比較難做到完全的客製化，除非你自己對程式語言有些了解，才能夠自己進去修改程式碼，增加網站設計的彈性。
套版與客製化網站設計比較
以下整理了選擇套版與客製化網站設計的比較表，幫你選擇一個較適合自己的方式：
| 套版網站 | 客製化網站 | |
| 自由度 | 較低 | 較高 |
| 所需費用 | 可控制 | 非常高 |
| 所需時間 | 較短（1 天-1 個月） | 較長（1-6 個月） |
| 使用者體驗 | 仰賴版型的 UI/UX 設計 | 仰賴自己或網站公司的專業 |
| RWD | 大部分架站平台有包含 | 大部分網站公司有包含 |
| SEO | 大部分架站平台有工具可使用 | 需與網站公司討論 SEO 策略 |
| 網站載入速度 | 取決於網站內容大小與複雜度 | 取決於網站公司的程式架構 以及網站內容大小與複雜度 |
| 視覺設計 | 依據版型的網站視覺設計邏輯作微調，搭配自製圖片素材 | 由網站公司協助訂定網站視覺設計規範，搭配設計師製作設計素材 |
幫助網站設計更順利的 4 類實用工具
無論你最後選擇了套版或客製化網站，接下來要介紹的四類實用工具，都能幫助你設計一個更好的網站。
一、UI/UX 的好幫手：Figma / Invision / Whimsical
這些屬於可以線上協作的設計工具，幫助你或是團隊一起規劃出好的網站使用者旅程。大部分功能大同小異，細部差異或個人喜好就留給你自己體驗看看。
這些工具可以幫助 UX 的規劃，例如使用心智圖或是樹狀圖建立網站的資訊架構，或是利用流程圖來規劃網站的使用體驗步驟，也可以使用白板或便利貼功能來發想網站裡的內容，並且將之分類與整理。
它們也能幫助 UI 的設計，因為它內建許多網頁或手機框架的模板，讓你可以把 UI 設計直接畫下來，來收集回饋、測試、來回討論調整等。是許多 UI 設計師不可缺少的工具。
二、RWD 檢查工具：Window Resizer
Window Resizer 是 Chorme 瀏覽器的擴充外掛工具套件，幫助你的網站做好 RWD（響應式網頁設計）。這個套件已經有超過 70 萬使用者，以及超過 4 顆星的評價。
點擊連結下載後，你即可在 Chrome 瀏覽器將你的網頁視窗大小改成指定的尺寸，來測試網頁在不同尺寸下的排版表現。Window Resizer 提供各式手機、平板、筆電、桌機的型號，幫助不可能同時擁有這些載具的我們，只要點擊滑鼠，就可以做最完整的 RWD 測試。
三、SEO 檢測工具：Screamingfrog / Ubersuggest
這兩個工具都是專門用來檢測你的網站 SEO 表現，不過 Screamingfrog 需要把它的軟體下載下來才能使用； Ubersuggest 則是輸入你的主網址即可進行檢測。
兩個工具的免費版都有掃描頁面的數量限制，不過對於小網站來說已經夠用。
檢測結果會列出網站 SEO 表現不佳或可以更好的地方，例如你的網站是不是有失去內容（出現 404）的狀況？H1、H2 是否有正確定義？圖片是不是有缺 alt（替代文字）？圖片是否太大影響網站速度等，幫你找到切入的方向。
四、網頁速度檢測工具：Google PageSpeed Insights
PageSpeed Insights 是 Google 出的網頁測速工具，只要輸入網址，就可以計算出你的網站載入速度，看看是屬於不及格、尚可還是表現優良。
除此之外，PageSpeed Insights 還會列出可能影響載入速度的問題，以及建議的調整方向，作為你的參考。你也可以輸入與你相似類型的網站，比較看看各自的網站載入速度表現，或許會增加你優化的動力。
網站載入速度越來越重要，因為它連動影響到 SEO 排名，所以絕對是不容小覷的面向。
結語
網站設計絕對不只關乎美感、排版等視覺面向，還包含了所有能讓整體網站體驗更加友善與流暢的各種面向。
這篇文章分享了五個網站設計的基本原則與要點，包含：設計友善的使用者旅程（UI/UX）、RWD（響應式網頁設計）、SEO（搜尋引擎最佳化）、載入速度以及與品牌一致的視覺設計，以上是網站設計需要掌握的原則，也是一個好網站的關鍵。
這五大面向若深入探討，都是各門很深的學問，無法用一篇文章就完整說明。但至少現在你有了判斷「好網站」的標準，並搭配文章中介紹的工具，能幫助你實際做診斷、找出未來可以優化的方向。
對於非網站專業的個人或組織來說，了解網站設計的基本原則與工具，能幫助我們跟網站公司溝通、選擇更適合的架站平台，讓架設網站事半功倍，且能真的為品牌帶來加分。
本文為個人網站經營的基礎教學，你也可以參考以下文章！
- 想從無到有打造個人網站，可參考帶你從 0 開始架設個人網站
- 想了解架站平台比較，可參考 4 個免費架設個人網站的平台比較
- 想知道個人網站內容如何經營，可參考個人網站的內容應該要放什麼？
- 想理解架站平台的付費方案比較，可參考常見的四個架站平台付費方案比較
作者介紹
Portaly 傳送門是台灣團隊開發的「社群微型網站」服務，一頁整合你的品牌首頁或個人網站，永久免費使用，並且為全球第一的中文 Link-in-Bio 品牌。