UI设计中的卡片式设计认识
来源：厦门天琥设计培训学校 时间：2022/3/4 14:10:38
在现实生活中的卡片式设计可以说是无处不在，例如身份证、交通卡、银行卡、名片、便利贴、扑克牌、游戏卡......诸如此类的生活常见品都是以卡片的方式存在，其共同点都使用一个容器中承载着内容，并且具有“便携性、信息简洁和相对独立性”。
UI设计中卡片的使用场景
在项目设计之初要分析了一些使用卡片设计的App，并且需要从中整理总结了几个较为常见的卡片式设计的使用场景。
Feed流
卡片式的feed流设计是一种非常常见的设计，早在前几年Facebook、Google+等产品就使用了这一方式，Feed流作为一种长内容的媒介，用户需要长时间的滑动看内容并筛选有效信息，卡片式设计很好的解决了内容与内容的区块分隔，让用户在长屏幕滑动中依旧可以很好的明确每一块的内容。
瀑布流设计
瀑布流的出现让单屏区域内显示了更多的内容，而内容较多的情况下，使用卡片式设计较好的对内容进行了区域划分，让左右上下的内容从整体中具有相对的独立性。
左右滑动组合型内容
卡片式设计具有较强的层次感，相比于拉通平铺更能呈现内容可滑动感受，并且块状化的设计让内容具有较高的区域分割感。
Tips提醒
作为非界面固定内容，卡片式设计可以让tips提醒设计变得更自由，在符合用户体验的基础上，它可以出现在任何我们想要它出现的位置。
结合手势的单块可互动内容
若页面中有且只有一个主内容，并且需要用户进行筛选时，可考虑这种结合卡片式设计与手势设计的方式。大大增强了用户对于设计的体验感知和丰富视觉表现。
卡券类设计
卡券类的设计实际上是一种物化映射的过程，我们在现实中看到的卡券造型，结合卡片式的拟物化设计，让用户在屏幕上可以更直观的感知，提升了设计的代入感。
集合型功能入口
集合型功能入口往往会有多个入口，使用卡片式设计让入口形成一个区域整体，可以做到既统一又相对独立。
个人主页顶部内容卡片
个人主页的设计往往会在氛围上营造沉浸感，卡片式的设计可以把关键信息进行概括收归，让原本单个的内容形成一个整体。
规则探讨
基础的卡片设计规则，相信大家在一些系统级别的设计指导规范中也或多或少都能了解到，不同平台的规范差异性其实不会有太多本质性的区别，更多的是处理技巧或方式的差异，而每个设计师对其理解的角度也会具有一些差异化，这里分享下我对于卡片式设计的一些基础想法。
卡片的质感打磨
同样的卡片设计，不同的人做出来的感受可能会有差别，而表达卡片质感的主要关键基础点在于：卡片形体、投影深度、卡片颜色对比，我们需要了解这些基础知识点之后，再结合实际的APP风格进行设计。
卡片形体
就像图标的图形设计一样，不一样的形体也能表达出不一样的气质，因此在设计的时候我们需要依据整体的风格进行表达。异形卡片的设计，可以让原有方方正正的卡片表达出差异化，从造型上打破一些传统的处理方式，再结合一些IP人物元素可以更加深入的表达出具体的内容氛围。
投影深度
投影的视觉效果，会直接影响着整体卡片的质感，太深太大的投影会显得整体卡片过于厚重，太浅太小的投影则显得过度生硬，因此合理的数值比例则可以让卡片看起来自然有质感。在项目中我常用的一组数值规律是1:2或1:3，例如Y轴偏移10px，模糊度则设定为20或30px，这样成比例的数值出来的效果会较为自然，
卡片颜色对比
卡片与背景的颜色对比会影响这卡片的整体质感，在设计时我们需要把握好卡片与底色的对比，不同的明暗对比出来的质感也会有差异。这里有两点建议：1.卡片色与背景色不宜太过接近或使用同一颜色，因为会影响卡片整体的空间质感或使得卡片的边缘锐度下降；2.深色背景上，尽量让卡片与背景色在同一色系或者明度不要差异太大，避免过于突兀。
在线咨询
电话咨询