CN106484242B - 界面的信息显示方法和装置 - Google Patents

界面的信息显示方法和装置 Download PDF

Info

Publication number
CN106484242B
CN106484242B CN201610832163.5A CN201610832163A CN106484242B CN 106484242 B CN106484242 B CN 106484242B CN 201610832163 A CN201610832163 A CN 201610832163A CN 106484242 B CN106484242 B CN 106484242B
Authority
CN
China
Prior art keywords
mask
list
clicked
screenshot picture
information
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
Application number
CN201610832163.5A
Other languages
English (en)
Other versions
CN106484242A (zh
Inventor
莫文
熊健南
毕磊
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing Jingdong Century Trading Co Ltd
Beijing Jingdong Shangke Information Technology Co Ltd
Original Assignee
Beijing Jingdong Century Trading Co Ltd
Beijing Jingdong Shangke Information Technology Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Beijing Jingdong Century Trading Co Ltd, Beijing Jingdong Shangke Information Technology Co Ltd filed Critical Beijing Jingdong Century Trading Co Ltd
Priority to CN201610832163.5A priority Critical patent/CN106484242B/zh
Publication of CN106484242A publication Critical patent/CN106484242A/zh
Priority to PCT/CN2017/092993 priority patent/WO2018049907A1/zh
Priority to US16/334,704 priority patent/US11112946B2/en
Application granted granted Critical
Publication of CN106484242B publication Critical patent/CN106484242B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

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
    • G06F3/0482—Interaction with lists of selectable items, e.g. menus
    • 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
    • G06F3/0483—Interaction with page-structured environments, e.g. book metaphor
    • 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/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
    • 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
    • G06F3/04883—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 for inputting data by handwriting, e.g. gesture or text
    • 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
    • G06F3/04886—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 by partitioning the display area of the touch-screen or the surface of the digitising tablet into independently controllable areas, e.g. virtual keyboards or menus
    • 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
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T13/00—Animation
    • G06T13/80—2D [Two Dimensional] animation, e.g. using sprites
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F2203/00—Indexing scheme relating to G06F3/00 - G06F3/048
    • G06F2203/048—Indexing scheme relating to G06F3/048
    • G06F2203/04804—Transparency, e.g. transparent or translucent windows
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T2200/00—Indexing scheme for image data processing or generation, in general
    • G06T2200/24—Indexing scheme for image data processing or generation, in general involving graphical user interfaces [GUIs]

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Software Systems (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本申请公开了一种界面的信息显示方法和装置，包括：在显示列表状态下，如果监测到有列表项被点击，则执行后续步骤：获取被点击的列表项的对象信息和位置；对当前页面进行截屏，生成截屏图片；全屏显示所述截屏图片，在所述截屏图片上显示第一蒙层，在所述第一蒙层上显示第二蒙层，该第二蒙层的高度小于所述第一蒙层；将所述截屏图片从全屏缩小到原尺寸的指定比例，从所述对象信息中获取对象缩略图，将该对象缩略图按照预定的大小显示在所述第二蒙层上的预定位置；从所述对象信息中获取详情信息，将该详情信息显示在所述第二蒙层上的空白区域；当所述第一蒙层和所述第二蒙层的非重叠区域被点击时，返回所述显示列表状态。本发明可以提高操作效率。

Description

界面的信息显示方法和装置
技术领域
本申请涉及信息显示技术领域，尤其涉及一种界面的信息显示方法和装置。
背景技术
目前，在触摸设备应用软件上，经常需要展示信息对象的详情，尤其是从一个对象列表跳转到特定的信息对象详情。
现有技术中，主要是页面跳转进行详情页展示的技术方案。
所述页面跳转进行详细页展示的技术方案包括：在列表页采用列表的方式展示列表项，当列表项中的一个对象被点击，则跳转至该对象对应的详情页展示被点击对象的详情；该详情页中有一个返回按钮，点击返回按钮后，则会跳回到列表页。
但是，现有技术存在以下缺点：
列表页和详情页属于两个不同的页面，在显示详情页并返回列表页的过程中需要在两个页面之间跳转，期间需要调用过多底层的页面调用信令，操作效率较低。而且，通常在手持触摸设备上，所述详情页是一个单独存在的页面，通常所述的返回按钮被设置在详情页的左上角，对于手持触摸设备来说，用手指去触碰该返回按钮是很困难的，用户操作起来很不方便，导致用户操作不流畅，效率较低。
发明内容
有鉴于此，本发明的主要目的是提供一种界面的信息显示方法，以提高操作效率。
本发明的技术方案是这样实现的：
一种界面的信息显示方法，包括：
在显示列表状态下，如果监测到有列表项被点击，则执行后续步骤：
获取被点击的列表项的对象信息和位置；
对当前页面进行截屏，生成截屏图片；
全屏显示所述截屏图片，在所述截屏图片上显示第一蒙层，在所述第一蒙层上显示第二蒙层，该第二蒙层的高度小于所述第一蒙层；
将所述截屏图片从全屏缩小到原尺寸的指定比例，从所述对象信息中获取对象缩略图，将该对象缩略图按照预定的大小显示在所述第二蒙层上的预定位置；从所述对象信息中获取详情信息，将该详情信息显示在所述第二蒙层上的空白区域；
当所述第一蒙层和所述第二蒙层的非重叠区域被点击时，返回所述显示列表状态。
在一种优选实施例中，所述第一蒙层初始为透明状态，所述第二蒙层初始为透明状态；当将所述对象缩略图显示在所述第二蒙层上时，将所述第一蒙层的透明度降低到第一指定值；当将所述详情信息显示在所述第二蒙层上时，将所述第二蒙层的透明度降低到第二指定值；所述第一指定值大于第二指定值。
在一种优选实施例中，所述第二指定值为0。
在一种优选实施例中，
所述将截屏图片从全屏缩小到原尺寸的指定比例，具体为动画渐变动作；
和/或，所述将对象缩略图按照预定的大小显示在所述第二蒙层上的预定位置，具体为：采用动画渐变动作，将对象缩略图从显示列表状态时的位置，逐渐移动到所述第二蒙层上的预定位置，且大小也逐渐变化为所述预定的大小；
和/或，所述将第一蒙层的透明度降低到第一指定值，具体为，采用动画渐变动作，将所述第一蒙层从初始透明状态渐变到所述透明度为第一指定值；
和/或，所述将第二蒙层的透明度降低到第二指定值，具体为，采用动画渐变动作，将所述第二蒙层从初始透明状态渐变到所述透明度为第二指定值。
在一种优选实施例中，当所述第一蒙层和所述第二蒙层的非重叠区域被点击时，返回所述显示列表的状态，具体包括：
将所述第二蒙层中的详情信息隐藏，将所述第二蒙层的透明度恢复为初始的透明状态，之后隐藏；
将所述详情页中的对象缩略图的大小缩放成显示列表状态时的列表缩略图大小；将所述详情页中的缩略图的位置移动到显示列表状态时的对应的列表项的位置；
将所述第一蒙层从当前透明度恢复为初始的透明状态，然后隐藏。
将所述已经缩小的截屏图片，放大至与屏幕大小一致，然后隐藏。
在一种优选实施例中，所述第一蒙层为黑色蒙层，所述第二蒙层为白色蒙层。
在一种优选实施例中，该方法进一步包括：
1A、当所述第二蒙层或对象缩略图的区域发生滚动事件时，执行后续步骤；
1B、判断所述第二蒙层的坐标与页面顶部位置的距离是否在缩小且达到指定的第一阈值，如果是则转到步骤1C，否则转到步骤1D；
1C、将所述对象缩略图随着滚动操作而逐渐缩小显示，最后隐藏，设置当前页面标题为所述被点击列表项的对象名称；
步骤1D、判断所述第二蒙层的坐标与页面顶部位置的距离是否在放大且达到指定的第二阈值，如果是则转到步骤1E，否则返回步骤1A。
步骤1E、隐藏标题栏，且将所述对象缩略图随着滚动操作而逐渐放大显示。
一种界面的信息显示装置，包括：
列表展示模块，用于显示列表状态，如果监测到有列表项被点击，则获取被点击的列表项的对象信息和位置，对当前页面进行截屏，生成截屏图片，触发详情展示模块；
详情展示模块，用于全屏显示所述截屏图片，在所述截屏图片上显示第一蒙层，在所述第一蒙层上显示第二蒙层，该第二蒙层的高度小于所述第一蒙层；将所述截屏图片从全屏缩小到原尺寸的指定比例，从所述对象信息中获取对象缩略图，将该对象缩略图按照预定的大小显示在所述第二蒙层上的预定位置；从所述对象信息中获取详情信息，将该详情信息显示在所述第二蒙层上的空白区域；当所述第一蒙层和所述第二蒙层的非重叠区域被点击时，触发列表展示模块显示列表状态。
在一种优选实施例中，所述第一蒙层初始为透明状态，所述第二蒙层初始为透明状态；
所述详情展示模块进一步用于：当将所述对象缩略图显示在所述第二蒙层上时，将所述第一蒙层的透明度降低到第一指定值；当将所述详情信息显示在所述第二蒙层上时，将所述第二蒙层的透明度降低到第二指定值；所述第一指定值大于第二指定值。
在一种优选实施例中，所述第二指定值为0。
与现有技术相比，本发明在同一页面利用动画操作来实现对被点击列表项对象的详情显示，不用进行页面之间的跳转，使得操作更加流畅，并且本发明利用两个蒙层之间的非重叠区域作为详情页返回操作的触发区，触发面积更大，非常方便手持触摸设备的单手操作，不但提高操作的流畅度，而且提高了操作效率。
附图说明
图1a为本发明所述界面的信息显示方法的一种流程图；
图1b为本发明所述界面的信息显示装置的组成示意图；
图2为本发明所述方法的从列表页进入详情页的处理流程图；
图3a为一种现实列表状态即列表页的界面示意图；
图3b所示为从显示列表状态过渡到详情页的界面示意图；
图3c所示为从详情页过渡到显示列表状态的界面示意图；
图4a是一种实际场景中从显示列表状态过渡到详情页的一种详情页界面示意图；
图4b为图4a所述详情页在页面向上滚动后的一种显示界面示意图；
图5为本发明所述方法的从详情页进入列表页的处理流程图。
具体实施方式
下面结合附图及具体实施例对本发明再作进一步详细的说明。
图1a为本发明所述界面的信息显示方法的一种流程图，参见图1a，该方法主要包括：
步骤201、在显示列表状态下，如果监测到有列表项被点击，则执行后续步骤：
步骤202、获取被点击的列表项的对象信息和位置；
步骤203、对当前页面进行截屏，生成截屏图片；
步骤204、全屏显示所述截屏图片，在所述截屏图片上显示第一蒙层，在所述第一蒙层上显示第二蒙层，该第二蒙层的高度小于所述第一蒙层；
步骤205、将所述截屏图片从全屏缩小到原尺寸的指定比例，从所述对象信息中获取对象缩略图，将该对象缩略图按照预定的大小显示在所述第二蒙层上的预定位置；从所述对象信息中获取详情信息，将该详情信息显示在所述第二蒙层上的空白区域；
步骤206、当所述第一蒙层和所述第二蒙层的非重叠区域被点击时，返回所述显示列表状态。
与上述方法对应的，本发明还公开了一种界面的信息显示装置。如图1b为本发明所述界面的信息显示装置的组成示意图，该界面的信息显示装置包括：
列表展示模块100，用于显示列表状态，如果监测到有列表项被点击，则获取被点击的列表项的对象信息和位置，对当前页面进行截屏，生成截屏图片，触发详情展示模块；
详情展示模块200，用于全屏显示所述截屏图片，在所述截屏图片上显示第一蒙层，在所述第一蒙层上显示第二蒙层，该第二蒙层的高度小于所述第一蒙层；将所述截屏图片从全屏缩小到原尺寸的指定比例，从所述对象信息中获取对象缩略图，将该对象缩略图按照预定的大小显示在所述第二蒙层上的预定位置；从所述对象信息中获取详情信息，将该详情信息显示在所述第二蒙层上的空白区域；当所述第一蒙层和所述第二蒙层的非重叠区域被点击时，触发列表展示模块显示列表状态。
在本发明的一种优选实施例中，所述第一蒙层为黑色蒙层，所述第二蒙层为白色蒙层。
在本发明的一种优选实施例中，所述第一蒙层初始为透明状态，所述第二蒙层初始为透明状态；当将所述对象缩略图显示在所述第二蒙层上时，将所述第一蒙层的透明度降低到第一指定值；例如所述第一蒙层初始的透明度为100％，所述第一指定值可以为40％；当将所述详情信息显示在所述第二蒙层上时，将所述第二蒙层的透明度降低到第二指定值；所述第一指定值大于第二指定值。例如所述第二蒙层初始的透明度为100％，所述第二指定值可以为0％，即不透明。
为了增强本发明所述详情页面的显示效果，使得用户看起来更加直观，有利于用户提高相关操作的操作效率，在本发明的一种优选实施例中，还可以对详情页的显示过程中增加动画操作。例如所述的动画操作可以包括以下几种：
所述将截屏图片从全屏缩小到原尺寸的指定比例，具体为动画渐变动作；
和/或，所述将对象缩略图按照预定的大小显示在所述第二蒙层上的预定位置，具体为：采用动画渐变动作，将对象缩略图从显示列表状态时的位置，逐渐移动到所述第二蒙层上的预定位置，且大小也逐渐变化为所述预定的大小；
和/或，所述将第一蒙层的透明度降低到第一指定值，具体为，采用动画渐变动作，将所述第一蒙层从初始透明状态渐变到所述透明度为第一指定值；
和/或，所述将第二蒙层的透明度降低到第二指定值，具体为，采用动画渐变动作，将所述第二蒙层从初始透明状态渐变到所述透明度为第二指定值。
在进一步的优选实施例中，当所述第一蒙层和所述第二蒙层的非重叠区域被点击时，返回所述显示列表的状态，也可以包括动画操作，具体包括：
将所述第二蒙层中的详情信息隐藏，将所述第二蒙层的透明度恢复为初始的透明状态，之后隐藏；
将所述详情页中的对象缩略图的大小缩放成显示列表状态时的列表缩略图大小；将所述详情页中的缩略图的位置移动到显示列表状态时的对应的列表项的位置；
将所述第一蒙层从当前透明度恢复为初始的透明状态，然后隐藏。
将所述已经缩小的截屏图片，放大至与屏幕大小一致，然后隐藏。
另外在又一种优选实施例中，本发明所述的方法在进行详情页显示时，还可以进一步包括根据用户观看需要而发出的滚动事件，来进一步调整详情页的显示状态，从而使得用户观看起来更加直观，操作效率更高。具体的步骤是在进行详情页显示时，包括：
1A、当所述第二蒙层或对象缩略图的区域发生滚动事件时，执行后续步骤；
1B、判断所述第二蒙层的坐标与页面顶部位置的距离是否在缩小且达到指定的第一阈值，如果是则转到步骤1C，否则转到步骤1D；
1C、将所述对象缩略图随着滚动操作而逐渐缩小显示，最后隐藏，设置当前页面标题为所述被点击列表项的对象名称；
1D、判断所述第二蒙层的坐标与页面顶部位置的距离是否在放大且达到指定的第二阈值，如果是则转到步骤1E，否则返回步骤1A。
1E、隐藏标题栏，且将所述对象缩略图随着滚动操作而逐渐放大显示。
通过本发明的所述技术方案，本发明在同一页面利用动画操作来实现对被点击列表项对象的详情显示，不用进行页面之间的跳转，使得操作更加流畅，并且本发明利用两个蒙层之间的非重叠区域作为详情页返回操作的触发区，触发面积更大，非常方便手持触摸设备的单手操作，不但提高操作的流畅度，而且提高了操作效率。
下面再根据附图进一步对本发明的处理流程做详细说明。
图2为本发明所述方法的从列表页进入详情页的处理流程图。参见图2，该流程具体包括：
步骤201、列表展示模块显示列表，如图3a所示为一种现实列表状态即列表页的界面示意图，此时的状态为显示列表状态，其中含有多个列表项，如图3a中的列表项31～35，其中每一个列表项对应一个对象，其中含有对象缩略图，如图3a中的封面就是对象缩略图。
步骤202、列表展示模块监控列表项点击事件。
步骤203、列表展示模块如果监测到有列表项被点击，则转到步骤204。例如此处假设列表项31倍点击。
步骤204、列表展示模块根据点击事件对象得到被点击列表项的对象信息(例如此处为列表项31的对象信息，本文中将该被点击列表项的对象信息标记为A)以及被点击列表项所处位置的坐标(本文中将该坐标标记为B，所述坐标通常是该被点击列表项的左上角坐标)，保存A和B到缓存中。所述对象信息例如可以包括：对象缩略图以及对象的介绍文字等。例如如果所述对象为图书，则所述缩略图可以是图书的封面，如果所述对象为商品，则所述缩略图可以是商品的图片等。
步骤205、列表展示模块将当前页面进行截屏，生成截屏图片(此处将该截屏图片标记为C)。
步骤206、详情展示模块获取被点击列表项的对象信息A和位置信息B。
如图3b所示为从显示列表状态过渡到详情页的界面示意图，下面结合图3b进行说明。
步骤207、详情展示模块为过渡到详情页前准备，主要包括：
01)全屏展示截屏图片C；
02)在截屏图片C上层展示第一蒙层即黑色蒙层(记为D)，透明度为100％，大小与C一致；
03)黑色蒙层D上，展示第二蒙层即白色蒙层(记为E)，宽度与C一致，高度为图片C的指定比例k，例如在一种优选实施例中所述白色蒙层E的高度为截屏图片C的五分之四，白色蒙层E的垂直坐标与屏幕底部对齐。
步骤208、详情展示模块启动动画，所述动画含两部分，该两部分动画同时启动。下面分别介绍：
第一部分动画包括：
11)截屏图片C从全屏缩小到原来的指定比例j，例如在一种优选实施例中，所述j＝4/5。
12)减小黑色蒙层D的透明度，例如可以将该黑色蒙层D的透明度从100％减小到40％，此减小的幅度可以根据实际情况设定。
第二部分动画包括：
21)从对象信息A中得到对象缩略图(记为F)，将该缩略图从所述被点击列表项的位置(即B)移动到详情页所设定的位置，大小也同时变为详情页所设定的大小。所述详情页所设定的位置和大小可以预先设定好。
22)白色蒙层E的透明度从100％到百分之0％，遮挡住下层的图像，并从对象信息A中读取对象的详情信息，在该白色蒙层E的上层显示该对象的详情信息，所述白色蒙层E和上面的详情信息构成了本发明所述的详情页，但是实际上该详情页不是一个页面，而只是一个图层。
到此为止，本发明所述点击某一个列表项所触发的详情信息显示方法已经完成，如图3b所示，此时如果用户点击所述白色蒙层E或者对象缩略图F，则不会返回到之前的显示列表状态(如图3a所示的状态)，如果用户点击所述黑色蒙层D与所述白色蒙层E的非重叠区域301，或者点击返回按钮，则会返回到之前的显示列表状态(如图3a所示的状态)。
如图4a是一种实际场景中从显示列表状态过渡到详情页的一种详情页界面示意图。其中，被点击列表项的对象缩略图401显示在详情页的指定位置，被点击列表项的详情信息显示在白色蒙层的空白区域402中。此时如果用户点击了白色蒙层和黑色蒙层的非重叠区域400，则会返回到显示列表状态。如果用户点击白色蒙层或对象缩略图，则不会返回到显示列表状态。由于所述非重叠区域400面积较大，用户单手持拿触控设备时，非常方便用户单手操作，提高了操作效率。
如果当前详情页需要显示的详情信息较多，还可以通过在详情页上进行滚动操作，使得详情页上下滚动从而显示更多的内容。
当用户在所述白色蒙层和对象缩略图上进行滚动操作时，还会有进一步实施例的显示方式，如下步骤209～步骤2015所示。
步骤209、详情展示模块监控页面滚动事件，所述滚动事件例如是用户用手指拖动所述白色蒙层E或对象缩略图的区域向上或向下滚动。
步骤2010、详情展示模块判断是否发生了滚动事件，如果是，则转到步骤2011。
步骤2011、详情展示模块获取白色蒙层E的坐标与页面顶部位置的距离。所述白色蒙层E的坐标通常为该白色蒙层E的左上角的坐标，当然也可以是白色蒙层E的右上角坐标或其他标志点位的坐标。
步骤2012、详情展示模块判断白色蒙层E的坐标与页面顶部位置的距离是否在缩小且达到指定的第一阈值，如果是则转到步骤2013，否则转到步骤2014。
步骤2013、将所述对象缩略图随着滚动操作而逐渐缩小显示，最后隐藏，设置当前页面标题为所述被点击列表项的对象名称，如图4b所示。
步骤2014、判断白色蒙层E的坐标与页面顶部位置的距离是否在放大且达到指定的第二阈值，如果是则转到步骤2015，否则返回步骤2010。
步骤2015、隐藏标题栏，且将所述对象缩略图随着滚动操作而逐渐放大显示。
这样所能实现的显示方式是：当详情页向上滚动时，白色蒙层E在靠近顶部时，对象缩略图慢慢缩小隐藏。当详情页向下滚动时，白色蒙层E离开顶部往下时，对象缩略图慢慢放大显示出来。
图5为本发明所述方法的从详情页进入列表页的处理流程图。参见图5，该流程具体包括：
步骤501、详情页展示模块展示详情页，例如如图3b或图4a所示。
步骤502、详情页展示模块监控所述黑色蒙层D与白色蒙层E的非重叠区域400是否被点击或返回按钮是否被点击，如果被点击则转到步骤503。
步骤503、进行动画准备操作，即从缓存中获取对象信息A和被点击列表项的位置B。
步骤504、启动动画步骤，如图3c所示为从详情页过渡到显示列表状态的界面示意图，该动画步骤主要包括：
31)将所述白色蒙层D中的详情信息隐藏，所述白色蒙层D的透明度从0逐渐恢复为初始的100％，之后隐藏；
32)将所述详情页中的缩略图F的大小慢慢缩放成如图3a所示显示列表状态时的列表缩略图大小；将所述详情页中的缩略图的位置慢慢移动到如图3a所示显示列表状态时的对应的列表项的位置B。
33)所述黑色蒙层D从当前透明度慢慢变成100％，然后隐藏。
34)所述已经缩小的截屏图C，慢慢放大至与屏幕大小一致，最后隐藏。
步骤505、动画结束，又恢复成由列表展示模块所展示的列表状态，如图3a所示。
本发明中，由于使用了列表页的截屏图片，让用户感觉虽然进入了详情页，但是实际上还没有离开列表页，列表页向详情页过渡时更加自然顺畅，返回是点击黑色蒙层和白色蒙层的非重叠区域，或者点击返回按钮，意图更加明显。
另外，在本发明各个实施例中的各功能模块可以集成在一个处理单元中，也可以是各个模块单独物理存在，也可以两个或两个以上模块集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。所述各实施例的功能模块可以位于一个终端或网络节点，或者也可以分布到多个终端或网络节点上。
另外，本发明的每一个实施例可以通过由数据处理设备如计算机执行的数据处理程序来实现。显然，数据处理程序构成了本发明。此外，通常存储在一个存储介质中的数据处理程序通过直接将程序读取出存储介质或者通过将程序安装或复制到数据处理设备的存储设备(如硬盘和或内存)中执行。因此，这样的存储介质也构成了本发明。存储介质可以使用任何类型的记录方式，例如纸张存储介质(如纸带等)、磁存储介质(如软盘、硬盘、闪存等)、光存储介质(如CD-ROM等)、磁光存储介质(如MO等)等。
因此本发明还公开了一种存储介质，其中存储有数据处理程序，该数据处理程序用于执行本发明上述方法的任何一种实施例。
另外，本发明所述的方法步骤除了可以用数据处理程序来实现，还可以由硬件来实现，例如，可以由逻辑门、开关、专用集成电路(ASIC)、可编程逻辑控制器和嵌入微控制器等来实现。因此这种可以实现本发明所述方法的硬件也可以构成本发明。
以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本发明保护的范围之内。

