想象一下走進一傢零售店尋找一些新的工作服。當您環顧四周時,您註意到地板上有污漬、雜亂無章的架子和奇怪的氣味。您會留在商店並從零售商處購買嗎?商店設計會影響顧客的行為方式——網站也是如此。為什麼好的網頁設計很重要?當新的潛在客戶訪問您的網站時,它會給他們留下第一印象,從而影響他們未來與您的品牌的互動。正是在這一點上,他們形成瞭對你的第一印象。您的網站還傳達瞭您品牌的身份、願景和在行業中的地位。如果您有類似產品的密切競爭對手,一個讓人驚嘆的網站會讓您更加難忘,並在競爭中提升您的品牌知名度。有效網頁設計的 15 條原則當我們提到“網頁設計原則”時,我們指的是設計網站或網頁的結構和視覺元素的一般規則。每個品牌都采用不同的網頁設計原則——有些符合最佳實踐 ,有些則不符合。為瞭幫助您打造出色的網站,這裡有 15 條網頁設計原則(以及有效使用這些原則的網站示例):1. 網頁應該易於瀏覽很多用戶將網站導航視為“最重要的網站功能”。 這並不奇怪,因為如果搜索引擎用戶來到您的網站尋找有關“移動設計”的信息但找不到,下一步自然是單擊“返回”並嘗試另一個網站。您如何接受精心策劃的導航?從 The Cool Club 的網站中汲取靈感。進入Cool Club的首頁,網站的佈局一目瞭然。您可以使用左側的按鈕導航到關鍵產品部分(如“紙牌遊戲”和“遺願清單”),也可以使用右側的按鈕導航到“關於”和“聯系”頁面。2. 善於利用“負空間”負空間(或“空白”)是頁面主題周圍的區域,無論它們是圖像、視頻、文本還是按鈕。許多熱心的營銷人員爭先恐後地填補頁面上的每個空閑空間,希望為訪問者提供更多信息可以讓他們更加投入。然而,這通常會導致頁面過於龐大和混亂。這就是負空間的用武之地。使用負空間強調每個頁面最關鍵的元素,因為缺乏顏色會將訪問者的眼睛吸引到更明亮的區域。當然,“使用負空間”並不意味著“創建一個無聊的白色網站”。相反,您可以像 Garoa 一樣使用您的品牌顏色來利用空間。Garoa 的主頁使用類似奶油色的調色板來營造氛圍,同時仍然利用負空間。結果是你的眼睛會轉到中間“秋季護膚”部分的介紹內容,而不是不太重要的部分。確保利用空白來展示您自己網站中的層次結構。3. 頁面應該一致,但引人入勝當您讀到“Cadbury”、“Hershey's”或“Nike”等品牌名稱時,您可能會立即想到它們的徽標、字體和設計風格。這就是一致品牌的力量。在設計您的網站時,使用一致的元素制作頁面,為您的品牌提供清晰的視覺識別。這意味著:在標題中使用相同的字體、樣式和顏色保持頁面之間視覺元素之間的空間相同使用調色板而不是隨機顏色為新聞文章和博客文章等長篇內容設置佈局指南對所有頁面使用網站模板一致的頁面不需要看起來完全統一。相反,您可以通過混合元素來平衡一致性和參與度。例如,您可以為 H1、H2 和 H3 標題使用不同的字體和顏色。或者,您可以更改不同類型頁面的佈局,以混合使用。4. 擁抱互補色互補色是一對顏色,您可以混合使用它們而不會使您的設計看起來過於難看和醜陋。顏色在屏幕上的顯示方式遵循紅色、綠色和藍色 (RGB) 顏色模型,而不是印刷中使用的青色、品紅色、黃色和黑色 (CMYK) 模型。畫傢還經常使用紅-黃-藍 (RYB) 顏色模型,該模型將互補色視為紅-綠、藍-橙和黃-紫。無論您喜歡哪種模式,使用互補色都可以達到與黑色和白色類似的目的。互補色強調並為您的品牌創造清晰的視覺識別。你可以在 Swab The World 的網站上看到這個。在下面的截圖中,血癌慈善機構使用瞭綠色和洋紅色調。當您訪問不同的網站部分時,這些顏色會變為其他互補色組合(盡管所有顏色都具有相似的飽和度,因此品牌保持一致)。互補色是在您的設計中使用的一個簡單原則。如果你想保持簡單,選擇兩種互補色並將它們添加到對比元素(如 H2 和正文)。或者在每頁上使用每種顏色的多種色調。5. 設計時考慮到你的目標受眾個性化是網頁設計的最終目標。我們大多數人都喜歡從我們認為符合並代表的品牌購買產品和服務。事實上,研究表明,72%的消費者重視從“符合他們的信仰和價值觀”的公司購買商品。因此,如果有人訪問您的網站並看到他們的價值觀、目標和優先事項反映在那裡,他們就更有可能向您購買。要為您的受眾個性化您的網站設計,請考慮:哪些圖像與您的目標市場產生共鳴,哪種語氣適合您的聽眾(例如,專業、簡約、活潑等)您的目標市場訪問您的網站要查看哪些主題如何通過網頁設計傳達品牌定位您的受眾會響應哪些號召性用語 (CTA)如果您可以使用網站自動化根據用戶的個人資料和之前與您的品牌的互動來提供個人體驗,則可獲得加分。從向目標人群銷售不同產品的競爭對手或品牌那裡汲取靈感可能會有所幫助。6. 字體應該是可讀和可訪問的您在網站上使用的字體 決定瞭訪問者是否可以閱讀您寫的內容。可以肯定地說,它們非常重要。選擇字體時首先要考慮的是網絡安全。 操作系統和網絡瀏覽器支持網絡安全字體,因此它們適用於大多數設備。7. 遵循費特定律和希克定律在網頁設計或用戶體驗(UX)方面,人們點擊較大的按鈕會花費較少的時間,而點擊較小的按鈕則會花費更多的時間。因此,為瞭利用菲特定律,你應該讓你的CTA按鈕變得非常大和突出,以便它們更容易被點擊。這裡的 "簡單 "是關鍵。由英國心理學傢威廉-埃德蒙-希克和美國心理學傢雷-海曼提出的希克定律說,人們每次決定一件事時都會感到疲勞。因此,你要求網站訪問者做出的決定越多,他們就越有可能因疲勞而無法繼續下去。8. 使用不變性來突出關鍵信息當某些東西“不變”時,它會從幾個非常相似的選項中脫穎而出。不變性最明顯的例子是在定價頁面的計劃中突出顯示,例如來自 Box 的這個。9. 在 CTA 中:使用人們想要點擊的清晰語言我們談到瞭使按鈕變大且易於點擊的重要性,但在創建按鈕時,大小並不是您應該考慮的唯一因素。可點擊的按鈕同時具有描述性和說服力。他們讓訪問者對按鈕鏈接的內容感到好奇,並給他們一個去那裡的理由。一種方法是使用詳細的按鈕文本,例如“單擊此處閱讀我們的博客”、“在此處查找我們的營銷秘訣”或“這是我們的 2022 年報告”。另一個是讓你的按鈕在視覺上令人興奮或獨特。10. 利用F模式或Z模式13 年來,Nielsen Norman Group (NN Group)的研究人員 使用眼動追蹤來瞭解 500 多人如何與內容互動。這導致他們開發瞭 F 模式,即人們做的第一件事是向下瀏覽頁面,然後他們從左到右閱讀。像這樣:您可以通過圍繞 F 模式或替代模型構建內容來在您的網站上利用 F 模式。Facebook 以在其主頁上使用 Z 形圖案而聞名。當您訪問該頁面時,您的眼睛會先看到“Facebook”徽標,然後是“登錄”按鈕,然後是左側的圖片,最後是“創建帳戶”按鈕。11. 好的網站速度快且適合移動設備截至 2021 年第四季度,全球54.4% 的網站流量來自移動設備。因此,如果您的網站不適合移動設備,您可以將流量減半。速度也會影響有機網站流量。谷歌的研究表明, 如果網站加載時間超過三秒, 53%的人會離開該網站。使您的網站移動友好或快速的最簡單方法是選擇 由專傢設計師制作的快速網站主題。或者,如果您想更多地參與網站的設計,您可以定制一個響應式網站。12. 少用長文本考慮一下:您搜索“智力遊戲”並找到一個看起來很有希望的網頁。但是,當您單擊它時,您會被難以閱讀的大塊文本所淹沒。像許多人一樣,您可能會點擊關閉該網站(無論內容多麼有前途!)。密蘇裡科技大學的眼球追蹤研究表明,網站訪問者平均花費5.59 秒 閱讀文本。因此,如果人們無法在那個時間跨度內閱讀您的文字,您就不太可能正確地吸引他們。通過將文本分成小塊來解決此問題。此外:使用短句遠離俗語為您使用的任何行業特定詞提供定義避免“紫色散文”(不必要的隱喻、副詞和形容詞)13. 使用網格當我們說“使用網格”時,並不是說您應該讓您的網站看起來像 Excel 表格。相反,將您的網站劃分為不同的部分以服務於特定目的,以便訪問者可以快速找到內容。您不需要使用網格線來執行此操作。相反,像 Atlason 所做的那樣,用顏色、負空間和陰影來區分網格空間。Atlason 的主頁在網格中展示瞭新的和最暢銷的產品。由於訪問者可能正在尋找這些產品,因此網格可以幫助他們在幾秒鐘內找到它們。14. 記住平衡在網頁設計的背景下,“平衡”指的是設計元素之間的關系以及元素是否和諧。有很多方法可以在您的網站上創造平衡,包括以下一些網頁設計原則:對稱(包括雙邊、徑向或平移對稱)使用互補色或對比色使用相似形狀和大小的元素使用重復模式您可以在 Woven 的網站上看到實際的平衡。本網站使用平衡的調色板,黑色和白色在文本中形成對比,並使用對稱來吸引訪問者對內容的註意。15. 註意細節格式塔理論認為,人們在查看單個元素之前會將事物視為一個整體。或者,就像 Kurt Koffka 所說:“整體獨立於部分而存在。” 盡管人們通常在心理學方面參考格式塔理論,但它也適用於網頁設計。您需要註意網站上的小細節,以確保您的設計看起來完美且完整。在設計內容時,很容易將註意力集中在標題、圖像和 CTA 等重要元素上,而忘記其他內容,例如:頁腳和頁眉圖標社交媒體按鈕文字間距拼寫錯誤和語法錯誤瀏覽器兼容性圖片尺寸在點擊“發佈”之前仔細檢查這些元素,確保您的網站傳達出專業性。您可能會忽略小瑕疵,但訪問者不會。此外,瞭解網頁設計原則中的新趨勢和概念。將這些添加到您的網站將使它看起來新穎、新鮮和引人入勝。總結:建立一個具有視覺吸引力的網站,不僅僅是一個有趣的項目。它可以幫助你:傳達企業精神與你的訪問者建立信任從你的競爭對手中脫穎而出吸引來自搜索引擎的有機流量利用這篇文章中的網頁設計原則,希望您可以建立一個讓訪問者說 "哇 "的網站~文章寫完瞭,我們很想聽聽各位讀者的意見。當你訪問一個品牌的網站時,你會註意到什麼?此外,你是否在你的網站上使用我們沒有提到的任何原則?歡迎在下面的評論中告訴我們。更多優質內容持續更新中,極簡慕楓-Global,幫助更多創新型企業實現品牌全球化!