CN106293329B - 一种在终端上呈现界面元素阵列的方法、装置及终端 - Google Patents
一种在终端上呈现界面元素阵列的方法、装置及终端 Download PDFInfo
- Publication number
- CN106293329B CN106293329B CN201610609715.6A CN201610609715A CN106293329B CN 106293329 B CN106293329 B CN 106293329B CN 201610609715 A CN201610609715 A CN 201610609715A CN 106293329 B CN106293329 B CN 106293329B
- Authority
- CN
- China
- Prior art keywords
- interface element
- terminal
- element array
- presented
- screen
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/03—Arrangements for converting the position or the displacement of a member into a coded form
- G06F3/033—Pointing devices displaced or positioned by the user, e.g. mice, trackballs, pens or joysticks; Accessories therefor
- G06F3/0346—Pointing devices displaced or positioned by the user, e.g. mice, trackballs, pens or joysticks; Accessories therefor with detection of the device orientation or free movement in a 3D space, e.g. 3D mice, 6-DOF [six degrees of freedom] pointers using gyroscopes, accelerometers or tilt-sensors
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/04847—Interaction techniques to control parameter settings, e.g. interaction with sliders or dials
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
- G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
Landscapes
- Engineering & Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本发明公开了一种在终端上呈现界面元素阵列的方法、装置及终端。包括将界面元素阵列的第一部分呈现在终端的屏幕上,监测终端的倾斜,通过倾斜角度与预设阈值的比较,判断是否在屏幕上呈现界面元素阵列的第二部分。第一部分元素阵列与第二部分元素阵列具有不同的交叠关系,并且元素阵列的滑动方向与终端倾斜方向也具有不同的关系。本发明能够适应更多的应用场景以及用户习惯,基于提出的交互方案,利用设备加速传感器得到的信息,来响应用户对于移动设备的操作,增强用户的互动性。
Description
技术领域
本发明涉及移动设备交互及活动方案,具体地,涉及一种在终端上呈现界面元素阵列的方法及实施该方法、装置以及终端。
背景技术
人机交互的方式主要是机器在得到感知后作出对应的响应。移动设备获得用户操作、环境状态信息的方式有很多,比如通过触摸屏得到用户手势;通过加速度传感器获得当前手机的加速度;通过光敏传感器获得当前手机的光照程度;通过GPS获取手机的位置信息等。App 在得到相应的数据后,做出对应反馈。
发明内容
现有技术中用户与移动设备之间的交互方式包括:
一、利用传感器使移动设备横竖屏之间切换。
获取加速度传感器,得到设备在三维坐标系中沿y轴的旋转角度,从而判断移动设备头部的朝向,据此根据需要旋转屏幕内容。
二、手指触摸移动设备,使移动设备App中的内容按 照手指的方向移动。
用户将手指触摸移动设备的屏幕后,触摸屏接受用户的触控事件,将这些触控事件发给当前App来处理,当前活动的App处理触控事件并做出滑动等效果的反馈。
申请人在设计过程中,发现现有技术横竖屏之间切换和手指触摸交互方式存在如下缺陷:
一、App中表达不同信息的元素往往不能在同一界面显示,主要元素处于第一界面,而次要元素设置于其他界面。而屏幕的切换需要用户操作才能触发,例如触摸滑动操作。但是,用户由于习惯或者应用场景因素,存在不使用触摸滑动操作或只能单手操作而无法进行触摸滑动操作的情况,这就会使用户错失处于App其他界面的信息。
二、手指触摸屏幕与移动App交互并不具有空间立体感,用户的感知只停留在二维空间层面。
三、触摸屏幕带来的交互体验趣味性不足。
四、传感器信息的改变,变换了整个屏幕的内容的方向,并不能代替手指完成滑动等交互操作。
基于申请人发现的上述技术问题,本发明旨在解决手指触控屏幕的交互不能满足空间立体感和趣味性的问题,设计一种根据移动设备屏幕的倾斜程度滑动其中内容的人机交互方案,并在此基础上由滑动情况和倾斜程度触发获得优惠信息的活动方案。
本发明提出一种在终端上呈现界面元素阵列的方法,包括:将界面元素阵列的第一部分呈现在终端的屏幕上;监测所述终端的倾斜;如果所述倾斜的角度大于阈值,在所述屏幕上呈现所述界面元素阵列的第二部分。
优选地,如果所述倾斜角度小于所述阈值,保持所述界面元素阵列的所述第一部分相对于所述屏幕的位置。
优选地,所述第一部分与所述第二部分的无交集。
优选地,所述第一部分与所述第二部分的具有交集,以及所述界面元素阵列呈现步骤还包括,如果所述倾斜的角度大于所述阈值,通过沿所述倾斜的方向移动所述第一部分而接续呈现所述第二部分。
优选地,所述界面元素阵列为图标阵列,被呈现于所述屏幕上方。
优选地,所述界面元素阵列移动步骤还包括,如果所述倾斜角度大于所述阈值,以与所述倾斜的角度成比例的速度/加速度,通过沿所述倾斜的方向移动所述第一部分而接续呈现所述第二部分。
本发明还提出一种在终端上呈现界面元素阵列的方法,包括:将第一界面元素阵列呈现在终端的屏幕上;响应于所述屏幕的倾斜,向所述屏幕的一侧移动所述第一界面元素阵列;以及接续于所述第一界面元素阵列,将第二界面元素阵列移入所述屏幕。
优选地,如所述屏幕倾斜消除,则保持所述第一界面元素阵列相对于所述屏幕的位置。
优选地,所述第一界面元素阵列移动步骤还包括,响应于所述屏幕的倾斜,沿所述倾斜方向移动所述第一界面元素阵列。
优选地,所述界面元素阵列为图标阵列,被呈现于所述屏幕上方。
优选地,所述第一界面元素阵列移动步骤还包括,响应于所述屏幕的倾斜,以与所述倾斜的角度成比例的速度/加速度,沿所述倾斜方向移动所述第一界面元素阵列。
本发明还提出一种在窗口中滑动显示界面元素阵列的方法,包括:将界面元素阵列部分地显示在窗口中;响应于所述窗口的倾斜,将所述界面元素阵列滑动显示于所述窗口。
优选地,还包括步骤:如果所述倾斜的角度小于预定阈值,保持所述界面元素阵列相对于所述窗口的位置。
优选地,所述界面元素阵列滑动步骤还包括,响应于所述窗口的倾斜,将所述界面元素阵列沿所述倾斜的方向滑动显示于所述窗口。
优选地,所述界面元素阵列为图标阵列;所述窗口为图标显示窗口,被呈现于终端的屏幕上。
优选地,所述界面元素阵列移动步骤还包括,响应于所述窗口的倾斜,以与所述倾斜的角度成比例的速度/加速度,将所述界面元素阵列沿所述倾斜的方向滑动显示于所述窗口。
优选地,当所述图标阵列沿所述倾斜的方向滑动至其尾部呈现于所述窗口,在所述屏幕上呈现反馈元素。
优选地,当所述图标阵列的尾部呈现于所述窗口,响应于用户对所述图标阵列的拖拽,在所述屏幕上呈现反馈元素。
本发明还提出一种反馈元素呈现方法,包括:将界面元素阵列呈现在终端的屏幕上;响应于所述终端的加速度或用户对所述界面元素阵列的拖拽,在所述屏幕上呈现反馈元素。
优选地,响应于用户对所述反馈元素的操作,允许所述用户获取反馈内容。
优选地,所述反馈元素为电子红包,代金券或游戏入口。
优选地,反馈元素呈现步骤还包括:响应于所述终端的加速度或者用户对所述界面元素阵列的拖拽,在所述界面元素阵列的中部、两侧、上方、下方呈现反馈元素。
优选地,所述加速度由外力致动所述终端而形成。
本发明提出一种呈现界面元素阵列的终端,所述终端被配置为:将界面元素阵列的第一部分呈现在终端的屏幕上;监测所述终端的倾斜;如果所述倾斜的角度大于阈值,在所述屏幕上呈现所述界面元素阵列的第二部分。
优选地,如果所述倾斜角度小于所述阈值,保持所述界面元素阵列的所述第一部分相对于所述屏幕的位置。
优选地,所述第一部分与所述第二部分的无交集。
优选地,所述第一部分与所述第二部分的具有交集,以及所述界面元素阵列呈现步骤还包括,如果所述倾斜的角度大于所述阈值,通过沿所述倾斜的方向移动所述第一部分而接续呈现所述第二部分。
优选地,所述界面元素阵列为图标阵列,被呈现于所述屏幕上方。
优选地,如果所述倾斜角度大于所述阈值,以与所述倾斜的角度成比例的速度/加速度,通过沿所述倾斜的方向移动所述第一部分而接续呈现所述第二部分。
本发明还提出一种呈现界面元素阵列的终端,所述终端被配置为:将第一界面元素阵列呈现在终端的屏幕上;响应于所述屏幕的倾斜,向所述屏幕的一侧移动所述第一界面元素阵列;以及接续于所述第一界面元素阵列,将第二界面元素阵列移入所述屏幕。
优选地,如所述屏幕倾斜消除,则保持所述第一界面元素阵列相对于所述屏幕的位置。
优选地,所述第一界面元素阵列移动步骤还包括,响应于所述屏幕的倾斜,沿所述倾斜方向移动所述第一界面元素阵列。
优选地,所述界面元素阵列为图标阵列,被呈现于所述屏幕上方。
优选地,所述第一界面元素阵列移动步骤还包括,响应于所述屏幕的倾斜,以与所述倾斜的角度成比例的速度/加速度,沿所述倾斜方向移动所述第一界面元素阵列。
本发明还提出一种在窗口中滑动显示界面元素阵列的终端,所述终端被配置为:将界面元素阵列部分地显示在窗口中;响应于所述窗口的倾斜,将所述界面元素阵列滑动显示于所述窗口。
优选地,如果所述倾斜的角度小于预定阈值,保持所述界面元素阵列相对于所述窗口的位置。
优选地,响应于所述窗口的倾斜,将所述界面元素阵列沿所述倾斜的方向滑动显示于所述窗口。
优选地,所述界面元素阵列为图标阵列;所述窗口为图标显示窗口,被呈现于终端的屏幕上。
优选地,所述界面元素阵列移动步骤还包括,响应于所述窗口的倾斜,以与所述倾斜的角度成比例的速度/加速度,将所述界面元素阵列沿所述倾斜的方向滑动显示于所述窗口。
优选地,当所述图标阵列沿所述倾斜的方向滑动至其尾部呈现于所述窗口,在所述屏幕上呈现反馈元素。
优选地,当所述图标阵列的尾部呈现于所述窗口,响应于用户对所述图标阵列的拖拽,在所述屏幕上呈现反馈元素。
本发明提出一种呈现反馈元素的装置,包括:显示模块,用于将界面元素阵列呈现在终端的屏幕上;响应模块,用于响应于所述终端的加速度或用户对所述界面元素阵列的拖拽,在所述屏幕上呈现反馈元素。
优选地,响应于用户对所述反馈元素的操作,允许所述用户获取反馈内容。
优选地,所述反馈元素为电子红包,代金券或游戏入口。
优选地,响应模块还响应于所述终端的加速度或者用户对所述界面元素阵列的拖拽,在所述界面元素阵列的中部、两侧、上方、下方呈现反馈元素。
优选地,所述加速度由外力致动所述终端而形成。
本发明的有益效果是:
基于提出的交互方案,利用了设备加速传感器得到的信息,来响应用户对于移动设备的操作,适用于不同的场景和不同习惯的用户。使用户在“倾斜”、“摇晃”、“甩”设备的过程中,可以浏览元素不同位置的内容,元素的滑动动画也带来了十足的趣味性。
附图说明
下面结合附图对本发明的具体实施方式作进一步详细的说明;
图1为本发明实施例终端界面元素阵列快速切换示意图;
图2为本发明实施例终端界面元素阵列慢速滑动示意图;
图3为本发明实施例终端界面元素阵列滑动方向与终端倾斜方向相反的示意图;
图4为本发明实施例终端界面元素阵列滑动方向与终端倾斜方向相同的示意图;
图5为本发明实施例利用加速度传感器获得终端各种倾斜方式的示意图;
图6为本发明实施例将界面元素阵列呈现在终端屏幕上的具体流程;
图7为本发明实施例将界面元素阵列呈现在终端屏幕上的具体流程;
图8为本发明实施例将界面元素阵列呈现在终端屏幕上的具体流程;
图9为本发明实施例将界面元素阵列呈现在终端屏幕上的具体流程;
图10为本发明实施例在终端上呈现界面元素阵列的具体执行步骤。
具体实施方式
下面结合附图1-10对本发明的具体实施方式作进一步详细的说明。
为使本发明的目的、技术方案和优点更加清楚,下面将结合附图对本发明作进一步地详细描述。发明涉及的技术术语解释如下:
加速度传感器:移动设备中的一种物理传感器装置,从三维坐标的角度衡量手机在三个方向上的加速度。多用于监测智能手机的各种位置状态,包括运动、检测摇晃、倾斜等。
移动设备:指智能移动手机和智能平板电脑,但不包括笔记本。本发明中主要指Android、I0S、塞班、Windows系统的移动设备。
三维坐标系:在立体空间中,定义原点和三个互相垂直带有正方向的轴:x轴、y轴、z轴。在坐标系中,给定任意一组x、y、z的值都能唯一确定一个点在坐标系中的位置。
人机交互:人机交互是指用户与计算机设备之间的交互关系,二者之间互相的信息传递。本发明中尤指人与移动设备之间的交互关系。
如图1、2所示的终端APP界面状态,当终端处于初始状态时, APP界面元素阵列的第一部分呈现在终端的屏幕上。在此时,终端所包含的加速度传感器处于工作状态,加速度传感器监测终端的倾斜情况,记录和反馈倾斜角度数值。如果倾斜角度大于阈值,在屏幕上呈现界面元素阵列的第二部分。
如果倾斜角度小于或等于阈值,保持界面元素阵列的第一部分相对于屏幕的位置不变,即保持APP界面静止不动,处于初始状态。
当终端发生移动之后,倾斜角度又小于阈值之后,将移动中的界面元素,停止移动,此时终端界面处于一种中间状态。
在某些工作模式中,如图1所示,在界面显示的区域,APP界面元素阵列的第一部分和第二部分分别由不同元素组成,二者之间不存在交叠元素,第一部分和第二部分之间不存在交集。这种模式发生加速度传感器检测到用户对于终端握持状态的较迅速改变,实现了APP界面元素阵列的快速切换。
在另一些工作模式中,如图2所示,APP界面元素阵列的第一部分与第二部分的具有部分共同的元素,即二者之间存在交叠。这种模式可以选择发生在加速度传感器检测到用户对于终端握持状态的相对慢速改变,在该类工作模式下,如果倾斜角度变化大于阈值,通过沿倾斜的方向以一定速度滑动第一部分而接续呈现第二部分。一定速度可以是与倾斜的角度成比例的速度/加速度。
如图3、4所示,第一部分的滑动方向与终端的倾斜方向可以是相同的也可以是相对的。例如,当终端向左倾斜时,第一部分元素阵列向右滑动,从而使接续于第一部分的第二部分从左侧出现得以全部或者部分地展现;当然,当终端向左倾斜时,第一部分元素阵列亦可向左滑动,从而使接续于第一部分的第二部分从右侧出现得以全部或者部分地展现。
APP界面元素的“滑动”的方向也不限于单向。例如,当倾斜达到阈值之后的一段时间中,APP界面元素将沿着固定的方向“滑动”而持续展现被隐藏的元素。此时存在几种工作模式:
(1)用户中止倾斜操作,倾斜角度小于阈值,APP界面元素阵列将立即停止滑动,终端界面所展现的APP元素则暂停在用户停止倾斜操作时界面所显示的元素。
(2)用户中止倾斜操作,倾斜角度小于阈值,APP界面元素阵列将停止滑动,但是由于加速度传感器存在的“惯性”作用,APP 界面元素阵列将继续滑动,此时,终端界面处将根据用户中止倾斜操作的时刻以及滑动速度/加速度执行“回弹”操作,由于惯性作用滑动显示于界面的元素将按照与滑出相反的方向回到未被屏幕显示的部分,而滑出屏幕的元素将会回到屏幕之内。从而使终端界面所展现的APP元素暂停在用户停止倾斜操作时界面所显示的元素。
(3)当然在模式(2)中,用户可以通过设置环境,不执行“回弹”操作,终端界面所展现的APP元素即为滑动停止后展现给用户的元素。
(4)用户持续进行倾斜操作,直到所有元素阵列均展现完毕,此时,元素阵列接到达尾部,APP界面元素阵列将停止滑动,所展现出的元素为APP界面元素阵列的尾部元素。
(5)用户持续进行倾斜操作,直到所有元素阵列均展现完毕,此时,元素阵列接到达尾部,滑动动作发生“反弹”,元素阵列将从阵列尾部开始按照一定速度向着之前的方向滑动。
(6)用户持续进行倾斜操作,直到所有元素阵列均展现完毕,此时,元素阵列接到达尾部,App将最初展现的元素接续到元素阵列的末尾,使整个元素阵列形成环状,循环展示,直到用户中止倾斜操作。
APP界面元素阵列中各元素为被呈现于屏幕上或隐藏于其它屏幕的图标阵列,图标是应用图标、业务入口图标等等。
当图标阵列沿倾斜的方向滑动至其尾部呈现于窗口,在屏幕上呈现反馈元素或反馈数据流。
当图标阵列的尾部呈现于窗口,响应于用户对图标阵列的拖拽,在屏幕上呈现反馈元素或反馈数据流。
在一个实施例中,将第一界面元素阵列呈现在终端的屏幕上,终端响应于屏幕的倾斜,向屏幕的一侧移动第一界面元素阵列;使第二界面元素阵列接续于第一界面元素阵列移入屏幕。
响应于屏幕的倾斜,沿倾斜方向移动第一界面元素阵列,第一界面元素阵列的移动方向可以与屏幕倾斜的方向相同或者相对。例如,当屏幕倾斜向下时,第一界面元素阵列向上移动,从而使第二界面元素从下侧向上移入屏幕内;屏幕倾斜向上时,第一界面元素阵列向下移动,从而使第二界面元素从上侧向下移入屏幕内。当然,亦可设计为,当屏幕倾斜向下时,第一界面元素阵列向下移动,从而使第二界面元素从上侧向下移入屏幕内;屏幕倾斜向上时,第一界面元素阵列向上移动,从而使第二界面元素从下侧向上移入屏幕内。
如果屏幕倾斜消除,则保持第一界面元素阵列相对于屏幕的位置。
响应于屏幕的倾斜,以与倾斜的角度成比例的速度/加速度,沿倾斜方向移动所述第一界面元素阵列。
APP界面元素的“滑动”的方向也不限于单向。例如,当倾斜达到阈值之后的一段时间中,APP界面元素将沿着固定的方向“滑动”而持续展现被隐藏的元素。此时存在几种工作模式:
(1)用户中止倾斜操作,倾斜角度小于阈值,APP界面元素阵列将立即停止滑动,终端界面所展现的APP元素则暂停在用户停止倾斜操作时界面所显示的元素。
(2)用户中止倾斜操作,倾斜角度小于阈值,APP界面元素阵列将停止滑动,但是由于加速度传感器存在的“惯性”作用,APP 界面元素阵列将继续滑动,此时,终端界面处将根据用户中止倾斜操作的时刻以及滑动速度/加速度执行“回弹”操作,由于惯性作用滑动显示于界面的元素将按照与滑出相反的方向回到未被屏幕显示的部分,而滑出屏幕的元素将会回到屏幕之内。从而使终端界面所展现的APP元素暂停在用户停止倾斜操作时界面所显示的元素。
(3)当然在模式(2)中,用户可以通过设置环境,不执行“回弹”操作,终端界面所展现的APP元素即为滑动停止后展现给用户的元素。
(4)用户持续进行倾斜操作,直到所有元素阵列均展现完毕,此时,元素阵列接到达尾部,APP界面元素阵列将停止滑动,所展现出的元素为APP界面元素阵列的尾部元素。
(5)用户持续进行倾斜操作,直到所有元素阵列均展现完毕,此时,元素阵列接到达尾部,滑动动作发生“反弹”,元素阵列将从阵列尾部开始按照一定速度向着之前的方向滑动。
(6)用户持续进行倾斜操作,直到所有元素阵列均展现完毕,此时,元素阵列接到达尾部,App将最初展现的元素接续到元素阵列的末尾,使整个元素阵列形成环状,循环展示,直到用户中止倾斜操作。
APP界面元素阵列中各元素为被呈现于屏幕上或隐藏于其它屏幕的图标阵列,被呈现于所述屏幕上方。图标是应用图标、业务入口图标等等。
当图标阵列沿倾斜的方向滑动至其尾部呈现于窗口,在屏幕上呈现反馈元素或反馈数据流。
当图标阵列的尾部呈现于窗口,响应于用户对图标阵列的拖拽,在屏幕上呈现反馈元素或反馈数据流。
在一个实施例中,将界面元素阵列部分地显示在窗口中;响应于窗口的倾斜,将界面元素阵列滑动显示于窗口。
如果倾斜的角度小于预定阈值,保持界面元素阵列相对于窗口的位置不变。
响应于窗口的倾斜,将界面元素阵列沿倾斜的方向滑动显示于窗口。不失一般性地,界面元素阵列沿倾斜的方向滑动的方向与亦可是相同或者相对的。
响应于所述窗口的倾斜,以与倾斜的角度成比例的速度/加速度,将界面元素阵列沿倾斜的方向滑动显示于窗口中。
APP界面元素的“滑动”的方向也不限于单向。例如,当倾斜达到阈值之后的一段时间中,APP界面元素将沿着固定的方向“滑动”而持续展现被隐藏的元素。此时存在几种工作模式:
(1)用户中止倾斜操作,倾斜角度小于阈值,APP界面元素阵列将立即停止滑动,终端界面所展现的APP元素则暂停在用户停止倾斜操作时界面所显示的元素。
(2)用户中止倾斜操作,倾斜角度小于阈值,APP界面元素阵列将停止滑动,但是由于加速度传感器存在的“惯性”作用,APP 界面元素阵列将继续滑动,此时,终端界面处将根据用户中止倾斜操作的时刻以及滑动速度/加速度执行“回弹”操作,由于惯性作用滑动显示于界面的元素将按照与滑出相反的方向回到未被屏幕显示的部分,而滑出屏幕的元素将会回到屏幕之内。从而使终端界面所展现的APP元素暂停在用户停止倾斜操作时界面所显示的元素。
(3)当然在模式(2)中,用户可以通过设置环境,不执行“回弹”操作,终端界面所展现的APP元素即为滑动停止后展现给用户的元素。
(4)用户持续进行倾斜操作,直到所有元素阵列均展现完毕,此时,元素阵列接到达尾部,APP界面元素阵列将停止滑动,所展现出的元素为APP界面元素阵列的尾部元素。
(5)用户持续进行倾斜操作,直到所有元素阵列均展现完毕,此时,元素阵列接到达尾部,滑动动作发生“反弹”,元素阵列将从阵列尾部开始按照一定速度向着之前的方向滑动。
(6)用户持续进行倾斜操作,直到所有元素阵列均展现完毕,此时,元素阵列接到达尾部,App将最初展现的元素接续到元素阵列的末尾,使整个元素阵列形成环状,循环展示,直到用户中止倾斜操作。
APP界面元素阵列中各元素为被呈现于屏幕上或隐藏于其它屏幕的图标阵列,被呈现于所述屏幕上方。图标是应用图标、业务入口图标等等。
当图标阵列沿倾斜的方向滑动至其尾部呈现于窗口,在屏幕上呈现反馈元素或反馈数据流。
当图标阵列的尾部呈现于窗口,响应于用户对图标阵列的拖拽,在屏幕上呈现反馈元素或反馈数据流。
在一个实施例中,对反馈元素呈现方法进行介绍,包括:将界面元素阵列呈现在终端的屏幕上;响应于终端的加速度或用户对界面元素阵列的拖拽,在屏幕上呈现反馈元素或者反馈数据流。反馈元素呈现步骤还包括:响应于终端的加速度或者用户对界面元素阵列的拖拽,在界面元素阵列的中部、两侧、上方、下方呈现反馈元素。
反馈元素或反馈数据流包括提示信息,游戏入口,周边信息,电子红包,优惠码,电子代金券等等。响应于用户对所述反馈元素的操作,允许所述用户获取反馈内容。
所述加速度由外力致动所述终端而形成。例如用户向某个一方向“甩动”终端,而导致APP界面元素的“滑动”,至阵列末尾从而引发反馈元素或者反馈数据流。
如图5所示,手机的移动方式包括,倾斜,旋转,甩动等等,优选地,是基本沿终端的纵轴倾斜。
图6-图9为将界面阵列元素阵列呈现在终端屏幕上的具体实施方式。
在一个实施例中,在终端上呈现界面元素阵列包括执行如下步骤:
步骤一:初始化传感器,设定设备的初始状态,例如设定水平放置时角度为0°,设定三轴坐标系,本实施例中的坐标系以移动设备左上角原点,水平向右为x轴正方向,竖直向下为y轴正方向,垂直设备向上为z轴正方向。将沿y轴向z轴正方向翘起手机时角度设定为负,反方向角度为正。
通过加速度传感器获取设备当前的旋转角度,每当设备的各个方向加速度变化都会触发传感器,通知App当前传感器的变化。
步骤二:判断角度的绝对值是否大于预设角度,若大于等于预设角度,跳转到步骤三;若小于跳转到步骤四。预设角度根据调查用户习惯、终端类型等综合设定,选择10°至40°的区间,在实施例中优选为30°。
步骤三:设当前角度angle,若angle绝对值大于90,根据其正负将其设定为90或-90。设定元素移动最大速度为Vmax,计算元素移动速度V:
V=angle÷90×Vmax
判断V是否大于元素起始移动速度,若大于,更新当前元素移动速度 Vcurr。若小于,结束当前流程。判断动画运行标记AnimFlag,若为false,并跳转到步骤五,否则结束当前流程。
步骤四:判断当前动画是否正在进行。若正在运行,设置动画运行标记AnimFlag为false,然后结束当前流程。否则直接结束。
步骤五:注册系统绘制的回调方法,准备当前速度下元素的绘制。
步骤六:根据上次动画的执行时间点和当前时间点的差值得出帧时长T,若当前是动画的起始帧,T设定为8-32,在实施例中优选为16。
计算元素当前的移动距离D:
D=Vcurr×T÷16
调用系统方法使元素移动D,正值代表向右移动(系统处理元素达到边缘的状态,达到边缘后不再移动)。
步骤七:读取动画标记AnimFlag,为true时通知系统16ms后仍然需要绘制动画。系统会在下一帧需要绘制时执行步骤五的内容。若 AnimFlag为false,动画结束。
通过以上七个步骤,可以得到“倾斜”、“摇晃”、“甩动”手机等不同用户操作情况下,相应元素左右滑动的效果。T默认为16,若系统每次回调及时可以得到帧率约为60的流畅动画。既能让用户在三维立体空间中操控App,又能满足操控的趣味性。
本发明所设计的活动方案由上述“摇晃”行为所触发,具体触发时机为:
(1)在得到加速度传感器各个方向加速度时,判断x轴、y轴加速度之和,大于20触发活动逻辑。
(2)“倾斜”、“摇晃”、“甩动”设备使内容向x轴负方向滑动,滑动到右边缘,触发活动逻辑。
(3)内容滑动到右边缘后,再次向左拖拽,触发活动逻辑。
触发活动逻辑后,得到反馈元素或反馈数据流,请求服务端,反馈元素或反馈数据流,包括游戏入口,周边信息,在一些实施例中还包括概率性得到电子红包,优惠码,电子代金券等等。
在一个实施例中,用户终端界面是诸如团购App(如百度糯米)首页中的各大分类入口,可以横向分屏翻页。各大分类入口以两行多列布局,超过一屏的分页展示,横向滑动,每次滑动以屏幕宽度为一页,最后一页如果入口数量不足一屏,空白展示。在分类入口的底部,以多个小点代表多页,小点数与页数相同,且对应当前页的小点高亮显示。以一个滚动视图为容器视图,然后分类入口为子视图,添加到滚动容器视图中,先排列第一页,从第一行依次布局到第二行,接着布局第二页,第三页,依次类推,布局完所有分类入口。底部分页指示视图,根据分类入口的页数来确定分页指示视图小点个数,默认高亮第一页对应的指示小点。滚动视图每次滑动翻页时,同时更新底部的分页指示视图对应到当前的页。
然而,上述实施过程的滑动过程中,和常规的滚动视图一样,没有吸引用户的点,第二页之后的分类入口曝光率低。最后一页如果分类入口不满一屏幕的话,尤其是有1、2个时候,屏幕空白太多,视觉效果和界面空间利用都不太好。分类入口多的时候分页造成的底部分页指示视图是不可避免的,如果一个页面有多个分页指示视图的话,视觉上和对用户的感知上都不是太好。
在改进的实施例中,以现有系统提供的一套方便使用的动力学库为基础,来实现分类入口滑动过程中的弹簧吸附效果,通过模拟物理动力学效果,随滚动视图滑动的距离及速度主观去改变所有的分类入口视图的相对位置。
通过模拟物理现实中弹簧和吸附的原理,来实现分类入口视图的动态效果。随着滑动的速度增大,每一列分类入口的初始的拉伸和压缩的幅度将变大。随着每一列分类入口距离屏幕触摸位置越远,拉伸和压缩的幅度越大。
App首次进入首页,滑动视图会自动向左滑动,露出后面的分类入口,然后恢复正常。提示用户后面还有更多的分类入口。
滚动视图容器视图用UICollectionView,分类入口视图用 UIControl。通过继承UICollectionViewCell来布局每一列的分类入口。
通过继承UICollectionViewFlowLayout来实现所有分类入口的布局以及弹簧吸附的效果,初始化的时候,设置好每一列cell相关的影响弹簧吸附效果的弹性(damping)、频率(frequency)、摩擦 (resistance)等参数,每当滚动视图滑动的时候,根据每个cell离手指在屏幕的触摸点的距离结合之前设置的cell相关的影响参数,计算每个cell的新位置,离触摸点距离越远的cell,位置偏移越大,弹簧吸附效果越明显。首次展示分类入口的时候,会自动向左移动两列来提示用户后面还有更多分类入口,是通过做UICollectionView的位置的偏移动画。
该发明的核心是滑动滚动视图的时候,以列为单位的分类入口有仿真的弹簧吸附效果,而且不以分页分屏的方式展示更多分类入口来优化视觉体验。而弹簧吸附效果的实现除了借助系统提供的动力学库,还可以通过去改变所有的分类入口视图的相对位置来实现类似的效果。
滚动容器视图:UIScrollView、UITableView、UICollectionView。
分类入口视图:UIButton、UIControl。
以上所述仅是本发明的优选实施方式,应当指出,对于本技术领域的普通技术人员来说,在不脱离本发明原理的前提下,还可以做出若干改进和润饰,这些改进和润饰也应视为本发明的保护范围。
Claims (25)
1.一种在终端上呈现界面元素阵列的方法,包括:
在所述终端的显示界面范围内,呈现所述界面元素阵列的第一部分;
监测所述终端的倾斜角度;
当所述倾斜的角度大于预设阈值时,使界面元素阵列以与所述倾斜角度呈正比的速度或加速度沿第一方向滑动;
在监测到所述倾斜角度再次小于所述阈值的时刻,使界面元素阵列继续沿第一方向滑动,并以监测到所述倾斜角度再次小于所述阈值的时刻的加速度使所述界面元素以沿所述第一方向相反的方向滑动,以在所述终端显示界面范围内呈现所述界面元素阵列的第二部分;
所述界面元素阵列的第二部分为监测到所述倾斜角度再次小于所述阈值的时刻,所述终端显示界面所显示的元素。
2.如权利要求1所述的在终端上呈现界面元素阵列的方法,其中:当所述倾斜角度小于所述阈值时,保持所述界面元素阵列的所述第一部分相对于屏幕的位置。
3. 如权利要求1或2中任一项所述的在终端上呈现界面元素阵列的方法,其中,所述第一部分与所述第二部分的无交集。
4.如权利要求1或2中任一项所述的在终端上呈现界面元素阵列的方法,其中,所述第一部分与所述第二部分的具有交集,以及
所述界面元素阵列呈现步骤还包括,如果所述倾斜的角度大于所述阈值,通过沿所述倾斜的方向移动所述第一部分而接续呈现所述第二部分。
5.如权利要求1或2所述的在终端上呈现界面元素阵列的方法,其中,所述界面元素阵列为图标阵列,被呈现于屏幕上方。
6.如权利要求4所述的在终端上呈现界面元素阵列的方法,其中,所述界面元素阵列移动步骤还包括,如果所述倾斜角度大于所述阈值,以与所述倾斜的角度成比例的速度/加速度,通过沿所述倾斜的方向移动所述第一部分而接续呈现所述第二部分。
7.一种在终端上呈现界面元素阵列的方法,包括:
将第一界面元素阵列呈现在终端的显示界面范围内;
当屏幕的倾斜大于阈值时,使第一界面元素阵列以与所述倾斜角度呈正比的速度或加速度向所述显示界面的一侧移动所述第一界面元素阵列;
在监测到所述倾斜角度再次小于所述阈值的时刻,使界面元素阵列继续沿第一方向滑动,并以监测到所述倾斜角度再次小于所述阈值的时刻的加速度使所述界面元素以沿所述第一方向相反的方向滑动,以在所述终端显示界面范围内呈现第二界面元素阵列;
所述第二界面元素阵列为监测到所述倾斜角度再次小于所述阈值的时刻,所述终端显示界面所显示的元素。
8.如权利要求7所述的在终端上呈现界面元素阵列的方法,还包括步骤:如所述屏幕倾斜小于所述阈值,则保持所述第一界面元素阵列相对于所述屏幕的位置。
9.如权利要求7或8中任一项所述的在终端上呈现界面元素阵列的方法,其中,所述第一界面元素阵列移动步骤还包括,响应于所述屏幕的倾斜,沿所述倾斜方向移动所述第一界面元素阵列。
10.如权利要求9所述的在终端上呈现界面元素阵列的方法,其中,所述界面元素阵列为图标阵列,被呈现于所述屏幕上方。
11.如权利要求9所述的在终端上呈现界面元素阵列的方法,其中,所述第一界面元素阵列移动步骤还包括,响应于所述屏幕的倾斜,以与所述倾斜的角度成比例的速度/加速度,沿所述倾斜方向移动所述第一界面元素阵列。
12.一种呈现界面元素阵列的终端,所述终端被配置为:
在所述终端的显示界面范围内,呈现所述界面元素阵列的第一部分;
监测所述终端的倾斜角度;
当所述倾斜的角度大于预设阈值时,使界面元素阵列以与所述倾斜角度呈正比的速度或加速度沿第一方向滑动;
在监测到所述倾斜角度再次小于所述阈值的时刻,使界面元素阵列继续沿第一方向滑动,并以监测到所述倾斜角度再次小于所述阈值的时刻的加速度使所述界面元素以沿所述第一方向相反的方向滑动,以在所述终端显示界面范围内呈现所述界面元素阵列的第二部分;
所述界面元素阵列的第二部分为监测到所述倾斜角度再次小于所述阈值的时刻,所述终端显示界面所显示的元素。
13.如权利要求12所述的终端,其被配置为:如果所述倾斜角度小于所述阈值,保持所述界面元素阵列的所述第一部分相对于屏幕的位置。
14.如权利要求12或13所述的终端,其中,所述第一部分与所述第二部分的无交集。
15.如权利要求12或13所述的终端,其中,所述第一部分与所述第二部分的具有交集,以及所述界面元素阵列呈现步骤还包括,如果所述倾斜的角度大于所述阈值,通过沿所述倾斜的方向移动所述第一部分而接续呈现所述第二部分。
16.如权利要求12或13所述的终端,其中,所述界面元素阵列为图标阵列,被呈现于屏幕上方。
17.如权利要求15所述的终端,其被配置为:如果所述倾斜角度大于所述阈值,以与所述倾斜的角度成比例的速度/加速度,通过沿所述倾斜的方向移动所述第一部分而接续呈现所述第二部分。
18.一种呈现界面元素阵列的终端,所述终端被配置为:
将第一界面元素阵列呈现在终端的显示界面范围内;
当屏幕的倾斜大于阈值时,使第一界面元素阵列以与所述倾斜角度呈正比的速度或加速度向所述显示界面的一侧移动所述第一界面元素阵列;
在监测到所述倾斜角度再次小于所述阈值的时刻,使界面元素阵列继续沿第一方向滑动,并以监测到所述倾斜角度再次小于所述阈值的时刻的加速度使所述界面元素以沿所述第一方向相反的方向滑动,以在所述终端显示界面范围内呈现第二界面元素阵列;
所述第二界面元素阵列为监测到所述倾斜角度再次小于所述阈值的时刻,所述终端显示界面所显示的元素。
19.如权利要求18所述的终端,其被配置为:如所述屏幕倾斜消除,则保持所述第一界面元素阵列相对于所述屏幕的位置。
20.如权利要求18或19所述的终端,其被配置为:
响应于所述屏幕的倾斜,沿所述倾斜方向移动所述第一界面元素阵列。
21.如权利要求20所述的终端,其中,所述界面元素阵列为图标阵列,被呈现于所述屏幕上方。
22.如权利要求20所述的终端,其被配置为:响应于所述屏幕的倾斜,以与所述倾斜的角度成比例的速度/加速度,沿所述倾斜方向移动所述第一界面元素阵列。
23.一种存储介质,其上存储有程序,其中,所述程序被执行时实现权利要求1至11任一所述的方法。
24.一种处理器,其用于执行指令,其中,所述指令被执行时实现权利要求1至11任一所述的方法。
25.一种数据处理设备,其包括处理器和存储器,其中,所述存储器上存储有程序,所述程序被所述处理器调用以实现权利要求1至11任一所述的方法。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201610609715.6A CN106293329B (zh) | 2016-07-28 | 2016-07-28 | 一种在终端上呈现界面元素阵列的方法、装置及终端 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201610609715.6A CN106293329B (zh) | 2016-07-28 | 2016-07-28 | 一种在终端上呈现界面元素阵列的方法、装置及终端 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN106293329A CN106293329A (zh) | 2017-01-04 |
CN106293329B true CN106293329B (zh) | 2019-11-22 |
Family
ID=57663173
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201610609715.6A Active CN106293329B (zh) | 2016-07-28 | 2016-07-28 | 一种在终端上呈现界面元素阵列的方法、装置及终端 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN106293329B (zh) |
Families Citing this family (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN107992194B (zh) * | 2017-11-24 | 2020-05-08 | 曾良军 | 显示方法、装置和终端设备 |
CN109814781B (zh) * | 2017-11-22 | 2023-09-08 | 腾讯数码(天津)有限公司 | 页面滑动方法、装置 |
CN112764654B (zh) * | 2021-01-29 | 2022-10-25 | 北京达佳互联信息技术有限公司 | 组件的吸附操作方法、装置、终端及存储介质 |
CN114911406B (zh) * | 2022-06-01 | 2023-10-17 | 北京字节跳动网络技术有限公司 | 一种动效生成方法、装置、介质及设备 |
Citations (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN103019549A (zh) * | 2012-11-28 | 2013-04-03 | 深圳市中兴移动通信有限公司 | 移动终端内容滚动的方法和装置 |
CN103927075A (zh) * | 2014-01-16 | 2014-07-16 | 华为终端有限公司 | 一种界面操作的方法及终端 |
CN104407785A (zh) * | 2013-12-10 | 2015-03-11 | 贵阳朗玛信息技术股份有限公司 | 一种信息展示方法及装置 |
-
2016
- 2016-07-28 CN CN201610609715.6A patent/CN106293329B/zh active Active
Patent Citations (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN103019549A (zh) * | 2012-11-28 | 2013-04-03 | 深圳市中兴移动通信有限公司 | 移动终端内容滚动的方法和装置 |
CN104407785A (zh) * | 2013-12-10 | 2015-03-11 | 贵阳朗玛信息技术股份有限公司 | 一种信息展示方法及装置 |
CN103927075A (zh) * | 2014-01-16 | 2014-07-16 | 华为终端有限公司 | 一种界面操作的方法及终端 |
Also Published As
Publication number | Publication date |
---|---|
CN106293329A (zh) | 2017-01-04 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
US9367233B2 (en) | Display apparatus and method thereof | |
CN106293329B (zh) | 一种在终端上呈现界面元素阵列的方法、装置及终端 | |
EP3180687B1 (en) | Hover-based interaction with rendered content | |
JP5324411B2 (ja) | 広告配信装置、方法及びプログラム | |
US10042546B2 (en) | Systems and methods to present multiple frames on a touch screen | |
CN104106033B (zh) | 应用的缩略图图像选择 | |
KR101814391B1 (ko) | 에지 제스처 기법 | |
US20130117698A1 (en) | Display apparatus and method thereof | |
CN102902480A (zh) | 用于触摸屏的控制区域 | |
US20140210797A1 (en) | Dynamic stylus palette | |
KR101919009B1 (ko) | 안구 동작에 의한 제어 방법 및 이를 위한 디바이스 | |
CN202904550U (zh) | 信息处理装置 | |
US8407608B1 (en) | Touch input assist | |
US10025484B2 (en) | Method and device for controlling user interface | |
CN103098011A (zh) | 项目显示方法和设备 | |
US8386927B1 (en) | Gravity-based link assist | |
US20160077665A1 (en) | Simulating real-time responsiveness for touch displays | |
CN104854549A (zh) | 显示装置及其方法 | |
CN110413187B (zh) | 交互智能设备的批注的处理方法和装置 | |
US9792032B2 (en) | Information processing apparatus, information processing method, and program for controlling movement of content in response to user operations | |
CN103677643A (zh) | 一种基于悬浮触控的屏幕内容局部放大的方法和装置 | |
US9019315B2 (en) | Method of controlling display | |
CN108536361A (zh) | 触控操作的处理方法、装置、存储介质、处理器及终端 | |
JP5563703B2 (ja) | コンテンツ配信装置、コンテンツ配信方法、コンテンツ配信プログラム及び端末用プログラム | |
WO2009119716A1 (ja) | 情報処理システム、情報処理装置、方法及びプログラム |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
C06 | Publication | ||
PB01 | Publication | ||
C10 | Entry into substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
GR01 | Patent grant | ||
GR01 | Patent grant | ||
CP03 | Change of name, title or address |
Address after: Room 202, 2 / F, 1-3 / F, No. 11, Shangdi Information Road, Haidian District, Beijing 100084 Patentee after: Beijing Xingxuan Technology Co.,Ltd. Address before: 100000 Beijing, Haidian District on the road to the information on the ground floor of the 1 to the 3 floor of the 2 floor, room 11, 202 Patentee before: Beijing Xiaodu Information Technology Co.,Ltd. |
|
CP03 | Change of name, title or address |