如何在您的网页项目中使用便当网格设计-CSDN博客

本文链接：https://blog.csdn.net/jjb520/article/details/137430326

我相信我们都可能注意到了精心组织的网页布局的趋势，让人联想起日本便当盒。这些“便当网格”迅速赢得了关注，提供了一种视觉上吸引人且结构紧凑的方式来在线展示内容。

在本文中，我们将深入探讨便当网格趋势的起源、崛起和实际应用，探讨它如何在现代网页设计中将美学与功能相结合。

（本文内容参考：java567.com）

先决条件

HTML 和 CSS 的基础知识（CSS Grid）
网页设计基础

便当网格背后的哲学

便当网格的概念可以追溯到日本传统，即在一个分隔的容器中提供各种菜肴，这个容器被称为便当盒。这种展示方法不仅确保了一顿均衡的饭菜，还通过其组织和简约的方式让人眼前一亮。

在这里插入图片描述

转化网页设计，便当网格提供了类似的体验：多样化的内容分割成不同的区域，使其既易于访问又在美学上平衡。

便当网格的理念在于分隔和组织。它创造了一种可预测的节奏，用户可以遵循，减少认知负担，提升整体用户体验。设计的对称性和秩序给人一种宁静和控制的感觉，吸引了用户在互联网混乱中寻求简单和结构的愿望。

便当网格的崛起

虽然在设计中使用网格并不是新鲜事，但便当网格这一特定趋势开始受到关注，因为设计师们试图创建更有组织且适应移动设备的布局。

像 Apple 这样的巨头也在其产品的促销视频中使用这种设计模式。

在这里插入图片描述

趋势也随着 CSS Grid Layout 的出现和对不牺牲功能而专注于极简主义设计的关注度增加而急剧增长。

强调内容的平台，如在线杂志、教育网站和作品集，是便当网格的早期采用者。它们的采用突显了网格在以和谐的布局呈现多样化内容类型方面的能力，从而改善了导航和可读性。

趋势的审视

简洁的线条、几何形状和明确的空间划分通常是现代便当网格的特征。它们通常包括：

功能标题
功能的简短描述
一些信息图表或交互内容。

这一趋势得到了用户体验的积极影响。一个良好实施的便当网格可以轻松地引导用户浏览网站，使其可以快速获取信息，而不会被选择所淹没。

使用便当网格的优点

增强的组织和凝聚力：便当网格为网页设计带来了高度的组织性，使各种内容得以以一种连贯的方式呈现。这种分段使用户更容易以结构化的方式消化信息。
美学吸引力：便当网格中固有的对称性和清晰的线条具有视觉吸引力，提供了整洁和专业的外观，可以增强网站的视觉识别度。
减少滚动疲劳：通过在单个视口内高效利用空间，便当网格可以显示大量的内容，这可以减少过多滚动的需求。
隐喻的清晰性：便当盒隐喻有效地传达了完整和平衡的体验概念，这对于展示产品功能或作品集特别有用。
改善导航：便当网格的可预测性和秩序有助于简化导航，因为用户可以轻松地从一个分隔的部分移动到另一个部分。
与响应式设计的兼容性：便当网格与响应式设计原则无缝结合，便于调整网站的布局以适应各种屏幕大小和设备。
专注于内容：网格布局强调内容，避免不必要的干扰，这对于内容重要的网站（如在线画廊或信息驱动型平台）至关重要。
促进全面的产品捕捉：在展示产品的背景下，便当网格为用户提供了一次性获取所有关键信息的便利。通过在不同的区域内整齐地组织内容，用户可以轻松地截屏或保存网格的单个视图，确保他们捕捉到所有相关细节，而不需要进行多次交互或浏览各种页面。

使用便当网格的缺点

可能的信息过载：尽管便当网格通过组织减轻了认知负担，但在单个屏幕上塞入过多信息的风险，可能会让用户感到不知所措。
有限的视觉层次：便当网格的统一结构有时可能导致视觉层次的缺乏，使用户更难确定某些内容的重要性。
对希克定律的考虑：密集的网格向用户提供了大量的选项，可能会延长他们的决策过程。这种选择的丰富性可能导致选择困难，用户体验决策较慢，因为提供了过多的选择。
设计的刻板：便当网格的结构化特性有时可能限制创造性的设计元素，如果没有变化和动态内容的实现，可能会导致单调的用户体验。
SEO 挑战：当内容分布在多个网格区域时，搜索引擎可能难以解析其相关性，如果结构不当可能会影响 SEO。
可访问性问题：便当网格的分隔性质可能会带来可访问性挑战，特别是对于依赖屏幕阅读器或键盘导航的用户，如果设计时没有考虑到可访问性标准。

