APP模态弹框样式总结

第81天(2018-7-27)

      弹框有两种,其中用的最多的是模态弹框,包含对话框、动作栏、浮层,一般情况下设计师根据不同的需求而设计,因此没有统一的样式规范。尽管如此,在我反复看过很多模态弹框的案例后,总结了以下四种设计样式:(四种样式的名称是我根据其特点而取)

一、破框样式

破框样式是指图片元素打破弹框的边界线,有秩序且具有美感的组合。很多活动弹框比较倾向这种样式,因为其设计表现夸张,比较符合活动的气氛,同样吸引用户的眼球。如下图京东APP的“领取红包”弹框就是典型的代表。

辣椒味酸奶临摹

二、半背景样式

半背景样式是指半截弹窗由图片元素填充。这种样式的优点是强调主题,突出重点;如下图京东APP的“生活频道”弹窗,背景部分突出“生活频道”主题,空白部分附带上产品功能,内容主次有序,处理很到位。

辣椒味酸奶临摹

三、全背景样式

全背景样式是指图片元素填充整个弹窗。这种样式和“破框样式”的特点一样,烘托氛围,吸引注意力,区别在于图片元素在边框之内。如图京东APP的“小金库”弹窗,就是以整个图片元素作为背景,视觉效果非常突出。

同事小斌斌临摹优化

四、单图样式

单图样式是指弹窗中有一个单独的图片元素作为装饰。这种样式通常会与留白搭配着来,整体给人清新简洁感,一般在“提示”的情况下用的最多。如下图“小黄车”APP的换车提示弹窗,用的是一个修车工具的图片元素,然后搭配大量的留白,给人舒适感,有利于降低“换车”提示给人的“烦躁”指数。

辣椒味酸奶临摹

总结

以上是我总结的四种模态弹窗样式,不一定齐全,但可以满足我们的工作需要。

如有不同想法的,欢迎私信交流与学习。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 大表关联小表,把小表自动加载到内存中,需要确认以下配置为true,相当于写了一个mapjoin 实例: 查看url...
    小呀小芒果阅读 27,088评论 0赞 5
  • 【大喜过望】20171101学习力践行D22 古诗: 晚上临睡时,妈妈问喜宝《暮江吟》怎样说?提醒开头后,小宝居然...
    愈见悠亚阅读 353评论 0赞 0
  • 霓落: 许久不见,不知君在他乡可好? 你可知,自那场别离之后,耳畔时常响起你银铃般的声音,你的笑靥如无尽的...
    江六郎阅读 962评论 17赞 15
  • 文/尹西林 奇事发生在前年。 打菜市场买了一块老姜,个头特大,做了几次饭还剩了大半儿。那日中午炒菜,用菜刀切好了老...
    尹西林阅读 525评论 0赞 1

友情链接更多精彩内容