如何从零开始设计网页，9个网页设计入门技巧

网页设计是指在互联网上显示的网站的设计。它通常指的是网站开发的用户体验方面，而不是软件开发。网页设计曾经专注于为桌面浏览器设计网站。好的网页设计将概念性的东西转化为视觉效果。图像、排版、颜色、文字、负空间和结构结合在一起，不仅提供了用户体验，而且提供了交流思想的渠道。那么如何设计一个优秀的网页？以下是你需要了解的一些网页设计基础知识。

一、网页设计的三种类型

网页设计有三种类型，具体来说是静态、动态或CMS和电子商务。选择什么样的网页设计取决于企业的种类和企业家的需要。这些网页中的每一个都可以在不同的平台上设计和开发。

1. 静态网页设计

当你只需要在你的网页上有几个页面，并且不需要改变数据时，静态设计是最好的。静态网页上的信息和以前一样，在时间过程中没有发生变化。静态网页是用HTML、CSS和Java制作的。它们很容易创建，并且很容易被搜索引擎抓取。

无论如何，它们在整合复杂的特征和高功能方面是软弱的。另一个重要的困难是，静态网页是手动更新的。这是一个繁琐而耗时的任务。

2. CMS或动态网页

一个动态的网页设计可以传达动态数据。这意味着依靠发生的变化；网页数据根据几个标准自动更新。其设计是在内容管理平台或CMS上创建的，主要的障碍是，这种网页很难设计。

3.电子商务网页

如果你有一个涉及销售的商店，那么你需要一个电子商务网页或电子商店。一个体面的电子商务平台鼓励你处理网页的所有技术部分。

一个小企业的网页应该有一个独特的外观，可以把它与互联网上的任何其他网页区分开来。这对那些负担不起专业网页设计师的企业来说是一个很好的设计。

这种类型的网页设计非常适合那些不想在网页上花很多钱的人。因为它不太复杂，个人或企业可以用它来创建一个个人网页，以达到其目的。

二、如何学习网页设计

1. 理解视觉设计的关键概念

线条
版面中的每一个字母、边框和分割都是由线条构成的，这些线条构成了它们的大结构。学习网页设计意味着理解线条在版面中创造秩序和平衡的应用。

形状
视觉设计中的三种基本形状是正方形、圆形和三角形。正方形和长方形适用于内容块，圆形适用于按钮，而三角形通常用于伴随重要信息或行动呼吁的图标。形状也有一种情感，正方形与力量有关，圆形与和谐和舒适有关，而三角形与重要性和行动有关。

纹理
纹理复制了现实世界中的东西。通过纹理，我们可以了解到某样东西是粗糙还是光滑。纹理可以在整个网页设计中看到。从像纸一样的背景到高斯模糊的色彩，要注意不同种类的纹理，它们可以使你的设计更加有趣，并且可以给它们一种物理感。

颜色
为了创造出不影响眼睛的设计，你应该对自己进行色彩理论的教育。了解色轮、互补色、对比色，以及不同颜色所代表的情感，将使你成为一个更好的网页设计师。

网格
网格起源于最早期的平面设计。它们在为网页设计中的图像、文本和其他元素带来秩序方面发挥了巨大的作用。学习如何使用网格来组织你的网页布局。

2. 了解HTML的基础知识

超文本标记语言（HTML）为一个网站的内容、图像、导航和其他元素如何在别人的网络浏览器中显示提供了指导。尽管你不需要成为HTML的专家，但熟悉它的工作原理还是有帮助的，即使你使用的是像Webflow这样基于视觉的设计平台。

HTML标签是浏览器用来生成一个网站的指令。标题、段落、链接和图片都是由这些标签控制的。你会特别想知道H1、H2和H3标签等标题标签是如何用于内容层次结构的。除了影响布局结构外，标题标签对于网络爬虫如何对设计进行分类非常重要，并影响它们在有机搜索排名中的显示方式。

3. 理解CSS

CSS（或层叠样式表）为HTML元素的显示方式提供了样式和额外的指示。诸如应用字体、添加填充物、设置对齐方式、选择颜色、甚至创建网格等，都可以通过CSS实现。

了解CSS的工作原理将使你拥有创建独特外观的网站和定制现有模板的技能。让我们来了解一下CSS的几个关键概念。

CSS类
CSS类是一个属性列表，它与单个元素的造型结合在一起。像正文这样的东西，其字体、大小和颜色都是一个CSS类的一部分。

CSS组合类
组合类是建立在一个现有的基类之上的。它继承了所有可能已经存在的属性，如大小、颜色和排列。然后，属性可以被改变。组合类可以节省你的时间，让你设置一个类的变化，你可以在网页设计中的任何地方应用。

在学习网页设计时，了解CSS的工作原理是至关重要的。正如在关于HTML的章节中提到的，我们建议你到Webflow大学去看看更多关于CSS的工作原理。

4. 学习用户体验的基础

