WordPress 主題買家通常會犯的 11 個設計錯誤

您是否曾經發現自己使用 WordPress 主題製作網站，但最終結果與主題演示完全不同？ 我列出了網站製作者經常忽略的 11 個常見設計錯誤。

您找到了完美的 WordPress 主題。 主題的演示看起來完美無瑕。 您的客戶非常喜歡它，並同意您購買。 您購買了它，安裝了它並開始根據客戶的需要編輯主題。

您更改了徽標，更改了主題的顏色，插入了滑塊圖像和內容，但最終，您製作的網站看起來一點也不像演示。 你知道出了什麼問題，但你就是無法檢測到什麼。 聽起來很熟悉？

在過去的 5 年中，作為 WordPress 主題業務的設計師，我看到了無數使用我們的 WordPress 主題創建的漂亮網站的示例。

但是每隔一段時間，我就會看到一個基礎紮實但有幾個小設計錯誤的網站，這會破壞整體體驗。 我說的是任何人都可以輕鬆解決的小事。

我知道很難發現這些缺陷，尤其是如果您不是設計師的話。 出於這個原因，我決定寫一篇關於如何改進您客戶的網站以使其看起來更好的博客文章。

將此博客文章添加為書籤，並在您下次使用 WordPress 主題構建網站時瀏覽下面的列表。 消除所有瑕疵只需要一兩個小時，但結果看起來會好 100%。

1.滑塊上的文字對比度差

我一直在談論關於滑塊圖像的注意事項和注意事項，所以我現在要簡要介紹一下。 原則很簡單：

• 如果滑塊上的文本顏色為白色，請選擇深色背景。 如果滑塊文本較暗，請選擇淺色背景。
• 確保文本出現的區域在背景中沒有太多的視覺噪音。 雜亂的背景會降低正面文本的可讀性，並且可能會錯過寫在滑塊上的主要價值主張。

對您來說幸運的是，我們的大多數主題都包括文本後面的半透明純色背景選項。 我們較新的 WordPress 主題還對滑塊上的所有文本應用了陰影，因此對比度更好。

2.太大的滑塊圖像

當我查看使用我們的 WordPress 主題製作的網站時，我經常注意到用戶使用了太大的滑塊圖像。 僅當您是攝影師並且照片是您的最終產品時，才可以使用佔據屏幕高度 100% 的滑塊圖像。 在其他情況下，請保持安全並堅持主題建議。 它將保持您網站的完美視覺平衡。

3. 差的白色（負）空間

網頁設計中的空白或負空間是小部件、文本塊、圖像或網站任何其他部分之間的空白空間，有助於組織所有內容並為最終用戶提供清晰、合乎邏輯的流程。

無論我們如何努力，如何對 WordPress 主題的每一個可能方面進行防彈，用戶總能找到一種方法來破壞空白。

幸運的是，我們在主題中使用了功能強大的頁面構建器，這意味著您可以輕鬆地調整整個網站的間距。 Page Builder 允許您更改小部件的填充、行的填充，並允許您修改列之間的間距大小。

我不打算談論細節，我寧願給你一些實際的例子。

• 在大多數情況下，網站製造商使用的空白太少，這不允許內容呼吸，因此通常，您應用的空白越多，您獲得的效果就越好。
• 用間距顯示元素之間的關係。 組合在一起的元素，例如博客文章的標題和文章的日期，應該比具有不同目的的元素更接近，例如博客文章的日期和頁面的標題。
• 與間距保持一致。 這意味著您網站上的每一行都應該在頂部、底部、左側和右側有相同數量的空白。

所以，它涉及到小部件。 無論它們出現在頁面的哪個位置，它們都應該應用相同數量的填充和邊距。 一致性將為您的網站帶來平衡，並將注意力集中在重要的事情上——內容。

4. 糟糕的移動友好性

程序和規則與上面的桌面相同。 您仍然需要注意空白，但對於移動設備，還有一些附加規則：

• 其中之一是手指友好的設計。 由於手指是我們在移動設備上瀏覽時在網站上移動的工具，因此我們需要使頁面適應它們。 當我們設計 WordPress 主題時，我們會確保按鈕和可點擊元素不小於 50 像素。 如果您要向 WordPress 主題添加第 3 方元素，請確保它們足夠大。 此外，確保這些可操作的組件不會粘在一起太多，以防止誤點擊。
• 優化圖像以提高速度。 許多人在旅途中訪問網站，這意味著不可靠，有時連接不良。 嘗試消除緩慢的網站加載（在移動設備上）並優化您的圖像。
• 在實際的移動設備上測試您的網站。 您可以調整瀏覽器窗口的大小以查看移動視圖，但是當您完成所有調整後，請查看網站在實際移動設備上的外觀。

