前端工程師離不開設計, 談到設計就要想到大名鼎鼎的material design主題, 而material是以card為經典單元的, card即卡片, 是層次化模型的最小模塊, 用于提供扁平化的信息, 想必大家都不陌生, 但是近幾年出現了新的設計元素, Tile, 翻譯過啦叫'瓦塊', 初次接觸這個名詞非常的陌生, 也非常難理解, 其實瓦塊是和卡片類似的物理元素, 初學者可以將tile看做成card, 但是兩者還是有很多很多的區別的, 下面來一一對分分析:
首先區別在于語義，但每當我聽到單詞tile時，從行業標準用法來看，暗示是有另一個與該磁貼關聯的屏幕。例如，在微軟的“現代用戶界面”中，磁貼不僅僅是一個圖標，它可以提供快速信息，而Windows Phone或Windows 8啟動屏幕上的磁貼既可以作為“一目了然”的信息散熱器，也可以作為啟動相關的應用程序。Tile的重要特征是用戶根據重要性或甚至美學來決定他們的位置。
另一方面，卡片意味著所有相關信息都包含在其中。您可以“放大”或“翻轉”卡片以查看更多信息。但他們應該在這些互動中傳達他們所需要的一切。此外，放置與卡有關。像思維導圖中的關系放置或顯示類似概念的類圖或絕對位置，如顯示任務狀態的看板。
在通常使用卡片的地方使用的瓦片會令人困惑，用戶可能甚至不知道瓦片除了顯示信息之外還做任何事情。同樣地，一組牌中的牌可能引起挫敗感，用戶在與其交互時會期望更多。
什么是最適合您的應用程序取決于它的內容，不知道任何這些是關于兩種設計模式的一些事情：瓷磚更像畫廊，平坦，邊緣小。 卡片是顯示一口大小的信息; 彼此間隔開，在除背景之外的圖形元素之上。卡片對于閱讀快速信息非常有用，因為設計可以清晰地指導您訪問內容。
而瓷磚更適合于均勻類型的元素（如圖像庫），之間沒有任何空間，例如圖像。由于視覺連續性，用戶可以輕松比較項目。然而，對于異質物品來說，卡片更好，物品之間的空間使用戶在向上和向下滾動時會產生處理不同/獨特元素的印象。
瓷磚比卡片更簡單，顧名思義它們的大小是固定的（或限于幾何相關尺寸的一小部分）并且沿著網格有規律地間隔開。瓷磚幾乎總是不完整的信息提供者：如果你想了解它們的任何信息，你必須與它們互動。它們的顯示不如圖標靜態，并且圖塊可以執行圖形操作以在需要時引起您的注意。它們也保持與畫布的固定關系：如果我在畫布的左上角放置一塊瓷磚，它應該始終位于左上角，除非我移動它或我強制它移動。
卡片更具動感，它們可以容納更多信息，并且它們可以位于畫布上的不規則位置。卡片并不總是固定的尺寸，也不限于一組固定的尺寸。卡也可以是完整的：您可能需要或可能不需要與卡交互以了解它所提供的所有信息。卡片通常可以重疊。將卡片與畫布相關聯移動應該比使用圖塊或圖標更容易。如果需要，卡甚至可以重新排列。
瓷磚更像是一種導航工具，而卡則更像是一種內容工具。經典的win8操作系統就使用了Tile布局:
最后, 瓷磚，卡片，小工具，小玩意兒，網格 - 這個名字并不重要。重要的是功能和原則。
要非常小心地創建一種界面方法，強制所有內容和功能成為一種過于一致的工作方式。一致性可以使事物看起來很漂亮，并且至關重要。
訣竅是要了解你正在做什么需要一種新的方法。
例如，我已經看到許多網站和內部網不必要地使用“小部件”方法來允許用戶自己構建頁面。對于BBC和谷歌來說，它失敗了，而且我還沒有看到它對任何公司都有效 - 無論公司和經驗不足的用戶有多少次使用它。
另一方面，使用“瓷磚”來呈現“類似物品”是標準做法。通常它只是被稱為網格視圖（盡管最好不要將其暴露給用戶）。大多數電子商務網站都使用此功能。像pinterest這樣的網站上的平鋪視圖只是一個具有可變垂直高度的網格視圖。基本原則保持不變，但演示文稿以良好的方式進行了調整。
本站文章版權歸原作者及原出處所有 。內容為作者個人觀點， 并不代表本站贊同其觀點和對其真實性負責，本站只提供參考并不構成任何投資及應用建議。本站是一個個人學習交流的平臺，網站上部分文章為轉載，并不用于任何商業目的，我們已經盡可能的對作者和來源進行了通告，但是能力有限或疏忽，造成漏登，請及時聯系我們，我們將根據著作權人的要求，立即更正或者刪除有關內容。本站擁有對此聲明的最終解釋權。
