最近做交互总结,又碰到了页面弹窗提示的问题,于是便总结了下。

我按弹窗提示的样式分为了以下几种来进行说明。每种样式的提示强度不同,对用户在使用app时的打扰与影响也不同。这些提示并不是说哪种好哪种不好,按照自己的规范选择合理的就好。

以下总结,前三个提示的名称是大家习以为常的,但后面几个的命名是以我个人的经验来命的,不一定很合理,但至少可以说明点问题。

Action sheet

Action sheet 即为操作列表,通常用于在当前页面给用户提供快捷的选择按钮,用在功能较多,对次要功能进行收纳的界面中。

Action sheet的IOS与Android的展示样式有所不同。IOS主要是以我们所熟知的半覆盖式浮层,而Android以弹框菜单为主。(如下图)

iOS的半覆盖式浮层&android的弹框菜单

上图是app中最常见的样式了,当然也会遇到一些其它的样式,如在adroid中有时也会用到半覆盖式浮层,大多是用于分享到第三方的页面。

还有一种情况是选择菜单与当前选项关系比较紧密,选择菜单直接原地展开,当前选项为选择菜单中的一项。如下图左边是ios的popper样式,右边是android的卡片菜单。但在实际应用当中,两个平台并没有很明显的区分,一般就通用成左图的样式了。但手机屏幕比较小,用这咱展示样式会很界面显得比较碎,所以在app的实际应用中,这种样式很少用到。目前大家熟知的app中,微博首页的分组用了这种方式切换,还有qq的v6.3.1版本的空间也带入了这种设计。

iOS的popper样式 &android的卡片菜单

Alert

Alert 即为弹框提示,也叫警示框,用于向用户提供警示,用户必须进行操作后才能进行下一步操作。主要用于系统向用户提示操作后涉及隐私、及其他非常重要的信息或后果不可逆的操作流程中。必须给出明确的操作按钮,主要以以下几种样式展现。为了引导用户操作,有时会强化某按钮,弱化另一按钮。

常见的几种alert样式

alert打断用户的操作,因此应减少其在app中的出现次数,同时也避免出现过多导致用户对alert不重视。

还有一种alert提醒,在使用app时经常遇到的,同时也是很另人生烦的,那就是要求对app评价的alert。这种提醒,往往会打断用户的操作,如果出现时机不恰当,会让人产生很厌烦的感觉。这里提到它,是因为它下方的操作按钮,一般有三个,所以上下排列,这咱排列相较于左右排列,按钮间的间距比较小,所以也加大了操作失误的机率。所以一般情况下慎用这种排布方式。

app引导好评

Toast

Toast即为浮层提示,快速地为用户显示少量的信息。

Toast浮动显示信息给用户,它永远不会获得焦点,不影响用户的输入等操作,主要用于一些帮助/提示。常用的有两种样式,纯文字的和带图的。

常见的两种toast样式

这种提示样式是最常见的,能够告诉用户目前的状况,但又不会对用户造成太多的干扰,一带而过。同时这种提示也是比较容易被忽略掉的,所以对于一些比较重要的提示最好不要用这种样式。

页面文字提示

这也是一种比较常见的提示,主要用于对页面内容或是某个输入框或按钮进行说明的文字。一般以淡而小的文字存在于页面上,对用户的操作影响比较小,提示性比较弱,仅仅是对当前位置的说明,不会影响页面的视觉焦点。

如下图是支付宝蚂蚁花呗的首页,红框中的文字是对前面描述的进一步说明,不影响视觉焦点,看下月应还金额时才会看到它们。在输入界面这种提示比较多见,如注册界面密码规则的提示语等。

支付宝蚂蚁花呗

页面顶部的提示

位于页面顶部的提示,有三种样式,这三种样式表达的轻重性不一,所用场景不同,对用户的打扰程度也不同,是其它提示样式的一种变体。

第一种,一直存在于页面顶部,用于重要的提示或是没网这种严重影响操作的提示。如下图,没有网络时,qq顶部的提示。

第二种,操作出错或是页面内容出错是从页面顶部滑下,之后马上消失,是toast的一种变形。这样的提示比普通toast提示更显眼些,更能引人注意到。

第三种,位于电池条的位置,用于一些上传的地方,上传需要时间,又要保证APP的流畅性,削弱对用户的干扰,甚至把干扰减少至零。如发布动态时,后台上传,在最顶部提示,这种提示更弱,很容易被忽略掉。这种提示也越来越少见了,没找到图片,请允许我ps乱入一张。

页面上的新功能提示

一般用于第一次出现的页面,提示一些重要或是常用的功能,或是页面功能搬家的提示。这种提示一般常见的一有两种形式,突出重点的强弱性不同。

如下图左边的页面,功能提示比较强,必须点击掉提示才可进入下一步操作。而右边的形式就弱了好多,可看可不看,不影响页面的操作。当然这样的功能说明的提示还可以从二者延伸出一些其它样式,但终归也就是必须看和无须看两种吧。

必须看的功能提示&无须看的功能提示

特殊提示