操作系統、瀏覽器和整體用戶體驗在桌面和移動設備之間存在差異，並且可能會出現一些不平等。

谷歌開發了一種移動友好測試，一種用於檢查您的網站是否適合移動設備的工具。

我們確保我們的每一個 WordPress 主題都能輕鬆通過。

5. 使用不能齊頭並進的顏色。

選擇正確的顏色組合是一件棘手的事情。 如果你有才華，你可以跟隨你的直覺。 否則，請使用專門為此製作的工具。

我將向您展示一個示例：

我們的大多數 WordPress 主題都是由主要顏色和次要顏色組成的。 如果您的徽標看起來像殼牌的，那麼選擇主要顏色和次要顏色的決定很簡單。 紅色將用作號召性用語的主要顏色。 黃色將是輔助顏色，用於背景和支持元素。

如果您的標誌看起來像星巴克的標誌，並且僅由一種顏色製成，則您需要找到第二種顏色。

一種選擇是為主要顏色和次要顏色選擇相同的綠色，但我強烈反對這樣做。

如果您沒有設計師的直覺並且很難挑選出顏色組合，那麼我有一個解決方案適合您，稱為 Coolors。 它是一個簡單易用的工具，用於創建漂亮的顏色組合。

轉到他們的應用程序並在列底部插入您的原色的十六進制顏色代碼（在我的情況下為 #006241）。 然後通過單擊鎖定圖標並按空格鍵將其鎖定。

提示：不知道如何獲取徽標的十六進制代碼？ 看看，如果有一個有用的 Chrome 擴展。

我的結果看起來像這樣。

如您所見，所有顏色都發生了變化，但您的原色保持不變。 如果您沒有得到您喜歡的顏色，請繼續按空格鍵。

如果您選擇輔助顏色的唯一原因是在網站上使用它，並且該顏色不會出現在其他任何地方，請不要選擇過於強烈的顏色。 在我們的例子中，亮橙色已經過時了。

你需要選擇一種更微妙的顏色，它不會破壞你的品牌，並且會順利地支持你的主色，在我們的例子中是綠色。

我個人的選擇是第二個米色（#d8c99b），因為它與綠色完美搭配，而且絕對不會超過它。

也許這種特殊的米色不是完美的顏色，但它是一個足夠好的選擇。 這就是為什麼。 選擇顏色時，請嘗試考慮其上的深色或白色文本的外觀。

在我的示例中，深色文本看起來不錯，但增加一點對比度並選擇更淺的米色會使其更好。

幸運的是，Coolors 應用程序還有另一個很棒的功能。 您可以選擇每種顏色的不同深淺。 將鼠標懸停在彩色列上，然後單擊第一個圖標，稱為“替代色調”。 然後選擇更亮或更暗的色調，並始終牢記對比度。

我做了一個關於這兩種顏色如何協同工作的快速演示。 為此，我採用了我們的 Adrenaline WordPress 主題並將其轉換為星巴克網站。

我在 2 分鐘內將 Adrenaline WordPress 主題完全更改為其他主題的速度給我留下了深刻的印象。 我所要做的就是更改兩種顏色，上傳自定義英雄圖像並上傳自定義徽標。 自己試試。

6.不要弄亂你的網站導航

以易讀易懂的方式構建您的網站導航。 在下拉列表中對不太重要的內容進行分組，或者將它們包含在頂部欄或頁腳中。 使導航層次結構合乎邏輯並確保所有相同級別的菜單具有相同的優先級。

例如，條款和協議通常不如主要行動號召重要，因此它們不能同時出現在同一級別。 將條款放入頁腳，將主要號召性用語放入頁眉。

保持主導航乾淨，最多有 5 或 6 個選項。

7. 標誌太大

有一句名言，我們都曾在某個時候從我們的客戶那裡得到過——“讓標誌變大”。 作為網站製作者，你的工作是教育你的客戶，沒有必要有一個 400 像素寬的標誌，因為網站訪問者不會來到你的網站來看看你的標誌有多漂亮。

上傳大小徽標，由 WordPress 主題作者推薦。 他們可能最清楚哪種徽標尺寸最適合特定主題。

徽標只是網站上的眾多內容之一，它必須與其他內容和諧相處。

如果你不相信我，看看萬維網上的任何主要品牌，你會發現其中 98% 的品牌都有一個標誌，大到足以支持所有內容。 用戶需要知道網站背後是哪個品牌，但他還必須關注服務、優惠和主要的行動呼籲。

