赞助商
立即赞助

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

UI设计3年前 (2021)发布 流光
3.6K 0 0

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

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

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

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

形态、手势与预期

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

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

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

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

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

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

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

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

1. 惯

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

2. 位移

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

3. 力量

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

4. 范围

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

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

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

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

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

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

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

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

5. 知乎悬浮按钮

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

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

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

6. QQ未读泡

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

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

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

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

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

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

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

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

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

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

对比

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

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

神秘性

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

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

有限与无限性

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

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

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

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

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

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

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

相关文章

2021 年的第一篇万字长文,文章主题是一次偶然的反思中总结出的设计师思维进阶的过程,详细讲述了我在两年间从一名应届非科班...
交互设计
前言 当我在网上搜寻交互文档规范时,可以搜到很多关于交互文档的结构搭建的文章,但始终没有一份较为完整的案例 Demo 展示,...
交互文档
推荐算法出现之前,寻找信息的主场景是通过搜索获取。 用户通过搜索框,输入目标的关键词进行查询。这一过程是用户的主动行...
交互设计
@苏大牙牙牙 :说到腾讯,大多数设计师对他们的体验设计,还是比较认可的。那么,腾讯的设计到底好在哪呢?体量这么大的公司...
App设计
最近刚毕业的时候听前辈说三年一个小坎,五年一个大坎,今年是我工作的第五个年头,在工作上确实遇到了一个很大的门坎,能不...
交互设计
最近从之前的项目出来做国际版,和之前项目的设计负责同学唠嗑,最多的感慨是有关“背锅”的问题。 啥锅呢? 估计不少铁汁也...
交互设计
合理的移动导航设计能够尽可能地减少摩擦,引导用户去他们要去的地方。 这篇文章汇总了移动端导航设计最常见的样式、要注意...
交互设计
一次会议的演示文稿,通常是一个 .pptx 格式的文档,而日常来往的邮件附件里的文档则多是 .docx 和 .pdf 格式的文档。当然,...
交互文档