CN108415637A - 一种列表式界面的多层展示方法和系统 - Google Patents

Abstract

本发明提供一种列表式界面的多层展示方法，包括以下步骤：以层叠的方式显示用于显示列表式界面的第一层和用于显示图像的第二层，其中第一层覆盖在第二层上，以使得第二层的至少一部分不可见，第一层包括镂空区，以显示对应该镂空区的区域的第二层；检测用户对第二层的滚动操作；根据该滚动操作，移动第二层的位置，以改变由镂空区显示的第二层的内容。还提供了一种列表式界面的多层展示系统，将例如广告等大幅的图像内容设置在底层，且通过滑动窗口漏空展示广告的展示方式，提高了空间利用率和用户体验。

Description

一种列表式界面的多层展示方法和系统

技术领域

本发明涉及计算机技术领域，具体涉及一种列表式界面的多层展示方法和系统。

背景技术

在社交平台、新闻客户端等内容提供类应用或者网页端，由于人类阅读习惯偏好，一般使用竖版列表式布局对内容进行展示。竖排列表式布局是最常用的布局之一。例如，手机屏幕一般是列表竖屏显示的，文字是横屏显示的，因此竖排列表可以包含比较多的信息。列表的条目数可以没有限制，通过上下滑动可以查看更多内容。竖排列表在视觉上整齐美观，用户接受度很高，常用于并列元素的展示，包括目录、分类、内容等。当需要在列表式布局中插入较大篇幅的图像(例如广告)时，受限于条目高度，被展示的图像内容一般篇幅较小。

发明内容

为了解决上述问题，根据本发明的一个方面，提供了一种列表式界面的多层展示方法，包括以下步骤：以层叠的方式显示用于显示列表式界面的第一层和用于显示图像的第二层，其中第一层覆盖在第二层上，以使得第二层的至少一部分不可见，第一层包括镂空区，以显示对应该镂空区的区域的第二层；检测用户对第二层的滚动操作；根据该滚动操作，移动第二层的位置，以改变由镂空区显示的第二层的内容。

进一步地，还包括以下步骤：所述第二层包括初始显示区；根据该初始显示区，设置镂空区在第一层上的初始位置，使得镂空区显示第二层的初始显示区的至少一部分。

进一步地，还包括以下步骤：所述第二层包括初始显示区；根据该初始显示区，设置第二层相对于第一层的初始位置，以使得镂空区显示第二层的初始显示区的至少一部分。

进一步地，还包括以下步骤：获取用于显示列表式界面的用户终端的显示屏的分辨率；根据显示屏的分辨率，设置第二层的显示宽度，以使得第二层的显示宽度与显示屏的分辨率的宽度一致。

进一步地，还包括以下步骤：获取用于显示列表式界面的用户终端的机型信息；利用该机型信息查询对应该用户终端的显示屏的分辨率和PPI；基于该显示屏的分辨率和PPI，设置镂空区的高度。

进一步地，还包括以下步骤：检测用户对第二层的选择操作；根据该选择操作，更改第一层的透明度，以使得第二层可见。

根据本发明的第二个方面，提供了一种列表式界面的多层展示系统，包括：第一模块，以层叠的方式显示用于显示列表式界面的第一层和用于显示广告的第二层，其中第一层覆盖在第二层上，以使得第二层的至少一部分不可见，第一层包括显示对应该镂空区的区域的第二层的镂空区；第二模块，检测用户对第二层的滚动操作；以及第三模块，根据该滚动操作，移动第二层的位置，以改变由镂空区显示的第二层的内容。

本发明的有益效果在于，将大幅的图像内容(例如广告)设置在底层，且通过滑动窗口漏空展示广告的展示方式，提高了空间利用率和用户体验。

附图说明

图1是根据本发明一个或多个实施例的第一层和第二层的层叠前的示意图；

图2是根据本发明一个或多个实施例的第一层和第二层的层叠后的示意图；

图3是根据本发明一个或多个实施例的滚动操作以移动第二层的示意图；

图4是根据本发明一个或多个实施例的流程图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

本领域普通技术人员可以意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、或者计算机软件和电子硬件的结合来实现。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本发明的范围。

