赞助商
立即赞助

实用总结!「返回」功能应该怎么设计?

交互设计3年前 (2021)发布 流光
2.5K 0 0

王M争:前几天在 b 站上看郭德纲相声,在下看到个荐视频了进去,看完后「返回」想继续看前相声,结发现接回到了搜索结页,把刚才那层跳过去了。

实用总结!「返回」功能应该怎么设计?

我自己也是 b 站用户了,怎么会遇到这个情况?我拿小米和三手看了下,发现返回是相声页。难是版本原?我又把两个手 b 站都升级到最新版本,发现小米和三都是层层返回,而 iPhone 则是接回到搜索结。这到底是怎么回事,我现在也没搞懂。我也索性写篇文章来专聊聊返回功能。

一、需求分类

任何个功能提出都是基于用户需求。那么为什么用户需要「返回」呢?简单来说,返回可以用户提供了个离开前页路径,回到上个页。而「上个页」可能是上层级,例如从三级页回到级页,这个属于层级返回;也有可能是层级,例如买理财项目到输入短信验证码时候突然想更改买额,可以击返回,这属于任务流返回。

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

二、交互设计

分类好了,我们再来了解一最见的返样式。在界面左上角箭头 icon 是我们最见的返样式,这么没人敢说你对。我们还可在旁边上字,户知道返的路径。

实用总结!「返回」功能应该怎么设计?

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

实用总结!「返回」功能应该怎么设计?

就上面这个财产购流程为例,这是一个任务流。假定户需要5步才成购财产的操作,如果户在第4步的时候点击了返,有两个可:

  • 用户想更改买额或者新确认利率,期等品信息;
  • 户想了。

如是第,用户步步返回会很累。所以用户处于个任务流,旦用户击了返回,我们可以考虑用户提供关闭功能,让用户可以快速地离开。然也不止是任务流,如用户处于层级过深情况下,我们也可以用户提供关闭功能。

实用总结!「返回」功能应该怎么设计?

关闭功能在不阶段有不叫法,在任务流终,我们称为「成功」。

实用总结!「返回」功能应该怎么设计?

设计师需要考虑不使用场景,例如网络状况不佳时候,新页迟迟加载不了。我们应该用户提供个关闭功能,要不然像图上这,用户能选择退出品了。然这个案例是开发锅,返回功能应该是提前渲染好,像微信这样。所以个品要做好,设计师必须关注开发原度。

实用总结!「返回」功能应该怎么设计?

三、滑动手势

不管是返回,关闭还是完成,用户想离开当前的状态(页面或者弹框),必须要点击 icon 或者文字。样不太单,我们以尝试引其他的手势。

实用总结!「返回」功能应该怎么设计?

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

实用总结!「返回」功能应该怎么设计?

种新的尝试我非常的认,因为它不仅富返回的现场,还开拓新的度。用户对操流程「前」的认还停留在「左右」个阶段,例在 iPhone 中,用户以通右滑返回到上一个页面。突现上下滑动也能完成返回的功能。样以给我们在接下来的互设计中提供一新的思路。

而从易用性度来说,滑动比击更受到用户喜爱。为击区域很小,特是放在界左上,单手操作和大屏手用户拇指很难接触及到,需要更改手握持姿势或者改为双手操作。可能会有说,安卓有物理返回键,用户也很容易操作,简完美。

实用总结!「返回」功能应该怎么设计?

于这个问题,我觉这体现了安卓和 iOS 两不思路。我们都知 iPhone 大革命性突破是抛弃了物理键盘,引入虚拟按键,增加了屏幕积。而去年发布 iPhone X 则接把 HOME 键也去掉了,个底部空也解放了出来。这让我想起了08年上高时候,父母我买了第部手,时如想放大照片必须+号,现在照片放大缩小都完全依靠手势了。所以我在想会不会有天手势完全取代了按钮。

当然任何创本质都是打破原有的规则,挑战户的固有认知,增户的习成本。上面的米音乐为例,即使引入了手势,还是保留了返按钮,给户一个过渡的时期。

势的引入可以节界面的空间,但是通过其的方法也能达这个目的。下图就是一个好的例。

实用总结!「返回」功能应该怎么设计?

上面提了安卓和 iPhone 的差异性,所以在计过程要充考虑不同的操作系统和机型。可以给大家再举一个例。

实用总结!「返回」功能应该怎么设计?

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

实用总结!「返回」功能应该怎么设计?

总结

上就是我对返功的一些思考跟分析,希望可帮助到大,留言交流。

欢迎关注作者的公众号:「M争」

实用总结!「返回」功能应该怎么设计?

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

一. 前言 近两年随着UED团队的探索,沉淀出了业务协同、设计增值、设计驱动三个层次的价值模型,深入剖析了设计师价值实现的...
全链路设计
现代人对于健康越来越重视,而移动端APP 在这方面为用户提供了多种多样的帮助。无论是系统化的健身应用,还是卡路里计算器,...
App设计
QQ 小程序游戏中心主打丰富多样化的小游戏,作为设计师如何通过视觉表现构建一个更好玩的平台,向用户传达「好玩」的感受。 ...
QQ
B 端工作看起来总是没有 C 端工作那么有趣,面临的限制比较多,面对客户(金主爸爸),很多时候总是左右为难。在实际工作中,...
B端设计
今天的选题依旧是电商领域,目标是标签栏雄霸一方的购物车。它在整个消费路径中起到关键作用,距离收银台仅一步之遥,也是推...
交互设计
本文聚焦 Airbnb 产品,描述10大可用性原则的应用场景,希望能够帮助你更系统地理解10大可用性原则。 一、系统状态的可见性 V...
Airbnb
PART 1 前言 今日头条作为资讯阅读类产品,Feed流场景是资讯类产品的核心场景之一,关于Feed流的改版尝试一直在进行,针对本...
产品设计
当我们在头脑风暴阶段,确定了要删除哪些不必要的功能或者信息之后,具体界面的设计,自然就成为了接下来的工作重心。此时想...
产品设计