APP提示方式与区别 - 简书
APP提示方式与区别
最近在优化升级积分移动端界面交互部分，很多页面部分涉及到各种提示，做一点汇总；我们经常能见到各种操作提示，有的提示框是从底部弹起，有的提示框是从中间弹出；那么问题来了，提示框从中间弹出和从底部弹起，有什么区别呢？我们来看几种情况：一、提示信息按钮从底部弹起1、提示信息中包含2个按钮从底部弹起
iPhone照片应用在删除照片时，当点击删除照片按钮，从底部弹起选择控件；纯文字信息提示：此照片将从所有设备中删除；提示信息为纯文字信息，对用户毫无影响；提示文字的字体很小，视觉优先级低于选择按钮，对于用户来说，毫无影响。这里的控件就是纯粹侧重选择。所以iPhone采用底部弹起选择控件；在底部弹起控件显示文字比在中间提示框显示的文字有2个优点：A、底部弹起控件的文字比中间弹窗的文字，底部弹起的文字信息更小，内容的优先级更低；B.、底部弹起控件的文字比中间弹窗的文字，底部选择按钮的优先级更高；2、提示信息超过2个按钮从底部弹起
新浪微博查看某条资讯，点击操作按钮，提示信息从底部弹起；当点击操作按钮时，会从底部弹起选择控件，一共7个按钮；此时的提示性文字信息量为0，而选择功能性控件有7个；此处功能性的5个选择按钮优先级大于信息量为0的内容；这里侧重选择，所以采用底部弹起选择控件；二、提示信息框按钮从中间弹出1、提示信息没有按钮纯信息从中间弹出
在人人都是产品经理app某片资讯详情页，点击收藏按钮，弹出提示框：收藏成功；在用户看完之后，大概2秒左右时间，提示框自动消失；这种纯文字的，没用按钮的选择的提示框，推荐从中间弹出；提示的文字信息比较少，用户可以在2秒短时间内，理解全部信息；如果文字信息较多，用户理解的时间超过2秒，那么需要在提示文字的下面，添加一个按钮，比如朕知道了、确定等，点击按钮提示框消失；2、提示信息中包含1个按钮从中间弹出
在iPhone watch app，点击手机配对手表开始配对；提示框有一段纯文字：要设置apple watch 请确保iPhone已经连接至无线局域网或蜂窝网络，并且打开蓝牙，再加上一个【好】的按钮；此处提示框的作用在于侧重提示文字，纯文字信息量太大，一段极短的提示信息涉及的模块较多，导致用户无法在极短时间看完并理解意思；看完了纯文字信息，点击仅有的一个【好】按钮，就可以消失了；需要加一个按钮，让不同的用户，在不同的时间，看完之后，再点击【好】，让提示框消失；3、提示信息中包含2个按钮从中间弹出
在简书APP，某篇文章详情页，点击关注作者，提示框从中间弹出。提示框的纯文字信息对用户影响较大；提示信息：打开该作者的更新推送，第一时间接收该作者的新文章通知？这段提示信息显示对用户关注行为的两点影响：A、关注后不用每天推送该作者的新文章；B、关注后每天会自动推送接收该作者的新文章；这里采用了中间弹出提示框，表示提示信息对用户影响较大，文字的内容优先级较高，需要中间弹窗，起到警示的作用；在中间提示框显示文字比在底部弹起控件显示的文字有2个优点：A、中间弹窗的文字比底部弹起控件的文字，中间的字体来得更大；B、中间弹窗的文字比底部弹起控件的文字，中间的位置更显目；1、提示框从中间弹出，表示侧重提示文字；进而表示提示文字的内容优先级较高；2、提示框从底部弹出，表示侧重选择按钮；进而表示选择按钮的功能优先级较高；3、只有提示信息的时候，提示框从中间弹出；4、只有选择按钮的时候，提示框从底部弹起；汇总一下提示框弹出方式：1、当提示框包含2个按钮，且文字信息对用户影响不大，或者毫无影响的时候，采用底部弹起选择控件；2、 当提示框包含2个按钮，且文字信息对用户影响相对较大，采用中间弹出提示框；3、 当提示框包含0个按钮，纯为文字信息，采用中间弹出；4、 当提示框包含1个按钮，包含文字信息，采用中间弹出；5、当提示框包含大于等于3个按钮，采用底部弹出选择控件；
美团点评产品经理 | 知乎《产品打杂》专栏作者四种常见的App弹窗设计：Toast、Dialog、Actionbar 和 Snackbar - 简书
四种常见的App弹窗设计：Toast、Dialog、Actionbar 和 Snackbar
本文约3000字，建议阅读15分钟。
弹窗又称为对话框，是App与用户进行交互的常见方式之一。弹窗分为模态弹窗和非模态弹窗两种，两者的区别在于需不需要用户对其进行回应。模态弹窗会打断用户的正常操作，要求用户必须对其进行回应，否则不能继续其它操作行为；非模态弹窗则不会影响用户的操作，用户可以不对其进行回应，非模态弹窗通常都有时间限制，出现一段时间后就会自动消失。
无论是模态还是非模态，弹窗都是位于当前页面的最顶层。模态弹窗常常都还会伴随半透明遮罩来吸引用户的视觉焦点，以突出弹窗的信息内容。非模态弹窗一般被设计成用来告诉用户信息内容，而模态弹窗除了告诉用户信息内容外还需要用户对其进行功能操作。
伴随半透明遮罩的模态弹窗
随着开发技术的发展，弹窗的方式和样式多种多样，弹窗也被定制化设计成很多种风格和版本。最常见的基本弹窗有以下四种：
Toast、Dialog、Actionbar 和 Snackbar
四种常见的App弹窗
Toast提示框是一种非模态弹窗，它弹出一个小信息，作为提醒或消息反馈来用，一般用来显示操作结果，或者应用状态的改变。例如你发出了一条短信，App弹出一个Toast提示你消息已发出。
最常见的Toast提示框为一句简短的描述性文字。这种样式的弹窗可以出现在页面的任何位置，可设置成在页面顶部、中部或者在底部出现（但一般都是出现在页面的中轴线上），具体的显示位置根据页面的整体设计进行设置。该种Toast在安卓App上十分常见。
还有一种Toast弹窗由简单的图形和简短的文字组成，显示位置一般位于页面正中央。这种Toast在iOS和安卓上都可以经常见到。
iOS中建议，设计一种引人注目但又和App 的界面协调融合的方式去展示信息。这种展示信息的方式和安卓纯文本的Toast相似，只是界面交互有所不同，它一般在内容页顶部向下推动出现，然后向上推动消失。这种展示信息的方式现在也在安卓平台上使用。例如腾讯新闻App的iOS版和安卓版均采用了这种形式的Toast弹窗进行刷新功能的操作提醒。
考虑到Toast提示框显示的时间较短（一般只有几秒种）、占用区域不大，它很容易被用户忽略，所以Toast不适合承载过多的文字和重要信息。Dialog
Dialog对话框是一种模态弹窗。当用户进行了敏感操作，或者当App内部发生了较为严重的状态改变，这种操作和改变会带来影响性比较大的行为结果，在该结果发生前应以Dialog的弹窗形式告知用户且让用户进行功能选择。比如退出App、进行付费下载等功能操作。
一般情况下Dialog由标题、信息内容和功能按钮组成，只有当用户点击了某个功能按钮后弹窗才会消失，App随即执行该功能操作，进入相应的功能流程。
Dialog的标题和信息内容的文字描述都要设计成尽可能的简洁和无异义，也可以选择省略标题只保留内容描述和功能按钮（实际上大多数Dialog都被设计成没有标题的样式）。使用Dialog，功能按钮最好只有两个，让用户选择“是”或“非”的功能操作（“是”指对内容描述的确认操作，比如确认删除、确认付费；“非”一般指取消操作，然后关闭弹窗）；也常被设计成只有一个“确认”按钮，目的是让用户阅读内容后点击关闭弹窗（这种样式的Dialog，信息内容必须非常有必要以至于需要打断用户的操作进行信息内容阅读确认，否则请用Toast进行非模态弹窗提示）。
若Dialog对话框出现三个或以上的功能按钮，将会增加用户的功能选择负担，所以需要使用多个功能按钮选择的时候请考虑使用Actionbar。Actionbar 功能框
Actionbar功能框可以看成是Dialog的一种延伸设计，两者都是模态弹窗，用户必须进行回应，否则弹窗不会消失，用户无法继续其它操作。Actoinbar比Dialog拥有更多的功能按钮，提供给用户更多的功能选择，Acionbar一般都设计有一个默认的“取消”功能按钮，点击该按钮后关闭弹窗，用户点击弹窗以外的区域时相当于进行了点击“取消”功能按钮的默认回应。Actionbar一般被设计用来向用户展示多个功能按钮选择。
在iOS中，Actionbar的样式比较常见的是文字列表框，它出现在页面底部，以简洁的功能描述性文字展示功能按钮，敏感的功能操作一般用红色字体标出（也可以设计其它颜色以突出某个功能按钮）。
当功能按钮数量很多的时候，文字列表的形式不适合显示，此时可以用图形加文字描述排列的形式来进行展示。这种样式下需要注意弹窗内各功能按钮的UI设计和排列布局。
图形加文字描述排列的Actionbar
安卓系统中也有文字列表和图文排列两种样式的Actionbar。
在安卓系统中，Actionbar还经常被设计成“选择列表框”（其实就是用选项代替了功能按钮），比如安卓版的微信App中就是用这种设计方式让用户进行性别选择。这种设计方式的好处是减少了功能流程中的页面跳转，但是如果选项很多而且描述文字较多的时候，还是设计成选项详情页面会更好些。
提示对话框
Snackbar提示对话框是安卓系统的特色弹窗之一（安卓平台在开发的时候可以直接调用Snackbar类生成该弹窗，iOS好像也可以进行定制化设计开发），它也是一种非模态弹窗，同时拥有Toast和Dialog的特点，不会打断用户正常的操作流程，它除了可以告诉用户信息内容，还可以与用户进行对话交互（用户可以点击功能按钮进行回应）。
Snakbar Demo
一般情况下，Snackbar由信息内容加一个功能按钮组成，用户点击了功能按钮后弹窗消失，App随即执行该操作，进入相应的功能流程。Snackbar跟Toast一样是有时间限制的，即使用户不进行回应，弹窗出现一段时间后也会自动消失。
与Taost相似，Snackbar弹出一个小信息，作为提醒或消息反馈来用，一般用来显示操作结果，另外可以提供一个功能按钮给用户选择使用。例如你删除了某张图片，App弹窗告诉你删除成功，并提供一个“撤销删除”功能按钮给你进行对应的功能操作。
Snackbar原型
Snackbar还可以被设计成只有信息内容而没有功能按钮，这种样式的Snackbar用户无法进行操作，只能等它自动消失，此时它就相当于一种文字描述型的Toast，只是表现形式有所不同。
没有功能按钮的Snackbar原型
这种样式的Snackbar和Toast对比如下：
Snackbar和Toast的对比
个人比较喜欢安卓系统采用Snackbar与用户进行非模式弹窗交互，因为这种弹窗本身拥有比较友好的UI交互，显示内容和提醒度也比Toast好，还能提供一个功能按钮给用户选择使用。但是考虑到界面的整体设计，只有在界面内的元素大多为静态和底部的空白区域较大，而且需要提示给用户的内容比较多（无法用一个简短的句子描述）的时候，这种弹窗才会给用户更好的交互体验。否则本来界面就一大堆动态元素或者底部原本就充满信息内容，此时再从底部向上滑出一个弹窗，会显得整个界面非常拥挤和凌乱，而一般情况下移动端的App产品更多的是倾向于简约设计。使用弹窗要克制
并不是所有的弹窗设计都会被用户接受，特别是广告类弹窗常常会被用户所厌恶。我们在使用弹窗的时候要尽量克制，要考虑信息内容的必要性和目的性（商业推广或者增值服务等目的），来选择是否使用弹窗和使用哪种方式和样式的弹窗。一旦选择使用弹窗，请尽量少用，一般情况下都把弹窗的层级控制在只有一级（即关闭了一个弹窗后不会马上出现新的弹窗），接连不断的出现弹窗只会增加用户想要卸载App的欲望（愚人节整蛊设计除外^_^）。User story -- 小明删文件用一个用户故事来模拟场景，练习一下弹窗交互的产品设计：一、场景描述：step1：小明打开xx云盘App进入首页，App检测到手机并没有连接WiFi，于是弹窗“当前网络使用移动数据连接”，小明知道后切换到WiFi连接。step2：小明看完一部电影后想删除它，App弹窗“确认删除选中的文件吗？”小明想既然看完了就没必要存在云盘了，于是他点击了弹窗的【删除】按钮。step3：App删除了该电影文件，并提示“文件删除成功！”还提供了一个【撤销】的功能按钮。小明觉得这部电影删了好可惜，于是他点击了【撤销】，App此时进行文件恢复操作，完成后提示“文件恢复成功”。小明看到电影文件又出现在网盘里，露出了满意的笑容。二、流程设计
网络状态检测
三、产品原型：根据这个user story设计成简易的产品原型，下面为原型演示连接：- END -读完文章如果觉得有收获，记得关注和点赞哦～期待在产品的成长路上与您共同进步。
爱生活，爱产品，有点文艺。
南方一只善良的熊。四种常见的App弹窗设计，你有仔细注意观察吗？ - 推酷
四种常见的App弹窗设计，你有仔细注意观察吗？
弹窗又称为对话框，是App与用户进行交互的常见方式之一。弹窗分为模态弹窗和非模态弹窗两种，两者的区别在于需不需要用户对其进行回应。模态弹窗会打断用户的正常操作，要求用户必须对其进行回应，否则不能继续其它操作；非模态弹窗则不会影响用户的操作，用户可以不对其进行回应，非模态弹窗通常都有时间限制，出现一段时间后就会自动消失。
无论是模态还是非模态，弹窗都是位于当前页面的最顶层。模态弹窗常常都还会伴随半透明的遮罩来吸引用户的视觉焦点，以突出弹窗的信息内容。非模态弹窗一般被设计成用来告诉用户信息内容，而模态弹窗除了告诉用户信息内容外还需要用户进行功能操作。
伴随半透明遮罩的模态弹窗
随着开发技术的发展，弹窗的方式和样式多种多样。最常见的弹窗有以下四种：
Toast、Dialog、Actionbar 和 Snackbar
四种常见的App弹窗
Toast &提示框
Toast提示框是一种非模态弹窗，它弹出一个小信息，作为提醒或消息反馈来用，一般用来显示操作结果，或者应用状态的改变。例如你发出了一条短信，App弹出一个Toast提示你消息已发出。
最常见的Toast提示框为一句简短的描述性文字。这种样式的弹窗可以出现在页面的任何位置，可设置成在页面顶部、中部或者在底部出现（但一般都是出现在页面的中轴线），具体的显示位置根据页面的整体设计进行设置。该种Toast在安卓App上十分常见。
还有一种Toast弹窗由简单的图形和简短的文字组成，显示位置一般位于页面正中央。这种Toast在iOS和安卓上都可以经常见到。
iOS中建议，设计一种引人注目但又和App 的界面协调融合的方式去展示信息。这种展示信息的方式和安卓纯文本的Toast相似，只是界面交互有所不同，它一般在内容页顶部向下推动出现，然后向上推动消失。这种展示信息的方式现在也在安卓平台上使用。例如腾讯新闻App的iOS版和安卓版均采用了这种形式的Toast弹窗进行刷新功能的操作提醒。
考虑到Toast提示框显示的时间较短（几秒种）、占用区域不大，它容易被用户忽略，所以Toast不适合承载过多的文字和重要信息。
Dialog &对话框
Dialog对话框是一种模态弹窗。当用户进行了敏感操作，或者当App内部发生了较为严重性的状态改变，这种操作和改变会带来影响性比较大的行为结果，在该结果发生前以Dialog对话框的弹窗形式告知用户且让用户进行功能选择。比如退出App、进行付费下载等功能操作。
一般情况下Dialog由标题、信息内容和功能按钮组成，只有当用户点击了某个功能按钮后弹窗才会消失，App随即执行该功能操作，进入相应的功能流程。
Dialog的标题和信息内容的文字描述都要设计成尽可能的简洁和无异义，也可以选择省略标题只保留内容描述和功能按钮（实际上大多数Dialog都被设计成没有标题的样式）。使用Dialog，功能按钮最好只有两个，让用户选择“是”或“非”的功能操作（“是”指对内容描述的确认操作，比如确认删除、确认付费；“非”一般指取消操作，然后关闭弹窗）；也常被设计成只有一个“确认”按钮，目的是让用户阅读内容后点击关闭弹窗（这种样式的Dialog，信息内容必须非常有必要性以至于需要打断用户的操作进行信息内容阅读确认，否则请用Toast进行非模态弹窗提示）。
若Dialog对话框出现三个或以上的功能按钮，将会增加用户的功能选择负担，所以需要使用多个功能按钮选择的时候请考虑使用Actionbar。
Actionbar 功能框
Actionbar功能框可以看成是Dialog的一种延伸设计，两者都是模态弹窗，用户必须进行回应，否则弹窗不会消失，用户无法继续其它操作。Actoinbar比Dialog拥有更多的功能按钮，提供给用户更多的功能选择，Acionbar一般都设计有一个默认的“取消”功能按钮，点击该按钮后关闭弹窗，用户点击弹窗以外的区域时相当于进行了点击“取消”功能按钮的默认回应。Actionbar一般被设计用来向用户展示多个功能按钮选择。
在iOS中，Actionbar的样式比较常见的是文字列表框，它出现在页面底部，以简洁的功能描述性文字展示功能按钮，敏感的功能操作一般用红色字体标出（也可以设计其它颜色以突出某个功能按钮）。
当功能按钮数量很多的时候，文字列表的形式不适合显示，此时可以用图形加文字描述排列的形式来进行展示。这种样式下需要注意弹窗内各功能按钮的UI设计和排列布局。
图形加文字描述排列的Actionbar
安卓系统中也有文字列表和图文排列两种样式的Actionbar。
在安卓系统中，Actionbar还经常被设计成“选择列表框”（其实就是用选项代替了功能按钮），比如安卓版的微信App中就是用这种设计方式让用户进行性别选择。这种设计方式的好处是减少了功能流程中的页面跳转，但是如果选项很多而且描述文字较多的时候，还是设计成选项详情页更好些。
Snackbar &提示对话框
Snackbar提示对话框是安卓系统的特色弹窗之一（安卓平台在开发的时候可以直接调用Snackbar类生成该弹窗，iOS好像也可以进行定制化设计开发），它也是一种非模态弹窗，同时拥有Toast和Dialog的特点，不会打断用户正常的操作流程，它除了可以告诉用户信息内容，还可以与用户进行对话交互（用户可以点击功能按钮进行回应）。
Snakbar Demo
一般情况下，Snackbar由信息内容加一个功能按钮组成，用户点击了功能按钮后弹窗消失，App随即执行该操作，进入相应的功能流程。Snackbar跟Toast一样是有时间限制的，即使用户不进行回应，弹窗出现一段时间后也会自动消失。
与Taost相似，Snackbar弹出一个小信息，作为提醒或消息反馈来用，一般用来显示操作结果，另外可以提供一个功能按钮给用户选择使用。例如你删除了某张图片，App弹窗告诉你删除成功，并提供一个“撤销删除”功能按钮给你进行对应的功能操作。
Snackbar原型
Snackbar还可以被设计成只有信息内容而没有功能按钮，这种样式的Snackbar用户无法进行操作，只能等它自动消失，此时它就相当于一种文字描述型的Toast，只是表现形式有所不同。
没有功能按钮的Snackbar原型
这种样式的Snackbar和Toast对比如下：
Snackbar和Toast的对比
个人比较喜欢安卓系统采用Snackbar与用户进行非模式弹窗交互，因为这种弹窗本身拥有比较友好的UI交互，显示内容和提醒度也比Toast好，还能提供一个功能按钮给用户选择使用。但是考虑到界面的整体设计，只有在界面内的元素大多为静态或者底部的空白区域较大的时候，而且需要提示给用户的内容比较多（无法用一个简短的句子能描述完）的时候，这种弹窗才会给用户更好的交互体验。否则本来界面就一大堆动态元素或者底部本来就充满信息内容，此时再从底部向上滑出一个弹窗，会显得整个界面非常拥挤非常凌乱，而一般情况下移动端的App产品更多的是倾向于简约设计。
使用弹窗要克制
一般情况下，正常的App使用和页面阅读时突然出现弹窗，并不是所有的用户都会喜欢这种交互模式，特别是广告类弹窗常常会被用户厌恶。我们在使用弹窗的时候要尽量克制，要考虑信息内容的必要性与目的性（商业推广、增值服务等目的），来选择是否使用弹窗和使用哪种方式和样式的弹窗。一旦选择使用弹窗，请尽量保证少用弹窗，一般情况下弹窗的层级都控制在只有一级（即关闭了一个弹窗后没有出现新的弹窗），接连不断的出现弹窗只会增加用户想要卸载App的欲望。
User story -- 小明删文件
用一个用户故事来模拟场景，练习一下弹窗交互的产品设计：
step1：小明打开XX云盘App进入首页，App检测到手机并没有连接WiFi于是提示“当前网络使用移动数据连接”，小明知道后马上切换到WiFi，并感叹道“幸亏蹭了隔壁老王的WiFi，不然一部电影看下来流量费够我受的了。”
step2：小明看完了一部电影后，想把它从云盘里删了。选中后点击“删除”按钮，App提示“确认删除选中的文件吗？”小明想既然看完了就没必要存在云盘了，于是他点击了“确认”按钮。
step3：App删除了该电影文件，并提示“文件删除成功！”还提供了一个“撤销删除”的功能按钮。小明想了想这部电影删了好可惜，于是他点击了“撤销删除”，App此时又进行相应的功能操作，完成后提示“文件恢复成功”。小明看到电影文件又出现在网盘里，露出了满意的笑容。
文／南良熊（简书作者）
原文链接：/p/d6c9a485c061
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致移动端和web端UI设计
最近做交互总结，又碰到了页面弹窗提示的问题，于是便总结了下。
我按弹窗提示的样式分为了以下几种来进行说明。每种样式的提示强度不同，对用户在使用app时的打扰与影响也不同。这些提示并不是说哪种好哪种不好，按照自己的规范选择合理的就好。
以下总结，前三个提示的名称是大家习以为常的，但后面几个的命名是以我个人的经验来命的，不一定很合理，但至少可以说明点问题。
Action sheet 即为操作列表，通常用于在当前页面给用户提供快捷的选择按钮，用在功能较多，对次要功能进行收纳的界面中。
Action sheet的IOS与Android的展示样式有所不同。IOS主要是以我们所熟知的半覆盖式浮层，而Android以弹框菜单为主。（如下图）
上图是app中最常见的样式了，当然也会遇到一些其它的样式，如在adroid中有时也会用到半覆盖式浮层，大多是用于分享到第三方的页面。
还有一种情况是选择菜单与当前选项关系比较紧密，选择菜单直接原地展开，当前选项为选择菜单中的一项。如下图左边是ios的popper样式，右边是android的卡片菜单。但在实际应用当中，两个平台并没有很明显的区分，一般就通用成左图的样式了。但手机屏幕比较小，用这咱展示样式会很界面显得比较碎，所以在app的实际应用中，这种样式很少用到。目前大家熟知的app中，微博首页的分组用了这种方式切换，还有qq的v6.3.1版本的空间也带入了这种设计。
Alert 即为弹框提示，也叫警示框，用于向用户提供警示，用户必须进行操作后才能进行下一步操作。主要用于系统向用户提示操作后涉及隐私、及其他非常重要的信息或后果不可逆的操作流程中。必须给出明确的操作按钮，主要以以下几种样式展现。为了引导用户操作，有时会强化某按钮，弱化另一按钮。
alert打断用户的操作，因此应减少其在app中的出现次数，同时也避免出现过多导致用户对alert不重视。
还有一种alert提醒，在使用app时经常遇到的，同时也是很另人生烦的，那就是要求对app评价的alert。这种提醒，往往会打断用户的操作，如果出现时机不恰当，会让人产生很厌烦的感觉。这里提到它，是因为它下方的操作按钮，一般有三个，所以上下排列，这咱排列相较于左右排列，按钮间的间距比较小，所以也加大了操作失误的机率。所以一般情况下慎用这种排布方式。
Toast即为浮层提示，快速地为用户显示少量的信息。
Toast浮动显示信息给用户，它永远不会获得焦点，不影响用户的输入等操作，主要用于一些帮助/提示。常用的有两种样式，纯文字的和带图的。
这种提示样式是最常见的，能够告诉用户目前的状况，但又不会对用户造成太多的干扰，一带而过。同时这种提示也是比较容易被忽略掉的，所以对于一些比较重要的提示最好不要用这种样式。
这也是一种比较常见的提示，主要用于对页面内容或是某个输入框或按钮进行说明的文字。一般以淡而小的文字存在于页面上，对用户的操作影响比较小，提示性比较弱，仅仅是对当前位置的说明，不会影响页面的视觉焦点。
如下图是支付宝蚂蚁花呗的首页，红框中的文字是对前面描述的进一步说明，不影响视觉焦点，看下月应还金额时才会看到它们。在输入界面这种提示比较多见，如注册界面密码规则的提示语等。
位于页面顶部的提示，有三种样式，这三种样式表达的轻重性不一，所用场景不同，对用户的打扰程度也不同，是其它提示样式的一种变体。
第一种，一直存在于页面顶部，用于重要的提示或是没网这种严重影响操作的提示。如下图，没有网络时，qq顶部的提示。
第二种，操作出错或是页面内容出错是从页面顶部滑下，之后马上消失，是toast的一种变形。这样的提示比普通toast提示更显眼些，更能引人注意到。
第三种，位于电池条的位置，用于一些上传的地方，上传需要时间，又要保证APP的流畅性，削弱对用户的干扰，甚至把干扰减少至零。如发布动态时，后台上传，在最顶部提示，这种提示更弱，很容易被忽略掉。这种提示也越来越少见了，没找到图片，请允许我ps乱入一张。
一般用于第一次出现的页面，提示一些重要或是常用的功能，或是页面功能搬家的提示。这种提示一般常见的一有两种形式，突出重点的强弱性不同。
如下图左边的页面，功能提示比较强，必须点击掉提示才可进入下一步操作。而右边的形式就弱了好多，可看可不看，不影响页面的操作。当然这样的功能说明的提示还可以从二者延伸出一些其它样式，但终归也就是必须看和无须看两种吧。
通过页面的变化进行的提示，不影响页面的整体布局，同时在用户操作的地方提示，不容易被忽略。
支付宝的手势密码错误的提示是个很好的例子，通过头像的后退缩小，错误提示文字的出现，很好的提示了用户操作的错误。最常见到这种提示的地方还有登录注册页面，输入错误时，页面出现细小而精致的变化，同时很好的提醒用户。
大体上最常见的提示样式都在这了吧，如有遗漏或是有更好的提示，后续更新。同时也欢迎小伙伴们砸砖。
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：12314次
排名：千里之外
转载：45篇
(6)(11)(3)(17)(1)(9)(2)(2)(1)
(window.slotbydup = window.slotbydup || []).push({
id: '4740881',
container: s,
size: '200,200',
display: 'inlay-fix'}