Web 创建者和设计师需要一种更简化的方式来学习 Web 设计的基础知识，但让我们说实话——简化流程不仅仅是为初学者准备的。处理多个客户的高级设计师也需要熟悉基础知识，这样他们才能利用肌肉记忆构建网站，并交付项目。

五个网页设计基础

1. 了解网站结构和样式

2. 使用响应式设计为不同的屏幕尺寸创建

3. 填充和控制内容

4. 使用不同的布局工具

5. 添加交互和效果

• 01. 了解网站结构和样式

  什么是好的网站设计？坦率地说，很多事情，但坚实的结构和品牌是基线。首先，结构。如果没有视觉层次结构，网站元素之间就缺乏关系，用户可能会发现很难理解页面上哪些信息最重要。当我们说 “层次结构” 时，我们指的是  页面上元素的 HTML 结构。

  了解这些关系使设计人员能够掌握控制网站的各个方面并创建他们希望用户体验的行为所需的知识。

  为网站建立有凝聚力的品牌标识同样重要。在添加样式时，了解网站配色方案和排版是关键。您可能知道，这些因素对于传达网站品牌以及确保网站内容的可访问性和可读性至关重要。学习如何有效地应用它们（通常在设计系统的帮助下）使设计师能够大规模创建品牌的在线形象。

• 02. 使用响应式设计创建不同的屏幕尺寸

  设计师需要创建流畅的网站，这些网站的外观和功能会根据他们正在查看的设备进行调整。您可以通过响应式设计来实现这一点。

  但是响应式网页设计的基本原理是什么？断点是第一个需要熟悉的概念。断点表示一系列屏幕大小。

  使用流体测量单位、停靠和定位，您可以使网站元素移动和调整大小，甚至在断点之间也是如此。

  您可以在我们的完整指南中  了解有关响应式设计与自适应设计的更多信息。

• 03. 填充和控制内容

  在创作者应该了解的所有网页设计原则和元素中，可以说最重要的是那些赋予网站个性的原则和元素。这意味着您需要了解如何填充和控制内容。内容使线框栩栩如生，可能性是无穷无尽的。但是，有一些概念你可以适应，以掌握内容。

  我们已经讨论了排版的相关性，但适当的文本大小和比例可以让您选择的字体在不同的屏幕尺寸上发挥作用。除了决定网站文本的可读性外，您根据屏幕大小让文本增大和缩小的能力也是响应式体验的关键组成部分。

  从 PNG 到 SVG 的媒体和装饰元素也至关重要。他们创造了每个站点的视觉故事。除了设计、调试或采购媒体的第一步之外，了解如何将它们添加到网站以及如何控制它们的外观和行为是不可或缺的。无论是调整它们的颜色、不透明度、大小，还是为它们制作动画，精通为网站增加兴趣的不同方式都是一项关键技能。

  不过，网站内容不仅仅是为了美观。菜单和按钮是您应该了解的导航内容类型。这些使网站访问者能够采取行动并与网站互动，使它们成为设计师的基础。

• 04. 使用不同的布局工具

  网站可以在不可用的情况下运行。大多数糟糕的 UI 背后是不适当的网站布局：。如果一个网站缺乏一种清晰的方法来浏览其组件和内容，用户将不可避免地感到困惑，或者更糟糕的是，感到沮丧。为了解决这个问题，了解您可以使用的网站布局工具是最好的武器。

• 05. 添加交互和效果

  这个行业已经走了很长一段路，您可以在 Web 上找到正在使用的交互，并且无代码版本越来越受欢迎。
  
  

除了为网站增加吸引力外，交互还为网站访问者的参与提供了途径。单击和悬停交互是 2 个强大的选项。通过应用它们，甚至将它们组合起来，互动元素的世界就是你的牡蛎。