Claims (10)

1.一种界面的信息显示方法，其特征在于，包括：
在显示列表状态下，如果监测到有列表项被点击，则执行后续步骤：
获取被点击的列表项的对象信息和位置；
对当前页面进行截屏，生成截屏图片；
全屏显示所述截屏图片，在所述截屏图片上显示第一蒙层，在所述第一蒙层上显示第二蒙层，该第二蒙层的高度小于所述第一蒙层；
将所述截屏图片从全屏缩小到原尺寸的指定比例，从所述对象信息中获取对象缩略图，将该对象缩略图按照预定的大小显示在所述第二蒙层上的预定位置；从所述对象信息中获取详情信息，将该详情信息显示在所述第二蒙层上的空白区域；
当所述第一蒙层和所述第二蒙层的非重叠区域被点击时，返回所述显示列表状态。
2.根据权利要求1所述的方法，其特征在于，
所述第一蒙层初始为透明状态，所述第二蒙层初始为透明状态；
当将所述对象缩略图显示在所述第二蒙层上时，将所述第一蒙层的透明度降低到第一指定值；当将所述详情信息显示在所述第二蒙层上时，将所述第二蒙层的透明度降低到第二指定值；所述第一指定值大于第二指定值。
3.根据权利要求2所述的方法，其特征在于，所述第二指定值为0。
4.根据权利要求2所述的方法，其特征在于，
所述将截屏图片从全屏缩小到原尺寸的指定比例，具体为动画渐变动作；
和/或，所述将对象缩略图按照预定的大小显示在所述第二蒙层上的预定位置，具体为：采用动画渐变动作，将对象缩略图从显示列表状态时的位置，逐渐移动到所述第二蒙层上的预定位置，且大小也逐渐变化为所述预定的大小；
和/或，所述将第一蒙层的透明度降低到第一指定值，具体为，采用动画渐变动作，将所述第一蒙层从初始透明状态渐变到所述透明度为第一指定值；
和/或，所述将第二蒙层的透明度降低到第二指定值，具体为，采用动画渐变动作，将所述第二蒙层从初始透明状态渐变到所述透明度为第二指定值。
5.根据权利要求2所述的方法，其特征在于，当所述第一蒙层和所述第二蒙层的非重叠区域被点击时，返回所述显示列表的状态，具体包括：
将所述第二蒙层中的详情信息隐藏，将所述第二蒙层的透明度恢复为初始的透明状态，之后隐藏；
将详情页中的对象缩略图的大小缩放成显示列表状态时的列表缩略图大小；将所述详情页中的缩略图的位置移动到显示列表状态时的对应的列表项的位置；
将所述第一蒙层从当前透明度恢复为初始的透明状态，然后隐藏；
将已经缩小的所述截屏图片，放大至与屏幕大小一致，然后隐藏。
6.根据权利要求1-5任一项所述的方法，其特征在于，所述第一蒙层为黑色蒙层，所述第二蒙层为白色蒙层。
7.根据权利要求1-5任一项所述的方法，其特征在于，该方法进一步包括：
步骤1A、当所述第二蒙层或对象缩略图的区域发生滚动事件时，执行后续步骤；
步骤1B、判断所述第二蒙层的坐标与页面顶部位置的距离是否在缩小且达到指定的第一阈值，如果是则转到步骤1C，否则转到步骤1D；
步骤1C、将所述对象缩略图随着滚动操作而逐渐缩小显示，最后隐藏，设置当前页面标题为所述被点击的列表项的对象名称；
步骤1D、判断所述第二蒙层的坐标与页面顶部位置的距离是否在放大且达到指定的第二阈值，如果是则转到步骤1E，否则返回步骤1A；
步骤1E、隐藏标题栏，且将所述对象缩略图随着滚动操作而逐渐放大显示。
8.一种界面的信息显示装置，其特征在于，包括：
列表展示模块，用于显示列表状态，如果监测到有列表项被点击，则获取被点击的列表项的对象信息和位置，对当前页面进行截屏，生成截屏图片，触发详情展示模块；
详情展示模块，用于全屏显示所述截屏图片，在所述截屏图片上显示第一蒙层，在所述第一蒙层上显示第二蒙层，该第二蒙层的高度小于所述第一蒙层；将所述截屏图片从全屏缩小到原尺寸的指定比例，从所述对象信息中获取对象缩略图，将该对象缩略图按照预定的大小显示在所述第二蒙层上的预定位置；从所述对象信息中获取详情信息，将该详情信息显示在所述第二蒙层上的空白区域；当所述第一蒙层和所述第二蒙层的非重叠区域被点击时，触发列表展示模块显示列表状态。
9.根据权利要求8所述的装置，其特征在于，所述第一蒙层初始为透明状态，所述第二蒙层初始为透明状态；
所述详情展示模块进一步用于：当将所述对象缩略图显示在所述第二蒙层上时，将所述第一蒙层的透明度降低到第一指定值；当将所述详情信息显示在所述第二蒙层上时，将所述第二蒙层的透明度降低到第二指定值；所述第一指定值大于第二指定值。
10.根据权利要求9所述的装置，其特征在于，所述第二指定值为0。
CN201610832163.5A 2016-09-19 2016-09-19 界面的信息显示方法和装置 Active CN106484242B (zh)

