自1991年第一个网站发布以来，网页设计已经取得了长足的进步。如今网际网络上有超过10亿个实时网站，这个行业继续存在也就不足为奇了。 

01. 什么是网页设计？

网页设计是在网站上规划和安排内容的艺术，以便可以与世界共享和在线访问。网页设计结合了美学和功能元素，决定了网站的外观（例如其颜色、字体和图形）以及塑造网站的架构和用户对其的体验。

今天，建立网站是拥有在线形象的支柱之一。正因为如此，网页设计的世界一如既往地充满活力。它不断发展，包括行动应用程序和用户界面设计，以满足网站所有者和访问者不断增长的需求。

网页设计通常是一个协作过程，它结合了相关行业的知识和工具，范围从图形设计到 SEO 优化和UX。网页设计师通常会将来自这些领域的专业人士聚集在一起，他们可以优化性能并专注于更大的过程和结果。

02. 网页设计与网站开发

我们网页设计之旅的第一步是澄清网页设计和网站开发之间的区别，因为两者密切相关并且经常（错误地）互换使用：

网页设计是指特定网站的视觉设计和体验方面。在本文的其余部分，我们将深入探讨有关网页设计的更多细节。

网站开发是指网站架构的建立和维护，涉及确保网站正常运行的复杂原始码系统。

以下是 Web 开发人员架构网站时最常用的软件语言：

HTML或超文本标记语言，是一种用于建立网站前端的原始码语言。它被编写为包含网页的架构，并由网络浏览器执行到我们在线看到的网站中。

CSS或级联样式表是一种编程设计语言，包括与网页显示相关的所有相关讯息。CSS 与 HTML 一起设计网站或页面的样式和格式，包括布局、字体、填充等。

CMS 或内容管理系统，是一种管理网站数字内容的计算机软件应用程序。

03. 网页设计工具

网页设计师需要他们自己独特的一套工具来建立和设计。有几个关键元素将决定您将使用哪些类型，以及您在哪个阶段需要它们。

这里有几个问题需要考虑： 你的团队有多大？你有什么样的预算？您的网站需要什么样的技术要求？您希望实现的整体美感是什么？您会建立自适应或响应式设计吗？你的网站的目的是什么？这些问题的答案还将帮助您了解您想要使用哪种网站构建器或其他设计软件工具。

像Wix这样的网站构建器很棒，因为它们不需要原始码，并且配备了一系列适用于每个行业的现成模板。对于新手网页设计师，网站架建者是一个很好的基础工具，可以很容易地在视觉元素和功能方面进行定制。对于更有经验的网页设计师来说，Editor X是理想的平台，具有更高级的布局、互动、效果和设计资产功能。

Figma、Photoshop和Sketch等设计软件工具可用于建立线框、自定义功能和设计元素。但是，这些工具的主要区别在于所有元素都必须转换为原始码。虽然这些工具为 Web 开发人员提供了创造性的灵活性和协作集成（如移交功能），但它们可能需要更多的时间、知识和资源。

随着您在一系列网页设计工具方面获得更多经验，您就会知道哪些最适合您和您的业务需求。

04. 网站设计原则

了解什么是网页设计的首要部分之一是了解什么是好的网页设计——以及如何实现它。

我们可以看看设计原则以供参考，这是艺术家和设计师实践的一种理论，它概述了任何构图应达到的视觉质量。将这些原则应用于网页设计可以帮助初学者和高级网页设计师实现具有和谐外观和感觉的网站。

当然，这些并不是要遵循的严格规则，而是了解我们如何应用网站设计的各种元素的指南。引用毕卡索的话，「像专业人士一样学习规则，这样你就可以像艺术家一样打破它们。」 一旦您了解了网页设计的目标并对每个网站元素变得更加熟悉，您就可以通过更具创造性的方式来调整方法。

让我们探讨以下原则：平衡对比强调移动韵律等级制度空白统一

平衡

视觉平衡意味着确保单个构图中的任何元素都不会过于强烈。这可以通过在网页中心绘制一条假想线并排列元素以使两侧的视觉重量相等来应用于网页设计。

