编辑指南:滑动设计是最常用的交互手势之一。需要考虑的是如何在有限的屏幕上以最低的运营成本提供更多的内容。本文作者根据自己的工作经验，对此发表了自己的看法，并与大家分享。

滑动操作是移动设备中最基本的交互手势之一。方法之一就是如何在有限的屏幕尺寸下，以最低的运营成本，为用户提供更多的内容，拓展水平空空间。

如果说3D Touch是三维操作，那么没有滑动手势的产品可以说是在线性一维空间中上下跳动空。上下滑动时，空左右滑动可以认为是从一维“线”到二维“面”的成功过渡。先说这个小滑动操作。有什么区别？

滑动的应用场景大致可以分为以下几类:

侧滑返回更多操作切换查看更多进度调整收纳快速多选

让我们来看看使用这些幻灯片的具体方法。

01侧滑返回

侧滑可以回到之前的操作水平，这是iOS系统的特点之一。这种在屏幕边缘向右滑动的互动手势诞生于iOS7。

得益于系统底层的支持和APP的规范开发，iOS平台上的每一个软件都支持“侧滑返回”手势，极大的方便了用户单手操作，使得场景切换更加流畅。

现在手机的尺寸越来越大，也想回到下一个层次。相对于点击左上角，在屏幕边缘向右滑动显然更快。一旦人们习惯了“侧滑回位”这种又酷又快又方便的手势，就很难戒掉了。

即使侧滑返回无效或手势冲突，也经常会惹恼用户。而不是耐心的点击左上角返回，而是直接去后台杀进程。

02更多操作

在微信、QQ等IM即时通讯软件中，最常见的操作方式是左右滑动(和长按)，如标记未读/已读、置顶/取消置顶、删除、移入消息框、标记聊天等快捷功能。

微信收藏，向左滑动添加标签和删除。

iOS系统通知、左滑管理、查看、清除也是如此；向右滑动以快速打开应用程序。

比较特别的是KIM和Nail，也增加了对话泡泡上侧滑手势的反应。

在KIM中，向左滑动对话框气泡，可以快速引用选中的消息，并自动添加@对应人，用于快速回复特定消息，提高效率。

在钉钉聊天界面，屏幕边缘向右滑动，显示时间戳，每条消息的确切发送时间清晰可见。

03切换

滑动最潜意识最基本的功能就是切换。

在页面之间切换:

EDGE浏览器左右滑动网页，可以前后移动；Instagram的临时动态可以左右切换；iOS桌面向左滑入负屏，可以容纳更多不同内容，拓展更多可能性；以及大部分带有顶部导航和二级Tab的软件，如微博、知乎、小红书等。，可以通过左右滑动在页面和选项卡之间切换。

对于iOS系统相册，在“照片”标签下向右滑动可以切换时间线，从“所有照片”切换到“日”，逐渐扩展到“年”，方便用户在大量照片中快速定位搜索。

还有夏密音乐、QQ音乐等音乐软件。，在播放页面左右滑动，可以切换到歌曲详情页面、歌词页面或相关推荐页面，切换歌曲。

在横幅之间切换:

用图片传递信息比文字更快更准确，阅读更省力。

不仅是电商购物平台，网上药店、外卖商家、旋转横幅都不可或缺。比如淘宝，拼多多，美团买药，饿了就拿出来。

点击产品页面，首先看到的是顶部的产品标题，这是一个屏幕中最高的位置，也是你眼睛的中心焦点。但是因为产品标题图看起来快捷方便，所以浏览的完整性往往更高。

有一个区别，就是淘宝的轮播最多可以放5张照片，品多多的轮播最多可以放10张照片。

猜测原因是淘宝卖家会更注重商品的整体感觉。你逛淘宝的时候是这样的吗:“点击商品，左右滑动快速看标题图，然后向下滑动看产品详情页面，看卖家的展示，产品详情，功能点，尺寸颜色等。，然后看看评论区有没有买家秀。最后，点击添加购物车，看看是否有商品，什么价格，缺货或者如果不想添加购物车占据位置，先点击收藏。至于最后买不买，还是分开说吧。”

