快生活 - 生活常识大全

关于弹窗四大控件的个问题


  本文作者对弹窗4大控件进行了对比分析,非常好地阐释了不同控件的应用场景,并通过案例进一步加深了对控件应用的理解。
  大家平时做完一个项目有没有总结的习惯呢?最近我一直在分析弹窗相关的知识点,原本觉得弹窗很简单没啥可分析的,大家基本也清楚什么情况下该用什么弹窗,但是发现一些同学在设计时仍然会出现滥用的情况,主要原因还是知识没有内化。
  如何才能把看过的文章内化成自己的知识呢,那就是多发现问题,比如之前我在写弹窗的总结文章时就发现了3个问题:
  问题一:警示类弹窗用 Alert 好还是 Action Sheets 好?
  问题二:Toast的位置在界面顶部、居中、底部都有,三者哪个好?
  问题三:Snackbar和Toast有啥区别?
  当然发现问题并不能达到知识的内化,重要的是去分析并解决这些问题,这样以后在设计时就能做到有理有据,不会滥用了。
  一、了解四大控件
  谈问题之前我们先了解写这些英文控件分别代表什么:Alert(对话框)、Action Sheets(控制面板)、Toast(小提示)、Snackbar(快捷提示)。
  Alert:对话框是一种模态弹窗,当用户将进行一些危险或者不可逆操作时,系统将会以Alert对话框的形式提醒用户是否还继续操作,起到警示的作用,其阻断感强,操作不可忽略。
  Action Sheets:控制面板是Alert的一种延伸,也是模态弹窗,用户必须进行操作,弹窗才会消失,和Alert的区别是Action Sheets拥有更多的功能按钮,其重点在操作。
  Toast:是一种非模态弹窗,他一般出现在页面的任何位置,显示几秒然后自动消失,其阻断感弱,一般用来显示操作结果,或者表单未填写提示。
  Snackbar:是 Google Material Design 中提供的一种兼容提示与操作的消息控件。其和Toast类似,在不操作的情况下几秒后自动消失,同时向下滑动也可忽略消息。
  二、界面位置的强弱
  通过分析上面提出的三个问题,不难看出其实就是位置强弱的选择,因此在解决问题之前,我们先来了解下APP界面中位置的强弱对比。
  一个界面我们可以将其分为上中下三个部分,如下图:
  其中中间部分为用户的视觉焦点,最吸引用户的注意,当然对用户的干扰也比较大,因此在使用时往往将重要的弹窗信息放在此处,比如对话框、二次确认等。
  上下两个部分的权重相当(上部略大于下部),对用户的吸引和干扰都小于中间,因此我们可以把通知、不太重要的操作放在这两个位置。
  三、解决问题
  了解了界面中位置的强弱,我们在回到最初的问题,就能更好的判断了。
  1. 警示类弹窗用 Alert 好还是 Action Sheets 好?
  在一般的Alert和Action Sheets的对比文章中,大多区别是Action Sheets可以包含更多的按钮,同时暂用空间小,而Alert一般只支持2个按钮。
  但是当都是警示类弹窗、都只有2个按钮又该如何判断呢?这时候就可以通过弹窗的强弱来判断。
  微信提倡用完即走,因此当用户退出时并没有做过多的挽留,这时候我们可以使用Action Sheets控件,其阻断感小,用户能很快的完成退出操作。
  QQ从弹窗的文案上我们就能看出,当用户退出时连续登陆的记录将被清零,QQ达人图标变灰,通过这样的方式尽力挽回用户。因此采用Alert对话框阻断感更强,更合适。
  2. Toast的位置在界面顶部、居中、底部都有,三者哪个好?
  Toast的位置从常规来看,安卓端一般在界面底部;iOS端在界面的中部,但并不是所有产品都遵循这一原则。
  有的产品也将Toast放在顶部,同时iOS中也有部分APP放在底部。那么具体什么位置好一点呢?同样我们可以根据位置的强弱进行分析。
  淘票票选择电影最佳观影区提示,这些提示信息对用户操作并没有影响,因此放到中部可以减少对用户的阻断感,同时相对底部来说又更容易被注意到。
  菜鸟裹裹当为选择收件人地址时,点击立即下单系统会采用Toast提示你,这时候放到界面中间能够很好的引起用户注意。
  猫眼的选座提示,其实和淘票票一样的功能,但是其放在界面底部,对用户的干扰最小。
  3. Snackbar和Toast有什么区别?
  在应用时Snackbar和Toast有点类似,现在也可以看到一些APP已经将Toast换成了Snackbar,那他们有什么区别呢?
  Snackbar和Toast的一样有时间限制,若用户不回应,他将在几秒后自动消失,其区别是Snackbar提供一个或者2个功能按钮。
  AudioClip当我选择标记音乐时,他直接用Snackbar提示需要登录,这样并不会打扰用户当然的操作,如果用户不想登录,直接忽略即可。
  划重点
  当你不知道用Alert还是Action Sheets时可根据弹窗的强度来选择,如果强度大就选择Alert,强度小九选择Action Sheets;
  Toast在使用时首先可根据平台规范来选择,其次在部分位置可根据具体场景来放置;
  当反馈信息不需要太强的阻断感时,采用Snackbar代替Toast也是一个不错的选择。从用户体验上来说,用户操作起来会更顺畅。
网站目录投稿:凡波