UI弹窗设计总结篇

134天前发布

原创文章 / UI / 观点
泡芙喵F 原创,如需商业用途或转载请与泡芙喵F联系,谢谢配合。

弹窗在APP中无处不在, 这段时间刚好在整理弹窗组件这一块,所以就想跟大家分享一下弹窗的一些设计思路。

弹窗在APP中无处不在, 这段时间刚好在整理弹窗组件这一块,所以就想跟大家分享一下弹窗的一些设计思路。


一、弹窗分类


模态弹窗/非模态弹窗

一般根据是否打断用户操作把弹窗分为:模态弹窗(重提示)和非模态弹窗(轻提示)。


 模态弹窗

打断用户的操作行为,用户必须对该弹窗进行操作,否则不能进行其他操作。

优点:可以很好的获取用户的视觉焦点。

缺点:会打断用户当前的操作流程。

常见类型:对话框Dialog/Alert、底部动作栏Actionbar、浮层Popover/Popup


 模态弹窗

不会影响用户操作,通常都有时间限制,出现几秒后自动消失。

常见类型:Toast/Hud、Snackbar

undefined


1、模态弹窗常见样式


1.1 Dialog/Alert  对话框

对话框是常用的弹窗,它通常出现在页面的中间,这类弹窗对用户的干扰比较大,需要用户主动触发选择才可以继续当前的操作。

一般只有1~3个按钮,需要用户进行简单的选择。一般产品会把期待用户点击的按钮会放在右边并突出显示。


常见类型举例:


 1.1.1、信息选择确定  

1)系统功能的授权

如下图“百度地图”是否允许访问麦克风、“网上厨房”是否允许访问位置的弹窗,相信大家一定在许多APP中都见过,这就属于系统自带的授权弹窗。

undefined


2)版本更新

版本升级弹窗通常会弱化暂不升级的按钮,突出升级主按钮。如下图所示:

undefined


3)消息通知

高德地图与饿了么的消息提醒弹窗属于使用后期APP为了推送消息,主动提示你开启消息通知。

undefined


4)重要提示/信息二次确认

同程汽车票购买弹窗属于消息提示,告知用户相关信息。百度网盘弹窗属于信息确认,询问用户选择哪种方式下载。

undefined


1.1.2、运营活动 

这类弹窗通常是一些活动、广告、领券优惠等,主要是吸引用户点击参加活动,这类弹窗视觉上通常会设计的比较吸引人,造型多样,根据运营目的会突出领取、参与、查看等大按钮,弱化关闭按钮。如下图所示:

undefined


1.1.3、信息-输入选择 

这类弹窗通常是一些比较简单的信息选择或者内容填写,通常只有确定和取消两个按钮。

如微博对于已关注人的分组及备注,操作简单。设置备注时直接调出键盘即可输入,方便快捷。

undefined



1.2Actionbar操作栏

Actionbar主要分为Action Views和Action Sheets,通常由底部弹出。

优点:可以让用户清楚的感知当前的操作,比跳转到新页面更加有安全感。


 1.2.1 Action Views操作视图 

这类弹窗通常占屏比较大,有全屏弹窗和半屏弹窗2中。 它一般从底部弹出,如下图所示:

淘宝和京东的购买页面弹窗都是比较典型的,属于半屏弹窗,在各种电商产品中用的非常多。

undefined



百度网盘和闲鱼发布闲置都属于全屏弹窗,占满整个屏幕,可操作空间更大。

undefined


1.2.2 Action Sheets 操作列表 

操作列表相对于操作视图更单一。主要以文字展示功能按钮为主,重要的操作功能一般会用主题色或者红色突出显示,主要运用在一些功能选择、日常控件等场景中。如下图所示:

undefined



1.3Popover/Popup 浮层

浮层是指用户点击某个功能后浮出一个临时气泡对其功能进行补充,用户需要点击功能区域操作,或者点击空白处取消才能进入下一步操作。 


1.3.1 指向浮层 

这类浮层一般伴随有小三角指向,强调归属。气泡里面的功能通常以单一的文字或文字+图标的结合形式来展示。如下图所示:

 支付宝和微信的顶部加号补充浮层,展示形式差不多,只是UI样式不一样,支付宝是白色气泡黑色半透明遮罩,微信是深灰色气泡。

undefined


再如下图这种选中文字的弹出气泡在复制文字时很常见 。

undefined

 


2、非模态弹窗常见样式


2.1Toast/Hud 提示框

这种弹窗属于一种轻提示,给予用户及时反馈,让用户知道自己当前所处的状态。

 

2.1.1状态提示 

反馈用户当前操作的状态,出现1到2秒后自动消失,在操作遇阻提示、操作成功反馈正在操作状态等场景中使用。如下图所示:       

undefined


2.2 Snackbar

Snackbar是Android中的一个控件。它一般会超时自动关闭或者在屏幕上滑动关闭,设置出现的时间会比Toast长,而且可以点击按钮进行交互。如下图所示:

京东的Snackbar提示用户点击箭头查看喜欢的商品,为用户推荐商品,它有一个关闭的按钮。

酷狗音乐的Snackbar给用户开通会员的快捷入口,它一直浮于页面底部,没有关闭按钮。

undefined


同程用车的领券活动放在这里,吸引用户点击,是一种常用的营销手段。

QQ的断网提示类似通知条的样式,会一种浮于页面上方直到网络恢复。

undefined

            

二、总结思考

 

1、Alert的阻断感大于Action Sheets,使用时根据产品重要程度决定使用什么样式的弹窗。

2、常见弹窗出现的位置有上部、中部、下部。位置不同,重要程度不同。

中部:强度高、重要性高,如对话框弹窗、toast提示等。

上部:强度中等、重要性高于底部,重要消息tips提示。

底部:强度低、重要性低,如底部操作栏、Snackbar。

具体使用哪种还是要根据实际情况考虑。希望我的文章对大家有帮助,也不费我花时间整理了,哈哈~


图片素材来源于网络和应用截图,仅用于学习交流

更多精彩内容可以关注我的公众号【 泡芙喵F设计教室 】

- END -

129
- 位站酷推荐设计师推荐 -

声明:站酷(ZCOOL)内网友所发表的所有内容及言论仅代表其本人,并不反映任何站酷(ZCOOL)之意见及观点。

    文章信息

    • 文章标签

    没有新消息