参照图1-4所示，根据本发明的第一实施例，提供了一种列表式界面的多层展示方法，包括以下步骤：以层叠的方式显示用于显示列表式界面的第一层1和用于显示图像的第二层2，其中第一层1覆盖在第二层2上，以使得第二层2的至少一部分不可见，第一层1包括镂空区11，以显示对应该镂空区11的区域的第二层2；检测用户对第二层2的滚动操作；根据该滚动操作，移动第二层2的位置，以改变由镂空区11显示的第二层2的内容。由此将例如广告等大幅的图像内容设置在底层(即第二层2)，且通过滑动窗口漏空展示广告的展示方式，提高了空间利用率和用户体验。

图1表示是根据本发明一个或多个实施例的第一层1和第二层2的层叠前的示意图。在本实施例中，位于顶层的第一层1采用竖向显示的列表条目，横向显示的文字(及小幅图片)的布局，因此竖排列表可以包含比较多的信息。列表的条目数可以没有限制，可以通过上下滑动查看更多内容。通常情况下，列表的条目以呈现文字信息为主，并提供通向下一级菜单的超链接，为了提高信息的总量，根据列表式界面排版的一般性原则，单条目的高度受到了限制，无法显示较大篇幅的图片。第一层1包括一处或多处的透明度低于100％的镂空区11(优选为低于50％，最优选为0％，即全透明)，以显示位于该镂空区11下层的第二层2。位于底层的第二层2用于显示单幅的较大篇幅的图片或视频等图像信息。检测用户对第二层2的滚动操作，例如采用鼠标或触控屏幕来拖动对应第二层2的滚动条12等；根据该滚动操作，相应地移动第二层2的位置，如图3所示，沿着箭头A的方向向下拖动滚动条12，则第二层2的位置相对于第一层1整体向下移动，由此可以改变由镂空区11显示的第二层2的内容。

根据本发明的一个或多个实施例，还包括以下步骤：第二层2包括初始显示区21；根据该初始显示区21，设置镂空区11在第一层1上的初始位置，使得镂空区11显示第二层2的初始显示区21的至少一部分。具体而言，第二层2除了包括较大篇幅的图像外，还包括用于在初始状态时其位置对应第一层1的镂空区11位置的初始显示区21。由于镂空区11的尺寸小于第二层2的整体的尺寸，一次只能显示第二层2的一部分，因此，设计者往往希望在初始状态时能在镂空区11显示第二层2的图像最重要的部分(例如人物的面部或产品的LOGO等)。为此在第二层2的初始阶段，先读取用于第二层2的图像，再读取预设的初始显示区21配置文件，根据该初始显示区21的位置来设定第一层1的镂空区11在第一层1中的位置(例如位于第几条目)。

根据本发明的一个或多个实施例，还包括以下步骤：第二层2包括初始显示区21；根据该初始显示区21，设置第二层2相对于第一层1的初始位置，以使得镂空区11显示第二层2的初始显示区21的至少一部分。具体而言，第二层2除了包括较大篇幅的图像外，还包括用于在初始状态时其位置对应第一层1的镂空区11位置的初始显示区21。由于镂空区11的尺寸小于第二层2的整体的尺寸，一次只能显示第二层2的一部分，因此，设计者往往希望在初始状态时能在镂空区11显示第二层2的图像最重要的部分(例如人物的面部或产品的LOGO等)。为此在第二层2的初始阶段，先读取用于第二层2的图像，再读取预设的初始显示区21配置文件，根据该初始显示区21的位置来设定第二层2相对于第一层1的初始位置(例如第二层2的顶部高度位置的初始值与第一层1的顶部高度位置的初始值的差值)。

根据本发明的一个或多个实施例，还包括以下步骤：获取用于显示列表式界面的用户终端的显示屏的分辨率；根据显示屏的分辨率，设置第二层2的显示宽度，以使得第二层2的显示宽度与显示屏的分辨率的宽度一致。

