用户界面的显示方法、装置、设备及介质与流程

本申请实施例涉及计算机领域，特别涉及一种用户界面的显示方法、装置、设备及介质。

背景技术：

用户界面(userinterface)是应用程序提供的人机交互入口。用户界面包括：图像、文字、视频、音频等因素。图像是一种表达内容丰富的平面媒体，常作为广告载体在用户界面中被使用。

相关技术中，用户界面内设置有一张或多张图像，每张图像占据一块固定大小的区域，不同图像之间还存在有文字信息。用户可以上下滚动用户界面，来查看用户界面上的不同内容。

当用户界面上的图像是广告图像时，很多用户会习惯性地忽略该广告图片。为了吸引用户的查看，很多广告图像采用动态图像，但动态图像的数据量较大，会造成用户界面的加载缓慢且浪费流量。

技术实现要素：

本申请实施例提供了一种用户界面的显示方法、装置、设备及介质，可以解决相关技术中，动态图像的数据量较大，会造成用户界面的加载缓慢且浪费流量的技术问题。所述技术方案如下：

一方面，提供了一种用户界面的显示方法，所述用户界面包括：前景图层和背景图层，所述前景图层上包括透明区域和非透明区域，所述方法包括：

显示第一用户界面，所述第一用户界面包括所述前景图层和所述背景图层位于第一相对位置时，所述背景图层上透过所述透明区域的第一背景内容与所述非透明区域的前景内容共同展现出的图像内容；

控制所述前景图层和所述背景图层发生相对位移；

显示第二用户界面，所述第二用户界面包括所述前景图层和所述背景图层位于第二相对位置时，所述背景图层上透过所述透明区域的第二背景内容与所述非透明区域的前景内容共同展现出的图像内容。

另一方面，提供了一种用户界面的显示装置，所述用户界面包括：前景图层和背景图层，所述前景图层上包括透明区域和非透明区域，所述装置包括：

显示模块，用于显示第一用户界面，所述第一用户界面包括所述前景图层和所述背景图层位于第一相对位置时，所述背景图层上透过所述透明区域的第一背景内容与所述非透明区域的前景内容共同展现出的图像内容；

控制模块，用于控制所述前景图层和所述背景图层发生相对位移；

所述显示模块，还用于显示第二用户界面，所述第二用户界面包括所述前景图层和所述背景图层位于第二相对位置时，所述背景图层上透过所述透明区域的第二背景内容与所述非透明区域的前景内容共同展现出的图像内容。

另一方面，提供了一种计算机设备，所述计算机设备包括处理器和存储器，所述存储器中存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、所述至少一段程序、所述代码集或指令集由所述处理器加载并执行以实现如上方面所述的用户界面的显示方法。

另一方面，提供了一种计算机可读存储介质，所述计算机可读存储介质中存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、所述至少一段程序、所述代码集或指令集由所述处理器加载并执行以实现如上方面所述的用户界面的显示方法。

本申请实施例提供的技术方案带来的有益效果至少包括：

将图像设置为包括前景图层和背景图层两个图层，其中前景图层上包括透明区域和非透明区域，通过控制两个图层之间发生相对位移，两个图层的相对位置不同，背景图层透过透明区域的背景内容和非透明区域的前景内容组成的图像内容就会不同。既能吸引用户查看，又可以减小图像数据量，加快图像加载速度并节省流量。

附图说明

为了更清楚地说明本申请实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其它的附图。

图1是本申请一个示例性实施例提供的计算机系统的结构框图；

图2是本申请一个示例性实施例提供的终端的结构示意图；

图3是本申请一个示例性实施例提供的用户界面的显示方法的方法流程图；

图4是本申请另一个示例性实施例提供的图层示意图；

图5是本申请另一个示例性实施例提供的用户界面的显示方法的方法流程图；

图6是本申请另一个示例性实施例提供的前景图层和背景图层的示意图；

图7是本申请另一个示例性实施例提供的用户界面的显示方法在一个示意性实施例中的界面示意图；

图8是本申请另一个示例性实施例提供的用户界面的显示方法在一个示意性实施例中的界面示意图；

图9是本申请另一个示例性实施例提供的用户界面的显示方法在一个示意性实施例中的界面示意图；

图10是本申请另一个示例性实施例提供的用户界面的显示方法在一个示意性实施例中的界面示意图；

图11是本申请另一个示例性实施例提供的前景图层和背景图层的示意图；

图12是本申请另一个示例性实施例提供的用户界面的显示方法在一个示意性实施例中的界面示意图；

图13是本申请另一个示例性实施例提供的用户界面的显示方法在一个示意性实施例中的界面示意图；

图14是本申请另一个示例性实施例提供的用户界面的显示方法的方法流程图；

图15是本申请另一个示例性实施例提供的前景图层和背景图层的示意图；

图16是本申请另一个示例性实施例提供的前景图层和背景图层的示意图；

图17是本申请另一个示例性实施例提供的前景图层和背景图层的示意图；

图18是本申请另一个示例性实施例提供的前景图层和背景图层的示意图；

图19是本申请另一个示例性实施例提供的用户界面的显示方法的方法流程图；

图20是本申请另一个示例性实施例提供的用户界面的显示方法在一个示意性实施例中的界面示意图；

图21是本申请另一个示例性实施例提供的前景图层和背景图层的示意图；

图22是本申请另一个示例性实施例提供的用户界面的显示方法在一个示意性实施例中的界面示意图；

图23是本申请另一个示例性实施例提供的前景图层和背景图层的示意图；

图24是本申请另一个示例性实施例提供的用户界面的显示方法在一个示意性实施例中的界面示意图；

图25是本申请另一个示例性实施例提供的前景图层和背景图层的示意图；

图26是本申请另一个示例性实施例提供的用户界面的显示方法在一个示意性实施例中的界面示意图；

图27是本申请另一个示例性实施例提供的前景图层和背景图层的示意图；

图28是本申请另一个示例性实施例提供的用户界面的显示方法在一个示意性实施例中的界面示意图；

图29是本申请另一个示例性实施例提供的前景图层和背景图层的示意图；

图30是本申请另一个示例性实施例提供的用户界面的显示装置的框图；

图31是本申请一个示例性实施例提供的终端的框图。

具体实施方式

