咨询电话:
15628812133
21
2024/12

新手科普!UI组件中的产品卡片设计(二)卡片样式

发布时间:2024-12-21 17:11:14
发布者:guokai
浏览量:
0

产品卡片的设计主要有三种样式,分别为全包裹样式、半包裹样式和开放(完全不包裹)样式。

首先是全包裹:有明确的卡片背景,一个产品为单独的一个模块,将图片和文本全部包括在内部,每个产品之间互不影响,互相独立,这种样式目前主要在使用的是阿里巴巴,总体来说,比较不常见。

全包:有明确的卡片背景,将图片和文本全部包括在内部,比较不常见。

其次是半包裹的设计:图片部分会占满卡片的上半部分,而文本的位置跟全包一样,属于比较常见的一种。需要注意的一点是如果图片跟全包一样需要做圆角,图片下方的两个角是不需要给圆角的。可以参考网页版的京东,产品选中的状态

半包:图片部分会撑满卡片的边界,而文本依然在卡片内部,

最后是开放(完全不包裹)样的卡片设计:这种设计图片没有明确的背景,图+文本自然组成一个卡片区域,在设计上通常会让文本两侧较之图片的宽度稍微向中间缩进一些距离,让文本区域的宽度小于图片宽度,在让亲密性表现得更舒适。一般情况是两侧同时缩进,也可以将左侧与图片对齐,只缩进右侧。可以参考网页版淘宝的产品卡片设计样式,就是经典的开放式卡片设计。

开放式:没有明确的卡片背景,图+文本自成卡片区域

关键词:
返回列表