想象一下走进一家零售店寻找一些新的工作服。当您环顾四周时，您注意到地板上有污渍、杂乱无章的架子和奇怪的气味。您会留在商店并从零售商处购买吗？

商店设计会影响顾客的行为方式——网站也是如此。

为什么好的网页设计很重要？

当新的潜在客户访问您的网站时，它会给他们留下第一印象，从而影响他们未来与您的品牌的互动。正是在这一点上，他们形成了对你的第一印象。

您的网站还传达了您品牌的身份、愿景和在行业中的地位。如果您有类似产品的密切竞争对手，一个让人惊叹的网站会让您更加难忘，并在竞争中提升您的品牌知名度。

有效网页设计的 15 条原则

当我们提到“网页设计原则”时，我们指的是设计网站或网页的结构和视觉元素的一般规则。每个品牌都采用不同的网页设计原则——有些符合最佳实践 ，有些则不符合。

为了帮助您打造出色的网站，这里有 15 条网页设计原则（以及有效使用这些原则的网站示例）：

1. 网页应该易于浏览

很多用户将网站导航视为“最重要的网站功能”。 这并不奇怪，因为如果搜索引擎用户来到您的网站寻找有关“移动设计”的信息但找不到，下一步自然是单击“返回”并尝试另一个网站。

您如何接受精心策划的导航？从 The Cool Club 的网站中汲取灵感。

进入Cool Club的首页，网站的布局一目了然。您可以使用左侧的按钮导航到关键产品部分（如“纸牌游戏”和“遗愿清单”），也可以使用右侧的按钮导航到“关于”和“联系”页面。

2. 善于利用“负空间”

负空间（或“空白”）是页面主题周围的区域，无论它们是图像、视频、文本还是按钮。

许多热心的营销人员争先恐后地填补页面上的每个空闲空间，希望为访问者提供更多信息可以让他们更加投入。然而，这通常会导致页面过于庞大和混乱。

这就是负空间的用武之地。使用负空间强调每个页面最关键的元素，因为缺乏颜色会将访问者的眼睛吸引到更明亮的区域。

当然，“使用负空间”并不意味着“创建一个无聊的白色网站”。相反，您可以像 Garoa 一样使用您的品牌颜色来利用空间。

Garoa 的主页使用类似奶油色的调色板来营造氛围，同时仍然利用负空间。结果是你的眼睛会转到中间“秋季护肤”部分的介绍内容，而不是不太重要的部分。

确保利用空白来展示您自己网站中的层次结构。

3. 页面应该一致，但引人入胜

当您读到“Cadbury”、“Hershey's”或“Nike”等品牌名称时，您可能会立即想到它们的徽标、字体和设计风格。这就是一致品牌的力量。

在设计您的网站时，使用一致的元素制作页面，为您的品牌提供清晰的视觉识别。这意味着：

• 在标题中使用相同的字体、样式和颜色
• 保持页面之间视觉元素之间的空间相同
• 使用调色板而不是随机颜色
• 为新闻文章和博客文章等长篇内容设置布局指南
• 对所有页面使用网站模板

一致的页面不需要看起来完全统一。相反，您可以通过混合元素来平衡一致性和参与度。

例如，您可以为 H1、H2 和 H3 标题使用不同的字体和颜色。或者，您可以更改不同类型页面的布局，以混合使用。

4. 拥抱互补色

互补色是一对颜色，您可以混合使用它们而不会使您的设计看起来过于难看和丑陋。

颜色在屏幕上的显示方式遵循红色、绿色和蓝色 (RGB) 颜色模型，而不是印刷中使用的青色、品红色、黄色和黑色 (CMYK) 模型。画家还经常使用红-黄-蓝 (RYB) 颜色模型，该模型将互补色视为红-绿、蓝-橙和黄-紫。

无论您喜欢哪种模式，使用互补色都可以达到与黑色和白色类似的目的。互补色强调并为您的品牌创造清晰的视觉识别。

你可以在 Swab The World 的网站上看到这个。

在下面的截图中，血癌慈善机构使用了绿色和洋红色调。当您访问不同的网站部分时，这些颜色会变为其他互补色组合（尽管所有颜色都具有相似的饱和度，因此品牌保持一致）。

互补色是在您的设计中使用的一个简单原则。如果你想保持简单，选择两种互补色并将它们添加到对比元素（如 H2 和正文）。或者在每页上使用每种颜色的多种色调。

5. 设计时考虑到你的目标受众

个性化是网页设计的最终目标。我们大多数人都喜欢从我们认为符合并代表的品牌购买产品和服务。事实上，研究表明，72%的消费者重视从“符合他们的信仰和价值观”的公司购买商品。因此，如果有人访问您的网站并看到他们的价值观、目标和优先事项反映在那里，他们就更有可能向您购买。

要为您的受众个性化您的网站设计，请考虑：

• 哪些图像与您的目标市场产生共鸣，
• 哪种语气适合您的听众（例如，专业、简约、活泼等）
• 您的目标市场访问您的网站要查看哪些主题
• 如何通过网页设计传达品牌定位
• 您的受众会响应哪些号召性用语 (CTA)

如果您可以使用网站自动化根据用户的个人资料和之前与您的品牌的互动来提供个人体验，则可获得加分。

从向目标人群销售不同产品的竞争对手或品牌那里汲取灵感可能会有所帮助。

6. 字体应该是可读和可访问的

您在网站上使用的字体 决定了访问者是否可以阅读您写的内容。可以肯定地说，它们非常重要。

选择字体时首先要考虑的是网络安全。 操作系统和网络浏览器支持网络安全字体，因此它们适用于大多数设备。

7. 遵循费特定律和希克定律

