非理想主义的响应式栅格

　　实正年夜范畴利用、能够鉴戒的、非幻想主义的呼应式栅格存正在吗?

　　我已经很推许神往 Material Design 的呼应式栅格体系，我花了很多工夫来了解那几张庞大的图表战几张酷炫的静态表示。

　　可认真正需求用到呼应式那工具时，正在做完竞品调研后，我渐渐发明本人实不应那末固执于 Material Design 呼应式栅格体系，果为：

　　1、那两张英文图表对艺术布景的设想师去道实的很易了解

　　2、您设想的产物很有能够比 Material Design 的预期愈加庞大

　　3、您的开辟团队很有能够不克不及够/不肯意破费工夫测验考试那么庞大的体系

　　4、连 Google 本人的产物皆出怎样利用那套栅格体系

　　那末，实正年夜范畴利用、能够鉴戒的、非幻想主义的呼应式栅格存正在吗?谜底是必定的，上面我要引见三种海内中常睹的范例。

　　1、摆没有下便换止

　　望文生义，那种栅格中，卡片(即内容区块)尺寸战间距稳定，每止能放几张卡片便放几张，摆没有下便换止，逻辑十分简朴。典范的例子有 Youtube 、Pinterest、Behance ……

　　Youtube

　　那么简朴的呼应式栅格体系，其成绩也很较着：

　　1、页边距没有肯定，以是为了视觉的均衡感，年夜多将列表居中(像 Google Play 那样对峙左对齐也没有是不成以)

　　2、一整页最好只要一种尺寸的卡片，不然边距没法没有同一

　　3、牢固的卡片尺寸战边距能够正在年夜屏里看起去太小，小屏里看起去又太年夜

　　可是假如产物够简朴，列表单一的话，用那种是出成绩的。

　　2、弹性伸缩挖谦

　　那种栅格体系的间距战页边距是牢固的，卡片尺寸正在必然水平下弹性伸缩，以确保挖谦全部屏幕。果为间距战页边距牢固，也不消担忧卡片混排。典范的例子有： Google Drive 、Spotify ……

　　那种方法为了包管页边距没有像第一种方法那样去回变更，不能不让卡片正在必然范畴内弹性伸缩，那样做的益处是，差别巨细的卡片混排也没有会形成紊乱。可是正在缩放阅读器时，您会发明卡片的尺寸无可制止天时年夜时小(如上图)。

　　那种呼应式栅格略微庞大一面，我上面绘图表示设想办法：

　　1、绘出基准界里：用一个幻想宽度的屏幕，用恰当的间距摆下幻想尺寸的卡片

　　2、标出牢固部门：页边距战卡片间距是稳定的，把它们用色块标识表记标帜出

　　3、绘出基准栅格：横背延展间距色块，便获得了那个界里的基准栅格

　　4、筹办几个差别宽度的页里，标出页边距

　　5、把基准栅格放上来

　　6、判定一下每止能放几列，本则是确保卡片伸缩比例最小，且每止最少要有一列

　　7、测试：调解栅格以适配页里

　　8、把卡片根据适配的栅格摆上

　　3、定造类呼应式规划

　　实在海内的年夜部门网页并出有做呼应式规划(好比知乎、淘宝、爱偶艺等)，即使是部门做了的(好比简书、京东、腾讯视频等)，也年夜多出有利用上里讲的那两种自顺应的栅格，而是定造类呼应式规划。

　　以腾讯视频为例，您能够看到它的尺寸伸缩其实不是依靠一套通用的标准，而是报酬设想了几种尺寸。那个例子借算相对庞大了，假如您来看海内别的呼应式界里，能够果为是人力设想，以是年夜多变革范畴其实不年夜，最年夜尺寸战最小尺寸之间的不同有限。

　　那种方法的同一性便比力低了，能适配的的屏幕范例也没有多，但是久远去看支出的人力本钱反倒更下一些。

　　假如能够的话，有一套与日俱增的呼应式栅格标准必定是最好的，可是关于刚打仗呼应式没有太暂，或着没有太需求适配差别屏幕的产物而行，先用那种定造式呼应规划也是比力理想的挑选。

　　总结

　　《我做设想那七年里的心态变革》 里我把本人今朝的形态描画成“随便”，实在其实不是道设想师会果为理想的暴虐而不能不让步油滑甚么的，而是要认浑时期及情况的范围，并从弃取中得到均衡。

　　上述那些呼应式栅格各有好坏，皆没有是最完善的处理计划。可是天下上出有最完善的处理计划，Google 能设想出 Material Design 那样详尽的栅格体系，却也出有法子正在本人的产物上普遍利用。

　　不外做为一家“有幻想”的互联网品牌， Google 推出 Material Design 的心态生怕战古装周上的展品相似，一开端便出有抱实在用的心态，而是更多天勾勒一个幻想的标的目的。

　　可是关于年夜部门承担没有起幻想主义的产物、公司战小我私家而行，借是理想一面，沉着天挑选实正合适本人的地位吧。