app提示方式与区别

author author     2023-03-23     400

关键词:

参考技术A 最近在优化升级积分移动端界面交互部分,很多页面部分涉及到各种提示,做一点汇总;

我们经常能见到各种操作提示,有的提示框是从底部弹起,有的提示框是从中间弹出;

那么问题来了,提示框从中间弹出和从底部弹起,有什么区别呢?

我们来看几种情况:

一、提示信息按钮从底部弹起

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个按钮,采用底部弹出选择控件;

微信小程序与uni-app的区别(代码片段)

...a;①微信小程序:bindtap②uni-app:@click函数传参方式:①微信小程序:<viewbindtap=& 查看详情

app.use与app.get的区别及解析

app.use(path,callback)中的callback既可以是router对象又可以是函数app.get(path,callback)中的callback只能是函数例子app.jsvarexpress=require(‘express‘);varapp=express();varindex=require(‘./routes/index‘);//1.app.use(‘/test1‘,fu 查看详情

怪咖------前后端分离与不分离的区别------

...出来。前端专注做数据显示,通过文字,图片或者图标等方式让数据形象直观的显示出来,后端专注做数据的操作,前端通过后端提供的接口把数据发给后端,有后端对数据进行修改操作。  所以在前后端分离的应用模式中,... 查看详情

oracleformshint与tooltip帮助提示区别

1.Froms属性设置2.Hint显示:显示在左下角3.Tooltip显示:其中TooltipVisualAttributeGroup,可以设置显示效果 查看详情

app测试与web测试的区别

1.从功能测试的来讲的话,在流程和功能测试上是没有区别的。系统测试和一些细节可能会不一样。那么我们就要先来了解,web和app的区别。web项目,一般都是b/s架构,基于浏览器的,而app则是c/s的,必须要有客户端。那么在系... 查看详情

动态链接(Android App Links)不提示“打开方式”Android 6.0+

】动态链接(AndroidAppLinks)不提示“打开方式”Android6.0+【英文标题】:DynamicLinks(AndroidAppLinks)nottoprompt"openwith"Android6.0+【发布时间】:2018-08-1714:37:48【问题描述】:如何进行设置,以便动态链接(来自Fireabase)直接打开... 查看详情

移动测试与传统测试的区别

...相互切换7.手势测试8.权限测试未开权限时的使用情况及提示,如未使用麦克风权限9.客户端测试一个好的应用如果只能在高端机运行不能在低端机运行也是不行的10.极限测试移动app在一定临界点的行为 如CPU内存超过95%切换飞... 查看详情

app测试与web测试的本质区别

...上来讲的话,APP测试、web测试在流程和功能测试上是没有区别的根据两者载体不一样,则区别如下:1、系统结构方面            web项目,b/s架构,基于浏览器的;web测试只要更新了服... 查看详情

以编程方式添加视图与使用 recyclerView 有啥区别?

】以编程方式添加视图与使用recyclerView有啥区别?【英文标题】:WhatwillbethedifferencebetweenaddingtheviewprogrammaticallyvsusingrecyclerView?以编程方式添加视图与使用recyclerView有什么区别?【发布时间】:2022-01-1008:59:15【问题描述】:有一... 查看详情

前后端分离与前后端不分离的区别

...何加载到前端中,都由前端自己决定,网页有网页的处理方式,App有App的处理方式,但无论哪种前端,所需的数据基本相同,后端仅需开发一套逻辑对外提供数据即可。在前后端分离的应用模式中,前端与后端的耦合度相对较低... 查看详情

记录一下vue3.0与2.0简单使用上的区别

参考技术A1、创建实例方式不同:2.0使用构造函数newVue的方式,将选项对象通过参数传入;3.0使用Vue.createApp()静态方法创建。参数依然是选项多先发。2.0使用符。2、定义指令、组件等方法的不同:2.0定义指令和组件等是通过Vue的... 查看详情

app的消息提示音怎么关

...应软件--将声音的开关关闭即可。参考技术A苹果手机消息提示音怎么关闭?是不是正在办公室开会,苹果手机的消息提示音在不停响?当手机不停响的时候,是不是公司同事和老板都在盯着你看?是不是很尴尬?哈哈哈!相信有... 查看详情

二进制传输与文本传输的区别

Ftp,winscp等工具下载文件时候有选项,可选的有二进制方式和文本方式。文本方式又称为ASCII方式两者区别如下。  ASCII方式和BINARY方式的区别是回车换行的处理,binary方式不对数据执行任何处理,ASCII方式将回车换行转换为本... 查看详情

#pragmaonce与#ifndef的区别

?为了避免同一个文件被include多次1???#ifndef方式2???#pragmaonce方式在能够支持这两种方式的编译器上,二者并没有太大的区别,但是两者仍然还是有一些细微的区别。????方式一: ???#ifndef__SOMEFILE_H__???#define__SOMEFILE_H__???......//一... 查看详情

延迟加载js方式async与defer区别

http://t.csdn.cn/OPnUU 查看详情

微信小程序与微信公众号之间的区别是啥?

...产品与服务)微信与公众号在开发语言、设计规范、营销方式、审核机制等功能方面均有较大不同。公众号是一种账号类型,为用户提供信息与咨询发布平台,提供了一种新的信息传播方式,构建与读者之间更好的沟通与管理模... 查看详情

app.get - res.send 与 return res.send 之间有啥区别吗

】app.get-res.send与returnres.send之间有啥区别吗【英文标题】:app.get-isthereanydifferencebetweenres.sendvsreturnres.sendapp.get-res.send与returnres.send之间有什么区别吗【发布时间】:2017-08-2016:52:48【问题描述】:我是node和express的新手。我已经看... 查看详情

服务两种启动方式(startservice与bindservice)的区别

综上两篇文章1.AndroidService的基本用法(startService启动方式生命周期)2.AndroidService与Activity之间的通信(bindService启动方式)区别如下:一.生命周期上的区别startService启动服务:Service会经历onCreate()-------> 查看详情