网格列表，没有你想的那么简单

我们应该都有看过很多图文列表的设计分析，关于网格的分析却不是很多，为什么？因为网格设计除了视觉效果比较突出以外，能展示的信息却不是很多，对于目前希望能够在有限的手机屏幕里展示更多信息的各大产品来说，这样的设计并不是很适用，因此研究的也不会很多。

但是我最近在看界面的时候，发现很多大产品都在网格列表上做了一些改变，同时也在扩大网格在界面上的使用，我们快来看看吧！

网格视图的含义

网格视图由用来做布局的网格线和其他视觉线索将其明显区分出来。一个网格视图由在垂直和水平方向上重复排列的元素项构成。能够营造一个略微有停顿感的浏览模式，使得它最适合于视觉内容。通常情况下，图片占用了是视图元素的绝大部分空间。

网格视图的用法

我们都知道网格视图的缺点是对于内容消耗不太行，因为大的结构不能让设计者有更多的空间来展示额外的内容信息。但是视频、音乐、阅读、电商等这些产品本身就是需要大量的使用网格视图的设计，我们今天就来看一下，这些产品有哪些好的设计方法吧！

一、标准模式

标准模式的网格列表就是简单的展示图片，大部分人看到这个模式都会想到手机相册，如下图所示：

现在很多界面都有使用这个模式，但是普通网格布局未免太过普通，我们可以先来看看下面的两个例子：

豆瓣和微信读书就是采用的标准模式，将所有的内容图片都罗列在一起，但是进行了一些样式的改变，这里豆瓣的组件复用率会比微信读书高一些，毕竟也不是很多产品能够用一整个首屏来做专题推荐的。需要注意的是保持网格内容相对简单，因为这样的设计视觉上要求的是一致性，当你有很多元素被放到网格上时，它可能就开始变得密集和混乱，灾难可能就开始了。还有另外一种标准模式的设计，要优于我们平时看到的网格设计，但要稍逊于上面的这种设计样式，如下图所示：

同样也是来自于微信读书，不得不说微信读书的确是将网格设计发挥的很出色的一款产品，将标准模式稍微改变一样就让这个专题变得有节奏和呼吸感，但整体界面利用率和视觉上还是要比上面那种差一点的。

二、叠加模式

叠加模式是在网格模式列表的图片上显示相关的文本信息，如下图所示：

叠加模式在目前的产品中是使用最少的，因为对文字的局限性很强，如下图所示：

文字一般需要根据图片的大小来调整，一般都会控制在1~2行以内，因此对于很多产品需要文字来作为说明的要求会很高，因为文字数量需要严格控制。需要注意的是在图片上显示文字时，必须确保文字清晰可变，如果所这里显示的文字信息很重要，我们可以借鉴马蜂窝和飞猪的设计方案，图片的底部增加黑色或者白色遮罩，还可以增加标签提交整体模块的视觉层级。但这种情况要求的图片高度不能太低，因此图片的比例最好控制在4:3，所以在图片高度比较低的时候，也有不同的设计方案，如下图所示：

in由于这一模块的图片高度比较低，因此设计方案是将图片高斯模糊，然后在图片上面增加文字，这样技能保证文字的可见度，同时也能够保持这一模块的视觉风格的统一。

三、块状标签模式

块状标签模式的网格列表不仅会显示图片，还会显示相应的文本内容，但是与上面不同的是，文字内容会在图片的下方显示，如下图所示：

这种模式是目前市面上的产品使用最多的，因为它结合了上面两种的有点，既能够保证视觉的统一，文字的补充说明也不会局限于图片的大小，可增加多行文字，如下图所示：

豆瓣这一模块的网格设计使用了两种不同的图片比例，分别为4:3和16:9，不同的图片尺寸让这一模块在视觉上更有细节感，同时底下的文字和标签对图片的说明让这个模块更加丰富。与豆瓣视觉上不同的优酷，在私人影院的设计上就采取的极简的方式，也与我们之前以往看到的有所不同，只在切换到当前卡片才会出现这个卡片的文字描述和标签信息，这种类型的设计对图片的辨识度比较高，适合用在影视和音乐类的产品模块中，漫画和小说类识别度不是很高的产品容易会被用户所忽略。还有另一种比如说优酷即将上线模块的设计，如下图所示：