客戶友好型網站的 15 條網頁設計原則

想像一下走進一家零售店尋找一些新的工作服。 當你環顧四周時，你會注意到地板上的污漬、雜亂無章的架子和一種奇怪的氣味。 你會留在商店並從零售商那裡購買嗎？

商店設計會影響客戶的行為方式——網站也是如此。

Clutch 對 612 人進行的一項調查發現，83% 的參與者會注意到網站的設計是否美觀且是最新的。 或者，如果 50% 的參與者認為內容無關緊要或不能滿足他們的需求，他們會永遠離開網站。

那麼，你如何設計一個客戶會喜歡的網站呢？

這就是這篇文章的全部內容。 我們將向您展示為什麼優秀的網頁設計是必不可少的，並分享您可以用來構建高質量網站的 15 條網頁設計原則。

為什麼好的網頁設計很重要？

網頁設計師的平均年收入為 57,000 美元，比平均每年 44,000 美元的初級網頁開發人員高出約 8,000 美元。 設計師得到合理的報酬是有充分理由的：他們的工作至關重要。

當新的潛在客戶訪問您的網站時，它會留下第一印象，從而塑造他們未來與您的品牌的互動。 正是在這一點上，他們對您產生了第一印象。

您的網站還傳達了您的品牌在行業中的身份、願景和地位。 如果您有類似產品的緊密競爭對手，那麼一個讓人們說“哇”的網站會讓您更加難忘，並提高您在競爭對手中的品牌知名度。

此外，強大的網站可以改善您的搜索引擎優化 (SEO) 工作。

搜索引擎在搜索結果中對網站進行排名時會考慮人們對網站的反應。 如果您的跳出率很低並且人們經常訪問您網站上的多個頁面，搜索引擎可能會將您的排名高於跳出率高的競爭對手。

技術搜索引擎優化在這裡也很重要。 具有精心設計的標題、頁面結構和鏈接的網站更易於訪問。 因此，搜索引擎和客戶都喜歡他們。 讓我們來看看一些重要的網頁設計原則。

有效網頁設計的 15 條原則

當我們提到“網頁設計原則”時，我們指的是設計網站或網頁的紋理和視覺元素的一般規則。 每個品牌都採用不同的網頁設計原則——有些符合最佳實踐，有些則不符合。

為了幫助您製作一個出色的網站，這裡有 15 條網頁設計原則（以及有效使用它們的網站示例）：

1.頁面應該易於導航

在 Clutch 對網站用戶體驗的研究中，94% 的參與者將網站導航視為“最重要的網站功能”。

這並不奇怪為什麼。 如果搜索引擎用戶來到您的網站尋找有關“移動設計”的信息但找不到，下一步自然是單擊“返回”並嘗試另一個網站。

您如何接受精心策劃的導航？ 從 The Cool Club 的網站中汲取靈感。

當你進入酷俱樂部的主頁時，網站的佈局非常清晰。 您可以使用左側的按鈕導航到關鍵產品部分（例如“紙牌遊戲”和“遺願清單”），並且可以使用右側的按鈕導航到“關於”和“聯繫方式”頁面。

Cool Club 的產品頁面也非常易於瀏覽。 該品牌目前擁有一個交互式卡片組，其中包含 54 個很酷的變體和相應的頁面。 您只需向下滾動並單擊要查看更多信息的卡片。

要創建一個同樣有效的網站，請將內容分類為頁眉和頁腳的清晰類別，並為它們提供描述性標題。 然後，按主題對頁面進行排序，以便人們可以輕鬆地在相似主題之間導航。

此外，使您的頁眉和頁腳在整個網站上保持一致。

2.始終利用負空間

負空間（或“空白”）是頁面主題周圍的區域，無論它們是圖像、視頻、文本還是按鈕。

許多熱情的營銷人員爭先恐後地填滿頁面上的每個可用空間，希望為訪問者提供更多信息將使他們更加投入。 但是，這通常會導致頁面不堪重負和混亂。

這就是負空間的用武之地。使用負空間強調每個頁面中最關鍵的元素，因為缺乏顏色會將訪問者的眼睛吸引到更亮的區域。

當然，“使用負空間”並不意味著“創建一個無聊的白色網站”。 相反，您可以使用您的品牌顏色來利用空間，就像 Garoa 所做的那樣。

