卡片已经成为 UI 设计的主要内容。您可能已经在 Pinterest 等网站、Facebook 的最新 UI 和新闻网站上看到过它们。
有多种卡片类型可以以不同的方式使用，但都有一些共同点：
• 它们基于物理卡片，因此使用阴影等设计风格使卡片从背景中脱颖而出。
• 它们对相关内容进行分组，节省空间并减少页面上的视觉混乱。
• 他们的主要目标是鼓励用户点击和探索更多内容。
卡片的可扫描性不如列表，并且更适合浏览属于各种主题的项目集合，而不是搜索特定内容。
文字卡片
虽然卡片有各种形状和大小，但最基本的形式是文本卡片。它在仪表板应用程序之类的东西上很常见。文本卡由标题和辅助文本组成。
但是，卡片中唯一需要的元素是容器。所有其他元素，如文本、媒体、缩略图、图标、按钮等，都是可选的。
丰富的卡片
丰富的卡片 包含各种复杂的信息，包括鼓励用户交互的图像、视频、图形、文本和链接。重要的是要给元素足够的空间并清楚地表明层次结构，这样它仍然很容易扫描和理解。
一张普通的卡片可能包含不同类型的媒体，如图像、标题、摘要、图标或 CTA 按钮，但它们都应该呈现一个可消化的单元。
用户卡片
用户卡 是一种特殊类型的卡，已在社交平台上普遍使用。它们的主要目的是提供基本的用户信息，通常是用户名和头像，但也可能包含活动状态、简历、CTA 按钮（如关注、呼叫或连接）或其他上下文详细信息。
使用卡片布局进行内容浏览
卡片是将异类项目组合在一起的绝佳解决方案。每张卡片可以包含不同类型和数量的信息，因此会占用额外的垂直空间。卡片可能包括也可能不包括富缩略图、标题、辅助文本、主题标签、号召性用语按钮等，但它们都与一个概念相关联。
卡片布局更适合用户 浏览信息 而不是搜索的界面。这是因为：
• 卡片缺乏强大的层次结构。所有卡片都是平等的，并且排名相同。当用户搜索时，他们假设列表顶部的项目是最相关的。
• 卡片的可扫描性不如列表。由于它们的高度灵活，元素的位置不是固定的，这使得它们对人眼来说不太可预测。当人们搜索特定项目时，他们需要一致性以实现更高效、更快速的搜索。
• 卡片占用更多空间，因此需要更多滚动。当用户搜索时，频繁的滚动需要更多的脑力劳动，因为用户需要消耗他们的短期记忆，而不是仅仅查看页面并在单个视图中查看更多项目。
平面卡片
平面卡片 的样式可能更具挑战性，因为它们最不类似于实体卡片。它们不包括阴影或轮廓以赋予设计深度。因此，他们需要一些其他类型的视觉提示，例如与页面其余部分颜色不同的背景。考虑向卡片或其 CTA 按钮添加微交互以指示其可点击性。
谨慎使用平面卡片，因为它们可能看起来是静态的，并且不会像高级卡片那样鼓励互动。
轮廓卡片
与高架卡片一样，轮廓卡片会吸引用户的注意力并将项目分组到一个单元中。但是，他们没有突出阴影，而是使用边框笔触来突出其内容。然而，轮廓卡片是扁平的，并且不像高架卡片那样鼓励用户交互。
高架卡片
最常见的卡片样式是 高架卡片。这些卡片使用阴影从页面的其余部分中脱颖而出，漂浮在背景表面之上。阴影还有助于指示可点击性并增强一张卡片中元素的统一性。
高架卡片在设计中很常见，因为它们最容易模仿物理卡片的外观。增强悬停时的卡片阴影至关重要——它可以更多地传达可点击性，并为用户提供有关其操作的反馈。
应用适当的卡片阴影
添加 卡片阴影时，您通常会从现实世界中汲取灵感，使用较深的颜色并使用偏移量。确保阴影在所有四个边缘上都可见，以获得最逼真和引人注目的外观。当您只应用 产生更锐利的定向阴影的关键灯光时 ，您可能会过度使用卡片设计。
根据应用风格，您可以应用模糊效果来增加高度并降低不透明度以创建更自然的外观。
维护信息层次结构以更好地扫描
无论风格如何，每张卡片中的信息层次结构都至关重要。良好的层次结构首先将用户指向卡片中最相关的内容，使关键元素脱颖而出，并引导用户进行交互。您希望用户首先注意到的卡片上最重要的元素是什么？使用颜色、不同字体、对比度、形状、对齐、方向和其他可视化工具来创建信息层次结构。
添加足够的填充以提高可扫描性
Padding指的是卡片元素周围的空白区域，它也有助于视觉层次结构。如果没有足够的空间，卡片最终会显得杂乱无章并降低可用性。填充使元素突出（这对于主按钮至关重要）并且也增加了卡片的整体可扫描性，因此用户花费更少的时间来寻找他们需要的东西。
间隔良好的内容增加了页面的理解力，并帮助用户专注于重要的事情。
区分主要和次要行动
根据卡片的具体功能和内容，它们可能包含多种类型的操作，最常见的是按钮或链接的形式。基于动作的元素需要保留卡片的视觉层次结构，同时还需要以一种使最重要的动作比任何次要动作突出的方式来设计样式。
不要忽视视觉层次结构的可访问性。辅助按钮应该对所有用户都足够可见。
本文内容为转载
网友评论