为使本申请的目的、技术方案和优点更加清楚，下面将结合附图对本申请实施方式作进一步地详细描述。

请参考图1，其示出了本申请一个实施例提供的实施环境的示意图。该实施环境可以包括：终端10和服务器20。

终端10可以是诸如手机、台式电脑、平板电脑、游戏主机、电子书阅读器、多媒体播放设备、可穿戴设备等电子设备。终端10中可以安装有能够进行图片浏览的应用程序的客户端，如能够进行商品图片浏览的应用程序的客户端。

服务器20用于为终端10中的应用程序(如能够进行图片浏览的应用程序)的客户端提供后台服务。例如，服务器20可以是上述应用程序(如能够进行图片浏览的应用程序)的后台服务器。服务器20可以是一台服务器，也可以是由多台服务器组成的服务器集群，或者是一个云计算服务中心。

终端10和服务器20之间可通过网络30进行互相通信。该网络30可以是有线网络，也可以是无线网络。

示例性地，终端10中安装有能够进行图片浏览的应用程序(如浏览器)的客户端，当终端10接收到用户浏览图片的指令时，可以通过网络30向服务器20发送获取图片的消息，服务器20接收到终端10的获取消息后，从其存储的图片中选取一定数量的图片，并通过网络30发送给终端10，然后由终端10在其界面中显示图片供用户浏览，以完成图片的加载过程。

在本申请方法实施例中，各步骤的执行主体可以是终端。请参考图2，其示出了本申请一个实施例提供的终端的结构示意图。该终端10可以包括：主板110、外部输出/输入设备120、存储器130、外部接口140、触控系统150以及电源160。

其中，主板110中集成有处理器和控制器等处理元件。

外部输出/输入设备120可以包括显示组件(比如显示屏)、声音播放组件(比如扬声器)、声音采集组件(比如麦克风)以及各类按键等。

存储器130中存储有程序代码和数据。

外部接口140可以包括耳机接口、充电接口以及数据接口等。

触控系统150可以集成在外部输出/输入设备120的显示组件或者按键中，触控系统150用于检测用户在显示组件或者按键上执行的触控操作。

电源160用于对移动终端10中的其它各个部件进行供电。

在本申请实施例中，主板110中的处理器可以通过执行或者调用存储器中存储的程序代码和数据生成用户界面(如图片界面)，并将生成的用户界面(如图片界面)通过外部输出/输入设备120进行展示。在展示用户界面(如图片界面)的过程中，可以通过触控系统150检测用户与用户界面(如图片界面)进行交互时执行的触控操作，并对该触控操作进行响应。

结合上述对虚拟世界的介绍以及实施环境说明，对本申请实施例提供的用户界面的显示方法进行说明，以该方法的执行主体为图1所示出的终端来举例说明。该终端运行有应用程序，该应用程序是支持图片浏览的程序。

图3是本申请一个示例性实施例提供的用户界面的显示方法的方法流程图。以该方法的执行主体为图1所示出的终端10来举例说明，终端中运行有支持图片浏览的应用程序。该用户界面包括：前景图层和背景图层，前景图层上包括透明区域和非透明区域，该方法至少包括如下步骤。

步骤101，显示第一用户界面，第一用户界面包括前景图层和背景图层位于第一相对位置时，背景图层上透过透明区域的第一背景内容与非透明区域的前景内容共同展现出的图像内容。

终端显示第一用户界面。

用户界面是终端中应用程序、网页或操作系统对应的用户界面。示例性的，用户界面上显示有图像。示例性的，用户可以对用户界面进行位移操作，例如，位移操作包括：滑动、滚动、点击、双击、按压中的至少一种。示例性的，用户界面也可以是不能接收用户位移操作的界面。

以能够进行广告浏览的应用程序为例，用户界面可以是显示广告的界面，该用户界面用于向用户呈现广告的内容，如用户界面中可以包括多条广告，以及这些广告的简介，如标题、图片、来源、时间、内容简介等。

示例性的，用户界面包括前景图层和背景图层。图层是构成图像的一部分，多个图层按顺序叠加到一起形成图像。示例性的，每个图层上都有显示元素，不同图层上的显示元素可以分别进行编辑，并且编辑过程互不影响。示例性的，多个图层从上到下顺序叠放，位于下方的图层可以透过位于上方的图层中的透明区域显示出来。例如，若位于上方的图层是全透明图层，则位于下方的图层可以透过位于上方的图层完全显示出来；若位于上方的图层是左半边透明右半边不透明的图层，则位于下方的图层可以透过左半边透明区域显示出半边，另外半边无法透过上方图层显示出来；若位于上方的图层是不透明图层，则位于下方的图层无法透过上方图层显示出来。

例如，如图4所示，有大小相同的两个图层：第一图层401和第二图层402。其中，第一图层上包括正方形的透明区域403，第一图层401中除透明区域403外都是不透明区域。第二图层402为不透明图层。将第一图层401置于第二图层402上方并叠加到一起，则第二图层402可以透过第一图层401上的透明区域403显示出来一部分，最终形成完整的图像404。

前景图层是位于背景图层的上方的图层。即，在叠加顺序上背景图层叠加在前景图层的下方。示例性的，前景图层上包括透明区域和非透明区域。

透明区域是位于下方的图层可以被显示出来的区域。非透明区域是位于下方的图层无法被显示出来的区域。

示例性的，前景图层上的透明区域是背景图层可以透过的区域，非透明区域是背景图层不可以透过的区域。示例性的，透明区域的透明度可以是任意的，即透明区域可以是半透明、全透明或任意透明度。示例性的，前景图层上的透明区域大小小于背景图层的大小。即，前景图层和背景图层叠加出的图像一定包括前景图层上的显示元素和背景图层上的显示元素。或，前景图层和背景图层叠加出的图像，背景图层一定被前景图层上的不透明区域遮挡住部分区域。

背景图层是位于前景图层下方的图层。即，在叠加顺序上前景图层叠加在背景图层的上方。示例性的，背景图层是不透明的图层。或，背景图层是具有不透明区域的图层。

示例性的，前景图层和背景图层用于展现图像内容。

示例性的，前景图层和背景图层的大小相同，或，前景图层和背景图层的大小不同。示例性的，前景图层和背景图层的形状是任意的，可以相同也可以不同。

