今天我们就来说说弹窗。 2017年,我解释了弹窗的分类。 有兴趣的可以了解模态弹窗和非模态弹窗的区别:
App设计系列之模态弹窗与非模态弹窗
相信大家都在手机APP应用中看到过各种格式的弹窗效果,可能对某些弹窗不喜欢。 本文将谈谈App弹窗的设计以及弹窗的适用场景。
阅读文章 >
那么弹窗的规范设计是怎样的呢?
最近有小伙伴的解决方法。 如何优化产品的弹窗? 那么我们就来分析一下弹窗设计的规范,让你避开那些坑,做出更好的弹窗。
什么是弹出窗口?
弹出窗口是需要与用户交互以允许用户响应的窗口。
存在于各种应用场景中,需要使用不同类型的弹窗来满足与用户沟通的信息传递和操作。
弹窗在产品中的地位相当于一个小助手。 当用户感到困惑时,告诉用户该怎么做(指导); 当用户与产品交互时,它会告诉用户接下来会发生什么(提示); 甚至当用户沉浸在体验中时,轻描淡写地告知用户他们需要知道什么(交流)。
1.弹窗类型
如果您有兴趣了解那篇文章,这里有几种常见的弹出窗口类型:
一个优秀的弹窗需要具备哪些条件 一、视觉设计
简洁的
弹窗其实是一种扰民信息提示。 这时,用户可能沉浸在产品体验中。 如果是强行中断,那么也应该告诉用户WHY?
就像之前的iOS 13系统一样,可能会出现低电量提醒弹窗,用户可能正在玩手机游戏。 这个时候,他可以很快明白发生了什么事,然后才能做手术。
容易明白
正如可用性原则中所述,当用户看到一个页面时,应该一目了然地了解它的含义。
尤其是标题、内容、按钮文案,需要统一或区分的地方一定要明确。 如果需要引导用户操作,可以在按键设计上做文章。
快速地
快速响应是弹窗的基本素质。 什么是快速反应?
特别是在网络条件不好的情况下,应该给用户反馈状态。 例如,如果用户进行了一个需要支付或消费的行为,那么此时就需要告知用户当前的情况。 如果你在网络准备好后告诉用户发生了什么,用户早就被吓跑了。
2.交互要求
可识别的
文案和展示图片需要清晰,按钮之间的字体颜色需要让用户理解按钮的功能和描述,并使用对比色来区分。 尤其是按钮文案的配色,在突出信息的同时尽量让文字信息对用户来说一目了然。
可操作的
对话弹窗需要操作。 首先要有closeable操作,其次是direct操作。 对于用户来说,需要什么样的操作取决于TA自己的选择。 是确认还是取消是用户的主动行为。
可控的
在给定的场景中,如果有场景相关的信息提示,则不应进行页面跳转或覆盖用户操作的当前界面,否则容易造成视觉冲击甚至歧义。
3. 奖励/高级:弹性运动
为什么是弹性运动?
与常规运动相比,弹性运动让人感觉更真实、流畅、自然,可以弥补属性动画带来的机械感带来的不友好体验。
最好的例子就是iOS的系统动画。 除了iOS本身优秀的系统外,还有UI动画也非常精致。
弹性动画类型
常用的有Spring、Ease in、Ease out、Linear和Ease both。 具体数值可以自己调整(这部分要根据实际需要增减,效果不要太大,控制在合适的水平,详细说明见后续文章)。
终极指南!超全面总结UI动效基本规则
动画效果现在已经渗透到UI界面的每一个角落。
阅读文章 >
弹窗设计规范 1.模态(对话)弹窗
一个模态(对话框)弹出窗口基本上由“四部分”组成,包括标题、内容、操作按钮和掩码。 某些类型的弹窗样式和内容会有所不同,但包含的元素必须有“content”。
如果你不懂弹窗的使用,那么继续往下看,四大部分的使用方法。
标题
标题一般位于弹出窗口框架的顶部。 用于明确提示内容的主题和中心人物立绘,方便用户快速了解是什么信息。
个人建议控制在7个字符以内。 根据“2±7法则”,字符过多会造成短时识别和记忆压力游戏ui设计规范,所以尽量控制(可以用“excess traffic reminder”,不要用“detect your traffic”已超出过多”等)。
“幻数7±2法则”在设计中的应用实例分析
前言:交互设计之父Alan Cooper说过这样一句话:“除非有更好的选择,否则请遵循标准。
阅读文章 >
注意:如果内容文案比较简单,只有一小段,那么标题可以省略,避免重复信息的干扰。
内容
内容一般为描述性文字,用于告知用户主要信息,补充标题描述信息。 既然是告知和引导信息的功能,就不能太复杂,表达要简洁明了。
遇到长文案,适当分支,适当滑动页面(内容尽量删除,字数在“5-30字”以内,长文案支持上下滑动,避免适配问题)。
注意:尽量避免句号“.” 以及感叹号“!”,容易给用户带来强烈的语气压力; 而且这种弹窗要尽量少用,内容多了可以考虑新建一个页面。
操作
操作一般是指对对话框弹出窗口的交互操作,如“确定”、“取消”、“关闭”等。
功能是让用户有控制权,这也是易用性原则中很重要的一点(按钮一般可以进行颜色编码,重点突出需要突出显示的信息,并有提示弹窗,所以有也是单按钮的情况)。
笔记:
面具
遮罩层是指对话弹窗后面的黑色遮罩层,一般是透明的,其作用是让用户更好的区分对话弹窗和原来的界面(透明度可以根据产品调整)特性,也可根据实际情况去除)。
2.其他弹窗
升级/警告弹出窗口
用于提示和警告,常用于升级、警告、内测公告等。
这种弹窗的必要内容也是4个元素,要特别注意区分操作按钮。
活动弹窗
用户告诉用户特殊信息和事件信息,一般会使用有吸引力的元素来吸引用户点击。
这种弹窗比较特殊,所以要特别注意要保留关闭按钮游戏ui设计规范,不要隐藏。
3.非模态(提示框)弹窗
提示弹窗,一般为Toast和Snackbar3D动画,主要是轻量级的信息反馈,既不影响用户当前操作和当前视觉,也不需要用户交互,一定时间后消失(一般不超过5-7s ), 一般放在界面的顶部。