無論您是創意洋溢或不知從何開始的設計初學者，這個快速入門指南都可以幫助您快速建立美觀又實用的網站。
不管您在設計方面的專長有多強，一個全新的網站就像是作家空白的一頁，很多方向可以開始，要馬上起個頭有點困難。所以，在您開始使用Lorem Ipsum的排版之前，先把網站設計這10條法則讀過一遍。即使您知道您心中已經有想法，但我們保證您會發現，這個設計指南會對您帶來幫助。捲到文章的底部，您還會發現有測試過的三步驟「網站設計」程序：從網頁圖示到網頁字體、網站地圖到網頁顏色，以及給電子商務、一般業務/代理商/公司、作品集或部落格的專業建議。
總之，這份指南與建議將協助您讓到網頁的造訪的人逗留更長的時間，並從A點無縫接軌移動至B點。
網站設計的10個法則
在您開始建設網站之前（太認真等不及的魔人可以先往下捲去看建立步驟），我們認為這10條法則會是相當有用的準則，將協助您的網站設計不僅更時尚，而且也將更為有效率。
法則＃1：避免凌亂
設計與毫無章法的圖像與按鈕，常常會讓設計看起來不平衡。這些都常常讓造訪的人無法到達您想要他們要去的下一步驟，不管是到達聯絡頁面或是新增一個產品至購物籃。記住，空白是你的朋友。
法則＃2：優先處理頭版
頭版(Fold)指的是瀏覽器的底部邊框*。邊框以下的任何內容，只能透過滾動才能看見，這也表示用戶在一開始就必須被迫這樣做！所以請永遠記得將重要的內容與資訊放在這條線之上。
*請注意，頭版在行動版網頁上更短，所以空間更少，您擁有更少的空間來說服造訪的人繼續往下滾動。請一定要把握機會。
法則＃3：請記住希克定律
根據希克定律，當選項增加時，人們下決定的時間就會增加。透過限制用戶體驗每階段段的選擇權，以確保訪問的人注意力不會被分散在網路上的其他地方，一個行動呼籲按鈕比冗長的功能表選項有效得多。
法則＃4：鼓勵滾動，而非點擊
滾動式讓網頁設計可以無縫延續下去，跟點擊式的做比較，經驗上來說點擊不但會增加下載的時間，滾動式行動裝置上也更加直覺。
首先，滾動式比點擊式要要輕鬆，這表示著用戶留在網站上的時間更長，最近一個Crazy Egg的研究也證明了這一點，只是網站從點擊式切換為滾動式，就有36%的轉換率成長。
法則＃5：保持照片真實與自然
您知道來網頁造訪的人看到矯揉造作的照片會「倒彈討厭」嗎？模特擺上正經八百的姿勢，對於企業的商業團隊的企業網站來講好像很合適，但是一個您或您的團隊更真實自然的圖像則能跟觀眾建立更好的連結。所以真實生活、自然的圖像會是很好的選擇，事實上，我們已經為您的網站精選出許多類別的圖庫圖片，讓您可以挑出與您品牌相符的選擇。
法則＃6：運用視覺提示
運用圖像或圖形引導用戶，像是用人的照片尋找按鈕或是箭頭指向一個選單選項，就是為了引導造訪網站的人，而經過測試的重要行動。太過明顯了嗎？也許。很有效果嗎？絕對是很有效。
法則＃7：類型應該是清晰第一，美觀第二
您是否曾上過一個超時尚的網站但卻得歪著脖子看，因為要嘗試看懂那些漂亮難懂的斜體無襯線字體？漂亮的網路字體有很多，但很多並不適合在網站使用。
要清晰，能夠清楚閱讀，不會讓人分心並且確保，主要資訊在各種螢幕尺寸上都是可閱讀的。要整齊，與襯線體或斜體相比，幾何無襯線字體或粗大的標題字體是網站的最佳字體。
法則＃8：顏色是心理學
色彩是一個即時的方式與特定的情緒和性格注入您的網站設計。更重要的是，合適的顏色選擇也可以影響用戶如何回應您的網站。您知道橙色能與客戶溝通良好價值觀？或是藍色與智慧和想像力有所關連（讓跟創意代理商跟藍色很合適)？研究色彩心理學，做出會讓造訪網站的人印象深刻的顏色選擇。
法則＃9：設計用於行動裝置優先
多數首次操刀的網頁設計師會想像他們的網站是按比例寬大在桌機上被瀏覽，但實際上現時生活中世界上超過半數的瀏覽行為都是在行動裝置上。在有些行業，行動裝置的用戶可能還更高。
許多專業的網站設計師會建議您首先考慮行動裝置來設計網站，但至少要兩者兼顧，才能確保您擁有一個有效美觀，在各式裝置上都能有效的網站。
法則＃10：為每個人所設計
世界衛生組織（WHO）發現全球至少有22億人患有視力障礙或失明，這代表世界人口中的28.5％的人擁有某種形式的視力受損。提高您設計的色彩對比，像是搭配白底與黑字及選擇大型無襯線字體，就是兩種簡單的方式，能夠盡量提高網站的無障礙性與包容性。
如何設計網站：給初學者的實用指南
跟著這10個方便的技巧，建立漂亮的網站就在彈指之間，您隨時可以開始您的網站設計。
建立一個網站，可以是一件有趣的事…但若不知道從何開始，可能會讓人有點沮喪。在這裡，從務實的角度來探索我們設計網站時已經測試過的步驟。
“建議將此用於規劃建立專業網站設計。請將此頁加入書籤，讓您的網站即刻成型。”
第1步：建立您的網站識別
每個網站都需要統一的外觀和風格，作為您所有網站的網頁的品牌識別，這不僅給您的網站一個洗鍊又專業的外觀，還能協助保持造訪的人在各網站移動時保持參與度。如果每個頁面看起來明顯風格迴異，這對用戶的體驗將有負面影響，也會縮短階段時間，所以很值得花時間改善網站整體識別度。
一個有效的網站識別包括以下內容：
- 網站圖示
- LOGO商標
- 文字設計
- 配色方案
繼續閱讀並瞭解如何將各項目結合至網站識別
網頁圖示(Site icon)
圖示(icon)是網站的標識圖形，在WordPress.com的Widget、以及當存在瀏覽器或是手機當書籤或桌面應用程式圖示時使用。圖示的小型版本，一個favicon，出現在瀏覽器分頁的網站標題旁邊。
網站圖示是方形的，至少512×512像素，通常檔案存為PNG、GIF或ICO檔案，Favicon可以更小，但需要用Android裝置Chrome瀏覽器的高解析度規格，至少196×196像素。
上傳正確尺寸的網站圖示以及檔案類型非常重要，這樣才能無縫顯示。通常您正在使用的主題會通知您相關訊息，但是根據經驗，最好將圖示改以PNG上傳。關於網站圖像顯示也有很多規則，您可以從常見檔案類型劃分中了解更多資訊。
LOGO商標
LOGO商標是網頁圖示更全面的版本。舉例來說，一個網頁圖示可能只是用一個簡單的視覺化的圖形，而LOGO商標可能包含一些文字，除了圖形之外，還有像是公司名稱。
在不同的裝置上LOGO商標需要被合適地顯示尺寸，需要注意的主要的事情是，像是一些設備，如蘋果電腦等蘋果產品，採用Retina顯示技術，這技術每英寸比起舊設備顯示更多的點，約多了300 DPI，產生了更清楚明晰的圖像。
為確保LOGO商標在標準顯示器與在Retina顯示器的相同，最簡單的方法是將Retina顯示器的尺寸加倍。因此，舉例來說，如果您的網站內容管理系統(CMS)提示您的上傳大小為100×100像素的LOGO商標，實則應該上傳200 x 200像素的LOGO商標。
如果您開始一個新的品牌或企業，以此為契機來優化您的LOGO商標，製作回應式網頁設計。這代表所有在網路（和平面）LOGO商標將出現的地方，每個都需要一個不同的格式與複雜的程度。其中一種選擇是建立一種靈活的LOGO商標，與品牌的字型配合使用，以讓LOGO商標的變形適合各種類型的媒體。
不管您如何設計您的LOGO商標，如何正確儲存檔案是至關重要的，LOGO商標應始終儲存為向量檔案，這樣就可以重新造訪和修改，像是調整其尺寸或調整顏色，當您準備上傳到網站時，一定要將LOGO商標檔案儲存為PNG，這樣才能清楚顯示，不會像素化。
網路字體和文字設計
與印刷設計相比，文字設計網站也遵循許多相同的指導原則，在您的網站上建立類型的層次結構很重要，這些層次結構將由H標籤(H-tags)定義。「H」代表「頁首」、H1定義最重要和最大的文字樣式，H2定義次之和最大的文字樣式，並繼續往下到H6的等級。
當設定成H尺寸時，您為需要找到清晰的網頁字體。因此，針對小的標題大多數網頁設計師較青睞超清晰無襯線字體，嘗試襯線體展現風格，或只用H1、H2斜體文字。
您可以安裝網路字體到您的網站，這代表著造訪網站的人，當他們造訪網站時需下載字體，讓您能夠指定網站上的排版風格。Google字體提供了廣大的免費開源的網路字體來源，但您也可以在一系列字體專賣店探索更多的免費和付費的網路字體。繼續滾動並閱讀101個給設計師的最佳免費字型文章，找個您喜歡的字型吧！
我們認為在網站上比平面媒體更重要的是—— 重點要放在讓文字更清晰易讀，這是因為行動裝置較小，螢幕的受光度較差，讓視覺受損的讀者可讀性也連帶變差。因此，您可以透過增加字體的大小，使用更清晰的字體（如無襯線字體），並增加字體顏色和背景之間的顏色對比度，藉此提高可讀性。
我們挑選出最佳字體及字體組合的網頁顯示要素，為您在設計網站時，你可以輕鬆的選出頁首及內文字體，加以應用至識別上。
顏色
一直到建立過程的結束，顏色有時都會被忽略，但顏色不僅能統一網站網頁，也是個能影響用戶的情緒和感知的強力工具。
“對於網站，顏色被定義為HEX色碼轉換。HEX代碼是RGB顏色的編碼版本，在格式#RRGGBB（#RedRedGreenGreenBlueBlue）。 （如果您真的很好奇，可以學習HEX 色碼轉換是如何運作的。）不知道如何將CMYK或RGB色板轉換為十六進制？ HTML顏色代碼可以讓您輕鬆地找到並使用線上顏色選擇器和顏色圖表工具轉換顏色代碼。”
您可能有一個現成的品牌配色運用工具，但如果沒有，您可以使用色彩心理學的理論來幫助做顏色決定。不同的顏色對觀眾有不同強烈的心理效應，色彩選擇變成了一種相當有潛力的有效方式，會讓用戶在頁面上逗留久一點。
探索不同顏色如何影響造訪的人感知並回應您的網站：
請記住您的品牌顏色，很可能也是您的LOGO商標顏色，但不必是您網站的唯一顏色。事實上，如果您的LOGO商標是明亮的橙色和黃色，您可能希望只使用這些顏色作為點綴；明亮的黃色背景會讓觀眾的眼睛緊張，讓他們難以閱讀任何文字。像文字、色彩選擇會影響網站的易讀性，也對用戶體驗產生巨大影響。
看到幾個調色工具，對於網路的工作，看看我們為網站所精心挑選的配色方案。這些不僅考慮到UX的因素外，還提供了獨特的組合，可以幫助區分您的網站。
第2步：建立網站的首頁
首頁或是登陸頁，就是網站的焦點，通常是造訪的人從搜尋引擎第一個接觸的點，網站地圖的中心頁面，以及造訪的人通常造訪其他頁面後會被引導回來的地方。首頁應該要為網站其他頁面確立風格基調，並且利用行動呼籲（像是按鈕）、視覺提示（像是箭頭)或是功能單選項引導用戶去其他頁面。
首頁一個很好的經驗法則則是遵守希克定律（請參閱上面的黃金法則＃3），以確保僅向用戶顯示數量有限的操作方法。
舉例來說，您可能想鼓勵讀者向下滾動，對於在底部邊框頭版上的箭頭或行動呼籲，可以做成提示字樣。想要鼓勵點擊到不同的頁面？顯眼的按鈕或功能單選項應該是設計的重點，對於以搜尋為中心的網站，搜尋欄應清晰、顯眼並且最好在頁面上居中。
主頁橫幅圖像(The hero image)是佔主導地位的登陸頁(landing page)圖像。但是，如果您另有想法，您也可以用顯眼的字體、動畫或是影片替代。這個圖像的功能就是給用戶一個您網站第一眼的印象，以及營造一個身歷其境的用戶體驗。這可能需要運用特別的顏色方案或是風格來加強您的網站視覺識別。
主頁橫幅圖像(The hero image)也可以巧妙地被運用作為視覺提示，不同區域的顏色或圖案，會讓眼睛看向一個按鈕，或更明顯地，肖像可能「看起來」或是「指向」的設計某個元素來引導用戶。
第3步：為其他頁面建立範本
所以，您已經建立了首頁的設計，並制定出您希望用戶從首頁採取的主要方向。現在你應該已經開始有一些網站地圖到位。所有網站都不一樣並用於不同用途，但是整體來說，有些核心頁面會是所有網站都需要的，包含像是：
- 關於頁面
- 聯絡頁面
- 分類頁面（提供特定類別貼文的頁面，例如在 電商 衣服「男裝」）
- 服務頁面（公司網站）
- 專案頁面（部落格和作品集）
- 產品頁面（電子商務網站）
- 新聞頁面或部落格文章頁面
如果您的網站有搜尋功能，也將成為搜尋結果的頁面。
設計每個頁面需適應不同的元素。分類的頁面會需帶入大量的貼文預覽(post previews)，因此您可能希望參考Pinterest的網格設計樣式為基礎，加上欄與列的設計。聯絡人頁面可能需要包括地圖、電話和地址等詳細訊息，關於頁面可能包含團隊成員的個人資料、圖片，以及介紹性文字。
網頁設計師使用網站線框確定如何在網站的不同頁面上排列元素。網站線框是視覺參考，象徵網頁的骨架框架。您可以使用網站線框軟體來模擬，像是Adobe XD或Moqups，用向量軟體像是Adobe Illustrator，或簡單用手畫出線框。不管你用什麼方法畫出他們，他們都將作為網站設計的基本藍圖。記下元素的尺寸也很有用，像是手繪畫的圖像和列，都可在建立網站時參考。
在建造網站線框時，回朔參考已確立的網站識別（在建構過程的第一步），以及首頁設計（第二步）。這兩項都將幫助您做出有關如何設計和確立其他頁面樣式的決定，以及保持頁面功能的一致性，像是文字設計、圖像樣式和配色方案。這將確保您的最終網站設計會有一個統一並前後一至的外觀。
有關圖像方面的指導，請查看您為首頁所選擇的主頁橫幅圖像，是否具備可被其他圖像仿效的功能，像是黑白配色方案或是肖像的風格？
如果您已經選擇並且編輯圖片，您也將需要因應網路使用重新調整尺寸。可在Adobe Photoshop中轉到 檔案> 匯出 > 儲存為網頁用，並且將圖像存為特定像素尺寸的JPEG、GIF或PNG格式檔案。如果你不需要跑過一次照片編修軟體，免費線上Bulk Resize Photos是一款調整尺寸壓縮批次圖像的便利工具。
封面圖片作者nelelena, taniascamera, venimo, and PippiLongstocking
幾乎準備好要開始設計你的網站了嗎？在開始之前，建議先確認檢查一下這些對您特別有幫助，設計漂亮網站的秘訣與技巧：
- 網站配色訣竅 | 一手掌握10種情境模擬，30種絕佳的網站配色!
- 網站配色方案 | 讓您的網站擁有別出心裁的亮眼配色！
- 平面設計師必備App | 2020引爆設計能量的7款最夯工具
- 圖片尺寸技巧 | 網頁設計小錦囊，調整圖片不失真
- 色彩趨勢 | 設計感升級！巧妙運用舒適與奢華感兼具的大地色
