前端工程師離不開設計, 談到設計就要想到大名鼎鼎的material design主題, 而material是以card為經典單元的, card即卡片, 是層次化模型的最小模組, 用於提供扁平化的資訊, 想必大家都不陌生, 但是近幾年出現了新的設計元素, Tile, 翻譯過啦叫'瓦塊', 初次接觸這個名詞非常的陌生, 也非常難理解, 其實瓦塊是和卡片類似的物理元素, 初學者可以將tile看做成card, 但是兩者還是有很多很多的區別的, 下面來一一對分分析:

首先區別在於語義，但每當我聽到單詞tile時，從行業標準用法來看，暗示是有另一個與該磁貼關聯的螢幕。例如，在微軟的“現代使用者介面”中，磁貼不僅僅是一個圖示，它可以提供快速資訊，而Windows Phone或Windows 8啟動螢幕上的磁貼既可以作為“一目瞭然”的資訊散熱器，也可以作為啟動相關的應用程式。Tile的重要特徵是使用者根據重要性或甚至美學來決定他們的位置。

另一方面，卡片意味著所有相關資訊都包含在其中。您可以“放大”或“翻轉”卡片以檢視更多資訊。但他們應該在這些互動中傳達他們所需要的一切。此外，放置與卡有關。像思維導圖中的關係放置或顯示類似概念的類圖或絕對位置，如顯示任務狀態的看板。

在通常使用卡片的地方使用的瓦片會令人困惑，使用者可能甚至不知道瓦片除了顯示資訊之外還做任何事情。同樣地，一組牌中的牌可能引起挫敗感，使用者在與其互動時會期望更多。

什麼是最適合您的應用程式取決於它的內容，不知道任何這些是關於兩種設計模式的一些事情：瓷磚更像畫廊，平坦，邊緣小。 卡片是顯示一口大小的資訊; 彼此間隔開，在除背景之外的圖形元素之上。卡片對於閱讀快速資訊非常有用，因為設計可以清晰地指導您訪問內容。

而瓷磚更適合於均勻型別的元素（如影象庫），之間沒有任何空間，例如影象。由於視覺連續性，使用者可以輕鬆比較專案。然而，對於異質物品來說，卡片更好，物品之間的空間使使用者在向上和向下滾動時會產生處理不同/獨特元素的印象。

瓷磚比卡片更簡單，顧名思義它們的大小是固定的（或限於幾何相關尺寸的一小部分）並且沿著網格有規律地間隔開。瓷磚幾乎總是不完整的資訊提供者：如果你想了解它們的任何資訊，你必須與它們互動。它們的顯示不如圖示靜態，並且圖塊可以執行圖形操作以在需要時引起您的注意。它們也保持與畫布的固定關係：如果我在畫布的左上角放置一塊瓷磚，它應該始終位於左上角，除非我移動它或我強制它移動。

卡片更具動感，它們可以容納更多資訊，並且它們可以位於畫布上的不規則位置。卡片並不總是固定的尺寸，也不限於一組固定的尺寸。卡也可以是完整的：您可能需要或可能不需要與卡互動以瞭解它所提供的所有資訊。卡片通常可以重疊。將卡片與畫布相關聯移動應該比使用圖塊或圖示更容易。如果需要，卡甚至可以重新排列。

瓷磚更像是一種導航工具，而卡則更像是一種內容工具。經典的win8作業系統就使用了Tile佈局:

最後,  瓷磚，卡片，小工具，小玩意兒，網格 - 這個名字並不重要。重要的是功能和原則。

要非常小心地建立一種介面方法，強制所有內容和功能成為一種過於一致的工作方式。一致性可以使事物看起來很漂亮，並且至關重要。

訣竅是要了解你正在做什麼需要一種新的方法。

例如，我已經看到許多網站和內部網不必要地使用“小部件”方法來允許使用者自己構建頁面。對於BBC和谷歌來說，它失敗了，而且我還沒有看到它對任何公司都有效 - 無論公司和經驗不足的使用者有多少次使用它。

另一方面，使用“瓷磚”來呈現“類似物品”是標準做法。通常它只是被稱為網格檢視（儘管最好不要將其暴露給使用者）。大多數電子商務網站都使用此功能。像pinterest這樣的網站上的平鋪檢視只是一個具有可變垂直高度的網格檢視。基本原則保持不變，但簡報以良好的方式進行了調整。