发布时间：2023-11-1 分类： 行业资讯
我曾经尊重Material Design的响应式网格系统，花了很多时间来理解复杂的图表和一些很酷的动态。
但是当我真的需要使用响应性的东西时，在进行竞争性研究之后，我慢慢发现我不应该如此着迷于Material Design响应式网格系统，因为：
对于具有艺术背景的设计师来说，这两张英文图表真的很难理解。
您设计的产品比材料设计的期望更复杂。
您的开发团队可能无法或不愿意花时间尝试这样一个复杂的系统。
即使谷歌自己的产品也不使用这种网格系统。
那么，是否有一个非理想化的响应网格可以在很大范围内使用并且可以借用？答案是肯定的。我将介绍国内外三种常见类型。
1.如果你不能把它改变线
顾名思义，在此网格中，卡片的大小和间距（即内容块）是相同的。你可以在每一行放几张卡片并放几张纸。如果你不能打开它们，你可以改变它。逻辑非常简单。典型的例子是Youtube，Pinterest，Behance… …
△Youtube
这种简单的响应式网格系统的问题也很明显：
边距是未定义的，因此为了视觉平衡，大多数列表都是居中的（就像Google Play不会左侧一样）。
最好只有一张尺寸的卡片用于整页，否则边距不能统一。
固定卡的大小和边距在大屏幕上可能看起来太小而在小屏幕上看起来太大。
但是如果产品足够简单，如果列表是单一的，那么可以使用它。
2.弹性膨胀和填充填充
这种网格系统的间距和边距是固定的，并且卡片尺寸弹性拉伸到一定程度以确保整个屏幕被填充。由于间距和边距是固定的，因此无需担心卡片洗牌。典型的例子有：Google Drive，Spotify……
△Spotify
以这种方式，为了确保边缘不像第一种方法那样来回变化，卡必须在一定范围内弹性拉伸。这具有不会混淆不同尺寸的卡的优点。但是当你放大浏览器时，你会发现卡的大小不可避免地大而小（如上图所示）。
这种响应式网格有点复杂。我将在下面绘制一个图表来说明设计方法：
1.绘制基准界面：
使用理想宽度的屏幕以适当的间距放置所需尺寸的卡。
2.标记固定部分：
边距和卡间距是不变的，它们标有补丁。
3.绘制参考网格：
通过水平扩展间隔块，获得该接口的参考网格。
4.准备几页不同宽度的页面并标记边距：
5.将参考网格放在：
6.判断每行可以放置多少列：
原则是确保卡的规模最小，每行必须至少有一列。
7.调整网格以适合页面：
8.将卡放在适当的网格中：
自定义响应式布局
事实上，大多数国内网页都没有响应式布局（如智慧，淘宝，爱奇艺等），即使他们做过一些（如简，京东，腾讯等），大多数他们不使用上述内容。两个自适应网格是自定义响应布局。
以腾讯视频为例。您可以看到它的尺寸缩放不依赖于一组通用规格，而是以多种尺寸人为设计。这个例子比较复杂。如果你看一下中国的其他响应接口，可能是因为手动设计，所以大多数变化并不大，最大尺寸和最小尺寸之间的差异是有限的。
该方法的一致性相对较低，并且可以调整的屏幕类型不多，但长期支付的劳动力成本较高。
如果可能的话，一套一劳永逸的响应式网格规范绝对是最好的，但对于长时间未与响应接触或不需要适应不同屏幕的产品，请使用此自定义先回应。布局也是一个更现实的选择。
总结
《我做设计这七年里的心态变化》我将当前状态描述为“随意”。这并不是说设计师会因为现实的残酷而不得不妥协。相反，他们必须认识到时代和环境的局限性，并从中进行选择。平衡。
这些响应式网格有其自身的优点和缺点，并不是完美的解决方案。但世界上没有完美的解决方案。 Google可以设计一个像Material Design一样详细的网格系统，但是没有办法在自己的产品上广泛使用它。
然而，作为一个“理想”的互联网品牌，谷歌的材料设计心态与时装周类似。从一开始，就没有实际的心态，而是更多地勾勒出一个理想的方向。
但对于大多数无法负担理想主义的产品，公司和个人而言，它仍然是现实，平静地选择真正适合你的职位。
