卡片设计是UI设计中比较常见的设计形式,很多设计师都会用到这个。所以今天就来分享一些快速提升卡片设计效果的小技巧,大家可以看一下!


卡片造型


1. 圆角

不同的圆角,所呈现的效果不一样。圆角,视觉印象是硬朗,高冷,具有攻击性的,多用于严肃、高端、冲突感强烈的设计中;大圆角给人的影响是有亲和力的,多用于儿童产品、娱乐性强的设计中。所以在设计时,要根据产品属性选择合适的圆角。

做好这4个细节,帮你快速提升卡片设计效果!

2. 比例

卡片比例,可以使用黄金比例(1.618),白银比例(1.414),青铜比例(1.732),正方形比例等,但要根据实际情况选择合适的比例。

当你的实际比例比较接近上面讲到的比例时,可以使用上面的比例进行设计。如果你的卡片设计比例宽高比是1.5,可以直接使用黄金比例。

做好这4个细节,帮你快速提升卡片设计效果!
3. 异型

因为异型卡片具有较强的形式感和视觉冲击力,所以有些时候我们可以做异型的卡片设计,这个多用于游戏或运营相关的界面中,吸引用户的注意力。但这种异型卡片设计很难批量化设计,也不够耐看。

做好这4个细节,帮你快速提升卡片设计效果!


卡片效果


1. 颜色

卡片的颜色搭配可以使用纯色和渐变色,这些颜色与文字之间的对比要符合界面对比度标准。如果不知道怎么选择的话,可以多用白色。

纯色卡片设计会让界面显得冷静高级,但用不好的话会显得单调,沉闷。如果坚持使用的话,可以搭配一些图形纹理。

做好这4个细节,帮你快速提升卡片设计效果!

渐变色的卡片设计目前比较常见,画面显得活泼层次细节更加丰富

做好这4个细节,帮你快速提升卡片设计效果!

如果还是不知道如何选择配色,可以参考其他大神的作品。大家可以到dribbble网站上搜color,就可以看到很多优秀的配色方案了。

做好这4个细节,帮你快速提升卡片设计效果!
2. 图案

卡片设计还可以结合图案。这些辅助图形可以根据品牌符号来绘制,让用户了解品牌。

做好这4个细节,帮你快速提升卡片设计效果!
也可以运用简单图形,提升设计细节。比如下面设计作品,大家可以收藏更多设计作品,在设计中可以通过这些作品寻找灵感。
做好这4个细节,帮你快速提升卡片设计效果!
做好这4个细节,帮你快速提升卡片设计效果!
做好这4个细节,帮你快速提升卡片设计效果!
做好这4个细节,帮你快速提升卡片设计效果!
做好这4个细节,帮你快速提升卡片设计效果!

3. 图片视频

卡片背景也可以用图片和视频的方式进行设计,图片和视频的选择一般偏暗色。

做好这4个细节,帮你快速提升卡片设计效果!
做好这4个细节,帮你快速提升卡片设计效果!


卡片内容


1. 文字

卡片文字不要太长,横向不要超过42字,纵向不要超过5行。过多的文本不建议使用卡片形式。

做好这4个细节,帮你快速提升卡片设计效果!
2. 间距

卡片上的文字间距要有一定的规律,可以按网格法来规划,比如8px网格,10px网格等。比如下面设计中卡片就使用8px网格,各间距就会用8的倍数来做。大小比例就尽量用黄金比例来处理,这样做可以提升效率。

做好这4个细节,帮你快速提升卡片设计效果!
3. 减少线框

卡片尽量减少线框,多用留白。

做好这4个细节,帮你快速提升卡片设计效果!

4. 内容出界

有时候我们也可以将内容做出卡片界面之外,这是目前很常见的一种方法。

做好这4个细节,帮你快速提升卡片设计效果!
做好这4个细节,帮你快速提升卡片设计效果!


卡片细节


1. 光感

卡片中的光感细节能提升设计的质感。大家可以对比下下面图片,在卡片顶部加了1px高光线和斜面反光的细节前后的质感区别。

做好这4个细节,帮你快速提升卡片设计效果!
做好这4个细节,帮你快速提升卡片设计效果!
2. 投影

投影的细节,不要过重,要能与背景分离开。在取色的时候,可以选择背景颜色的色相,然后略微加深一些,不要用纯黑色来做投影,会显脏。投影距离要适当,太小会显得不自然,也太大会浪费界面资源。

做好这4个细节,帮你快速提升卡片设计效果!
3. 3D效果

3D卡片设计,因为不便于内容编排和阅读,所以带透视的卡片在实际UI中并不太常用。但在作品集包装和运营页面中,则可以带来比较好的视觉冲击力,可以尝试运用。

做好这4个细节,帮你快速提升卡片设计效果!

快速提升卡片设计效果的技巧就讲到这里,希望这些技巧能够帮到大家。