1. 主页 > 设计资讯 > 行业动态

互动设计|为什么Tik Tok要滑上来看下一个视频

编辑指南:一个好的产品不仅要满足人们的需求,还要注重交互设计。例如,为什么Tik Tok“上滑看下一个视频”和探索“左右滑”?本文作者从四个维度对此进行了分析,希望对你有所帮助。

去年求职的时候,作为一个新产品,每次体验产品的时候,都比较注重产品的设计细节。总觉得xx功能的体验特别好,xx界面的设计很合理,xx细节的引导很场景化,很贴心。但是对于产品如何与用户进行交互,交互如何能够被用户容易理解和使用的思考却很少。例如:

产品界面里面哪些内容能点击,哪些内容能滑动;点击的时候是在屏幕中央还是屏幕周围;屏幕的四个角分别代表什么操作;滑动的时候是上下滑动还是左右滑动,是在屏幕中央滑动还是从边缘滑动;这样的交互是否费劲,是否合理;是否容易误操作;点击/滑动之后界面内容出现什么样的变化,是否符合预期;用户进入下一个页面的时候,究竟是向左滑动进入下一个界面,还是向上滑动进入下一个界面;……

这种思维维度是以前的产品思维所缺失的。最近在工作中,在设计界面的交互细节时,有一些想当然的设计,以为用户可以理解,可以理解,其实是自我激动。所以这类内容我们后面会多关注。这篇文章从Tik Tok为什么犯错开始。

如果我不出差错,我还能做什么

当我们没有线索时,我们总是试图反过来想。为什么上滑看下一个视频,然后反过来想就是为什么不上滑。如果不上滑,如何切换到下一个视频,还有哪些交互方式可以设计?

互动设计|为什么Tik Tok要滑上来看下一个视频(图1)

(查理芒格的逆向思维真的很好用!)

那么问题就变成了,有哪些交互设计的方法,这些方法相比于用向上滑动的手势来处理观看下一个视频的操作行为,有哪些优缺点?

在分析互动模式之前,先思考一个问题。互动是为了什么?

我们说产品是一个适合用户使用场景的解决方案,满足了用户在这个场景中的痛点。所以我们是一套解决方案,一个工具,但是一个没有使用说明,没有工程师在家安装的工具。所以,解决方案好不好的一个重要的评价维度,就是用户是否能够方便的使用你的工具,理解你的工具。

互联网产品是一种全新的工具,每个人都在探索一种符合人性、使用习惯、大众认知的操作标准。产品和用户都在互相培训,互相进步。用户的每一个操作都是一个人机交互的过程,告诉你此时此刻他想做什么,如何从产品中寻求帮助。

虽然,完美的互动是没有互动。类似于你的眼睛,你妈妈会知道你是去厕所还是去厨房,你男朋友会知道你是想喝快乐水还是白开水,未来的互动可能足够聪明,可以通过眼神和微动作进行互动。(但游戏产品是一个特例,因为真实的互动可以让用户感受到参与,让用户感受到我参与了世界的共建)

我只是想象了完美的场景和未来的可能性,但是目前如果用户真的不与你的产品进行交互,你无法确定是因为我们的交互设计太完美,无法满足用户的意愿,还是因为交互太蠢,没有一个正常的用户可以找到你的功能入口(而后者是大概率的),所以我们需要仔细思考每一个交互细节,避免用户因为交互的复杂而对你的解决方案不满。

然后按照我目前的简单理解,交互设计分为点击行为和手势操作。

1)点击行为

回顾过去,在PC时代,我们如何看待下一页?在Pinterest发明瀑布流之前,大家看完当前页面,点击页面底部的“下一页”,然后跳转到一个新页面,从页面底部向后看页面顶部,等待页面加载,类似下图。

互动设计|为什么Tik Tok要滑上来看下一个视频(图2)

(微博网页截图)

通常,如果页面默认显示10项,如果我们想看到100项,我们需要点击“下一步”九次,然后输入九个新页面,并将我们的注意力重新集中在看不见的位置。

那么为什么Tik Tok不采取这种方法,为什么他不放两个按钮,上一个和下一个?

单击查看下一个视频,然后向下滑动查看下一个视频。有什么优缺点?

