高手设计弹窗的12个切入点

0 评论 891 浏览 0 收藏 7 分钟

这篇文章基于上百个实战案例拆解,总结出 12 种超实用的弹窗设计切入点 ,每一种都附真实案例与核心优点,既好上手又具延展性。不管是介绍产品功能、推送运营活动,还是引导用户互动,都能在这里找到适配方案,帮你快速摆脱灵感瓶颈,让小小弹窗既好看又好用!

今天给大家带来弹窗设计的一些思考,最近几个月零星散散的体验了上百个弹窗设计,发现小小弹窗已经成了产品很重要的视觉焦点,一个产品面世后,整体功能不会再有太大变化,可是弹窗会随运营活动变化,不断推陈出新,如果灵感枯竭的时候,不知道用什么方式了,那么可以看下这12个类型宝典,希望给大家带来一些灵感。

01 卡片叠加卡片的方式

优点:这种卡片叠加着卡片,且辅助的小卡片还特意超出大卡片,既显得灵动好看,页面信息传达也清晰明了。

02 相册产品卡片的方式

优点:这种产品卡片配合相册一样的图例弹框,非常适合介绍产品功能或者产品效果的页面需求。

03 中间图标+方形卡片的方式

优点:图标配和方形弹框也是非常棒的设计方式,简单好上手,延展性也很强。

04 IP形象+方形卡片的方式

优点:弹框配上产品IP是个不错的设计着手点,如果哪天没啥创意了,而恰好产品有IP形象,那么IP形象+方形弹框结合的方式是一个非常普适的设计方式,好看又有趣。

05 拟人化表情图标+异形卡片的方式

优点:异形的弹框,让它打破了常规的死板,有趣的表情增加了页面的趣味性和人情味,阳光的配色增加了页面的欢乐感。

06 图标+空气弹框的方式

优点:简约的图标和文案信息在没有任何衬托的页面上显得额外的瞩目,他少了一个弹框底色,可是也正因为没有弹框底色的干扰,它因此也更加突出了。

07 中间简约插画组合+方形弹框的方式

优点:弹框上方用简约插画组合的方式配上下方弹框的标题文案,让弹框显得丰富多姿,信息传达也更加有力,很有记忆点。

08 信封弹框的方式

优点:这是非常经典,在哪都很适用的弹窗形式,虽然创意很老,可是因为它的普适性比较强,到现在依然在各大平台还是能看到这种弹窗的存在。

09 IP配标题文字+空气弹框的方式

优点:这种弹窗趣味性很强,一个俏皮的IP形象配上一句标题文案,达到了很好的信息传达作用,有趣又有效。

10 不被定义的弹框方式

优点:这种弹框既不是异形也不是方形,直接将打车券垂直排列组成隐形的弹框,看似无形,实则很有秩序,这种方式让优惠券更加的突显,完全冲出了常规的弹窗样式,我称之它为不被定义的弹窗样式。

这个也给了我很多的启示,有时候我们只要能更好的表达需求,不要太被一些常规的东西束缚住自己的思维了。

11 从底部弹出的插画弹窗

优点:这种弹框从底部弹出,它的瞩目性没那么强,而且底部页面的信息还是可以清晰可见,带上简约的插画,弹框显得也没那么单调。

12 从底部弹出的空气插画弹窗

优点:这种没有方形框底和底色的弹窗我称之为空气弹窗,没有被传统弹窗样式束缚,很有感染力,氛围感也很强,标题也很醒目。

本文由人人都是产品经理作者【姝斐suphie】,微信公众号:【姝斐】,原创/授权 发布于人人都是产品经理,未经许可,禁止转载。

题图来自Unsplash,基于 CC0 协议。

更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 目前还没评论,等你发挥!