CN115237304A - 界面显示方法,电子设备以及计算机可读介质 - Google Patents
界面显示方法,电子设备以及计算机可读介质 Download PDFInfo
- Publication number
- CN115237304A CN115237304A CN202110438190.5A CN202110438190A CN115237304A CN 115237304 A CN115237304 A CN 115237304A CN 202110438190 A CN202110438190 A CN 202110438190A CN 115237304 A CN115237304 A CN 115237304A
- Authority
- CN
- China
- Prior art keywords
- display
- picture
- physical
- interface
- user operation
- 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.)
- Pending
Links
Images
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/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/04842—Selection of displayed objects or displayed text elements
-
- 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
-
- 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/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/0485—Scrolling or panning
-
- 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
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Software Systems (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本申请涉及一种界面显示方法以及电子设备和可读介质。在该方法中,电子设备能够获取用户操作在电子设备的屏幕上产生的用户操作数据;利用与用户操作的类型对应的物理规律,对用户操作数据进行计算,得到对应用户操作数据的显示数据;根据显示数据,在电子设备上显示将用户操作数据模拟为遵循物理规律产生的物理现象。通过该方法,电子设备可以预先建立应用的显示界面中的显示元素的显示效果与至少一种物理现象的对应关系。根据电子设备启动应用后加载的显示风格以及用户施加于电子设备的操作自适应地计算出显示元素的显示效果,避免了需要对一个应用的各个显示界面分别配置多种显示效果。
Description
技术领域
本申请涉及电子设备领域的图形界面显示技术。尤其涉及一种界面显示方法,电子设备以及计算机可读介质。
背景技术
为了使应用的显示界面可以适应不同大小的显示区域,需要对应用的显示界面中的显示元素配置不同的布局,这里的布局可以是显示界面中的显示元素的位置。比如,如图1(a)所示,应用的显示界面中包括六个显示元素,这六个显示元素以三行二列的方式显示;而在图1(b)中,这六个显示元素以二行三列的方式显示。同时,应用还可以支持多种显示风格,在不同的显示风格下,应用的显示界面中的显示元素具有不同的显示效果。例如,对于同一应用支持的金属风格和水滴风格两种显示风格来说,显示元素的显示效果中的外观可以分别为具有金属光泽效果和水滴效果。因此对于同一应用,为了适应不同大小的显示区域和应用的不同显示风格,通常需要预先开发布局和显示效果不同的多个显示界面,从而导致开发和维护应用的显示界面的成本较高。
发明内容
本申请的目的在于提供一种界面显示方法,电子设备以及计算机可读介质。通过本申请的方法,可以对施加于应用的显示界面的用户操作对应至少一种物理规律产生的物理现象,并使用该物理规律对应的物理公式,根据应用的显示风格参数对应的物理数据,以及用户施加的用户操作的用户操作数据对应的物理数据,自适应地计算出用户操作的显示效果。
本申请的第一方面提供了一种界面显示方法,应用于电子设备,包括:
获取用户操作在电子设备的屏幕上产生的用户操作数据;
利用与用户操作的类型对应的物理规律,对用户操作数据进行计算,得到对应用户操作数据的显示数据;
根据显示数据,在电子设备上显示将用户操作数据模拟为遵循物理规律产生的物理现象。
即在本申请的实施例中,用户操作数据可以是电子设备通过触摸传感器获取的用户操作的作用力的大小,作用力的方向等;用户操作的类型可以包括:用户在手机的屏幕上对应用的界面的显示元素施加的按压、点击、以及滑动等操作;物理规律可以是与按压、点击、以及滑动等操作对应的物理学公式;显示数据可以是通过物理学公式根据用户操作数据计算出的应用的界面的显示元素的显示效果,该显示效果可以与物理规律对应的物理现象相对应。
例如,以手机为例,当用户在手机的屏幕上对应用的界面的显示元素施加一个按压的用户操作时,手机可以通过触摸传感器获取该按压的用户操作的作用力的大小,即用户操作数据;并通过按压的用户操作对应的弹力公式,即物理规律,根据按压的用户操作的作用力的大小,计算出显示元素在界面内显示一个下沉的显示效果,即显示数据,手机将施加的按压的用户操作模拟为弹力公式对应的弹簧受压而产生的压缩变形的物理现象。
在上述第一方面的一种可能的实现中,用户操作包括按压、点击、以及滑动中的至少一种。
即在本申请的实施例中,按压、点击、以及滑动的用户操作可以是用户对电子设备的屏幕施加的。
在上述第一方面的一种可能的实现中,对应按压的物理现象包括下压、变形、回弹中的至少一种;
对应点击的物理现象包括跳转以及跳动中的至少一种;
对应滑动的物理现象包括滑动、滚动、原地旋转、翻页中的至少一种。
即在本申请的实施例中,可以将按压的用户操作模拟为弹力公式对应的弹簧受压而产生的压缩变形的物理现象;将滑动的用户操作模拟为摩擦力公式以及速度/加速度公式对应的物体产生位移的物理现象。
在上述第一方面的一种可能的实现中,电子设备通过以下方式计算显示数据:
将用户操作数据转换为对应物理规律的物理数据,并获取与电子设备的显示风格参数对应的物理系数;
基于物理数据和物理系数计算显示数据。
即在本申请的实施例中,例如,对于按压操作的物理数据,可以是电子设备可以通过触摸传感器获取的按压操作的作用力的大小;对于显示风格参数对应的物理系数,包括在一种显示风格下,界面内的显示元素的重量,滑动系数以及弹性系数中的至少一种,电子设备通过按压操作对应的弹力公式,如:作用力=弹性系数*距离,计算出显示元素显示的下压的显示效果的距离。
在上述第一方面的一种可能的实现中,物理数据包括作用力大小、作用时长作用力的位移中的至少一个,其中,用户对电子设备的屏幕所施加的按压、点击以及滑动的作用力与物理数据对应。
在上述第一方面的一种可能的实现中,物理系数包括重量、摩擦系数、弹性系数中的至少一个;其中显示风格参数不同,用户操作的对象的重量、摩擦系数或者弹性系数不同。
即在本申请的实施例中,在显示风格为“金属风格”的情况下,显示风格参数中包含的弹性系数可以是100N/M;对于显示风格为“水滴风格”,显示风格参数中包含的弹性系数可以是200N/M。
在上述第一方面的一种可能的实现中,物理规律包括摩擦力公式、加速度公式,以及弹力公式中的至少一个。
本申请的第二方面提供了一种电子设备,其特征在于,包括:
存储器,存储有指令;
处理器,处理器和存储器耦合,当存储器存储的程序指令被处理器执行时使得电子设备执行以下操作:
获取用户操作在电子设备的屏幕上产生的用户操作数据;
利用与用户操作的类型对应的物理规律,对用户操作数据进行计算,得到对应用户操作数据的显示数据;
根据显示数据,在电子设备上显示将用户操作数据模拟为遵循物理规律产生的物理现象。
在上述第二方面的一种可能的实现中,用户操作包括按压、点击、以及滑动中的至少一种。
在上述第二方面的一种可能的实现中,对应按压的物理现象包括下压、变形、回弹中的至少一种;
对应点击的物理现象包括跳转以及跳动中的至少一种;
对应滑动的物理现象包括滑动、滚动、原地旋转、翻页中的至少一种。
在上述第二方面的一种可能的实现中,电子设备通过以下方式计算显示数据:
将用户操作数据转换为对应物理规律的物理数据,并获取与电子设备的显示风格参数对应的物理系数;
基于物理数据和物理系数计算显示数据。
在上述第二方面的一种可能的实现中,物理数据包括作用力大小、作用时长作用力的位移中的至少一个,其中,
用户对电子设备的屏幕所施加的按压、点击以及滑动的作用力与物理数据对应。
在上述第二方面的一种可能的实现中,物理系数包括重量、摩擦系数、弹性系数中的至少一个;其中显示风格参数不同,用户操作的对象的重量、摩擦系数或者弹性系数不同。
在上述第二方面的一种可能的实现中,物理规律包括摩擦力公式、加速度公式,以及弹力公式中的至少一个。
本申请的第三方面提供了一种计算机可读介质,其特征在于,所述计算机可读介质上存储有指令,该指令在电子设备上执行时使电子设备执行第一方面的界面显示方法。
第四方面,本申请实施例提供一种芯片***,该芯片***应用于包括上述触摸屏的电子设备。该芯片***包括一个或多个接口电路和一个或多个处理器。该接口电路和处理器通过线路互联。该接口电路用于从电子设备的存储器接收信号,并向处理器发送该信号,该信号包括存储器中存储的计算机指令。当处理器执行计算机指令时,电子设备执行上述任意方面及其任一种可能的实施方式的方法。
第五方面,本申请实施例提供一种计算机程序产品,当计算机程序产品在计算机上运行时,使得计算机执行上述任意方面及其任一种可能的实施方式的方法。
附图说明
图1(a)和图1(b)示出了现有技术中电子设备的应用在屏幕尺寸不同的电子设备的屏幕中的显示界面;
图2(a)和图2(b)根据本申请实施例示出了中电子设备的应用在屏幕尺寸不同的电子设备的屏幕中的显示界面;
图3(a)、图3(b)和图3(c)根据本申请实施例示出了对图库应用的图片详细界面的设置默认显示界面的过程;
图4(a)和图4(b)根据本申请实施例示出了用户对图库应用的图片详细界面的显示区域执行放大区域操作的过程;
图5根据本申请实施例示出了的电子设备的结构示意图;
图6根据本申请实施例示出了的电子设备的软件结构框图;
图7根据本申请实施例示出了对图库应用的图片一览界面设置默认显示界面的过程;
图8(a)和图8(b)根据本申请实施例示出了图库应用的图片一览界面的显示界面;
图9(a)和图9(b)根据本申请实施例示出了电子显示图库应用的显示界面,以及响应于用户的用户操作而产生显示效果的流程图;
图10(a)、图10(b)和图10(c)根据本申请实施例示出了用户在图库应用的图片一览界面中执行按压的用户操作的过程;
图11(a)、图11(b)和图11(c)根据本申请实施例示出了用户对图库应用执行了显示风格的切换操作的过程;
图12(a)和图12(b)根据本申请实施例示出了用户在图库应用的图片一览界面中执行了一个滑动的用户操作的过程;
图13(a)和图13(b)根据本申请实施例示出了用户在图库应用的图片一览界面中执行了一个下滑的用户操作的过程;
图14(a)、图14(b)和图14(c)根据本申请实施例示出了用户对图库应用的图片一览界面执行的扩大的用户操作的过程;
图15(a)和图15(b)根据本申请实施例示出了一种从图库应用的图片一览界面切换至图片详细界面的过程;
图16(a)和图16(b)根据本申请实施例示出了另一种从图库应用的图片一览界面切换至图片详细界面的过程;
具体实施方式
本申请的实施例包括但不限于一种界面显示方法,计算机可读介质和电子设备。为使本申请的目的、技术方案和优点更加清楚,下面将结合附图对本申请的实施方式作进一步地详细描述。
为了解决需要为同一应用开发多个具有不同的布局以及不同的显示效果的显示界面的问题,本申请提供了一种界面显示方法。在本申请的实施例中,电子设备在安装了应用之后,会预先为应用的各个显示界面生成对应的默认显示界面,其中,在默认显示界面中,会从默认显示界面中所包括的多个显示元素中选择一个中心显示元素,默认显示界面中其他的显示元素的位置相对于该中心显示元素的位置而配置,即默认显示界面中各显示元素具有相对位置。
而在电子设备启动该应用之后,电子设备会根据该应用的显示界面的显示区域的大小,确定中心显示元素的绝对位置以及其他显示元素相对于中心显示元素的绝对位置。同时,在用户调整显示界面的显示区域的大小或者调整显示界面中显示元素的大小时,电子设备可以动态调整各个显示元素的位置。
此外,对于用户对应用显示界面的各种用户操作,电子设备还可以通过模拟客观世界中的物理规律生成响应用户操作的显示效果。例如,当用户按压应用界面的显示元素时,如按压某个图标时,可以根据用户按压的力度不同,让图标产生不同的形变或者变形大小,而形变大小与用户按压力度之间的关系,可以通过类似弹力公式的物理公式来确定。再例如,当用户滑动应用界面的某个图标时,可以根据用户手指滑动力度的不同,让图标滚动不同的距离,而滚动距离与手指滑动力度之间的关系,可以根据类似摩擦力公式的物理公式来确定。此外,对应应用的不同显示效果,用户对图标的同一用户操作可以产生不同显示效果,或者说产生不同的物理现象。具体方案将在下文进行详细的描述。
可以理解,在本申请的实施例中,应用显示界面中的显示元素可以是,应用的显示界面中的按键,文本框,图片,下拉框等。
此外,可以理解,在本申请实施例中,物理规律是指类似摩擦力公式、速度/加速度公式,以及弹力公式等的物理学公式,或者基于物理规律建立数据处理模型。
此外,可以理解,在本申请实施例中,电子设备上显示的显示元素的物理现象是指响应于用户操作,显示元素所表现出来的一种显示效果,如下压、变形、回弹、跳转、跳动、滑动、滚动等显示效果。
下面以电子设备为手机100,应用为图库应用101为例,通过对图库应用101的图片详细界面1012设置一个默认显示界面,默认显示界面中图片详细界面1012的显示元素具有默认位置;当手机100打开并显示图片详细界面1012时,手机100根据显示图片详细界面1012在手机100的屏幕中的显示区域动态调整图片详细界面1012中各个显示元素的位置的场景进行说明。
图2(a)至图2(b)示出了,手机100打开并显示图片详细界面101的过程,如图2(a)所示,响应用户点击的桌面上的图库应用101的图标的操作后,手机100启动了图库应用101。如图2(b)所示,手机100在屏幕内显示图库应用101的图片一览界面1011,图片一览界面1011可以包括图片10111至图片10116的缩略图。如果手机100的用户想要浏览图片10112的详情,则在用户点击了图片10112的缩略图后,手机100可以跳转并显示图片10112对应的图片详细界面1012。
在手机100打开并显示图片详细界面1012之前,如图3(a)所示,手机100可以对图片详细界面1012生成一个默认显示界面,默认显示界面包括:图片10121,图片详情10122,“详情”按钮10123以及“下一张”按钮10124四个显示元素;在默认显示界面中,手机100可以将图片10121配置为中心显示元素并配置图片10121的位置,图片详情10122,“详情”按钮10123以及“下一张”按钮10124基于图片10121的位置按从左至右顺序排列。
手机100打开并显示图片详细界面1012之后,在图片详细界面1012的显示区域的大小为手机100的整个屏幕时,手机100根据屏幕的大小动态调整图片详细界面1012中的显示元素的位置,使得图片详细界面1012中的显示元素的位置与默认显示界面中的不同,例如,如图3(b)所示,在图库应用101的图片详细界面1012中,图片10121,图片详情10122,“详情”按钮10123以及“下一张”按钮10124可以呈上下顺序排列。
可以理解,在图片详细界面1012的显示区域的大小为手机100的屏幕中的一个局部区域时,如图3(c)所示,手机100打开并在屏幕通过悬浮窗的方式显示图库应用101的图片详细界面1012,这时,图片详细界面1012中的显示元素的位置也可以与图3(b)所示的图片详细界面1012中的不同,例如,在图3(c)的图片详细界面1012中图片详情10122,“详情”按钮10123以,“下一张”按钮10124以及图片10121可以呈左右排列。
可以理解,在本申请的实施例中,对于应用的显示界面中的显示元素的类型和数量都是示例性的,也就是说,可以包括其他任意数量和类型的显示元素。例如,在图3(a)至图3(c)中的默认显示界面中,除了包括上述显示元素10121至10124,在一些实施例中,还可以包括其他数量和类型的显示元素,对此不做限定。
此外,在手机100在响应于用户执行的缩小或者放大图片详细界面1012的显示区域的大小的操作,或者用户将显示元素的大小调大/调小的操作后,手机100也可以动态调整图库应用101的图片详细界面1012中的各个显示元素的位置。例如,如图4(a)所示,手机100响应于用户执行的放大图片详细界面1012的显示区域的大小的操作,如图4(b)所示,手机100使得图片详细界面1012中的图片10121,图片详情10122,“详情”按钮10123以及“下一张”按钮10124再次呈上下排列。
此外,如前所述,在一些实施例中,手机100在安装了图库应用101之后,还会为图库应用101的各个显示界面生成显示风格模型,也就是数据处理模型,该显示风格模型将施加于显示界面的用户操作对应至少一种物理规律产生的物理现象,并可以根据图库应用101打开之后加载的默认的显示风格参数或者说用户选择的显示风格参数对应的物理数据,以及用户施加的用户操作的用户操作数据对应的物理数据,动态地计算出图库应用101的各个显示界面的显示效果。
例如,手机100还可以对图片详细界面1012的图片10121配置一个按压操作的显示效果的显示风格模型,使得图片10121可以响应于一个用户作用于图片10121的按压操作显示的下压并回弹效果。例如,按压回弹的显示风格模型可以是模拟了弹簧的原理,利用了弹力公式,例如,作用力=弹性系数*距离。这里的作用力可以是手机100通过触摸传感器获取的用户的按压操作的作用力,例如:作用力=2N,N可以是力学单位牛顿(N);弹性系数可以是图库应用101的显示风格的显示风格参数对应的物理数据,例如,在显示风格为“金属风格”的情况下,显示风格参数对应的物理数据可以包括,例如,弹性系数:100N/M,N/M可以是弹性进度单位牛顿(N)/米(M)。通过上述显示风格模型,手机100可以计算出图片10121响应于按压操作而显示一个向屏幕内测位移距离0.01M的下压效果;在用户的按压操作的结束后,图片10121可以回弹至原来的位置。
通过本申请的方法,在电子设备安装了应用后,电子设备可以对应用的各个显示界面预先生成一个默认显示界面,在电子设备启动应用后,电子设备可以根据各个显示界面的显示区域的大小动态地调整显示界面中的显示元素的布局。此外,电子设备还可以预先对应用的显示界面配置显示风格模型,在电子设备启动应用后,电子设备可以根据用户施加的用户操作以及加载的应用的显示风格参数或者用户选择的显示风格参数,动态地计算出显示元素的显示效果。如此,避免了需要对一个应用的各个显示界面分别配置多个布局和显示效果。
本申请的实施例中的电子设备100可以是各种电子设备,例如,电子设备100包括但不限于,膝上型计算机、台式计算机、平板计算机、手机、服务器、可穿戴设备、头戴式显示器、移动电子邮件设备、便携式游戏机、便携式音乐播放器、阅读器设备、或能够访问网络的其他电子设备。在一些实施方式中,本申请的实施例也可以应用于由用户穿戴的可穿戴设备。例如,智能手表、手环、首饰(例如,做成诸如耳环、手镯等装饰性物品的设备)或眼镜等,或者作为手表、手环、首饰或眼镜等的一部分。下面以电子设备100是手机100为例进行说明。
可以理解,上述应用的显示区域的可以是电子设备100的屏幕,也可以是电子设备100的屏幕中的局部区域,显示风格参数可以包括:显示元素的比重,滑动系数等。
可以理解,手机100上可以安装有各种应用,例如,图库应用,视频会议应用,即时聊天应用,视频播放应用以及导航应用等,这些应用可以采用本申请的技术方案对应用的显示界面进行布局。
图5示出了根据本申请的实施例的手机100的结构示意图。
手机100可以包括处理器110,屏幕111,内部存储器120,接口模块130,电源模块140,无线通信模块150,移动通信模块160,音频模块170,摄像头180,触摸传感器190。
可以理解的是,本申请实施例示意的结构并不构成对手机100的具体限定。在本申请另一些实施例中,手机100可以包括比图示更多或更少的部件,或者组合某些部件,或者拆分某些部件,或者不同的部件布置。图示的部件可以以硬件,软件或软件和硬件的组合实现。
处理器110可以包括一个或多个处理单元,例如:处理器110可以包括应用处理器(application processor,AP),调制解调处理器,图形处理器(graphics processingunit,GPU),图像信号处理器(image signal processor,ISP),控制器,视频编解码器,数字信号处理器(digital signal processor,DSP),基带处理器,和/或神经网络处理器(neural-network processing unit,NPU)等。其中,不同的处理单元可以是独立的器件,也可以集成在一个或多个处理器中。
处理器110中还可以设置存储器,用于存储指令和数据。在本申请的实施例中,处理器110可以执行对应用的界面显示方法。
屏幕111用于显示图像,视频等。在本申请的实施例中,手机100可以根据应用的显示界面在屏幕111中的显示区域的大小,动态地调整应用的显示界面中各显示元素的位置。
内部存储器120可以用于存储计算机可执行程序代码,可执行程序代码包括指令。内部存储器120可以包括存储程序区和存储数据区。其中,存储程序区可存储操作***,至少一个功能所需的应用程序(比如声音播放功能,图像播放功能等)等。存储数据区可存储手机100使用过程中所创建的数据(比如音频数据,电话本等)等。在本申请的实施例中,内部存储器120中可以存储应用的显示风格参数以及应用的显示界面中的显示元素的布局规则和显示元素的显示风格模型。这里的布局规则用于配置应用的默认显示界面。
接口模块130可以用于连接外部存储卡,例如Micro SD卡,实现扩展手机100的存储能力。外部存储卡通过接口模块130与处理器110通信,实现数据存储功能。例如将音乐,视频等文件保存在外部存储卡中。
电源模块140接收电池的输入,为处理器110,内部存储器120,显示屏111等供电。
无线通信模块150可以提供应用在手机100上的包括无线局域网(wireless localarea networks,WLAN)(如无线保真(wireless fidelity,Wi-Fi)网络),蓝牙(bluetooth,BT),全球导航卫星***(global navigation satellite system,GNSS),调频(frequencymodulation,FM),近距离无线通信技术(near field communication,NFC),红外技术(infrared,IR)等的无线通信的解决方案。
移动通信模块160可以提供应用在手机100上的包括2G/3G/4G/5G等无线通信的解决方案。
手机100通过GPU,显示屏111,以及应用处理器等实现显示功能。
音频模块170用于将数字音频信息转换成模拟音频信号输出,也用于将模拟音频输入转换为数字音频信号。音频模块170还可以用于对音频信号编码和解码。在一些实施例中,音频模块170可以设置于处理器110中,或将音频模块170的部分功能模块设置于处理器110中。
手机100可以通过摄像头180以及应用处理器等实现拍摄功能。
触摸传感器190,也称“触控器件”。触摸传感器190可以设置于屏幕111,由触摸传感器190与屏幕111组成触摸屏,也称“触控屏”。在本申请的实施例中,触摸传感器190用于识别用户在手机100的屏幕111上执行的用户操作以及获取用户操作的物理数据,例如,物理数据为用户操作包含的作用力,作用方向等。
图6是本发明实施例的手机100的软件结构框图。
如图6所示,手机100可以分为应用程序层,应用程序框架层,安卓运行时(Androidruntime)和***库,以及内核层。
其中,应用程序层可以包括一系列应用程序包。
如图6所示,应用程序包可以包括相机,图库,日历,通话,地图,导航,WLAN,蓝牙,音乐,视频,短信息等应用程序。在本申请的实施例中,应用程序包可以包括图库应用101等。
应用程序框架层可以包括视图***,手势识别***等。
在本申请的实施例中,手势识别***用于识别用户在手机100的屏幕上对图库应用101执行的用户操作。
视图***包括可视控件,例如显示文字的控件,显示图片的控件等。视图***可用于构建应用的显示界面。显示界面可以由一个或多个显示元素组成的,这里显示元素是指在电子设备的屏幕中,应用的显示界面中的元素。例如,显示元素可以包括按钮、文本、图片、弹窗、菜单、标题栏、列表或者搜索框等。应用的显示界面可以包括至少一个显示元素。在本申请的实施例中,视图***可以用于实现本申请的应用的显示界面的布局方案,例如,在应用启动时,视图***可以基于应用的显示界面在手机100的屏幕111中的显示区域的大小,动态地调整显示界面中显示元素的位置;同时,视图***还可以对应用的显示界面配置显示风格模型,并在应用启动时,视图***使用应用的显示风格参数通过显示风格模型计算出显示界面中显示元素的显示效果。
Android Runtime包括核心库和虚拟机。Android runtime负责安卓***的调度和管理。
核心库包含两部分:一部分是java语言需要调用的功能函数,另一部分是安卓的核心库。
应用程序层和应用程序框架层运行在虚拟机中。虚拟机将应用程序层和应用程序框架层的java文件执行为二进制文件。虚拟机用于执行对象生命周期的管理,堆栈管理,线程管理,安全和异常的管理,以及垃圾回收等功能。
***库可以包括多个功能模块。例如:表面管理器(surface manager),媒体库(Media Libraries),三维图形处理库(例如:OpenGL ES),2D图形引擎(例如:SGL)等。
表面管理器用于对显示子***进行管理,并且为多个应用程序提供了2D和3D图层的融合。
媒体库支持多种常用的音频,视频格式回放和录制,以及静态图像文件等。媒体库可以支持多种音视频编码格式,例如:MPEG4,H.264,MP3,AAC,AMR,JPG,PNG等。
三维图形处理库用于实现三维图形绘图,图像渲染,合成,和图层处理等。
2D图形引擎是2D绘图的绘图引擎。
内核层是硬件和软件之间的层。内核层至少包含显示驱动,摄像头驱动,音频驱动,传感器驱动。
在本申请的实施例中,一个应用可以包括多个显示界面,例如,图库应用101,可以包括图片一览界面1011以及图片详细界面1012。在手机100在安装了图库应用101之后,手机100对图库应用101的每个显示界面配置一个默认显示界面以及为每个显示界面的显示效果配置显示风格模型,下面以图片一览界面1011为例进行说明。图5所示的方案可以通过手机100的处理器110调用相关程序来实现。
具体地,如图7所示,上述界面显示方法的方案包括:
图7示出了为图片一览界面1011设置默认显示界面的过程。如图所示,包括:
S701:获取图片一览界面1011包括的显示元素。
例如,如图8(a)所示,手机100在图库应用101的图片一览界面1011存在6个显示元素,图片10111至图片10116。
S702:确定中心显示元素。
手机100将图片10111作为图片一览界面1011中的中心显示元素,手机100可以将图片10111在图片一览界面1011中的相对位置配置为:左:显示区域的宽度*1/6;右:显示区域的宽度*5/6;上:显示区域的高度*3/10;下:显示区域的高度*7/10。这里的相对位置,也就是图片10111的中心在图片一览界面1011的显示区域中的位置。可以理解,这里的显示区域可以是手机100的屏幕中的一个局部区域,也可以是手机100的整个屏幕。
S703:配置其他显示元素相对于中心显示元素的位置。
对于图片10112至图片10116,以图片10112为例,手机100可以将图片10112的相对位置配置为,“序号:2;间隔:30”,其中,“序号:2”表示图片10112可以是图片一览界面1011中的第二个显示元素,且与作为中心显示元素的图片10111相邻,“间隔:30”表示图片10112与图片10111间隔30个像素点。
除了上述的相对位置,手机100对图片10111至图片10116还可以配置,例如,大小:160×250。
可以理解,通过在图片一览界面1011中先设置一个中心显示元素,然后配置其他显示元素相对于中心显示元素的相对位置,使得图片一览界面1011中的显示元素可以在不同尺寸的显示区域中呈现适应于该显示区域的布局,而无需对图片一览界面1011配置多个布局。
S704:配置显示界面中显示元素的显示效果的显示风格模型。
在本申请的实施例中,显示元素的显示效果可以是该显示元素响应于用户的一个用户操作而显示的显示效果,例如,图片10112可以响应于用户的按住的用户操作,显示一个下压并回弹的显示效果,即图片10112可以呈现一个弹簧的显示效果。手机100可以对图片10112配置一个用于显示下压并回弹的显示效果的显示风格模型,例如:该显示风格模型可以是,作用力=弹性系数*距离,其中,作用力可以是手机100通过触摸传感器获取的用户的按压操作的作用力,弹性系数可以是图库应用101的显示风格的显示风格参数对应的物理数据。手机100可以通过该显示风格模型计算出图片10112的下压的显示效果。
在本申请的实施例中,显示元素的显示效果还可以是一个显示元素相对于另一个显示元素的显示效果。例如,图片10112响应于用户的按住滑动的用户操作,滑动至图片10113,则图片10112可以以滑动的显示效果在图片一览界面1011的显示界面内滑动至图片10113的位置,同时,图片10113可以通过相同的滑动的显示效果以相反的方向滑动至图片10112的位置。上述滑动的用户操作对应的显示效果的显示风格模型可以是,例如,加速度=(作用力-比重*滑动系数)/比重;速度=加速度*滑动时长,其中,作用力可以是用户滑动图片10112的作用力,比重和滑动系数可以是图库应用101的显示风格对应的显示风格参数对应的物理数据。手机100通过加速度计算出滑动图片10112的速度,以显示一个图片10112以该速度滑动的显示效果。
手机100通过上述S701至S704对图库应用101的图片一览界面1011的显示元素配置相对位置和显示效果的显示风格模型后,手机100可以响应于用户的启动操作启动图库应用101,并在屏幕的显示区域内显示图库应用101的显示界面。下面通过图9(a)和图9(b)来说明手机100在屏幕的显示区域内显示图库应用101的显示界面,并响应用户对图库应用101的显示界面中的显示元素执行一个用户操作使得该显示元素产生显示效果为例,来详细说明使用本申请提供的界面显示方法。其中图9(a)和图9(b)所示的方案可以通过手机100的处理器110调用相关程序,例如视图***实现。如9(a)所示,本申请的实施例中的图库应用101的界面显示方法包括:
S901:检测到用户打开应用的操作。
手机100可以响应于用户点击手机100的桌面,也就是手机100的用户界面(userinterface,UI)中的“图库”图标,手机100接收到用户点击操作的指令后,手机100启动图库应用101。
S902:获取应用的第一显示界面的显示区域的大小。
这里的显示区域可以是手机100的屏幕,也可以是手机100的屏幕中的局部区域。下面以显示区域为手机100的屏幕为例进行说明,显示区域的大小可以是显示区域的分辨率,分辨率可以用像素点来衡量的。分辨率的数值可以是显示区域内水平像素点和垂直像素点的数量。例如:对于600×800的分辨率的显示区域,也就是说,显示区域内水平方向的显示长度为600个像素点,垂直方向的显示长度为800个像素点。通过获取显示区域的大小,以便于后续步骤中确定出显示元素在显示区域的位置。
S903:根据显示区域的大小对第一显示界面的显示元素进行调整并显示第一显示界面。
例如,这里的第一显示界面可以是图片一览界面1011,在手机100启动图库应用101后,图库应用101可以打开并显示图片一览界面1011。手机100可以根据S902中的显示区域的大小,调整图库应用101的图片一览界面1011中的中心显示元素的布局。
这里,图片一览界面1011中预设的中心显示元素可以是图片10111,图片10111的布局可以如图8(b)所示,在手机100的屏幕是600×800的分辨率的情况下,根据上述步骤S702中对图片10111的配置,图片10111的位置可以是,左:100;右:500;上:250;下:550,表示图片10111的中心与手机100的屏幕的左边界,右边界,上边界和下边界的距离分别是100个像素点,500个像素点,250个像素点以及550个像素点。可以理解,在手机100的屏幕的分辨率是其他数值的情况下,图片一览界面1011中预设的中心显示元素的位置也可以与上述的位置不同。
在手机100调整完图片10111的布局后,手机100同时还可以对图片10111的大小进行调整,例如,将图片10111的大小调整为160×250,使得图片10111的中心在图片一览界面1011中相对于图片一览界面1011的显示区域左边界,右边界,上边界和下边界的距离分别是100个像素点,500个像素点,250个像素点以及550个像素点的位置,占据一个160×250大小的区域。
在手机100调整完图库应用101的图片一览界面1011中的中心显示元素的布局后,手机100根据中心显示元素调整图片一览界面1011中的其他的显示元素。这里,以图片10111和图片10112为例进行说明。手机100可以根据步骤S702中描述的,图片10112包括的“序号:2;间隔:30”的属性,确定图片一览界面1011中的图片10112的位置。
例如,图片10111的中心相对于图片一览界面1011的左边界,右边界,上边界和下边界的距离分别是100个像素点,500个像素点,250个像素点以及550个像素点的位置,则对于与图片10111相邻的图片10112,图片10112的位置可以是图片10112的中心相对于图片一览界面1011的左边界,右边界,上边界和下边界的距离分别是300个像素点,300个像素点,250个像素点以及550个像素点。
可以理解,对于图片一览界面1011中的图片10113至图片10116,手机100可以按顺序依次确定图片10113至图片10116的位置。
通过在图片一览界面1011中先确定中心显示元素,图片10111的位置,然后确定图片10112至图片10116相对于图片10111的相对位置,使得图片一览界面1011中的图片10111至图片10116在600×800的显示区域中呈两行三列的布局。
S904:加载应用的显示风格参数。
在本申请的实施例中,在手机100启动图库应用101的同时,手机100还可以获取图库应用101对应的显示风格。在手机100确定了图库应用101的图片一览界面1011中的显示元素的位置后,手机100可以使用图库应用101的显示风格对应的显示风格参数,对图片一览界面1011中的显示元素进行配置。
例如,在图库应用101的显示风格为“金属风格”的情况下,手机100可以获取与显示风格为“金属风格”对应的显示风格参数,该显示风格参数可以用于配置图库应用101的显示元素的显示效果。例如:显示风格参数可以包括:比重为2,滑动系数为0.15,弹性系数为100N/M等。这里的显示风格参数可以存储于手机100的内部存储器120中。
S905:显示调整后的第一显示界面。
手机100通过上述S901至S904调整完图库应用101的图片一览界面1011的显示元素的位置以及配置完图片一览界面1011的显示元素的显示风格参数后,在屏幕111中显示图片一览界面1011。
S906:检测是否存在对第一显示界面的用户操作。
手机100可以检测用户是否对图片一览界面1011执行了用户操作,如果是,则手机100执行S907,手机100响应于对第一显示界面的用户操作改变显示元素的位置或者使得显示元素显示至少一个显示效果,如果否,则手机100继续回到S906,保持检测。
S907:响应于用户操作改变显示元素的位置或者显示显示元素的显示效果。
本申请的一个实施例中,图片一览界面1011的用户操作可以是用户对图片一览界面1011的显示元素执行的用户操作,手机100可以响应于该用户操作,改变一个或者多个显示元素在图片一览界面1011中的位置;在显示元素的位置发生变化的过程中,显示元素还可以显示至少一个显示效果。
例如,如图10(a)至图10(c)以及图12(a)至图12(b)所示,手机100可以响应于用户对图片一览界面1011中的图片10112执行一个按住并滑动至图片10113的位置的用户操作,使得图片一览界面1011中的图片10112和图片10113交换位置。在上述过程中,当手机100响应于用户按压图片10112的用户操作时,图片10112会根据步骤S904加载的显示风格参数,通过按住的用户操作对应的显示风格模型,计算并显示一个与按住的用户操作对应的显示效果;而在用户滑动图片10112时,图片10112会根据步骤S904加载的显示风格参数,通过滑动的用户操作对应的显示风格模型,产生一个响应于滑动的用户操作的显示效果,以及在图片10112和图片10113交换位置时,图片10112和图片10113之间会根据步骤S904加载的显示风格参数产生一个交换位置的显示效果。改变显示元素的位置或者显示显示元素的显示效果的过程可以通过下文的S907a至S907d来实现。
S908:响应于切换应用的显示风格的操作,加载应用的显示风格。
在本申请的实施例中,在手机100通过上述S901至S904调整完图库应用101的图片一览界面1011的显示元素的位置以及配置完图片一览界面1011的显示元素的显示风格参数后,在屏幕111中显示图片一览界面1011后,手机100可以响应于用户执行的显示风格的切换操作,切换图库应用101的显示风格。例如,如图11(a)至图11(c)所示,用户触碰图库应用101的图片一览界面1011的右上方以显示图库应用101的工具栏1111,在工具栏1111中点击选择显示风格的选项,从选项中选择与当前的显示风格“金属风格”不同的“水滴风格”后,手机100使用“水滴风格”对应的显示风格参数重新设置图库应用101的图片一览界面1011的显示元素。例如,手机100除了将显示元素的外观切换至“水滴风格”对应的外观之外,手机100还可以获取与显示风格为“水滴风格”对应的显示风格参数,该显示风格参数可以用于配置图库应用101的显示元素的显示效果。这里的“水滴风格”对应的显示风格参数可以与“金属风格”的不同,例如:“水滴风格”的显示风格参数可以包括:比重为3,滑动系数为0.30等。
在手机100通过步骤S908切换了图库应用101的显示风格后,手机100回到步骤S906,继续检测是否存在对第一显示界面的用户操作,如果存在,则手机100执行S907,响应于用户对第一显示界面中的显示元素的用户操作,使用“水滴风格”的显示风格参数,通过显示风格模型计算显示元素的显示效果。
这里,通过步骤S904至S908,手机100可以对图库应用101的显示界面中的显示元素只设置一次显示风格模型,从而避免了对于不同的显示风格还需要设置不同的显示效果。在图库应用101每次切换显示风格后,根据切换后的显示风格对应的显示风格参数,使用显示风格模型计算出显示元素的不同的显示效果。
下面对步骤S907的内容进行详细介绍,如9(b)所示,手机100执行步骤S907的过程包括:
S907a:获取用户操作的物理数据。
手机100通过自身的触摸传感器180K获取用户操作的物理数据,这里的用户操作的物理数据可以包括用户操作的种类和/或用户操作的作用力。例如,如图10(a)所示的用户按压图片10112的用户操作,以及如图12(a)所示的滑动图片10112的用户操作,手机100可以通过自身的触摸传感器180K获取上述两个用户操作的作用力。本申请可以采用物理领域力学概念来模拟用户触摸操作所产生的作用力,例如,用户按压图片10112的用户操作以及滑动图片10112的用户操作的作用力可以分别是,例如,作用力1=1N,作用力2=2N。可以理解,这里的N可以是力学单位牛顿(N),在本申请的一些实施例中,还可以对作用力使用其他单位来计算,对此不做限定。
S907b:根据用户操作的物理数据以及显示风格参数通过显示风格模型确定显示元素的显示效果。
这里,对于如图10(a)所示的用户按压图片10112的用户操作来说,在手机100获取了按住的用户操作对应的作用力1后,手机100可以根据步骤S904配置的显示风格参数,通过显示风格模型计算用户按压图片10112的用户操作的显示效果。例如,如图10(b)所示,用户按住的图片10112的按压操作的显示效果可以是图片10112显示一个下压的显示效果。对于该下压的显示效果,手机100可以使用用户操作对应的作用力1=1N,以及步骤S904中描述的“金属风格”的显示风格参数:比重:2,滑动系数:0.15,弹性系数:100N/M计算出图片10112的下压的显示效果的距离。这里的距离可以通过步骤S704中对图片10112配置的显示效果的显示风格模型(1)计算得到,这里的显示风格模型(1)可以是弹力公式。
作用力1=弹性系数*距离
显示风格模型(1)
将作用力1:1N,弹性系数:100N/M代入显示风格模型(1)后,可以获得距离为0.01M。也就是说,在用户按住的图片10112的情况下,如图10(c)所示,图片10112会响应于按压操作而显示一个向屏幕内测位移距离0.01M的下压效果。
同理,对于如图12(a)所示的用户滑动图片10112的用户操作来说,在手机100获取了滑动操作对应的作用力2后,手机100可以根据“金属风格”的显示风格参数,通过滑动操作对应的显示风格模型计算用户滑动图片10112的显示效果。例如,如图12(a)所示,在用户滑动图片10112至图片10113的位置的过程中,图片10112显示一个滑动的显示效果。手机100可以使用滑动操作对应的作用力2=2N,上述的显示风格参数:比重:2,滑动系数:0.15,以及用户滑动图片10112至图片10113的位置的滑动时长,计算出图片10112的滑动的显示效果的速度。这里的加速度可以通过以下显示风格模型(2)计算得到。这里的显示风格模型(2)可以包括速度/加速度公式和摩擦力公式。
加速度=(作用力2-比重*滑动系数)/比重
速度=加速度*滑动时长
显示风格模型(2)
将作用力2:2N,比重:2,滑动系数:0.15以及滑动时长:0.3,代入显示风格模型(2)后,可以获得加速度为0.85,速度为0.255。也就是说,在用户滑动的图片10112至图片10113的位置的过程中,图片10112会显示一个速度为0.255的滑动的显示效果。
可以理解,这里的图片10112与图片10113之间具有连接关系,也就是,如图12(b)所示,在用户滑动图片10112至图片10113的位置的同时,图片10113可以以滑动图片10112的相反的方向的显示效果滑动至图片10112的位置。在图片10112与图片10113完成位置交换之后,也就是用户不再对图片10112施加按住的用户操作,这时,图片10112可以显示一个回弹的显示效果。
这里,图片10113滑动至图片10112的位置的显示效果可以基于用户滑动图片10112的用户操作对应的作用力2,以及显示风格参数通过上述的显示风格模型(2)计算获得。
例如,将作用力2:2N,比重:2,滑动系数:0.15以及滑动时长:0.3,代入显示风格模型(2)后,可以获得加速度为0.85,速度为0.255。也就是说,在用户滑动的图片10112至图片10113的位置的过程中,图片10113会显示一个速度为0.255的滑动的显示效果滑动至图片10112的位置。
可以理解,对于手机100加载的图库应用101的不同的显示风格,图库应用101中的界面元素的显示效果可以是不同的。例如,对于“金属风格”来说,图片10112与图片10113之间的滑动效果可以是刚性滑动;对于“水滴风格”来说,该显示风格对应显示风格参数可以包括:比重为3,滑动系数为0.30,弹性系数:200N/M。手机100使用“水滴风格”的显示风格参数,通过上述的显示风格模型(1)和(2),计算出的显示效果可以不同于“金属风格”,在“水滴风格”下,图片10112与图片10113之间的滑动效果可以是流体滑动。
S907c:改变显示元素的位置或者显示显示元素的显示效果。
在手机100确定了图片10112以及图片10113的显示效果后,手机100响应于用户滑动图片10112至图片10113的用户操作,在用户按住的图片10112时,如图10(c)所示,图片10112会显示一个下压的显示效果。在用户滑动的图片10112至图片10113的位置的过程中,图片10112会显示一个速度为0.255的滑动的显示效果;同时,图片10113会显示一个速度为0.255的滑动的显示效果滑动至图片10112的位置。
在本申请的另一个实施例中,手机100还可以响应于用户对应用的显示界面的显示元素之外的区域的用户操作,改变显示界面中的显示元素的位置。
如图13(a)所示,用户在图库应用101的图片一览界面1011中执行了一个下滑的用户操作。手机100响应于该下滑的用户操作,将图库应用101的图片一览界面1011中的显示元素改变为图片10114至图片10119。这时,如图13(b)所示,预先配置的中心显示元素,即图片10111已经位于图库应用101的图片一览界面1011之外,因此,手机100需要改变图库应用101的图片一览界面1011的中心显示元素。例如,在图库应用101的图片一览界面1011中的显示元素改变为图片10114至图片10119后,手机100可以确定图片10114为中心显示元素。
例如,手机100可以根据S902中获取的显示区域的大小,图库应用101的图片一览界面1011中的中心显示元素的属性以及图片一览界面1011中预设的中心显示元素的位置来配置图片一览界面1011中的中心显示元素。
这里,图片一览界面1011中预设的中心显示元素的位置可以与S903中描述的相同,中心显示元素的位置可以是,左:100;右:500;上:250;下:550,表示中心显示元素的中心与手机100的屏幕的左边界,右边界,上边界和下边界的距离分别是100个像素点,500个像素点,250个像素点以及550个像素点。
在本申请的另一个实施例中,如图14(a)所示,手机100还可以响应于用户对图库应用101的图片一览界面1011执行的扩大的用户操作,手机100将图库应用101的图片一览界面1011中的显示元素改变为图片10111至图片10114。这时,如图14(b)所示,手机100需要改变图库应用101的图片一览界面1011的图片10111,同时,图片10112至图片10114的位置也相对于图片10111会发生改变。
手机100通过自身的触摸传感器180K获取用户操作的物理数据,这里的用户操作的物理数据可以包括扩大的用户操作的扩大倍数。手机100根据扩大倍数调整图库应用101的图片一览界面1011中的显示元素的大小。
例如,在扩大倍数为1.5的情况下,手机100将图库应用101的图片一览界面1011中的显示元素的大小调整为240×375。
接着,手机100可以根据S902中获取的显示区域的大小,例如:600×800,调整图库应用101的图片一览界面1011中的中心显示元素的大小以及中心显示元素的位置来重新配置图片一览界面1011中的中心显示元素。
这里,图片一览界面1011中预设的中心显示元素的位置也可以根据用户操作的扩大倍数进行调整,例如,在扩大倍数为1.5的情况下,中心显示元素的位置可以是,左:160;右:440;上:205;下:595,表示中心显示元素的中心与手机100的屏幕的左边界,右边界,上边界和下边界的距离分别是160个像素点,440个像素点,205个像素点以及595个像素点。如图14(c)所示,手机100可以在上述手机100的屏幕的左边界,右边界,上边界和下边界的距离分别是160个像素点,440个像素点,205个像素点以及595个像素点的位置配置图片10111,且图片10111在手机100的屏幕中占据一个240×375大小的区域。同时,图片10112至图片10114的位置和大小也会随之调整。
上述步骤S901至S907描述了手机100打开并显示图库应用101的图片一览界面1011,并响应于用户在图片一览界面1011上执行的用户操作改变图片一览界面1011的显示元素的位置以及显示显示元素的显示效果的过程,在本申请的另一个实施例中,手机100还可以响应于用户的用户操作使得应用从第一显示界面切换至第二显示界面,并在打开并显示第二显示界面时,显示第二显示界面的显示元素的显示效果。
如图15(a)所示,手机100可以响应于用户对图片一览界面1011中的图片10112执行的一个点击的用户操作,从图片一览界面1011切换至图片详细界面1012。如图15(b)所示,图片详细界面1012包括四个显示元素:图片10121,“详情”按钮10122,“下一张”按钮10123,以及图片详情10124。
手机100可以采用与上述S702至S703相同的方法,在打开图片详细界面1012之前,配置图片详细界面1012中的显示元素的位置以及显示效果的显示风格模型。
例如,在打开图片详细界面1012之前,手机100可以将图片10121配置为中心显示元素,同时,手机100配置图片10121在图片详细界面1012中的位置,这里的位置可以是:左:屏幕的宽度*1/2;右:屏幕的宽度*1/2;上:屏幕的高度*1/4;下:屏幕的高度*3/4。图片详情10124的布局可以是:“序号2;间隔:30”,同理,手机100还会配置“详情”按钮10122,“下一张”按钮10123,例如:“序号3;间隔:30”以及“序号4;间隔:30”。
在手机100配置图片详细界面1012中的显示元素的同时,手机100可以对图库应用101的图片详细界面1012中的显示元素配置显示效果的显示风格模型,例如,以图片详细界面1012中的图片10121为例,手机100可以配置图片10121的显示效果为在手机100打开图片详细界面1012时,图片10121从图片详细界面1012的上边界之外落下至图片10121位于图片详细界面1012中的位置。同理,手机100也可以对图片详情10124,“详情”按钮10122,“下一张”按钮10123配置与图片10121相同的显示效果。
在手机100配置完成图片详细界面1012中的显示元素的位置以及显示效果的显示风格模型后,手机100可以采用与上述图9(a)和图9(b)中相似的方法,来显示第二显示界面并通过打开第二显示界面的显示元素触发显示效果,包括:
S1101:根据显示区域的大小对第二显示界面的布局进行调整并显示第二显示界面。
手机100显示图片详细界面1012后,在手机100的屏幕的分辨率为600×800的情况下,如图15(b)所示,图片详细界面1012的图片10121的位置可以是,左:300;右:300;上:200;下:600,也就是图片10121的中心与图片详细界面1012的左边界,右边界,上边界和下边界的距离分别是300个像素点,300个像素点,200个像素点以及600个像素点。图片详情10124的位置可以是图片10121下方间隔30个像素的位置。
在配置完图片详情10124后,手机100再依次配置“详情”按钮10122,“下一张”按钮10123的位置,如图10(b)所示,“详情”按钮10122和“下一张”按钮10123处于同一水平位置且位于图片详情10124的正下方。
S1102:加载应用的显示风格。
这里的显示风格可以与S904中的显示风格相同。但不同之处在于,图片10121的比重的数值不同。例如,图片10121的显示风格参数包括:比重:6,滑动系数:0.15。
S1103:触发第二显示界面的显示元素的显示效果。
例如,图片10121的位置是上述的左:300;右:300;上:200;下:600,图片10121的显示风格参数包括:比重:6,滑动系数:0.15。图片10121的显示效果是图片10121从图片详细界面1012的上边界之外落下至图片10121位于图片详细界面1012中的位置。也就是说,图片10121位于图片详细界面1012中的位置是终点,图片10121位于图片详细界面1012的上边界之外的位置是起点。手机100可以根据终点和起点之间的距离,以及图片10121的显示风格参数,通过显示风格模型(3)计算出图片10121的落下的显示效果。在显示风格模型(3)中,可以配置图片10121的落下的的作用力3为3N。这里的显示风格模型(3)也包括可以包括速度/加速度公式和摩擦力公式。
距离=终点的像素值-起点的像素值
加速度=(作用力3-比重*滑动系数)/比重
速度=初始速度+加速度*时长
距离=速度*时长
显示风格模型(3)
将作用力3:3N,比重:6,滑动系数:0.15以及距离500,代入显示风格模型(2)后,可以获得加速度为1.05,速度为22。也就是说,在用户滑动的图片10112的情况下,图片10113会以22的速度的下落的显示效果,从图片详细界面1012的上边界之外以落下的显示效果进入图片详细界面1012。
同理,手机100可以计算出“详情”按钮10122,“下一张”按钮10123的落下的显示效果。
在本申请的另一个实施例中,从图片一览界面1011切换至图片详细界面1012的显示效果也可以是如图16(a)所示,图片详细界面1012作为一个整体从图片一览界面1011的下方以弹出的显示效果显示在手机100的屏幕中,同时,图片详细界面1012中的显示元素通过图15(b)中描述的显示效果,从图片详细界面1012的上边界之外通过落下的显示效果显示在图片详细界面1012中。
可以理解,手机100还可以对图库应用101与其他应用的显示界面之间的切换也配置显示效果。例如,如图16(b)所示,当用户在图库应用101的图片详细界面1012中修改图片详情10124时,输入法应用102可以从手机100的屏幕的下方以上浮的显示效果显示。当手机100接收到消息时,手机100的即时消息应用103可以从手机100的屏幕上方通过落下的显示效果显示。
可以理解,在本申请的实施例中,上述显示风格模型(1)至(3)中的参数以及数值都是示例性的,也就是说,可以包括其他任意数量和类型的参数以及数值,对此不做限定。
应当理解的是,虽然在本文中可能使用了术语“第一”、“第二”等等来描述各个特征,但是这些特征不应当受这些术语限制。使用这些术语仅仅是为了进行区分,而不能理解为指示或暗示相对重要性。举例来说,在不背离示例性实施例的范围的情况下,第一特征可以被称为第二特征,并且类似地第二特征可以被称为第一特征。
此外,各种操作将以最有助于理解说明性实施例的方式被描述为多个彼此分离的操作;然而,描述的顺序不应被解释为暗示这些操作必须依赖描述的顺序,其中的许多操作可以被并行地、并发地或者同时实施。此外,各项操作的顺序也可以被重新安排。当所描述的操作完成时,所述处理可以被终止,但是还可以具有未包括在附图中的附加操作。所述处理可以对应于方法、函数、规程、子例程、子程序等等。
说明书中对“一个实施例”,“实施例”,“说明性实施例”等的引用表示所描述的实施例可以包括特定特征、结构或性质,但是每个实施例也可能或不是必需包括特定的特征、结构或性质。而且,这些短语不一定是针对同一实施例。此外,当结合具体实施例描述特定特征,本领域技术人员的知识能够影响到这些特征与其他实施例的结合,无论这些实施例是否被明确描述。
除非上下文另有规定,否则术语“包含”、“具有”和“包括”是同义词。短语“A/B”表示“A或B”。短语“A和/或B”表示“(A)、(B)或(A和B)”。
如本文所使用的,术语“模块”可以指代,作为其中的一部分,或者包括:用于运行一个或多个软件或固件程序的存储器(共享、专用或组),专用集成电路(ASIC),电子电路和/或处理器(共享、专用或组),组合逻辑电路,和/或提供所述功能的其他合适组件。
在附图中,可能以特定布置和/或顺序示出了一些结构或方法特征。然而,应当理解的是,这样的特定布置和/或排序不是必需的。而是,在一些实施例中,这些特征可以以不同于说明性附图中所示的方式和/或顺序来进行说明。另外,特定附图中所包含得结构或方法特征并不意味着所有实施例都需要包含这样的特征,在一些实施例中,可以不包含这些特征,或者可以将这些特征与其他特征进行组合。
上面结合附图对本申请的实施例做了详细说明,但本申请技术方案的使用不仅仅局限于本专利实施例中提及的各种应用,各种结构和变型都可以参考本申请技术方案轻易地实施,以达到本文中提及的各种有益效果。在本领域普通技术人员所具备的知识范围内,在不脱离本申请宗旨的前提下做出的各种变化,均应归属于本申请专利涵盖范围。
Claims (15)
1.一种界面显示方法,应用于电子设备,其特征在于,包括:
获取用户操作在电子设备的屏幕上产生的用户操作数据;
利用与所述用户操作的类型对应的物理规律,对所述用户操作数据进行计算,得到对应所述用户操作数据的显示数据;
根据所述显示数据,在所述电子设备上显示将所述用户操作数据模拟为遵循所述物理规律产生的物理现象。
2.根据权利要求1所述的方法,其特征在于,所述用户操作包括按压、点击、以及滑动中的至少一种。
3.根据权利要求2所述的方法,其特征在于,对应按压的物理现象包括下压、变形、回弹中的至少一种;
对应点击的物理现象包括跳转以及跳动中的至少一种;
对应滑动的物理现象包括滑动、滚动、原地旋转、翻页中的至少一种。
4.根据权利要求2所述的方法,其特征在于,所述电子设备通过以下方式计算所述显示数据:
将所述用户操作数据转换为对应所述物理规律的物理数据,并获取与所述电子设备的显示风格参数对应的物理系数;
基于所述物理数据和物理系数计算所述显示数据。
5.根据权利要求4所述的方法,其特征在于,所述物理数据包括作用力大小、作用时长作用力的位移中的至少一个,其中,
所述用户对所述电子设备的屏幕所施加的按压、点击以及滑动的作用力与所述物理数据对应。
6.根据权利要求5所述的方法,其特征在于,所述物理系数包括重量、摩擦系数、弹性系数中的至少一个;其中所述显示风格参数不同,所述用户操作的对象的重量、摩擦系数或者弹性系数不同。
7.根据权利要求1所述的方法,其特征在于,所述物理规律包括摩擦力公式、加速度公式,以及弹力公式中的至少一个。
8.一种电子设备,其特征在于,包括:
存储器,存储有指令;
处理器,所述处理器和存储器耦合,当所述存储器存储的程序指令被所述处理器执行时使得所述电子设备执行以下操作:
获取用户操作在电子设备的屏幕上产生的用户操作数据;
利用与所述用户操作的类型对应的物理规律,对所述用户操作数据进行计算,得到对应所述用户操作数据的显示数据;
根据所述显示数据,在所述电子设备上显示将所述用户操作数据模拟为遵循所述物理规律产生的物理现象。
9.根据权利要求8所述的电子设备,其特征在于,所述用户操作包括按压、点击、以及滑动中的至少一种。
10.根据权利要求9所述的电子设备,其特征在于,对应按压的物理现象包括下压、变形、回弹中的至少一种;
对应点击的物理现象包括跳转以及跳动中的至少一种;
对应滑动的物理现象包括滑动、滚动、原地旋转、翻页中的至少一种。
11.根据权利要求9所述的电子设备,其特征在于,所述电子设备通过以下方式计算所述显示数据:
将所述用户操作数据转换为对应所述物理规律的物理数据,并获取与所述电子设备的显示风格参数对应的物理系数;
基于所述物理数据和物理系数计算所述显示数据。
12.根据权利要求11所述的电子设备,其特征在于,所述物理数据包括作用力大小、作用时长作用力的位移中的至少一个,其中,
所述用户对所述电子设备的屏幕所施加的按压、点击以及滑动的作用力与所述物理数据对应。
13.根据权利要求12所述的电子设备,其特征在于,所述物理系数包括重量、摩擦系数、弹性系数中的至少一个;其中所述显示风格参数不同,所述用户操作的对象的重量、摩擦系数或者弹性系数不同。
14.根据权利要求8所述的电子设备,其特征在于,所述物理规律包括摩擦力公式、加速度公式,以及弹力公式中的至少一个。
15.一种计算机可读介质,其特征在于,所述计算机可读介质上存储有指令,该指令在电子设备上执行时使电子设备执行权利要求1至7中任一项所述的界面显示方法。
Priority Applications (2)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202110438190.5A CN115237304A (zh) | 2021-04-22 | 2021-04-22 | 界面显示方法,电子设备以及计算机可读介质 |
PCT/CN2022/085864 WO2022222771A1 (zh) | 2021-04-22 | 2022-04-08 | 界面显示方法,电子设备以及计算机可读介质 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202110438190.5A CN115237304A (zh) | 2021-04-22 | 2021-04-22 | 界面显示方法,电子设备以及计算机可读介质 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN115237304A true CN115237304A (zh) | 2022-10-25 |
Family
ID=83665743
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202110438190.5A Pending CN115237304A (zh) | 2021-04-22 | 2021-04-22 | 界面显示方法,电子设备以及计算机可读介质 |
Country Status (2)
Country | Link |
---|---|
CN (1) | CN115237304A (zh) |
WO (1) | WO2022222771A1 (zh) |
Family Cites Families (5)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
EP2750016A1 (en) * | 2012-12-28 | 2014-07-02 | Sony Mobile Communications AB | Method of operating a graphical user interface and graphical user interface |
CN105653099B (zh) * | 2016-03-01 | 2019-06-11 | 宇龙计算机通信科技(深圳)有限公司 | 一种反馈触摸屏按压力度的方法及装置 |
AU2017407719B2 (en) * | 2017-03-29 | 2021-01-28 | Honor Device Co., Ltd. | Method for adjusting scrolling speed of interface, related device, and computer program product |
US11829581B2 (en) * | 2018-05-21 | 2023-11-28 | Huawei Technologies Co., Ltd. | Display control method and terminal |
CN111309229A (zh) * | 2020-02-17 | 2020-06-19 | Oppo广东移动通信有限公司 | 参数调节方法、装置、终端及存储介质 |
-
2021
- 2021-04-22 CN CN202110438190.5A patent/CN115237304A/zh active Pending
-
2022
- 2022-04-08 WO PCT/CN2022/085864 patent/WO2022222771A1/zh active Application Filing
Also Published As
Publication number | Publication date |
---|---|
WO2022222771A1 (zh) | 2022-10-27 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
JP6952877B2 (ja) | 拡張現実環境及び仮想現実環境と相互作用するためのシステム、方法、及びグラフィカルユーザインタフェース | |
TWI516962B (zh) | 巡覽一瀏覽器中之複數個內容項目的方法、電腦系統及電腦程式產品 | |
JP2023065397A (ja) | ユーザインターフェースオブジェクトを操作するユーザインターフェース | |
US9141272B1 (en) | Panning application launcher with target based folder creation and icon movement on a proximity-sensitive display | |
TWI575442B (zh) | 用以提供與程式的多階層互動之方法、裝置與電腦程式產品 | |
US20130198690A1 (en) | Visual indication of graphical user interface relationship | |
CN103853424A (zh) | 显示装置和控制显示装置的方法 | |
TW201331825A (zh) | 用以在螢幕間提供視覺過渡之裝置及方法 | |
CN104903830A (zh) | 显示设备及其控制方法 | |
JP2012037974A (ja) | 表示制御装置、表示制御方法、プログラム及び記憶媒体 | |
JPWO2010134324A1 (ja) | コンテンツ表示装置及びコンテンツ表示方法 | |
CN110928464B (zh) | 用户界面的显示方法、装置、设备及介质 | |
CN102157006A (zh) | 生成能够与图像进行交互的角色的动态效果的方法和装置 | |
WO2014010158A1 (ja) | 処理装置 | |
WO2018068364A1 (zh) | 用于页面显示的方法、装置、图形用户界面及移动终端 | |
JP6568246B2 (ja) | ゲームプログラム、方法、および情報処理装置 | |
WO2022222771A1 (zh) | 界面显示方法,电子设备以及计算机可读介质 | |
CN114115691B (zh) | 电子设备及其交互方法、介质 | |
CN116958487A (zh) | 姿态预测方法、装置、设备、存储介质及计算机程序产品 | |
CN107209632B (zh) | 信息处理程序和信息处理方法 | |
CN107862728A (zh) | 图片标签的添加方法、装置及计算机可读存储介质 | |
JP6453500B1 (ja) | ゲームプログラム、方法、および情報処理装置 | |
CN103997634B (zh) | 用户终端及其显示图像的方法 | |
KR101553272B1 (ko) | 복수의 타이머를 사용하여 멀티미디어 콘텐츠를 저작하는 방법 및 복수의 타이머를 사용하여 멀티미디어 콘텐츠를 저작하는 저작 장치 | |
WO2023207738A1 (zh) | 具有柔性屏幕的电子设备的显示方法和电子设备 |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
SE01 | Entry into force of request for substantive examination |