从产品使用体验而言,点击行为有功能热区,无论放在哪一块,用户都需要定睛观察图面才能知道按钮的位置,准确进行点击行为,这意味着用户的视觉焦点会从视频本身移到功能按钮上,会中断用户的沉浸式体验,而手势操作在屏幕中任意位置下滑都可以实现操作,不需要特意观察图面;从操作难度来看,根据功能按键在屏幕的摆放位置不同,比如屏幕中央还是屏幕边缘,还是屏幕的四个角落,不同位置对于用户操作门槛不一样,单手操作的操作范围有限,查看下一个视频的行为还需要和点赞评论等用户行为反复PK决胜一个最佳按钮位置。但手势滑动相对来讲就比较简单,小孩子都可以学会,且误触的风险比较低,也更适用于移动产品交互。某种程度上,移动产品的设计,是建立在手势交互的基础上的。

因此,在用户能够理解的基础上,滑动手势操作无论从整体使用体验还是操作难度上,都优于点击“下一步”的交互。

2)手势操作

对于手势操作,这里只讨论单个手机场景(毕竟大部分可以单手完成的行为都可以双手完成),只讨论常见的单指操作。像多指多方向的mac这样复杂的手势就不讨论了。

手势操作可以分为左右滑动、上下滑动,以及用手势绘制相应图形的稍微复杂的操作。这里主要讨论上下和左右滑动。

刚才我们讨论了为什么手势操作比屏幕点击好,但也是手势操作。为什么不滑到右边看下一个视频?目前左右滑动主要应用于什么场景下的什么操作行为?还有左右滑动和上下滑动有什么区别?

首先,按照常规的从上到下,从左到右的阅读习惯,左幻灯片是最后一张,右幻灯片是下一张,不难理解和接受。类似于下面网易云音乐首页的横幅转盘和菜单栏,设计类似,可以滑动查看下一张和上一张。所以如果左右滑动切换到下一个视频,也是一种用户可以理解的交互行为。

互动设计|为什么Tik Tok要滑上来看下一个视频(图3)

网易云音乐首页截图

除了这种情况下的图的某些区域可以左右滑动之外,还有在整个屏幕上左右滑动的手势操作的应用,即滑动切换顶部选项卡。

好像在现在的菜单下,我在这个菜单下有一叠属于不同类别的卡。可以左右滑动切换查看不同的卡内容,也可以点击顶部的标签直接定位对应的卡,如下图酷狗音乐。

互动设计|为什么Tik Tok要滑上来看下一个视频(图4)

(酷狗音乐app首页截图,功能真的太多= =)

这种认知是在很多产品的教育下逐渐形成的,Tik Tok也是这么处理的。左右滑动是切换前三个标签,即同城、关注、推荐。

(除了上面两个左右滑动的场景,一些跳页比较多的应用,比如淘宝,也会用左右滑动的手势来控制进入下一页和退出当前页,这里就不展开了。)

因此,很容易理解为什么Tik Tok没有左右滑动来切换视频。

因为左右滑被其他操作给占用了左右滑动当前承载着切换顶部tab的功能,方便承载更多不同类别的丰富内容,满足不同用户多元化的诉求,如果用左右滑动来切换上一个和下一个视频的话,意味着切tab的功能需要用其他手势/功能按钮来替代,或者用户需要手动点击才能切换类别,或者用户用上下滑等其他手势替代操作,前者操作成本较高,后者暂未形成统一认知,教育成本较高。因为左右滑没有上下滑好操作从操作的简便性而言,上下滑动优于左右滑动,在单手持机的状态下,上下滑动是更符合操作习惯的。而且,用户切换查看下一个视频的行为频次会远高于切换顶部tab查看另一个类目,因此更高频的行为对应更低门槛的手势交互,能让用户用的更爽。

为什么声音会左右滑动,而Tik Tok会上下滑动

刚才,我们只讨论了Tik Tok。基于产品本身的特点和当前内容的丰富性,我们选择了上下切换视频,那么为什么选择左右滑动进行探索呢?

如果说Tik Tok是第一个拥有大屏幕沉浸式短视频并通过向下滑动进行切换的产品,那么Sounding则是第一个以卡片形式左右滑动交友的陌生人。既然上上下下这么友好好操作,为什么不下去看看下一个朋友呢?

首先我们说向下滑动比向左滑动好,并不是说所有的交互都需要向下滑动。毕竟上下滑动只能操作一种行为,所以需要对比用户的操作频率和产品的定位。

对于Tik Tok来说,观看下一个视频是用户的高频行为,而这种短视频app希望用户消费尽可能多的内容,观看更多的视频,所以在产品设计中使用最好的交互手势来操作最合适的用户行为是非常合理的。

但是对于探索来说,下滑看多并不是用户的核心需求。用户打开探索寻找匹配对象,而不是看探索中有多少小兄弟。如果我来看美男照片,为什么不去陈伟霆刷微博?正确所以探测不希望用户来消费内容,然后滑下去看下一个内容。

