尽管卡片的基本概念并不新鲜，但仍然有一些复杂的因素可以决定整个用户体验的成败。
首先，卡片的概念是基于 共同区域的原则。它指出，人们将多个项目视为集成在一个边界内，就像一组相关元素。这一原则甚至压倒了 邻近法则 。由于边界和背景相同，彼此远离的元素似乎是同一个整体的一部分。
这就是卡片的作用。了解如何使用对齐、阴影、字体和颜色等工具将帮助您创建易于扫描和导航的设计。
力求简单
水平分隔线可以帮助分隔不相关的元素或强调它们之间的层次结构。但是，它们在卡片设计中很少有帮助。使用排版工具和负空间来增加距离或使内容脱颖而出。
卡片设计中简单的基本规则有助于消除视觉上的混乱，这种混乱会影响易读性并增加认知负荷。
对异类物品使用卡片
卡片非常适合组合异类物品。通过建立边界或共同背景，卡片表明内部的元素是相关的，而外部的则不相关。
将不同主题的项目放在一个边界内会增加认知负荷，让用户怀疑内容是否相关。相反，将内容分成逻辑组以帮助用户更快地导航。
使整张卡片可点击
如果每张卡片只有一个动作，请随意使卡片完全可点击。它鼓励互动并减少工作量。
要使卡片看起来可点击并增强深度，请添加柔和的阴影或背景颜色变化。
使用对比标签
在图像或视频上应用标签时，请争取前景与背景的对比。确保有视觉障碍的人在阅读覆盖在图像上的标签或文字时不会遇到困难。
黄金法则是保持 4.5:1 的对比度。诀窍是在图像上放置一个较暗的覆盖物并调整其透明度。这样，图像就可以保持足够的可见性和对比度。
使用可视化工具增强卡片内的统一性
它们被称为卡片，因为它们看起来像卡片。如果没有阴影、边框、共享背景等视觉工具，每个组的项目看起来相关性降低，并为扫描页面的用户带来更多认知负担。
使用明确定义的容器帮助卡片脱颖而出，作为一组相关内容获得更多关注，并增加理解力。
以渐进的方式呈现信息
卡片用于可消化的内容——用户可以打开它们以了解更多信息。这是渐进式披露技术的一个很好的例子，它以渐进的、逐步的方式呈现信息或特征。首先，它有助于不让大量内容压倒新手用户，并增强系统可学习性的过程。其次，界面看起来更有条理和清晰。
保持正文文本简短，并用三个点截断它——它给人一种有更多探索的感觉，并邀请用户继续阅读。
提供足够的空白空间
内容塞满会阻碍流畅的扫描和整体的易读性。所以备份，并给它一些空间！如果处理得当，空白是对视觉层次结构的极好支持，将用户的注意力引导到内容的基本部分。
使用优质媒体获得信任
高质量的媒体表明您在与产品交互时关心用户及其整体体验。从长远来看，这些细节会影响您的声誉并获得用户的信任。模糊和颗粒状的图像可能会破坏交易，尤其是当它们带有用户无法阅读的重要信息时。
确保使用工具压缩图像，例如图像压缩器。
保持卡片标签简洁
卡片标签是产品缩影的一部分，好的缩影应该简洁。首先，人们不喜欢阅读。其次，数字接口，尤其是手机，空间有限。你不能简单地使用长句，因为它们不适合任何地方。
你能做什么？
• 删除不必要的修饰词、俚语、多余的标点符号（逗号、分号和从句）。
• 避免陈述明显的内容并保持标签大小，以便用户可以快速掌握信息并继续前进。
保持颜色层次
颜色层次结构的存在是有原因的——它有助于强调更相关的内容并抑制次要优先级的元素。当屏幕上的所有内容都被突出显示为重要时，没有什么是真正重要的，用户会发现很难集中注意力。
例如，标题比预览更相关，主按钮了解更多比添加到收藏夹和保存的辅助按钮更重要。
不要过度使用装饰
如果卡片本身已经有阴影并且非常强调，那么将阴影应用到您的媒体对象、按钮或图标可能是矫枉过正。它划分元素并破坏视觉层次。
过多的文体装饰掩盖了设计的简洁和锐利，使其看起来不整洁。
使用熟悉的位置作为菜单图标
如果您的卡片需要更多选项，请考虑添加一个通常位于右上角的“更多”图标。有时，您可以将它放在下角，但要保持与右边缘对齐，因为它感觉更自然。
此外，右侧按钮的位置对于通常使用拇指操作移动设备的用户来说更加方便。
对图像使用填充模式
对于不同比例的媒体， 填充模式 是最具视觉吸引力和风险最小的。它将图像设置为填充其容器，同时保持其比例。您不应该担心图像的一部分被裁剪。毕竟，卡片只是用户点击后会看到的更多内容的预览。如果裁剪感觉不对，请考虑调整图像位置和比例。
本文内容为转载
网友评论