WordPress 作品集網站中的網格佈局：設計技巧和示例

任何 WordPress 投資組合網站最常見的結構是網格。 它同時顯示了一些作品，因此觀眾可以快速瀏覽並挑選任何吸引他們眼球的東西。

但是，是什麼為投資組合打造了強大的網格佈局呢？ 啟動自己的投資組合網站時應該考慮什麼？

在這篇文章中，我將分享一些關於 WordPress 投資組合最佳網格佈局設計的技巧和建議。

緊密的網格設計

當您使用網格時，保持設計緊密是明智的。 通過這種方式，這些項目靠近在一起，可以快速瀏覽並鼓勵用戶與內容進行交互。

網格結構通常根據投資組合內容的類型而有所不同。 根據您的照片和佈局，您可能需要增加或減少填充。 例如，藝術品在靠近時會感覺模糊，因此數字藝術作品集可以從額外的空間中受益。

但是設計師可能會將他們的工作緊密結合在一起，因為即使在遠處，屏幕截圖仍然很容易辨認。 您可以在 WordPress 的 Ink 主題中看到一個很好的示例。

這絕對不使用任何網格元素之間的填充。 這些方形塊緊密排列在一起，因此用戶可以立即看到所有內容。

它還使用較小的縮略圖，因此它們往往會迅速吸引註意力。 我真的很喜歡這種風格，它是我個人的最愛，因為它給人留下瞭如此深刻的印象。 請注意每張照片與其他所有照片的對比如何清晰可見。

如果您有可以從這種風格中受益的作品，請查看 Ink 主題。 這是創建這些類型的投資組合網格的簡單方法，無需從頭開始編寫代碼。

但一個不錯的選擇是 Bramble，它在每塊之間有更多的空間。

這個 WordPress 主題帶有多個投資組合佈局，因此您實際上可以選擇您最喜歡的樣式。 一些投資組合佈局的縮略圖更靠近，其他的在網格中的元素之間有很多填充。

但是要考慮的第一件事是分析癱瘓。 當出現太多選擇，讓人覺得無法選擇其中任何一個時，就會出現這種情況。

只要您的作品集條目感覺獨特並且有足夠的空間（或缺乏空間）來獨立站立，您就會獲得大量點擊。 這不是投資組合的重點嗎？

砌體網格

沒有多少人知道磚石網格，但它們已經存在了很長時間。

這些通常使用 JavaScript 根據不同的垂直高度將項目排列到網格中。 因此，您可以添加不同大小的不同投資組合元素，而不是添加所有相同大小的完美像素縮略圖，並且仍然讓它們適合。

Weston WordPress 主題在其極簡主義攝影作品集頁面中具有此功能。 這自然針對想要在線工作的攝影師，而磚石網格是可變高度攝影的合適選擇。

每張照片都會自然地進入網格，佔用恰到好處的空間。 您通常可以自定義確切的列數和列高，但請記住，它會因設備大小而異。

如果您喜歡全屏佈局，請查看 Notio 主題。 它使用具有緊湊縮略圖和自定義動畫效果的磚石網格設計。

請注意，這兩個主題的網格在緊密度上也有所不同。 一個在圖像之間有額外的空白，而另一個則具有彼此緊密對齊的縮略圖。

網格佈局遵循少數趨勢，您可以選擇遵循您最喜歡的趨勢。

懸停細節：是還是不是？

許多投資組合包括懸停時顯示在縮略圖上的懸停詳細信息。 這種效果通常不會延續到移動設備中，但對於具有大縮略圖的桌面組合網站來說，這絕對是一種普遍趨勢。

每個縮略圖都應該鏈接到內部投資組合項目頁面，或者至少打開與該作品相關的圖片庫。 縮略圖不應構成整個投資組合。

但是添加細節可以鼓勵更高的點擊率，讓人們進一步挖掘網站。 Create WordPress 主題在懸停時使用自定義動畫效果來吸引對懸停細節的注意。

當您的光標懸停在任何投資組合項目上時，您會發現兩個重要的信息花絮：

• 投資組合項目的名稱/標題
• 項目的類別

有時這些小細節可以從根本上改善用戶體驗。 如果有人正在瀏覽某些平面設計作品，他們可以按類別瀏覽並在點擊之前查看標題。

但其他時候，這些細節可能會過於冗長，並且會佔用太多空間。 這就是為什麼一些設計師會跳過這些細節，比如你會在 WordPress Gather 主題中找到的。

只是帶有簡單懸停效果的簡單縮略圖。 眼睛很容易，所有細節都在縮略圖下方，因此它們不會阻礙圖像。

這種趨勢沒有明確的“正確”答案。 懸停細節對某些人來說非常有用，但對於其他人來說，這個功能可能是一個小煩惱的來源。

找到在您的網站上看起來最好的東西，並根據您自己的口味進行衡量。 但是，無論細節是出現在縮略圖上還是縮略圖下方，都請嘗試將它們添加到頁面上的某個位置。

用引人注目的照片吸引眼球

每個網格佈局都使用縮略圖來吸引註意力。 這些縮略圖通常通過鼓勵人們點擊並閱讀更多內容來出售您的部分作品。

你的工作可能是數字藝術、網頁設計、圖標設計、UX 架構或其他任何具有視覺吸引力的東西。 但關鍵是你絕對需要視覺吸引力來銷售。 這來自引人注目的照片。

極簡主義的 Mellow WordPress 主題使用各種不同風格的照片。 這些不是“真實”的項目照片，因為它們大多是佔位符。 但他們提供了一個明確的例子，即從第一個頁面加載就銷售訪問者。

我建議瀏覽其他作品集網站，看看其他設計師在他們的畫廊圖片中使用了什麼。

看看你可以為自己的網站使用什麼，以及什麼樣的工作可以引起注意。 什麼最能展示你的技能？ 每個項目的哪個部分最具視覺吸引力或有助於將您的作品出售給他人？

同樣，這是一個非常開放的問題，但您需要嘗試許多不同的策略。 我通常發現特寫照片會引起很多關注，尤其是縮略圖形式。 您可以在投資組合頁面上看到這些示例與貝克特主題的混合。

在網格佈局中，每個項目只有這麼多空間。 讓空間計數！

如果您確切知道縮略圖應該有多大，那麼您已經處於巨大的優勢。 這使您可以在 Photoshop 中裁剪許多不同的縮略圖，以查看最適合您的投資組合項目的構圖。

向前進

網格設計非常簡單，許多 WordPress 投資組合主題默認附帶它們。 但是，如果沒有壯觀的設計作品來展示，網格佈局將無法提供太多幫助。

我希望這篇文章為設計師和創意人員推出自己的作品集提供有價值的提示。 網格設計在投資組合中最常見，因此訪問者會期待它們。 通過應用這些趨勢（或使用這些主題），您可以吸引更多的注意力，並隨著時間的推移帶來更多的客戶工作。