Garoa 的主頁使用奶油色的調色板來營造氛圍，同時仍然利用負空間。 結果是你的目光轉向了中心“秋季護膚”部分的介紹性內容，而不是不太重要的部分。

確保利用空白在您自己的網站中展示層次結構。

3.頁面應該是一致的，但要吸引人

當您閱讀“Cadbury”、“Hershey's”或“Nike”等品牌名稱時，可能會立即想到他們的徽標、字體和設計風格。 這就是一致品牌的力量。

在設計您的網站時，使用一致的元素製作頁面，為您的品牌提供清晰的視覺識別。 這意味著：

• 跨頁眉使用相同的字體、樣式和顏色
• 在頁面之間保持視覺元素之間的空間相同
• 使用調色板而不是隨機顏色
• 為新聞和博客文章等長篇內容設置佈局指南
• 為所有頁面使用網站模板

一致的頁面不需要看起來完全一致。 相反，您可以通過混合元素來平衡一致性和參與度。

例如，您可以為 H1、H2 和 H3 標題使用不同的字體和顏色。 或者，您可以更改不同類型頁面的佈局，以混合使用。

4.擁抱互補色

互補色是成對的顏色，您可以混合這些顏色，而不會讓您的設計看起來不堪重負和難看。

屏幕上的顏色顯示方式遵循紅色、綠色和藍色 (RGB) 顏色模型，而不是打印中使用的青色、品紅色、黃色和黑色 (CMYK) 模型。 畫家還經常使用紅-黃-藍 (RYB) 顏色模型，該模型將互補色視為紅-綠、藍-橙和黃-紫。

無論您喜歡哪種型號，使用互補色都可以達到與黑白相似的目的。 互補色強調並為您的品牌創造清晰的視覺識別。

您可以在 Swab The World 的網站上看到這一點。

在下面的屏幕截圖中，血癌慈善機構使用了綠色和洋紅色陰影。 當您訪問不同的網站部分時，這些顏色會變為其他互補色組合（儘管所有顏色的飽和度都相似，因此品牌保持一致）。

互補色是在您的設計中使用的一個簡單原則。 如果您想保持簡單，請選擇兩種互補色並將它們添加到對比元素（如 H2 和正文）。 或者在每頁上使用每種顏色的多種色調。

5. 設計時要考慮到您的目標受眾

如果您查看 The Cool Kids、Garoa 和 Swab The World 的網站，您可能會注意到每個網站都有獨特的“感覺”。 這種感覺來自為觀眾量身定製網站的設計。

個性化是這裡的最終目標。 我們大多數人都喜歡從我們認為與之一致和代表的品牌購買產品和服務。 事實上，研究表明，72% 的消費者重視從“符合他們的信念和價值觀”的公司購買。 因此，如果有人訪問您的網站並看到他們的價值觀、目標和優先事項反映在那裡，他們更有可能向您購買。

要為您的受眾個性化您的網站設計，請考慮：

• 哪些圖像與您的目標市場產生共鳴，特別是
• 哪種語氣適合您的聽眾（例如，專業、簡約、活潑等）
• 您的目標市場會訪問您的網站以查看哪些主題
• 如何通過網頁設計傳達品牌定位
• 您的受眾響應什麼號召性用語 (CTA)（以及您應該將它們放在哪里以優化您的點擊率 (CTR)）

如果您可以使用網站自動化來根據用戶的個人資料和之前與您的品牌的互動來提供個人體驗，則可以獲得獎勵積分。

從向目標人群出售不同商品的競爭對手或品牌中汲取靈感可能會有所幫助。

6.字體應該是可讀和可訪問的

您在網站上使用的字體決定了您的訪問者是否可以閱讀您所寫的內容。 可以肯定地說，它們非常重要。

選擇字體時首先要考慮的是網絡安全。 操作系統和網絡瀏覽器支持網絡安全字體，因此它們可以在大多數設備上使用。

您還需要考慮可訪問性。 可訪問的字體應清晰易讀，無論大小尺寸。 例如，基於草書的字體不太容易使用，而 Times New Roman 則相當容易使用。

此外，在選擇字體時，請注意其他網站上的字體趨勢。 2021 年，數據科學家 Michael Li 分析了 1000 多個網站上的字體。 他發現了以下趨勢：

