最美UI

下拉操作延伸的一些思考

目前来看,下拉触发的操作一般有这么四类:刷新、切换内容、返回、其他操作。

下拉刷新

下拉刷新也许是最常见的下拉操作了,这个操作在2012年由 Twitter 创始人 Loren Brichter 发明,有理论认为,下拉刷新是一种适用于按照从新到旧的时间顺序排列 feeds 的应用,在这种应用场景中看完旧的内容时,用户会很自然地下拉查找更新的内容,因此下拉刷新就显得非常合理。

 

 

切换内容

在内容详情的页面中,切换内容在用户的认知里也是容易被理解的,比如知乎日报的下滑进入上一篇,就像上滑加载下一篇一样被埋在用户的潜意识里,拼接的在一块的卷轴,在 scrool 时也更容易使用户沉浸其中。类似的还有艺术云图、muse、抖音、龙珠TV 和映客直播等。

返回

在移动设备上,尤其是苹果设备上,由于没有实体返回键,而 Home 键由于其集成多而强大的功能无法兼顾返回到上一页面这一功能需求,iOS 的返回或者关闭操作就只能在屏幕上来进行操作,最常见的是在左上角的返回按钮以及右上角的关闭按钮,但是随着屏幕逐渐变大,需要点选的返回操作好像就变得困难了起来,于是五花八门的返回策略也不断出现。

最为人们熟知的就是苹果推出的右滑返回了,到现在右滑返回似乎成了一种习惯,就连自带“返回”键的安卓也加入了右滑返回的逻辑,当然这不是一个完美的解决方案,一个原因是右滑操作很多时候会被占用,比如查看图片时左右滑切换图片,列表页的右滑操作(呼出删除等功能)以及大量带有十字交互的 APP 的右滑占用,另一个原因是右滑返回的逻辑是返回上一级,对于习惯了在浏览器中右滑返回上一页的用户来讲,在自带浏览器的 APP 里打开 WAP 页面以后(比如微信里点开的 H5 页面)往往右滑就直接把 WAP 页面退出了,想返回上一页还是要靠原始的点击左上角来实现。

也有其他的 APP 如 mono 和平行世界,在内容页里就把返回放到了左下角,映客直播在直播页面则把关闭放到了右下角,但因为整体的逻辑还是左上角返回,所以内容页面把返回放到下面,虽然操作方便了,但更不容易感知了(也许是故意不想让用户走吧)。

 

 

万豪在这方面做的很好,将很多操作用一个悬浮btn来承载,在次级页面里 btn 就变成了返回,用户的感知明确,操作也相对便捷,只是所有页面常驻一个悬浮的 btn 有时候会造成视觉干扰,而且也有点抢占屏幕空间,但依然不妨碍这是一个很好的解决方案。

 

 

当然也有做的不是那么好的,比如新浪体育的上拉返回,虽然看完了内容的下一步操作很可能是返回,但上滑加载更多的交互已经深入人心,如果页面到底了,很多人都会不自觉的向上滑来看看还有没有更多内容,所以上滑真的不适合作为返回的手势,知乎日报也早就取消了上滑返回的逻辑。

说说下滑返回或者关闭。其实下滑返回的逻辑对我们早就不陌生了,早在 iOS 7 的系统相册中如果点开大图的话,下滑就是关闭大图。目前市场上的APP的下滑关闭的场景大概分为这么三类,第一类是右滑和单击均有其他操作,比如 iOS 的系统相册、Zara 的详情页、花瓣、Pin_terest、即刻、Twitter 等,我们习惯了点击查看大图,再点击关闭,但有的 APP 在二次点击之后会触发其他功能(例如隐藏/显示操作区),而且对于查看图片之类的操作来讲,左右滑切换图片肯定比右滑返回的优先级高,所以需要一个新的方式(除点击左上角以外)来关闭或者返回,这时候下滑就是一个不错的选择;第二类是卡片承载内容的情况(需要相应的动效来配合),卡片式的设计除了能作为区分信息层级的另一种手段以外,还能减少跳转页面时候用户的心理负担,展开的卡片会给用户“我还没跳到其他页面去”的错觉,所以“向上展开”的卡片,“向下关闭”就显得尤其自然,这么做的 APP 有 脸_书、You_Tube、苹果自己的 App Store、饿了么、平行世界和松果生活等等;还有一类我管他叫未完成的第一类,比如微信、UC浏览器和知乎的查看大图,点开大图以后都有可以二次点击的操作,但他们还都保留了点击关闭的逻辑,全屏幕的点击关闭只保留了几个操作区使得用户的二次操作变得小心翼翼。

总之下滑返回的操作可能听起来很奇怪,但对我们来说也并不是新东西,具体的场景应用上国外的 APP 做的比较成熟,国内的话可能还需要再探索一下。

其他操作

这种类型并不常见,比如淘宝二楼、UC浏览器下滑进入 UC头条、还有 UC头条以前的下拉触发(触发区域并不大)夜间模式,除了 UC头条的夜间模式以外,其他的可能都是产品或者市场的一些小心思吧。

文章来源: 设计工地

原文链接: https://mp.weixin.qq.com/

微信公众号微信公众号:zuimeiui

扫一扫 关注公众号

[ 最美特色栏目推荐 ]
设计导航:全球顶尖设计网站推荐,设计师必备导航! → 猛戳这里
设计欣赏:收集海量精选APP截图,让你设计灵感小宇宙大爆发!! → 猛戳这里
APP图标:精选APP图标,看看各大app图标的设计风格提升设计感! → 猛戳这里
【原创文章 投稿邮箱:tougao@zuimeiui.com | 期待您的投稿!】

上一篇
让设计更有趣味性的5个Tips
下一篇
不会C4D与手绘的设计师还有出路吗?