用户想要的是找到匹配的对象,快速搭讪建立关系。

基于这种用户需求,探索需要做到:

【提供内容】基于用户画像,推荐可能的匹配对象【辅助快速匹配决策】首先是提供尽可能少,且关键的信息,帮助用户构建对对方的profile,这些信息包括照片、年龄、星座、地理位置。

另外,提供尽可能少的选项,就是喜欢,不喜欢,超级喜欢。

互动设计|为什么Tik Tok要滑上来看下一个视频(图5)

浏览主页截图

超级喜欢是某种程度上为会员打包的特殊功能。对于单个对象,所有的决定都可以简化为喜欢和不喜欢。

当选择很少时,决策就变得容易了。

否则,我们必须思考很长时间,只是为了摆脱错误的答案。举个反面的例子,如果把用户对单个对象的决定分为“一见钟情”、“有兴趣尝试”、“有点兴奋但不愿意主动追求”、“对下一个完全不感兴趣”四个等级。

好家伙,这些分类很难理解,需要思考一下到底哪种适合。如果在“一见钟情”的池子里没有鱼上钩,继续在“感兴趣并想尝试”的池子里做决定,看看能否勉强达到“一见钟情”的类型,那么整个决策过程就会变得非常复杂,很难支持基于照片等有限信息的如此详细的分类依据。

所以探索想帮助用户快速决策,重点是速度,只要用户选择喜欢和不喜欢。

刚才我们把Tik Tok比作发声,一个上上下下,一个左右。但其实根本没有可比性。Tik Tok的上下是检查上一个和下一个,而探索严格来说,左幻灯片也是下一个,右幻灯片也是下一个,所以两个互斥的手势用来承载用户互斥的态度,喜欢和不喜欢。

也就是说,用户没有选择先前的操作按钮。

这个要求不是你做不到,而是你不做。

只有在没有退路的时候,我们才会做出更加慎重的决定,否则,错过了这个村子,就没有店了。通过不给用户尝试犯错和退缩的机会,我们可以做出更谨慎的决策,提高决策效率。

如果用上下来表达自己的好恶,上下看下一个的用户习惯太根深蒂固,肯定会带来一大批实际想看下一个却莫名其妙地选择喜欢并配对的用户。因此,在这个场景中,创建一种左右滑动的交互方式来表示用户的态度是有用和高效的。

滑动屏幕时我们想做什么

在讨论了各种交互模式之后,我们回到了向上滑动屏幕的行为。当我们滑动屏幕时,我们想做什么?我们什么时候会有意识地滑动屏幕?

有两种可能,一种是对当前屏幕的内容感兴趣,想了解更多关于当前对象的信息,也就是追求当前信息的延伸。比如看一条长微博,一个屏幕没放下,然后屏幕就慢慢慢慢滑下去了。

对方对当前内容不感兴趣或者已经消费了当前内容,寻找下一个同类型的对象,比如刷朋友圈。滑下去就不想看python的广告,但是对这个广告不感兴趣,想跳过广告赶紧看下一个。

其实两者是有区别的。举个不恰当的例子,你在狼人杀人局遇到一个可爱的二级少女,你加她微信聊天可能有两个目的。如果女生还是单身,你可能想进一步提高自己的认识,追求别人,也就是当前对象信息的延伸。如果女生已经有男朋友了,你可能想问问别人有没有女朋友或者和她一样可爱的女生。

那么如何区分用户滑动时是想滑动当前卡片还是切换到下一张卡片呢?

答案是,hhh不分。

虽然这两种行为在知乎早期是严格区分的,但是在查看完当前答案后,你需要返回到上一个列表页面,点击下一个答案,然后进入内页查看详情。

但实际上,无论是同一种内容还是不同种类的内容,都为用户消耗了更多的信息,而且屏幕尺寸有限,所以当前的内容无法在一个屏幕上显示,用户需要手动向下滑动。但是卡上完了,内容加载后,你要选择让用户拉不下来,告诉他这里没有更多的内容了。是需要退出去找别的东西,还是马上补下一个类似的内容,让用户继续无缝消费?

(虽然我没有这个小哥哥更详细的资料,但是我可以给你介绍更多的小哥哥,确定有你喜欢的。反正不去,请看别的~)

产品的选择一定是后者,也就是现在的瀑布流。内容的无缝连接降低了用户查看更多内容的运营成本。毕竟消费当前信息的用户会大概率对同类信息感兴趣,给用户更流畅的信息消费体验。同时,产品经理也促进更多内容消费行为的发生,为产品带来更大的商业价值。