8. 標誌質量差

有一次，我遇到了 Microsoft Word (.doc) 格式的徽標。 我想說的是，客戶總能找到讓你驚喜的方法。

關於徽標，重要的是讓它處於最佳的像素完美狀態。 為此，您將需要矢量格式（.pdf、.ai、.svg、.eps）。 然後您需要轉到您最喜歡的矢量應用程序（例如 Adob​​e Illustrator）並將該徽標導出為主題製作者推薦的大小。 這是您獲得最清晰標誌的最佳可能性。

如果您在 .png 中獲得徽標，它可能會很好地工作，但在調整大小時可能會失去一些清晰度。 如果調整大小會破壞徽標，請訪問 Fiverr.com 並投資 5 美元將其重新繪製成矢量格式。 另一個小投資，大結果。

9. 圖像質量差

情況每年都在好轉，但我仍然發現企業沒有將足夠的注意力或資源投入到高質量的照片中。

如果您有一個銷售特定產品的網站，那麼當潛在客戶決定是否購買產品時，高質量的圖像可能對潛在客戶的影響最大並且起著至關重要的作用。

如果您的客戶沒有為您提供高質量的照片，或者他沒有這些照片，那麼您的工作就是說服他投資 100 美元並在線購買。

高質量照片的絕佳來源是 Shutterstock，每月 99 美元即可獲得 50 張圖片。 這對於一個小型網站來說已經足夠了，並且將對您的網站用戶和對客戶品牌的整體信任產生巨大影響。

提示：在選擇照片時，盡量避免使用普通、精美、不真實的照片。 一個例子是一個白種人，牙齒超級白，皮膚完美無瑕。

它可以產生反作用，但肯定不會對訪問者產生任何影響。 嘗試找到一些真實的圖像。 為簡單起見，請使用具有逼真外觀和感覺的圖像。

10. 不為第三方插件設計樣式

在製作新的 WordPress 主題的過程中，我們總是對我們正在製作主題的利基進行研究。 我們總是渴望在主題中包含所有必要的功能，但有時您的客戶只是想要別的東西。 這就是 WordPress 插件發揮作用的時候了。

沒有錯。 安裝插件並將其包含到 WordPress 主題中後，看看它在前端的外觀。

我經常注意到，我們的客戶忘記將按鈕、表格和顏色的樣式設置為與主題的其餘部分相同的樣式。

將已經編寫好的 CSS 類應用到您的 3 方插件中只需要 10 分鐘，但最終會產生重大影響。

如果您不具備這樣做的知識，我們可以為您做。

11. 可讀性差

有一個著名的說法，即排版是網頁設計的 95%——所以要正確。

如果你按照我們做主題demo的方式來使用widget，不會有任何問題，因為我們在可讀性上付出了很多努力，但是如果你正在修改字體的佈局和样式，請製作確保您遵守以下規則：

• 每行應包含60-80 個字符，包括空格。
• 如果要設置自定義行高，請將字體大小乘以1.4 到 1.6。 如果您的字體大小為 16 像素，那麼您的行高應該在 22.4 到 25.6 之間。
• 在文本周圍留出足夠的空間。
• 不要使用太淺的文字顏色。 比 #777777 更亮的所有內容都會對可讀性產生不利影響。
• 不要使用小於推薦的字體。 你可以去的最低是 14px，但我建議你選擇 16px 或 18px 。
• 在主題中安裝自定義字體時要小心。 有些字體僅用於標題，在較小的尺寸上效果不佳。 有些字體是為打印而設計的，在屏幕上效果不佳，而有些字體則做得很差。 當您想將默認 WordPress 主題的字體替換為其他字體時，請三思。 如果您仍想更改它，請堅持安全並選擇流行的。

• 使用正確的對齊方式。 在 95% 的情況下，左文本對齊是可行的方法。 在其他 5% 中，我允許您使用居中對齊，但請確保僅將其用於簡短的支持性文本。

右對齊（從右到左的語言除外）和對齊的對齊是不可能的。 時期。

結論：

下次您為客戶製作網站時，請仔細閱讀上面的列表並嘗試修復所有這些小缺陷。 這將只需要一兩個小時，但最終，您會得到更好的結果，這意味著更快樂的客戶和更好的參考。 最重要的是，你會幫我們一個忙，因為我們會得到一個很棒的活生生的例子來炫耀。

如果您有任何問題，請隨時在下面發表評論。

編輯：這篇文章已被翻譯成荷蘭語——如果你想把它翻譯成你的語言，請在下面的評論中告訴我。