品多多以便宜实惠著称，已经形成了特定的用户心态。因此，多达10个标题呈现的信息足以让一些用户在阅读后决定下单。

但是，对于看似不起眼的旋转木马横幅，还能做什么花呢？

随口和JD.COM做了。

主页上的横幅可以将屏幕的主要内容与背景分开。滑动时只移动主对象，背景通过淡入淡出切换。视觉效果新颖。相对于传统的图片旋转，这种处理方式不得不说是非常细腻细致的。

在JD.COM发现页面的直播标签下，双十一期间的轮播采用了“切掉空背景色”的方法。虽然和自由处理方式不同，但和传统的位图旋转还是有区别的，有更好的视觉感受。

还有一些其他的切换应用场景:

探索、阿罗哈和吉姆等交友软件经常使用换卡来匹配朋友。“右滑喜欢，左滑不喜欢”的手势简单易用，让人感觉更滑溜，更有活力；改版后，淘宝还在双排Feed顶部增加了固定的转盘操作位置。

绿洲发现页面的顶部操作位不同于传统的Banner图旋转，操作位分为三部分，可以扩大顶部操作区域，为更多活动提供曝光；腰部推荐卡采用更逼真的切换效果。

还有网易出品的尹杰推荐的音乐和Aauto快站的银悦泰，换卡体验更精致优雅。

查看更多

其实“多看”和“切换”很像。

两者的区别可能在于切换后信息层次是否有非常明显的变化。

比如App Store中的游戏Tab也有Banner的轮播。这里的一个Banner切掉后，信息层次最小化，只露出一点点边，暗示用户“这里有”；在飞猪旅行的旅行日历中，卡向后滑的时候，每张卡的信息等级其实并没有拉开，更多的是“向后滑就能看到更多”的感觉。

其实简单来说，区分的方法就是看是“割”还是“滑”。

苏打铁、脸书、微博、亚图快、Tik Tok等产品。都有这样的横向用户推荐卡。但是这种推荐卡并不排斥社交产品，支付宝里也有类似的横向推荐卡。

值得一提的是，支付宝在这里的手势引导很有意思。它采用垂直的“滑动看多”，不同方向的上下双箭头进一步引导用户进行相关操作。

滑动不仅可以切换页面，还可以在某些特定场景下赋予跳转页面的能力。

比如Oasis推荐在关注页面插入一张水平滑动的卡片，向左滑动到最后一个位置后，会直接进入用户特别推荐的登陆页面；

美团购药店内优化，滑动到最后一个位置后，继续滑动放开，也会跳转到专门进行优化推荐的登陆页面。

不过这两款产品使用的手势虽然一致，但美团在买药体验上略胜一筹。

如果绿洲的推荐卡滑得太快，页面会直接跳开，用户没有心理准备。虽然有“继续滑下去多看”的文案提醒，但是互动跳转的逻辑中并没有中间状态。滑的快一点直接跳开，更别说先看到提示文案了。相比之下，美团的店内优选卡只有放手后才会跳，给用户足够的时间做准备，在心里缓冲。

自动加速的关注页面，Tik Tok的推荐页面和左边的幻灯片都可以直接跳转到作者的个人页面。

“幻灯片多看”除了上面提到的那些场景，还有两个比较特别的。

一个是Aauto Speeter的特色页面，向左滑动会从页面的右侧调出一个“滑板”状的功能区域。

没有滑板的时候，上下是流行选曲的常用开关；当你调出这个功能区，然后向下滑动，就会切换到当前作者的作品。

这不仅提高了单屏空的利用率，还能让用户更方便地浏览作者的其他作品，有助于增加其他作品的曝光度。并且继续向左滑动，也可以进入作者的个人页面。

