第81天(2018-7-27)
弹框有两种,其中用的最多的是模态弹框,包含对话框、动作栏、浮层,一般情况下设计师根据不同的需求而设计,因此没有统一的样式规范。尽管如此,在我反复看过很多模态弹框的案例后,总结了以下四种设计样式:(四种样式的名称是我根据其特点而取)
一、破框样式
破框样式是指图片元素打破弹框的边界线,有秩序且具有美感的组合。很多活动弹框比较倾向这种样式,因为其设计表现夸张,比较符合活动的气氛,同样吸引用户的眼球。如下图京东APP的“领取红包”弹框就是典型的代表。
二、半背景样式
半背景样式是指半截弹窗由图片元素填充。这种样式的优点是强调主题,突出重点;如下图京东APP的“生活频道”弹窗,背景部分突出“生活频道”主题,空白部分附带上产品功能,内容主次有序,处理很到位。
三、全背景样式
全背景样式是指图片元素填充整个弹窗。这种样式和“破框样式”的特点一样,烘托氛围,吸引注意力,区别在于图片元素在边框之内。如图京东APP的“小金库”弹窗,就是以整个图片元素作为背景,视觉效果非常突出。
四、单图样式
单图样式是指弹窗中有一个单独的图片元素作为装饰。这种样式通常会与留白搭配着来,整体给人清新简洁感,一般在“提示”的情况下用的最多。如下图“小黄车”APP的换车提示弹窗,用的是一个修车工具的图片元素,然后搭配大量的留白,给人舒适感,有利于降低“换车”提示给人的“烦躁”指数。
总结
以上是我总结的四种模态弹窗样式,不一定齐全,但可以满足我们的工作需要。
如有不同想法的,欢迎私信交流与学习。