網站設計：完整指南

披露：此內容受讀者支持，這意味著如果您點擊我們的某些鏈接，我們可能會獲得佣金。

網站設計曾經非常困難，但現在不再如此。

幾年前，當我第一次開始設計我的網站時，並沒有大量的資源。 基本上有兩種選擇——學習網站編程語言的基礎知識或聘請設計師。 第一個選擇既困難又費時。 後者價格昂貴。

在嘗試自己設計所有東西的短暫嘗試之後，我最終在設計師身上花費了高價。 這比我想花的多，但我真的沒有太多選擇。

如今，新網站所有者擁有更多資源可供使用。 無需聘請設計師或學習編碼即可設計專業網站。

無論您是完全的初學者還是只是在尋找另一種設計網站的方法，您都來對地方了。 我將在本分步指南中解釋如何在下面設計一個網站。

我最喜歡的網站設計工具

Wix 是我最喜歡的網站設計工具。 它本質上是一種完全迴避網頁設計的替代方法。

作為免費的網站建設者，Wix 使任何人都可以輕鬆地從頭開始構建和設計網站——無需經驗、開發技能或設計知識。

我如此喜歡 Wix 的原因是它非常輕鬆。 即使是這樣一個簡單的工具，最終的設計也總是看起來很專業。 人們只會認為你聘請了一位設計師——這很好。

這種不費吹灰之力延伸到您不想自己處理的重要事情上，例如安全性和可靠性。

Wix 為他們雙方管理優化，因此您的網站始終受到保護，他們的服務器始終能夠將您的網站交付給訪問者。

此外，他們通過自動站點數據備份來加倍努力，以確保在發生可怕事情時永遠不會從頭開始。

我如此高度推薦 Wix 的另一個原因是它的多功能性。 它可以滿足幾乎所有類型網站的設計需求。

從簡單的博客到投資組合網站、在線商店、餐廳網站、小型企業網站等等，Wix 都能做到。 市場上的其他網站建設者只是沒有相同的多功能性。

下面繼續，我會教你如何使用 Wix 免費設計一個網站。

您需要做的第一件事是註冊 Wix。 所以前往 Wix.com 並創建一個帳戶。 這是 100% 免費的，您甚至不必提供您的信用卡信息。

只需單擊主頁或網站上任何其他位置上的眾多“開始”按鈕之一。

與其他平台不同，Wix 註冊過程可以在幾秒鐘內完成。 無需填寫任何復雜的表單字段。 他們只需要您的電子郵件和密碼。

您甚至可以繞過輸入任何內容，只需單擊一下即可使用 Google 或 Facebook 進行註冊。

註冊後，Wix 將自動引導您完成網站設計過程。

第 2 步：選擇您的網站類型

接下來，您需要確定要設計的網站類型。 您的回答將對您的設計選擇產生重大影響。

例如，個人博客和電子商務網站在設計選擇上會有很大差異。 用於展示攝影或定製藝術的作品集網站與當地餐廳網站的設計不同。

Wix 讓您輕鬆完成這一步。 系統將提示您從各種潛在選項中選擇您的網站類型。

根據您的回答，Wix 會自動為您提供該類別中適用的模板。 例如，如果您選擇“在線商店”，那麼佈局將適應產品頁面、產品類別，並讓您輕鬆設計結賬流程。

選擇網站類型後，Wix 會為您提供兩個設計選項：

• 讓 Wix ADI 為您創建一個網站。
• 使用編輯器創建您的網站。

第一個選項很簡單，非常適合匆忙的人。 您只需回答幾個簡單的問題，Wix 就會根據您的回答為您設計一個網站。 這個過程的速度令人印象深刻。

您將在不到一分鐘的時間內擁有一個全新的自定義網站設計。 設計很漂亮，除了使用您自己的內容自定義頁面之外，您就完成了。

出於本教程的目的，我們將堅持使用第二個選項——使用 Wix 編輯器創建站點。 這將為您提供更多的自由和對設計選擇的各個方面的控制。

步驟#3：選擇一個模板

與其嘗試使用空白畫佈設計網站，不如從模板開始更容易。

花幾分鐘瀏覽不同的選項。 你喜歡什麼風格？ 哪些模板可以模仿您的品牌形象？ Wix 有數以千計的模板可供選擇。 一開始可能有點不知所措。 但根據您的特定網站類型縮小您的關注範圍。