另一个是JD的关注标签下有一个新的关注商店的动态区域。COM的发现页面，相当于一个新的通知。

滑动头像来切换并不罕见，但JD.COM在这里做的更好。固定第一个头像为选中区域，滑动切换选中店铺。商店中的商品在商店头像下实时显示，商品区可以滑动以查看更多。滑动停止后，还会有一个“浏览”标签来指示当前状态。

这样，用户可以更高效地了解和关注店铺的新情况，提高店铺的曝光率，同时一次性将原来麻烦的运营路径扁平化，简化。精彩！

05计划调整

左右滑动快进和快退视频是一种常见的快捷方式。不管是全包的直线，腾讯优酷爱奇艺，还是消磨时间的短视频产品腾讯微视，说你是一个没有进度条的看视频的APP都太尴尬了。

虽然在视频产品中通过左右滑动来调整进度是最常见的，但并不仅限于视频产品。比如iOS系统相册可以在编辑页面上滑动的方式逐帧浏览视频。

另外，iOS系统相册的照片Tab里有一个小彩蛋:在年度视图中，左右滑动封面可以快速预览12张图片，这12张预览图片对应12个月。

06浮动窗口存储

有些产品会在用户截图后立即弹出分享面板。但是我个人觉得这个功能很烦，因为我需要在截图后再次点击取消，关闭这个分享面板继续浏览。不过下一期就不在这里开始了，我会专门写一篇推送，挑出所有不让人不愉快的产品体验。

iOS系统截图后，屏幕左下角会出现一个预览浮动层。点击截图，可以立即编辑。向左滑动以将其移出屏幕，但截图仍会保存到相册中。

一些有思想的软件会避免截图后弹出的分享面板上iOS截图预览浮动层的干扰。比如最右边的拼多多和，这两款产品的截图分享面板要么在左边留空只放指南副本，要么放一个小截图预览。

这样可以避免用户想马上分享截图，但是分享入口被截图预览浮动层挡住的尴尬局面。

要说浮动窗收纳，不能绕过微信。

微信在7.0.4版发布了浮动窗口的新功能，解决了当时微信官方账号文章阅读体验连续性的痛点，优化了7.0.5版浮动窗口的风格。

现在微信的浮动窗口支持最多存储5篇文章或小程序链接+1个音频。

除了微信，知乎现在也有这个功能。但对于知乎新增加的浮动窗口功能，在线评价褒贬不一。

在更新存储浮动窗口的功能之前，知乎原本有“下一个答案”浮动按钮，答案顶部有“写答案”、“邀请答案”和“跟随”按钮，底部有“喜欢”、“收集”和“评论”按钮。这时候如果加上储物浮动窗口，点击屏幕会像踩了地雷一样，可以再看看奥铁汁！

目前知乎的浮动窗口只支持最多5篇文章的存储，暂时不支持视频的存储。

脸书也有一个浮动窗口存储功能。主页的临时动态支撑是左滑直接收进浮动窗口，交互动画非常Q弹流畅。

07快速多选

滑动手势应用场景的最后一个分类:快速多选。大部分出现在一些相册和图片管理软件中。

点按iOS系统相册右上角的“选择”按钮后，您可以通过对角滑动来选择多张照片。

虽然很多地方iOS的体验都很好，但是还是有一些针对多张专辑的优化空。

例如，在多选状态下，上下滑动屏幕以找到要选择的照片，可以在滑动过程中轻松选择其他图片。万一你此时正在整理相册，不小心选到了不想删的照片，最后没找到的时候默默跟着一起删了(虽然最近有个后悔药删了，万一你根本没找到)。在这个地方，相册比iOS相册好。一会儿，进入多选状态，专辑需要长时间按下，然后稍加振动反馈，进入待选状态。这时候可以滑动照片进行多选，放开后就可以退出多选状态。