刷了很多文章,看到各式各样的弹窗分类,今天总结一下。
什么是弹窗?
弹窗又称为对话框,是App与用户进行交互的常见方式之一。弹窗分为模态弹窗和非模态弹窗两种,两者的区别在于需不需要用户对其进行回应。模态弹窗会打断用户的正常操作,要求用户必须对其进行回应,否则不能继续其它操作;非模态弹窗则不会影响用户的操作,用户可以不对其进行回应,非模态弹窗通常都有时间限制,出现一段时间后就会自动消失。
无论是模态还是非模态,弹窗都是位于当前页面的最顶层。模态弹窗常常都还会伴随半透明的遮罩来吸引用户的视觉焦点,以突出弹窗的信息内容。非模态弹窗一般被设计成用来告诉用户信息内容,而模态弹窗除了告诉用户信息内容外还需要用户进行功能操作。
常见的弹窗分类用下面这个图就可以解释清楚啦~
(麻麻说自己做的图要写上大名)1. Dialog(Alerts)
需要用户对弹窗进行操作后才能执行其他操作。优势在于提醒明显,能够对用户行为进行定向性预测。
(图片来自网络)2. Actionbar(Action Sheets、Acitivity Views)
提供用户多种选择的弹窗,此为用户主动发出操作。优势在于可以承载多种选项,实现多应用之间操作。
(图片来自网络) (图片来自网络)3. Popover
用户单击某个控件或页面某个区域后出现的临时复层,通常可以再次隐藏。优势在于用户操作时页面逻辑清晰,当前页面因隐藏多项低频操作使得界面简洁。
(图片来自网络)4. Toast/HUD
信息给予用户及时反馈,确保用户知晓自己所处的状态,并做出相应的措施。优势在于提示轻盈,不会对用户操作带来太大阻碍。
(图片来自网络) (图片来自网络)5. Snackbar
向用户反馈信息,可以交互。优势可以弱化提醒的同时,增加操作。
(图片来自网络)对于UI设计师而言,理论上的分类清晰还远远不够,还需要针对视觉、文案、以及其他商业需求进行权衡。常见的有以下方面:
【视觉方面】
1. 弹窗文案简洁,表意清晰无歧义
比如,弹窗提醒文字为“是否要删除该项?”,操作为“是”和“否”会让用户犹豫不清是删除还是不是删除,若换成“删除”和“取消”就不会有歧义了。
2. 设计风格尽量简约
3. 弹窗的设计风格可以根据应用设计风格进行重塑
比如,微博Toast弹窗就根据微博整体风格进行设计。
4. 可进行诱导性设计
常见的如希望用户点击的按钮放在右边,放大点击按钮弱化关闭按钮等。
5. 危险操作需警示
如删除时需要将“删除”操作警示。
【交互方面】
1. 弹窗的出现尽量不干扰用户使用
2. 具有同种层级的弹窗使用相同的样式
3. 同种Toast弹窗位置保持相同
4. 注意弹窗频率
今天先整理些理论,明天的文章会从可操作的方法讲述弹窗如何制作。
网友评论