卡片列表如何提升设计感？来看这个实操案例！

一、全文速览图

很多设计师做的界面，经常被甲方说是交互稿，比如这张：

但是这全是文字之类的列表，怎么优化啊，怎么做不都是类似交互稿吗？

别急！

我们看下优化后的：

什么思路？我们来分享下过程！

二、找参考界面优化视觉

首先解决头图卡片过于简单，缺少设计感问题，我们可以往流行趋势方向找参考 —— 毛玻璃质感卡片。

参考找好了，接下来就是优化卡片质感了。

三、优化卡片细节

1. 给卡片上质感

为了让卡片有上透下实的那种通透感，我们给卡片加一个透明度渐变；再给描边加上反向透明渐变，体现玻璃折射厚度。

2. 给卡片添加细节

给卡片下方加入微弱模糊蓝色，让卡片透出点点背景色，增加透明效果。

给卡片加内阴影增加玻璃圆润的厚度。

再在卡片下方加个稍暗一点图层模糊的阴影，衬托玻璃的反光，增加与背景距离感。

这样玻璃质感的卡片细节加完了，我们就可以放入界面看看效果了。

3. 背景拉渐变

为了突出卡片的毛玻璃轻质感，可以添加渐变背景。我们根据 App 的类型选择清透的蓝色渐变作为渐变背景色。

4. 加上文字排版

卡片的毛玻璃设计效果完成后，我们就可以加上文字信息，进行排版。

整体头部卡片视觉的效果和细节拉满，我们再看看完成前后的对比图。

以上就是提升卡片质感的设计小技巧。

学会了，点个赞吧～