UI设计趋势可能在网络上来来去去，但是几种UI模式经受了时间的考验。是什么使UI模式永恒？遵循Web布局最佳实践，可将用户友好性与适应不断变化的趋势和技术相结合。

有一些标准可以使UI模式持久。用户友好性就是其中之一。一种UI模式“看起来很棒”但不能促进出色的可用性，这种模式不会持续很长时间。

最有用的UI模式也可以适应不断变化的趋势。例如，UI设计人员可以采用多种方式来实现卡片式和基于网格的布局。适应性使他们有可能继续保持现代和潮流，即使他们已经存在多年了。此处包含的其他UI模式也是如此。

卡式布局模式

卡式布局受到Pinterest，Facebook和Twitter等网站的普及。它们非常适合在新闻网站和博客上使用，因为它们非常适合在页面上放置大量内容，同时又使每个内容保持鲜明。

顾名思义，这些布局使用的内容块类似于各种形状和大小的物理卡。有两种主要的布局格式。一种布局是将等尺寸的卡片排列在网格上，另一种布局是使用流畅的布局，将大小不同的卡片排列成有序的列，但没有不同的行。

卡片式布局效果很好，因为它们允许有序地排列不同的内容，同时将所有内容分开。人们也很熟悉卡片，因为它们可以识别现实世界中的卡片状物品。从心理上讲，它们是有意义的，即使对于网站来说是新手，人们也很容易使用。

Dribbble使用卡片显示设计师的项目。

分屏布局

从技术上讲，分屏布局的历史可以追溯到1903年，并在2016年真正开始兴起。

当两个元素需要在页面上具有相等的权重时，分屏布局是一种流行的设计选择，并且经常用于需要突出显示文字和图像的设计中。并排放置而不是垂直放置或在文本上覆盖图像是一种有意识的设计选择，可以带来精致，简约的质量。并排放置的两个图像也很常见，有时会覆盖文字。

大多数拆分屏幕设计的划分相当平均，尽管有些拆分比例不同。（33:66或40:60似乎是最受欢迎的比例；将屏幕划分成比⅓小的尺寸时，它更像是边栏，而不是真正的分屏设计。）

分屏设计特别适合电子商务网站上的产品页面。这些页面上必须突出显示产品图片，但价格，规格，购物车按钮和产品选件等基本信息也必须突出显示。

分屏不一定要在两半之间有视觉上的分隔线。

大字体

自网络问世以来，已经出现了大字体，但是随着移动设计的盛行，大字体得到了普及。

大字体在标题和标题中特别受欢迎，但在某些网站的正文中也可以看到。选择正确的字体时，较大的文本更易读，并改善了用户体验。此外，它还提供了强大的视觉效果。它在极少有其他视觉元素的简约设计中特别受欢迎。

个性化

个性化算法已经存在多年了，可以根据每个人的喜好量身定制数字体验。人工智能使这些算法变得更加有用，它具有诸如建议算法之类的功能，这些功能现在可以准确地预测一个人接下来想要看，读，学或购买的东西。

通过会员网站，人们希望看到满足其需求的内容。根据订户的先前选择，Netflix具有出色的预测算法，可以提供电影并显示他们最有可能观看的电影。像Medium这样的网站会根据他们以前阅读和喜欢的内容，向人们展示他们在登录时可能会喜欢的文章。

但是个性化可能会走得太远。广告网络算法已经变得如此先进，即使他们没有在线搜索产品或以其他方式提及产品时，有时也可以预测人们可能对购买感兴趣的东西。这种预测水平有时会使人感到被监视。因此，UI设计人员应谨慎使用个性化设置。

Netflix使用个性化来建议人们可能想要观看的内容。

格网

网格一直是UI设计的一部分，从1990年代后期开始就基于表格的布局开始使用网格（尽管在很早以前它们就用于诸如书籍和报纸之类的印刷布局中）。当CSS在创建布局中流行时，更优雅的网格系统得到了发展，最早的例子是960.gs grid。

网格为设计提供了视觉平衡和顺序，使内容更易于人们使用。同时，网格可以在Web布局中提供很大的灵活性。大多数网格系统使用12列或16列，中间有装订线。一些使用基于网格的布局的网站使网格成为设计的突出特征。相反，其他网格则更为微妙，只有在仔细检查后网格才会变得明显（有时只有在设计上覆盖了实际网格时才可见）。

除了基于列的布局网格外，基线网格通常在Web设计中用于以逻辑方式水平间隔元素。例如，在排版中，当检查正文和标题之间的间距时，这是最明显的。基线水平网格间距与网页设计中使用的垂直网格间距紧密相关。

在网格设计中使用不同大小的内容可以在保持内容有序的同时增加视觉吸引力。

杂志风格的网络布局