示例性的，若前景图层和背景图层的大小不同，则前景图层和背景图层重叠的区域构成图像内容，不重叠的区域不构成图像内容。例如，前景图层的大小是1cm*1cm，背景图层的大小是2cm*2cm，前景图层和背景图层重叠区域的大小是1cm*1cm，则该重叠区域是图像内容，用户界面只显示该重叠区域。

示例性的，若前景图层和背景图层的大小不同，则前景图层和背景图层重叠区域的部分区域构成图像内容，其他区域不构成图像内容。例如，前景图层的大小是1cm*1cm，背景图层的大小是2cm*2cm，前景图层和背景图层重叠区域的大小是1cm*1cm，则图像内容是重叠区域中的部分区域，例如，图像内容是重叠区域中大小为0.5cm*0.5cm的一个区域，用户界面只显示该区域。

示例性的，若前景图层和背景图层的大小不同，图像内容也可以是前景图层和背景图层叠加后的所有图像内容。例如，前景图层的大小是1cm*1cm，背景图层的大小是2cm*2cm，则图像内容可以是前景图层和背景图层叠加后得到的2cm*2cm的图像，用户界面显示该2cm*2cm的图像内容。

示例性的，本申请实施例以前景图层和背景图层的大小不同为例。

相对位置是指前景模型和背景模型的位置。示例性的，相对位置可以是指前景模型相对于背景模型的位置，可以是指背景模型相对于前景模型的位置。例如，当背景模型大小大于前景模型，则前景模型和背景模型的相对位置可以是：前景模型位于背景模型的右下角，或前景模型位于背景模型的中间。当背景模型大小小于前景模型时，则前景模型和背景模型的相对位置可以是：背景模型位于前景模型的上半部分，或背景模型位于前景模型的左半部分。

第一相对位置是前景模型和背景模型的一种相对位置。

第一背景内容是背景图层中透过前景图层的透明区域显示出来的内容。示例性的，当前景图层和背景图层的相对位置不同时，背景图层透过前景图层的透明区域显示出的内容不同。

示例性的，非透明区域的前景内容可以是前景图层中全部的非透明区域包含的内容，也可以是前景图层中部分非透明区域包含的内容。

示例性的，图像内容中既包含前景图层中的内容，也包含背景图层中的内容。

示例性的，内容或显示元素包括形状、图案、色彩及其组合。

示例性的，透明区域的大小小于背景图层的大小，或，透明区域的大小大于所述背景图层的大小，或，透明区域的大小等于背景图层的大小。

示例性的，当背景图层的大小小于透明区域时，可以在背景图层后面加一个空白图层，由空白图层填补透明区域中除背景图层之外的空白部分。或，透明区域是半透明的区域，背景图层透过该半透明的区域显示出来。

步骤102，控制前景图层和背景图层发生相对位移。

终端控制前景图层和背景图层发生相对位移。

示例性的，终端控制前景图层和背景图层发生相对位移，即终端改变前景图层和背景图层的相对位置。

示例性的，终端将前景图层和背景图层的相对位置从第一相对位置移至第二相对位置。

相对位移是二者发生相对运动，使二者的相对位置发生改变。示例性的，相对位移是指平行于前景图形和背景图形的水平维度上的移动。示例性的，相对位移的方向和方式是任意的。

步骤103，显示第二用户界面，第二用户界面包括前景图层和背景图层位于第二相对位置时，背景图层上透过透明区域的第二背景内容与非透明区域的前景内容共同展现出的图像内容。

终端显示第二用户界面。

第二相对位置是与第一相对位置不同的相对位置。

第二背景内容是背景图层上与第一背景内容不同的内容。

示例性的，第一用户界面和第二用户界面上显示的图像内容不同。

示例性的，前景内容为主显示内容，第一背景内容和第二背景内容为辅显示内容；或，前景内容为辅显示内容，第一背景内容和第二背景内容为主显示内容。

示例性的，主线内容和辅显示内容共同组成图像内容。示例性的，图像内容的主要内容可能在前景图层上也可能在背景图层上。

综上所述，本实施例提供的方法，将图像设置为包括前景图层和背景图层两个图层，其中前景图层上包括透明区域和非透明区域，通过控制两个图层之间发生相对位移，两个图层的相对位置不同，背景图层透过透明区域的背景内容和非透明区域的前景内容组成的图像内容就会不同。既能吸引用户查看，又可以减小图像数据量，加快图像加载速度并节省流量。

示例性的，本申请还给出了一种控制前景图层和背景图层发生相对位移的示例性实施例。

图5是本申请一个示例性实施例提供的用户界面的显示方法的方法流程图。以该方法的执行主体为图1所示出的终端10来举例说明，该方法包括如下步骤。

步骤101，显示第一用户界面，第一用户界面包括前景图层和背景图层位于第一相对位置时，背景图层上透过透明区域的第一背景内容与非透明区域的前景内容共同展现出的图像内容。

示例性的，如图6所示，有前景图层501和背景图层502。其中，前景图层501上包括透明区域503和非透明区域504。示意性的，图6中前景图层501上的可乐瓶为透明区域503，阴影部分位非透明区域504。背景图层502是不透明的图层，其中，背景图层502的上半部分为白色，下半部分为阴影区域。将前景图层501和背景图层502叠加可以形成如图7所示的图像。示例性的，图7为前景图层501和背景图层502位于第一相对位置时，背景图层502上透过透明区域503的第一背景内容505与非透明区域504的前景内容共同展现出的图像内容。第一背景内容505是背景图层502中透过透明区域503的一部分白色区域和一部分阴影区域。

示例性的，图7是一种第一用户界面，在该用户界面上显示出了前景图层和背景图层的全部。示例性的，如图8所示为另一种第一用户界面，在第一用户界面上只显示出了前景模型和背景模型重叠部分的图像内容，其他部分没有显示。

步骤1021，获取位移指令，位移指令是用户触发的或程序代码生成的。

终端获取位移指令。

位移指令是控制前景图层和背景图层发生相对位移的指令。

示例性的，位移指令是用户触发的。示例性的，当终端接收到用户的位移操作时，生成位移指令，根据位移指令控制前景图层和背景图层发生相对位移。示例性的，用户的位移操作可以是滑动、滚动、点击、双击、按压中的至少一种。

