<tr id="2okqm"></tr>
<sup id="2okqm"><small id="2okqm"></small></sup>
<rt id="2okqm"><optgroup id="2okqm"></optgroup></rt><tr id="2okqm"><optgroup id="2okqm"></optgroup></tr><rt id="2okqm"><center id="2okqm"></center></rt>

移动产品经理必须知道的手机弹框

96
银海系
4.3 2018.12.21 17:49 字数 2194

前言:在日常工作中,有很多看似平凡的小细节,常被大家忽视,却影响着用户的真实体验。 今天我们就来聊聊容易被设计者也容易被用户忽略的小细节——非模态弹框。

目录:

1.什么是非模态弹框

在解释什么是非模态弹框之前,先解释一下什么是弹框。弹框是产品与用户互动过程中,产品回应用户的窗户。它的模样可谓是千变万化,但万变不离其宗。在交互形式上它分为两?#20013;?#24335;,模态弹窗和非模态弹窗。

模态弹框是指在向用户传递信息的同时,还需要用户操作的弹框。而非模态弹框一般被设计来向用户传递信息的,不需要用户操作或者操不操作都不影响其他流程。它是一种轻量级的反馈机制。有hud/toast/snackbar/Noticebar四类? 。

2.分类以及应用场景

下面我们来具体聊聊这四类非模态弹框以及它们的应用场景

1.hud(透明指示层)是iOS系统的一种提示(调节音量时出现的那个提示就是hud),是iOS系统私有的,第三方APP无法直接使用,因此出现了各种模仿它的第三方控件,例如MBProgressHUD、SVProgressHUD,从此以后HUD就成了IOS开发者里达成共识的半官?#25509;?#35328;。

2.toast原?#26223;?#21331;系统的控件。优先用于系?#31243;?#31034;且有很多规范(比如只能出现在底部,不能带图标)。不过现在iOS中也在使用,并且形式多样化?

3.snackbar也?#21069;?#21331;系统的控件。它可以被理解为是加强版的toast。样式与规则与toast非常像,但也有不同点,snackbar支?#31181;?#21160;关闭?

4.Noticebar通常位于导航栏下方,一般用作系?#31243;?#37266;、活动提醒等通知。重要级别低于Modal高于 Toast。支付宝蚂蚁会员以及今日头条中消息通知都是Noticebar。

3.设计原则

1.在需要用户?#21364;?#30340;场景下,提供小动效,如菊花。为什么呢?一方面是为了缓解用户?#21364;?#30340;焦躁感,另一方是为了跟用户产生互动,让用户知道已经在加载,而不是被卡住了。

2..文案简洁明了。意思简单明确就好,不要为了标新立异,去用一些非主流的词,一旦让用户去想这是什么意思,就是失败。本来出现的时间就短,一旦用户短暂卡住,可能就看不完全部内容,从而不知道整体的意思。

4.优缺点

虽然说交互形式本身没有好坏,主要看是否适合自己的产品需求。但是交互形式也是有优缺点的,只有在清楚这些优缺点的情况下,才能更好的做出选择,让形式更好的服务内容。

非模态弹框的优点:

对页面的遮挡比较少,不会对用户当前的操作产生很大的干扰;

相对独立,完全不影响页面布局;

给用户的操作做出反馈,缓解用户的焦虑?#23567;?/p>

非模态弹框的缺点:

占据位置小,容易让用户忽略;

虽然是非模态的,但也会打断用户心流;

出现时间短,且用户又不能对非模态弹框进行控制,容易让用户产生失控感;

注意事项

凡事要适可而止,非模态弹框虽然是弱提示,但也要适可而止,不要不停的弹。在这里就不得不提某金融APP,可能是为了刻意表现用户量,不停的弹弹框,谁谁谁成功借了多少钱,过度会造成用户的反?#23567;?/p>

5.特殊案例以及商业变现

特殊案例

1.也有一些特殊情况,它们属于非模态弹框的变体?#21482;?#32773;说是非模态弹框的妙用。

