1 网站设计历史

在过去的 30 年里，网站设计发生了很大变化。CERN launcehd the有史以来第一个网站1991 年。

与 90 年代初的大多数网站一样，它是基于功能的——以白色背景上的纯文本欢迎我们。

然而，随着互联网的普及，网页设计也越来越受欢迎。网站设计包括访问者在网站上看到的内容并与之互动的内容。

你还记得 90 年代末的主页吗？四四方方的样式、花哨的色彩和有限的字体，以及没有清晰的文本定位，使这些早期网站类似于贴在看板上的 Word 文档和照片的拼贴画。

虽然这个五颜六色的万花筒在当时是创新的，但现代网页设计从那时起已经走了很长一段路。

Web 3.0 更进一步，允许执行。这意味着访问者可以与程序或应用程序等网站互动。

现在，Web 正在转变为共生 Web （Web 4.0），它允许用户与网站、应用程序和平台进行定制的自学交互。

随着互联网使用从计算机转移到移动设备，响应式网页设计也成为访客体验的一个重要因素。

2 网站设计原则

网页设计使网站具有吸引力、互动性和功能性。好的网页设计可以让访问者以美观的方式轻松快速地找到有价值的信息。在开始网页设计时，需要牢记一些关键原则：

• 研究 UI UX

用户体验 （UX） 和用户界面 （UI） 设计是网站设计的重要组成部分。

UX 设计侧重于为网站用户创造无缝体验，而 UI 侧重于视觉方面。

在美学和功能之间取得适当的平衡是优秀网页设计的关键。进行研究并了解网站访问者的需求将帮助您设计一个不仅引人入胜而且易于使用的网站。

• 风格

网站的风格是基本的，因为它提供了网站的框架。此网站设计原则描述了网站元素的相对位置。构成这种风格的最重要因素是：

早在 2000 年代初期，网站的主要元素包括带有子页面选项卡的导航栏、页面标题和徽标。

起始页通常被命名为首页，以向访客显示他们已登陆主页面。早期的网页设计是基于表格的、描述性的和以文本为中心的。它代表称为 Web 1.0 的“只读 Web”。

在过去的 14 年里，我们大部分时间都在使用Web 2.0 网络;专注于观看、阅读和写作。

• 导航栏

  页眉（带有可选的标题和徽标）
  网站页脚
  （可选）部分
  

尽管导航栏仍然位于 80% 以上的网站的顶部，但灵活性正在不断提高。将汉堡按钮（三条粗体水平线）清晰地放置在右上角，在下拉菜单中打开所有其他页面，除了将导航置于页面中间的较低位置之外，还是一种较新的方法。

通常，网站页脚保留用于法律信息、免责声明、社交媒体联系人和其他链接。半个世界在导航栏的右侧显示联系信息。这就是为什么大多数网站模板在联系人页面的导航菜单中已经有一个空格的原因。

3 布局和规划

标准样式背后的想法是为访问者提供全面的概述。页面上的所有元素都有一个专用空间，这与早期网站设计中使用的类似于拼凑图案的风格不同。

• F 型

在西方文化中，人们倾向于以“F”模式从左到右、从上到下阅读。当我们的眼睛从左向右移动时，放置在右侧的任何东西都会获得更多关注。

在规划内容和布局时，请务必考虑这一点。还有许多与此相关的趋势，例如将徽标放置在左上角作为标准做法，或者至少在中上部预期它们。

• 布局

在网页设计中，布局描述了网站的主要元素在屏幕上占据的空间。

它们可以放置在带边框的中间位置，也可以占据整个屏幕 - 就像 Word 文档中的标题一样，单词之间的间距或宽或窄，被放置在中心或左侧。

• 单柱设计

在此布局中，页面的内容布局在占据大部分屏幕的单个列中。由于其简单性，它是最常用的布局类型。

它特别适合在移动设备上显示内容。这使得它在当代网页设计中非常受欢迎。

• 分屏设计

有时，有必要将多个同等或类似重要性的内容并排呈现。

此布局的常见格式是用图像补充文本框或将文本划分为多个列。使用两个顶部或下方有文本框的图像来分割屏幕也可以同样有效。

这种布局的变化可以通过以不同的比例划分屏幕来实现，例如 50：50。

我们经常可以在在线商店的网页设计中看到这种类型的布局，其中信息与产品图片本身。

• 卡片网格设计

这种类型的设计在 Pinterest、Facebook 和 Twitter 等网站上流行起来。

卡片网格设计类似于表格上成行排列的卡片。卡片是带有可选短文本标题的图像或符号，只需单击一下即可将读者引导至更详细的页面。

卡片网格设计中使用的图像使识别页面的不同内容变得容易。它使浏览和选择信息更易于访问和愉快。

有两种类型的网格布局：

		基于相同大小的卡片 - 例如方形网格
		基于不同大小的卡片 - 因此网格的行高度不同

• “首屏”和“首页”

在屏幕上打开网站后，我们会看到导航栏、主要标题图像、标题，可能还有一些介绍性文本。如果我们想看到更多，我们需要向下滚动。

我们从网站看到的没有向下滚动的内容被称为 “首屏”。其他一切都是 “非首屏”。现代网页设计将最重要的元素放在首屏之上。

为了吸引访问者的注意力，请将每个网站页面的最佳和最重要的元素放在顶部，以便无需滚动即可看到这些元素。

标准的样式和布局给网站一个外观，但好的网页设计也需要实用。我们喜欢快速轻松地找到我们想要的东西。因此，好的网页设计意味着功能性。