• 85% 的字體不使用襯線（報紙字體中添加的小線條）
• 排名前五的字體包括 Sans Serif、Arial、Helvetica、Helvetica Neue 和 Roboto
• H1 標題有 58% 的概率沒有襯線（段落文本的概率為 93%）
• 段落字體最常見的兩種尺寸是 14 像素和 16 像素

您可能會選擇接受此信息來選擇符合人們在網站中尋找的字體樣式。 或者，您可能會選擇做一些不同的事情。

Virgin是選擇第二種選擇的品牌。 Virgin 在下面的屏幕截圖中至少使用了五種字體。 這些字體將頁面的各個部分分開，使它們看起來很吸引人。

7. 遵循菲特定律和希克定律

心理學家 Paul Fitts 於 1954 年首次開發了菲特定律，但它在 2022 年仍然與網頁設計高度相關。菲特定律認為，目標的大小會影響某人到達目標所需的時間。

在網頁設計或用戶體驗 (UX) 環境中，這意味著人們單擊較大按鈕所需的時間更少，而單擊較小按鈕所需的時間則更多。 因此，為了利用菲特定律，您應該使您的 CTA 按鈕非常大且突出，以便它們更容易點擊。

“簡單”在這里至關重要。 由英國心理學家威廉·埃德蒙·希克 (William Edmund Hick) 和美國心理學家雷·海曼 (Ray Hyman) 開發的希克定律指出，人們每次做出決定時都會感到疲勞。

因此，您要求網站訪問者做出的決定越多，他們變得過於疲勞而無法堅持下去的機會就越大。

8. 使用不變性突出關鍵信息

當某些東西是“不變的”時，它會從幾個非常相似的選項中脫穎而出，成為一個獨特的選項。 不變性最明顯的例子是在定價頁面上的計劃中突出顯示，比如來自 Box 的這個。

但這不是您可以使用不變性的唯一方法。 不變性可以幫助您在頁面上建立視覺層次結構，以突出關鍵信息並將人們吸引到頁面的重要部分。

例如，看看 Frans Hals 博物館如何使用不變性在其主頁上創建視覺層次結構：

該圖像中的層次結構如下：“歡迎”標誌、圖像、“買票”標誌、“所有展覽”標誌，然後是其他內容。

要使用不變性來創建自己的層次結構，請按重要性順序排列頁面元素。 然後，調整每個元素的大小、顏色和位置，直到訪問者的眼睛按照您想要的順序轉到每個元素。

9. 在 CTA 中：使用人們想要點擊的清晰語言

我們談到了使按鈕大且易於點擊的重要性，但在創建按鈕時，大小並不是您應該考慮的唯一因素。

可點擊的按鈕同時具有描述性和說服力。 他們讓訪問者對按鈕鏈接的內容感到好奇，並給他們一個去那裡的理由。

一種方法是使用詳細的按鈕文本，例如“單擊此處閱讀我們的博客”、“在此處查找我們的營銷秘密”或“這是我們的 2022 年報告”。 另一個是讓您的按鈕在視覺上令人興奮或獨特。

Rainforest Protector 採用了這兩種方法。 Rainforest Protector 允許您通過訪問不同的位置來導航亞馬遜熱帶雨林。 每個位置的按鈕都包含一個圖像和一個動作，例如“參觀村莊”。

10. 利用 F 模式或 Z 模式

13 年來，來自 Nielsen Norman Group (NN Group) 的研究人員使用眼動追踪來了解 500 多人如何與內容互動。 這導致他們開發了 F 模式，即人們做的第一件事是向下掃描頁面，然後他們從左到右逐行閱讀。 像這樣：

您可以通過圍繞它或替代模型構建您的內容來利用您網站上的 F 模式。

Facebook 以在其主頁上使用 Z 形圖案而聞名。 當您訪問該頁面時，您的眼睛會轉到“Facebook”徽標，然後是“登錄”按鈕，然後是左側的圖像，最後是“創建帳戶”按鈕。

11. 好的網站是快速且適合移動設備的

截至 2021 年第四季度，全球 54.4% 的網站流量來自移動設備。 因此，如果您的網站不適合移動設備，您可以將流量減半。

速度也會影響自然網站流量。 谷歌的研究表明，如果網站加載時間超過 3 秒，53% 的人會離開網站。

