首页 > 分享 > 页面滑动一直循环

页面滑动一直循环

交互动作的直觉形成于『人与实物』的互动中。
在物理世界:接触物体一定有感觉。
在游戏里:与物体交互一定可以看到变化。

f6eb7bb35c470d7e8b3de6cee31262b8.png

滑动动作

滑动屏幕,对应的物理世界的行为是挪移物体。此处是指推拉平移,『拿起来搬到别的地方去』的更接近拖拽。

2.1滑动的方向

动作本身有横竖两种,细分就是上下左右四个方向。按照物理世界里,推拉物体的习惯来说,如果我想看到一屏以下的内容,那就要把页面向上滚,手指也就要向上滑动。

aae9f958b9db28a73684a44b58679028.png

华点:触摸屏和鼠标滚轮(滚动条)方向是反的!

鼠标和手指在用户看来是明确地两个物体,适用不同的心智模型,一般不会搞错——但狸花曾经有一个支持触摸板手势的笔记本电脑,截止它被刷系统之后手势失效,狸花都记不住它的滚动是按照手指还是鼠标方向来的……(鉴于不同的心智模型,如果是狸花来做,会选择同步触摸屏手指的动作习惯)

2.2滑动区域的数量

从前,有一只策划,想加多部分系统邮件的奖励物品。原稿长这样:

d69311d3073d53f0d4ff49e1f50d403b.png

然后狸花认为一个弹窗(邮件页面是一个点击外围可以关闭的层)出现两个滑动区域,并且一横一竖,用户需要识别区域并改变动作。同时,横屏小范围的左右滑动不太适合单手控制。邮件系统的功能性大于沉浸感,动作最好简化——于是做了这样:

c4e142d9a4855625bc38f54268fff0bb.png

在NGUI下做这个,面板自动适应一行/多行的物品数量,其实相比拓展成scrollview是麻烦一点的。但是这个功能狸花可以一猫解决,并不会影响开发和策划。

小声喵喵:如果页面是全屏的,上文的改动可以不必做,因为我们通常会把整个屏幕的滑动视作不需要关注『区域』的全局手势,内心计数自动-1。如果是上下滚屏,内嵌左右滑动区域也足够容易识别——而内嵌上下滑动就比较微妙。这取决于我们对于无形边界的脑补。

957b6a623106a40428df00b171711d4a.png

微信文章里有时会出现,遇到了可以重点观察一下

此外,由于多数用户习惯右手单手持机,并且我们的阅读顺序是左到右上到下,使用向上和向左的滑动,稍微优于向下和向右。

2.3稍微有点奇葩的分类讨论——连续/断开的动作和页面。

连续的滑动页面就像是在拉开的抽屉里翻东西,或者扯卷纸(破案了,狸花真的是猫)。手指的动作当然还是有次数的,但物体的移动带有惯性,不会立刻停止。手指滑动的速度和距离会影响物体,可以不用动很多次就飞快地滑过大段,中间的物体可能看不清楚。适合粗略地翻动列表获取信息,或者找足够明显的物体。

d8924801f05c931dcd826b83e22e7041.png

背包是十分常见的,连续的滑动页面。

面对正在移动的物体,我们通常会在屏幕上按住(或者是反向短暂地滑动一下)来让它停下来。这也是源于物理世界里让实物停止运动的那个反方向的力。

0562509e0af89b5ae4a80026fa496df3.png

按住在动的物体!

小声喵喵: 手机游戏里使用物品为什么要多一步,而端游不用?(原因有很多,比如手机上没有悬停显示物品描述的功能)……这里狸花想说的是,需要预防的『误触』不只是点错位置,也有像『用来停止滑动的点击动作』这样动机上的。

be8a535b726092acf5f83f49afb00694.png

手机上的常见做法 同理,kindle 的手机APP不支持上下滚屏,和它点击有字的任意位置都会退出阅读,会不会有联系?/*事实上,点击书页退出阅读本身就容易误触,用户体验一言难尽……*/

断开的滑动行为映射物理世界的翻页,是清晰的『手指动一下、页面动一下』的动作。不会因为惯性而一下翻过多页,手指滑动的距离也不影响物体移动的距离。动作的速度会影响物体移动的速度,不过仅限于两页之间。

适用于我们希望用户看清楚每页内容的滑动区域(比如轮播宣传图什么的)。以及新页面的进入/退出。

用于新页面进退场时请保持方向一致……左滑打开对应右滑关闭这样……我们翻书页也是向左翻过来就向右翻回去的对吧。

0ce4eb4fdb781bf52c1ec50247de68ca.png

这个图描述了如何表达滑动页面是连续的还是断开的。越是看到完整的多个物体,越倾向于认为它是连续的。

小声喵喵:不处于列表的顶端或者底端时,用户没有截然分明的『当前这个、上/下一个』的意识。如果是循环列表并且没有提示,可能狸花会在很多圈之后才发现并停下动作。

07e2659f146c7cb5ac224185fa4f67ee.png

关爱猫年痴呆,请加上翻页点提示

相关知识

访问异常页面
自定义(滑动条)input[type=“range”]样式
《自然》:新发现的自花授粉机制——花粉滑动授粉
一直花平台
一种全新的自花授粉机制——花粉滑动授粉
园林植物配置大全—绿化树种篇(左右滑动查看更多图片)
html欢迎引导页面
没有找到页面
页面没有找到
花西子页面视觉系统全新升级,“东方美学”走出新高度

网址: 页面滑动一直循环 https://m.huajiangbk.com/newsview539932.html

所属分类:花卉
上一篇: ui设计师与开发人员对接总结
下一篇: UI设计规范