前端工程师离不开设计, 谈到设计就要想到大名鼎鼎的material design主题, 而material是以card为经典单元的, card即卡片, 是层次化模型的最小模块, 用于提供扁平化的信息, 想必大家都不陌生, 但是近几年出现了新的设计元素, Tile, 翻译过啦叫'瓦块', 初次接触这个名词非常的陌生, 也非常难理解, 其实瓦块是和卡片类似的物理元素, 初学者可以将tile看做成card, 但是两者还是有很多很多的区别的, 下面来一一对分分析:

首先区别在于语义，但每当我听到单词tile时，从行业标准用法来看，暗示是有另一个与该磁贴关联的屏幕。例如，在微软的“现代用户界面”中，磁贴不仅仅是一个图标，它可以提供快速信息，而Windows Phone或Windows 8启动屏幕上的磁贴既可以作为“一目了然”的信息散热器，也可以作为启动相关的应用程序。Tile的重要特征是用户根据重要性或甚至美学来决定他们的位置。

另一方面，卡片意味着所有相关信息都包含在其中。您可以“放大”或“翻转”卡片以查看更多信息。但他们应该在这些互动中传达他们所需要的一切。此外，放置与卡有关。像思维导图中的关系放置或显示类似概念的类图或绝对位置，如显示任务状态的看板。

在通常使用卡片的地方使用的瓦片会令人困惑，用户可能甚至不知道瓦片除了显示信息之外还做任何事情。同样地，一组牌中的牌可能引起挫败感，用户在与其交互时会期望更多。

什么是最适合您的应用程序取决于它的内容，不知道任何这些是关于两种设计模式的一些事情：瓷砖更像画廊，平坦，边缘小。 卡片是显示一口大小的信息; 彼此间隔开，在除背景之外的图形元素之上。卡片对于阅读快速信息非常有用，因为设计可以清晰地指导您访问内容。

而瓷砖更适合于均匀类型的元素（如图像库），之间没有任何空间，例如图像。由于视觉连续性，用户可以轻松比较项目。然而，对于异质物品来说，卡片更好，物品之间的空间使用户在向上和向下滚动时会产生处理不同/独特元素的印象。

瓷砖比卡片更简单，顾名思义它们的大小是固定的（或限于几何相关尺寸的一小部分）并且沿着网格有规律地间隔开。瓷砖几乎总是不完整的信息提供者：如果你想了解它们的任何信息，你必须与它们互动。它们的显示不如图标静态，并且图块可以执行图形操作以在需要时引起您的注意。它们也保持与画布的固定关系：如果我在画布的左上角放置一块瓷砖，它应该始终位于左上角，除非我移动它或我强制它移动。

卡片更具动感，它们可以容纳更多信息，并且它们可以位于画布上的不规则位置。卡片并不总是固定的尺寸，也不限于一组固定的尺寸。卡也可以是完整的：您可能需要或可能不需要与卡交互以了解它所提供的所有信息。卡片通常可以重叠。将卡片与画布相关联移动应该比使用图块或图标更容易。如果需要，卡甚至可以重新排列。

瓷砖更像是一种导航工具，而卡则更像是一种内容工具。经典的win8操作系统就使用了Tile布局:

最后,  瓷砖，卡片，小工具，小玩意儿，网格 - 这个名字并不重要。重要的是功能和原则。

要非常小心地创建一种界面方法，强制所有内容和功能成为一种过于一致的工作方式。一致性可以使事物看起来很漂亮，并且至关重要。

诀窍是要了解你正在做什么需要一种新的方法。

例如，我已经看到许多网站和内部网不必要地使用“小部件”方法来允许用户自己构建页面。对于BBC和谷歌来说，它失败了，而且我还没有看到它对任何公司都有效 - 无论公司和经验不足的用户有多少次使用它。

另一方面，使用“瓷砖”来呈现“类似物品”是标准做法。通常它只是被称为网格视图（尽管最好不要将其暴露给用户）。大多数电子商务网站都使用此功能。像pinterest这样的网站上的平铺视图只是一个具有可变垂直高度的网格视图。基本原则保持不变，但演示文稿以良好的方式进行了调整。