示例性的，位移指令还可以是程序代码生成的。例如，用程序代码控制前景图层从背景图层的下方开始向上自动移动。

步骤1022，响应于位移指令的位移距离，控制前景图层和背景图层中的至少一个图层发生位移。

终端响应于位移指令的位移距离，控制前景图层和背景图层中的至少一个图层发生位移。

示例性的，位移指令中包括位移方向和位移距离，终端根据位移方向和位移距离控制前景图层和背景图层发生相对位移。

示例性的，终端可以根据位移指令，控制前景图层不动，背景图层移动。

或，终端可以根据位移指令，控制背景图层不动，前景图层移动。

或，终端可以根据位移指令，控制背景图层和前景图层都移动。示例性的，背景图层和前景图层的移动方向可以相同、相反或呈任意角度。示例性的，当背景图层和前景图层的移动方向相同时，背景图层和前景图层的移动速度或移动距离不同，即背景图层和前景图层移动后会改变相对位置。

例如，终端只控制前景图层动，背景图层不动，如图9所示，位移指令是用户的向上滑动操作对应的指令，终端根据位移指令控制前景图层501向上移动，背景图层502固定不动，则前景图层501和背景图层502从图9中图(1)的第一相对位置，变为图9中图(2)的第二相对位置，再变为图9中图(3)的第三相对位置。示例性的，将其应用在具有广告浏览功能的应用程序上时，图10对应了图9所示的图层移动过程。如图10所示，前景图层和背景图层重叠出的图像内容是广告内容，在用户界面上，广告内容随着用户的上滑操作向上滑动，此时，控制前景图层跟随用户的上滑操作向上滑动，背景图层固定不动，就有如图10中图(1)到图(2)到图(3)的效果，模拟出可乐瓶从装满可乐到可乐液面一点点下降直至没有可乐的效果。

例如，终端只控制背景图层动，前景图层不动，如图11所示，有前景图层506和背景图层507，其中前景图层有透明区域508和非透明区域509。示例性的，图11中前景图层的白色区域是透明区域，三只鞋子对应的阴影区域是非透明区域。背景图层507是不透明的图层。前景图层506位于背景图层507的上方。将前景图层506和背景图层507上下叠加后，可以得到如图12所示的图像内容。如图12所示，是将图11所示的前景图层506和背景图层507应用至具有广告浏览功能的应用程序上的用户界面。在用户界面上显示有前景图层和背景图层叠加出的图像内容，其中，位移指令是根据程序代码生成的位移指令，位移指令控制前景图层不动，背景图层向上移动，可以得到图12中图(1)到图(2)到图(3)到图(4)的效果。

例如，终端控制背景图层和前景图层都动，如图13所示，终端根据位移指令控制背景图层507向右移动，前景图层506向下移动，使前景图层506和背景图层507从如图13中图(1)的第一相对位置，变为如图13中图(2)的第二相对位置。

示例性的，前景图层或背景图层的移动距离是根据位移指令中的位移距离确定的。

示例性的，当前景图层和背景图层中只有一个图层移动，另一个图层静止时，终端控制移动的图层移动与位移距离相同的距离。

示例性的，静止的图层大小与用户界面的大小相同。例如，在具有广告浏览的应用程序上，用户滚动鼠标可以控制页面向上移动距离x，则终端控制前景图层和背景图层中的一个图层移动距离x。

示例性的，静止的图层大小与用户界面的大小不同，终端通过等比缩放的方式，使静止的图层大小与用户界面的大小相匹配。示例性的，相匹配是指，控制图层的宽与用户界面的宽相等；或，控制图层的长与用户界面的长相等。示例性的，终端会根据移动图层的可移动方向匹配静止图层与用户界面的大小。例如，若移动图层是纵向移动的，则终端等比缩放静止图层的大小，使静止图层的宽与用户界面的宽相等，此时静止图层的长度可能比用户界面的长度略长或略短。

示例性的，由于静止图层的长度可能略长或略短于用户界面，为了使移动图层移动至用户界面上的任意位置，透明区域下都可以显示出静止图层；或为了使静止图层能够被移动图层全覆盖到，当移动图层移动时，终端需要控制静止图层也移动。但静止图层的移动方向与移动图层的移动方向不同，或，静止图层的移动方向与移动图层的移动方向相同但移动速度不同。例如，若静止图层比用户界面长，当移动图层向上移动时，终端控制静止图层缓慢下移。若静止图层比用户界面短，当移动图层向上移动时，终端控制静止图层缓慢向上移动。

步骤103，显示第二用户界面，第二用户界面包括前景图层和背景图层位于第二相对位置时，背景图层上透过透明区域的第二背景内容与非透明区域的前景内容共同展现出的图像内容。

综上所述，本实施例提供的方法，终端通过获取位移指令，根据位移指令中的位移距离控制前景图层和背景图层中的至少一个图层发生位移，使前景图层和背景图层的相对位置从第一相对位置变为第二相对位置。通过前景图层和背景图层相对位置的改变，使图像内容呈现出不同的效果，既能吸引用户查看，又可以减小图像数据量，加快图像加载速度并节省流量。

图14是本申请一个示例性实施例提供的用户界面的显示方法的方法流程图。以该方法的执行主体为图1所示出的终端来举例说明，与图5所示的示例性实施例相比，步骤1022中的“控制前景图层和背景图层中的至少一个图层发生位移”可以替换为步骤201至步骤203。

步骤201，判断前景图层的大小是否大于背景图层。

终端判断前景图层的大小是否大于背景图层，若前景图层的大小比背景图层大，则进行步骤202；否则，进行步骤203。

示例性的，前景图层和背景图层中只有一个图层发生移动，另一个图层静止不动。示例性的，终端控制前景图层和背景图层中大小较小的图层移动，大小较大的图层静止。

步骤202，控制背景图层相对于前景图层发生位移。

当前景图层的大小比背景图层大时，终端控制背景图层相对于前景图层发生位移。

示例性的，终端控制背景图层移动，前景图层静止不动。

