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