趋势来来去去，这12种网页布局设计永不过时

趋势来来去去 这12种

网页布局设计永不过时

Web Layout - 12 Timeless UI Patterns

设计趋势来来去去，每一年都会出现不一样的潮流。总有一些一开始很火爆、看起来令人眼前一亮的UI设计并不具备真正优秀的可用性，因此它们的“流行”也不会持续很长时间，但也有几种网页UI布局设计经住了时间的考验。那么，是什么元素使得这些UI设计模式经久不衰呢？

Web Layout Best Practices: 12 Timeless UI Patterns Analyzed

Author:CameronChapman

Links:

今天，我们将通过一篇文章了解12种常见的、出色的且持久经用的网页布局设计。最有用的UI模式即使已经存在多年，也可以适应不断变化的趋势和技术、继续保持现代和潮流；同时也能够增强内容的可读性，易于使用并为用户提供积极、友好的体验。

01/卡片式网页布局

我们所熟悉的Pinterest，Facebook和Twitter等网站就是使用卡片式布局。它们非常适合在页面上放置大量内容，同时又使每个内容保持鲜明。

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

在Deck介绍用了近乎全屏的滚动卡片来导航

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

卡片式布局效果很好，因为它们允许有序地排列不同的内容，同时将所有内容分开。一般来说，用户也很熟悉卡片，因为他们可以轻松识别现实世界中的卡片状物品，即使对于初次使用网站新手，也很容易就上手。

02/ 分屏布局

在Web UI设计中，分屏版式在2013年开始流行，并在2016年真正开始兴起。

当两个元素需要在页面上具有相同的权重时，分屏布局是一种流行的设计选择，并且经常用于需要突出显示文字和图像的设计中。

相比于垂直放置或在文本上覆盖图像，并排放置是一种有意识的设计选择，它可以带来更加精致，简约的质量。（并排放置两个图像的排版布局也很常见）

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

一侧的文本和另一侧的图像是流行的分屏设计模式

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

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

03/ 大标题排版

随着移动性设计的兴起，大字体的排版设计得到了普及。大号字体在标题和标题中特别受欢迎，有时我们在某些网站的正文中也可以看到。

用于导航的大字体

大字体在标题设计中很流行

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

04/ 个性化推荐

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

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

媒介会根据以前的阅读习惯以及他们订阅的用户和出版物的

新内容，用他们可能想阅读的文章来个性化每个用户的主屏幕

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

但是「个性化推荐」也并非一劳永逸的方法。广告网络算法已经变得非常先进，即使他们没有在线搜索产品或以其他方式提及产品时，有时也可以预测人们可能对购买感兴趣。这种预测水平有时会使人感到被监视、隐私有被侵犯的风险。因此，UI设计师应谨慎使用个性化设置。

05/ 网格布局

网格布局一直是平面设计中最为基础的一部分，从1990年代后期开始，基于表格的布局就开始使用网格了（尽管在此之前很早就将它们用于书籍和报纸之类的印刷布局中）。

网格为设计提供了视觉平衡和顺序，使内容更易于人们使用。同时，网格可以在Web布局中提供很大的灵活性。

基于网格的Web设计以一种平衡且有组织的方式呈现内容

在网格设计中使用不同大小的内容

可以在保持内容有序的同时增加视觉吸引力

大多数网格系统使用12列或16列，中间有装订线。一些使用基于网格的布局的网站使网格成为设计的突出特征。相反，其他网格则更为微妙，只有在仔细检查后网格才会变得明显（有时只有在设计上覆盖了实际网格时才可见）。

06/ 杂志风格的布局

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

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

多样的图像形状使这种杂志式的布局独特而令人难忘

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

07/ 单页布局

单页布局将网站的所有主要内容放在单个网页上。导航是通过滚动完成的，通常使用快捷方式跳转到特定部分，有时还使用视觉差滚动效果。

单页布局非常适合叙述性内容，

导航提示（“向下滚动”和箭头）的使用使设计更加人性化

单页布局非常适合诸如儿童故事的叙述

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

08/ F型和Z型的布局

F模式和Z模式是指人的视觉视线如何在页面上移动，即人们如何扫描内容。

一个F-模式具有跨页面的顶部突出的内容，与在它之下对准的辅助内容在页面的左侧（大致的“F”形）。一个Z-图案具有沿着顶部突出的内容，与其它有价值的内容进一步下跌。从页面的右上角到左下角以对角线绘制阅读视线（大致为“ Z”形）。

F形设计图案吸引了整个页面的视线，然后向下吸引到页面的左侧

Z形设计图案将视线吸引到顶部，然后

沿对角线方向向下延伸到底部，然后再次延伸

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

09/ 不对称布局

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

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

使用颜色在创建不对称布局方面很有价值

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

10/ 简洁的Web布局

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

干净、简单的布局仍然可以以整洁的方式合并插图，

颜色和有用的信息

图像之间的宽边距，最小的版式和松散的基于网格的布局

共同作用以创建这种干净的布局

干净简单的布局几乎适用于任何类型的网站。

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

11/ 导航标签

导航选项卡最初是拟态设计的主体，类似于文件夹或活页夹分隔符上的选项卡。然而，随着它的成熟，标签样式的导航并不总是类似于现实的标签。

相反，导航选项卡的标志是菜单中的每个项目与其他菜单项目在视觉上都是分开的。甚至有时，仅当菜单项被选中或悬停时才会显示导航栏。

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

在某些设计中，仅活动选项卡突出显示

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

12/内容轮播

内容轮播通常在网站的标题或页面顶部中找到。它们通常包含与文本结合的图像，当空间有限时，它们用于在网站的单个部分中显示多个内容。

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

轮播非常适合在电子商务网站上展示特色产品

轮播在某些用途上确实可以很好地工作。博客或新闻网站上的精选内容非常适合轮播。产品，促销和销售也通常出现在电子商务网站上的轮播中。

尽管轮播通常显示在网页顶部附近，但也可以在小节中使用它们来突出显示相关内容。无论是首页内容还是特定内容或产品类别的单个页面，它们都是一个受欢迎的选择。

>>> 2021寒假实战营重磅推出