想象一下走進一家零售店尋找一些新的工作服。當你環顧四周時，你會注意到地板上的汙漬、雜亂無章的架子和一種奇怪的氣味。你會留在商店並從零售商那裡購買嗎？
商店設計會影響客戶的行為方式——網站也是如此。
Clutch對612個人進行的一項調查發現，83%的參與者會注意到網站的設計是否美觀且是最新的。或者，如果50%的參與者認為內容無關緊要或不能滿足他們的需求，他們會永遠離開網站。
那麼，你如何設計一個客戶會喜歡的網站呢？
這就是這篇文章的全部內容。我們將向您展示為什麼優秀的網頁設計是必不可少的，並分享您可以用來構建高質量網站的15條網頁設計原則。
為什麼好的網頁設計很重要？
網頁設計師的平均年收入為57,000美元，比平均每年44,000美元的初級網頁開發人員高出約8,000美元。設計師得到合理的報酬是有充分理由的：他們的工作至關重要。
當新的潛在客戶訪問您的網站時，它會留下第一印象，從而塑造他們未來與您的品牌的互動。正是在這一點上，他們對您產生了第一印象。
您的網站還傳達了您的品牌在行業中的身份、願景和地位。如果您有類似產品的緊密競爭對手，那麼一個讓人們說“哇”的網站將使您更加難忘，並提高您在競爭對手中的品牌知名度。
此外，強大的網站可以改善您的搜尋引擎優化 (SEO)工作。
搜尋引擎在搜尋結果中對網站進行排名時會考慮人們對網站的反應。如果您的跳出率很低並且人們經常訪問您網站上的多個頁面，搜尋引擎可能會將您的排名高於跳出率高的競爭對手。
技術搜尋引擎優化在這裡也很重要。具有精心設計的標題、頁面結構和連結的網站更易於訪問。因此，搜尋引擎和客戶都喜歡他們。讓我們來看看一些重要的網頁設計原則。
有效網頁設計的15條原則
當我們提到“網頁設計原則”時，我們指的是設計網站或網頁的紋理和視覺元素的一般規則。每個品牌都採用不同的網頁設計原則——有些符合最佳實踐 ，有些則不符合。
為了幫助您製作一個出色的網站，這裡有15條網頁設計原則（以及有效使用它們的網站示例）：
1.頁面應該易於導航
在Clutch對網站使用者體驗的研究中，94% 的參與者將網站導航視為“最重要的網站功能”。
這並不奇怪為什麼。如果搜尋引擎使用者來到您的網站尋找有關“移動設計”的資訊但找不到，下一步自然是單擊“返回”並嘗試另一個網站。
您如何接受精心策劃的導航？從The Cool Club的網站中汲取靈感。
當你進入酷俱樂部的主頁時，網站的佈局非常清晰。您可以使用左側的按鈕導航到關鍵產品部分（例如“紙牌遊戲”和“遺願清單”），並且可以使用右側的按鈕導航到“關於”和“聯絡方式”頁面。
The Cool Club
Cool Club的產品頁面也非常易於瀏覽。該品牌目前擁有一個互動式卡片組，其中包含 54 個很酷的變體和相應的頁面。您只需向下滾動並單擊要檢視更多資訊的卡片。
Cool Club的網站是互動式的
要建立一個同樣有效的網站，請將內容分類為頁首和頁尾的清晰類別，併為它們提供描述性標題。然後，按主題對頁面進行排序，以便人們可以輕鬆地在相似主題之間導航。
此外，使您的頁首和頁尾在整個網站上保持一致。
2.始終利用負空間
負空間（或“空白”）是頁面主題周圍的區域，無論它們是影象、視訊、文字還是按鈕。
許多熱情的營銷人員爭先恐後地填滿頁面上的每個可用空間，希望為訪問者提供更多資訊將使他們更加投入。但是，這通常會導致頁面不堪重負和混亂。
這就是負空間的用武之地。使用負空間強調每個頁面中最關鍵的元素，因為缺乏顏色會將訪問者的眼睛吸引到更亮的區域。
當然，“使用負空間”並不意味著“建立一個無聊的白色網站”。相反，您可以使用您的品牌顏色來利用空間，就像Garoa所做的那樣。
Garoa使用負空間營造氛圍
Garoa 的主頁使用奶油色的調色盤來營造氛圍，同時仍然利用負空間。結果是你的目光轉向了中心“秋季護膚”部分的介紹性內容，而不是不太重要的部分。
確保利用空白來展示您自己網站中的層次結構。
3.頁面應該是一致的，但要吸引人
當您閱讀“Cadbury”、“Hershey’s”或“Nike”等品牌名稱時，可能會立即想到他們的徽標、字型和設計風格。這就是一致品牌的力量。
在設計您的網站時，使用一致的元素製作頁面，為您的品牌提供清晰的視覺識別。這意味著：
- 跨頁首使用相同的字型、樣式和顏色
- 在頁面之間保持視覺元素之間的空間相同
- 使用調色盤而不是隨機顏色
- 為新聞和部落格文章等長篇內容設定佈局指南
- 為所有頁面使用網站模板
一致的頁面不需要看起來完全一致。相反，您可以通過混合元素來平衡一致性和參與度。
例如，您可以為H1、H2和H3標題使用不同的字型和顏色。或者，您可以更改不同型別頁面的佈局，以混合使用。
4.擁抱互補色
互補色是成對的顏色，您可以混合這些顏色，而不會讓您的設計看起來不堪重負和難看。
螢幕上的顏色顯示方式遵循紅色、綠色和藍色 (RGB) 顏色模型，而不是列印中使用的青色、品紅色、黃色和黑色 (CMYK) 模型。畫家還經常使用紅-黃-藍 (RYB) 顏色模型，該模型將互補色視為紅-綠、藍-橙和黃-紫。
無論您喜歡哪種型號，使用互補色都可以達到與黑白相似的目的。互補色強調併為您的品牌創造清晰的視覺識別。
您可以在Swab The World的網站上看到這一點。
在下面的螢幕截圖中，血癌慈善機構使用了綠色和洋紅色陰影。當您訪問不同的網站部分時，這些顏色會變為其他互補色組合（儘管所有顏色的飽和度都相似，因此品牌保持一致）。
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在下面的螢幕截圖中至少使用了五種字型。這些字型將頁面的各個部分分開，使它們看起來很吸引人。
Virgin使用清晰、易讀且引人入勝的字型
7. 遵循菲特定律和希克定律
心理學家Paul Fitts於1954年首次開發了菲特定律，但它在2022年仍然與網頁設計高度相關。菲特定律認為，目標的大小會影響某人到達目標所需的時間。
在網頁設計或使用者體驗 (UX) 環境中，這意味著人們單擊較大按鈕所需的時間更少，而單擊較小按鈕所需的時間則更多。因此，為了利用菲特定律，您應該使您的CTA按鈕非常大且突出，以便它們更容易點選。
“簡單”在這裡至關重要。由英國心理學家威廉·埃德蒙·希克 (William Edmund Hick) 和美國心理學家雷·海曼 (Ray Hyman) 開發的希克定律指出，人們每次做出決定時都會感到疲勞。
因此，您要求網站訪問者做出的決定越多，他們變得過於疲勞而無法堅持下去的機會就越大。
8. 使用不變性突出關鍵資訊
當某些東西是“不變的”時，它會從幾個非常相似的選項中脫穎而出，成為一個獨特的選項。不變性最明顯的例子是在定價頁面上的計劃中突出顯示，比如來自Box的這個。
Box定價頁面上的不變性
但這不是您可以使用不變性的唯一方法。不變性可以幫助您在頁面上建立視覺層次結構，以突出關鍵資訊並將人們吸引到頁面的重要部分。
例如，看看Frans Hals博物館如何使用不變性在其主頁上建立視覺層次結構：
弗蘭斯哈爾斯博物館使用視覺層次
該影象中的層次結構如下：“歡迎”標誌、影象、“買票”標誌、“所有展覽”標誌，然後是其他內容。
要使用不變性來建立自己的層次結構，請按重要性順序排列頁面元素。然後，調整每個元素的大小、顏色和位置，直到訪問者的眼睛按照您想要的順序轉到每個元素。
9. 在CTA中：使用人們想要點選的清晰語言
我們談到了使按鈕大且易於點選的重要性，但在建立按鈕時，大小並不是您應該考慮的唯一因素。
可點選的按鈕同時具有描述性和說服力。他們讓訪問者對按鈕連結的內容感到好奇，並給他們一個去那裡的理由。
一種方法是使用詳細的按鈕文字，例如“單擊此處閱讀我們的部落格”、“在此處查詢我們的營銷祕密”或“這是我們的2022年報告”。另一個是讓您的按鈕在視覺上令人興奮或獨特。
Rainforest Protector採用了這兩種方法。Rainforest Protector允許您通過訪問不同的位置來導航亞馬遜熱帶雨林。每個位置的按鈕都包含一個影象和一個動作，例如“參觀村莊”。
10. 利用F模式或Z模式
13年來，來自Nielsen Norman Group (NN Group)的研究人員 使用眼動追蹤來了解500多人如何與內容互動。這導致他們開發了F模式，即人們做的第一件事是向下掃描頁面，然後他們從左到右逐行閱讀。像這樣：
人們在網站上遵循的F形模式
您可以通過圍繞它或替代模型構建您的內容來利用您網站上的F模式。
Facebook以在其主頁上使用Z形模式而聞名。當您訪問該頁面時，您的眼睛會轉到“Facebook”徽標，然後是“登入”按鈕，然後是左側的影象，最後是“建立帳戶”按鈕。
Facebook主頁Z模式
11. 好的網站是快速且適合移動裝置的
截至2021年第四季度，全球54.4% 的網站流量來自移動裝置。因此，如果您的網站不適合移動裝置，您可以將流量減半。
速度也會影響自然網站流量。谷歌的研究表明， 如果網站載入時間超過3秒， 53%的人會離開網站。
使您的網站適合移動裝置或快速的最簡單方法是選擇由專家設計師製作的快速網站主題。或者，如果您想更多地參與您的網站設計，您可以自定義構建一個響應式網站。
這就是1917年電影背後的設計師所做的。1917的網站提供身臨其境的體驗，以吸引人們對電影的投入。它專為移動裝置設計，您可以用手指在第一次世界大戰的戰壕中四處走動。
1917的網站專為移動裝置而設計
如果您細心，您會注意到1917的網站也利用了F模式。
12. 將文字分成小塊
考慮一下：您搜尋“智力遊戲”並找到一個看起來很有希望的網頁。但是，當您單擊它時，您會被難以閱讀的大塊文字所淹沒。
像許多人一樣，您可能會點選關閉網站（無論內容多麼有希望！）。
密蘇里科技大學的眼動追蹤研究表明，網站訪問者平均花費5.59秒閱讀文字。因此，如果人們不能在那個時間跨度內閱讀您的文字，那麼您就不太可能正確地與他們互動。
通過將文字分成小塊來解決此問題。此外：
- 使用短句
- 遠離俗語
- 為您使用的任何行業特定詞提供定義
- 避免“紫色散文”（不必要的隱喻、副詞和形容詞）
13. 使用網格
當我們說“使用網格”時，我們並不是說您應該讓您的網站看起來像一個Excel表格。取而代之的是，將您的網站劃分為服務於特定目的的不同部分，以便訪問者可以快速找到內容。
您不需要使用網格線來執行此操作。相反，可以像Atlason那樣使用顏色、負空間和陰影來區分網格空間。Atlason 的主頁以網格形式展示了新的和最暢銷的產品。由於訪問者可能正在尋找這些產品，因此網格可以幫助他們在幾秒鐘內找到它們。
Atlason為每個產品使用一個網格
在您的網站上使用網格的最簡單方法之一是選擇使用它們的WordPress主題。示例包括Gridframe、Masonry Grid和Shuttle Grid。
14.找到平衡點
在網頁設計的語境中，“平衡”是指設計元素相互關聯的方式以及元素是否描繪出和諧。有很多方法可以在您的網站上創造平衡，包括以下一些網頁設計原則：
- 通過對稱（包括雙邊、徑向或平移對稱）
- 使用互補色或對比色
- 使用形狀和大小相似的元素
- 使用重複模式
你可以在Woven的網站上看到平衡的作用。該網站使用平衡的調色盤，黑色和白色在文字中形成對比，並使用對稱來吸引訪問者對內容的注意力。
Woven的網站使用對稱來吸引你的視線
15.注意細節
格式塔理論認為，人們在檢視單個元素之前先將事物視為一個整體。或者，就像Kurt Koffka所說：“整體獨立於部分而存在。” 儘管人們通常會參考有關心理學的格式塔理論，但它也適用於網頁設計。
您需要注意網站上的小細節，以確保您的設計看起來完美而完整。在設計某些東西時，很容易將注意力集中在標題、影象和CTA等重要元素上，而忘記其他內容，例如：
- 頁尾和頁首圖示
- 社交媒體按鈕
- 您將網站轉換為WordPress的效率如何 （如果適用）
- 文字間距
- 錯別字和語法錯誤
- 瀏覽器相容性
- 影象尺寸
在點選“釋出”之前仔細檢查這些元素，並確保您的網站傳達專業精神。您可能會忽略小缺陷，但訪客不會。
此外，及時瞭解網頁設計原則的新趨勢和概念。將這些新增到您的網站將使其看起來新鮮、新鮮和引人入勝。
小結
精心設計的零售店可以提升客戶體驗，而糟糕的零售店可能會永遠讓客戶遠離您的品牌。網頁設計也是如此。
建立一個視覺上吸引人的網站不僅僅是一個有趣的專案。它可以幫助您：
- 傳達專業精神
- 與訪客建立信任
- 從競爭對手中脫穎而出
- 從搜尋引擎中吸引自然流量
利用本文中的網頁設計原則來構建一個讓訪問者說“哇”的網站。
評論留言