有两种主要方法可以在网站上实现平衡：

对称平衡是当该线两侧的视觉重量相等并像镜像一样排列时。当应用于您的网页设计时，这可以唤起平衡、美感和一致性的感觉。

不对称平衡是指两边的视觉权重相等，但元素的组成和顺序会有所不同（即不是镜像）。平衡的不对称设计被认为是一种现代方法，将为观众创造更具活力的体验，同时保持和谐的构图。

对比

对比是指以突出它们差异的方式排列元素：黑暗与光明、光滑与粗糙、大与小。当图片中有对比时，它的戏剧性和令人兴奋的质量可以在访问者滚动浏览您的网站时吸引他们。

强调

强调原则提醒我们，并非所有网站元素都是平等的。无论是您的徽标、CTA还是图片；如果您的网页上有一些内容是访问者应该首先注意到的，那么应用强调原则并使用明亮的颜色、动画或大小将确保它成为您构图的主要方面。

移动

当应用于网页设计时，运动是引导访问者从一个元素到下一个元素的东西。通过控制单个网页组成上元素的大小、方向和顺序，您可以引导查看者的视线在整个网站上移动。

韵律

节奏是指元素的重复，以创造一致性、凝聚力或放大某个讯息。重复特征，例如您的徽标、品牌颜色和使用相同的字体，也将加强您的品牌形象和在网络上的存在。

等级制度

将您的公司名称放在主页底部只是糟糕的网页设计实践。你能猜到为什么吗？首次访问者必须一直向下滚动您的网站才能知道您是谁。这是我们从层次原理中理解的，它告诉我们最重要的内容应该放在显眼的位置，让访问者立即看到并与之互动。

留白

在艺术和设计中，任何没有视觉元素的构图区域都被称为空白（psst：即使它实际上不是白色的）。这似乎不是一个需要注意的关键事情，但是在网页设计中有意识地安排留白会让网页的视觉元素有呼吸的空间。它还可以帮助您实现构图中的其他目标，例如层次结构、平衡、重点等。

统一

Unity 是您添加到站点的所有单个元素的最终效果，理想情况下会产生一个和谐的组合。网页设计统一的目标是确保访问者不会感到不知所措、困惑或离开您的网站。

可能需要多次尝试才能正确完成，但是一旦您实现了统一的网页设计，您就可以确保您网站的每个方面都在其功能和性能中发挥重要作用。这也意味着要注意您包含哪些元素、放置它们的位置和方式，以及它们是否真正用于某个目的。

05. 网站布局

规划您的网站布局就像设置其基础，因为它将决定您网站每个页面上视觉元素的排列和顺序。网页设计中的这一关键步骤在网站的视觉外观、可用性水平和放大其信息方面发挥着重要作用。

网站的最佳布局取决于多种因素：网站的目标、想要传达给浏览者的讯息以及将包含的内容类型。虽然没有「一刀切」的解决方案，但您可以采取两个主要方向：

适应您的内容的布局：您选择的布局应该适合内容类型。例如，如果您想要一个展示产品的布局，您可能会选择一个留有足够空间来突出显示图像的布局。另一方面，部落格布局需要以有组织的方式传达新讯息。

常见的布局：有很多久经考验的网站布局。这些对用户来说往往很熟悉，因为他们建立在他们现有的期望或其他网站的过去经验之上。由于它们可能会产生更直观、易于使用的界面，因此它们非常适合初学者。

在设计您自己的网站时，您可以使用各种类别的网站模板来为您的网站布局提供可靠的基础设施。如果您想从头开始设计布局，我们建议您使用线框开始。此过程将允许您在实施过程之前起草您的网站布局。

06. 网页设计的功能组件

网站功能本质上是指您的网站如何运作；从它的速度和易用性，到可以对其执行的具体操作。

冒着与自己约会的风险，当我想到与 90 年代相比（我可以在后台听到AOL 的拨号信号）今天的网站运行速度和效率时，我想起我们已经走了很长一段路。鉴于整个网页设计行业的进步，利用可用的现代工具来保证我们的网站性能良好且易于使用符合我们的最大利益。

