UI界面设计流行趋势，卡片式设计风格如何做？

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

时间：2023-09-27 17:00:02 来源：网站运营

UI界面设计流行趋势，卡片式设计风格如何做？：UI界面设计中，卡片式设计已经是一种非常常见的设计形式，这也是当下流行的一种设计风格。卡片设计，是针对网页设计中的卡片作出分析，设计卡时，应该注意什么？下面就让我们一起来看看吧~

什么是卡片式设计？

卡片式设计是一种UI设计模式 (UI design pattern)，UI中的卡片借用现实世界中的卡片的特征和概念。卡片可比作为一个大小可伸缩的容器，通常一个卡片中会集中承载一种或以一种元素为核心的一小组元素。不同的元素在不同的卡片中各司其职，不同的卡片组合到一起，构成功能性的页面或者组合。

卡片式常见形式

卡片是移动端产品常见的设计形式，承载着图片、文字、按钮等内容。根据展现形式，卡片基本可以分为3大类：边距卡片、悬浮卡片、通栏卡片。





•边距卡片

边距卡片通常采用带圆角形式，利用阴影以及四周的边距形成页面留白，提升整体设计层次感，通过投影、前后颜色的设定，让内容与背景之间产生视觉空间感，在页面设计中应用更加广泛。





•悬浮卡片

悬浮卡片主要用于功能集合或者页面内容扩展场景，目的是提升页面的操作效率。








•通栏卡片

与边距卡片相比，通栏卡片没有左右两端留白，只保留上下边距，可展示图片、文字的空间更大。卡片与背景的关系用一条背景色块抽象表现，通常不会增加阴影，边框线等样式。




它更像一种在极简列表式和卡片式设计之间的折中选择，既保留了卡片式的分层方式和强交互性，又使页面变得更简洁。

卡片式设计原则

卡片设计的基础规则，相信大家多多少少都有所了解，不同平台的规范差异性不会有太大本质上的区别，更多的差异主要在处理技巧和方式上。




•圆角的规则

圆角的设定实际上没有太多的原则问题，只要符合整体的风格调性即可。当然不同的圆角也能表达出不同的质感，大圆角表达柔和、小圆角表达硬朗。







以卡片的圆角作为基础的参考值往内推算整体的圆角使用规范，卡片与卡内的元素形成合理的比例规则。







边距卡片通常采用带圆角形式，利用阴影以及四周的边距形成页面留白，提升整体设计层次感，通过投影、前后颜色的设定，让内容与背景之间产生视觉空间感，在页面设计中应用更加广泛。




•投影深度

投影的视觉效果会直接影响着整体卡片的质感，太深太大的投影会显得整体卡片过于厚重，太浅太小的投影则显得过度生硬，因此合理的数值比例则可以让卡片看起来自然有质感。给同学们分享一组数值规律，我们可以按1:2或1:3，例如Y轴偏移10px，模糊度则设定为20或30px，这样成比例的数值出来的效果会较为自然，如下图：







•边距设定

在设定卡片式的边距时可以适当应用删格系统，删格系统解决了一些基础的板式问题，有助于提升设计的规范性，让设计更加有迹可循。让边距与内容形成固定的关系，这样可以帮助整体的卡片设计更加具有细节和规则。







•标题文字大小和重量

标题主要用于简短的说明每个模块的内容，并且在长页面浏览中起到引导和定位的作用。但当字体较小时，用户会倾向于“细读”；而字体较大时，用户更倾向于“跳读”。如果字体粗细使用错误，会影响可用性和美观性。





标题与正文字号大小差异建议在6-10px，这样可以更好的拉开差异，让标题更具有标题感。

卡片式设计特征

•反应迅速

为了满足各种屏幕尺寸的需求，卡片设计可以帮助用户非常方便地专注于特定内容，还允许我们在设计过程中合理，简洁地布置内容。




•井然有序

混乱的网站令人头疼。当我们在页面上组织各种元素时，卡片设计可以为这些内容的布局提供出色的顺序。







•易读性

卡片设计的一个非常重要的特征是它们所包含的信息非常简洁，这使它们变得有趣而引人入胜，但同时也使网站的内容相对简单并快速浏览一目了然。




•受社交媒体平台青睐

想想如何建立社交媒体网站？他们需要的是清晰，易读且快速的显示。再次考虑卡设计，您没有找到连接吗？卡设计最著名的例子是Pinterest和Dribbble。







•平等

卡设计的另一个特点是平等。当然，这里的平等不是绝对的。也就是说，每个卡片在整个网页的卡片设计中的重要性几乎是相同的。这省去了所有人对内容进行排名的麻烦。




•多功能性

名片设计可用于任何行业的几乎任何目的，并且其创作灵活性非常好。可以说，设计风格还没有定论，这给了设计师很大的创作空间。

卡片式设计的注意事项

•避免过多层级

从整体来说，卡片式的设计本身就是增加了基础背景的层级表现，为了保证内容展示和浏览体验，不建议在卡片上再二次叠加块状式设计。特别是单个卡片中，避免多个卡片并排展示，造成内容展示过于碎片化，增加用户的浏览负担。




如果在项目中遇到内容层级需要多层级的表现，我们可以通过利用拉通分割线和利用浅色背景底色，这两种方法来区分内容层级。







•造成纵向空间浪费

由于卡片必须要增加上下间距形成独立空间，会导致页面的长度增加。因此对于内容结构相似的模块，如非必须，不要盲目采用卡片形式。例如通讯录，微信朋友圈、商品搜索列表页面等，采用了简单的分割线进行内容区分。既避免了页面空间的浪费，又提高了用户的浏览效率。




•信息要简单

当你想到卡片式设计时，简洁一定是其精髓。“每张卡片只承载一个信息”你可以把卡片设计囊括了各种元素，但每张卡片只能包含一个信息或者内容，这可以让用户选择自己想要的内容去阅读或者分享 。





•把握好界面的分区，避免过于拥挤的排版

卡片设计具有独特的视觉空间感，但卡片与卡片之间也会有分隔，因此在设计时更应该对内容进行归纳，避免产生过多的小块卡片而导致排版过于拥挤、凌乱或者内容不够宽度展现的情况。