具体实施方式
本申请下述各实施例均可应用于如图1所示的环境中。如图1所示,服务器10通过网络30与一个或多个用户终端20进行通信连接,以进行数据通信或交互。在本申请实施例中,用户终端20中安装有客户端,该客户端可以是应用程序(如搜索引擎、浏览器),与服务器10相对应,从而为用户提供服务(例如信息查询、内容浏览)。所述服务器10可以是数据库服务器、即时通信服务器、网络服务器、验证服务器等多个服务器,也可以是一个服务器。所述用户终端20可以是个人电脑(personal computer,PC)、平板电脑、智能手机、电子书阅读器、膝上型便携计算机、车载电脑、智能穿戴设备等。所述网络30可以是无线网络或有线网络,例如无线网络可以是,但不限于Wi-Fi(无线保真)网络、2G/3G/4G网络等。
图2示出了一种可应用于本申请实施例中的用户终端20的结构框图。如图2所示,所述用户终端20包括存储器202、存储控制器204,一个或多个(图中仅示出一个)处理器206、外设接口208、射频模块210、音频模块212、触控屏幕214等。这些组件通过一条或多条通讯总线/信号线216相互通讯。
存储器202可用于存储软件程序以及模块,如本发明实施例中的浮层显示方法及装置对应的程序指令/模块,处理器206通过运行存储在存储器202内的软件程序以及模块,从而执行各种功能应用以及数据处理,如本发明实施例提供的浮层显示方法。
存储器202可包括高速随机存储器,还可包括非易失性存储器,如一个或者多个磁性存储装置、闪存、或者其他非易失性固态存储器。处理器206以及其他可能的组件对存储器202的访问可在存储控制器204的控制下进行。
外设接口208将各种输入/输入装置耦合至处理器206以及存储器202。在一些实施例中,外设接口208,处理器206以及存储控制器204可以在单个芯片中实现。在其他一些实例中,他们可以分别由独立的芯片实现。
射频模块210用于接收以及发送电磁波,实现电磁波与电信号的相互转换,从而与通讯网络或者其他设备进行通讯。
音频模块212向用户提供音频接口,其可包括一个或多个麦克风、一个或者多个扬声器以及音频电路。
触控屏幕214在用户终端20与用户之间同时提供一个输出及输入界面。具体地,触控屏幕214向用户显示视频输出,这些视频输出的内容可包括文字、图形、视频及其任意组合。
可以理解,图2所示的结构仅为示意,用户终端20还可包括比图2中所示更多或者更少的组件,或者具有与图2所示不同的配置。图2中所示的各组件可以采用硬件、软件或其组合实现。
第一实施例
图3示出了本发明第一实施例提供的一种浮层显示方法的流程图,请参阅图3,本实施例描述的是用户终端的处理流程,所述方法包括:
步骤S110,响应于浮层显示触发指令,将浮层浮显于所述应用界面的第一显示区域,所述第一显示区域小于所述应用界面的显示区域。
于本发明实施例中,应用界面指的是客户端的应用界面。应用界面上可以有一个或多个内容链接,当内容链接为多个时,每个内容链接均可以有与内容链接对应的浮层。内容链接具体可以为带有超链接的文字或图片。当然,浮层也可以设置为对应于该应用界面或该应用界面上的某个区域或虚拟按钮,或者对应于某种操作手势。
于本发明实施例中,浮层是可堆叠于应用界面的一种交互(UI)控件。在客户端接收到浮层显示触发指令前,浮层是隐藏的。当客户端接收到浮层显示触发指令后,浮层会浮显于应用界面的预设位置,即第一显示区域。
例如,用户如果对多个内容链接中的某个内容链接感兴趣,在点击该内容链接后,会从应用界面的底部弹出一个浮层,例如可以从应用界面的底部向上滑动,并且会在应用界面呈现出滑动的动态效果,并滑动至第一显示区域的位置,以给用户提供一个预览界面。
在一种具体实施方式中,用户终端在接收到用户对多个内容链接中的一个内容链接的点击操作后,可以在网页的主体部分(body)中插入使用fixed语句定位的滑动浮层容器。同时,利用translateY将浮层移动至距离应用界面的顶部预定个像素(例如50个像素)的位置,即第一显示区域。其中,translateY用于表示在Y轴(垂直方向)移动相应元素的移动参数,在本申请中,元素是浮层。通过设置translateY可以使浮层位于应用界面的不同位置。
浮层显示触发指令是用于触发浮层显示的指令,浮层显示触发指令可以由用户点击应用界面的内容链接触发,还可以由用户的操作手势来触发。操作手势可以包括但不限于滑动、点击、或长按应用界面。进一步的,用户可以通过手指点击内容链接,或滑动、点击、长按应用界面,也可以用触控笔、鼠标等输入设备点击内容链接,或滑动、点击、长按应用界面。可以理解的是,具体的触发方式不应该理解为是对本申请的限定。不同的触发方式可以对应不同的浮层设置。例如,如果浮层显示触发指令由点击内容链接触发,则浮层可以设置为与内容链接对应。如果浮层显示触发指令由点击虚拟按钮触发,则浮层可以设置为与虚拟按钮对应。如果浮层显示触发指令由滑动应用界面触发,则浮层可以设置为与滑动操作手势对应,等等,这里不再一一列举。
客户端在接收到浮层显示触发指令后,将对应的浮层浮显在应用界面的第一显示区域。优选的,第一显示区域小于应用界面的显示区域。例如,如图4所示,第一显示区域可以位于应用界面的中下部位置,即图4中浮层所在的区域。当然,第一显示区域也可以位于应用界面的中上部、左部或右部。
另外,可以理解的是,第一显示区域所占应用界面整个显示区域的占比并不限于图4所示,可以根据不同客户端的需求设计不同的占比,例如,当对应浮层所显示的内容较少时,占比可以设计的比较小,当对应浮层所显示的内容较多时,占比可以设计的比较大,本申请的具体方案并不以此为限。
当浮层显示在第一显示区域时,用户可以看到浮层上所显示的内容,例如,如图4所示的内容1-内容9,也可以看到应用界面显示区域除第一显示区域以外的区域(也就是图4中的第一预设区域)的内容。
步骤S120,当接收到作用于所述浮层的第一预设操作后,将所述浮层浮显于所述应用界面的第二显示区域,所述第二显示区域大于所述第一显示区域且小于或等于所述应用界面的显示区域。
客户端在接收到作用于浮层的第一预设操作后,将浮层浮显于应用界面的第二显示区域,如参见图5,第二显示区域大于第一显示区域且小于或等于应用界面的整个显示区域。优选的,第二显示区域包括了整个第一显示区域。在一种具体实施方式中,当接收到作用于所述浮层的第一预设操作后,浮层显示的区域由应用界面的中下部改变为应用界面的整个显示区域。
例如,用户如果对显示在第一显示区域的浮层感兴趣,可以用手向上滑动该浮层,以使该浮层进入全屏模式,即在应用界面的整个显示区域显示。若用户在第一显示区域执行上滑操作,则设置浮层的移动参数translateY为translateY(0),浮层滑动到在应用界面的顶部。
第一预设操作具体可以包括滑动(例如上滑)、点击、或长按等手势操作,也可以为其他操作,如将用户终端向远离用户的方向挥动,第一预设操作的具体操作动作不应该理解为是对本申请的限制。
由于第二显示区域大于第一显示区域,因此,当客户端接收到第一预设操作时,浮层所显示的内容将会更多,如图5显示的内容1-内容12。
进一步的,请参照图6,在本实施例的一种具体实施方式中,在步骤S110之后还可以包括步骤S130,若接收到作用于所述浮层或接收到作用于第一预设区域的第二预设操作,关闭所述浮层。
第二预设操作包括滑动(例如下滑)、点击、双击等手势操作,也可以为其他操作,如将用户终端上下或前后来回挥动等,第二预设操作的具体操作动作不应该理解为是对本申请的限制,只要与第一预设操作进行区别即可。
下面以第二预设操作为点击操作或下滑操作为例进行说明,当浮层浮显于第一显示区域,也就是如图4所示的情况,点击操作具体可以作用于第一预设区域的任意区域,下滑操作具体可以作用于浮层的任意区域,即客户端在接收到作用于第一预设区域的点击操作或接收到作用于浮层的下滑操作后,关闭浮层。第一预设区域是应用界面的显示区域中,除第一显示区域以外的区域。当然,客户端也可以在接收到作用于浮层的点击操作后关闭浮层,例如,可以在用户点击浮层右上角的叉号时关闭浮层。
例如,在一种具体实施方式中,可以在浮层下滑超过预定预定个像素时,设置浮层的移动参数translateY为translateY(-100%),关闭浮层,若在下滑过程中,未超过预定个像素,则浮层恢复到原来的位置。
进一步的,请参照图7,在本实施例的另一种具体实施方式中,在步骤S120之后可以包括步骤S140,若接收到作用于所述浮层的第二预设操作,关闭所述浮层。
同样的,第二预设操作也可以包括滑动(例如下滑)、点击、双击等手势操作,也可以为其他操作,如将用户终端上下或前后来回挥动等,第二预设操作的具体操作动作不应该理解为是对本申请的限制,只要与第一预设操作进行区别即可。当浮层浮显于第二显示区域,也就是如图5所示的情况,点击操作具体可以作用于如图5所示的浮层的右上角的叉号,下滑操作具体可以作用于浮层的任意区域,即客户端在接收到作用于浮层的右上角的叉号的点击操作后,或接收到作用于浮层的任意区域的下滑操作,则关闭浮层,即设置移动参数translateY为translateY(-100%)。
进一步的,请参照图8,在本实施例的再一种具体实施方式中,在步骤S120之后还可以包括如下步骤:
步骤S151,若所述浮层的顶端与所述应用界面的显示区域的顶端重合时,接收作用于所述浮层的操作。
详情请参见图5,图5示出了浮层的顶端与应用界面的显示区域的顶端重合的情况。浮层的宽度可以与应用界面的显示区域的宽度相同,浮层的长度可以超过应用界面的显示区域的长度,即应用界面的显示区域不能完全显示整个浮层,客户端需要接收作用于浮层的上滑操作或下滑操作以上滑所述浮层或下滑所述浮层,从而实现浮层的不同区域在应用界面的显示区域的显示,即实现浮层的滚动显示。客户端可以接收作用于浮层的第三预设操作,并根据第三预设操作,滚动显示浮层,滚动显示具体可以通过iscroll组件实现。第三预设操作可以包括上滑操作,也可以包括下滑操作。
具体请参见图9,图9示出了浮层显示于应用界面的一种具体实施方式。图9示出的虚线框可以为应用界面的显示区域,图9示出的实线框为浮层,客户端接收到作用于浮层的上滑操作或下滑操作以上滑浮层或下滑浮层,从而实现浮层的滚动显示。浮层的顶端与应用界面的显示区域的顶端重合时如图10所示。
步骤S152,若作用于所述浮层的操作为下滑操作,将内容信息下滑。
浮层包括内容信息,且内容信息显示于浮层的浮显范围。请参见图4,当浮层浮显于第一显示区域时,内容信息也显示于浮层的浮显范围,即第一显示区域。请参见图5,当浮层浮显于第二显示区域时,内容信息也显示在浮层的浮显范围,即第二显示区域。
内容信息包括多个卡片版块以及多个内容版块,如图4和图5所示,卡片版块为切换组件,即多个卡片版块中的每个均对应相应的内容版块,切换组件具体可以为tab组件。内容版块可以为文字内容版块、图片内容版块等。内容信息下滑,可以是卡片版块的位置保持不变,内容版块向下移动,如图11所示;也可以是卡片版块与内容版块均向下移动。
具体地,图5中的卡片1、卡片2、卡片3以及卡片4可以分别对应“全部连衣裙”、“大码连衣裙”、“雪纺连衣裙”以及“真丝连衣裙”,则卡片1对应的多个内容版块为关于连衣裙的文字或图片,卡片2对应的多个内容版块为关于大码连衣裙的文字或图片,卡片3对应的多个内容版块为关于雪纺连衣裙的文字或图片,卡片4对应的多个内容版块为关于真丝连衣裙的文字或图片。当然,卡片1、卡片2、卡片3以及卡片4也可以对应其他的内容信息。多个卡片版块中的每个对应的内容信息以及多个内容版块的排版方式不应该理解为是对本申请的限制。
客户端在接收到作用于多个卡片版块中的一个内容信息的第四预设操作时,可以从服务器获取与该卡片版块对应的内容信息,并且将获得的内容信息通过内容版块的形式显示在浮层的预设区域。第四预设操作可以为点击操作,也可以为语音输入操作,具体操作形式不应该理解为是对本申请的限制。浮层的预设区域可以为浮层的浮显范围。
步骤S153,在由于所述内容信息下滑而在所述浮层形成的空白界面显示第一提示信息。
内容信息下滑后,会在浮层形成空白界面。客户端可以在空白界面显示第一提示信息。详情请参见图11,图11是显示第一提示信息的一种具体实施方式,浮层中的多个卡片版块的位置不变,多个内容版块的位置随着下滑操作而向下移动,从而在卡片版块与内容版块之间形成空白界面。第一提示信息可以为图11示出的“继续滑动关闭页面”信息,以提醒用户若继续进行下滑操作,则会关闭当前的浮层。
步骤S154,若所述内容信息的下滑距离超过第一阈值,取消显示所述第一提示信息,显示第二提示信息。
客户端判断内容信息的下滑距离是否超过第一阈值,若超过第一阈值,客户端取消第一提示信息的显示,并显示第二提示信息。详情请参见图12,图12是显示第二提示信息的一种具体实施方式,如图12所示,卡片版块与内容版块之间的间距超过图11示出的卡片版块与内容版块之间的间距且超过第一阈值时,客户端取消显示第一提示信息,显示第二提示信息。第二提示信息可以为如图12示出的“松开手指关闭页面”信息,以提醒用户在松开手指后,当前的浮层将会被关闭。第一阈值的具体数值不应该理解为是对本发明的限制。
具体地,第一阈值可以为50个像素,即若浮层的下滑距离超过50个像素,则提示“松开手指关闭页面”信息,并且在用户松开手指时,设置浮层的移动参数translateY为translateY(-100%),浮层关闭。
步骤S155,在不再接收到所述下滑操作时关闭所述浮层。
客户端若不再接收到下滑操作,则关闭当前浮层。例如用户松开执行下滑操作的手指时,客户端便不再接收到下滑操作,浮层被关闭。
客户端还可以接收上滑操作,并根据上滑操作滚动显示浮层,并且在滑动至浮层的底部时,客户端从服务器请求更多数据,以便继续在浮层进行数据展示。
本实施例提供的浮层显示方法能够先在应用界面的部分区域显示浮层,在接收到预设操作后,再在更大的区域显示浮层,能够实现同时显示浮层的内容以及浮层以下的页面中未被浮层遮住的内容,增加用户在应用程序的界面获取的信息量,提高用户体验。
第二实施例
本申请实施例还提供了一种浮层显示装置,详情请参见图13,该装置300包括:
浮层预览模块310,用于响应于浮层显示触发指令,将浮层浮显于所述应用界面的第一显示区域,所述第一显示区域小于所述应用界面的显示区域。
全屏浮层模块320,用于当接收到作用于所述浮层的第一预设操作后,将所述浮层浮显于所述应用界面的第二显示区域,所述第二显示区域大于所述第一显示区域且小于或等于所述应用界面的显示区域。
图13示出的浮层显示装置与图3示出的浮层显示方法相对应,在此便不做赘述。
详情请参见图14,本申请提供的浮层显示装置还可以包括:
第一浮层关闭模块330,用于若接收到作用于所述浮层或作用于第一预设区域的第二预设操作,关闭所述浮层。
第二预设操作包括滑动(例如下滑)、点击、双击等手势操作,也可以为其他操作,如将用户终端上下或前后来回挥动等,第二预设操作的具体操作动作不应该理解为是对本申请的限制,只要与第一预设操作进行区别即可。
详情请参见图15,本申请提供的浮层显示装置还可以包括:
第二浮层关闭模块340,用于若接收到作用于所述浮层的第二预设操作,关闭所述浮层。
同样的,第二预设操作也可以包括滑动(例如下滑)、点击、双击等手势操作,也可以为其他操作,如将用户终端上下或前后来回挥动等,第二预设操作的具体操作动作不应该理解为是对本申请的限制,只要与第一预设操作进行区别即可。当浮层浮显于第二显示区域,也就是如图5所示的情况,点击操作具体可以作用于如图5所示的浮层的右上角的叉号,下滑操作具体可以作用于浮层的任意区域,即客户端在接收到作用于浮层的右上角的叉号的点击操作后,或接收到作用于浮层的任意区域的下滑操作,则关闭浮层。
具体地,本申请提供的浮层显示装置还可以包括切换模块,用于若接收到作用于所述至少一个切换组件的第四预设操作,从服务器获取与该切换组件对应的信息,并将上述信息显示在所述浮层的预设区域。
详情请参见图4和图5,切换组件可以为卡片版块,即多个卡片版块中的每个均对应相应的内容版块。内容版块可以为文字内容版块、图片内容版块等。
客户端在接收到作用于多个卡片版块中的一个的第四预设操作时,可以从服务器获取与该卡片版块对应的内容信息,并且将获得的内容信息通过内容版块的形式显示在浮层的预设区域。第四预设操作可以为点击操作,也可以为语音输入操作,具体操作形式不应该理解为是对本申请的限制。浮层的预设区域可以为浮层的浮显范围。
详情请参见图16,第一浮层关闭模块330具体可以包括:
操作接收子模块331,用于若所述浮层的顶端与所述应用界面的显示区域的顶端重合时,接收作用于所述浮层的操作。
浮层处理子模块332,用于若作用于所述浮层的操作为下滑操作时,将所述内容信息下滑。
第一提示信息子模块333,用于在由于所述内容信息下滑而在浮层形成的空白界面显示第一提示信息。
第二提示信息子模块334,用于判断所述内容信息的下滑距离是否超过第一阈值,若是,取消显示所述第一提示信息,显示第二提示信息。
接收指令模块335,用于在不再接收到所述下滑操作时关闭所述浮层。
上述模块与图8示出的步骤S151至步骤S155相对应,在此便不做赘述。
本申请实施例提供的浮层显示方法、装置及用户终端通过接收浮层显示触发指令,将浮层浮显在应用界面的第一显示区域,其中,第一显示区域小于应用界面的显示区域,当接收到作用于浮层的第一预设操作后,再将浮层浮显于应用界面的第二显示区域。第二显示区域大于第一显示区域,且小于或等于应用界面的显示区域,第二显示区域可以包括第一显示区域。当浮层浮显在第一显示区域时,由于第一显示区域未占据整个应用界面的显示区域,故用户可以同时看到浮层的内容以及浮层之下页面的未被浮层遮住的内容。当用户想查看更多浮层上的内容时,可以执行第一预设操作,使浮层浮显于应用界面的第二显示区域,增加了用户的阅读视野。本申请实施例提供的浮层显示方法能够显示更多的页面内容,增加用户在应用程序的界面获取的信息量,有利于提高用户的用户体验。
需要说明的是,本说明书中的各个实施例均采用递进的方式描述,每个实施例重点说明的都是与其他实施例的不同之处,各个实施例之间相同相似的部分互相参见即可。对于装置类实施例而言,由于其与方法实施例基本相似,所以描述的比较简单,相关之处参见方法实施例的部分说明即可。
在本申请所提供的几个实施例中,应该理解到,所揭露的装置和方法,也可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的,例如,附图中的流程图和框图显示了根据本发明的多个实施例的装置、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上,流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分,所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意,在有些作为替换的实现方式中,方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如,两个连续的方框实际上可以基本并行地执行,它们有时也可以按相反的顺序执行,这依所涉及的功能而定。也要注意的是,框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合,可以用执行规定的功能或动作的专用的基于硬件的系统来实现,或者可以用专用硬件与计算机指令的组合来实现。
另外,在本发明各个实施例中的各功能模块可以集成在一起形成一个独立的部分,也可以是各个模块单独存在,也可以两个或两个以上模块集成形成一个独立的部分。
所述功能如果以软件功能模块的形式实现并作为独立的产品销售或使用时,可以存储在一个计算机可读取存储介质中。基于这样的理解,本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来,该计算机软件产品存储在一个存储介质中,包括若干指令用以使得一台计算机设备(可以是个人计算机,服务器,或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括:U盘、移动硬盘、只读存储器(ROM,Read-Only Memory)、随机存取存储器(RAM,Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。需要说明的是,在本文中,诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来,而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且,术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含,从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素,而且还包括没有明确列出的其他要素,或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下,由语句“包括一个……”限定的要素,并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。
以上所述仅为本发明的优选实施例而已,并不用于限制本发明,对于本领域的技术人员来说,本发明可以有各种更改和变化。凡在本发明的精神和原则之内,所作的任何修改、等同替换、改进等,均应包含在本发明的保护范围之内。应注意到:相似的标号和字母在下面的附图中表示类似项,因此,一旦某一项在一个附图中被定义,则在随后的附图中不需要对其进行进一步定义和解释。
以上所述,仅为本发明的具体实施方式,但本发明的保护范围并不局限于此,任何熟悉本技术领域的技术人员在本发明揭露的技术范围内,可轻易想到变化或替换,都应涵盖在本发明的保护范围之内。因此,本发明的保护范围应所述以权利要求的保护范围为准。