隨著網路應用程式、手機應用程式和使用者介面的推陳出新與更新優化，網頁設計已不僅僅侷限於讓網頁看起來好看的「美學設計」本身，更延伸至網站整體功能和在不同裝置及介面上的應用，甚至，你知道網頁設計還可能大大影響你在Google搜尋引擎上的排名嗎？這篇文章就要告訴你，如何設計出一個不只好看，更具有功能性且能有效提升網站排名的方法。
選單目錄
第一章：尋找靈感
網站設計師通常會在網路上尋找設計靈感，以下是幾個我們最推薦也相當容易使用的國外網站，在規劃你的網站時，也許可以在這些網站上找到你喜歡的風格：
第二章：選擇網站設計工具
一般來說，網站設計工具分為電腦應用程式和網站建置平台兩種，而在建置之前，必須要考慮你的團隊規模、預算、你想要的網站類型和需要的功能，這些都會關係到你所需要投入的資源和後續的網站維護。
電腦應用程式
要設計出一個漂亮的網站頁面，需要由專業美工或設計師先畫出設計圖，再將這些元素交由研發團隊的工程師轉換為程式碼。常見的設計應用程式像是Photoshop和Sketch等。
對於比較大型或是比較複雜的網站來說，因為網頁需要更精細且更準確的網站風格呈現，用電腦應用程式來做設計嚴格來說是比較標準的做法，但相對的，當中的重要工程就會落在網站開發團隊身上，而且多半會伴隨著人力、資源和耗費時間龐大的問題。
網站建置平台
現在網路上有各式各樣的網站建置平台，提供多樣化的系統功能和服務，常見的像是Wix, Squarespace、 Webflow 和 Pagecloud，而這還只是很少一部分，在挑選架站平台之前，首先要先了解平台能做到的設計程度、樣式選擇、價格和後台編輯的使用，在下手前必須要先做足研究，或是先使用免費版測試，再來選擇最適合你的架站平台。
架站平台分為自應式和響應式兩種，而這兩種類型的網站又各會帶來使用者不用的操作體驗，這些細節都將在接下來的文章中做詳細介紹。如果你不懂得如何寫程式，那麼熟悉並了解這些網站架設工具的自由度和設計多樣性將變得非常必要。
在你開始架網站前先決定你的需求，你的網站需要相片圖庫嗎？你多久會更新一次你的網站？你需要聯絡表單嗎？先釐清需求，再有效地找到能滿足你的需求的架站平台，才能打造出你夢想中的最佳網站！
第三章：網站設計元素
就跟人一樣，網站設計的內在（功能面）和外在（外觀設計）都很重要，一個優質的網站應該整合這些元素，才能將網站的使用體驗和表現最佳化。優化網站使用體驗的必要元素包含：前台操作指引清晰、正確使用圖形和圖片、寫法正確且適當插入的文字和整體配色。而影響網站表現的因素則包含：網站速度、排名、搜尋難易度和受眾掌握的精準度。
視覺化元素
接下來我們將很快地告訴你一些在設計網站時所需要考慮的元素，每個段落都會提供一些小訣竅，讓你能更快掌握這些要點：
寫文案
基本上，網站的外觀和文字是息息相關的，網站的文案寫手和美工設計需要緊密地攜手合作，才能讓網站設計一體成型且達到平衡。例如在網站中加入圖案和圖片時必須把重點放在文字區塊，用文案來點綴及襯托你的圖像。
字型
選擇一個能適用你整個網站的字型。網站所使用的字型應該要能搭配網站的配色、形象和圖片，且能強化整體的網站風格。像Canva’s Font Combinator這類型的工具能夠幫助你找到最適合你網站的字型，另外還有PageCloud的應用程式甚至可以幫你配對豐富的字型組合。
顏色
顏色的選擇是在設計網站時最重要的決定性因素之一。要記住，許多人對色彩心理學存在許多的迷思和誤解，當在架設網站時，你應該更著重在網站整體的調性，讓你的品牌和你想傳達給受眾的訊息與網站配色保有一致性。
版型
你如何決定你的網站內容排版，將對網站的使用者體驗和功能性有極大的影響。雖然沒有一個具體的規則教你如何挑選版型，但還是有一些基本的原則可以遵循，像是視覺層次、黃金比例、席克定律、費茲法則、三分法、格式塔設計法則、留白和乾淨設計及奧茲剃刀理論。確保你將目標受眾的需求考慮進去，並且避免太過於複雜的版型導致分散你想傳達的訊息。
形狀
在網站設計中使用圖形元素可以幫助你整合文字和圖片，還能提升網站外觀的整體質感。結合美麗的色彩和形狀可以很直接地在第一時間抓住網站訪客的目光，也能進一步爲網站流量帶來很大貢獻。
間距
間距是在架構一個討喜且動線明確的網站時非常重要的關鍵。網站中的每個元素都會形成不同型態的間距。適當的間距可以讓網站的文字、照片和圖像達成完美的平衡，持續地使用留白概念可以增加網站操作使用時的流暢度，是現代網站設計不可或缺的概念。
圖片和圖標icon
讓人驚艷的設計可以在短短幾秒內溝通大量的訊息，而這一切都和善用圖片和icon有很大的關係。選擇適合的圖片和icon有助於強化你想溝通的內容，只要簡單上Google搜尋就可以輕易獲得許多有用的相關網站工具：
免費圖片和icon：
進階版付費圖片和icon：
- 影片
在網站中加入影片的形式在網站設計中越來越受到歡迎，如果使用恰當，可以有助於幫助網站使用者理解那些無法用文字和圖像傳達的訊息。想像當你在一間設有電視的餐廳裡吃飯，你會發現周遭的人的目光無法離開螢幕中不斷變換的影像。因此我們建議，在確保不會模糊焦點的前提下，網站中加入動態影片也許是個好主意。
功能性元素
網站功能面的設計對於網站在搜尋引擎的排名和使用者體驗至關重要，所以在進行網站設計時，務必要把以下幾個重點考慮進去：
選單/導航列
網站的選單/導航列是決定你的網站是否能適當發揮作用最重要的元素之一。取決於你的受眾，你的導航列可能有多種不同的使用目的：幫助第一次造訪網站的訪客得知你的網站提供什麼樣的服務、讓重複造訪的旅客快速登入和提升整體的使用者體驗等，你可以在這裡找到更多的小訣竅，幫助你優化你的網站導航列。
使用者互動
你的網站訪客可以用各種不同的方式和你的網站產生互動（滑動滾輪軸、點選和輸入等）而最好的網站設計應該讓使用者感覺他們是可以「控制」他們正在瀏覽的網站的，以下是幾個簡單的例子：
-絕對不要自動播放音訊或影片。
-除非是可以點擊的，否則絕對不要在文字下加入底線或其他強調文字的裝飾。
-確保所有的表單都是手機使用者友善的。
-避免彈跳視窗。
動畫
現在網路上有非常多元的動畫技術讓你的網站可以抓住使用者的眼球，還能引導使用者和你的網站做互動。比方說，在你的網站裡使用表單或問答式的按鈕，當訪客填寫表單或回答在問題時按下是或否，都能使訪客和你的網站產生連結。但我們仍要建議在第一次設計網站時盡量選擇簡單一點的動畫，否則過於複雜的動畫對工程師或網站開發者來說可能都是個大工程。
速度
沒有人喜歡速度慢的網站。要人花上超過幾秒的時間等待網站載入完成，可能會使有些人因為不耐煩而跳出或直接關閉視窗。因此，不管你的網站設計得多精美，當網站因為速度而影響搜尋引擎排名時，就先被大大扣分了！
你可以發現，很多網站為了更快的載入速度會刻意壓縮網站內容，但這種方式對於提升排名的效果可能有限，建議在選擇架站平台時可以做點功課，看看哪個平台的架站工具在這方面的表現較佳，像是PageCloud就有優化網站中容量過大的圖片、多張圖片相簿的功能，用來加速網站載入速度。
網站結構
一個網站的結構在使用者體驗和搜尋引擎優化中都扮演相當重要的角色。你的網站使用者應該要能夠透過導航列或選單方便地瀏覽網站，如果連他們都在你的網站中「迷失方向」，找不到他們需要的，那麼網站爬蟲大概也會遇到一樣的問題。（註：「爬蟲」指的是透過搜尋網頁確認網站是否功能健全的一種自動化程式。）而不夠明確的導航列，就可能嚴重影響你的網站排名。
跨瀏覽器及跨裝置相容性
一個好的網頁設計應該在任何瀏覽器和裝置上看起來都一樣好看，如果你是用程式軟體scratch製作網站，我們會建議你使用跨瀏覽器測試工具來加速你的撰寫流程，同時也會更有效率。而如果你是使用架站平台，一般架站工具的開發者都已經把相關的測試工具內建在平台中，不僅可以省下多餘的測試時間，也可以讓使用者把心力更專注投入在網頁設計上。
第四章：網站設計類型：自應式 VS. 響應式
過去你可能曾經聽過固定式網頁、流動式網頁和靜態網頁等各種不同的網站類型，但在手機裝置成為主流的現在，最適合的網站類型可以大致分為兩種：自應式和響應式。了解自應式和響應式網站的優缺點，可以讓你更能清楚分析哪一種架站平台會更符合你的需求。
自應式網站
自應式網站設計針對特定的螢幕尺寸有兩種或兩種以上的專用版本，能因應網站偵測顯示最合適的主要目錄選單尺寸：
適應裝置類型
當網頁瀏覽器連結到網站時，HTTP會發出一個含有「使用者代理」的訊號給伺服器，告知是哪種裝置正嘗試瀏覽網頁，而自應式網站則會依據來源的所屬的裝置類型來顯示（例如：桌機、手機或筆電）。因此當你在桌機上嘗試縮小畫面時，畫面沒辦法依據螢幕大小調整成手機或平板尺寸，問題就在於你使用的瀏覽裝置仍是桌機。
適應瀏覽器寬度
另一種適應類型，則是藉由媒體查詢（原文media queries，是一種可相容不同螢幕尺寸的CSS。）和斷點（原文breakpoints，指特定的網頁寬度）來切換適應裝置的尺寸，分為1080px、768px和480px三種，這樣的呈現方式不但可以提供網頁設計更多的彈性，也能提供更容易閱讀的使用者體驗。
自應式網站優點：
- 編輯模式「所見即所得」，你在編輯時看到的樣子就是最後呈現的樣子。
- 無需程式碼的客製化設計更加簡單快速。
- 跨瀏覽器和跨裝置相容。
- 網頁載入速度快。
自應式網站缺點：
- 使用適應裝置的自應式網站，當在桌機版本上用較小的瀏覽視窗時頁面顯示可能會跑掉或出現損壞。
- 部分網站使用的效果可能只能用在響應式網站。
響應式網站
響應式網站可以更精細地依據網站中各元素在排版中的比例，依裝置尺寸等比例調整大小。例如：一則在頁面中佔比25%的標題，不管螢幕尺寸放到多大都會維持25%的比例。響應式網站同樣可以透過斷點客製化調整在不同尺寸裝置中的顯示方式，但有別於自應式網頁需要在頁面觸及到斷點時才切換，響應式網頁可以隨時變換及調整顯示畫面。
響應式網站優點：
- 不管使用的是何種裝置，在不同尺寸的螢幕上都能有優質的使用體驗。
- 響應式網站的架站系統通常是有固定的模板，讓設計不容易出現損壞。
- 有成千上萬種版型可供挑選。
響應式網站缺點：
- 如果一開始是用scratch製圖，可能需要大量的設計和測試來確保品質。
- 在不使用程式碼的情況下，要做到客製化需求可能比較具有挑戰性。
自應式網站架站工具
Wix 和 Pagecloud是目前市場上討論度最高也最多人使用的視覺化網站架站工具。兩者都使用自應式系統，在「所見即所得」和拖放操作方面都是首屈一指，你不需要靠寫下任何一條程式碼也能打造幾乎任何你想要的網站設計。
Wix在2006年問世，至今打造了各式各樣可適用於商業網站的網頁模版，也被許多人公認為是最適合初學者的架站工具。
雖然很難確切指出哪個架站平台最好用，但還是有幾個重點可以做為選擇參考依據，同時以下推薦的兩種推薦架站平台都有提供免費試用，也非常建議在都嘗試過再做選擇，：
- 如果你想找客製化彈性最大且體驗最佳的，建議可以選擇Pagecloud。
- 如果你過去完全沒有架站或網頁設計經驗，推薦選操作最簡單的Wix。
- 如果你打算和一群網站開發團隊一起架設網站，建議選Pagecloud。
- 想要有最多最豐富的版型選擇，那就選Wix。
- 如果你希望能在桌面排版系統累積一些經驗的話，就選Pagecloud吧！
響應式網站架站工具
像Squarespace這類的架站平台提供了響應式網站的架站工具，但這也代表它的編輯體驗是相對受限制的。要打造一個流動式響應式網站相當困難，而當你不會寫程式時，要建造一個別出心裁且與眾不同的網站更是難上加難。
這也是為什麼像 Webflow 和 Froont這類更精細的架站工具加入戰局，而如果你不確定自己是否適合這樣的工具，以下提供幾個優缺點做為參考：
優點：
- 不會寫程式也能為你量身打造響應式網站。
- 精準操控頁面上的每個元素及物件。
- 可輸出程式碼，將你的網站「打包帶走」移至其他相容系統。
缺點：
- 複雜的工具使得上手更加困難。
- 相較自應式網站設計過程更花時間。
電子商務
電商網站在網站設計中是相當重要的部分。建造一個有清楚的導航列、內容豐富且準確展示你的商品的網站，才能讓消費者享有最好的使用體驗。如果想知道如何開始建造網站且在網路上開店賣東西，這篇五步驟打造電商網站的文章也許對你會有幫助。
下一步
以上關於網站設計的知識和資訊希望對你有幫助，最後我們再來回顧一下本篇文章的幾個大重點：
- 使用者優先：用戶的使用者體驗絕對是網站設計的優先考量，他們才是決定你的網站是否值得造訪的重要對象。
- 選擇你需要的架站工具：在開始建造網站之前，先想清楚你的網站有哪些需求，再從最符合需求的工具中挑選做決定。
- 視覺化平衡：掌握網站中文字、圖片、圖像、配色和影音素材的平衡，避免在網頁置入太多令人眼花撩亂的元素，導致模糊焦點。
現在你已經掌握到架設和設計網站的訣竅了，如果對於網站設計、電商經營或網站內容優化有更多興趣，歡迎瀏覽更多站上文章，或私訊我們替你解答！
