带你解读备受设计师青睐的卡片式设计

大家在UI设计中爱用卡片吗？无论是b端产品还是c端产品，卡片式设计几乎无处不在，卡片已然是我们在UI设计中最常见的样式了，今天我们就来一起详细的了解一下UI设计中的卡片样式吧~

01 .

什么是卡片？

我们可以把卡片理解为一个容器，承载聚合不同的信息内容。在我们的日常生活中卡片样式也是特别多的，比如交通卡、银行卡、名片等，在卡片上聚集了某类信息，方便我们查看与携带。

在UI设计中我们也将卡片作为容器，去承载不同的信息内容，如图片、文字等，我们称之为卡片式设计。

02 .

卡片式设计的优点

很多设计师都喜欢采用卡片样式。利用卡片区分内容模块，减少分割线使用，让界面更加清爽、透气，除此之外，卡片样式还具有以下优点：

聚焦内容：采用卡片包裹的形式，将信息聚会在卡片里，方便用户阅读。

直观易理解：通过不同的卡片样式，将信息内容进行模块划分，用户可以直观地区分信息层级，高效获取内容。

更具吸引力：卡片的设计样式更加灵活、丰富，同时具备多种交互形式，具有更强的视觉冲击力与趣味性。

增加空间利用率：卡片可以采用堆叠、横向排列、上下滑动等布局形式，还可以收缩、折叠，节约大量空间，增加屏幕利用率。

03 .

UI设计中常见的卡片样式

Feed流

Feed流是很经典的卡片式设计。ins、facebook、小红书等都是采用feed流的设计形式，Feed流卡片常应用在资讯、电商、社交产品中，通过卡片形式将内容呈现给用户，同时用户也能很好地区分不同的信息模块。

瀑布流

瀑布流也是很经典、很常见的卡片式设计。通过卡片形式源源不断的将内容无差别的呈现给用户，常见于图库、社交产品中。

左右滑动卡片

左右滑动卡片增加界面Z轴利用率，让页面更具层次感。左右滑动卡片常见于社交、视频、音乐类产品中。用户横向滑动展示更多内容，提升界面空间使用率。

堆叠式卡片

堆叠式卡片能让用户对同类型内容进行快速筛选，配合交互手势，减少用户阅读同类型内容的疲倦感，增加趣味性，提升用户使用体验。最经典的就是陌陌的无感「左滑」，喜欢「右滑」。

卡券

卡券设计也是UI设计中很常见的卡片设计样式，卡券设计实际是现实中卡券的映射设计，通过视觉映射让用户直观的感受到有福利优惠、有折扣，刺激用户。常见于电商、外卖等产品中。

功能导航卡片

卡片也通常用来聚合产品各功能服务入口，起着导航与流量分发作用。常见于首页金刚区、服务页、个人中心页面中。

04 .

提升卡片精致度的小技巧

使用圆角

在信息识别方面，圆角比直角更加容易识别，在阅读体验上，圆角形式会更流畅，更易阅读。

轻投影

投影会增加界面层级感，卡片的投影效果一定要轻、且要有位移偏移。不要把卡片投影做得太实，平均分散在卡片周围，不然看起来就很重，不够精致。

添加质感纹理

在进行卡片式设计时，会出现信息少，排版后卡片很空不平衡的情况，或者想突出强调某一个卡片时，我们可以添加一些质感、纹理，让卡片更丰富饱满，看起来也会更加精致。但需要注意添加的元素一定要弱，不要抢了主体信息的层级。

05 .

总结

卡片式设计是UI设计中常见的设计样式，卡片会让界面信息层级更加清晰直观，节约界面空间...除此之外，卡片设计形式灵活多样，有很多能让设计师发挥视觉创意的空间，备受设计师们的喜欢，但我们也应记住无论哪一种设计形式都是为我们的信息内容服务的，切记为了美观、追求形式而忽略了内容呈现～