实践中的便当网格

创建便当网格通常涉及使用 CSS 网格布局和弹性盒子，这为轻松创建复杂布局提供了强大的解决方案。便当网格因其灵活性和响应性而备受青睐，使内容可以在不同屏幕尺寸之间无缝重新流动。

对于本文，我们将创建如下所示的设计接口：

在这里插入图片描述

[重新创建的桌面设计]

首先，在您的标记中创建一些 div。

<body>
    <div class="grid">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
  </body>

然后利用网格属性、grid-template-columns 和 grid-template-rows 来定义您希望的行数和列数。

.grid {
  background: hsl(36, 100%, 99%);
  width: 100%;
  max-width: 1500px;
  height: 1000px;
  display: grid;
  gap: 1.5vw;
  padding: 1vw;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: auto;
}

实现便当风格网格的最后一步是使用 grid-template-areas 属性，根据您希望它们在页面上占据的位置来命名网格区域。

.grid {
  background: hsl(36, 100%, 99%);
  width: 100%;
  max-width: 1500px;
  height: 1000px;
  display: grid;
  gap: 1.5vw;
  padding: 1vw;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: auto;
  grid-template-areas:
    "hero hero hero hero aside2 aside2"
    "hero hero hero hero aside2 aside2"
    "hero hero hero hero aside2 aside2"
    "hero hero hero hero aside2 aside2"
    "aside3 aside3 aside4 aside4 aside5 aside5 ";
}

最后，将这些名称分配给您想要占据该空间的确切元素。

.item {
  border: 2px solid #464545;
  border-radius: 5px;
}

.grid .item:nth-child(1) {
  grid-area: hero;
}
.grid .item:nth-child(2) {
  grid-area: aside2;
}

.grid .item:nth-child(3) {
  grid-area: aside3;
}
.grid .item:nth-child(4) {
  grid-area: aside4;
}

.grid .item:nth-child(5) {
  grid-area: aside5;
}

您应该得到如下结果：

在这里插入图片描述

[达到便当结构]

现在所剩的就是填充相应的内容和资源到这些盒子中。您可以在此存储库中找到一些资源/内容。

在这里插入图片描述

[填充了内容的便当网格]

grid-template-areas 属性的另一个用处是通过它轻松实现响应式设计。在我们的示例中，要使页面响应式，您只需在所需的阈值上传入一个新的字符串对。

在平板屏幕上：

@media screen and (max-width: 1000px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
      "hero   hero   hero   hero"
      "hero   hero   hero   hero"
      "aside2 aside2 aside2 aside3"
      "aside4 aside4 aside5 aside5";
  }
}

在这里插入图片描述

[平板屏幕]

在较小的屏幕上：

@media screen and (max-width: 750px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
      "hero   hero   hero"
      "hero   hero   hero"
      "aside2 aside2 aside2"
      "aside3 aside3 aside3"
      "aside4 aside4 aside4"
      "aside5 aside5 aside5";
  }
}

在这里插入图片描述

[较小的屏幕]

便当网格的常见规则

在构建便当网格时，以下是一些很好的经验法则：

分组相关内容：便当网格的基本原则之一是在每个部分中将相关内容分组在一起。这增强了用户快速定位和理解所寻找信息的能力。通过逻辑地组织内容，设计师可以提高用户参与度和满意度。
变化的盒子大小：避免在网格中每个盒子都使用相同的大小。不同大小的盒子可以产生视觉上的吸引力和层次感，吸引注意力到关键元素，同时保持整体平衡。这种变化可以帮助用户浏览内容，并有效突出重要信息。
建立视觉层次：尽管不同大小的盒子有助于建立视觉层次，但建立视觉层次涵盖了更广泛的设计元素范围。除了盒子大小外，设计师还应考虑诸如颜色、排版和位置等因素，以优先考虑某些元素。
优先考虑中心方块：在传统的便当网格中，中心方块通常具有特殊意义，并充当焦点。设计师可以使用这个中心方块来展示关键信息或突出重点特点，有效地点缀网格并吸引用户的注意力到其核心元素。
限制盒子数量：为了保持清晰度并避免让用户感到不知所措，建议在便当网格中使用九个或更少的盒子。限制盒子的数量确保布局保持可管理，并为用户提供更容易的导航和理解。
考虑螺旋图案：虽然不是严格的规则，但考虑螺旋图案可以为便当网格设计增加额外的视觉吸引力。这包括在网格内以曲线或螺旋形式安排内容，创造出动态而引人入胜的布局，鼓励用户探索。