什麼是網頁設計？2020網站設計終極指南

網頁設計(Web Design)是規劃、概念化和安排用於網路內容的過程。現代網頁設計不只注重事物的外觀（美學），還重視事物的運作方式（功能）。網頁設計不僅限於網站，也包含網頁應用程式、行動APP和用戶界面設計等其他用途。以下就來解答網頁設計要素有哪些？有哪些網站設計類型？最後還會推薦網頁設計者值得參考的網站！

網頁設計元素

設計網站時，必須同時考慮網站的外觀和功能。無論最終如何衡量表現，將這些元素融合到設計中都將有助於最大化網站的成果。舉例來說，你是否知道，因為搜尋引擎優化(SEO)的緣故，網頁設計可能會對你在搜尋引擎（像是Google）的表現產生巨大影響？

視覺元素

以下是你進行網頁設計時，需要考慮的視覺元素，以確保一切看起來不錯！

文字文案

從根本上講，網站的外觀與其文字是相輔相成的。絕對不應該將這兩者分開考慮。讓你的設計師和內容作者一起工作，而不是按順序工作，就能完成更強大的設計。

延伸閱讀：文字內容或設計，哪個優先？

字型

設計網站時，必須選擇易於閱讀的字體來搭配原先的設計。像是Canva的Font Combinator之類的工具可以幫助你找到最適合的字體。而像是PageCloud之類的網頁設計工具，甚至在其應用程式中提供許多字體配對。

延伸閱讀：向網站添加字體的簡便方法（包含客製化字體）

色彩

顏色是設計網站時要考慮的最重要元素之一。請記住，外面有很多對於色彩心理學的誤解。在為網站選擇顏色時，最重要的就是要將顏色與你的品牌和你要傳達的訊息保持一致。

延伸閱讀：為你的網站選擇一個不糟糕的配色方案

佈局

你決定如何安排內容將對網站的外觀和功能產生巨大影響。儘管在網站佈局方面沒有任何特定規則，但是絕對有你應該遵循一些原則。如果你不知道如何寫程式語言，那麼了解不同網站設計工具的局限性就很重要，這樣你就不會在設計途中陷入困境。

形狀

在過去的幾年中，網頁設計中對圖形元素的使用確實得到了普及。結合使用漂亮的顏色和形狀可以完成許多事情，像是吸引網站訪問者的注意力。此趨勢的最大挑戰是如何不靠程式代碼來實現設計。

延伸閱讀：幾何如何造就殺手級網頁設計

間距

設計中的每個元素之間都存在一定的空間，無論是圖像、段落、線條，甚至是字母也有間距！根據經驗，有「太多的空間」比「將東西塞在一起」還要好。空格的概念絕對要是現代網頁設計師的首要考慮。

圖像和圖示

驚人的設計可以在短短幾秒鐘內傳達出很多訊息。實現此目標的其中一個方法就是使用效果強大的圖像和圖示。在Google快速搜尋圖庫或圖示會產生數千種選擇。為了幫助你簡化搜索，以下是我們的一些最愛圖庫網站：

免費圖片和圖標

高級圖片和圖標

Shutterstock

影像

影片是網頁設計的趨勢。如果使用得當，它們可以幫助你網站的造訪者體驗無法用文字或圖像描述的內容。你應該記住的一件事是，引人注目的影片可能會分散注意力，並且永遠不應該與你的內容競爭。

延伸閱讀：如何正確的在你的網站上使用影片背景

功能要素

導覽列

導覽列是確保你網站“正常運作”的主要組成部分之一。根據受眾的不同，你的導覽列-可以有多種用途。它可以幫助首次拜訪你網站的使用者發現你所提供的服務，同時引導回訪者到你網站中的特定部分。不論是哪種情況，你都需要遵循一些最佳做法。

速度

沒有人喜歡緩慢的網站。無論你的設計有多好，如果它無法在合理的時間內加載內容，它就不會出現在搜尋結果中，也無法實現你的目標。儘管頂尖的網站架設平台通常都會壓縮你的網站內容以最大程度地縮短加載時間，但這也並非絕對。所以做好你的功課，以確保你選擇的工具提供最佳效能。

延伸閱讀：Google的網頁速度測試工具

動畫

