对设计领域中Tile和Card的理解

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

 

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

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

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

 

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

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

 

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

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

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

 

 

 

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

要很是当心地建立一种界面方法，强制全部内容和功能成为一种过于一致的工做方式。一致性可使事物看起来很漂亮，而且相当重要。

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

例如，我已经看到许多网站和内部网没必要要地使用“小部件”方法来容许用户本身构建页面。对于BBC和谷歌来讲，它失败了，并且我尚未看到它对任何公司都有效 - 不管公司和经验不足的用户有多少次使用它。

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