让我们回顾一下会影响您网站功能的网页设计组件：导航速度搜寻引擎优化用户体验自适应设计与响应式设计

导航

单个网页设计可以由访问者查看或使用的多个页面和项目组成。网站导航可让访问者在到达您的网站后找到他们需要的网页。

在您的设计中添加导航菜单是为访问者提供流畅导航的最佳方式。网站的菜单连结到您网站上的多个项目，并通过帮助用户在不同页面和部分之间导航来为用户提供服务。

根据您网站的设计，您可以选择以下类型的菜单：

经典导航菜单：这种流行的菜单类型放置在网站的标题中，以水平列表的形式呈现。

粘性菜单：也称为固定或浮动菜单，当访问者向下滚动网站时，此菜单会保持不变。

汉堡菜单：一个汉堡包菜单是，一旦它被点击打开一个完整的菜单三个横条纹组成的图标。

下拉菜单：当访问者单击或悬停在其中一个项目上时，其中会打开一个附加项目列表的菜单。

侧边栏菜单：位于网页左侧或右侧的菜单项列表。

速度

速度衡量您的网站在访问者进入后完全加载的速度。没有人，尤其是在我们快节奏的一代，喜欢慢速网站。它必须以高速运行。事实上，研究表明，当网页加载时间超过 3 秒时，跳出率会上升38%。无论网页设计多么漂亮，除非您为访问者提供最流畅的浏览体验，否则您无法与之竞争。

许多因素会影响页面的加载时间；有些与访问者自己的设备或网际网络连接有关，而另一些可能特定于他们尝试浏览的网站。今天，有经过验证的实践和工具可以检查您网站的性能并提高其页面的加载速度。

搜寻引擎优化

SEO 或搜寻引擎优化是优化网站以使其在搜寻引擎上排名良好的过程。由于它在您网站的成功中扮演着重要的角色，我们认为它应该与功能元素一起包含在此处。能够在 Google 上找到您的人越多，意味着您使用网站的访问者就越多。

尽管 SEO 是一项持续的任务，但您可以采取一些措施来帮助您从一开始就提高网站的性能。例如，使用Wix的SEO解决方案，您网站的内置基础架构将支持积极的性能。

在点击发布之前，您还可以采取许多常见的 SEO 实践：在内容中包含标题、向图像添加替代文本、在相关页面上使用元描述以及选择代表您的品牌或业务的网域。

用户体验

自 80 年代计算机使用量激增以来，科技行业一直在探索人类如何更好地与科技互动。这是 UX 或用户体验的实践，当正确应用于网页设计时，它会对用户的旅程产生重大影响。

UX 一词通常与「用户界面」设计或「可用性」互换使用，实际上，它们实际上是更大的 UX 愿景的一部分。虽然用户体验设计师关心产品的这些方面，但他们也参与了大局，寻找完善和开发产品、品牌、设计、可用性和功能的方法。

用户体验设计的过程旨在通过改进以下七个因素来确保网站包含高质量的交互、内容、产品和服务：有用可用可查找可信的合意的无障碍有价值的

自适应设计与响应式设计

今天，行动装置占线上流量的一半以上，这使得我们的网站适应小荧幕变得至关重要。有两种类型的样式可以将网页设计从桌面版转移到行动版：自适应设计和响应式设计。了解两者之间的区别会派上用场，尤其是在选择最适合您的网站构建器时，因为大多数平台都支持两者之一：

自适应设计涉及创建同一网站的不同版本，其中每个版本都可以适应不同尺寸的屏幕或浏览器宽度。例如，使用 Wix，我们的用户可以为他们网站的桌面版安排布局，并将提供可定制的行动网站改编。

响应式设计涉及创建具有灵活网格的网站。这将创建动态外观，具体取决于用于查看它的设备的荧幕大小和方向。

07. 网页设计的视觉元素

