“非设计师”的 3 条有效网页设计原则

已发表: 2017-11-16

欢迎来到我们的迷你系列“Effective Divi Web 设计原则”的第 2 部分，我们正在探索有效的设计实践，以帮助新的网页设计师和那些认为自己没有“设计眼光”的人。

在我们之前的文章中，我们介绍了如何准备好您的思维方式，并介绍了一些学习如何更好地看待设计的方法。在这篇文章中，我们将关注一些优秀设计的通用原则，您可以立即将这些原则应用到您的网页设计工作中，以便在网页设计的“设计”方面变得更好。

让我们开始吧！

“非设计师”的 3 条有效网页设计原则

正如本系列的第 1 部分所述，设计没有对错之分。我们将在这篇文章中讨论的内容在很大程度上被普遍接受为网页设计社区内的良好设计原则。这也是我作为图形/印刷设计师转变为 Divi 网页设计师的个人指南，拥有近十年的经验，更重要的是，拥有数百名快乐和满意的客户。我将这些原则应用到我构建的每个 Divi 网站设计中，虽然总有一个客户想要一些残酷的或离墙的东西，但这些原则至少有 9 次为您服务

1) 三分法

网页设计、平面设计、印刷设计、摄影和其他创意媒体中最常见的做法之一是遵循一个简单的规则——三分法。简而言之，三分法就是对称和平衡。三分法的目标是帮助您在设计中实现更多的平衡与和谐。最好的部分是 - 您可以将三分法应用于图形、图像、整个网页布局等等！

网上有很多关于三分法是否科学的讨论，但不管怎样，流行的观点表明，如果一个图像或设计在左半边和右半边或上半部分太相似，观众可能会发现它沉闷或无聊。如果有的话，三分法则让它变得有趣，并且可以带来良好的流程，我们将在下面介绍。

在我们之前关于优化您的 Divi Web 内容的设计技巧的文章中，它也被称为网格系统，这是一种很好的视觉思考方式。想象一个看起来像这样的网格：

借助图像、图形或布局上的这个假想网格，您可以轻松地将内容放置在一个或多个主要交叉点附近。

将物体和焦点保持在 4 个交叉点中的 1 个或多个交叉点通常会获得更加平衡、对称的外观，这与主体位于交叉点下方的第二个示例相反。看看下面的图片。第一个例子不遵循三分法则。

这个例子遵循三分法则。

虽然第一个示例仍然是一个不错的图像，但使用三分法通过将前景与三分法中的底部交点相交，为图像提供了完全不同的感觉。让我们看一下具有三分法网格的图像。

现在让我们看一下没有排列三分线交点规则的图像。

您可以看到令人赏心悦目的设计通常如何与一个或多个交点对齐的巨大差异。虽然三分法在摄影和摄像中最常被谈论，但它对于网站设计同样重要。我将向您展示我如何将三分法应用于我的个人网站。这是初始设计“首屏”的快照，适用于观众在向下滚动之前看到的内容。

现在，让我们将三分法网格放在主要部分上，看看它的外观。在这种情况下，我将专注于我实施三分法的主菜单下方的内容。

在此示例中，有 4 个主要元素位于或靠近交点。简而言之，我想强调以下几点：

简要说明我是谁以及本网站的全部内容。
一张图片，让新用户通过看到他们将听到谁来感到更舒适和更信任。
我最新的电子书的图形让人们有理由注册。
最后，在最后 2 帧中注册了一个号召性用语电子邮件，这是用户视线结束的地方。

根据三分法则，在每个交叉点（尤其是摄影）都有一些东西通常不是最佳实践，但我经常在我的网站构建中遵循这种布局。顺便提一下：因为我们是从左到右阅读的，所以我经常在屏幕的中间或右侧有号召性用语，因为那是我们眼睛结束的地方。我们将在本系列的最后一篇文章中更详细地讨论号召性用语，但这是我如何在我的设计中实施三分法的一个很好的例子。

因此，如果您不确定如何布局网页或正在努力混合图像、文本和行动号召，请尝试遵循三分法则，让它成为您的指南。

2) 布局和流程

在布局和设计网页时，再次没有正确或错误的风格。这通常取决于项目、您客户的意愿、您的设计风格以及您的目标市场。通常情况下，在数字或服务（如网页设计机构、时尚和摄影）中，具有简约外观和感觉的更现代和时尚的设计。现代设计通常会带来更多的开放空间、更少的文本驱动内容、更多的图像以及更多的滚动。（我的一些老式客户只是不寒而栗！）