例如，如图15所示，前景图层601叠加在背景图层602之上，在前景图层上601有正方形、三角形、菱形的透明区域503，和除透明区域503外的非透明区域504。示例性的，图15中前景图层白色部分为透明区域503，阴影部分为非透明区域504。背景图层602为不透明图层。终端根据位移指令控制背景图层602相对于前景图层601发生位移。

示例性的，前景图层上可以大部分为非透明区域，小部分为透明区域；也可以大部分为透明区域，小部分为非透明区域。例如，如图16所示，在前景图层601上有正方形、三角形、菱形的非透明区域504，和除非透明区域504外的透明区域503，前景图层601叠加在背景图层602上。终端根据位移指令控制背景图层602相对于前景图层601发生位移。

示例性的，背景图层可以向任意方向移动。例如，图15和图16中的背景图层是竖向滑动的。例如，还可以控制背景图层横向滑动。如图17所示，前景图层601叠加在背景图层602之上，在前景图层601上有正方形、三角形、菱形的透明区域503，和除透明区域503外的非透明区域504。示例性的，图15中前景图层白色部分为透明区域503，阴影部分为非透明区域504。背景图层602为不透明图层。终端根据位移指令控制背景图层602相对于前景图层601横向滑动。

步骤203，控制前景图层相对于背景图层发生位移。

当前景图层的大小比背景图层小时，终端控制前景图层相对于背景图层发生位移。

示例性的，终端控制前景图层移动，背景图层静止不动。

例如，如图18所示，前景图层601叠加在背景图层602之上，在前景图层上601有正方形的透明区域503，和除透明区域503外的非透明区域504。示例性的，图15中前景图层白色部分为透明区域503，阴影部分为非透明区域504。背景图层602为不透明图层。终端根据位移指令控制前景图层601相对于背景图层602发生位移。

示例性的，前景图层上可以大部分为非透明区域，小部分为透明区域；也可以大部分为透明区域，小部分为非透明区域。

示例性的，前景图层可以向任意方向移动。

综上所述，本实施例提供的方法，通过判断前景图层和背景图层的大小，使终端控制大小较小的图层移动，大小较大的图层静止。通过前景图层和背景图层相对位置的改变，使图像内容呈现出不同的效果，既能吸引用户查看，又可以减小图像数据量，加快图像加载速度并节省流量。

示例性的，位移指令中还包括位移方向，前景图层或背景图层可以根据位移指令向任意方向移动。

图19是本申请一个示例性实施例提供的用户界面的显示方法的方法流程图。以该方法的执行主体为图1所示出的终端10来举例说明，与图14所示的示例性实施例不同的是，用步骤2021至步骤2026代替步骤202，用步骤2031至步骤2036代替步骤203。

步骤2021，当前景图层的大小大于背景图层时。

示例性的，当前景图层的大小大于背景图层时，终端控制背景图层相对于前景图层发生位移，背景图层的位移方向可以是步骤2022至步骤2026中的任意一种。

步骤2022，控制背景图层按照第一方向进行位移，第一方向与位移指令的位移方向相同。

终端控制背景图层按照第一方向进行位移。

示例性的，在位移指令中还包括位移方向。位移方向是用户的位移操作的方向，或程序代码中设定的位移方向。

示例性的，如图20所示，有前景图层601和背景图层602，其中，前景图层601有正方形、三角形、菱形的非透明区域，和除非透明区域外的透明区域。背景图层602为不透明图层。位移指令中的位移方向603是向上，则终端可以控制背景图层向第一方向604移动，第一方向604是与位移方603相同的方向。

步骤2023，控制背景图层按照第二方向进行位移，第二方向与位移指令的位移方向相反。

终端控制背景图层按照第二方向进行位移。

示例性的，如图20所示，位移指令中的位移方向603是向上，则终端可以控制背景图层向第二方向605移动，第二方向605是与位移方603相反的方向。

步骤2024，控制背景图层按照第三方向进行位移，第三方向与位移指令的位移方向垂直。

终端控制背景图层按照第三方向进行位移。

示例性的，如图20所示，位移指令中的位移方向603是向上，则终端可以控制背景图层向第三方向606移动，第三方向606是与位移方603垂直的方向。例如，当前景图层和背景图层是如图17所示的横向滑动的图层时，用户上下滑动可以控制背景图层左右移动。

步骤2025，控制背景图层按照第四方向进行位移，第四方向与位移指令的位移方向具有夹角，夹角为锐角。

终端控制背景图层按照第四方向进行位移。

示例性的，如图20所示，位移指令中的位移方向603是向上，则终端可以控制背景图层向第四方向607移动，第四方向607是与位移方603相反的方向。例如，用户的滑动出来的位移方向是斜向上四十五度，则终端控制背景图层向上移动。

示例性的，第四方向也可以与位移指令的位移方向具有夹角，夹角为钝角。

步骤2026，控制背景图层按照预设曲线轨迹进行位移。

终端控制背景图层按照预设曲线轨迹进行位移。

示例性的，如图20所示，终端可以控制背景图层按照预设曲线轨迹608进行位移。示例性的，曲线轨迹可以是任意形状的，例如，锯齿形、波浪形、螺旋形等。示例性的，终端可以根据位移方向确定曲线轨迹的总体运动方向，例如，当位移方向是向上时，终端控制背景图层以锯齿形的轨迹向上移动，

步骤2031，当前景图层的大小小于背景图层时。

示例性的，当前景图层的大小小于背景图层时，终端控制前景图层相对于背景图层发生位移，前景图层的位移方向可以是步骤2032至步骤2036中的任意一种。

步骤2032，控制前景图层按照第一方向进行位移，第一方向与位移指令的位移方向相同。

终端控制前景图层按照第一方向进行位移。

步骤2033，控制前景图层按照第二方向进行位移，第二方向与位移指令的位移方向相反。

终端控制前景图层按照第二方向进行位移。

步骤2034，控制前景图层按照第三方向进行位移，第三方向与位移指令的位移方向垂直。

终端控制前景图层按照第三方向进行位移。

步骤2035，控制前景图层按照第四方向进行位移，第四方向与位移指令的位移方向具有夹角，夹角为锐角。

终端控制前景图层按照第四方向进行位移。

步骤2036，控制背景图层按照预设曲线轨迹进行位移。

终端控制背景图层按照预设曲线轨迹进行位移。

示例性的，基于与步骤2022至步骤2026相同的原理，终端可以控制前景图层向步骤2032至步骤2036中的方向移动。

