“返回”功能应该怎么设计?

  • 经验类型经验/观点
  • 经验属性原创文章
  • 经验版权署名-非商业性使用
11106 18 361 2018-04-23

前几天在 b 站上看郭德纲的相声,在下面看到一个推荐视频就点了进去,看完之后点「返回」想继续看之前的相声,结果发现直接回到了搜索结果页面,把刚才那层给跳过去了。

Image title


我自己也是 b 站老用户了,怎么会遇到这个情况?我就拿小米和三星手机看了一下,发现返回的是相声页。难道是版本的原因?我又把两个手机中的 b 站都升级到最新版本,发现小米和三星都是一层一层的返回,而 iPhone 则是直接回到搜索结果。这到底是怎么回事,我现在也没搞懂。我也索性写篇文章来专门聊一聊返回功能。


一、需求分类


任何一个功能的提出都是基于用户的需求。那么为什么用户需要「返回」呢?简单来说,返回可以给用户提供了一个离开当前页面的路径,回到上一个页面。而「上一个页面」可能是上一层级,例如从三级页面回到二级页面,这个属于层级返回;也有可能是同一层级,例如购买理财项目到输入短信验证码的时候突然想更改购买金额,可以点击返回,这属于任务流返回。


当然了,这种分类方式不一定准确,因为有的时候它既属于层级返回,也属于任务流返回。


二、交互设计


分类好了,我们再来了解一下最常见的返回样式。在界面左上角加箭头 icon 是我们最常见的返回样式,这么用没人敢说你不对。我们还可以在旁边加上文字,让用户知道返回的路径。

Image title


这种返回的样式,基本可以应付大部分的用户需求。但是有些特殊情况,我们还是要仔细斟酌的。

Image title


就以上面这个理财产品购买流程为例,这是一个任务流。假定用户需要5步才能完成购买理财产品的操作,如果用户在第4步的时候点击了返回,有两个可能:

用户想更改购买金额或者重新确认利率,周期等产品信息; 用户不想买了。

Image title

如果是第二种,用户一步步的返回就会很累。所以当用户处于一个任务流中,一旦用户点击了返回,我们可以考虑给用户提供关闭的功能,让用户可以快速地离开。当然也不止是任务流,如果用户处于层级过深的情况下,我们也可以给用户提供关闭功能。

Image title


关闭功能在不同的阶段有不同的叫法,在任务流的终点,我们称之为「成功」。

Image title

设计师需要考虑不同的使用场景,例如当网络状况不佳的时候,新页面迟迟加载不了。我们应该给用户提供一个关闭功能,要不然像图上的这种,用户只能选择退出产品了。当然这个案例是开发的锅,返回功能应该是提前渲染好的,就像微信这样。所以一个产品要做好,设计师必须关注开发的还原度。

Image title



三、滑动手势


不管是返回,关闭还是完成,用户想离开当前的状态(页面或者弹框),都必须要点击 icon 或者文字。这样会不会太单调了,我们可以尝试引入其他的手势。

Image title


以网易云音乐为例,如果用户想查看歌曲评论,需要点击「评论」icon,进入评论列表,然后再点击「返回」回到播放界面。但是在虾米音乐,歌曲评论的打开和收起只需用户上下滑动就能完成。当然设计师们怕步子太大,用户一下子接受不了,还是展示了 icon,用户通过点击 icon 也能返回。


这种新的尝试我非常的认可,因为它不仅丰富了返回的实现场景,还开拓了新的维度。用户对于操作流程「前后」的认知还停留在「左右」这个阶段,例如在 iPhone 中,用户可以通过右滑返回到上一个页面。突然发现上下滑动也能完成返回的功能。这样可以给我们在接下来的交互设计中提供一些新的思路。

Image title


而且从易用性的角度来说,滑动比点击更受到用户的喜爱。因为点击的区域很小,特别是放在界面左上角,单手操作和大屏手机的用户拇指很难直接触及到,需要更改手机握持姿势或者改为双手操作。可能会有人说,安卓有物理的返回键,用户也很容易操作,简直完美。

Image title


