美文网首页
「kuma日常疑惑」:如何用好弹窗?

「kuma日常疑惑」:如何用好弹窗?

作者: Dan_Hsiung | 来源:发表于2020-05-04 19:37 被阅读0次

前置问题

问题一: 警示类弹窗 究竟该采用哪种好?
问题二: Toast的位置在界面顶部.居中、底部都支持,三者哪个好?对用户的感知会产生怎样的影响?

了解常用控件

Alert 、Action Sheets 、 Toast 、 SnackBar


image.png

Alert :对话框是一种模态弹窗.当用户将进行一些危险或者不可逆操作时,系统将会以Alert话框的形式提醒用户是否还继续操作,起到警示的作用,其阻断感强,操作不可忽略

ActionSheets:控制面板是Alert的一种延伸,也是模态弹窗。用户必须进行操作,弹窗才会消失。和Alert的区别是ActionSheets拥有更多的功能按钮,其重点在操作。

Toast:是一种非模态弹窗,它可以出现在页面的任何位置,显示几秒然后自动消失,其阻断感弱,一般用来显示操作结果.或者表 单未填写提示。

SnackBar : 是Google Material Design 中提供的一种兼容提示与操作的消息控件。其和Toast类似,在不操作的情况下几秒后自动消失,同时向下滑动也可忽略消息。

界面位置的强弱

界面通常我们是分为
1. 上部(导航栏及向下一屏1/4位置): 强度中等,重要性略高于底部。 用户感知度一般
2. 中部 :用户的视觉焦点, 强度高、重要性高。用户感知度高。
3. 下部(导航栏及向上一屏1/4位置):强度底,重要性最低。 用户感知度低。

因此, 通常建议 将重要的弹窗信息放在中部,把通知以及不太重要的操作放在上部或下部。
另外: 考虑当前手机屏幕尺寸越来越大, 为了便于操作,建议操作是采用ActionSheets 底部弹窗形式。

问题判断

问题一: 警示类弹窗 究竟该采用哪种好? ( Alert or Action Sheets ? )
思考出发点: Alert 一般仅支持 2个按钮, Action Sheets 理论上可以包含更多的按钮,同时占用空间小。
那么当都是警示类弹窗,且只有2个按钮时,该如何判断呢? 可通过弹窗对于用户的阻断强弱来判断

问题二: Toast的位置在界面顶部.居中、底部都支持,三者哪个好?对用户的感知会产生怎样的影响?
思考点:
1. toast的弹窗位置 常规来看: Android系统的一般在界面底部,iOS系统在界面的中部
2. 依旧需要根据该弹窗出现对于用户的阻断感的强弱来区分。

淘宝为例
a. 微淘刷新获取到新的资讯/内容时, 上部 橙色(主题色)弹窗提示 “微微一笑,淘到xx条好看的” :为了提示用户查看新的内容,提升内容阅读率。
阻断感低,但橙色弹窗配合顶部分类,可以再次加深用户对于所查看分类的感知
b. 购物车中选中商品时,中部弹窗提示“正在加载” 。若无网络连接时,中部弹窗提示“网络竟然崩溃了” : 实时调取最新商品库存信息。若无货时,进入下一步提示流程。
阻断感高,不刷新获取到最新库存时,无法锁定库存进入订单确定页面。
c. 商品详情中,点击领取优惠券,领取成功/失败后, 下部弹窗提示 “ 恭喜,抢到了”、“很遗憾,没抢到~”。
阻断感低,这是因为用户领取优惠券仅是一种促销手段,在整体的促进商品交易达成的过程中,更多地是作为锦上添花的手段

「啰啰嗦嗦的kuma疑惑」:越说越多了反而复杂了。 总得来说,弹窗不是随意选择的, 其选择机制是服务于产品业务的。

相关文章

  • 「kuma日常疑惑」:如何用好弹窗?

    前置问题 问题一: 警示类弹窗 究竟该采用哪种好?问题二: Toast的位置在界面顶部.居中、底部都支持,三者哪个...

  • KUMA熊的日常

  • 系统性教你:产品的信息引导该如何设计?

    不知大家有没有和我一样的疑惑:日常产品的信息引导到底该如何设计?可能有人第一时间会想到浮层、动效、弹窗等等,但这些...

  • 日常疑惑

    谈到年轻人,早早出来打工,要不要上交工资给家人的问题呢? 反正我是没有,家里人也不会要求这样,只会怕我没钱用呢! ...

  • 日常疑惑

    内卷这个词到底是从什么时候开始的呢?从一开始的社会领域,蔓延到几乎生活的方方面面都能用上这个词,连同“躺平”,“丧...

  • 2017-11-13

    可爱的马克笔画 来自可爱的kuma哭瑪 Kuma来自香港 喜欢游戏,偶像BTS 主要画自创角色和友人角色 有时也会...

  • WebGL(日常疑惑)

    物体绕世界坐标系旋转(three.js) 物体绕世界坐标系旋转

  • APP产品的信息引导该如何设计?

    1.日常产品的信息引导到底该如何设计 不知大家有没有和我一样的疑惑:日常产品的信息引导到底该如何设计?可能有人第一...

  • 反馈机制

    最近在用手机时,对很多提示,弹窗产生了疑惑。我们每次进入应用时,出现的广告弹窗是反馈吗?还有那些会自动弹出的Tos...

  • 如何用好手机

    如何用好手机

网友评论

      本文标题:「kuma日常疑惑」:如何用好弹窗?

      本文链接:https://www.haomeiwen.com/subject/fwuyghtx.html