Priority Applications (3)

Application Number Priority Date Filing Date Title
CN201610832163.5A CN106484242B (zh) 2016-09-19 2016-09-19 界面的信息显示方法和装置
PCT/CN2017/092993 WO2018049907A1 (zh) 2016-09-19 2017-07-14 界面的信息显示方法和装置
US16/334,704 US11112946B2 (en) 2016-09-19 2017-07-14 Interface information display method and apparatus

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201610832163.5A CN106484242B (zh) 2016-09-19 2016-09-19 界面的信息显示方法和装置

Publications (2)

Publication Number Publication Date
CN106484242A CN106484242A (zh) 2017-03-08
CN106484242B true CN106484242B (zh) 2019-09-20

Family

ID=58268735

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201610832163.5A Active CN106484242B (zh) 2016-09-19 2016-09-19 界面的信息显示方法和装置

Country Status (3)

Country Link
US (1) US11112946B2 (zh)
CN (1) CN106484242B (zh)
WO (1) WO2018049907A1 (zh)

Families Citing this family (20)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106484242B (zh) * 2016-09-19 2019-09-20 北京京东尚科信息技术有限公司 界面的信息显示方法和装置
CN108694180A (zh) * 2017-04-06 2018-10-23 阿里巴巴集团控股有限公司 提供页面内容的方法、装置及计算机***
CN107424136B (zh) * 2017-07-31 2022-06-28 北京酷我科技有限公司 一种Mac下图片高斯模糊的处理方法
CN107608592B (zh) * 2017-09-28 2020-12-25 Oppo广东移动通信有限公司 一种列表中的列表项的选择方法及装置
CN108255562B (zh) * 2018-01-15 2021-03-12 武汉斗鱼网络科技有限公司 页面跳转方法和装置
CN109388469A (zh) * 2018-10-11 2019-02-26 上海瀚之友信息技术服务有限公司 一种用户图片处理***及其方法
CN110164551B (zh) * 2019-05-24 2022-03-29 山东大学齐鲁医院 血液病智能诊疗辅助***
CN112650421B (zh) * 2019-10-12 2023-01-20 上海幻电信息科技有限公司 页面切换显示方法、装置及存储介质
CN110825286B (zh) * 2019-10-30 2021-09-03 北京字节跳动网络技术有限公司 图像处理方法、装置和电子设备
CN110825993B (zh) * 2019-10-30 2023-02-21 北京字节跳动网络技术有限公司 图片的显示方法、装置和电子设备
CN110888571B (zh) * 2019-10-31 2024-04-26 维沃移动通信有限公司 一种文件选中方法及电子设备
CN111161374A (zh) * 2019-12-17 2020-05-15 稿定（厦门）科技有限公司 圈点绘制的方法及装置
CN112051954A (zh) * 2020-10-12 2020-12-08 展讯通信(天津)有限公司 页面固定展示方法、装置、电子设备及存储介质
CN112651882B (zh) * 2021-01-15 2023-11-07 抖音视界有限公司 界面展示方法及装置、电子设备和计算机可读存储介质
CN115562558A (zh) * 2021-06-30 2023-01-03 华为技术有限公司 一种滚动截屏的方法及装置
CN113592872A (zh) * 2021-08-16 2021-11-02 北京字节跳动网络技术有限公司 一种图片展示的方法、装置以及计算机存储介质
CN114518832B (zh) * 2022-02-15 2024-05-28 网易（杭州）网络有限公司 触控终端的显示控制方法、装置及电子设备
CN115309300A (zh) * 2022-10-10 2022-11-08 荣耀终端有限公司 消息显示方法、电子设备及计算机可读存储介质
CN116737293B (zh) * 2022-11-04 2024-06-07 荣耀终端有限公司 一种电子设备切换页面的方法和电子设备
CN116450276B (zh) * 2023-06-09 2023-10-13 北京达佳互联信息技术有限公司 事件响应方法、装置、电子设备及介质