對於這個例子，我選擇了一個“商業”網站。 但這是一個非常廣泛的類別。 如果您查看屏幕的左側，您可以將注意力進一步縮小到業務類型。

Wix 為顧問、房地產公司、金融和法律等專業服務、市場營銷等提供特定模板。 每個網站類型都有不同的模板子類別。

例如，如果您選擇“在線商店”，那麼您將看到服裝、珠寶、電子產品、家居裝飾、美容用品、運動器材等的模板。 如果你正在設計一個博客網站，Wix 有用於個人博客、旅遊博客、時尚博客、播客等的模板。

您的模板將成為您網站設計其餘部分的基礎。 因此，重要的是要慢慢來，不要急於完成這一步。 您仍然可以根據自己的喜好自定義不同的設計元素，但使用正確的模板會容易得多。

第 4 步：編輯佈局

網站訪問者將在登陸主頁後不到一秒的時間內對您的網站形成意見。 這就是設計如此重要的原因，而這一切都始於正確的佈局。

Wix 模板已經針對用戶友好的設計進行了優化。 但是您可以自由和靈活地在此處進行一些更改。

在本例中，我正在編輯“業務顧問”模板。 假設我想在這個主頁上移動標題的位置。 我只需單擊 Wix 編輯器中的框並將其拖到頁面上的其他位置。

或者，也許我想在屏幕右半部分重新定位“了解更多”號召性用語。 我可以單擊它並將按鈕拖動到任何我想要的地方。

我鼓勵你在剛開始的時候移動一些東西。 這將向您介紹 Wix 編輯器，讓您在路上感到舒適。 如果您最終不想進行任何佈局更改，您可以隨時恢復到原始設計。

步驟#5：準備您的內容

內容是您網站設計的重要組成部分。 如果不確切了解網站上將展示哪些材料，您就無法完全完成設計。

收集圖像、視頻、GIF、徽標、標語、文本（副本）以及您想在網站上顯示的任何其他內容。

讓我舉一個例子來說明我的觀點。

我仍在編輯相同的業務顧問模板。 我在頁面的這一部分要做的第一件事就是將圖像與我自己的照片交換。 但在我這樣做之前，我還需要考慮屏幕左下方的相應文本副本。

默認情況下，模板在此處有一些空白區域，正如我在上面強調的那樣。 雖然空白是一個重要的網頁設計功能，但我不喜歡它在這種情況下的使用方式。

所以這些是我的選擇：

• 使用全長照片（如上圖）並在空白處添加一個段落。
• 使用較小的照片（如大頭照）並僅使用一段文字。

兩者都將實現我消除頁面空白部分的目標。 您看到一個組件如何影響另一個組件嗎？ 所有這些都與設計有關，如果您提前準備好內容，就會容易得多。

第 6 步：定義您的品牌戰略

開始考慮訪問者將如何看待您的網站。 配色方案、字體和其他設計組件等內容將直接影響您的品牌形象。

單擊 Wix 編輯器左側的“主題管理器”。 這是帶有“A”的按鈕，看起來像雨滴或油漆滴。

從這裡，您可以更改網站的主題顏色。 您還可以編輯標題和段落的默認文本主題。

在這種情況下，當前的配色方案非常適合商業顧問。 它既現代又專業。 但是，假設您正在為兒童設計一個網站。 使用鮮豔的色彩和粗體大字體，您可以享受更多樂趣。

如果您在第 5 步中添加了您的公司徽標和其他材料，您將需要確保配色方案與您的其餘內容相得益彰。

步驟 #7：添加登陸頁面

您的登陸頁面將具有獨特的設計。 雖然它們都應該遵循您主頁的相同品牌原則和主題，但設計選擇會有一些變化。

要添加頁面，請單擊 Wix 編輯器左側的頂部圖標。 然後單擊“添加頁面”，如下所示。

除了頁眉和頁腳之外，新頁面基本上是一塊空白畫布。 但不是從頭開始，您可以根據其包含的內容向任何頁面“添加條帶”。

只需單擊編輯器上的“+”按鈕即可瀏覽一些選項。