通过页面的变化进行的提示,不影响页面的整体布局,同时在用户操作的地方提示,不容易被忽略。

支付宝的手势密码错误的提示是个很好的例子,通过头像的后退缩小,错误提示文字的出现,很好的提示了用户操作的错误。最常见到这种提示的地方还有登录注册页面,输入错误时,页面出现细小而精致的变化,同时很好的提醒用户。

大体上最常见的提示样式都在这了吧,如有遗漏或是有更好的提示,后续更新。同时也欢迎小伙伴们砸砖。

uniapp显示提示框背景变暗_APP页面提示样式小总结相关推荐

  1. 点击按钮显示模态框,只显示模态框背景

    点击按钮显示模态框,只显示模态框背景 我的问题是,需要刷新页面,再点击模态框按钮才会显示模态框,否则,点击按钮只会弹出模态框背景,模态框未显示. 在加载ftl页面时添加了一个刷新页面的方法: $(do ...

  2. echarts调节提示框背景颜色与透明度

    效果图: js代码: //提示框tooltip: {//触发类型:坐标轴触发trigger: 'axis',backgroundColor:'rgba(255,255,255,0.8)',//通过设置 ...

  3. android 带箭头提示框,三种带箭头提示框总结实例

    无论是提示框还是导航栏都能看到如上图所示的带有箭头的框框,这种箭头可以通过背景图片或者是css来实现,本文介绍三种通过css实现带箭头的提示框. 1.通过border属性 思路:两个三角形,通过定位使 ...

  4. Unity调用Window提示框Yes/No(英文提示窗)

    Unity调用Windows弹提示框 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人! (拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Chinar - ...

  5. C# winfrom美化提示框,顶部弹出提示框

    我也是借鉴了别人的写的,链接: https://blog.csdn.net/qq_38469552/article/details/114591731只是把他那个整理一下,方便日后使用 第一步,先创建 ...

  6. mui日期选择器html,MUI-时间提示框,日期和时间提示设置

    1.下图为日期选择 2.下图为时间 3.源码 消息 日期提示框 时间 mui.init(); var btns = document.getElementsByClassName("mui- ...

  7. html5 气泡文字提示框,css实现气泡文字提示框代码教程

    css气泡文字提示框 实现的等腰直角三角形式的对话框 效果如下: 代码如下: css: .arrow span{border-color:#0FF #000 #f00 #ff0 ; top:0px;} ...

  8. html提示框title更改,设置title提示框的样式

    默认的title不能设置样式,通过js和css实现title的功能 css样式: /*修改提示框*/ #mytitle { position: absolute; color: #ffffff; ma ...

  9. html5鼠标悬停提示框,HTML5鼠标悬停动画提示框特效源码,前端必备

    效果图 今天给各位官人带来的是,HTML5鼠标悬停动画提示框特效源码! 效果炫图生动,给网站带来较好的交互体验! 由于代码过长需要文档版源码来我的前端群581549454,已上传到群文件 废话不多说, ...

最新文章

  1. JavaScript引用类型之Array数组之强大的splice()方法
  2. CENTOS7 Python3.7安装pip模块以及pip使用
  3. 主席树【bzoj3524(p3567)】[POI2014]Couriers
  4. SQLite与Sql Server的语法差异(转载)
  5. SMTP协议初探(二)----linux下c编程实现发邮件
  6. VisualBox配置共享文件夹功能
  7. 企业中MySQL高可用集群架构三部曲之MM+keepalived
  8. Cobbler-自动化部署神器01
  9. 技术开发人员需要改变性格吗?
  10. 【MySQL建表语句转PostgreSQL建表语句】MySQL建表语句转PostgreSQL建表语句
  11. 免费开源的电路图和PCB绘图软件KiCAD
  12. 公司打算使用内网安全管理的软件,看了一下感觉IP-guard和Ping32两个好像不错,有需要的朋友可以参考一下
  13. qq空间显示手机型号android,任意修改QQ空间发表说说显示的手机型号
  14. 融云亮相GTC全球流量大会 荣膺鲸鸣奖2019年度优秀出海服务商
  15. 动手学深度学习(pytorch)中d2lzh_pytorch包的安装(附资源)
  16. 1987年,国际C语言混乱代码大赛
  17. 游戏开发、安卓、IOS知识概括
  18. socket编程接口
  19. 视图、创建视图的语法、视图的作用
  20. 求阶乘问题c语言编程,求阶乘问题

热门文章

  1. 电销外呼系统,手机+电脑双通路解决电销难题
  2. libsodium linux,Linux安装libsodium失败解决办法~
  3. 虚拟化 私有云和公有云_虚拟化和私有云-一种解释
  4. nsis 检测vcredist_x86是否安装
  5. echarts中使用散点图根据后端接口动态生成点,并根据点数据动态渲染点颜色
  6. Ubuntu环境安装redash
  7. 按位与、按位或、按位异或、按位取反、按位左移、按位右移
  8. python下载邮件附件
  9. 罗马数字转换器(FreeCodeCamp)
  10. 设计一个简易模糊查询输入框(上)