然而,瀑布并不都是好的,也有不好的。毕竟用户的需求有两种,喜欢当前内容的和消费后不喜欢当前内容的场景。

如果用户在朋友圈看到python的广告,他想通过滑动来做的是跳过这个内容,看下一个。但是默认扩展的评论区太长,用户显然对当前的信息不感兴趣。你继续添加更多关于当前信息的内容供对方消费,并在马腿上亲了一下,导致用户骂人,最后退出。

如果两个滑动场景耦合在一起,必然会带来这样的问题。所以瀑布流能让用户保持消费的前提取决于看到感兴趣的内容带来的快感和对不感兴趣的内容或广告的容忍度,这就需要一个强大的推荐算法~

你必须互动才能看到下一个视频吗

其实这个问题我们还没想完。我们对比了所有的交互方式,怎么看下一个视频,怎么看下一个,每种交互方式的优缺点。但有一个问题是,我们必须互动才能看到下一个视频吗?

答案不一定。

比如,我们可以在3秒钟后自动播放下一个视频,就像微博一样(一开始推荐的视频太差了,根本没兴趣),再比如,我们可以在一个屏幕上播放两个视频,上一个和下一个都在这里,整整齐齐,我们也可以像哔哩哔哩一样,在主页上有两个纵向的视频,等着小主人点击。

为什么Tik Tok希望一段内容占据整个屏幕,然后让用户操作它来观看下一个视频?我猜可能有两个原因:

第一,沉浸式体验。大屏的好处在于沉浸式体验,整个屏幕除了当前视频没有其他信息,用户可以毫无负担的享受当前内容,忘却外部烦恼,不知不觉,抖音十几秒,人间俩小时。第二,不确定性和惊喜感。大屏交互和快手等产品之前的双列feed流相比,还有一个好处在于,列表代表了确定性,需要决策成本,点开哪个看哪个,当你查看列表的时候,你预览了信息,知道可能会有哪些内容,并且基于标题和预览信息选择了一个内容,那么你对视频内容就有了基本的预期,内容也很难超出预期,只能大概率符合预期或者低于预期。

在大屏互动中,意味着不确定,也意味着没有看到下一个的惊喜。如果双排提要流中的下一个视频是四个中的一个,那么向下滑动看到下一个视频就意味着n个中的一个,所以你不知道下一个是什么,也不用去想下一个是什么。你只要看/不看,没看就一直滑。

在我之前的推送中,我在南京介绍了一个我很喜欢的小店,叫丰博庄,我愿意称之为餐饮业的“Tik Tok”。因为这家店解决了一个吃饭,点餐的大问题。

大家都知道点菜是最难的。很难点。当你问旁边的人,你想吃什么就吃什么。上桌后,你可以说你的菜不够硬,或者没有汤,或者没有菜,或者太辣,或者太油腻,点菜的人无话可说。

互动设计|为什么Tik Tok要滑上来看下一个视频(图6)

(我太爱风博庄了~强大的安利每个人都有尝试的机会)

而丰博庄则摒弃了传统的看菜单点菜的方式。当你进来的时候,服务员不会给你各种推荐菜的密集菜单,而是直接按人数上桌,没有菜单。

只要你坐下喝水,就会有人开始给你上菜,但也不是完全没了,因为每一道菜你都可以自主选择是留着还是带走。100个选择的选择题会变成8个选择的真假题,整个用餐体验变得轻松高效。

当然这也很大程度上依赖于推荐算法(阿姨对每个人的胃口和口味的估计)和产品本身的质量(食物的丰富度和口感)。

综上所述,为什么Tik Tok会滑上来看下一个视频的设计?我的回答如下:

首先,这个设计的背景是产品本身是基于对其背后的推荐算法的自信,省略了用户决策的环节,直接进入当前内容的消费阶段,所以用户需要手动切换内容,或者换句话说,用户需要有一个出口来表达自己是否接受推荐的内容,而不是被迫消费所有推荐的内容。

根据用户的交互需求,上滑的优点是:

不需要额外的教育成本,上滑查看更多内容已经潜移默化成为了用户习惯。上滑是最简便的交互手势,查看更多是用户和产品的共同诉求,所以上滑承载用户最高频的诉求十分合理。用上滑来查看更多,保留左右滑用于tab切换,保证了结构和内容的可扩展性,保证了产品的活力。

本文由设计学习网整理发布,不代表设计学习网立场,转载联系作者并注明出处:https://ffjianzhan.cn/xingyezixun/jhsj/629.html

联系我们

在线咨询:点击这里给我发消息

微信号:

工作日:9:30-18:30,节假日休息