在网页设计或用户体验（UX）方面，人们点击较大的按钮会花费较少的时间，而点击较小的按钮则会花费更多的时间。因此，为了利用菲特定律，你应该让你的CTA按钮变得非常大和突出，以便它们更容易被点击。

这里的 "简单 "是关键。由英国心理学家威廉-埃德蒙-希克和美国心理学家雷-海曼提出的希克定律说，人们每次决定一件事时都会感到疲劳。

因此，你要求网站访问者做出的决定越多，他们就越有可能因疲劳而无法继续下去。

8. 使用不变性来突出关键信息

当某些东西“不变”时，它会从几个非常相似的选项中脱颖而出。不变性最明显的例子是在定价页面的计划中突出显示，例如来自 Box 的这个。

9. 在 CTA 中：使用人们想要点击的清晰语言

我们谈到了使按钮变大且易于点击的重要性，但在创建按钮时，大小并不是您应该考虑的唯一因素。

可点击的按钮同时具有描述性和说服力。他们让访问者对按钮链接的内容感到好奇，并给他们一个去那里的理由。

一种方法是使用详细的按钮文本，例如“单击此处阅读我们的博客”、“在此处查找我们的营销秘诀”或“这是我们的 2022 年报告”。另一个是让你的按钮在视觉上令人兴奋或独特。

10. 利用F模式或Z模式

13 年来，Nielsen Norman Group (NN Group)的研究人员 使用眼动追踪来了解 500 多人如何与内容互动。这导致他们开发了 F 模式，即人们做的第一件事是向下浏览页面，然后他们从左到右阅读。像这样：

您可以通过围绕 F 模式或替代模型构建内容来在您的网站上利用 F 模式。

Facebook 以在其主页上使用 Z 形图案而闻名。当您访问该页面时，您的眼睛会先看到“Facebook”徽标，然后是“登录”按钮，然后是左侧的图片，最后是“创建帐户”按钮。

11. 好的网站速度快且适合移动设备

截至 2021 年第四季度，全球54.4% 的网站流量来自移动设备。因此，如果您的网站不适合移动设备，您可以将流量减半。

速度也会影响有机网站流量。谷歌的研究表明， 如果网站加载时间超过三秒， 53%的人会离开该网站。

使您的网站移动友好或快速的最简单方法是选择 由专家设计师制作的快速网站主题。或者，如果您想更多地参与网站的设计，您可以定制一个响应式网站。

12. 少用长文本

考虑一下：您搜索“智力游戏”并找到一个看起来很有希望的网页。但是，当您单击它时，您会被难以阅读的大块文本所淹没。

像许多人一样，您可能会点击关闭该网站（无论内容多么有前途！）。

密苏里科技大学的眼球追踪研究表明，网站访问者平均花费5.59 秒 阅读文本。因此，如果人们无法在那个时间跨度内阅读您的文字，您就不太可能正确地吸引他们。

通过将文本分成小块来解决此问题。此外：

• 使用短句
• 远离俗语
• 为您使用的任何行业特定词提供定义
• 避免“紫色散文”（不必要的隐喻、副词和形容词）

13. 使用网格

当我们说“使用网格”时，并不是说您应该让您的网站看起来像 Excel 表格。相反，将您的网站划分为不同的部分以服务于特定目的，以便访问者可以快速找到内容。

您不需要使用网格线来执行此操作。相反，像 Atlason 所做的那样，用颜色、负空间和阴影来区分网格空间。Atlason 的主页在网格中展示了新的和最畅销的产品。由于访问者可能正在寻找这些产品，因此网格可以帮助他们在几秒钟内找到它们。

14. 记住平衡

在网页设计的背景下，“平衡”指的是设计元素之间的关系以及元素是否和谐。有很多方法可以在您的网站上创造平衡，包括以下一些网页设计原则：

• 对称（包括双边、径向或平移对称）
• 使用互补色或对比色
• 使用相似形状和大小的元素
• 使用重复模式

您可以在 Woven 的网站上看到实际的平衡。本网站使用平衡的调色板，黑色和白色在文本中形成对比，并使用对称来吸引访问者对内容的注意。

15. 注意细节

格式塔理论认为，人们在查看单个元素之前会将事物视为一个整体。或者，就像 Kurt Koffka 所说：“整体独立于部分而存在。” 尽管人们通常在心理学方面参考格式塔理论，但它也适用于网页设计。

您需要注意网站上的小细节，以确保您的设计看起来完美且完整。在设计内容时，很容易将注意力集中在标题、图像和 CTA 等重要元素上，而忘记其他内容，例如：

• 页脚和页眉图标
• 社交媒体按钮
• 文字间距
• 拼写错误和语法错误
• 浏览器兼容性
• 图片尺寸

在点击“发布”之前仔细检查这些元素，确保您的网站传达出专业性。您可能会忽略小瑕疵，但访问者不会。

此外，了解网页设计原则中的新趋势和概念。将这些添加到您的网站将使它看起来新颖、新鲜和引人入胜。

总结：

建立一个具有视觉吸引力的网站，不仅仅是一个有趣的项目。它可以帮助你：

• 传达企业精神

• 与你的访问者建立信任

• 从你的竞争对手中脱颖而出

• 吸引来自搜索引擎的有机流量

利用这篇文章中的网页设计原则，希望您可以建立一个让访问者说 "哇 "的网站~

文章写完了，我们很想听听各位读者的意见。当你访问一个品牌的网站时，你会注意到什么？此外，你是否在你的网站上使用我们没有提到的任何原则？欢迎在下面的评论中告诉我们。

更多优质内容持续更新中，极简慕枫-Global，帮助更多创新型企业实现品牌全球化！