卡片式设计对于设计师可能并不是一个新鲜的概念了。我这里记录这些东西的原因在于我一直认为:用户研究员的能力构成应该包括手机和处理数据、解释数据以及提供合理性的建议。了解不同设计方法间的差异和优缺点无疑是有利于发现和改善可用性问题的,可用性测试方法中的专家评估也需要用研人员掌握一定的设计理论(万一想要转岗做交互也有理论基础不是...)。
本文的内容源于Page Laubheimer在Nielsen Norman Group的分享。
定义:
卡片式设计通常与扁平化设计2.0相联系起来,因为卡片在一定程度上继承了扁平化设计的美感,同时也通过引入视觉深度而增强了内容的点击感。
定义:卡片式设计通过在一张大小、形状类似于扑克牌的卡片上呈现一些简短但相互关联的信息来代表和展示某些复杂的信息详情,卡片与信息详情通过链接相互关联。
卡片式设计的4个关键特征:
a) 卡片呈现信息的群组。一张卡片中通常包括多种不同的媒体信息,如:图片、标题、概要、分享图标或者是行动召唤按钮;这些不同的信息通常与同一个信息详情(如电商详情页、微信文章等)相互关联。
b) 卡片呈现的是总结性的信息并与更多的详情信息相链接。卡片呈现的内容通常是一个信息详情中最有用、最吸引人的部分,并将用户引导至详情信息上去。
c) 卡片与物理世界中的卡片相类似。卡片的边界设计将不同的卡片相区分出来,通过卡片的阴影设计展现出视觉深度将增强卡片的点击感。
d) 卡片式设计允许更加灵活的排版。卡片所连接的信息详情的具体内容将在很大程度上影响卡片的形状大小,则通过规定卡片的对齐方式有利于对多张卡片进行排版。
卡片式设计的应用:
1. 在展示搜索内容时,使用列表而不是开片。这主要是因为卡片多变的尺寸:
a) 卡片的排版通常无法突出内容的等级顺序,当然是越大的卡片越容易被注意到。
b) 列表更利于进行比较。列表上内容的展示位置是固定的,信息更有可能出现在用户预测的位置上。
c) 与列表相比,卡片占用更大空间,给用户的记忆负荷更大。
2. 卡片更适用于展示多种信息的集合体,而不是某一个单独的信息种类。
卡片式设计尤其适用于在同一界面、同时展示不同的内容类型。在这种情况下,卡片的边界将不同类型的信息清晰的切割出来。对于同类的信息应该使用列表来增强不同界面的可读性和不同条目间的可比性。
拓展阅读:
什么是卡片式设计?中介绍了更多卡片式设计的按钮。
形式与功能:卡片式设计思考 中介绍了卡片式设计在设计应用中的部分优点。