卡片作为信息载体，因为其美观、小巧、兼容性强等特点而备受青睐，目前正逐步成为前端设计者们喜爱使用的宠儿。相比传统单一的页面设计，卡片设计提供更多个性化的用户体验，使界面设计清晰平衡、富有美感、简约时尚而又具备良好可用性。
卡片的细节不仅在于圆角和阴影，也在于内容变长后还能否读清、主要动作是否容易识别。下面按造型、内容、效果和细节四个方面展开。
比较卡片方案时，应把它放回列表和详情页一起观察。借助Pixso 的界面设计功能在同一份设计稿中调整布局与组件，可以检查不同内容长度下的信息层级是否仍然清楚。
细节一：卡片的造型
圆角的选择
常见的卡片弧度形式有4类：直角、小圆角、大圆角、特殊圆角。圆角大小为4px、8px、12px等等。注意：圆角越大，可用面积会越小，需要根据实际场景进行平衡，以视觉上舒服为宜。卡片设计中，不同的圆角，能表达出不同的质感。
•小圆角：视觉印象是硬朗，多用于严肃、高端、冲突感强烈的设计中。
•大圆角：给人的感觉是有亲和力、柔软、安全的，多用于儿童产品、娱乐性强的设计中。
Pixso建议，在设计的时候，根据自己的产品属性选择气质相符的圆角设计很有必要。
卡片的比例
卡片的比例设计上，可以参考一些常见构图比例。比如约1.618:1的矩形或1:1的正方形。当然，实际设计需求中的比例，还是要结合内容的多少来具体分析。
这些比例可以作为构图参考，但不应仅因接近某个比例就强行调整。先容纳标题、图片和必要操作，再判断是否需要改变卡片宽高；文字卡片尤其要允许内容决定高度。
异形卡片
在设计中，我们可以对卡片进行异形设计，用来达到我们想要的风格表现。当然，在一个页面内尽量不要有太多的异形设计，尽量使用页面中的首个卡片进行差异化处理，让整体表现出一点不同即可。异形轮廓也可用于卡片内的插画：下方引导页保留矩形底卡，用插画形状变化丰富视觉，这与改变整张卡片轮廓不同。
细节二：卡片的内容
文字
若在设计上使用了卡片式的设计风格，那在一些长文表现的界面建议去除卡片。长文章的页面更强调阅读的沉浸感，用户需要更多的专注于文字，这时候无边的体验更适合。
间距（网格法）
好的设计都有规律可循，而且往往能减少时间，提高效率。卡片设计中的内容间距通常采用8的倍数数值。8可以作为常用间距步进，但不要求所有元素尺寸都是8的倍数。采用 0、8、16、32、64这样整倍的间距，不仅灵活，而且易于换算。
在实际使用8为系数时，某些情况下我们会发现间距过大，这时也可以采用2px/4px网格去进行设计。在采用相同倍数时，基数越小，元素之间距离越小；基数越大，页面的留白越多。在设计时，我们按照间距规范合理设定即可。
减少线框
卡片式设计中应尽量减少线框，多用留白来进行内容划分。通常，用于分隔内容的线框可以用空白代替。我们设计的大多数UI元素都包含在线框中，因此，适当去除多余边框，可以使页面看起来不那么密集，并提供更多的呼吸空间。
层次清晰
图像和文字的层次结构必须清晰才能使卡片看起来有吸引力，更易于用户使用。保持这种结构有助于确定信息的位置，更有效地传达信息。
例如：在Pixso社区资源的社交聊天类APP设计案例中，图片和文字之间结构清晰，整个引导页面视觉上富有层次感，能让用户更加容易完成引导任务。
内容出界
卡片设计具有独特的视觉空间感，但卡片与卡片之间也会有分隔，因此在设计时更应该对内容进行归纳，避免产生过多的小块卡片而导致排版过于拥挤、凌乱或者内容没有足够的展示空间。
把课程卡片放进真实内容里，看层级是否还成立
假设课程列表中的一张卡片包含封面、课程名、讲师、课时、价格和“查看课程”。最先要让读者判断的是课程讲什么，讲师与课时负责补充判断，价格与动作帮助他继续选择。先确定这条阅读顺序，再决定字号和留白，不要因为价格短、容易做大，就让它抢走课程名的位置。
用两条课程名试一试：“入门图标设计”和“从需求拆解到可交付组件：产品界面设计实战”。当第二条变成两行时，可以让标题区容纳两行，并让按钮在同一行卡片中保持稳定位置；如果采用截断，要能在详情页或可操作的展开入口读取完整标题。只有外观齐整、内容却被切掉，不算完成排版。W3C 的文字间距说明强调，用户调整文字间距后不应丢失内容或功能；这也提醒设计师不要把文字区域锁死在只够默认文案的高度。
课程卡片需要横向比较时，统一封面比例与同一行的关键信息位置有帮助；展示故事或不等量图文时，则可以让卡片自然增高。先决定读者是在“比较同类项目”还是“连续阅读不同内容”，再选择等高或自然高度，而不是一律套黄金比例。
封面可裁切，信息与动作不能随意消失
给封面准备横向和窄屏两种裁切，确保主要对象仍能辨认；如果封面含课程文字，不要让这段文字承担正文中没有的关键信息。可以把图片作为主题识别，把准确课程名保留在卡片文字区，这样图片加载失败时，读者仍能判断项目内容。
如果点击卡片主体进入课程详情，收藏按钮就是一个独立的次动作。它需要单独的命中区域、可识别的状态和文字说明；点击收藏不应同时打开详情。触屏没有悬停态，因此不能把价格或唯一入口只放在鼠标悬停后才出现的位置。阴影和悬停位移可以辅助表达反馈，但不能代替明确的动作关系。
在 Pixso 中保留课程卡片的视觉风格，再复制出短标题、长标题、图片缺失三个内容版本，比较同一规则是否仍成立。需要调整间距时，先改组件内的内容关系，再调整整张卡片的外部留白。卡片适用场景与整体组织方式可以参考站内卡片设计相关内容；本例重点是把已经选定的卡片样式做得清楚、稳定、可操作。
细节三：卡片的效果
颜色搭配
卡片的颜色搭配可以使用纯色和渐变色，但纯色或渐变本身并不保证文字对比度，仍需检查实际文字与背景的组合。
阴影和渐变
通过对按钮、卡片等进行投影运用可以增强卡片立体感与层次感。注意：我们在制作投影时，需要根据不同背景改变投影的颜色、透明度。投影的权重要符合页面设计的氛围，投影的运用是为了增强元素的立体感与层次感，而不是影响整个页面的视觉平衡。
细节四：卡片的细节设计
光感
卡片设计的光感细节能提升设计的质感。
投影
卡片设计中如果加投影的话，不要加得过重。取色时尽量选择背景颜色的色相，稍微加深一些，尽量避免用黑色来做投影，会显得画面脏；投影的距离、模糊和透明度应与层级和背景一起判断，避免仅靠加大距离表现质感。
Pixso总结：卡片是UI设计师发挥创意的画板。它不仅仅是一个拟物化的卡片UI控件，还是创建优质内容，营造优质用户体验的重要布局手段。看了以上4个优质的卡片式UI设计的细节分析，希望你能从中思考并且得到更多设计灵感。当然，也可以打开Pixso社区资源，上面有海量卡片式设计案例可以免费下载使用，给你带来不一样的灵感指引！