Citations (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US8285604B1 (en) * 2008-10-08 2012-10-09 Trandal David S Methods and systems for receipt management and price comparison

Family Cites Families (15)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US7765568B1 (en) * 1999-01-27 2010-07-27 The Directv Group, Inc. Graphical tuning bar
US20040054968A1 (en) * 2001-07-03 2004-03-18 Daniel Savage Web page with system for displaying miniature visual representations of search engine results
JP2004139440A (ja) * 2002-10-18 2004-05-13 Matsushita Electric Ind Co Ltd サービス提供システム及び、それに関する、装置または方法または記録媒体またはプログラム
CN101192230A (zh) * 2006-11-30 2008-06-04 重庆优腾信息技术有限公司 一种打开和关闭图片浏览窗口的方法及装置
KR101517618B1 (ko) * 2008-10-31 2015-05-04 삼성전자주식회사 웹 컨텐츠를 효율적으로 디스플레이하기 위한 장치 및 방법
KR101775027B1 (ko) * 2010-07-21 2017-09-06 삼성전자주식회사 컨텐트 공유 방법 및 장치
CN102929557B (zh) 2012-11-08 2016-08-03 东莞宇龙通信科技有限公司 终端和终端操控方法
CN104571813B (zh) 2014-12-12 2019-03-29 百度在线网络技术（北京）有限公司 一种信息的显示方法及装置
CN105759946B (zh) * 2014-12-17 2018-11-16 阿里巴巴集团控股有限公司 移动终端的交互方法和装置
KR20160076857A (ko) * 2014-12-23 2016-07-01 엘지전자 주식회사 이동 단말기 및 그의 컨텐츠 제어방법
CN104616158B (zh) * 2015-02-13 2018-10-19 北京京东尚科信息技术有限公司 生成商品详情页面的方法和装置
CN105095374A (zh) * 2015-06-30 2015-11-25 北京奇虎科技有限公司 移动终端新闻浏览的方法及装置
CN105426347A (zh) * 2015-10-29 2016-03-23 北京京东尚科信息技术有限公司 提供对象信息的方法、显示终端和服务器
CN105930489A (zh) 2016-04-29 2016-09-07 广东小天才科技有限公司 一种应用于电子终端的试题搜索方法和装置
CN106484242B (zh) 2016-09-19 2019-09-20 北京京东尚科信息技术有限公司 界面的信息显示方法和装置

Patent Citations (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US8285604B1 (en) * 2008-10-08 2012-10-09 Trandal David S Methods and systems for receipt management and price comparison

Also Published As

Publication number Publication date
US20190235711A1 (en) 2019-08-01
WO2018049907A1 (zh) 2018-03-22
US11112946B2 (en) 2021-09-07
CN106484242A (zh) 2017-03-08

Similar Documents

Publication Publication Date Title
CN106484242B (zh) 界面的信息显示方法和装置
US11706521B2 (en) User interfaces for capturing and managing visual media
US11770601B2 (en) User interfaces for capturing and managing visual media
AU2016238917B2 (en) Device, method, and graphical user interface for transitioning between display states in response to gesture
CN104317474B (zh) 窗口切换方法及装置
US8930852B2 (en) Touch screen folder control
JP6264293B2 (ja) 表示制御装置、表示制御方法及びプログラム
EP2887238B1 (en) Mobile terminal and method for controlling the same
KR101720849B1 (ko) 터치 스크린 호버 입력 핸들링
US8468460B2 (en) System and method for displaying, navigating and selecting electronically stored content on a multifunction handheld device
EP2715499B1 (en) Invisible control
CN103425390B (zh) 信息交互方法和装置
EP2613244A2 (en) Apparatus and method for displaying screen on portable device having flexible display
CN110716680A (zh) 智能交互平板的控制方法和装置
US9910584B2 (en) Method for manipulating folders and apparatus thereof
CN110427151A (zh) 一种控制用户界面的方法及电子设备
CN104238927B (zh) 智能终端应用程序的控制方法和装置
US10911825B2 (en) Apparatus and method for displaying video and comments
WO2014036927A1 (zh) 一种页面遮罩的实现方法及装置
CN104360789A (zh) 移动终端及其图标属性信息的显示方法
CN115065874A (zh) 视频播放方法、装置、电子设备和可读存储介质
CN105893023A (zh) 一种数据交互方法、数据交互装置和智能终端
CN106648340B (zh) 一种移动终端的显示控制方法及移动终端
CN103699381A (zh) 基于Firefox OS平台的微件设置方法及***
CN113835578A (zh) 显示方法、装置及电子设备

Legal Events

Date Code Title Description
C06 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant