適用於下一個網站專案的網頁設計最佳實踐

一些開發人員專注於字面上的最終產品：產生足夠令人愉快的網站設計的程式碼組合。

但是，精通營銷的開發人員關心的不僅僅是構建看起來不錯的東西。他們充當希望通過其網站實現特定目標的客戶的顧問。

網頁設計與您的業務目標密切相關

考慮到這一點，僱用一個似乎對你的最終目標不感興趣/不問問題的人來建立一個網站是一個危險訊號。重要的是要指出一個事實，即使是最漂亮的網頁設計在讓訪問者轉化為客戶方面也可能並不理想。

也就是說，94%的人會根據您網站的設計來判斷您的可信度。

因此，相反，您需要專注於使用您的設計來提供理想的使用者體驗。您必須首先讓訪問者通過訪問您的網站輕鬆找到他們尋求的資訊，同時引導他們進行目標轉換活動。

這些網頁設計最佳實踐側重於建立漂亮的網站和為您的業務服務的網站之間的交集。

1. 什麼定義了網頁設計最佳實踐？
2. 品牌標準
3. 網頁最佳設計/格式化實踐
4. 編碼標準
5. 無障礙標準

什麼定義了網頁設計最佳實踐？

可以肯定的是，每個人對什麼是精心設計的網站都有自己的看法。

但是，讓我們通過聽從專家的意見來控制每個人的意見。

根據Orbit Media的說法，您可以將網頁設計最佳實踐分為以下三個基本標準類別：

• 品牌標準：您可能更熟悉將同一概念稱為“品牌”、“風格指南”或“情緒板”。這些標準包括與網站外觀有關的任何內容，以及涉及特定業務的顏色、排版和元素的使用。
• 編碼標準：網站應根據W3C商定的程式設計標準構建，W3C是共同開發Web標準的國際社羣。
• 無障礙標準：獲得資訊是一項基本人權，已得到聯合國《殘疾人權利公約》的承認。除此之外，使您的網站易於訪問會產生積極影響——不僅對銷售，對搜尋引擎優化也是如此。W3C分享了設計可訪問網站所需遵循的基本標準列表。我們將在本文後面詳細介紹更多相關的網頁設計最佳實踐。

讓我們看看如何根據這些標準開發網頁設計實踐：

品牌標準

缺乏一致品牌的網站可能會給互動帶來壓力並引起混亂。因此，大約 38% 的訪問者表示，如果內容或佈局不吸引人，他們將停止與網站互動也就不足為奇了。

請記住，外觀並不是一切，這裡有一些基本的設計原則可以考慮建立人們想要使用的網站：

平衡

平衡是規定如何有效分配視覺元素的設計原則。一般來說，平衡的設計看起來乾淨自然，並且具有良好的對稱性（儘管這不一定是平衡的條件）。

您可以在頁面佈局方面在網頁設計中加入平衡。

使頁面中的文字或其他元素居中是一種簡單的方法。一般來說，網頁是建立在一個網格系統上的，它創造了一種平衡形式。您可以使用CSS浮動屬性來定位元素並在頁面中平衡它們。

可以通過3種方式實現平衡：
1.對稱設計

對稱設計示例

在整個網頁中以均勻的方式排列元素。例如，如果左邊有一個重元素，那麼右邊應該有一個重元素。如前所述，居中是實現對稱的最簡單方法，但有時會讓人覺得平淡或乏味。

為避免使頁面看起來單調，您可以使用不同的元素建立平衡，例如平衡大影象和文字塊。還有一種稱為徑向平衡的對稱平衡，其中物體從中心點輻射。
2.不對稱設計

不對稱設計示例

做得好更具挑戰性，不對稱設計涉及頁面上元素的不均勻分佈。例如，您可能在中心有一個較大的元素，而遠處的一個較小的元素則平衡了該元素。

您可以使用其他設計元素（例如顏色或紋理）來平衡不對稱設計。
3. 失衡

非平衡設計示例

這些型別的設計暗示了動作和動作，這會使人們感到不舒服。如果您的網站打算讓人們思考，那麼不平衡的設計適合您。

組合

術語組合是指設計元素的放置和組織。

組合

三分法則通常用於建立平衡的構圖，尤其是照片。

間距

元素應均勻分佈，以便使用者可以區分部分或塊。

間距在網頁設計中的作用

您還應該引入負空間或影象主題之間和周圍的空間。負空間可以減少視覺噪音，增加可讀性，並帶來平衡。

您可以通過在設計元素周圍新增邊距和填充來引入負空間。

焦點

關注一個元素

建立一個您想要引起注意的焦點區域。它應該是頁面中最重要的部分，理想情況下，每個頁面都應該只關注一個主要焦點。

顏色

在品牌推廣方面，顏色是一個重要的設計元素。理想情況下，您在瞭解希望與品牌相關聯的網站配色方案的情況下進入網頁設計過程。

特別是對於網頁設計，它有助於從您的品牌的情緒板開始。

調色盤示例

選擇一種原色和次要顏色（次要顏色可以補充或對比原色），以及每種顏色的較淺和較深的色調。限制你對顏色的使用，以免各種口音成為眼中釘。

Adobe Color提供了一個出色的免費工具，用於測試各種顏色組合，從而為網站元素建立一個工作調色盤。

此外，在決定顏色時，重要的是要考慮色盲人群，其中包括高達4.5%的世界人口。

常規設計對色盲使用者的外觀示例

色盲分為三種型別（全色盲、雙色視覺和色覺缺陷），因此考慮到可能無法區分顏色的人，請確保您的設計仍然可用。
對比
在選擇顏色時，重要的是要注意顏色比例和對比度。

顏色對比度是指前景和背景之間的光線差異。使用足夠對比的顏色可以輕鬆區分網站的可見性。通常，使用高對比度的顏色選項（例如白色背景上的黑色文字）使您的網站具有可讀性。

對比度差可能會造成問題

對比度是分配給頁面元素之間的對比度差異的數值。

World Content Accessibility Guidelines (WCAG) 2.0建議普通文字的對比度為4.5:1。WebAIM 分享了一些適合理想對比度的預定組合，以幫助您視覺化此網頁設計最佳實踐。

為了幫助使用此比率進行導航，請確保在設計網站時，您設想的是所有受眾（包括那些有可訪問性問題的受眾）。與事後計劃解決這些問題相比，這樣做更容易。

考慮人們將與之互動的網站的所有方面，包括頁首、頁尾、選單——所有這些都需要易於看到才能使用。

可用於檢查顏色對比度的一些工具包括：

• Level Access的顏色對比度檢查器。
• Contrast Ratio。
• WCAG 2.0 AA & AAA顏色對比度檢查工具，它基於WCAG 2.0指南。

排版

網站排版是另一個重要的品牌考慮因素。

雖然有許多不同的來源可以找到在您的網站上使用的潛在字型，但您需要首先考慮將始終顯示的選項，而不管終端使用者在其計算機上安裝了哪些字型。

Google Fonts提供各種免費的網路安全字型，無論使用者安裝的字型/程式如何，您都可以依靠這些字型正確顯示。確保在情緒板上包含字型，以檢視它們是否符合您的色彩審美。

如果您在想出組合時遇到問題，Google字型可以推薦流行的配對。您還可以使用FontPair之類的網站來獲取建議。

嘗試限制您使用的字型粗細，因為載入太多檔案會導致頁面速度變慢。關於這一點，請考慮在本地託管Google字型以引入額外的效能優勢。

糟糕的排版與理想的排版

在根據網頁設計最佳實踐選擇印刷元素時，作為一般經驗法則，標題使用無襯線字型，內容使用襯線字型。至少，不要對正文內容使用裝飾性字型，因為它會難以閱讀。

此外，不要試圖在您的網站上使用各種不同的字型。一個好的經驗法則是為您的徽標使用一種字型，為您的選單/標題使用另一種字型，併為正文內容使用另一種字型。在這一點上，請嘗試將相互補充的字型配對，例如來自同一字型系列的字型。

元素層次結構

層次結構是指展示相對重要性的設計元素的排列。這是通過操縱視覺對比度、大小和位置等元素來引起注意的。

元素層次結構示例

例如，必須將內容分解為邏輯塊，以便使用者可以將各個部分割槽分開來。

您可以通過使用內容標題來做到這一點，這不僅使使用者可以輕鬆跳到他們想要閱讀的部分，而且還可以將大量文字分成可讀的塊，以便螢幕閱讀器能夠確定上下文每個部分的。

如果您正在尋找這些設計概念的一些有用的視覺插圖等等，Tilda Publishing部落格涵蓋了一些最常見的網頁設計錯誤以及如何修復它們。

網頁最佳設計/格式化實踐

根據Orbit Media的研究，在排名前50的營銷網站中觀察到了一些常見的網頁設計標準。

網頁設計標準

按照“標準”，它們意味著80%的網站使用類似的設計方法：

• 左上角的標誌。
• 每個頁面頂部的主要水平導航。
• 位於“首屏”的主頁上的價值主張很高。請注意，大多數網頁設計師會告訴您，瀏覽器沒有標準的畫素高度，技術上也沒有“摺疊”。但是，一般來說，重要的設計元素應該出現在大多數訪問者通常可見的頁面上，即使沒有滾動。

以下是常見網站元素的一些網頁設計最佳實踐：

圖片

使用影象的網頁設計最佳實踐可以激發許多建議，但在本次網頁設計最佳實踐的討論中，讓我們專注於最低限度：

• 新增ALT文字。除非使用ALT文字，否則無法使用螢幕閱讀器處理影象。新增ALT文字也有助於SEO，但有些人僅使用ALT文字來補充他們的關鍵字策略。ALT文字更有用的用途是描述影象——儘管您當然可以通過正確的方法同時滿足搜尋蜘蛛和螢幕閱讀器的需求。
• 使用人臉影象往往比其他圖形或動畫更有效。它使人們更有可能與影象互動，因為人們被他們認為是真正的同理心和情感所吸引。
• 使用響應式影象，這些影象會根據瀏覽器大小而增長或縮小。這有助於提高網站速度和SEO。
• 永遠不要忘記網站圖示。網站圖示是顯示在網站標題旁邊和搜尋結果中的小圖示。它有助於品牌識別並增強網站的使用者體驗。

網站導航

使用者希望能夠輕鬆地在網站上找到他們正在尋找的內容。因此，網站導航簡單明瞭很重要。

網站導航是一個通用術語，指的是網站的內部連結架構。不要忘記導航的主要目的是幫助使用者輕鬆找到您網站上的相關內容。

您網站的內部連結架構構成了站點地圖的基礎，這有助於搜尋引擎更輕鬆地訪問您的內容。已經發現，擁有一個設計良好且內容易於查詢的網站會對您從搜尋引擎獲得的網站流量產生積極影響（以及獲得Google附加連結的機會更高）。

選單導航

網站導航有幾個方面，但您的頂部/主選單應該是主要焦點，因為它將是使用者訪問您的網站時首先與之互動的內容之一。

有不同的網站選單設計啟發式方法，但最受歡迎的包括：
導航選單
理想情況下，它位於網站的前面和中心。如果有多個類別，這可能涉及使用下拉選單。但是，不推薦使用下拉選單，尤其是在技術 SEO 方面（它們更難抓取）。此外，已經發現大多數人不喜歡下拉選單。

這是因為人眼的工作速度比手快，所以當人們已經決定要點選什麼並且其他東西掉下來時，人們會覺得很煩人——這可能會導致頁面訪問量減少。
漢堡選單
主要用於移動優化設計，漢堡選單通常位於頁面的左上角或右上角。它顯示為一個帶有三行的正方形，單擊即可展開。然而，許多設計師鄙視漢堡選單，這激發了Web開發人員考慮使移動網站導航變得有趣和實用的新方法。

以下是基於網頁設計最佳實踐設計導航的一些技巧：

• 新增搜尋欄以幫助使用者輕鬆查詢內容（這是改進WordPress搜尋功能的方法）。這對於具有大量內容的網站（例如新聞部落格）特別有用。
• 遵循三次點選規則設計您的網站，該規則規定使用者應該能夠在不超過三次滑鼠點選的情況下找到所需的資訊。這是因為在可能的情況下，使用者實際上更喜歡瀏覽網站而不是瀏覽搜尋結果。
• 使您的選單標題具有描述性（牢記關鍵字），這可以幫助使用者更輕鬆地找到專案，併為 SEO 做出積極貢獻。
• 選單項的位置很重要。將最重要的頁面放在選單的前面，以便於訪問。
• 將選單項保持在最多7個，不僅是為了保持網站設計簡潔，而且因為選單項類別過多可能會影響您在搜尋中排名的能力。谷歌可能會將這些看似不相關的類別解釋為您的網站尚未決定特定的利基市場。

為了更方便的格式，這裡有一個方便的資訊圖：

選單導航的網頁設計最佳實踐

編碼標準

在全球建立和使用如此多的網站時，當然需要一套標準化的編碼原則。這些網路標準的某些方面包括：

搜尋引擎優化

搜尋引擎優化可用於有機地增加您網站的訪問者數量（不使用廣告）。由於在一篇文章的一小部分中充分挖掘SEO太複雜了，請檢視我們的SEO清單和我們的WordPress最佳SEO外掛提示，以熟悉網頁設計最佳實踐的這方面。

請注意，以下編碼標準提示與SEO密切相關。

移動響應能力

無論使用什麼裝置或瀏覽器訪問您的網站，響應式設計都關注創造出色的使用者體驗。

如今，設計響應式網站比以往任何時候都更加重要，因為超過60%的網際網路使用者通過手機訪問網際網路，一半的電子商務交易是通過移動平臺完成的。除此之外，谷歌的新搜尋演算法還優先考慮適合移動裝置的網站。

響應式設計示例

擁有響應式網站不僅可以幫助使用者更輕鬆地瀏覽您的網站，還有助於提高參與度和轉化率。使用者推薦他們擁有積極的移動響應網站體驗的品牌，相反，不僅會停止從移動網站體驗不佳的品牌購買，而且還會積極阻止其他人這樣做。

然而，儘管需要響應式網站，但估計有91%的小企業沒有. 他們應該這樣做——因為設計一個移動響應式網站肯定是有回報的。62%的公司報告稱，在設計了移動響應式網站後銷售額有所增加。

閱讀有關如何使您的網站更適合移動裝置的資源，其中包括要下載的最佳WordPress移動網站生成外掛列表，並確保檢視此精選的最佳WordPress主題列表，您可以在其中瀏覽大量內容的響應主題。

Google還提供了一些關於如何設計響應式網站的技巧。

網站安全

另一個重要的編碼實踐？建立使用者可以信任其敏感個人資訊的安全程式和網站。與流行的看法相反，黑客不會主動尋找特定的網站進行黑客攻擊，這就是為什麼即使是小型網站也容易受到攻擊的原因。

總體而言，WordPress通常是安全的，但它有助於採取額外的預防措施來保護您的網站免受攻擊。

以下是一些最佳網站安全實踐：

• 獲取SSL證書，這對於處理付款和個人資訊的網站尤其重要。SSL證書對通過網路傳送的資訊進行加密，因此黑客很難對其進行解碼。除此之外，它是一個行業標準。當訪問者訪問的網站沒有SSL證書時，Chrome會提醒訪問者。除此之外，Chrome現在正在棄用舊版TLS版本並開始顯示其他警告。啟用HTTPS（安裝SSL證書的一部分）也是Google的官方排名因素。
• 確保您的登入憑據安全。一些攻擊是由試圖強行訪問網站的黑客引起的。它有助於擁有一個單獨/隱藏的登入頁面（使用WP Hide Login外掛）並限制登入嘗試的次數。使用Login LockDown外掛，該外掛會記錄每次登入失敗的IP地址和時間戳，並在短時間內達到同一IP範圍內的失敗嘗試次數時鎖定登入功能。此外，建立一個超過6個字元且由大小寫字母、數字和特殊字元混合而成的安全密碼。經常更改密碼。如果您正在尋找額外的安全性，您還可以使用雙重身份驗證進行登入。
• 保持WordPress核心、外掛和主題更新。不要忘記從信譽良好的來源下載外掛或主題。一個好的跡象是外掛/主題是否有多個安裝並且最近已更新。您還應該閱讀評論以自己決定外掛是否值得信賴。請注意，下載一個WordPress安全外掛，例如Wordfence、Sucuri或Defender，因為73.2%的最流行的易受攻擊的WordPress安裝可以使用免費的自動化工具檢測到。這是一個更深入的最佳安全外掛列表。
• 使用安全的網路主機。對於那些不知情的人來說，您的虛擬主機似乎與網站安全無關，但41%的攻擊是通過託管平臺上的安全漏洞發生的。尋找包含以下功能的託管服務提供商：伺服器端防火牆和加密、NGINX或Apache Web伺服器、防病毒和反惡意軟體、現場安全系統以及SSL證書和CDN的可用性。

有關WordPress安全性的更多資訊，請檢視我們關於如何保持WordPress網站安全的綜合資源。

頁面速度

大約一半的使用者希望網站在2秒或更短的時間內載入，如果需要的時間更長，40%的人會毫不猶豫地從頁面跳出，（很可能）永遠不會返回。

除了網站訪問，頁面速度也很重要，因為它也會影響轉化率和收入。每增加一秒的頁面載入速度，銷售額將下降多達27%。提高網站速度可以防止損失7%的可能轉換。

以下是一些使您的網頁載入速度更快的方法：

• 使用內容交付網路 (CDN)，它獲取影象、CSS和JavaScript等靜態檔案，並將它們交付到離使用者物理位置最近的伺服器上。
• 考慮如何使用影象。網站平均使用1.8MB的圖片，佔網站大小的60%。為了解決這個問題，請重新考慮如何佈置網頁。如果您想保持快速的頁面速度，請嘗試減少設計中使用的大影象數量並確保對其進行優化。
• 如果您的網站需要使用大量大影象，請使用包含GZIP壓縮、快取或影象優化功能的外掛，例如WP Rocket和Imagify。它們可以幫助使您的檔案更小（不犧牲質量），以便更快地載入。
• 考慮您保留在WordPress資料庫中的外掛和檔案的數量，因為它們也會影響頁面載入速度。清理那些你不使用的。當您使用它時，將您的PHP、WordPress核心和外掛更新到最新版本。

檢視我們的網站速度優化綜合資源。

無障礙標準

網際網路旨在為所有人服務，無論他們使用的具體硬體、軟體、語言、能力或位置如何。然而，許多人為了美觀的設計而犧牲了可訪問性。

可訪問性是每個網站的關鍵

可訪問性是指讓每個人都可以使用您的網站的做法。

除了影響訪問的殘障人士外，W3表示網站可訪問性還有益於：

• 那些使用小螢幕、不同輸入模式等裝置的人。
• 老人家。
• 患有“暫時性殘疾”的人，包括肢體骨折、眼鏡丟失或身體狀況不佳。
• 具有“情境限制”的使用者，例如在明亮的陽光下或在公共交通等無法收聽音訊的環境中使用裝置訪問網際網路的使用者。
• 網際網路連線速度較慢的個人。

可訪問性應該是每個人都關心的問題，因為我們都在某種程度上受到它的影響。

使您的網站可訪問的原因

仍然不確定在這個關於網頁設計最佳實踐的討論中是否值得花時間在可訪問性上？

考慮以下原因：

• 這是ADA的要求。美國殘疾人法案 (ADA) 於1990年通過，旨在保護殘疾人的公民權利免受歧視。它涵蓋了交通、電信、就業，甚至建築規範等內容。由於這項法律是在將近 30 年前通過的——當時網際網路還沒有那麼普及——立法者正在尋求修改它。
• 它促進包容性。皮尤研究中心的一項調查顯示，殘障人士上網的可能性是非殘障人士的三倍，這是一種恥辱，因為統計資料顯示，大約30%的專業人士有殘障，其中62%的殘障人士因為害怕負面偏見而“在雷達下飛行”。
• 它將幫助您贏得更多業務。通過更具包容性，您將引入一個殘疾人網路，代表7萬億美元的可支配收入
• 搜尋引擎優化的好處。搜尋引擎獎勵符合可訪問性的網站，以鼓勵更多網站可訪問。

如何使您的網站更易於訪問

使您的網站更易於訪問的一種簡單方法是安裝WP Accessibility外掛，它新增了可訪問性功能，包括：

• 一個工具欄，使用者可以在其中調整字型大小並以高對比度和灰度檢視您的網站。
• 比較顏色對比度以檢查它是否符合ADA的標準。
• 從插入內容的影象中刪除標題屬性。大多數螢幕閱讀器無法感知這一點並改為閱讀錨文字。
• 啟用跳轉連結，這是允許使用者直接跳轉到內容的內部頁面連結，這對使用螢幕閱讀器的人很有用。

需要採取的一些額外步驟：

• 如果您的網站製作音訊、有聲讀物、視訊、播客等媒體，請新增字幕或文字記錄，以使聾啞人以及想要消費您的內容但不能在公共場合消費媒體的人受益。
• 為有運動障礙且只能使用鍵盤（而非滑鼠）瀏覽您的網站的人建立可通過鍵盤訪問的連結和選單。不鼓勵使用下拉選單，但您可以通過為每個下拉項分配快捷方式來解決此問題（例如：按“1”表示主頁，“2”表示關於頁面等）。
• 最後，測試您的網站的網站可訪問性。Web Accessibility Initiative不認可任何特定工具，而是提供了一個工具列表，您可以使用這些工具來稽覈您的工作。

小結

好的網站不應該由客觀好的設計來定義。同樣重要的是網站的可用性、導航的便利性和可訪問性。有了這些網頁設計最佳實踐，您就擁有了建立外觀和功能良好的東西所需的一切。

請記住，這些是網頁設計的最佳實踐。根據您網站的性質，您可能無法完全關注每一項。但在你打破規則之前，至少了解它們存在的原因是有幫助的。