用户体验是将网站带入生活的魔法，将它从一个静态的元素排列转变为与滚动浏览的人的情感相联系的东西。

色彩方案、内容、排版、布局和视觉效果都是为了服务你的受众。用户体验设计是关于精确和唤起情感的。它不仅为人们提供了一个顺利的旅程，而且提供了一个将他们与网页设计背后的实体或品牌联系起来的体验。

这里有一些你需要知道的用户体验原则。

用户角色
网页设计意味着了解终端用户。你应该学习如何做用户研究和如何创建用户角色。此外，你还需要知道如何利用这些信息来创造一个为他们的需求而优化的设计。

信息架构
没有清晰的组织，人们会感到困惑并跳出。信息架构和内容映射提供了一个蓝图，说明网站和每个部分将如何共同提供一个清晰的客户旅程。

用户流
构建用户流可能会在你从事更广泛的设计项目时发挥作用，但如果你开始考虑这些，并在早期设计中构建它们，你会在将来有更好的发展。用户流传达了人们将如何在一个设计中移动。它们帮助你确定最重要的部分的优先次序，并确保人们能够访问它们。

线框图
线框显示了网页上的标题、文本、视觉效果、表格和其他元素的位置。即使你正在建立一个简单的单页网页设计，绘制一个线框图将给你一个坚实的指导来工作。当你转向更复杂的网站时，线框对于创造一致的体验、结构化的布局以及不遗漏任何需要包含的东西是至关重要的。

原型设计
原型可以有不同程度的保真度，但可以作为一个功能设计的代表。图像、交互、内容和其他重要的元素都已经到位，并复制了真实世界的设计。在整个过程中，原型被用来获取反馈并对设计进行微调。

5. 熟悉用户界面

用户界面是将一项技术付诸行动的机制。一个门把手就是一个用户界面。汽车收音机上的音量控制也是一个用户界面，你的另一半一直在那里捣乱。而你在自动取款机上输入密码的键盘也是一个用户界面。就像现实世界中的按钮和其他机制允许人们与机器互动一样，网站上的用户界面元素也允许人们将行动付诸实施。

6. 了解创建布局的基础知识

我们的眼睛会自动捕捉到某些设计模式，从而使网页设计的路线变得简单。我们凭直觉知道该看哪里，因为我们在生活中消费媒体的时候，已经反复看到了这些相同的模式。了解设计模式将帮助你创建内容和视觉效果都很流畅的网站。你需要了解的两种常见的网页布局模式是Z型模式和F型模式。

Z-模式
对于文字、图片和大量负空间的布局来说，Z型模式是浏览网站的一种有效方式。当你开始注意你的眼睛在设计中的走向时，你会马上意识到Z型图案的存在。

F型图案
大量使用文字的设计，如在线出版物或博客，通常遵循一个明显的F模式。在屏幕的左侧，你会看到文章或帖子的列表，而在页面的主体部分，你会看到一排排的相关信息。这种模式的优化是为了给人们提供他们需要的所有信息，即使他们是快速浏览。

7. 学习排版知识

字体可以传递不同的音调或情感，也可以影响可读性。如果你正在学习网页设计，知道如何使用排版是至关重要的。

排版在网页设计中具有几个目的。首先，它的功利性目的是使内容清晰可读。但它也可以作为装饰，有品味地使用风格化的排版可以增加整体的美感。

这里有三个你应该知道的基本排版概念。

有衬线字体
有衬线字体有被称为衬线的细小线条，使每个字母都显得优美。这种字体风格可以追溯到印刷业。

无衬线字体
顾名思义，无衬线字体缺乏衬线字体的识别线条。这些字体可以在网站和应用程序的数字领域中找到。

显示字体
显示型字体通常用于标题，可以是大而有影响的，也可以是由尖锐的细线组成的。它们通常有复杂的字母形式，旨在抓住别人的注意力。

8. 将你的知识付诸行动并建立一些东西

从一个简单的项目开始。也许你认识的某个人在创建作品集方面需要帮助，或者有一个副业，但缺乏任何形式的网络存在。提出为他们免费设计一些东西。

为一个假的公司或企业建立一个网站是另一个有趣的创造性练习，以发展你的设计能力。此外，你还可以把它添加到你的作品集中。

9. 找一个导师

导师是很有价值的，因为他们已经在你所在的地方--在最开始的时候--并且有意愿通过他们所学到的来之不易的教训来帮助你。他们有很深的专业知识和知识井。他们是获得对你工作的反馈的重要资源，可以找到你做得对的地方和需要改进的地方。

在寻找合适的导师时，要确保你找到的是做你所欣赏的设计类型的人，而且是你想学习的专业领域。导师可以从多年的从业经历中给你一条清晰的道路，这样你就不必在学习网页设计时跌跌撞撞了。

以上就是网页设计的一些基础知识，了解了这些，你就可以尝试自己设计网页了。在网页中你需要添加大量图片丰富你的网页，不要忘记使用美图秀秀编辑你的图片！