App设计中Toast和Alert的那点事儿

本文探讨了移动应用设计中如何选择使用Toast和Alert。Toast是短暂的底部或中部提示,不会中断用户操作,适合展示次要信息;Alert(在Android上称为Dialog)会遮挡当前页面,用于重要信息提示和用户交互。设计师应尽量使用Toast以保证流畅性,仅在必要时使用Alert。使用Toast的原则包括简短提示和避免滥用,而Alert则适用于需要用户确认或选择的场景。
摘要由CSDN通过智能技术生成

很多人在设计App时纠结于使用Toast还是Alert(Android的版本为Dialog),这些其实是很小的事,很多人都不太在意,但是从优化用户体验的角度还是值得一探究竟的,本文旨在让大家对其有一个全面的了解,更深刻的理解其使用方法。

什么是Toast?

Toast,实在屏幕底部或中部显示1到3秒的提示信息,如下

它的信息传递是单向的,不会中断用户的操作,可以保证用户操作的流畅性,但有可能用户没有看清里面的内容,错过重要信息,或者不知道刚才发生了什么。

什么是Alert?

iOS叫Alert, Android叫Dialog,它会弹出一个对话框,同时遮住当前页面,用户必须点击对话框中的按钮,完成相应的动作才能回到原来的页面继续操作。

可见Alert会降低用户使用的流畅度,那么是不是我们不要用Alert了呢?显然不是,Alert在提示一些重要信息,让用户选择执行某一个动作时,还是很有用的

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在`my-toast.vue`,可以通过props接收外部传入的文本描述和规则,如下所示: ```vue <template> <u-toast v-model="visible" :position="position" :type="type">{{ message }}</u-toast> </template> <script> export default { props: { message: { type: String, default: '' }, position: { type: String, default: 'middle' }, type: { type: String, default: 'text' } }, data() { return { visible: false } }, watch: { message() { if (this.message) { this.show() } } }, methods: { show() { this.visible = true setTimeout(() => { this.visible = false }, 2000) } } } </script> ``` 在上述代码,我们通过props接收文本描述`message`、位置`position`和类型`type`三个参数,并在模板使用uview的toast组件来展示toast。在`show`方法,我们通过设置`visible`属性来控制toast的显示和隐藏,并通过`setTimeout`函数来控制toast的显示时长。 使用该组件时,我们只需要在需要使用的页面引入该组件,并传入相应的参数即可,如下所示: ```vue <template> <div> <button @click="showToast">展示toast</button> <my-toast :message="message" :position="position" :type="type"></my-toast> </div> </template> <script> import MyToast from '@/components/my-toast' export default { components: { MyToast }, data() { return { message: 'Hello, world!', position: 'middle', type: 'text' } }, methods: { showToast() { this.$refs.myToast.show() } } } </script> ``` 在上述代码,我们通过`import`语句引入了`my-toast`组件,然后在模板使用该组件,并通过`:message`、`:position`和`:type`属性传入相应的参数。在`showToast`方法,我们通过`$refs`引用了该组件,并调用了`show`方法来展示toast
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值