优惠券卡片怎么设计

上海/UI设计师/4年前/409浏览
优惠券卡片怎么设计

优惠券卡片设计

一个很常见的界面


看似没有什么需要被设计的




其实,优惠券是界面中最复杂的元素了


有两个问题需要用设计思维来解决:


首先,如此诸多的信息,放在狭小的空间里显得很拥挤;


其次,优惠券属于活动属性内容,本该做的热情一些。




但界面中出现多个优惠券时,会给用户太大的视觉压力


或许你认为降低一下饱和度就可以了



但好像又太过朴素


很难煽动用户的决策情绪


同时信息过载的问题仍旧没有得到解决


这时我们可以试着调整层级对比与亲密关系


考虑卡券多次出现时


实心有色按钮带来视觉负担


不如将其做白,同时按钮加文字加入色彩


强调可点击状态


卡券面值同样赋予暖色色相


营造活动氛围


好像好了一些。。。




但券面文字不对齐的散落在画面上


缺少视觉闭合


我们尝试给个容器


既然容器的出现让画面的彩色面积变小了


不如将饱和度稍微调高一点,文字调亮


但记住不要给白,稍微一点黄色色相


会更符合用户对活动属性的认知


最后切两个角,更符合用户对物理世界中优惠券的记忆





这个方案算是有了一些设计思维,但仍有问题


文案拥挤程度似乎并没有得到很好的改善


我们首先用开源思维去优化


现有信息拓展可放置空间


不如将满多少跟优惠券面值放在一起


强关联信息靠近一些


更符合亲密原则


再以节流思维去优化


既然优惠券自领取当天起15天内有效


那领取的日期似乎并不重要


让用户知道截止日期就可以了


文案密度压力小了很多


我们整体对其处理


赋予新的设计样式




如果感觉设计风格太过朴素


也可以有一个大胆的方案


让优惠券从红包里抽出来


低饱和度的券体让整体画面看起来热情但又不躁动




如果文案的调整不被允许


底部过长的信息让文字无法两端对齐


索性居左对齐


让画面分为左右两块





再来增加一些装饰效果




最后,总会有声音说


更喜欢第一稿的简洁风格


不必白费口舌,依你就是了


但简洁不等于简单


细节往往都在你看不到的地方



回顾以上方案


发现问题,解决问题


是设计师的一种修行~




3
Report
|
收藏
Share
相关推荐
评论
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
IP设计合集 DGS FRIENDS
Homepage recommendation
相关收藏夹
IP形象——动物类
IP形象——动物类
IP形象——动物类
IP形象——动物类
精选收藏夹
作品收藏夹
ip形象设计+表情包
ip形象设计+表情包
ip形象设计+表情包
ip形象设计+表情包
精选收藏夹
作品收藏夹
企业展厅/文化墙 参考
企业展厅/文化墙 参考
企业展厅/文化墙 参考
企业展厅/文化墙 参考
精选收藏夹
作品收藏夹
IP形象及IP内容
IP形象及IP内容
IP形象及IP内容
IP形象及IP内容
精选收藏夹
作品收藏夹
文创
文创
文创
文创
精选收藏夹
作品收藏夹
一些小动物
一些小动物
一些小动物
一些小动物
精选收藏夹
作品收藏夹
大家都在看
Log in