认识达内从这里开始

认真做教育专心促就业

运城达内ui设计培训卡片设计的用法与作用分析

发布：运城达内教育官网
来源：互联网
时间：2023-02-02 09:18

卡片设计是ui设计师在设计网页或者是在做活动宣传设计的时候会经常用到的一种设计形式，而本文我们就通过案例分析来简单了解一下，卡片设计的用法与作用分析。

运城达内ui设计培训卡片设计的用法与作用分析

1、活动中的卡片设计

卡片式设计的优点很多，它可以较好的对内容进行区域划分，解决了内容与内容的区块分隔，让用户在长屏幕滑动中，依旧可以很好的识别每一块内容。在电商活动中，我们通常将卡片看作一个容器，用于承载一类或者一组相关度较高元素。

由于电商活动会场内容较多，一个楼层可能包含单品、会场、品牌，关键词等内容。为了让内容更具整体性，且与主题氛围呼应，我们在设计中引入了卡片式设计。

2、活动卡片式设计的场景

卡片式设计在活动设计中出现的场景十分频繁，一般可以归为以下3类：

场景一：【单一内容卡片】

【单一内容卡片】一般由单个独立模块组成。在此类场景下，不会存在特别复杂的层级关系。例如我们看到的1个单品、1个店铺、1张优惠券，都属于此类场景。

场景二：【组合内容卡片】

【组合内容卡片】内容比【单一内容卡片】更复杂，通常是由多个独立模块组成，因为这些独立模块间内容具有一定的相关性，共同构成了一个整体，设计时需要传达这些内容的整体感，所以引入了卡片式设计。

场景三：【单一内容卡片】与【组合内容卡片】互相嵌套

嵌套场景中，内容层级较为复杂，一般都会存在多个小卡片和1个大卡片。这也是大促中为常见的一种，如果处理不好，就很容易出现“多层嵌套，层级复杂”的情况。

3、活动卡片基础设计原则

基于活动常见的卡片式设计应用场景，我们归纳了设计中需要遵循的原则。

内容层面：保持简洁，减少嵌套

在【单一内容卡片】或者【组合内容卡片】场景下，信息一般都不会过于复杂，保持信息简洁并不是很困难。但是碰到【单一内容卡片】与【组合内容卡片】嵌套时，往往问题较多。这也是我们在之前的项目中，出现问题多的一类场景。我们建议嵌套层级一定要尽可能少，否则整个页面将会非常复杂。

视觉层面：元素统一，减少装饰

视觉在卡片式设计中，会用到许多的装饰和元素，例如卡片的内容形态、卡片内容的颜色、投影效果等，这些内容共同组成了卡片的展示样式。卡片的圆角、卡片内字体的粗细与字号、卡片里的间距等作为基础的参考值，对整体页面的风格都具有不小的影响。

我们期望的是卡片与卡内的元素形成合理的比例规则，并在整个页面中保持统一。有了这个目标，就可以更好的指导之后的工作了。圆角的大小差异化呈现出不同的视觉感受和风格差异，在实际运用过程中，也会出现各种大小的模块。在设计时，需要考虑产品风格或气质是适合大圆角还是小圆角。在间距方面，更多的采用大模块里的分隔线方式来替代一个个的小模块，以达到减少层级的目的。

【免责声明】：本内容转载于网络，转载目的在于传递信息。文章内容为作者个人意见，本平台对文中陈述、观点保持中立，不对所包含内容的准确性、可靠性与完整性提供形式地保证。请读者仅作参考。更多内容请加danei0707学习了解。欢迎关注“达内在线”参与分销，赚更多好礼。

< 上一篇：运城达内IT培训机构web前端工程化发展趋势分析

下一篇：运城达内IT培训Java架构师与测试架构师的区别 >