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

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

1. alert()
     alert 方法有一个参数，就是用户想弹出的内容，弹出框很简单，就一个显示功能。你可以点击确认关闭这个弹出框。
     例如：alert(“hello world！”);
     

2. confirm()
     这个方法要求用户选择。有确认有返回。confirm 方法的返回值为 true 或 false。
     例如：var flag = confirm(“你快乐么？”);
     点击确定，flag的值为true；点击取消则为false；
     

3. prompt()
     这个弹出框相对于上面两个弹出框来说，智能化又高了，你可以直接在这个弹出框里面回复。下面先上图：
     例如：var kouling = prompt(“口令：”);
     

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

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

1. Toast
   （1）告知用户任务状态，操作结果，例如：发送成功，加载中，删除成功。
   （2）Toast会在屏幕所有层的最上方。
   （3）显示时间有限，1s+左右消失：考虑到显示的时间，容易被用户忽略，不适合承载过多的文字和重要信息。
   （4）Toast一般有简短文字或者简单易懂的图标，如删除成功字样或者简单易懂的图标
   
   

2. Snackbars
   （1）Snackbar 是一种针对操作的轻量级反馈机制，通常出现在手机屏幕或者桌面端左下方，以浮动弹出框的形式存在。
   （2）与Toast相同，Snackbar也会出现屏幕所有层的最上方，包括浮动操作按钮；短暂出现后，会主动消失。
   （3）Snackbar带有一定的交互性，用户触摸屏幕其他地方后自动消失，也可以在屏幕上滑动关闭。而且Snackbar有时候可以带有一个操作，如撤销。对于一些可能会有不好后果的操作，并且可撤销，可以以Snackbars 的形式告知并提供撤销按钮。
   

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