新利8体育 - 百度百科

新网 > 建站推广 > 正文

响应式栅格系统是什么

作者：新网
来源：新网
浏览：100
2018-02-27 17:45:42

Material Design 的响应式栅格系统是谷歌推出了全新的设计语言Material Design。谷歌表示，这种设计语言旨在为手机、平板电脑、台式机和\"其他平台\"提供更一致、更广泛的\"外观和感觉\"。

Material Design 的响应式栅格系统是谷歌推出了全新的设计语言Material Design。谷歌表示，这种设计语言旨在为手机、平板电脑、台式机和"其他平台"提供更一致、更广泛的"外观和感觉"。

<div>可当真正需要用到响应式这东西时，在做完竞品调研后，我慢慢发现自己真不该那么执着于 Material Design 响应式栅格系统，因为：

那两张英文图表对艺术背景的设计师来说真的很难理解。

你设计的产品很有可能比 Material Design 的预期更加复杂。

你的开发团队很有可能不能够 or 不愿意花费时间尝试这么复杂的系统。

连 Google 自己的产品都没怎么使用这套栅格系统。

那么，真正大范围使用、可以借鉴的、非理想主义的响应式栅格存在吗?答案是肯定的，下面我要介绍三种国内外常见的类型。

一. 摆不下就换行

顾名思义，这种栅格中，卡片(即内容区块)尺寸和间距不变，每行能放几张卡片就放几张，摆不下就换行，逻辑非常简单。典型的例子有 Youtube 、Pinterest、Behance ……

Youtube

这么简单的响应式栅格系统，其问题也很明显：

页边距不确定，所以为了视觉的平衡感，大多将列表居中(像 Google Play 那样坚持左对齐也不是不可以)。

一整页最好只有一种尺寸的卡片，否则边距无法不统一。

固定的卡片尺寸和边距可能在大屏里看起来太小，小屏里看起来又太大。

但是如果产品够简单，列表单一的话，用这种是没问题的。

二. 弹性伸缩填满

这种栅格系统的间距和页边距是固定的，卡片尺寸在一定程度下弹性伸缩，以确保填满整个屏幕。因为间距和页边距固定，也不用担心卡片混排。典型的例子有： Google Drive 、Spotify ……

Spotify

这种方式为了保证页边距不像第一种方式那样来回变动，不得不让卡片在一定范围内弹性伸缩，这样做的好处是，不同大小的卡片混排也不会造成混乱。但是在缩放浏览器时，你会发现卡片的尺寸无可避免地时大时小。

这种响应式栅格稍微复杂一点，我下面画图示意设计方法：

1. 画出基准界面：

用一个理想宽度的屏幕，用适当的间距摆下理想尺寸的卡片。

2. 标出固定部分：

页边距和卡片间距是不变的，把它们用色块标记出。

3. 画出基准栅格：

横向延展间距色块，就得到了这个界面的基准栅格。

三. 定制类响应式布局

其实国内的大部分网页并没有做响应式布局(比如知乎、淘宝、爱奇艺等)，即便是部分做了的(比如简书、京东、腾讯视频等)，也大多没有使用上面讲的那两种自适应的栅格，而是定制类响应式布局。

上述这些响应式栅格各有优劣，都不是最完美的新利8体育 - 百度百科。但是世界上没有最完美的新利8体育 - 百度百科，Google 能设计出 Material Design 那样细致的栅格系统，却也没有办法在自己的产品上广泛使用。

上一篇：网站流量波动的原因有哪些

下一篇：网站建设中有哪些需要遵守的原则

免责声明：本文内容由互联网用户自发贡献自行上传，本网站不拥有所有权，也不承认相关法律责任。如果您发现本社区中有涉嫌抄袭的内容，请发送邮件至：operations@xinnet.com进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

域名管理	我要充值
未支付订单	发票管理
安全退出	进入我的账户

域名

新网云

企业建站

虚拟主机

企业邮箱

响应式栅格系统是什么

相关文章

推荐阅读

售前咨询电话

售前咨询

域名信息查询（whois）

售后咨询 (7*24小时)

售前咨询