對設計領域中Tile和Card的理解

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

 

首先區別在於語義，但每當我聽到單詞tile時，從行業標準用法來看，暗示是有另外一個與該磁貼關聯的屏幕。例如，在微軟的「現代用戶界面」中，磁貼不只僅是一個圖標，它能夠提供快速信息，而Windows Phone或Windows 8啓動屏幕上的磁貼既能夠做爲「一目瞭然」的信息散熱器，也能夠做爲啓動相關的應用程序。Tile的重要特徵是用戶根據重要性或甚至美學來決定他們的位置。

另外一方面，卡片意味着全部相關信息都包含在其中。您能夠「放大」或「翻轉」卡片以查看更多信息。但他們應該在這些互動中傳達他們所須要的一切。此外，放置與卡有關。像思惟導圖中的關係放置或顯示相似概念的類圖或絕對位置，如顯示任務狀態的看板。

在一般使用卡片的地方使用的瓦片會使人困惑，用戶可能甚至不知道瓦片除了顯示信息以外還作任何事情。一樣地，一組牌中的牌可能引發挫敗感，用戶在與其交互時會指望更多。

 

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

而瓷磚更適合於均勻類型的元素（如圖像庫），之間沒有任何空間，例如圖像。因爲視覺連續性，用戶能夠輕鬆比較項目。然而，對於異質物品來講，卡片更好，物品之間的空間使用戶在向上和向下滾動時會產生處理不一樣/獨特元素的印象。

 

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

卡片更具動感，它們能夠容納更多信息，而且它們能夠位於畫布上的不規則位置。卡片並不老是固定的尺寸，也不限於一組固定的尺寸。卡也能夠是完整的：您可能須要或可能不須要與卡交互以瞭解它所提供的全部信息。卡片一般能夠重疊。將卡片與畫布相關聯移動應該比使用圖塊或圖標更容易。若是須要，卡甚至能夠從新排列。

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

 

 

 

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

要很是當心地建立一種界面方法，強制全部內容和功能成爲一種過於一致的工做方式。一致性可使事物看起來很漂亮，而且相當重要。

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

例如，我已經看到許多網站和內部網沒必要要地使用「小部件」方法來容許用戶本身構建頁面。對於BBC和谷歌來講，它失敗了，並且我尚未看到它對任何公司都有效 - 不管公司和經驗不足的用戶有多少次使用它。

另外一方面，使用「瓷磚」來呈現「相似物品」是標準作法。一般它只是被稱爲網格視圖（儘管最好不要將其暴露給用戶）。大多數電子商務網站都使用此功能。像pinterest這樣的網站上的平鋪視圖只是一個具備可變垂直高度的網格視圖。基本原則保持不變，但演示文稿以良好的方式進行了調整。