设计干货丨卡片设计基础入门指南

时间：2023-09-27 10:30:02 | 来源：网站运营

时间：2023-09-27 10:30:02 来源：网站运营

设计干货丨卡片设计基础入门指南：卡片设计在UI中是非常普遍的一种设计形式，几乎无处不在。今天主要面向UI设计新人分享卡片设计的知识要点及实用技巧，希望大家能有所收获。

01 什么是卡片设计

卡片是一个UI组件，包含了单个主题相关的内容信息和交互操作。卡片可以包含各种元素，比如文本、图形、按钮等等，但它们都应该属于同一个主题。

02 卡片设计的优点

卡片设计的本质就是将信息进行整合，有较强的交互能力，下面来了解一下卡片设计的几个优点：

1.简洁直观

卡片将信息、图像归类整合在一个方块里，清晰直观，同时又可以避免页面因为信息多而散乱。卡片排列方式是按列或行的方式对齐展示，视线沿着横向或者纵向浏览就能快速找到想要的信息。

2.易于阅读

卡片设计将信息、图像按维度分类整合到一个卡片里，通过增加多维度的标题，将信息进行清晰明确的分类，这样可以有效减少用户思考的时间，并能快速找到自己所需要的信息。

3.可包容性强

卡片几乎可以被用来容纳任何形式的信息，比如用户发表的动态，资源信息，用户资料卡片，轮播信息，商品详情等等；在承载操作功能方面，信息模块之间有明显的区分，视觉终点可以让用户有片刻停留，在此放置操作按钮，有利于用户操作。

4.视觉上赏心悦目

卡片对图片和色彩有很强的依赖性，在卡片设计中经常会使用渐变色和好看的图片。这些都能够快速有效地吸引用户的注意力。

5.响应式设计

卡片设计可以轻松地调整长宽大小，以适应不同屏幕的水平和垂直正面，这意味着用户可以在所有设备上获得统一的体验。

03 卡片设计的使用技巧

1.卡片的造型

1.1圆角的选择

不同的圆角，所带来的气质是不同的。圆角很小，视觉印象是硬朗，高冷，具有攻击性的，多用于严肃、高端、冲突感强烈的设计中；而更大的圆角给人的感觉是有亲和力，柔软，安全的，多用于儿童产品、娱乐性强的设计中。所以在设计卡片的时候，根据自己的产品属性选择气质相符的圆角设计很有必要。




1.2卡片尺寸比例

卡片的比例，推荐使用一些美感定律，比如黄金比例（1.618），白银比例（1.414），青铜比例（1.732），正方形之类。当然，实际设计需求中的比例，还是要结合内容的多少来具体分析。

2.卡片的颜色

2.1纯色

卡片设计的颜色搭配常用的有纯色和渐变色。纯色卡片设计会让界面整体的视觉更简约高级，建议在使用纯色卡片设计的时候，搭配一些图形纹理，可提升画面细节和质感。




2.2渐变色

渐变色卡片设计目前在ui应用的更多，色调活泼，更容易出彩。




3.卡片的内容

3.1文字

卡片上的文字不要过长，通常横向不要超过42个字，纵向不超过5行为宜。过多的文本不建议使用卡片设计的形式。

3.2间距

卡片上的文字间距也要遵循一定的规律，比如4的倍数、8的倍数等等。大小比例就尽量用黄金比例来处理，这样做目的一方面是为了让界面有秩序，另一方面是提升决策效率。

3.3用留白来代替线框

卡片设计中尽量减少使用线框，多用留白来对内容进行分割。

3.4层级对比清晰

卡片的内容层级要做好，标题和内容之间的差异要明显，要让用户一眼能识别出。




4.卡片设计的细节

4.1光感

卡片设计的光感细节能提升设计的质感。

4.2投影

卡片设计中如果加投影的话，不要加的过重。取色时尽量选择背景颜色的色相，稍微加深一些，尽量避免用黑色来做投影，会显得画面脏；投影的参数上，距离可以设置的大一点，让投影更自然一些。

04 卡片设计的适用场景

1.信息流中的卡片设计

信息流中的卡片设计重要的一点就是保持信息层级简单清晰，它们应该有一个一致的、重复的结构，使读卡片的人更容易理解它们。




2.电商卡片设计

电商产品的卡片设计可以帮助访问用户转化成客户，一个优秀的产品卡片应该能够引起用户的注意，激发用户对产品的购买欲。

3.个人中心卡片设计

个人中心的卡片设计突出了个人的信息，可以更简洁明了地向他人展示个人信息。

---

以上就是今天分享的关于卡片设计的一些知识要点及使用技巧，期待大家能够有所收获。