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

更新时间:2018-11-29 14:10:17 点击次数:1336次
前端工程师离不开设计, 谈到设计就要想到大名鼎鼎的material design主题, 而material是以card为经典单元的, card即卡片, 是层次化模型的最小模块, 用于提供扁平化的信息, 想必大家都不陌生, 但是近几年出现了新的设计元素, Tile, 翻译过啦叫'瓦块', 初次接触这个名词非常的陌生, 也非常难理解, 其实瓦块是和卡片类似的物理元素, 初学者可以将tile看做成card, 但是两者还是有很多很多的区别的, 下面来一一对分分析:

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

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

在通常使用卡片的地方使用的瓦片会令人困惑,用户可能甚至不知道瓦片除了显示信息之外还做任何事情。同样地,一组牌中的牌可能引起挫败感,用户在与其交互时会期望更多。

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

而瓷砖更适合于均匀类型的元素(如图像库),之间没有任何空间,例如图像。由于视觉连续性,用户可以轻松比较项目。然而,对于异质物品来说,卡片更好,物品之间的空间使用户在向上和向下滚动时会产生处理不同/独特元素的印象。
 
瓷砖比卡片更简单,顾名思义它们的大小是固定的(或限于几何相关尺寸的一小部分)并且沿着网格有规律地间隔开。瓷砖几乎总是不完整的信息提供者:如果你想了解它们的任何信息,你必须与它们互动。它们的显示不如图标静态,并且图块可以执行图形操作以在需要时引起您的注意。它们也保持与画布的固定关系:如果我在画布的左上角放置一块瓷砖,它应该始终位于左上角,除非我移动它或我强制它移动。

卡片更具动感,它们可以容纳更多信息,并且它们可以位于画布上的不规则位置。卡片并不总是固定的尺寸,也不限于一组固定的尺寸。卡也可以是完整的:您可能需要或可能不需要与卡交互以了解它所提供的所有信息。卡片通常可以重叠。将卡片与画布相关联移动应该比使用图块或图标更容易。如果需要,卡甚至可以重新排列。

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

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

要非常小心地创建一种界面方法,强制所有内容和功能成为一种过于一致的工作方式。一致性可以使事物看起来很漂亮,并且至关重要。

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

例如,我已经看到许多网站和内部网不必要地使用“小部件”方法来允许用户自己构建页面。对于BBC和谷歌来说,它失败了,而且我还没有看到它对任何公司都有效 - 无论公司和经验不足的用户有多少次使用它。

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

本站文章版权归原作者及原出处所有 。内容为作者个人观点, 并不代表本站赞同其观点和对其真实性负责,本站只提供参考并不构成任何投资及应用建议。本站是一个个人学习交流的平台,网站上部分文章为转载,并不用于任何商业目的,我们已经尽可能的对作者和来源进行了通告,但是能力有限或疏忽,造成漏登,请及时联系我们,我们将根据著作权人的要求,立即更正或者删除有关内容。本站拥有对此声明的最终解释权。

回到顶部
嘿,我来帮您!