根据本发明的一个或多个实施例，还包括以下步骤：获取用于显示列表式界面的用户终端的机型信息；利用该机型信息查询对应该用户终端的显示屏的分辨率和PPI；基于该显示屏的分辨率和PPI，设置镂空区11的高度。具体而言，通常情况下浏览器或客户端无法直接获取显示设备的PPI信息，对此在本实施例中，间接地通过查询本设备的机型信息(例如厂商名及厂商规定的设备型号等)，基于该机型信息从远程服务器或者本地数据库查询对应该机型的分辨率和PPI，基于该显示屏的分辨率和PPI，设置镂空区11的高度或者第二层2的图像的缩放率(例如当分辨率为1920×1080，且PPI大于300时，将镂空区11的高度设置为2cm，或者将第二层2的图像的缩放率设置为原图像尺寸的1.5倍)，从而保证镂空区11内显示的图像效果为最佳。

应当注意的是，在本文中“分辨率”指的是屏幕显示的分辨率，被表示成每一个方向上的像素数量的形式，比如1920×1080表示横排具有1920个像素点，竖排具有1080个像素点。PPI表示“每英寸像素”。根据分辨率和PPI可以得知图像在屏幕上实际显示尺寸和精细度。

根据本发明的一个或多个实施例，还包括以下步骤：检测用户对第二层2的选择操作；根据该选择操作，更改第一层1的透明度，以使得第二层2可见。具体而言，当用户通过鼠标点击或者触控操作通过镂空区11选中第二层2时，降低第一层1整体的透明度(优选为低于50％；更优选为0％，即全透明)或者不显示第一层1，从而使得第二层2可见，以最大面积地展示位于第二层2的图像。

根据本发明的第二个方面，提供了一种列表式界面的多层展示系统，包括：第一模块，以层叠的方式显示用于显示列表式界面的第一层1和用于显示广告的第二层2，其中第一层1覆盖在第二层2上，以使得第二层2的至少一部分不可见，第一层1包括显示对应该镂空区11的区域的第二层2的镂空区11；第二模块，检测用户对第二层2的滚动操作；以及第三模块，根据该滚动操作，移动第二层2的位置，以改变由镂空区11显示的第二层2的内容。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统、装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

在本申请所提供的几个实施例中，应该理解到，所揭露的系统、装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接相合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本发明各个实施例中的各功能单元可以集成在二个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。

所述功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在二个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。

以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应所述以权利要求的保护范围为准。

Claims (7)

1.一种列表式界面的多层展示方法，其特征在于包括以下步骤：

以层叠的方式显示用于显示列表式界面的第一层和用于显示图像的第二层，其中第一层覆盖在第二层上，以使得第二层的至少一部分不可见，第一层包括镂空区，以显示对应该镂空区的区域的第二层；

检测用户对第二层的滚动操作；

根据该滚动操作，移动第二层的位置，以改变由镂空区显示的第二层的内容。

2.根据权利要求1所述的方法，其特征在于还包括以下步骤：

所述第二层包括初始显示区；

根据该初始显示区，设置镂空区在第一层上的初始位置，使得镂空区显示第二层的初始显示区的至少一部分。

3.根据权利要求1所述的方法，其特征在于还包括以下步骤：

所述第二层包括初始显示区；

根据该初始显示区，设置第二层相对于第一层的初始位置，以使得镂空区显示第二层的初始显示区的至少一部分。

4.根据权利要求1-3中任一项所述的方法，其特征在于还包括以下步骤：

获取用于显示列表式界面的用户终端的显示屏的分辨率；

根据显示屏的分辨率，设置第二层的显示宽度，以使得第二层的显示宽度与显示屏的分辨率的宽度一致。

5.根据权利要求1-3中任一项所述的方法，其特征在于还包括以下步骤

获取用于显示列表式界面的用户终端的机型信息；

利用该机型信息查询对应该用户终端的显示屏的分辨率和PPI；

基于该显示屏的分辨率和PPI，设置镂空区的高度。

6.根据权利要求1-3中任一项所述的方法，其特征在于还包括以下步骤：

检测用户对第二层的选择操作；

根据该选择操作，更改第一层的透明度，以使得第二层可见。

7.一种列表式界面的多层展示系统，其特征在于包括：

第一模块，以层叠的方式显示用于显示列表式界面的第一层和用于显示广告的第二层，其中第一层覆盖在第二层上，以使得第二层的至少一部分不可见，第一层包括显示对应该镂空区的区域的第二层的镂空区；

第二模块，检测用户对第二层的滚动操作；以及

第三模块，根据该滚动操作，移动第二层的位置，以改变由镂空区显示的第二层的内容。