使您的網站適合移動設備或快速的最簡單方法是選擇由專家設計師製作的快速網站主題。 或者，如果您想更多地參與您的網站設計，您可以自定義構建一個響應式網站。

這就是1917 年電影背後的設計師所做的。 1917的網站提供身臨其境的體驗，以吸引人們對電影的投入。 它專為移動設備設計，您可以用手指在第一次世界大戰的戰壕中四處走動。

如果您細心，您會注意到 1917 的網站也利用了 F 模式。

12. 將文本分成小塊

考慮一下：您搜索“智力遊戲”並找到一個看起來很有希望的網頁。 但是，當您單擊它時，您會被難以閱讀的大塊文本所淹沒。

像許多人一樣，您可能會點擊關閉網站（無論內容多麼有希望！）。

密蘇里科技大學的眼動追踪研究表明，網站訪問者平均花費 5.59 秒閱讀文本。 因此，如果人們不能在那個時間跨度內閱讀您的文本，那麼您就不太可能正確地與他們互動。

通過將文本分成小塊來解決此問題。 此外：

• 使用短句
• 遠離俗語
• 為您使用的任何行業特定詞提供定義
• 避免“紫色散文”（不必要的隱喻、副詞和形容詞）

13. 使用網格

當我們說“使用網格”時，我們並不是說您應該讓您的網站看起來像一個 Excel 表格。 取而代之的是，將您的網站劃分為服務於特定目的的不同部分，以便訪問者可以快速找到內容。

您不需要使用網格線來執行此操作。 相反，可以像 Atlason 那樣使用顏色、負空間和陰影來區分網格空間。 Atlason 的主頁以網格形式展示了新的和最暢銷的產品。 由於訪問者可能正在尋找這些產品，因此網格可以幫助他們在幾秒鐘內找到它們。

在您的網站上使用網格的最簡單方法之一是選擇使用它們的 WordPress 主題。 示例包括 Gridframe、Masonry Grid 和 Shuttle Grid。

14.記住平衡

在網頁設計的語境中，“平衡”是指設計元素相互關聯的方式以及元素是否描繪了和諧。 有很多方法可以在您的網站上創造平衡，包括以下一些網頁設計原則：

• 通過對稱（包括雙邊、徑向或平移對稱）
• 使用互補色或對比色
• 使用形狀和大小相似的元素
• 使用重複模式

你可以在 Woven 的網站上看到平衡的作用。 該網站使用平衡的調色板，黑色和白色在文本中形成對比，並使用對稱來吸引訪問者對內容的注意力。

15.注意細節

格式塔理論認為，人們在查看單個元素之前先將事物視為一個整體。 或者，就像 Kurt Koffka 所說：“整體獨立於部分而存在。” 儘管人們通常會參考有關心理學的格式塔理論，但它也適用於網頁設計。

您需要注意網站上的小細節，以確保您的設計看起來完美而完整。 在設計某些東西時，很容易將注意力集中在標題、圖像和 CTA 等重要元素上，而忘記其他內容，例如：

• 頁腳和頁眉圖標
• 社交媒體按鈕
• 您將網站轉換為 WordPress 的效率如何（如果適用）
• 文字間距
• 錯別字和語法錯誤
• 瀏覽器兼容性
• 圖像尺寸

在點擊“發布”之前仔細檢查這些元素，並確保您的網站傳達專業精神。 您可能會忽略小缺陷，但訪客不會。

此外，及時了解網頁設計原則的新趨勢和概念。 將這些添加到您的網站將使其看起來新鮮、新鮮和引人入勝。

概括

精心設計的零售店可以提升客戶體驗，而糟糕的零售店可能會永遠讓客戶遠離您的品牌。 網頁設計也是如此。

建立一個視覺上吸引人的網站不僅僅是一個有趣的項目。 它可以幫助您：

• 傳達專業精神
• 與訪客建立信任
• 從競爭對手中脫穎而出
• 從搜索引擎中吸引自然流量

利用本文中的網頁設計原則來構建一個讓訪問者說“哇”的網站。

既然我們已經涵蓋了我們所知道的關於網頁設計的所有內容，我們很樂意聽取您的意見。 當您訪問一個品牌的網站時，您會注意到什麼？ 此外，您是否使用了我們在您的網站上未提及的任何原則？ 請在下面的評論中告訴我們。