有無數多種網頁動畫技術，可以幫助你的設計完成各式各樣的任務，像是「抓住使用者注意力」，或是讓使用者進行像是填表單或是點擊按鈕等特定的動作。如果你網頁設計的新手，建議一開始先進行簡單的動畫。因為複雜的動畫技術通常需要開發人員參與。

用戶互動

造訪你網站的使用者可以根據其設備透過像是滾動、單擊、鍵入等多種方式與你的網站進行互動。最佳的設計總會簡化這些交互動作，從而給用戶留下他們可完全掌控的印象。以下舉幾個例子：

絕不自動播放音樂
除非可點擊，否則絕不在文字下劃線
讓表格行動友善
避免彈出窗口
避免使用捲軸

網站架構

網站的架構在用戶體驗和SEO中都扮演著重要角色。如果人們在瀏覽你的網站時迷路，那麼爬蟲程序也有可能。儘管在線上有一些免費的網站地圖(sitemap)建置平台，但是對於一般小型網站，有時最好的方法就是將網頁分佈寫在白板或紙上。

延伸閱讀：如何創建可增強SEO的網站架構

跨瀏覽器和跨設備的相容性

出色的設計在所有設備和瀏覽器（包括 Internet Explorer）上都會看起來不錯。如果你是從頭開始建構網站，我們建議你使用跨瀏覽器測試工具來使此繁瑣乏味的過程更快，也更有效率。另一方面，如果你使用的是網站建置工具，則跨瀏覽器測試通常由公司的開發團隊負責，你就可以專注於設計。

網站設計類型

儘管你可能在很多網路文章上看到對固定、靜態、流暢等網站設計類型的討論，在如今的”行動裝置優先”的時代，只有兩種方法可以正確地設計網站，那就是自適應式網站和響應式網站。

如今使用網站設計工具，最棒的是你無須知道如何編碼，即可建構在所有設備上都看起來很棒的精美網站。

了解自適應式和響應式網站的優劣將幫助你找到最適合自己的網站。

自適應式網站

自適應式網頁設計採用針對不同螢幕尺寸製作的兩個或多個版本的網站。根據網站如何偵測需要顯示的”版本”，可以將自適應式網站分為兩個主要類別：

根據裝置類型進行調整

當你的瀏覽器（又稱客戶端）連接到網站時，HTTP請求將包含一個名為“使用者代理”(user-agent)的字串，該字串將通知服務器嘗試查看該頁面的設備類型為何。

基本上，這意味著網站知道要顯示何種版本（例如：桌機或手機）。這種方法的唯一問題是，如果在桌機上縮小瀏覽器窗口，該頁面將無法調整，因為它會繼續顯示完整的“桌機版本”。

根據瀏覽器寬度進行調整

除了“使用者代理”之外，網站也可以使用”媒體查詢”(media-queries)和斷點(breakpoints)在版本之間進行切換。所以，你將擁有的是1080px，768px和480px等寬度的版本，而不是桌機、平版和手機等不同裝置的版本。除了在設計時提供更大的靈活性之外，這種方法還可以在大屏幕上更改瀏覽器大小時，提供更加“響應式”的外觀。

優點

所見即所得(WYSIWYG)的編輯
自定義設計無須代碼也可更快、更輕鬆地建立
跨瀏覽器和跨裝置的兼容性
快速加載頁面

缺點

如果是使用“裝置類型”的網站，在桌機上使用小窗口的瀏覽器查看網站時，可能會看起來很殘缺
局限性，某些效果只有在響應式網站才能做到

響應式網站

響應式網站結合使用靈活的網格（基於百分比）和斷點（使用媒體查詢），以針對每種瑩幕尺寸創建自定義外觀。與僅在遇到斷點時才調整的自適應式網站不同，響應式網站會根據屏幕尺寸不斷變化。

優點

無論使用哪種裝置類型，每種螢幕尺寸都會有良好的使用者體驗。一般響應式網站的建構平台通常都很僵化，這使得設計難以“突破”數十萬計的可用模板

缺點

需要大量的設計和測試以確保品質（如果是從頭開始設計的話）。如果不使用訪問代碼，客製化設計可能會面臨挑戰。

注意：自適應網式站可以包含響應元素。例如，可以將圖像畫廊建構成完全響應式，而網站的其餘部分仍是自適應式的。