让UI界面设计更美观的几个卡片设计技巧

卡片是UI界面的重要组件部分，是存放信息的容器盒子，当今数字市场几乎每一个应用程序或网站设计都在大量使用卡片。今天我们介绍一下可以让UI界面设计更美观的几个卡片设计技巧。

卡片具体是什么？
Card 是一种UI组件，包含有关单个主题的信息。一张卡片可以包含几个不同的元素，但它们都应该是关于一个主题，该卡片用作更详细信息的概述和入口。在视觉设计方面，卡片可以有很多不同的布局方式，虽然没有硬性规定，但典型的卡片布局具有以下元素：
图片/视频区，适合容器区域的图像或视频。
主标题/次标题
信息描述，简短的摘要。
操作区（可选），与功能相关的操作指向。

UI卡片设计原则
高效：避免使用无关信息或操作使卡片过载，卡片应仅包含基本信息和操作。
意义：每张卡片都应包含帮助用户做出决定的信息。
简约：卡片的布局会影响它的感知方式。每张卡片都由内容块（文本和图像等元素）组成。内容块应该以清楚地表明层次结构的方式放置在卡片上。
独立：一张卡片应该是独立的，而不是依赖于其他卡片的上下文。
变形：卡片可以变形以显示其他内容。
响应：卡片可以自适应应可用空间。

何时使用卡片？
卡片更适合浏览信息而不是搜索。当您使用卡片设计布局时，关键思想是让用户快速消化大部分内容并深入了解他们的兴趣。当用户需要比较多个选项时（例如，当用户需要比较电子商务页面上的几个产品时），卡片不是正确的选择。由于卡片仅提供有限数量的内容，因此它们使用户的比较过程变得更加困难。最好使用列表或网格视图。

下面介绍几个卡片的设计类型和技巧：

使用相关图像
基于卡片的设计通常严重依赖视觉效果（图像或视频），因为视觉效果是用户在扫描卡片时首先注意到的。选择一个相关的图像是至关重要的——它可以让你一目了然地传达一个单元的含义。请注意，图形会按比例缩放，因此请务必在您设计的所有平台上预览它们。

优先考虑文本信息
任何需要用户阅读的内容都应作为文本包含在内。卡片应提供有关特定单元的信息摘要。不要使用卡片来显示长文本。相反，提供一个简短的概述并确保他们鼓励用户进行更多探索。争取有 50-60 个字符的简短描述。

对内容使用简单的排版
一般来说，建议卡片中的文本使用无衬线字体，因为这样的文本在大屏幕和小屏幕上看起来都一样好。

使用阴影来指示卡片容器
UI元素应始终传达其含义。用户应该知道如何通过查看特定的 UI 元素进行交互。在卡片设计方面，阴影效果有助于指示卡片，轻微的阴影表示整张卡片是可点击的。如果您计划展示一组卡片，请考虑对集合中的所有卡片使用相同的视觉属性。

指示卡片中的交互元素
如果UI卡包含交互元素，则必须清楚地指示这些元素。我们建议使用视觉分隔线来分隔卡片中的各个区域。分隔线可以是可见的（例如下面示例中分隔各部分的 1 像素线）或者可以使用空格创建它们（格式塔邻近法则规定，彼此靠近的项目被视为分组）。在每个块周围使用空格，使用户更容易分隔不同的部分。

避免在移动设备上的卡片内使用滚动
卡片内容可以高于最大可用屏幕空间。在这种情况下，不应滚动卡片内容。否则，您可能会产生不可预测的滚动行为（在滚动中滚动）。

使用父子转换来显示更多信息
卡片是可变形的UI组件——它们可以变形以显示额外的内容。卡片应展开以在屏幕上填满附加信息。当涉及到动画过渡时，建议避免花哨的动画效果，例如翻转这种效果需要过多的注意力，并且当用户经常看到这种效果时很快就会变得烦人。

支持熟悉的手势
如果在移动设计中使用卡片，请考虑更多支持点击和滑动交互手势的卡片设计。