在更传统的商业市场，例如制造业、律师事务所、蓝领行业等，您可能会发现网站的文本驱动内容较多，开放空间较少，而且毫无疑问，其图像和设计元素不太吸引人。无论出于何种原因，我在这些行业中的大多数客户都强烈反对过多的滚动。所以知道如何设计一个具有良好流程的布局是关键！我经常发现我必须尝试平衡我的创意设计风格与客户所在行业、目标人群和客户的需求。尽管如此，还是有一些基本的布局和流程原则可以应用，无论您与谁合作或他们在哪个行业。

回顾上面提到的上一篇文章，一个非常重要的指导原则是设计的 z 模式。您会经常在每周提供的许多新的专业 Divi 布局套件中发现这一点。

让我们来看看我的意思。

在左侧的第一个示例中，左侧有一个图像，右侧有一个带有漂亮的号召性用语按钮的文本，然后您的眼睛向下阅读并向左阅读另一部分文本/CTA，然后在右侧有另一个图像并重复。反之亦然，在右侧的图像中，存在反转的图案。文本到图像到图像到文本等等。遵循这种 z 样式模式是保持读者兴趣的好方法，也是平衡文本和图像的绝妙方法。

在良好的页面设计中，这不是流布局的唯一选择，但我们从左到右然后向下接收内容是一种很好的做法。然后从左到右然后向下等等。因此，如有疑问，请尝试遵循 z 样式模式作为帮助组织页面内容流的一种方式。关于滚动的最后一个注意事项 - 我倾向于将我的网站保持在 3-5 个滚动范围内。通常情况下，滚动的次数越多，页面越大，加载速度越慢。同样，滚动没有对错之分，但如果您还没有与具有更老式思维方式的客户合作，那么您肯定会遇到一些反对意见。我试图重申那些客户不要害怕滚动。社交媒体训练我们不断滚动并快速吸收内容。

3) 视觉层次

我想在这里指出的最后一个主要原则是视觉层次结构。简而言之，层次结构可以帮助用户了解最重要的信息是什么，并为他们提供一个非常清晰的方向，让他们知道在您的设计中他们的注意力应该放在什么地方。层次结构通常与排版有关（我们将在第三篇文章中介绍），但它在网站的图形元素、图像和整体设计中也非常重要。

我不会故意指出我觉得“优秀设计”部门缺乏的网站，但我相信你已经遇到过很多网站，它们都有大量相同大小的文本和图像，但没有清晰号召行动，对吧？这就是我们想要避免的。使用良好的层次结构是指导您的网站用户了解他们应该点击或下一步做什么的最佳方式。

这是我在考虑层次结构的情况下创建的最近设计的示例：

虽然右上角的标志和电话号码清晰可见，但折叠上方最大的内容和最鲜艳的颜色是点击按钮的号召性用语。

我的客户特别希望人们在到达现场时可以轻松地请求检查，因此我使用这种视觉层次结构的想法来希望实现这一目标！我最近如何使用层次结构的另一个例子是本网站的首屏设计：

在这种情况下，客户的主要行动呼吁是在线购物或直接联系他们。徽标、简短描述甚至电话号码都很普遍，但 Divi Double Button 是您最初看到的最大元素，希望让用户在不进一步滚动的情况下点击他们正在寻找的内容。

再说一次，虽然这些只是视觉层次结构的几个例子，但它可以是一种非常强大的方法，可以指导您的网站用户做您希望他们做的事情或去您希望他们去的地方！顺便说一句，我强烈建议您查看我们之前关于要避免的常见网页设计错误的帖子。

在结束

我希望这些有效的设计原则能够帮助您进行设计工作，无论您是网页设计新手还是希望在设计方面做得更好！同样，我们可以回顾许多原则，但这些是尝试在我所有网站设计中实施的前 3 条原则。

如果您有任何其他设计原则想要分享，请在下面的评论中告诉我们！

明天：每个网站构建需要关注的 3 个重要设计领域

既然我们已经介绍了如何准备好我们的心态，如何学会更好地看待设计，并且已经了解了一些基本的设计原则，我们的最后一篇文章将探讨网页设计的一些最重要的方面，以重点关注每个网站建设。直到那时！

请务必订阅我们的电子邮件通讯和 YouTube 频道，这样您就不会错过重大公告、有用提示或 Divi 免费赠品！