阅读文章>那么弹窗的规范化设计是什么?的适用情景

阅读文章>那么弹窗的规范化设计是什么?的适用情景

今天我们就来说说弹窗。 2017年,我解释了弹窗的分类。 有兴趣的可以了解模态弹窗和非模态弹窗的区别:

App设计系列之模态弹窗与非模态弹窗

相信大家都在手机APP应用中看到过各种格式的弹窗效果,可能对某些弹窗不喜欢。 本文将谈谈App弹窗的设计以及弹窗的适用场景。

阅读文章 >

那么弹窗的规范设计是怎样的呢?

最近有小伙伴的解决方法。 如何优化产品的弹窗? 那么我们就来分析一下弹窗设计的规范,让你避开那些坑,做出更好的弹窗。

什么是弹出窗口?

弹出窗口是需要与用户交互以允许用户响应的窗口。

存在于各种应用场景中,需要使用不同类型的弹窗来满足与用户沟通的信息传递和操作。

弹窗在产品中的地位相当于一个小助手。 当用户感到困惑时,告诉用户该怎么做(指导); 当用户与产品交互时,它会告诉用户接下来会发生什么(提示); 甚至当用户沉浸在体验中时,轻描淡写地告知用户他们需要知道什么(交流)。

1.弹窗类型

如果您有兴趣了解那篇文章,这里有几种常见的弹出窗口类型:

超多案例!APP弹窗设计规范大全

超多案例!APP弹窗设计规范大全

一个优秀的弹窗需要具备哪些条件 一、视觉设计

超多案例!APP弹窗设计规范大全

简洁的

弹窗其实是一种扰民信息提示。 这时,用户可能沉浸在产品体验中。 如果是强行中断,那么也应该告诉用户WHY?

就像之前的iOS 13系统一样,可能会出现低电量提醒弹窗,用户可能正在玩手机游戏。 这个时候,他可以很快明白发生了什么事,然后才能做手术。

容易明白

正如可用性原则中所述,当用户看到一个页面时,应该一目了然地了解它的含义。

尤其是标题、内容、按钮文案,需要统一或区分的地方一定要明确。 如果需要引导用户操作,可以在按键设计上做文章。

快速地

快速响应是弹窗的基本素质。 什么是快速反应?

特别是在网络条件不好的情况下,应该给用户反馈状态。 例如,如果用户进行了一个需要支付或消费的行为,那么此时就需要告知用户当前的情况。 如果你在网络准备好后告诉用户发生了什么,用户早就被吓跑了。

2.交互要求

超多案例!APP弹窗设计规范大全

可识别的

文案和展示图片需要清晰,按钮之间的字体颜色需要让用户理解按钮的功能和描述,并使用对比色来区分。 尤其是按钮文案的配色,在突出信息的同时尽量让文字信息对用户来说一目了然。

可操作的

对话弹窗需要操作。 首先要有closeable操作,其次是direct操作。 对于用户来说,需要什么样的操作取决于TA自己的选择。 是确认还是取消是用户的主动行为。

可控的

在给定的场景中,如果有场景相关的信息提示,则不应进行页面跳转或覆盖用户操作的当前界面,否则容易造成视觉冲击甚至歧义。

3. 奖励/高级:弹性运动

为什么是弹性运动?

与常规运动相比,弹性运动让人感觉更真实、流畅、自然,可以弥补属性动画带来的机械感带来的不友好体验。

最好的例子就是iOS的系统动画。 除了iOS本身优秀的系统外,还有UI动画也非常精致。

超多案例!APP弹窗设计规范大全

弹性动画类型

常用的有Spring、Ease in、Ease out、Linear和Ease both。 具体数值可以自己调整(这部分要根据实际需要增减,效果不要太大,控制在合适的水平,详细说明见后续文章)。

终极指南!超全面总结UI动效基本规则

动画效果现在已经渗透到UI界面的每一个角落。

阅读文章 >

弹窗设计规范 1.模态(对话)弹窗

一个模态(对话框)弹出窗口基本上由“四部分”组成,包括标题、内容、操作按钮和掩码。 某些类型的弹窗样式和内容会有所不同,但包含的元素必须有“content”。

超多案例!APP弹窗设计规范大全

如果你不懂弹窗的使用,那么继续往下看,四大部分的使用方法。

标题

标题一般位于弹出窗口框架的顶部。 用于明确提示内容的主题和中心人物立绘,方便用户快速了解是什么信息。

个人建议控制在7个字符以内。 根据“2±7法则”,字符过多会造成短时识别和记忆压力游戏ui设计规范,所以尽量控制(可以用“excess traffic reminder”,不要用“detect your traffic”已超出过多”等)。

“幻数7±2法则”在设计中的应用实例分析

前言:交互设计之父Alan Cooper说过这样一句话:“除非有更好的选择,否则请遵循标准。

阅读文章 >

注意:如果内容文案比较简单,只有一小段,那么标题可以省略,避免重复信息的干扰。

内容

内容一般为描述性文字,用于告知用户主要信息,补充标题描述信息。 既然是告知和引导信息的功能,就不能太复杂,表达要简洁明了。

遇到长文案,适当分支,适当滑动页面(内容尽量删除,字数在“5-30字”以内,长文案支持上下滑动,避免适配问题)。

注意:尽量避免句号“.” 以及感叹号“!”,容易给用户带来强烈的语气压力; 而且这种弹窗要尽量少用,内容多了可以考虑新建一个页面。

操作

操作一般是指对对话框弹出窗口的交互操作,如“确定”、“取消”、“关闭”等。

功能是让用户有控制权,这也是易用性原则中很重要的一点(按钮一般可以进行颜色编码,重点突出需要突出显示的信息,并有提示弹窗,所以有也是单按钮的情况)。

笔记:

面具

遮罩层是指对话弹窗后面的黑色遮罩层,一般是透明的,其作用是让用户更好的区分对话弹窗和原来的界面(透明度可以根据产品调整)特性,也可根据实际情况去除)。

2.其他弹窗

升级/警告弹出窗口

用于提示和警告,常用于升级、警告、内测公告等。

超多案例!APP弹窗设计规范大全

这种弹窗的必要内容也是4个元素,要特别注意区分操作按钮。

活动弹窗

用户告诉用户特殊信息和事件信息,一般会使用有吸引力的元素来吸引用户点击。

超多案例!APP弹窗设计规范大全

这种弹窗比较特殊,所以要特别注意要保留关闭按钮游戏ui设计规范,不要隐藏。

3.非模态(提示框)弹窗

提示弹窗,一般为Toast和Snackbar3D动画,主要是轻量级的信息反馈,既不影响用户当前操作和当前视觉,也不需要用户交互,一定时间后消失(一般不超过5-7s ), 一般放在界面的顶部。

超多案例!APP弹窗设计规范大全