美文网首页产品拆解
交互—跳转和弹窗

交互—跳转和弹窗

作者: 泊秦淮杜牧 | 来源:发表于2016-06-01 21:16 被阅读1126次

继续交互练习,重在思考,深入的思考,我的思考深度还远远不够。以下内容主要讨论移动端。

这个问题在知乎有个不错的回答,把跳转比作出入境填表

换一种方式,如果她每次只给你一张表,你填写完,她校对一遍。错误马上改正;正确马上通过,并且后续不需再填类似的信息。一张一张表到全部通过为止。这个体验给你的感受是否更流畅一些?
适合单任务场景或进程型页面。

把弹窗比作保安检查

相反,假设保安只是微笑着拿着登记本和笔,耽搁你10秒钟填个信息,他就静悄悄地滚了。你又可以很快到你同学家。你会不会觉得这个保安稍微体贴一点?
弹窗更适合临时性、补充性或突发性的情况展示。

这位知乎的朋友说的很好,在任务流程中,如果有先后逻辑关系的,使用跳转。如果为临时性的通知或者警告,使用弹窗。
这是比较理想的情况,现实中的问题要更复杂一些。

1、在填色应用中,用户完成一张画,可以选择保存退出也可以添加效果,添加效果这个步骤选择跳转还是弹窗?分享呢?

2、外卖点餐应用里,完成交易后,系统提示分享好友可获得奖励。分享界面使用弹窗还是跳转?

3、商城应用,完成交易,系统引导去评价,使用弹窗还是跳转?

4、购物车不像是填表,和当前商品没有密切的逻辑关系,但是移动端的应用都是用了跳转的方式?

5、查看商品评价也和交易没有必然的逻辑关系,但是他依然使用了跳转的方式,而选择尺码却使用了弹窗的方式?

等等,相关的例子有很多很多,不同的模式,不同的场景,不同的业务,实际情况很多是介于两者之间的,或者根本无视交互原理的

所以,我们只有在这样的情况会遇到以上问题,在相关任务的界面设计时,在一个大类中,如何进入一个支线任务,或者相关的特殊任务。

跳转可能导致
  1. 返回原页面的成本增加
  2. 记忆的成本增加
  3. 点击跳转按钮的成本增加
  4. 新内容识别的成本减少
  5. 未完成任务的负担减少
弹窗可能导致
  1. 打断任务的风险增加
  2. 记忆的成本减少
  3. 注意力的负担增加
移动端和PC截然不同

淘宝的商品详情页面,点击购物车时,PC端只是一个侧边弹窗,而移动端则跳转;查看评价,PC端甚至没有跳转和弹窗,只是用了标签,而移动端则需要跳转。虽然交互原理处处通用,但是交互的具体实现依赖于所处的硬件平台。
在更大的屏幕下,PC有足够的空间容纳更多的组件,随着技术的成熟和浏览器的升级,越来越多的交互式组件出现,比如可切换的标签栏、可伸缩的折叠式菜单、鼠标悬停的悬浮窗口。可见,PC有足够多的方法来容纳支线任务的进行,而移动端则被迫使用跳转和弹窗来消化内容“溢出”。
也因此,PC的交互流程逻辑更加合理一些,移动端需要考虑的因素更多一些。

回到原来的问题

以下问题只针对移动端

Q:在填色应用中,用户完成一张画,可以选择保存退出也可以添加效果,添加效果这个步骤使用跳转还是弹窗?分享呢?
A:两种做法都有应用使用。首先排除在原图上显示,因为原图是需要保留的,用户可以在原图的基础上添加各种效果。重点在于:把添加效果看成是附加操作还是任务最后的一环。从功能来说,添加效果确实是极为重要的一步,不应该作为附属步骤。不过,严格来说,填色完成,画作即完成,效果实际上是滤镜的作用,滤镜对画作本身只起到“润色”效果,不会改变画作本身。另外,画作可以保存,任何时候都可以使用滤镜上色,时效性很灵活。综合两点,应该使用弹窗。分享同理。

Artboard 3.png

Q:外卖点餐应用里,完成交易后,系统提示分享好友可获得奖励。分享界面使用弹窗还是跳转?
A:和填色一样,同样是最后一步,并非必要步骤,理应使用弹窗。不同的是,分享给好友主要是为了推广APP,属于运营的手段,并非用户喜爱的功能,点击率不会乐观。加上完成交易后,大部分用户立即关闭应用,应主动把握最后的机会。结合这两点,应大胆使用主动弹窗,参考美团外卖。

Q:商城应用,完成交易,系统引导去评价,使用弹窗还是跳转?
A:评论是在完成以后的事情,用户可以不评价,评价属于一个附加内容,理应使用弹窗。但是从评价的内容考虑(淘宝),包括评论文字、上传照片、好中差评、3个打分星级、匿名评价等繁多的选项。可见,淘宝是比较看中评价这块的。一个弹窗难以承载这么多的控件,因此选择跳转。

Artboard 2.png

Q:购物车不像是填表,和当前商品没有密切的逻辑关系,但是移动端的应用都是用了跳转的方式?
A:和评分一样,购物车需要承载的内容很多,在移动端使用跳转更加合理。如果使用弹窗,界面变得混乱复杂,失去弹窗的意义。(反而增加负担)

Q:查看商品评价也和交易没有必然的逻辑关系,但是他依然使用了跳转的方式,而选择尺码却使用了弹窗的方式?(淘宝移动端)
A:即使不考虑复杂的控件,评论内容属于文字和图片混排界面,使用弹窗会变得难以阅读,应该使用跳转。有一个案例,在iPhone系统更新提示的弹窗有大段的条款,一般来说很少人会认真看那个大段的文字。
选择尺码主要根据购物心理来理解,买衣服的时候,尺码和颜色也是考量的因素,在反复确认有适合的尺码后,才下单购买,符合一般的购物心理。

相关文章

网友评论

  • e185affb13ed:某些设计不能因为应用到某个APP上就是合理的,各个设计师考虑问题和角度和维度都不太一样,所以就有可能结果是一致,但原由则有可能会偏差

本文标题:交互—跳转和弹窗

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