12个经典永恒的网站设计及布局样式

网站UI设计趋势每年都都在不断变化中，但有几种网站UI设计布局模式则经受住了时间的考验，是什么让 UI 模式永不过时？坚持网页布局最佳实践，从而将用户友好性和对不断变化的趋势和技术的适应性结合起来。，有几个标准可以使 UI 模式持久。用户友好性就是其中之一，一种“看起来很棒”但不能带来极大可用性的 UI 模式不会持续很长时间， 最有用的 UI 模式也能适应不断变化的趋势。例如，卡片式和基于网格的布局可以由UI 设计人员以多种方式实现。适应性使它们能够继续看起来现代和流行，即使它们可能已经存在多年。

1、卡片式网页布局模式
顾名思义，这些布局使用类似于各种形状和大小的物理卡片的内容块。有两种主要的布局格式。一种布局在网格上排列尺寸相同的卡片（如Toptal 设计博客主页所示），而另一种使用流体布局，将不同大小的卡片排列成有序的列但没有明显的行（如Pinterest的布局）。 卡片式布局效果很好，因为它们允许以有序的方式排列不同的内容，同时将所有部分分开。人们对卡片也很熟悉，因为他们可以从现实世界中识别出卡片形状的物品。它们在心理上是有意义的，即使人们不熟悉网站，也很容易使用。

2、分屏布局
当两个元素需要在页面上具有相同的权重时，分屏布局是一种流行的设计选择，并且通常用于文本和图像都需要突出显示的设计中。将它们并排放置而不是垂直放置或将文本覆盖在图像上是一种有意识的设计选择，可以赋予精致、简约的品质。并排放置的两个图像也很常见，有时带有文本叠加。 大多数分屏设计都相当均匀地划分，尽管有些以不同的比例划分。（33:66 或 40:60 似乎是最流行的比例；当屏幕被分成小于 ⅓ 的尺寸时，它更像是一个侧边栏，而不是真正的分屏设计。） 分屏设计特别适合电子商务网站上的产品页面。产品图片需要在这些页面上突出显示，但价格、规格、添加到购物车按钮和产品选项等基本信息也是如此。

3、大排版
自从网络出现以来，大字体就一直存在，但随着移动设计的流行，它变得流行起来。大字体在标题和标题中特别受欢迎，但也可以在某些网站的正文中看到。选择正确的字体后，较大的文本更具可读性并改善用户体验。此外，它还可以提供强大的视觉效果。它在极简主义设计中特别受欢迎，其他视觉元素大多不存在。

4、个性化
个性化算法已经存在多年，可以根据每个人的喜好定制数字体验。AI 使这些算法变得更加有用，具有建议算法等功能，现在可以准确预测一个人接下来想要观看、阅读、学习或购买的内容。

5、网格
长期以来一直是 UI 设计的一部分，从 1990 年代后期的基于表格的布局开始（尽管在此之前很久它们就被用于书籍和报纸等的印刷布局）。当 CSS 在创建布局方面变得流行时，更优雅的网格系统被开发出来，最早的显着例子是960.gs grid。 网格为设计提供视觉平衡和秩序，使人们更容易消费内容。同时，网格可以在 Web 布局中提供很大的灵活性。大多数网格系统使用 12 或 16 列，中间有装订线。一些使用基于网格的布局的网站使网格成为设计的一个突出特点。相比之下，其他的则更加微妙，网格只有在仔细检查时才会变得明显（有时只有当实际网格覆盖在设计上时）。 除了基于列的布局网格之外，基线网格还常用于网页设计中，以逻辑方式水平放置元素。例如，在检查正文和标题行之间的间距时，这在排版中最为明显。基线水平网格间距与网页设计中使用的垂直网格间距密切相关。

6、杂志风格
新闻和期刊行业严重影响了网络上杂志式的布局。在早期，它们主要出现在新闻网站和在线杂志上。随着时间的推移，它们在其他领域越来越受欢迎，现在可以在不同类型的网站上看到它们，包括电子商务网站和博客。 杂志风格的布局包括一篇特色文章（或有时采用轮播或类似格式的多篇特色文章），以及主页上的二级和三级文章。他们也往往有多个内容栏，有时分为几个部分。这些 Web 布局适用于具有大量内容的站点，尤其是那些每天添加新内容的站点。

7、单页布局
单页布局将站点的所有主要内容放在一个网页上。导航是通过滚动完成的，通常带有跳转到特定部分的快捷方式，有时还有视差滚动效果。有时，他们可能会使用次页面来显示条款和条件、隐私政策或其他不属于主要内容的信息，但这不应阻止将布局视为单页。对于内容稀疏的网站，单页网站布局是一个很好的解决方案。它们也是叙事内容的完美选择，例如交互式儿童读物。

8、F 和 Z 模式
F 和 Z 模式指的是一个人的眼睛如何在页面上移动——人们如何浏览内容。一个F-模式具有跨页面的顶部突出的内容，与在它之下对准的辅助内容在页面的左侧（大致的“F”形）。一个Z-图案具有沿着顶部突出的内容，与其它有价值的内容进一步下跌。眼睛是从页面的右上角到左下角对角绘制的（大致呈“Z”形）。 F 模式适用于内容比 Z 模式更多的页面，其中有一个非常明确的视觉层次结构。当访问者应该看到两段同等（或接近同等）相关的内容时，Z 模式更有用。

9、不对称
简单来说，不对称就是不对称。在设计中，不对称创造了更加动态和有机的视觉冲击。在大多数情况下，不对称是使用彼此不完美平衡的图像和文本造成的。不对称也可以通过背景元素来创建或加强，例如在各个页面部分之间使用不同的模式。由于不对称会产生动态、充满活力的视觉印象，因此对于想要传达这种形象的品牌来说非常有用。不对称也可能出乎意料，使设计更令人难忘，并且在包含的内容在对称布局中无法正常工作时具有实际用途。

10、简约的网页布局
几十年来，简洁的布局在 UI 设计中已经流行又过时，尽管它们经常流行。这些布局的美妙之处在于它们完全专注于内容，没有视觉混乱。 干净简单的布局几乎适用于任何类型的网站。这里的许多其他 UI 模式与干净的布局一起工作得很好。有干净版本的网格、杂志式布局、不对称设计和分屏布局。许多最优雅的网站都可以被认为是“干净的”，无论它们可能包含哪些其他设计功能。

11、导航标签
导航标签最初是拟物设计的支柱，类似于文件夹或活页夹分隔符上的标签。然而，随着它的成熟，标签式导航并不总是类似于现实的标签。相反，导航选项卡的标志是菜单中的每个项目都与其他菜单项目在视觉上分开。有时，这很微妙，有时，它仅在选择或悬停菜单项时出现。导航选项卡最适合只有少数项目的较小菜单。否则，它们可能看起来很杂乱。但是，它们可以与子菜单的下拉菜单结合使用以添加其功能。它们通常也出现在水平导航中，尽管确实存在垂直示例。

12、旋转木马
内容轮播通常出现在网站的标题或英雄部分。它们通常包含与文本结合的图像，尽管有些可能只包含一个或另一个。当空间非常宝贵时，它们用于在网站的单个部分中显示多个内容片段。轮播在一些用途中非常有效。博客或新闻网站上的特色内容非常适合轮播。产品、促销和销售通常也出现在电子商务网站的轮播中。虽然轮播通常出现在网页顶部附近，但它们也可以在小节中使用以突出显示相关内容。它们是主页内容和特定类别的内容或产品的单个页面的流行选择。