弹框是一种交互方式,用作提醒,做决定或者解决某个任务。其好处是让用户更聚焦,且不用离开当前页面,更快更容易完成任务。由于弹框与当下流行的卡片式设计在表现形式上十分接近,同时弹框也逐渐承载了更多功能性需求,不再是简单的内容堆砌,因此弹框设计正在被越来越多设计师关注。

一、弹窗的构成

弹框一般包含一个蒙版,一个主体及一个关闭入口,常见于网页及移动端。


二、弹框的使用场景

在设计时发现经常会遇到一种情况,到底是用弹框还是用页面来承载内容呢?如果了解到弹框的特性后,其实不难分辨什么时候使用那个表现手法更适合。

弹框特性:

– 较页面轻,可以更快回到之前的页面
– 相对独立,可以完全不影响页面的布局
– 适合解决简单,一次性的操作


以下列出了一些较适合使用弹框的场景及案例:

1、新手引导

第一感觉是非常重要的。Google+及Carbonmade的新手引导采用了弹框,配上漂亮的插图。这种处理手法美观,不影响页面布局,卡片式的表现手法还能贯穿网页及移动的一致体验。


2、选择器

选择器的特点是用一个内滚区域来承载一个很长的页面,而该内滚区域的高度是可以根据浏览器的高度拉伸的。其好处是除了能放下很长的页面,同时能保留一些操作一直停留在屏幕上。这裡可以选择性的为弹框设置一个最大及最小高度,但要注意的是必须把背景锁定,否则出现2条滚动条的体验是很糟糕的。


3、任务

有时候某些任务只是一些简单的操作,并不特地需要一个页面来表现,弹框是一个很好的方法。


4、提示

提示是最基础的弹框应用,设计时需记往保持统一性。视觉上的统一性: 颜色,间距,文案风格等。交互的统一性: 主要操作是左边还是右边按钮,关闭是点击蒙版还是点击叉叉。


三、弹窗的形式与尺寸

1、Web

web弹出框的尺寸一般按内容来设定尺寸的。但要保证尺寸的限制问题。


1)、尺寸

目前市面上最小的屏幕是1024x768,因此只要保证在这个尺寸放得下, 其他尺寸也肯定没有问题。弹框的宽度一般不会太宽,1000px通常是足够有余的。高度的话,以Windows为例,去掉系统底部功能条的高度及浏览器的高度后,可以得出:

768px - 约60~100px(浏览器高度) - 40px(系统底部工具栏高度) = 约620px

而根据经验所得,这个尺寸内的弹框占了90%场景。

Marvel的新建项目弹框中,在大屏幕下,弹框尺寸为640px(宽)x760px(高);
在小屏幕下,选项及Icon则会缩小,弹框尺寸变成了640px(宽)x620px(高)

InVision的升级弹框中,在大屏幕下,列表的行距比较宽松,弹框尺寸为1100px(宽)x800px(高);
在小屏幕下,列表的高度则减小,弹框尺寸为1100px(宽)x630px(高)。


2)、类型

Dialog1.png


Dialog.png


2、mobile

mobile弹出框的尺寸一般确定,但形式更多样化。


1)、名词解释

image.png

2)、分类

DIalog Mobile.png

四、弹窗设计的5条基本原则

原则1,减少干扰

由于弹窗会中断操作,要尽可能地少使用弹窗。突然出现的弹窗会强迫用户去停止他们当下正在进行的任务,并转而专注于弹窗中的内容。在继续之前,用户必须要面对这个弹窗,否则将无法对弹窗之下的页面进行操作。当这个用户必须要确认一个关键的操作时,这就是好的,但是在大部分情况下弹窗是不太有必要的,甚至会引起用户反感。


不是每个选择、设置、或细节都有必要中断用户当前的操作。

弹窗的备选方案有菜单以及同框内的扩展,这两种控件都可以保持当前页面的延续。

可不要突然跳出弹窗,应该让用户对弹窗的每次出现都有心理预期。


原则2,弹窗应与现实世界相关连

弹窗应该使用用户的语言(用户熟悉的文字,短语和概念),而不是一些系统特有的专有名词。


在弹窗中使用语意清晰的问题和选项。

设计促进操作完成的弹窗。

在操作完成后,提示用户操作已经完成了。


原则3,讲求极简

别试着把太多东西挤在一个弹窗内。要保持干净和简约(遵从KISS原则)。然而极简主义并不意味着被局限住,你提供的所有信息都该是有价值并且与之相关的。


如果你发现你在很努力地把许多元素挤进一个弹窗,这通常代表弹窗已经不是最优的设计方案了。

将那些不必要的、不能够帮助用户完成任务的元素或内容从弹窗中去除,以达到简化的目的。

尽量避免在弹窗内安置多个步骤。


原则4,选择适当的弹窗种类

弹窗大致分两个大类。第一大类为吸引用户关注的模态弹窗,强制用户与之交互后才能继续。模式弹窗通常被用在独立、强制的流程中:

当不需要上下文就可以决定怎么做的时候。

需要明确的“接受”或“取消”动作才能关闭。在点击这种弹窗的外部时,它并不会关闭。

当我们不允许此用户的进程处于部分完成状态(即用户必须完成此进程才可做其他任何的操作)。


第二大类则是非模态弹窗,它允许用户通过点击或轻触周围就可关闭。


原则5,视觉一致性

在大部分情景下,都允许用户通过点击或轻触来关闭弹窗(除了模态弹窗)。

应该避免在弹窗内再启动附加的小弹窗(即弹窗中的弹窗)。