当前位置: 首页 >文章 > 手把手教大家设计氛围弹窗,学不会来砍我
收藏
分享

手把手教大家设计氛围弹窗,学不会来砍我

举报应骏应骏发布于 2021-07-131278阅读0点赞
设计方案要根据不同的设计目标来制定...


好想很多小伙伴都不太想做氛围感的UI,因为太麻烦。氛围感是一个比较抽象的概念,每个人对氛围感的感知和要求也不同,有时候你觉得自己做的很好看,但是领导觉得氛围感不强,或者太过于花里胡哨了,总是get不到领导的那个点。一个具有氛围感的活动界面或者元素经常会让你抓破头皮,一点设计思路都没有。那么我们今天就用一个实际案例给大家分享一下我是怎么做氛围弹窗的。


1.理解该弹窗的设计目标
在我们印象中的氛围弹窗可能是下面这样的

但是我注意到,类似“恐怖谷”效应也会发生在弹窗上,什么意思呢?就是越花里胡哨的弹窗,给人感知实际收益越低,大家可以品一品,就是你经常在使用app的时候,啪!弹出一个弹框,告诉100优惠券,结果拆成了10张,每张要满500才能用,这时候你的落差就很大,所以不是所有的弹窗都要做的很异形、很花里胡哨。所以这个时候我们的设计目标不是给用户很强的氛围感,而是让用户认知这个是一个实打实的好福利。


最近大家可能被pdd刷屏了,emmm,我也手贱的去尝试了一下看看是不是能直接提现100w现金,结果很残酷的告诉我,你得无限做循环任务,不停的下单,才“有机会”提现其中的百分之1的现金。套路啊!大家做电商的不要学它,千万不要贪小便宜,到时候买东西买了很多,提现永远提不出来!通过不停的浏览、下单、分享,每次完成一个任务可以累积几分钱。


不过我们也来看一下它的弹窗设计,在这个免单活动中它的弹窗有点什么小心思。

ppd的福利弹窗并没有像上面那些做的很异形,给人感觉可以够的到,做的很“官方”,殊不知这才是最大的坑,所以我们能从它的设计形式上获得一些灵感,如果想让用户真实感受到福利,那么就不要做的太花里胡哨。


这次我们也要设计的是一个免单奖励的弹窗,跟pdd不同的是我们这个免单是实打实的免单奖励。


2.分析原型

在这个原型中我们知道,最核心的信息肯定是免单奖励的文案和免单的金额,所以这两个内容是优先级第一的。

接下来,这个界面不仅仅是给当前的用户看而是希望用户能够去分享给其他人,所以该用户的个人头像和昵称在这里的优先级会被金额去向更重要一些,也是不可缺少的。


其次是免单后金额以什么形式返还,返还到哪里,需要让用户更清晰,这里打算将金额去向的说明和其他说明分开放,有时候用户不太会看说明,所以当他关闭弹窗后会有点不知所措,所以还打算在这里再加一个去账户查看的入口,但尽量弱化一些,核心的目标还是鼓励让用户去分享。


3.设计形式探索

根据设计目标,第一版做成了这个样子,有点太冷静了,毫无分享的欲望。

于是打算将氛围感营造的再热烈一些,但不至于到夸张的程度。通过对一些活动弹窗的进一步分析,打算利用一些小元素和设计手法将“免单”这个超欧的奖励告诉用户:


1.原有的弹窗缺少故事感,信息表达比较苍白,所以我想到的是利用卡片插入红包的手法(多说一点套路话更能显示b格)

2.利用丝带、金币元素来营造氛围,但是要记住,元素不能太过于零碎,并且需要有大小对比,这样营造氛围的元素也有层次感。

3.重新设计免单奖励的文字,让整体更有质感,并且将¥字符用元来替换,元会比¥能更让人感受到这是实打实的现金。

最后将所有信息都放上去来跟第一个版本做个对比吧。

总结一下,设计方案要根据不同的设计目标来制定,我们通常做设计的第一步会去找参考,但是如果脱离了最初的目标而去找参考,往往达不到我们想要的效果,并且适得其反。所以铁子们,UI设计其实并不简单,好的产品需要好的设计师来量身定做,总是一味的找参考,到最后可能会变成四不像,你们学废了吗?


本文原创,未经作者允许不可转载!
更多内容,欢迎关注作者微信公众号: 应谋鬼计!


0条评论
别默默看啦~登录/注册一起参与讨论吧~

暂无评论

请选择举报理由

违反法律法规

侵犯个人权益

有害网站环境

更多训练营>>

为你推荐 · 训练营(全勤打卡报名费全额返累计全额返用户133,673人)

电商海报设计训练营
距离开班仅剩6天73人已报名
【5月】零基础手绘插画训练营
距离开班仅剩6天69人已报名
【5月】零基础动态表情包创作训练营
距离开班仅剩23天16人已报名
猜你喜欢
特惠
充值
7折购
今日还在继续学习的你,太棒了!
7
折扣券可用于
年费无限VIP
立 即
使 用
此活动优惠不可与其他活动叠加使用
有效期:000000
消息
登录即可查看消息记录
建议
意见
官方
客服
在线咨询客服热线

您可以与在线客服进行沟通获得帮助

工作日:9:00~22:00节假日:9:00~18:00

联系在线客服

您可以电话联系客服进行沟通获得帮助

工作日:9:30~18:30

400-862-9191
虎课
积分
免费学习89000+个教程!
配套素材、源文件一键下载!
昨日学员已学习了29,770
并提交了155份作业!
登录后立即学习!
loading
微信扫码关注即可登录
您需要同意协议才可以进行登录
登录虎课网,每天免费学课程全站 89000+ 视频会员教程 | 每日可免费学 1
为确保账户信息安全
请先进行真实姓名验证后进行充值付款
立即验证