国内最专业的IT技术学习网

UI设计

当前位置:主页 > UI设计 >

澳门银河官网网址: 三种最主流的响应式栅格

发布时间:2019/09/30标签:   设计原则    点击量:

原标题:澳门银河官网网址: 三种最主流的响应式栅格

典型的例子有 Youtube 、Pinterest、Behance…

三种最主流的响应式栅格

如果你有研究过谷歌的 Material Design 的响应式栅格,应该知道,它是有断点(Breakpoints)的。简单来说,就是屏幕越宽,列宽和间距就越大。为了方便计算取整,这两个数值会在屏幕达到某一些特定宽度时才发生变化。

澳门银河官网网址: 三种最主流的响应式栅格

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

澳门银河官网网址: 三种最主流的响应式栅格

澳门银河官网网址: 三种最主流的响应式栅格

不建议大家借鉴 Material Design 响应式栅格,因为:

这种方式的统一性就比较低了,能适配的的屏幕类型也不多,可是长远来看付出的人力成本反倒更高一些。

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

总结

上述这些响应式栅格各有优劣,都不是最完美的解决方案。但是世界上没有最完美的解决方案,Google 能设计出 Material Design 那样细致的栅格系统,却也没有办法在自己的产品上广泛使用。

三种最主流的响应式栅格

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

爱奇艺

原文地址:知乎

典型的例子有:Google Drive 、Spotify …

三种最主流的响应式栅格

一、排列式栅格

顾名思义,这种栅格中,卡片(即内容区块)尺寸和间距不变,每行能放几张卡片就放几张,摆不下就换行,逻辑非常简单。

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

这么做对视觉舒适感是很有好处的,但是上面那张大表格让人有点望而却步。于是我花了些时间调研了一些市面上主流产品的栅格系统,结果发现……

对于真正做产品的人来说,还是多借鉴一下上面那三种主流的栅格模型吧。

不过作为一家“有理想”的互联网品牌, Google 之前推出 Material Design 恐怕也只是勾勒一个理想的蓝图,距离真正推广还远得很。

三种最主流的响应式栅格

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

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

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

通常它的尺寸伸缩并不是依赖一套通用的规范,而是人为设计了几种尺寸。这个例子还算相对复杂了,如果你去看国内其它响应式界面,可能因为是人力设计,所以大多变化范围并不大,最大尺寸和最小尺寸之间的差别有限。

版权信息Copyright © 银河官网 版权所有    ICP备案编号:鲁ICP备09013610号