网站的视觉元素与功能质量一样重要，它们共同塑造其整体外观和感觉。从配色方案到字体和影片，这些细节在用户体验和品牌塑造中发挥着重要作用。在本节中，我们将介绍网页设计的视觉元素，以及一些有关您自己做出美学决定的技巧：网站标题网站页脚配色方案排版网站背景意象动画

网站标题

一个网站的标题是指一个网站页面的最顶端部分，是游客看到，当他们在到达现场的第一件事。在这样的战略位置，标题通常用于显示导航菜单、企业名称、徽标或联系信息。

网站页尾

一个网站页尾位于页面的底部，被固定在网站的每个页面。由于这是访问者最后看到的内容，因此是添加和重复他们可能错过的重要信息的好地方，而不会占用过多的视觉空间。页尾也是包含联络方式、地图、电子信件或社群媒体按钮的常见位置。

配色方案

在网页设计方面，您的网站配色方案将为您的网站定下基调。不仅如此，战略性地贯穿始终的品牌配色方案可以在加强您的在线品牌方面发挥关键作用。

在确定网站的配色方案时，确定哪些色调将代表您的主色（在您的网站上占主导地位的颜色）、次要色（始终如一地使用，但比您的原色更谨慎）和强调色（以巧妙的方式使用）突出显示您网站的某些细节）。

排版

排版是指字体的视觉方面，例如字体的选择和文本的排列。作为网页设计的重要组成部分，排版可用于补充网站的美学风格，或加强整个网站的书面讯息。

在为您的网站选择最佳字体时，请考虑这样一个事实，即排版与文字本身一样重要。您需要选择可读的字体，适合您网站的风格主题，尤其是品牌。与配色方案类似，您可以选择主要、次要和强调字体来引导访问者体验您的书面内容的方式。

网站背景

为您的页面设定基调，网站背景在网页设计中起着重要作用。无论是静态的还是动画的，纯色的还是带纹理的——背景都是在访客滚动时始终如一地跟随的。

您可以上传任何图像或视频作为您的网站背景、使用品牌颜色、选择时尚的渐变背景或选择极简主题并将其保留为白色。无论您决定哪种方式，请确保它适合您网站的整体视觉主题，并在不分心的情况下吸引访问者的注意力。

为背景添加更多刺激的一种方法是实现滚动效果，例如视差滚动——专业网页设计师和初学者的时尚最爱。

意象

只需几秒钟，您网站上的一张图片就可以增强您向访问者发送的信息。这可能意味着展示您公司的产品或位置、上传活动中的照片（包括品牌网站图标），或使用图像为您的网站设计添加一些风格。

动画

网页设计的目标之一是将您的网站与其他网站区分开来。向网站添加动画是一种很好的方式，可以帮助指导用户的体验和行动。您可以在整个网站中加入动画，为观众创造更动态的体验，或触发某些反应。

例如，尝试添加一点动画到：

鼓励访问者点击的CTA按钮

为用户提供方向的箭头等元素

加载条使他们的（希望很短）等待时间更令人兴奋

您希望用户注意的事项，例如用于电子信件注册的灯箱

08. 网站维护

网页设计行业是一个不断推出新功能、工具和解决方案的行业。这个快速发展的世界的不利方面是它需要您和您的网站保持最新状态并实施网站维护计划。

完成第一个设计后，您最终必须更新您的网站以确保内容相关，并且设计不会过时。虽然看似毫无用处，但您网站上的任何过时元素都会对访问者的互动产生负面影响，从而导致整体性能和销售额下降。

至少每月检查一次您的网站，以确保没有错误、一切正常并且您的讯息是最新的。在考虑重新设计时，请考虑您可以进行哪些更改以保持网页设计的相关性、提高其易用性或增强其性能。这可能意味着添加新鲜的视觉内容、额外的页面、进行SEO或执行可访问性审核。

09. 网页设计灵感

现在我们已经涵盖了网页设计的基础知识，是时候寻找创造性的例子了。网页设计灵感无处不在，我们建议您定期浏览Behance、Awwwards和Pinterest 等网站以寻找新创意。