APP模态弹框样式总结

第81天（2018-7-27）

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

一、破框样式

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

辣椒味酸奶临摹

二、半背景样式

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

辣椒味酸奶临摹

三、全背景样式

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

同事小斌斌临摹优化

四、单图样式

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

辣椒味酸奶临摹

总结

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

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