例如爱奇艺中想要引导用户对正在追的剧进行收藏,会在用户打开爱奇艺时,出现一个浮层动效,提示用户“长按试试”。当然用户按不按都不会对其他流程产生影响。这种的其实也属于非模态弹框。?

2.还有有一种特殊案例,非常常见,但很多时候,我们却不知道该把它归到哪类交互组件中——消息提示的小红点。网易云音乐中,个人中心的消息提示,就是通过小红点提示的。

商业变现

设计不仅要让用户感觉好,还要让公司有利可图。这就要求设计者从公?#33738;?#30053;角度去思考问题,在满足公司需求的基础上,让用户觉得易用、好用。“不动声色”就能实现商业变现,是最好不过的了。

网易考拉中,在购物车环节,利用非模态弹框,推广产品的会员。美图秀秀属于工具类产品,本身不具盈利属性,那么如何利用自身流量去盈利,非模态弹框就是一种很好的形式。在选择?#35745;?#30340;界面下方,利用非模态弹框打广告。既实现流量变现的目的,又不会打断用户的操作流程,造成用户的反?#23567;?

6.非模态弹框的替代形式

非模态弹框属于轻量型反馈,不会打断用户当前的操作流程,但也会对用户造成干扰,而且容易被用户忽略,所以有的情况下,我们可以用更优的替代方案。

1.多态按钮

此外多态按钮的使用也可以帮助我们解放弹框的压力。例如,支付宝的支付界面,立即支付按钮可以跳转到付款成功的状态,这时候就没有必要再用弹框给用户提示了。

2.当前页面展开叠起

有的时候,我们也可以用展开叠起的方式代替弹框。例如百度地图在展示具体线路图时,

就是通过展开叠起,这样也不会打断用户操作流程。?

3.页面内提示

这种提示可以常驻在页面里,即使用户短时间内注意力转移,提示也不会消失,确保用户能一直完整的看到。此外页面内提示能容纳更多信息量,与页面本身风格比较契合,没有阻塞感,适合表单错误提示、加载过渡。如小度音箱中填写表单有误,直接在内容下方提示;掌上生活中在填写表单的过程中,没有收到验证码,直接在时间计算器?#21592;?#25552;示。?

4.动效

有操作就要有反馈,非模态弹框虽然已经是轻量反馈机制,不会打断用户的操作流程,但是它毕竟也是属于弹框。弹框弹多了,会让用户产生厌倦?#23567;?#26377;时候我们也可以用微动效代替弹框。

例如大佬说中,关注用户,通过按钮动效来表示关注成功;京东到家中通过落体动效,模拟真实加购物车效果。

5.震动和声音

震动和声音也是一种操作反馈。例如微信的摇一摇,在用户摇的过程中,通过震动和声音的反馈,给用户营造一种物理的真实?#23567;?/p>

总结

在强调用户体验的今天,一点细微的交互变动,都能带给用户不一样的体验,甚至关系到用户的去留。这就要求我们设计者不断累积,尽善尽美,以一颗匠心打磨自己的产品。

产品成长记
Web note ad 1
澳门番摊游戏
<tr id="2okqm"></tr>
<sup id="2okqm"><small id="2okqm"></small></sup>
<rt id="2okqm"><optgroup id="2okqm"></optgroup></rt><tr id="2okqm"><optgroup id="2okqm"></optgroup></tr><rt id="2okqm"><center id="2okqm"></center></rt>
<tr id="2okqm"></tr>
<sup id="2okqm"><small id="2okqm"></small></sup>
<rt id="2okqm"><optgroup id="2okqm"></optgroup></rt><tr id="2okqm"><optgroup id="2okqm"></optgroup></tr><rt id="2okqm"><center id="2okqm"></center></rt>
曾道人送码内幕 打篮球的好处 山东快乐扑克3走势图360 齐齐哈尔冰球直播 吉林快三下期和值推荐 吉林时时彩开奖 江苏快3开奖 香港特码 云南时时彩十一选五开奖结果 网易彩票3d走势图 彩票顶呱刮app下载 ok澳客网 多乐彩票是真的吗 湖北快三4~13期开奖号 竞彩篮球大小分玩法