App页面提示样式小总结
最近做交互总结,又碰到了页面弹窗提示的问题,于是便总结了下。
我按弹窗提示的样式分为了以下几种来进行说明。每种样式的提示强度不同,对用户在使用app时的打扰与影响也不同。这些提示并不是说哪种好哪种不好,按照自己的规范选择合理的就好。
以下总结,前三个提示的名称是大家习以为常的,但后面几个的命名是以我个人的经验来命的,不一定很合理,但至少可以说明点问题。
Action sheet
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即为浮层提示,快速地为用户显示少量的信息。
Toast浮动显示信息给用户,它永远不会获得焦点,不影响用户的输入等操作,主要用于一些帮助/提示。常用的有两种样式,纯文字的和带图的。
这种提示样式是最常见的,能够告诉用户目前的状况,但又不会对用户造成太多的干扰,一带而过。同时这种提示也是比较容易被忽略掉的,所以对于一些比较重要的提示最好不要用这种样式。
页面文字提示
这也是一种比较常见的提示,主要用于对页面内容或是某个输入框或按钮进行说明的文字。一般以淡而小的文字存在于页面上,对用户的操作影响比较小,提示性比较弱,仅仅是对当前位置的说明,不会影响页面的视觉焦点。
如下图是支付宝蚂蚁花呗的首页,红框中的文字是对前面描述的进一步说明,不影响视觉焦点,看下月应还金额时才会看到它们。在输入界面这种提示比较多见,如注册界面密码规则的提示语等。
页面顶部的提示
位于页面顶部的提示,有三种样式,这三种样式表达的轻重性不一,所用场景不同,对用户的打扰程度也不同,是其它提示样式的一种变体。
第一种,一直存在于页面顶部,用于重要的提示或是没网这种严重影响操作的提示。如下图,没有网络时,qq顶部的提示。
第二种,操作出错或是页面内容出错是从页面顶部滑下,之后马上消失,是toast的一种变形。这样的提示比普通toast提示更显眼些,更能引人注意到。
第三种,位于电池条的位置,用于一些上传的地方,上传需要时间,又要保证APP的流畅性,削弱对用户的干扰,甚至把干扰减少至零。如发布动态时,后台上传,在最顶部提示,这种提示更弱,很容易被忽略掉。这种提示也越来越少见了,没找到图片,请允许我ps乱入一张。
页面上的新功能提示
一般用于第一次出现的页面,提示一些重要或是常用的功能,或是页面功能搬家的提示。这种提示一般常见的一有两种形式,突出重点的强弱性不同。
如下图左边的页面,功能提示比较强,必须点击掉提示才可进入下一步操作。而右边的形式就弱了好多,可看可不看,不影响页面的操作。当然这样的功能说明的提示还可以从二者延伸出一些其它样式,但终归也就是必须看和无须看两种吧。
特殊提示
通过页面的变化进行的提示,不影响页面的整体布局,同时在用户操作的地方提示,不容易被忽略。
支付宝的手势密码错误的提示是个很好的例子,通过头像的后退缩小,错误提示文字的出现,很好的提示了用户操作的错误。最常见到这种提示的地方还有登录注册页面,输入错误时,页面出现细小而精致的变化,同时很好的提醒用户。
大体上最常见的提示样式都在这了吧,如有遗漏或是有更好的提示,后续更新。同时也欢迎小伙伴们砸砖。
App页面提示样式小总结相关推荐
- uniapp显示提示框背景变暗_APP页面提示样式小总结
最近做交互总结,又碰到了页面弹窗提示的问题,于是便总结了下. 我按弹窗提示的样式分为了以下几种来进行说明.每种样式的提示强度不同,对用户在使用app时的打扰与影响也不同.这些提示并不是说哪种好哪种不好 ...
- ios浏览器打开app页面提示“浏览器打不开该网页,因为网址无效”
在一次开发app中实现遇到的问题,实现H5页面唤醒app并跳转到指定页面,手机没有此app就跳转到商城下载页面,安卓手机有无app进行的跳转都在自己意料之中,毫无问题,但是iOS在有app的时候正常跳 ...
- Android App拉起微信小程序提示bad_param
Android App拉起微信小程序提示bad_param,主要是因为req.userName的值传错,req.userName的值是小程序的原始ID,而不是appId,小程序之间的跳转是appId. ...
- h5与小程序服务器如何辨别,小程序丨教你六招,快速区分H5页面还是APP页面
限制的H5技术和原生APP的技术很多类似或者实现效果很相像,不仔细去观察,大多人不会察觉两种有何不同.第九程序帮大家整理出比较容易判断的一个APP页面是原生的还是H5页面的方法. 希望可以帮到大家,以 ...
- 概览的样式css,app页面概览.html
APP页面概览 $axure.utils.getTransparentGifPath = function() { return 'resources/images/transparent.gif ...
- 已经禁用了虚拟内存,为什么还提示“页面文件太小 无法完成操作 ”
已经关闭了虚拟内存,为什么还提示"页面文件太小 无法完成操作 " 因为windows系统中,虚拟内存是没办法通过人为进行禁用的,也就是说,你是禁用不掉的,虽然你通过界面看着是禁用了 ...
- dakai微信小程序 ios_iOS APP拉起微信小程序
背景:由于公司业务需求,我们公司自己开发了一个微信小程序,然后通过App拉起微信小程序进行交互,有一些功能也可以放在小程序中去实现! 准备:首先你在微信的开放平台创建应用,并通过审核,就是你的App具 ...
- 美团App页面视图可测性改造实践
一次编写多处运行的动态化容器技术给研发效率带来了极大的提升,但对于依旧需要多端验证的测试流程来说,在效率层面却面临着极大的挑战.本文围绕动态化容器中的动态布局技术,阐述了如何通过可测性改造来帮助达成提 ...
- 小程序嵌套h5页面_微信小程序内嵌h5页面
概况 使用 标签能在小程序中打开外部网页,但是要打开的网页的域名必须跟小程序的业务域名(业务域名可以在小程序的后台管理界面添加)一致,否则在真机上是打不开的.如果开发工具上勾选了'不校验域名',在开发 ...
最新文章
- 从图(Graph)到图卷积(Graph Convolution):漫谈图 神经⽹络模型 (⼀)
- 9月14日学习内容整理:初识别面向对象
- 【学习笔记】32、字符串格式化
- php程序中报date错误
- html5 video修改默认样式,HTML5中将video设置为背景的方法
- while语句的使用
- 《深入理解 Spring Cloud 与微服务构建》第十八章 使用 Spring Security OAuth2 和 JWT 保护微服务系统
- 任正非谈鸿蒙系统问题不大,任正非谈鸿蒙系统:两三年重建生态,有信心打造全球生态...
- 关于php变量的赋值和引用的区别
- 三相全控tc787触发电路_典型定频空调器的电路识图方法,一看就懂
- ARM指令集之跳转指令
- python写的 自定义连点器 的开发全过程(抢票、信息轰炸等、游戏连招等)——思路及解析【内附完整源码】
- dlna投屏显示服务器没互动,Dlna投屏
- 024.RN项目android打包
- 不平衡数据处理之SMOTE、Borderline SMOTE和ADASYN详解及Python使用
- 7-3 三维向量运算设计一个三维向量类,实现向量加法、减法以及向量与标量的乘法和除法运算。
- python递归解压文件_递归调用解压zip包或rar包
- 词霸天下---词根227【-gress- = -grad- = -gred- = -gre(e)- 步,走】
- 为什么要申报绿色工厂?
- 压缩算法gorilla paper encoding原理
热门文章
- 【Python】set与frozenset的区别
- 千万不要抱怨,抱怨会带来灾难。
- 怎么高效批量调整视频的尺寸大小
- Support for password authentication was removed on August 13, 2021. Please use ...
- 扫二维码银行卡诈骗是如何实现的?日常生活中如何避免?
- WPF 精修篇 Menu
- 汽车智能化基本概念:CPU、GPU、NPU、DPU、MCU、ECU……
- Java逻辑运算符、位运算符
- 用matlab求解线性代数方程
- C/C++游戏开发:从零开始,用C++编写一个潜艇大战游戏!