综上所述，本实施例提供的方法，位移指令中还包括位移方向，前景图层或背景图层可以根据位移方向确定移动方向。通过前景图层和背景图层相对位置的改变，使图像内容呈现出不同的效果，既能吸引用户查看，又可以减小图像数据量，加快图像加载速度并节省流量。

示例性的，给出利用本申请提供的用户界面的显示方法显示出的四种用户界面。

第一种，如图21所示，有前景图层701和背景图层702。其中，前景图层701上有瓶子形状的透明区域503，和除瓶子之外的非透明区域504。背景图层702为不透明的两种阴影区域。将前景图层701和背景图层702上下叠加，可以得到如图22所示的用户界面。如图22所示，终端控制前景图层701从背景图层702的左端移动到背景图层702的右端，即，图22中图(1)到图(2)到图(3)的效果。使瓶子中的填充颜色改变，增加图片趣味性，吸引用户查看，并减小图像数据量，加快图像加载速度并节省流量。

第二种，如图23所示，有前景图层801和背景图层802。其中，前景图层801上有正方形、三角形、菱形的透明区域503，和除透明区域503之外的非透明区域504。背景图层802为不透明的阴影区域803和白色区域804。示例性的，背景图层也可以是有透明区域的图层，即背景图层802包括不透明的阴影区域803和透明的区域804。将前景图层801和背景图层802上下叠加，可以得到如图24所示的用户界面。如图24所示，为了更好的显示出效果，将区域间的分界线隐去，终端控制前景图层801从背景图层802的下部逐渐移动至背景图层802的上部，即，图24中图(1)到图(6)的效果。增加了图片的趣味性，吸引用户查看，并减小图像数据量，加快图像加载速度并节省流量。

第三种，如图25所示，有前景图层901和背景图层902。其中，前景图层901上有正方形、三角形的非透明区域504，和除非透明区域504之外的透明区域503。背景图层902为不透明图层。将前景图层901和背景图层902上下叠加，可以得到如图26所示的用户界面。如图26所示，终端控制前景图层901从背景图层902的下部逐渐移动至背景图层902的上部，即，图26中图(1)到图(3)的效果。增加了图片的趣味性，吸引用户查看，并减小图像数据量，加快图像加载速度并节省流量。

第四种，如图27所示，有前景图层1001和背景图层1002。其中，前景图层1001上有位于前景图层中心部分的透明区域503，透明区域503是半透明区域(透明度为50％)，以及除透明区域503之外的非透明区域504。背景图层1002为圆形的不透明图层。将前景图层1001和背景图层1002上下叠加，可以得到如图28所示的用户界面。如图28所示，终端控制背景图层1002在前景图层1001中任意移动，例如，图28中图(1)到图(3)的效果。示例性的，在背景图层1002后面还有一层白色图层，用来填补透明区域503中除背景图层1002外的区域，保证透明区域的色彩准确。该方法增加了图片的趣味性，吸引用户查看，并减小图像数据量，加快图像加载速度并节省流量。

示例性的，当用户界面包括两组或以上的一一对应的前景图层和背景图层时，由于背景图层的大小都会占满整个用户界面。此时，前景图层会获取其对应的背景图层的标识，根据背景图层的标识，在前景图层的透明区域上透过对应的背景图层的背景内容。例如，在用户界面上有一一对应的第一前景图层、第一背景图层，第二前景图层、第二背景图层。则第一前景图层获取第一背景图层的标识，从第一前景图层的透明区域透过第一背景图层上的背景内容；第二前景图层获取第二背景图层的标识，从第二前景图层的透明区域透过第二背景图层上的背景内容。即，第一前景图层不会透出第二背景图层的背景内容，第二前景图层也不会透出第一背景图层的背景内容。

示例性的，如图29所示，有一一对应的第一前景图层901、第一背景图层903，和第二前景图层902、第二背景图层904。其中第一前景图层901的透明区域透出第一背景图层903的背景内容，第二前景图层902的透明区域透出第二背景图层904的背景内容。

以下为本申请的装置实施例，对于装置实施例中未详细描述的细节，可参考上述方法实施例。

图30是本申请一个示例性实施例提供的用户界面的显示装置的框图。所述装置应用于终端中，所述终端中运行有支持图片浏览的应用程序，所述用户界面包括：前景图层和背景图层，所述前景图层上包括透明区域和非透明区域，所述装置包括：

显示模块301，用于显示第一用户界面，所述第一用户界面包括所述前景图层和所述背景图层位于第一相对位置时，所述背景图层上透过所述透明区域的第一背景内容与所述非透明区域的前景内容共同展现出的图像内容；

控制模块302，用于控制所述前景图层和所述背景图层发生相对位移；

所述显示模块301，还用于显示第二用户界面，所述第二用户界面包括所述前景图层和所述背景图层位于第二相对位置时，所述背景图层上透过所述透明区域的第二背景内容与所述非透明区域的前景内容共同展现出的图像内容。

在一个可选的实施例中，所述装置还包括：获取模块303；

所述获取模块303，用于获取位移指令，所述位移指令是用户触发的或程序代码生成的；

所述控制模块302，还用于响应于所述位移指令的位移距离，控制所述前景图层和所述背景图层中的至少一个图层发生位移。

在一个可选的实施例中，所述前景图层的大小大于所述背景图层；

所述控制模块302，还用于控制所述背景图层相对于所述前景图层发生位移。

在一个可选的实施例中，所述控制模块302，还用于控制所述背景图层按照第一方向进行位移，所述第一方向与所述位移指令的位移方向相同；

或，

所述控制模块302，还用于控制所述背景图层按照第二方向进行位移，所述第二方向与所述位移指令的位移方向相反；

或，

所述控制模块302，还用于控制所述背景图层按照第三方向进行位移，所述第三方向与所述位移指令的位移方向垂直；

或，

所述控制模块302，还用于控制所述背景图层按照第四方向进行位移，所述第四方向与所述位移指令的位移方向具有夹角，所述夹角为锐角；

或，

所述控制模块302，还用于控制所述背景图层按照预设曲线轨迹进行位移。

在一个可选的实施例中，所述前景图层的大小小于所述背景图层；

