从4个方面，深度解析App中的卡片切换与交互手势

最近收到小伙伴的一个问题，以下两种卡片切换怎么用。

以下是我收到的两个不同案例，一眼给我们的感受就是两个case不是以通手指左右滑动嘛？

像有区别，但是具有什么区别，分别以怎么用，一下子又说不上来，么大家以来听听我的理！

形态、手势与预期

不道大家家里是否有两种门，一种是转动把手以向内或者向外打开的，另一种是拽动把手进行左右移动的，就像下面个样子。

我们以通把手和门的样式判断出何对其进行操，所以两种卡，首先在形态上就有区别，一种是平铺一种是叠加，也就是一个是二一个是三。所以有小伙伴问要问，又怎样，质上是卡切换，为什么在banner上不以用叠加态呢？

除了形态的区别外，还交互手势的区别，大家以为叠加和平铺是轻扫切换吗，首先两种形态有通轻扫手势以进行状态切换的程，但质上，叠加状态控的是当前卡与下卡，而平铺状态控的则是一整个轮播容器，并且叠加卡除轻扫以外还以拖拽。

里说一个互手势的区别：轻扫（swipe）、甩动（flick）、拖拽（Drag）的区别，拖拽和前两者比区别，大家应该玩地摊游戏像套圈圈，轻扫和甩动就像你站在原地往目标一扔，而拖拽就像是你探出半个身子，把圈放到最近的一个玩具头顶上放手，是不是很形象

么轻扫和甩动的区别是什么呢，我们里简单的描述两者在见范围内的区别，比：

1. 惯

比我们操移动端信息列表的时，大拇指对内容界面的滚动进行的是甩动，上滑页面不马上停下，而滚动一停下。就相当给一个物理世界的摩擦力的效果，但是轻扫则几乎不明显。

2. 位移

轻扫所经的位移短，基上在该容器中生位移变化，虽两者其以不方向，但是位移的距离是有区别的，轻扫更短，甩动更长。

3. 力量

轻扫无论你的初速度还是力量大，只能完成稳定的动与状态，例滑删除，不管怎么用力和加速只能让对象在指定的范围内呈现。

4. 范围

个其很有意思，不道大家最近是否更新iOS，更新的同学能在编辑闹钟页面得想要原地爆炸，因为我们看下图

无论是轻扫还是甩动，我们需要有一个明确的范围，在老版中的时间切换，轻扫和滚动能很快速的选择到时间，因为我们以同时看到上下文并且做出预判，但是新版就变得有点阿西吧的感，为更精准的选择到时间我们必须从轻扫/甩动换成滑动，甚至类似拨动的手势，难用至极。所以轻扫的范围也比甩动的视范围更小。

那么轻扫甩动怎么区别呢，家可以理解，轻扫甩动的基础给被拖动对象增加了稳效果，所以既然增加了稳效果，那么惯性移都被固、稳化了，比如列表左滑删除，tab左右滑动的切换。

另外，大家能得甩动和轻扫以控我们界面中大部分对象，以帮助我们高效浏览，而且要精确我们以将甩动进行稳定的轻扫控。但并非么简单，我举两个糖炒栗子，例音量和进度的节，我们是不以用甩动或者轻扫，因为无法准确控，只能使用拖拽。

5. 知乎悬浮按钮

另在知乎话题切换有个悬浮按钮，这个按钮不知大家是否操作过，他既可以拖拽，也可以甩动，问题来了，如其甩动会出现两情况，第，返回屏幕侧吸附，第吸附到屏幕另侧。

两情况取决于你是否甩动过了某条“边界”，也是说你手指在控制这个“圆形”象时，何时进了“关闭”（也是何时手指离开了屏幕），所以这里咱们要说是，如何选用手势进象控制，要取决于具体场景和需求，这里圆形控制并不需要常精准位，所以其赋予了拖拽和甩动两个手势，那然这里轻扫也可以啦，是没什么卵用。

6. QQ未读泡

有比如qq未读泡，拖拽和甩动都可以删除它，是轻扫不。

其实这些规则我们在交互动效工具都可以很好体现，比如拖拽开始-拖拽结束，应是手指接触拖动-手指离开。

所以做个小结，轻扫是甩动稳定化效，并适合距离较短进操作，轻扫和甩动都是精确化操作。

我们回到个案例身，叠加和平铺卡的互手势，叠加卡用的是轻扫，并且还具有拖拽的手势属，而平铺的卡以轻扫，相当单浏览，类似banner切换，并且也以具有甩动的能，比淘票票的热映卡，不平铺的时一般单卡不适用甩动，轻扫即，因为单卡使用甩动，信息基看不清楚，卡使用甩动更容易提高检索的效率。

另外用探探的老司机们道，喜欢哪个美女帅哥就往右边“扔”卡，为什么是扔呢，因为个“扔”包含选择的意思，就像感的荷官在牌一样，卡牌就是你的！当，既给你，你也不能退，想找回来就难咯

所以其实手势，叠加态的卡片切换我们的预常规使用中，选择、不可逆的属性，那这就平的二维卡片切换就完全不同了。

对比

叠加态的卡更不方便信息对比，而平铺卡则以，例腾视频的vip等级卡切换。没有对比就没有伤害，不造成伤害，就促进不买卖。所以你看非诚勿扰是排一排给你选的而不是一个出来不行换另一个，因为你不道下一个不更不喜欢。

神秘性

叠加态卡片像是德州扑克样，不知大家是否all in过，是否赌赢过最后张，在没有发出那张时候，我们是抱着期望，所以叠加卡片，在我们普预期是潜意识提高，而平铺卡片像已经发在你手里卡片，你可以观察、比，是没有了未知感和神秘感，所以抖音是如何让你上瘾，让你沉浸在其，大家现在可以理解了吗。

有限与无限性

叠态的卡片在展示上会给你一些样式，告诉你这里有好多张，并且是永远切换的，而平铺卡片则通需要告知户外这里有几张，你看到了第几张，又多了一个轮播指示器来帮你记忆。

综上所述，方案没有好坏，只有适不适当前的景。所以，在什景下用什的切换大家学废了吗？

注作者的微信公众号：「应谋鬼计」