把它想像成一個迷你模板。 當您第一次選擇整個網站模板時，應用您在第 3 步中使用的相同原則。

這只是設計新登陸頁面的一種更簡單的方法。 Wix 已經有很多很棒的選擇，因此不值得嘗試從頭開始構建您的頁面。

第 8 步：關注可用性

有時在設計過程中，您可能會開始忽略訪問者將如何與您的網站互動。 但用戶體驗 (UX) 不容忽視。

人們在訪問網站時會期望某些設計最佳實踐。 例如，他們希望導航菜單位於頁面頂部。 他們希望頁腳包含聯繫信息。 他們希望徽標將他們帶回主頁。

讓我們看一些簡單的東西，比如導航菜單：

在此示例中，菜單中只有四個頁面。 你也許可以再增加一兩個。 但除此之外，它太多了。

想像一下，如果這個網站的菜單中有 10 或 20 個頁面。 這將是一場災難。 頁面頂部太雜亂，訪問者永遠找不到他們要找的東西。 總的來說，這將是一個糟糕的設計選擇。

考慮您所做的每一個設計選擇的可用性，從 CTA 放置到滾動效果、空白空間、架構以及介於兩者之間的所有內容。

不要試圖在這裡重新發明輪子。 遵循網頁設計最佳實踐，用戶體驗會很好。

第 9 步：優化移動設備的設計

據 Statista 稱，全球大約一半的網絡流量來自移動設備。 因此，您網站上的每個訪問者都將通過智能手機或平板電腦進行瀏覽，這可能是一種拋硬幣的機會。

您需要確保您的網站設計適合移動設備。 否則，訪問者會反彈，您將永遠無法獲得移動轉化。

幸運的是，Wix 使您可以輕鬆完成此過程。

從編輯器或預覽器頁面，只需單擊移動圖標即可從您網站的桌面視圖切換。

Wix 將自動優化您的移動網站。 但是，自己檢查所有內容以查看是否要進行任何更改仍然是一個好主意。 如果您看到想要更改的內容，可以在不更改桌面版本的情況下編輯您網站的移動設計。

第 10 步：發布您的網站

完成設計後，就該讓您的網站在網絡上上線了。

值得注意的是，您的網站不必 100% 完成即可發布。 您可以隨時返回並在以後添加頁面。 但是一旦你有了一個主頁、關於頁面、聯繫頁面和一些站點元素，就把它發佈出來，這樣你就可以開始產生一些流量了。 請確保您沒有發布任何不完整的頁面。

單擊 Wix 儀表板右上角的藍色“發布”按鈕繼續。

正如我之前所說，您可以使用 Wix 100% 免費設計和發佈網站。 但有一個問題。

免費 Wix 用戶無法自定義他們的域。 所有域都包含您的 Wix 帳戶名稱，然後是 Wix 的品牌，然後是您的站點名稱。 從上面的例子可以看出，這裡的域是：

http://neilpatelsample.wixsite.com/mysite-1

對於任何與業務相關的網站來說，這不是一個可行的選擇。 如果您只是使用該網站來玩弄網頁設計原則，那也沒關係。 但是，如果您想要一個擁有真實訪問者的合法網站，則需要升級到高級 Wix 計劃。

現在您可以使用自定義域名，可以直接通過 Wix 購買，也可以從第三方域名註冊商處購買。 如果您還沒有域，只需從 Wix 獲取。 通過單一平台管理一切變得更加容易。

結論

多年來，網站設計確實發生了變化。 曾經對新網站所有者來說是一項重大挑戰或昂貴的冒險，現在可以輕鬆完成。

像 Wix 這樣的網站建設者基本上消除了從頭開始設計網站的需要。

非技術用戶和零設計經驗的人可以選擇模板並使用自定義內容填充他們的網站。 無需學習任何網絡編程語言或聘請設計師。

註冊 Wix，按照上面列出的分步流程進行操作，您將在幾分鐘內擁有一個專業設計的網站。 就是這麼簡單！

了解我的代理機構如何為您的網站帶來大量流量

• SEO – 釋放大量 SEO 流量。 看到真實的結果。
• 內容營銷——我們的團隊創建了可以分享、獲取鏈接和吸引流量的史詩內容。
• 付費媒體– 具有明確投資回報率的有效付費策略。

預約電話