WEB端和手机端-三种提示框架

JavaScript的三种弹出框：alert、confirm、prompt

alert()
alert 方法有一个参数，就是用户想弹出的内容，弹出框很简单，就一个显示功能。你可以点击确认关闭这个弹出框。
例如：alert(“hello world！”);
confirm()
这个方法要求用户选择。有确认有返回。confirm 方法的返回值为 true 或 false。
例如：var flag = confirm(“你快乐么？”);
点击确定，flag的值为true；点击取消则为false；
prompt()
这个弹出框相对于上面两个弹出框来说，智能化又高了，你可以直接在这个弹出框里面回复。下面先上图：
例如：var kouling = prompt(“口令：”);

如果你输入的是：123456
点击确定之后kouling 的值为：123456。如果你点击了取消，那么kouling 的值为null。

APP-三个提示框架：Toast提示、Snackbars和Alert

Toast
（1）告知用户任务状态，操作结果，例如：发送成功，加载中，删除成功。
（2）Toast会在屏幕所有层的最上方。
（3）显示时间有限，1s+左右消失：考虑到显示的时间，容易被用户忽略，不适合承载过多的文字和重要信息。
（4）Toast一般有简短文字或者简单易懂的图标，如删除成功字样或者简单易懂的图标
Snackbars
（1）Snackbar 是一种针对操作的轻量级反馈机制，通常出现在手机屏幕或者桌面端左下方，以浮动弹出框的形式存在。
（2）与Toast相同，Snackbar也会出现屏幕所有层的最上方，包括浮动操作按钮；短暂出现后，会主动消失。
（3）Snackbar带有一定的交互性，用户触摸屏幕其他地方后自动消失，也可以在屏幕上滑动关闭。而且Snackbar有时候可以带有一个操作，如撤销。对于一些可能会有不好后果的操作，并且可撤销，可以以Snackbars 的形式告知并提供撤销按钮。
Alert
（1）在用户进行操作后，APP执行操作前，如果用户的操作的结果会带来比较严重的后果，如：不可撤销的数据删除，金钱交易，退出登录等。出现模态的提示框，包括说明性的标题、文字和进一步确定按钮（1-N）。
（2）使用Alert时必须传达出清楚且可操作的信息。和其他的模态提示一样，Alert会打断用户的操作，要求用户集中精力来处理其传达的信息，并需要一次点击才能结束，因此要让用户明确知道警告框出现的合理性和必要性。并且Alert的出现必须非常克制，这样用户才不会因为频繁的点击确定而导致不必要的损失。
（3）其中每个元素的设计都要经过细致的考虑，包括：
① 标题
iOS要求标题的文字必须简洁易懂，快速传达当前的情境和对应的解决方案。最好使用短句，偏于理解。
② 文字
在iOS中推荐使用标题，只有在标题无法简短清晰的传递意思才再补充文字说明。
对正文的要求与标题类似，一个简短、完整的句子。同时尽量让文字足够简短以便能在一两行之间显示。
③ 按钮
在iOS中推荐使用两个按钮的警告框，如果更多可以考虑使用下文的操作栏。
两个按钮的Alert通常是最有用的，因为对人们来说在两个按钮之间做选择最容易。单个按钮的Alert就不那么有用，因为它通常只是提示用户，并没有赋予用户任何对当前状况的控制能力。包含三个或三个以上按钮的Alert明显比双按钮Alert复杂，应该尽可能避免使用。
在各个APP中最常见的也是2个按钮的Alert，“ 确定 ”代表的是确定执行操作按钮，按钮名称可以删除，继续，退出等等。而“ 取消 ”代表的是放弃这个操作，比如不保存，取消退出等。
④ 位置
操作栏的位置一般是从页面底部跳出，然后停留在页面底部的地方；而Alert一般是出现页面的中间；
Toast则比较多变，和用户前置操作的位置，信息的重要性，Toast的形态相关。

WEB端和手机端-三种提示框架相关推荐

python如何判断web访问来源是PC端还是手机端
以下方法为判断web访问来源是PC端还是手机端 def judge_pc_or_mobile(ua):"""判断访问来源是pc端还是手机端:param ua: 访问来源头 ...
基于web端和C++的两种深度学习模型部署方式
深度学习Author:louwillMachine Learning Lab 本文对深度学习两种模型部署方式进行总结和梳理.一种是基于web服务端的模型部署,一种是基... 深度学习 Author:l ...
【工具】PC端调试手机端 Html 页面的工具
一.概述有一个项目需要在手机端显示一个 web 页面,而每次把应用 launch 后,从手机端看比较麻烦,因此搜罗了几种在 PC 端调试手机端页面的工具. 二.工具 http://fonkie.it ...
跳出弹窗页面禁止滚动（PC端和手机端）
跳出弹窗页面禁止滚动(PC端和手机端) pc端如何实现 1.当弹窗显示时,为body元素添加属性:overflow:hidden, 当关闭弹窗时移除该属性即可 2.在弹窗的div上设置 @scroll ...
VUE：解决判断网页端与手机端情况下，横竖屏无法判断的问题
一.需求: 第一步:判断是网页端还是手机端第二步:判断手机端,手机是横屏显示还是竖屏显示二.解决方法: 监听网页端还是手机端监听显示页面宽高变化三.代码如下: methods: {_isMob ...
php 手机端播放器,用JS代码适配电脑端和手机端播放器代码
用JS代码适配电脑端和手机端播放器代码蓝叶网站设计 2016-08-10 10668 9评论随着html5的崛起,很多网站都采用html5代码来设计,让网站美观大气,但是 ...
前端pc端、手机端适配基本知识
前端pc端.手机端适配问题一个项目如何做到手机.电脑共用的方式 1.第一种方式:响应式布局(栅格布局),即通过媒体查询控制css样式,从而实现一套代码手机.电脑共享.一般而言,手机.电脑共享样式,其 ...
php自动识别pc和手机端并跳转,JS如何实现网站中PC端和手机端自动识别并跳转对应的代码...
1. 代码场景: 描述:在项目中,一般我们会使用响应式布局的方式或者借助bootstrap等插件来做响应式的网站.但是根据业务的需求,手机端可能会在功能上精简很多,我们也会写两套代码,分别用来实现P ...
天地劫pc版不显示服务器,天地劫幽城再临pc怎么全屏 PC端和手机端是否互通
在玩家用天地劫pc端游玩游戏时,有些玩家可能无法全屏,下面就为各位玩家介绍天地劫幽城再临pc怎么全屏以及天地劫PC端和手机端是否互通. 一.全屏方法在玩家进入游戏后,如果只从设置中寻找全屏的话是无法 ...

WEB端和手机端-三种提示框架

JavaScript的三种弹出框：alert、confirm、prompt

APP-三个提示框架：Toast提示、Snackbars和Alert

WEB端和手机端-三种提示框架相关推荐

最新文章

热门文章