“非設計師”的 3 條有效網頁設計原則

歡迎來到我們的迷你係列“Effective Divi Web 設計原則”的第 2 部分，我們正在探索有效的設計實踐，以幫助新的網頁設計師和那些認為自己沒有“設計眼光”的人。

在我們之前的文章中，我們介紹瞭如何準備好您的思維方式，並介紹了一些學習如何更好地看待設計的方法。 在這篇文章中，我們將關註一些優秀設計的通用原則，您可以立即將這些原則應用到您的網頁設計工作中，以便在網頁設計的“設計”方面變得更好。

讓我們開始吧！

“非設計師”的 3 條有效網頁設計原則

正如本系列的第 1 部分所述，設計沒有對錯之分。 我們將在這篇文章中討論的內容在很大程度上被普遍接受為網頁設計社區內的良好設計原則。 這也是我作為圖形/印刷設計師轉變為 Divi 網頁設計師的個人指南，擁有近十年的經驗，更重要的是，擁有數百名快樂和滿意的客戶。 我將這些原則應用到我構建的每個 Divi 網站設計中，雖然總有一個客戶想要一些殘酷的或離牆的東西，但這些原則至少有 9 次為您服務

1) 三分法

網頁設計、平面設計、印刷設計、攝影和其他創意媒體中最常見的做法之一是遵循一個簡單的規則——三分法。 簡而言之，三分法就是對稱和平衡。 三分法的目標是幫助您在設計中實現更多的平衡與和諧。 最好的部分是 - 您可以將三分法應用於圖形、圖像、整個網頁佈局等等！

網上有很多關於三分法是否科學的討論，但不管怎樣，流行的觀點表明，如果圖像或設計在左半部和右半部或上半部過於相似，觀眾可能會發現它沉悶或無聊。 如果有的話，三分法則讓它變得有趣，並且可以帶來良好的流程，我們將在下面介紹。

在我們之前關於優化 Divi Web 內容的設計技巧的文章中，它也被稱為網格系統，這是一種很好的視覺思考方式。 想像一個看起來像這樣的網格：

借助圖像、圖形或佈局上的這個假想網格，您可以輕鬆地將內容放置在一個或多個主要交叉點附近。

將對象和焦點保持在 4 個交叉點中的 1 個或多個交叉點通常會獲得更加平衡、對稱的外觀，這與主體位於交叉點下方的第二個示例相反。 看看下面的圖片。 第一個例子不遵循三分法則。

這個例子遵循三分法則。

雖然第一個示例仍然是一個不錯的圖像，但使用三分法通過將前景與三分法中的底部交點相交，為圖像提供了完全不同的感覺。 讓我們看一下具有三分法網格的圖像。

現在讓我們看一下沒有排列三分線交點規則的圖像。

您可以看到令人賞心悅目的設計通常如何與一個或多個交點對齊的巨大差異。 雖然三分法在攝影和攝像中最常被談論，但它對於網站設計同樣重要。 我將向您展示我如何將三分法應用於我的個人網站。 這是初始設計“首屏”的快照，適用於觀眾在向下滾動之前看到的內容。

現在，讓我們將三分法網格放在主要部分上，看看它的外觀。 在這種情況下，我將專注於我實施三分法的主菜單下方的內容。

在此示例中，有 4 個主要元素位於或靠近交點。 簡而言之，我想強調以下幾點：

1. 簡要說明我是誰以及本網站的全部內容。
2. 一張圖片，讓新用戶通過看到他們將聽到誰來感到更舒適和更信任。
3. 我最新電子書的圖形讓人們有理由註冊。
4. 最後，在最後 2 幀中註冊了一個號召性用語電子郵件，這是用戶視線結束的地方。

根據三分法則，在每個交叉點（尤其是攝影）都有一些東西通常不是最佳實踐，但我經常在我的網站構建中遵循這種佈局。 順便提一下：因為我們是從左到右閱讀的，所以我經常在屏幕的中間或右側有號召性用語，因為那是我們眼睛結束的地方。 我們將在本系列的最後一篇文章中更詳細地討論號召性用語，但這是我如何在我的設計中實施三分法的一個很好的例子。

因此，如果您不確定如何佈局網頁或正在努力混合圖像、文本和行動號召，請嘗試遵循三分法則，讓它成為您的指南。

2) 佈局和流程

在佈局和設計網頁時，再次沒有正確或錯誤的風格。 這通常取決於項目、您客戶的意願、您的設計風格以及您的目標市場。 通常情況下，在數字或服務（如網頁設計機構、時尚和攝影）中，具有簡約外觀和感覺的更現代和時尚的設計。 現代設計通常會帶來更多的開放空間、更少的文本驅動內容、更多的圖像以及更多的滾動。 （我的一些老式客戶只是不寒而栗！）