所述控制模块302，还用于控制所述前景图层相对于所述背景图层发生位移。

在一个可选的实施例中，所述控制模块302，还用于控制所述前景图层按照第一方向进行位移，所述第一方向与所述位移指令的位移方向相同；

或，

所述控制模块302，还用于控制所述前景图层按照第二方向进行位移，所述第二方向与所述位移指令的位移方向相反；

或，

所述控制模块302，还用于控制所述前景图层按照第三方向进行位移，所述第三方向与所述位移指令的位移方向垂直；

或，

所述控制模块302，还用于控制所述前景图层按照第四方向进行位移，所述第四方向与所述位移指令的位移方向具有夹角，所述夹角为锐角；

或，

所述控制模块302，还用于控制所述前景图层按照预设曲线轨迹进行位移。

在一个可选的实施例中，所述前景内容为主显示内容，所述第一背景内容和所述第二背景内容为辅显示内容；

或，

所述前景内容为辅显示内容，所述第一背景内容和所述第二背景内容为主显示内容。

在一个可选的实施例中，所述背景图层中存在至少两个位置的显示元素不同，所述显示元素包括：形状、图案、色彩及其组合。

需要说明的是：上述实施例提供的用户界面的显示装置，仅以上述各功能模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能模块完成，即将设备的内部结构划分成不同的功能模块，以完成以上描述的全部或者部分功能。另外，上述实施例提供的用户界面的显示装置与用户界面的显示方法实施例属于同一构思，其具体实现过程详见方法实施例，这里不再赘述。

图31示出了本申请一个示例性实施例提供的终端3900的结构框图。该终端3900可以是：智能手机、平板电脑、mp3播放器(movingpictureexpertsgroupaudiolayeriii，动态影像专家压缩标准音频层面3)、mp4(movingpictureexpertsgroupaudiolayeriv，动态影像专家压缩标准音频层面4)播放器、笔记本电脑或台式电脑。终端3900还可能被称为用户设备、便携式终端、膝上型终端、台式终端等其它名称。

通常，终端3900包括有：处理器3901和存储器3902。

处理器3901可以包括一个或多个处理核心，比如4核心处理器、8核心处理器等。处理器3901可以采用dsp(digitalsignalprocessing，数字信号处理)、fpga(field－programmablegatearray，现场可编程门阵列)、pla(programmablelogicarray，可编程逻辑阵列)中的至少一种硬件形式来实现。处理器3901也可以包括主处理器和协处理器，主处理器是用于对在唤醒状态下的数据进行处理的处理器，也称cpu(centralprocessingunit，中央处理器)；协处理器是用于对在待机状态下的数据进行处理的低功耗处理器。在一些实施例中，处理器3901可以在集成有gpu(graphicsprocessingunit，图像处理器)，gpu用于负责显示屏所需要显示的内容的渲染和绘制。一些实施例中，处理器3901还可以包括ai(artificialintelligence，人工智能)处理器，该ai处理器用于处理有关机器学习的计算操作。

存储器3902可以包括一个或多个计算机可读存储介质，该计算机可读存储介质可以是非暂态的。存储器3902还可包括高速随机存取存储器，以及非易失性存储器，比如一个或多个磁盘存储设备、闪存存储设备。在一些实施例中，存储器3902中的非暂态的计算机可读存储介质用于存储至少一个指令，该至少一个指令用于被处理器3901所执行以实现本申请中方法实施例提供的用户界面的显示方法。

在一些实施例中，终端3900还可选包括有：外围设备接口3903和至少一个外围设备。处理器3901、存储器3902和外围设备接口3903之间可以通过总线或信号线相连。各个外围设备可以通过总线、信号线或电路板与外围设备接口3903相连。具体地，外围设备包括：射频电路3904、触摸显示屏3905、摄像头3906、音频电路3907、定位组件3908和电源3909中的至少一种。

外围设备接口3903可被用于将i/o(input/output，输入/输出)相关的至少一个外围设备连接到处理器3901和存储器3902。在一些实施例中，处理器3901、存储器3902和外围设备接口3903被集成在同一芯片或电路板上；在一些其它实施例中，处理器3901、存储器3902和外围设备接口3903中的任意一个或两个可以在单独的芯片或电路板上实现，本实施例对此不加以限定。

射频电路3904用于接收和发射rf(radiofrequency，射频)信号，也称电磁信号。射频电路3904通过电磁信号与通信网络以及其它通信设备进行通信。射频电路3904将电信号转换为电磁信号进行发送，或者，将接收到的电磁信号转换为电信号。可选地，射频电路3904包括：天线系统、rf收发器、一个或多个放大器、调谐器、振荡器、数字信号处理器、编解码芯片组、用户身份模块卡等等。射频电路3904可以通过至少一种无线通信协议来与其它终端进行通信。该无线通信协议包括但不限于：万维网、城域网、内联网、各代移动通信网络(2g、3g、4g及5g)、无线局域网和/或wifi(wirelessfidelity，无线保真)网络。在一些实施例中，射频电路3904还可以包括nfc(nearfieldcommunication，近距离无线通信)有关的电路，本申请对此不加以限定。

显示屏3905用于显示ui(userinterface，用户界面)。该ui可以包括图形、文本、图标、视频及其它们的任意组合。当显示屏3905是触摸显示屏时，显示屏3905还具有采集在显示屏3905的表面或表面上方的触摸信号的能力。该触摸信号可以作为控制信号输入至处理器3901进行处理。此时，显示屏3905还可以用于提供虚拟按钮和/或虚拟键盘，也称软按钮和/或软键盘。在一些实施例中，显示屏3905可以为一个，设置终端3900的前面板；在另一些实施例中，显示屏3905可以为至少两个，分别设置在终端3900的不同表面或呈折叠设计；在再一些实施例中，显示屏3905可以是柔性显示屏，设置在终端3900的弯曲表面上或折叠面上。甚至，显示屏3905还可以设置成非矩形的不规则图形，也即异形屏。显示屏3905可以采用lcd(liquidcrystaldisplay，液晶显示屏)、oled(organiclight-emittingdiode，有机发光二极管)等材质制备。

