Web最佳流行布局有哪些（分析12个永恒的UI模式） _Web最佳流行布局合集

文章图片

Web最佳流行布局合集

UI 设计趋势可能会在网络上来来去去，但有几种 UI 模式已经经受住了时间的考验。是什么让 UI 模式永不过时？坚持网页布局最佳实践，从而将用户友好性和对不断变化的趋势和技术的适应性结合起来。
有几个标准可以使 UI 模式持久。用户友好性就是其中之一。一种“看起来很棒”但不能带来极大可用性的 UI 模式不会持续很长时间。
Web最佳流行布局有哪些？最有用的 UI 模式也能适应不断变化的趋势。例如，卡片式和基于网格的布局可以由UI 设计人员以多种方式实现。适应性使它们能够继续看起来现代和流行，即使它们可能已经存在多年。此处包含的其他 UI 模式也是如此。
卡片式网页布局模式Web流行布局哪个最好？卡片式布局在 Pinterest、Facebook 和 Twitter 等网站上流行起来。它们已成为新闻网站和博客的标准，因为它们非常适合在页面上放置大量内容，同时保持每个部分的不同。
顾名思义，这些布局使用类似于各种形状和大小的物理卡片的内容块。有两种主要的布局格式。一种布局在网格上排列尺寸相同的卡片（如Toptal 设计博客主页所示），而另一种使用流体布局，将不同大小的卡片排列成有序的列但没有明显的行（如Pinterest的布局）。
Web最佳流行布局合集：卡片式布局效果很好，因为它们允许以有序的方式排列不同的内容，同时将所有部分分开。人们对卡片也很熟悉，因为他们可以从现实世界中识别出卡片形状的物品。它们在心理上是有意义的，即使人们不熟悉网站，也很容易使用。

文章图片

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

文章图片

在甲板模板采用不同的方法来卡，用了近视差滚动导航全屏幕卡。

分屏布局从技术上讲，分屏布局可以追溯到1903 年埃德温·S·波特 (Edwin S. Porter)的电影《美国消防员的生活》。但在网页 UI 设计中，分屏布局在 2013 年开始流行，并在 2016 年真正开始流行。
当两个元素需要在页面上具有相同的权重时，分屏布局是一种流行的设计选择，并且通常用于需要突出显示文本和图像的设计中。将它们并排放置而不是垂直放置或将文本覆盖在图像上是一种有意识的设计选择，可以赋予精致、简约的品质。并排放置的两个图像也很常见，有时带有文字叠加。
大多数分屏设计都相当均匀地划分，尽管有些以不同的比例划分。（33:66 或 40:60 似乎是最流行的比例；当屏幕被分成小于 ? 的尺寸时，它更像是一个侧边栏，而不是真正的分屏设计。）
分屏设计特别适合电子商务网站上的产品页面。产品图片需要在这些页面上突出显示，但价格、规格、添加到购物车按钮和产品选项等基本信息也是如此。

文章图片

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

文章图片

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

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

文章图片

用于导航的大字体。

文章图片

大字体在页眉设计中很流行。

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

文章图片
通过会员网站，人们希望看到满足他们需要的内容。根据订阅者之前的选择，Netflix 拥有卓越的预测算法，可以提供他们最有可能观看的电影和节目。像Medium这样的网站向人们展示他们在登录时可能会喜欢的文章，这取决于他们之前阅读过的和喜欢的内容。
但个性化可能走得太远。广告网络算法已经变得如此先进，它们有时可以预测人们可能有兴趣购买什么，即使他们没有在网上搜索产品或以其他方式提及它。这种程度的预测有时会让人们觉得自己被监视了。出于这个原因，UI 设计师谨慎使用个性化是明智的。

文章图片

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

文章图片

Medium根据以前的阅读习惯和来自用户和他们订阅的出版物的新内容，使用他们可能喜欢阅读的文章来个性化每个用户的主屏幕。

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

文章图片

基于网格的网页设计以平衡和有组织的方式呈现内容。

文章图片

在网格设计中使用不同大小的内容会增加视觉趣味，同时保持内容有序。

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

文章图片

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

文章图片

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

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

文章图片

单页布局适用于叙事内容，导航提示（“向下滚动”和箭头）的使用使设计更加用户友好。

文章图片

单页布局非常适合儿童故事等叙事。

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

文章图片

F 形设计图案吸引眼球，然后向下延伸到页面的左侧。

文章图片

Z 形设计图案在顶部吸引眼球，然后斜着回到底部并再次穿过。

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

文章图片

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

文章图片

颜色的使用对于创建不对称布局很有价值。

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

文章图片

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

文章图片

图像之间的宽边距、最小的排版和基于网格的松散布局共同创造了这种干净的布局。

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

文章图片

导航选项卡与子菜单项的下拉菜单配合得很好。

文章图片

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

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

文章图片

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

文章图片

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

Web最佳流行布局合集总结永恒的 UI 设计具有适应性和用户友好性。它适用于各种用例，今天看起来和 10 年前一样好（并且在接下来的 10 年里看起来也一样好），只需稍作修改。
遵循 Web 布局最佳实践，同时结合永恒的 UI 设计元素，将生成一个在短时间内看起来或感觉不会过时的网站。它使UI 设计师能够创建令用户满意并实现品牌目标的数字体验。