在更傳統的商業市場，例如製造業、律師事務所、藍領行業等，您可能會發現網站的文本驅動內容較多，開放空間較少，而且毫無疑問，其圖像和設計元素不太吸引人。 無論出於何種原因，我在這些行業中的大多數客戶都強烈反對過多的滾動。 所以知道如何設計一個具有良好流程的佈局是關鍵！ 我經常發現我必須嘗試平衡我的創意設計風格與客戶所在行業、目標人群和客戶的需求。 儘管如此，還是有一些基本的佈局和流程原則可以應用，無論您與誰合作或他們在哪個行業。

回顧上面提到的上一篇文章，一個非常重要的指導原則是設計的 z 模式。 您會經常在每週提供的許多新的專業 Divi 佈局套件中發現這一點。

讓我們來看看我的意思。

在左側的第一個示例中，左側有一個圖像，右側有一個帶有漂亮的號召性用語按鈕的文本，然後您的眼睛向下閱讀並向左閱讀另一部分文本/CTA，然後在右側有另一個圖像並重複。 反之亦然，在右側的圖像中，存在反轉的圖案。 文本到圖像到圖像到文本等等。遵循這種 z 樣式模式是保持讀者興趣的好方法，也是平衡文本和圖像的絕妙方法。

在良好的頁面設計中，這不是流佈局的唯一選擇，但我們從左到右然後向下接收內容是一種很好的做法。 然後從左到右然後向下等等。 因此，如有疑問，請嘗試遵循 z 樣式模式作為幫助組織頁面內容流的一種方式。 關於滾動的最後一個注意事項 - 我傾向於將我的網站保持在 3-5 個滾動範圍內。 通常情況下，滾動的次數越多，頁面越大，加載速度越慢。 同樣，滾動沒有對錯之分，但如果您還沒有與具有更老式思維方式的客戶合作，那麼您肯定會遇到一些反對意見。 我試圖重申那些客戶不要害怕滾動。 社交媒體訓練我們不斷滾動并快速吸收內容。

3) 視覺層次

我想在這裡指出的最後一個主要原則是視覺層次結構。 簡而言之，層次結構可以幫助用戶了解最重要的信息是什麼，並為他們提供一個非常清晰的方向，讓他們知道在您的設計中他們的注意力應該放在什麼地方。 層次結構通常與排版有關（我們將在第三篇文章中介紹），但它在網站的圖形元素、圖像和整體設計中也非常重要。

我不會故意指出我覺得“優秀設計”部門缺乏的網站，但我相信你已經遇到過很多網站，它們都有大量相同大小的文本和圖像，但沒有清晰號召行動，對吧？ 這就是我們想要避免的。 使用良好的層次結構是指導您的網站用戶了解他們應該點擊或下一步做什麼的最佳方式。

這是我在考慮層次結構的情況下創建的最近設計的示例：

雖然右上角的標誌和電話號碼清晰可見，但折疊上方最大的內容和最鮮豔的顏色是點擊按鈕的號召性用語。

我的客戶特別希望人們在到達現場時可以輕鬆地請求檢查，因此我使用這種視覺層次結構的想法來希望實現這一目標！ 我最近如何使用層次結構的另一個例子是本網站的首屏設計：

在這種情況下，客戶的主要行動呼籲是在線購物或直接聯繫他們。 徽標、簡短描述甚至電話號碼都很普遍，但 Divi Double Button 是您最初看到的最大元素，希望讓用戶在不進一步滾動的情況下點擊他們正在尋找的內容。

再說一次，雖然這些只是視覺層次結構的幾個例子，但它可以是一種非常強大的方法，可以指導您的網站用戶做您希望他們做的事情或去您希望他們去的地方！ 順便說一句，我強烈建議您查看我們之前關於要避免的常見網頁設計錯誤的帖子。

在結束

我希望這些有效的設計原則能夠幫助您進行設計工作，無論您是網頁設計新手還是希望在設計方面做得更好！ 同樣，我們可以回顧許多原則，但這些是嘗試在我所有網站設計中實施的前 3 條原則。

如果您有任何其他設計原則想要分享，請在下面的評論中告訴我們！

明天：每個網站構建需要關注的 3 個重要設計領域

既然我們已經介紹瞭如何準備好我們的心態，如何學會更好地看待設計，並且已經了解了一些基本的設計原則，我們的最後一篇文章將探討網頁設計的一些最重要的方面，以重點關注每個網站建設。 直到那時！

請務必訂閱我們的電子郵件通訊和 YouTube 頻道，這樣您就不會錯過重大公告、有用提示或 Divi 免費贈品！