摄像头组件3906用于采集图像或视频。可选地，摄像头组件3906包括前置摄像头和后置摄像头。通常，前置摄像头设置在终端的前面板，后置摄像头设置在终端的背面。在一些实施例中，后置摄像头为至少两个，分别为主摄像头、景深摄像头、广角摄像头、长焦摄像头中的任意一种，以实现主摄像头和景深摄像头融合实现背景虚化功能、主摄像头和广角摄像头融合实现全景拍摄以及vr(virtualreality，虚拟现实)拍摄功能或者其它融合拍摄功能。在一些实施例中，摄像头组件3906还可以包括闪光灯。闪光灯可以是单色温闪光灯，也可以是双色温闪光灯。双色温闪光灯是指暖光闪光灯和冷光闪光灯的组合，可以用于不同色温下的光线补偿。

音频电路3907可以包括麦克风和扬声器。麦克风用于采集用户及环境的声波，并将声波转换为电信号输入至处理器3901进行处理，或者输入至射频电路3904以实现语音通信。出于立体声采集或降噪的目的，麦克风可以为多个，分别设置在终端3900的不同部位。麦克风还可以是阵列麦克风或全向采集型麦克风。扬声器则用于将来自处理器3901或射频电路3904的电信号转换为声波。扬声器可以是传统的薄膜扬声器，也可以是压电陶瓷扬声器。当扬声器是压电陶瓷扬声器时，不仅可以将电信号转换为人类可听见的声波，也可以将电信号转换为人类听不见的声波以进行测距等用途。在一些实施例中，音频电路3907还可以包括耳机插孔。

定位组件3908用于定位终端3900的当前地理位置，以实现导航或lbs(locationbasedservice，基于位置的服务)。定位组件3908可以是基于美国的gps(globalpositioningsystem，全球定位系统)、中国的北斗系统或俄罗斯的伽利略系统的定位组件。

电源3909用于为终端3900中的各个组件进行供电。电源3909可以是交流电、直流电、一次性电池或可充电电池。当电源3909包括可充电电池时，该可充电电池可以是有线充电电池或无线充电电池。有线充电电池是通过有线线路充电的电池，无线充电电池是通过无线线圈充电的电池。该可充电电池还可以用于支持快充技术。

在一些实施例中，终端3900还包括有一个或多个传感器3910。该一个或多个传感器3910包括但不限于：加速度传感器3911、陀螺仪传感器3912、压力传感器3913、指纹传感器3914、光学传感器3915以及接近传感器3916。

加速度传感器3911可以检测以终端3900建立的坐标系的三个坐标轴上的加速度大小。比如，加速度传感器3911可以用于检测重力加速度在三个坐标轴上的分量。处理器3901可以根据加速度传感器3911采集的重力加速度信号，控制触摸显示屏3905以横向视图或纵向视图进行用户界面的显示。加速度传感器3911还可以用于游戏或者用户的运动数据的采集。

陀螺仪传感器3912可以检测终端3900的机体方向及转动角度，陀螺仪传感器3912可以与加速度传感器3911协同采集用户对终端3900的3d动作。处理器3901根据陀螺仪传感器3912采集的数据，可以实现如下功能：动作感应(比如根据用户的倾斜操作来改变ui)、拍摄时的图像稳定、游戏控制以及惯性导航。

压力传感器3913可以设置在终端3900的侧边框和/或触摸显示屏3905的下层。当压力传感器3913设置在终端3900的侧边框时，可以检测用户对终端3900的握持信号，由处理器3901根据压力传感器3913采集的握持信号进行左右手识别或快捷操作。当压力传感器3913设置在触摸显示屏3905的下层时，由处理器3901根据用户对触摸显示屏3905的压力操作，实现对ui界面上的可操作性控件进行控制。可操作性控件包括按钮控件、滚动条控件、图标控件、菜单控件中的至少一种。

指纹传感器3914用于采集用户的指纹，由处理器3901根据指纹传感器3914采集到的指纹识别用户的身份，或者，由指纹传感器3914根据采集到的指纹识别用户的身份。在识别出用户的身份为可信身份时，由处理器3901授权该用户执行相关的敏感操作，该敏感操作包括解锁屏幕、查看加密信息、下载软件、支付及更改设置等。指纹传感器3914可以被设置终端3900的正面、背面或侧面。当终端3900上设置有物理按键或厂商logo时，指纹传感器3914可以与物理按键或厂商logo集成在一起。

光学传感器3915用于采集环境光强度。在一个实施例中，处理器3901可以根据光学传感器3915采集的环境光强度，控制触摸显示屏3905的显示亮度。具体地，当环境光强度较高时，调高触摸显示屏3905的显示亮度；当环境光强度较低时，调低触摸显示屏3905的显示亮度。在另一个实施例中，处理器3901还可以根据光学传感器3915采集的环境光强度，动态调整摄像头组件3906的拍摄参数。

接近传感器3916，也称距离传感器，通常设置在终端3900的前面板。接近传感器3916用于采集用户与终端3900的正面之间的距离。在一个实施例中，当接近传感器3916检测到用户与终端3900的正面之间的距离逐渐变小时，由处理器3901控制触摸显示屏3905从亮屏状态切换为息屏状态；当接近传感器3916检测到用户与终端3900的正面之间的距离逐渐变大时，由处理器3901控制触摸显示屏3905从息屏状态切换为亮屏状态。

本领域技术人员可以理解，图31中示出的结构并不构成对终端3900的限定，可以包括比图示更多或更少的组件，或者组合某些组件，或者采用不同的组件布置。

本申请还提供了一种计算机设备，所述计算机设备包括处理器和存储器，所述存储器中存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、所述至少一段程序、所述代码集或指令集由所述处理器加载并执行以实现上述任意示例性实施例所提供的用户界面的显示方法。

本申请还提供了一种计算机可读存储介质，所述可读存储介质中存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、所述至少一段程序、所述代码集或指令集由所述处理器加载并执行以实现上述任意示例性实施例所提供的用户界面的显示方法。

本领域普通技术人员可以理解实现上述实施例的全部或部分步骤可以通过硬件来完成，也可以通过程序来指令相关的硬件完成，所述的程序可以存储于一种计算机可读存储介质中，上述提到的存储介质可以是只读存储器，磁盘或光盘等。

以上所述仅为本申请的可选实施例，并不用以限制本申请，凡在本申请的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本申请的保护范围之内。