新闻和期刊行业严重影响了网络上的杂志式布局。在早期，他们大多在新闻网站和在线杂志上看到。随着时间的流逝，它们在其他领域的知名度不断提高，现在可以在各种类型的网站上看到它们，包括电子商务网站和博客。

杂志样式的版面包括特色文章（有时是轮播或类似格式的多个特色文章），以及首页上的第二和第三篇文章。它们也往往有多个内容列，有时分为几部分。这些Web布局非常适合内容丰富的网站，尤其是每天添加新内容的网站。

杂志式布局非常适合展示大量定期更新的内容。

单页布局

单页布局将网站的所有主要内容放在单个网页上。导航是通过滚动完成的，通常使用快捷方式跳转到特定部分，有时还使用视差滚动效果。有时，他们可能会将辅助页面用于条款和条件，隐私权政策或其他不属于主要内容的信息，但这不应阻止布局被视为单页面。

对于内容稀疏的网站，单页网站布局是一个很好的解决方案。它们也是叙事内容（例如互动式儿童读物）的理想选择。

单页布局非常适合叙述性内容，导航提示（“向下滚动”和箭头）的使用使设计更加人性化。

F型和Z型

F模式和Z模式是指人的眼睛如何在页面上移动，即人们如何扫描内容。一个F-模式具有跨页面的顶部突出的内容，与在它之下对准的辅助内容在页面的左侧（大致的“F”形）。一个Z-图案具有沿着顶部突出的内容，与其它有价值的内容进一步下跌。从页面的右上角到左下角以对角线绘制眼睛（大致为“ Z”形）。

F模式比Z模式具有更多定义的视觉层次，因此适合于内容更多的页面。当访问者应该看到两个相同（或几乎相等）相关内容时，Z模式更有用

Z形设计图案将视线吸引到顶部，然后沿对角线方向向下延伸到底部，然后再次延伸。

不对称

用最简单的术语来说，不对称就是不对称。在设计中，不对称会产生更加动态和有机的视觉冲击。在大多数情况下，不对称是使用无法完美平衡的图像和文本造成的。还可以通过背景元素来创建或加强不对称性，例如在各个页面部分之间使用不同的图案。

由于不对称会产生动态，充满活力的视觉印象，因此对于想要传达此类图像的品牌来说非常有用。不对称也可能是意料之外的，这会使设计更加令人难忘，并且当所包含的内容无法在对称布局中很好地工作时，它具有实际用途。

在此Web布局上，通过文本和卡片突出显示功能实现了不对称。

简洁的Web布局

简洁的布局在UI设计中已经流行了数十年，尽管这种情况经常出现。这些布局的优点在于它们将内容直接聚焦在内容上，没有视觉混乱。

干净简单的布局几乎适用于任何类型的网站。这里的许多其他UI模式可以与干净的布局一起很好地工作。有干净的网格版本，杂志式布局，不对称设计和分屏布局。许多最优雅的网站都可以被认为是“干净的”，无论它们可能包含其他设计功能。

干净，简单的布局仍然可以以整洁的方式合并插图，颜色和有用的信息。

导航标签

导航选项卡最初是拟态设计的主体，类似于文件夹或活页夹分隔符上的选项卡。然而，随着它的成熟，标签样式的导航并不总是类似于现实的标签。相反，导航选项卡的标志是菜单中的每个项目与其他菜单项目在视觉上都是分开的。有时，这是很微妙的，有时，仅当菜单项被选中或悬停时才会显示。

导航选项卡最适合仅包含少量项目的较小菜单。否则，它们可能看起来很混乱。但是，它们可以与下拉菜单结合使用以添加子菜单以增加其功能。尽管确实存在垂直示例，但通常也可以在水平导航中看到它们。

导航选项卡与子菜单项的下拉菜单配合使用效果很好。

轮播

内容轮播通常在网站的标题或英雄部分中找到。它们通常包含与文本结合的图像，尽管其中一些可能仅包含其中一个。当空间有限时，它们用于在网站的单个部分中显示多个内容。

轮播在某些用途上确实可以很好地工作。博客或新闻网站上的精选内容非常适合轮播。产品，促销和销售也通常出现在电子商务网站上的轮播中。尽管轮播通常显示在网页顶部附近，但也可以在小节中使用它们来突出显示相关内容。无论是首页内容还是特定内容或产品类别的单个页面，它们都是一个受欢迎的选择。

轮播允许在同一区域展示多个重要内容。

永恒的Web布局最佳实践

永恒的UI设计具有适应性和用户友好性。它可以在各种用例中使用，并且今天看起来和十年前一样好（并且在未来十年中看起来也一样），仅需少量修改即可。

遵循Web布局最佳实践，并结合永恒的UI设计元素，将创建一个看上去或感觉不到很短时间的网站。它使UI设计师可以创建使用户满意并实现品牌目标的数字体验。

原作者：CAMERON CHAPMAN