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