WordPress 作品集网站中的网格布局：设计技巧和示例

任何 WordPress 投资组合网站最常见的结构是网格。 它同时显示了一些作品，因此观众可以快速浏览并挑选任何吸引他们眼球的东西。

但是，是什么为投资组合打造了强大的网格布局呢？ 启动自己的投资组合网站时应该考虑什么？

在这篇文章中，我将分享一些关于 WordPress 投资组合最佳网格布局设计的技巧和建议。

紧密的网格设计

当您使用网格时，保持设计紧密是明智的。 通过这种方式，这些项目靠近在一起，可以快速浏览并鼓励用户与内容进行交互。

网格结构通常根据投资组合内容的类型而有所不同。 根据您的照片和布局，您可能需要增加或减少填充。 例如，艺术品在靠近时会感觉模糊，因此数字艺术作品集可以从额外的空间中受益。

但是设计师可能会将他们的工作紧密结合在一起，因为即使在远处，屏幕截图仍然很容易辨认。 您可以在 WordPress 的 Ink 主题中看到一个很好的示例。

这绝对不使用任何网格元素之间的填充。 这些方形块紧密排列在一起，因此用户可以立即看到所有内容。

它还使用较小的缩略图，因此它们往往会迅速吸引注意力。 我真的很喜欢这种风格，它是我个人的最爱，因为它给人留下了如此深刻的印象。 请注意每张照片与其他所有照片的对比如何清晰可见。

如果您有可以从这种风格中受益的作品，请查看 Ink 主题。 这是创建这些类型的投资组合网格的简单方法，无需从头开始编写代码。

但一个不错的选择是 Bramble，它在每块之间有更多的空间。

这个 WordPress 主题带有多个投资组合布局，因此您实际上可以选择您最喜欢的样式。 一些投资组合布局的缩略图更靠近，其他的在网格中的元素之间有很多填充。

但是要考虑的第一件事是分析瘫痪。 当出现太多选择，让人觉得无法选择其中任何一个时，就会出现这种情况。

只要您的作品集条目感觉独特并且有足够的空间（或缺乏空间）来独立站立，您就会获得大量点击。 这不是投资组合的重点吗？

砌体网格

没有多少人知道砖石网格，但它们已经存在了很长时间。

这些通常使用 JavaScript 根据不同的垂直高度将项目排列到网格中。 因此，您可以添加不同大小的不同投资组合元素，而不是添加所有相同大小的完美像素缩略图，并且仍然让它们适合。

Weston WordPress 主题在其极简主义摄影作品集页面中具有此功能。 这自然针对想要在线工作的摄影师，而砖石网格是可变高度摄影的合适选择。

每张照片都会自然地进入网格，占用恰到好处的空间。 您通常可以自定义确切的列数和列高，但请记住，它会因设备大小而异。

如果您喜欢全屏布局，请查看 Notio 主题。 它使用具有紧凑缩略图和自定义动画效果的砖石网格设计。

请注意，这两个主题的网格在紧密度上也有所不同。 一个在图像之间有额外的空白，而另一个则具有彼此紧密对齐的缩略图。

网格布局遵循少数趋势，您可以选择遵循您最喜欢的趋势。

悬停细节：是还是不是？

许多投资组合包括悬停时显示在缩略图上的悬停详细信息。 这种效果通常不会延续到移动设备中，但对于具有大缩略图的桌面组合网站来说，这绝对是一种普遍趋势。

每个缩略图都应该链接到内部投资组合项目页面，或者至少打开与该作品相关的图片库。 缩略图不应构成整个投资组合。

但是添加细节可以鼓励更高的点击率，让人们进一步挖掘网站。 Create WordPress 主题在悬停时使用自定义动画效果来吸引对悬停细节的注意。

当您的光标悬停在任何投资组合项目上时，您会发现两个重要的信息花絮：

• 投资组合项目的名称/标题
• 项目的类别

有时这些小细节可以从根本上改善用户体验。 如果有人正在浏览某些平面设计作品，他们可以按类别浏览并在点击之前查看标题。

但其他时候，这些细节可能会过于冗长，并且会占用太多空间。 这就是为什么一些设计师会跳过这些细节，比如你会在 WordPress Gather 主题中找到的。

只是带有简单悬停效果的简单缩略图。 眼睛很容易，所有细节都在缩略图下方，因此它们不会阻碍图像。

这种趋势没有明确的“正确”答案。 悬停细节对某些人来说非常有用，但对于其他人来说，这个功能可能是一个小烦恼的来源。

找到在您的网站上看起来最好的东西，并根据您自己的口味进行衡量。 但是，无论细节是出现在缩略图上还是缩略图下方，都请尝试将它们添加到页面上的某个位置。

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

每个网格布局都使用缩略图来吸引注意力。 这些缩略图通常通过鼓励人们点击并阅读更多内容来出售您的部分作品。

你的工作可能是数字艺术、网页设计、图标设计、UX 架构或其他任何具有视觉吸引力的东西。 但关键是你绝对需要视觉吸引力来销售。 这来自引人注目的照片。

极简主义的 Mellow WordPress 主题使用各种不同风格的照片。 这些不是“真实”的项目照片，因为它们大多是占位符。 但他们提供了一个明确的例子，即从第一个页面加载就销售访问者。

我建议浏览其他作品集网站，看看其他设计师在他们的画廊图片中使用了什么。

看看你可以为自己的网站使用什么，以及什么样的工作可以引起注意。 什么最能展示你的技能？ 每个项目的哪个部分最具视觉吸引力或有助于将您的作品出售给他人？

同样，这是一个非常开放的问题，但您需要尝试许多不同的策略。 我通常发现特写照片会引起很多关注，尤其是缩略图形式。 您可以在投资组合页面上看到这些示例与贝克特主题的混合。

在网格布局中，每个项目只有这么多空间。 让空间计数！

如果您确切知道缩略图应该有多大，那么您已经处于巨大的优势。 这使您可以在 Photoshop 中裁剪许多不同的缩略图，以查看最适合您的投资组合项目的构图。

向前进

网格设计非常简单，许多 WordPress 投资组合主题默认附带它们。 但是，如果没有壮观的设计作品来展示，网格布局将无法提供太多帮助。

我希望这篇文章为设计师和创意人员推出自己的作品集提供有价值的提示。 网格设计在投资组合中最常见，因此访问者会期待它们。 通过应用这些趋势（或使用这些主题），您可以吸引更多的注意力，并随着时间的推移带来更多的客户工作。