对于这个问题,我觉得这体现了安卓和 iOS 的两种不同的思路。我们都知道 iPhone 的一大革命性突破就是抛弃了物理键盘,引入虚拟按键,增加了屏幕面积。而去年发布的 iPhone X 则直接把 HOME 键也给去掉了,整个底部的空间也解放了出来。这让我想起了08年上高中的时候,父母给我买了第一部手机,当时如果想放大照片必须点+号,现在照片的放大缩小都完全依靠手势了。所以我在想会不会有一天手势完全取代了按钮。


当然任何创新本质都是打破原有的规则,挑战用户的固有认知,增加用户的学习成本。以上面的虾米音乐为例,即使引入了手势,还是保留了返回按钮,给用户一个过渡的时期。


手势的引入可以节省界面的空间,但是我们通过其他的方法也能达到这个目的。下图就是一个很好的例子。

Image title


上面提到了安卓和 iPhone 的差异性,所以我们在设计过程要充分考虑不同的操作系统和机型。我可以给大家再举一个例子。

Image title

在 iPhone 中,手势密码登录失败的时候,会跳出一个弹框,弹框的文字会抖动一下,告诉用户登录失败。但是一些安卓机不支持这个抖动效果,这个会造成用户无法获知第二次、第三次、第四次失败,因为弹框没有发生任何变化。直到最后失败次数超过限制,被锁定。

Image title



总结


以上就是我对返回功能的一些思考跟分析,希望可以帮助到大家,也欢迎留言交流。

全部评论:18

  • 陈默先生

    2018-05-10 11:22

    @王M争: 共同学习啦。

  • Munning

    2018-05-07 10:51

    这个应该是IPhone的锅,安卓点击屏幕内返回键,都是直接返回的最高一级,一般是点击连接的那个位置,进去你无论点了多少页,依然返回。但是点击实体按键,就是逐页返回,一般都是这样,IPhone为了避免麻烦,点击返回是直接返回最高一级,而从左向右滑动屏幕,大多数APP是逐页返回,用这个代替实体返回键。

  • 王M争

    2018-05-05 19:21

    @陈默先生: 非常感谢科普

  • 陈默先生

    2018-05-05 15:26

    我来回答一下B站返回的问题,由于iPhone没有物理按键,一般是通过箭头或者左滑返回的方式进行返回上一层的操作,这里是“上一层”,而不是上一步。 因为现在应用大多是使用的混合开发,很多的是一个mode层加载web网页,而网页间的跳转是不用添加mode层的。 而安卓的物理按键是可以实现返回上一步的。 这就是原因啦。

  • Reya

    2018-05-02 13:31

    iOS和安卓两端开发写法没有一致。

  • wttzzz

    2018-04-30 13:45

    @叫我夏蜀黍: 买个贴膜,iphone就可以点击下面返回啦

  • Ziki47

    2018-04-28 13:56

    实用贴。之前就思考过为什么返回和关闭按钮会同时存在,博主帮我解答了这个问题,学习啦,感谢!

  • 叫我夏蜀黍

    2018-04-27 18:25

    滑动返回那个不能再同意了,现在大屏手机,想要按到左上角的返回实在难受。

  • zunoe

    2018-04-27 09:19

    没有魅族的mback?

  • sennear

    2018-04-26 10:17

    @domomao: 受教了

  • 王M争

    2018-04-26 10:17

    @米米果果: 对的,人人都是产品经理就这样

  • domomao

    2018-04-26 10:08

    @sennear: 三星锁屏的指纹解锁也有失败抖动的效果 但是在其他操作就没有类似的提醒效果

  • 米米果果

    2018-04-26 09:47

    针对左上角返回点触不便的问题,还有一些应用通过与底部工具栏相结合来实现返回

  • 米米果果

    2018-04-26 09:20

    赞~认认真真从头看到尾

  • UEhan

    2018-04-25 20:26

    赞~!楼主的总结还是很有用的~~!

  • 王M争

    2018-04-25 15:52

    @sennear: 可以做的

  • sennear

    2018-04-25 15:12

    安卓机是不是也能做 失败抖动效果?

  • 龐偉PWDS

    2018-04-24 16:51

  • 织田稻雨

    2018-04-24 16:35

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票