CN114546545A - 图文显示方法、装置、终端及存储介质 - Google Patents
图文显示方法、装置、终端及存储介质 Download PDFInfo
- Publication number
- CN114546545A CN114546545A CN202111322429.9A CN202111322429A CN114546545A CN 114546545 A CN114546545 A CN 114546545A CN 202111322429 A CN202111322429 A CN 202111322429A CN 114546545 A CN114546545 A CN 114546545A
- Authority
- CN
- China
- Prior art keywords
- picture
- text
- displaying
- display
- floating layer
- 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.)
- Granted
Links
- 238000000034 method Methods 0.000 title claims abstract description 80
- 238000007667 floating Methods 0.000 claims description 134
- 230000004044 response Effects 0.000 claims description 56
- 230000008859 change Effects 0.000 claims description 14
- 238000004590 computer program Methods 0.000 claims description 4
- 230000008569 process Effects 0.000 abstract description 31
- 230000003993 interaction Effects 0.000 abstract description 7
- 230000006870 function Effects 0.000 description 25
- 238000010586 diagram Methods 0.000 description 22
- 238000004891 communication Methods 0.000 description 11
- 230000007704 transition Effects 0.000 description 11
- 230000002093 peripheral effect Effects 0.000 description 10
- 230000001133 acceleration Effects 0.000 description 9
- 238000012545 processing Methods 0.000 description 9
- 230000003287 optical effect Effects 0.000 description 5
- 230000000007 visual effect Effects 0.000 description 5
- 230000007423 decrease Effects 0.000 description 4
- 238000013473 artificial intelligence Methods 0.000 description 3
- 239000000919 ceramic Substances 0.000 description 2
- 230000006835 compression Effects 0.000 description 2
- 238000007906 compression Methods 0.000 description 2
- 230000003247 decreasing effect Effects 0.000 description 2
- 230000000694 effects Effects 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 2
- 230000009467 reduction Effects 0.000 description 2
- 238000009877 rendering Methods 0.000 description 2
- 230000006978 adaptation Effects 0.000 description 1
- 230000003190 augmentative effect Effects 0.000 description 1
- 238000013500 data storage Methods 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 230000004927 fusion Effects 0.000 description 1
- 230000001788 irregular Effects 0.000 description 1
- 239000004973 liquid crystal related substance Substances 0.000 description 1
- 238000010801 machine learning Methods 0.000 description 1
- 230000005055 memory storage Effects 0.000 description 1
- 238000010295 mobile communication Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000006855 networking Effects 0.000 description 1
- 230000006641 stabilisation Effects 0.000 description 1
- 238000011105 stabilization Methods 0.000 description 1
Images
Classifications
-
- 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
- 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/04845—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 for image manipulation, e.g. dragging, rotation, expansion or change of colour
-
- 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
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是根据一示例性实施例示出的一种图文显示方法的实施环境示意图;
图2是根据一示例性实施例示出的一种图文显示方法的流程图;
图3是根据一示例性实施例示出的一种图文显示方法的流程图;
图4是根据一示例性实施例示出的一种图文显示界面的示意图;
图5是根据一示例性实施例示出的一种图文显示界面的示意图;
图6是根据一示例性实施例示出的一种图文显示界面变化过程的示意图;
图7是根据一示例性实施例示出的一种图文显示界面变化过程的示意图;
图8是根据一示例性实施例示出的一种图文显示方法的流程图;
图9是根据一示例性实施例示出的一种图文显示界面的示意图;
图10是根据一示例性实施例示出的一种图文显示装置的框图;
图11是根据一示例性实施例示出的一种终端的结构框图。
具体实施方式
为了使本领域普通人员更好地理解本公开的技术方案,下面将结合附图,对本公开实施例中的技术方案进行清楚、完整地描述。
需要说明的是,本公开的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象,而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换,以便这里描述的本公开的实施例能够以除了在这里图示或描述的那些以外的顺序实施。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反,它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。
本公开所涉及的数据可以为经用户授权或者经过各方充分授权的数据。
图1是本公开实施例提供的一种图文显示方法的实施环境示意图,参见图1,该实施环境包括:终端101和服务器102。
其中,终端101安装和运行有目标应用程序,该目标应用程序能够为用户提供图文内容显示功能,例如,该目标应用程序是社交媒体应用程序,用户能够在社交媒体应用程序中浏览图文内容。
可选地,终端101可以为智能手机、智能手表、台式电脑、手提电脑、虚拟现实终端、增强现实终端、无线终端和膝上型便携计算机等设备中的至少一种,终端101具有通信功能,可以接入有线网络或无线网络,终端101可以泛指多个终端中的一个,本实施例仅以终端101来举例说明。本领域技术人员可以知晓,上述终端的数量可以更多或更少。
其中,服务器102可以为目标应用程序提供后台服务的服务器,例如,为社交媒体应用程序提供线上图文内容分享的服务。可选地,服务器102可以是独立的物理服务器,也可以是多个物理服务器构成的服务器集群或者分布式文件系统,还可以是提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、内容分发网络(Content Delivery Network,CDN)、以及大数据和人工智能平台等基础云计算服务的云服务器。服务器102与终端101可以通过有线或无线通信方式进行直接或间接的连接,本申请实施例对此不作限定。可选地,上述服务器102的数量可以更多或更少,本申请实施例对此不加以限定。当然,服务器102还可以包括其他功能服务器,以便提供更全面且多样化的服务。
图2是根据一示例性实施例示出的一种图文显示方法的流程图,该方法应用于上述实施环境中的终端中。在本公开实施例中,以终端作为执行主体,对该图文显示方法进行介绍,如图2所示,该实施例包括以下步骤:
在步骤201中,终端在图文显示界面中,显示图文内容项中多张图片中的第一图片,在该第一图片的上层浮层区域中,显示该图文内容项的文字信息。
该图文显示界面是指响应于用户对任一已发布的图文内容项的点击操作而显示的界面,该界面的界面框架包括图文内容项的显示区域,该显示区域用于显示该图文内容项中的多张图片。
在本申请实施例中,该多张图片可以采用多种图片浏览模式来浏览,该多种图片浏览模式包括第一图片浏览模式和第二图片浏览模式,该第一图片浏览模式用于采用图片集形式显示该多张图片,并基于左右滑动进行多张图片的切换;该第二图片浏览模式用于采用长图片形式显示所述多张图片,并基于上下滑动进行多张图片的切换。
其中,该图文内容项的文字信息包括对该多张图片的文字描述信息,可选地,该图文内容项的文字信息还包括对该图文内容项的评论信息等。
在本申请实施例中,该上层浮层区域显示于该第一图片的上层,也即是,该上层浮层区域和第一图片在显示时,是通过不同容器进行显示的。在本申请实施例中,通过前后面板容器这种平行框架,来分别承载图片和文字信息,在背板容器放置图片,在面板容器放置文字信息,可选地,在面板容器中还放置有其他功能等。
可选地,该上层浮层区域的下边框与该图文显示界面的下边框重合,以便呈现抽屉式的显示效果。当然,该上层浮层区域的下边框可以与图文显示界面的下边框不重合,以便呈现一种浮窗的显示效果。
在步骤202中,终端响应于对该第一图片的第一滑动操作,收起该上层浮层区域中所显示的文字信息,显示该多张图片中的第二图片。
以图片浏览模式为第一图片浏览模式为例,在该第一图片浏览模式下,是基于左右滑动来进行图片切换的,该第一滑动操作是指对该第一图片的向左滑动操作或向右滑动操作,而以图片浏览模式为第二图片浏览模式为例,在该第二图片浏览模式下,基于上下滑动来进行图片切换的,该第一滑动操作是指对第一图片的向上滑动操作或向下滑动操作。基于该第一滑动操作的滑动方向,能够从该多张图片中确定出该第二图片。例如,当该第一滑动操作是向左滑动操作,则该第二图片是该多张图片中显示顺序在该第一图片之后的图片。
上述收起该上层浮层区域中所显示的文字信息是指隐藏该上层浮层区域,以使得该文字信息不再显示。基于上述步骤202中所涉及的前后面板容器这种平行框架,该收起是指收起面板,从而使得面板容器不再执行文字信息的显示。
在本公开实施例中,响应于该第一滑动操作,基于该第一滑动操作的滑动方向,在该图文显示界面中对该第一图片进行切换,同时,收起上层浮层区域,以显示完整的第二图片,该第二图片上不再显示文字信息,从而保证了完整的图片浏览体验。
本公开实施例提供的技术方案中,对于包括多张图片的图文内容项,通过第一滑动操作,在图文显示界面中收起文字信息的同时,即可从当前显示的图片切换至另一张图片来进行显示,通过上述技术方案,精简了图文显示过程中的用户操作的同时,保证了用户对多图片的图文内容的浏览体验,有效提高了人机交互效率。
上述图2对应的示例性实施例是对本公开实施例提供的图文显示方法的简要介绍。下面将通过另一示例性实施例,进一步详细说明该图文显示方法。
图3是根据一示例性实施例示出的一种图文显示方法的流程图,在本实施例中,执行主体为终端,以图文内容项中该多张图片基于左右滑动进行切换显示为例进行说明,如图 3所示,该实施例包括以下步骤:
在步骤301中,终端在图文显示界面中,显示图文内容项中多张图片中的第一图片,在该第一图片的上层浮层区域中,显示该图文内容项的文字信息。
该步骤301与上述步骤201同理。
在一些实施例中,该图文显示界面包括标题栏,该标题栏占据该图文显示界面顶端的固定区域,该标题栏显示有该图文内容项的相关信息,例如,该图文内容项发布者的用户头像。该标题栏中还显示有目标按钮,该目标按钮用于提供该图文内容项的目标功能,例如,用于提供在线分享功能的分享按钮、用于关注该图文内容项的发布者的关注按钮以及退出该图文显示界面的返回按钮等。在一些实施例中,在该图文显示界面显示有图片的情况下,该标题栏显示为透明状态,而该标题栏中显示的相关信息以及目标按钮显示为非透明状态,以便用户实施相应操作。
在一些实施例中,在显示该第一图片的同时,在该第一图片的上层显示有页数指示标记,用于指示当前所显示的第一图片在多张图片中的显示顺序,以使得用户能够根据显示需求进行图片切换操作。
在一些实施例中,该图文显示界面包括标题栏以及系统状态栏,该系统状态栏占据该图文显示界面顶端的固定区域,该标题栏位于该系统状态栏下方,该标题栏的上边框与该系统状态栏的下边框重合。其中,该系统状态栏用于显示该终端上系统运行的相关信息,例如,该终端为智能手机,该系统状态栏显示有该智能手机当前剩余电量、该智能手机当前联网状态以及当前时间等。在一些实施例中,在该图文显示界面显示有图片的情况下,该系统状态栏以及该标题栏均显示为透明状态,而该标题栏中显示的该图文内容项的相关信息、该目标按钮以及该系统状态栏显示的该终端上系统运行的相关信息,均显示为非透明状态,以便用户实施相应操作或浏览相关信息。
在一些实施例中,该上层浮层区域包括从上至下排列的文字描述区域和评论区域,该文字描述区域能够用于显示该图文内容项中的文字描述信息,该评论区域能够用于显示该图文内容项的评论。在一些实施例中,在该图文显示界面显示有图片的情况下,该文字描述区域显示为半透明状态。其中,该半透明状态是指:显示透明度设置在50%以上,100%以下。
在一些实施例中,该上层浮层区域的底端还显示有功能区域,该功能区域的下边框与该上层浮层区域的下边框重合。其中,该功能区域显示有多个功能按钮,该多个功能按钮能够提供针对该图文内容项的社交功能,例如,评论功能、点赞功能以及收藏功能等。
需要说明的是,该图文显示界面中该上层浮层区域以外的显示区域,用于显示该第一图片的部分图片,该部分图片的图片中心是该第一图片的图片中心,且,所该部分图片的图片中心与该显示区域的区域中心重合。也即是,该显示区域所显示的该部分图片始终是该第一图片的视觉中心区域,该视觉中心区域包括该第一图片的关键信息,被认为是显示的重点,基于此,保证了该图文显示界面中,在该上层浮层区域中显示文字信息的同时,该第一图片的关键信息始终被重点显示,用户同时浏览图片与文字信息的浏览体验得到保障,有效提升了高人机交互效率。
为了便于理解上述图文显示界面中该第一图片与该上层浮层区域之间的显示关系,本公开实施例提供了一种图文显示界面的示意图,参见图4,图4包括图(a)、图(b)和图(c)。
图4中图(a)显示了该第一图片与该上层浮层区域的显示层次位置关系,通过该图可以看出,终端通过背板来显示第一图片,而通过位于该背板上方的面板,来显示文字信息,面板的面积小于背板。
图4中图(b)和(c)显示了在图文显示界面中第一图片的图片中心,在不显示文字信息的情况下和显示文字信息的情况下的位置对比。在不显示该文字信息的情况下,该图文显示界面中仅显示该第一图片,也即是,如图(b)所示的全屏显示,可以看出,该第一图片的图片中心与该图文显示界面的中心重合;在显示该文字信息的情况下,该图文显示界面中的显示区域用于显示该第一图片的部分图片,也即是,如图(c)所示的部分显示,可以看出,部分图片的图片中心即是该第一图片的图片中心,并且,该部分图片的图片中心与该显示区域的区域中心重合。
在步骤302中,终端响应于对该第一图片的向左滑动操作,收起该上层浮层区域中所显示的文字信息,显示该多张图片中的第二图片。
在本公开实施例中,是以第一滑动操作为向左滑动操作为例进行说明,此时,第二图片为显示顺序位于该第一图片之后的图片为例。在一些实施例中,若第一滑动操作是向左滑动操作,则该第二图片为显示顺序位于该第一图片之前的图片。
在本公开实施例中,该终端响应于该向左滑动操作,在该图文显示界面中,从显示该第一图片,切换为显示该第二图片,同时,收起上层浮层区域,以显示完整的第二图片,该第二图片上不显示文字信息。其中,在显示该第二图片的状态下,该第二图片的图片中心与该图文显示界面的中心重合,也即是,该第二图片全屏显示。
可选地,在收起该上层浮层区域中所显示的文字信息,并显示该多张图片中的第二图片的状态下,响应于对该第二图片的向上滑动操作,该上层浮层区域中将重新显示该文字信息。
为了便于理解上述步骤301至步骤302所描述的图文显示界面的变化过程,本公开实施例提供了一种的图文显示界面的示意图,参见图5,图5包括图(a)和图(b)。
参见图5中图(a),该图文显示界面中的上层浮层区域从上至下排列有文字描述区域、评论区域以及功能区域,分别显示有该图文内容项的文字描述信息、对该图文内容项的评论以及针对该图文内容项的社交功能的多个功能按钮;在该上层浮层区域的上方,是该图文显示界面中用于显示该第一图片的显示区域,该显示区域中显示有该第一图片的部分图片,该部分图片的图片中心与该显示区域的区域中心重合。响应于该向左滑动操作,该上层浮层区域收起,该图文显示界面的中心与该第二图片的图片中心重合,也即是,该图文显示界面中所显示的该第二图片是全屏显示。
图5中图(a)是从显示该第一图片的部分图片以及文字信息,变化到全屏显示该第二图片且不显示该文字信息的过程。
在一些实施例中,该终端还能够响应于对该第一图片的点击操作,收起该上层浮层区域中所显示的文字信息,与此同时,该第一图片的图片中心与该图文显示界面的中心重合,该图文显示界面中从仅显示该第一图片的部分图片切换为全屏显示该第一图片,参见图5 中图(b)。
在步骤303中,终端响应于对该文字信息的向上滑动操作,显示该第一图片的上层浮层区域的尺寸随该向上滑动操作而发生变化,在变化后的该上层浮层区域中,显示该图文内容项的文字信息。
第二滑动操作是在该上层浮层区域中对该文字信息的向上滑动操作或者向下滑动操作,该第二滑动操作的方向决定了显示该上层浮层区域的尺寸。若该第二滑动操作是向上滑动操作,则该上层浮层区域的尺寸将变大,若该第二滑动操作是向下滑动操作,则该上层浮层区域的尺寸将变小。本公开实施例中,仅以第二滑动操作为向上滑动操作,从而使得上层浮层区域的尺寸逐渐变大为例进行说明。终端根据该向上滑动操作在该上层浮层区域中的接触点位置,能够确定该向上滑动操作所对应的上滑距离,进而确定变化后该上层浮层区域的上边框的目标位置,从而增大该上层浮层区域的显示尺寸,该上滑距离,即对应于该上层浮层区域的纵向显示尺寸增大的幅度。
在一些实施例中,该第二滑动操作是向下滑动操作。终端根据该向下滑动操作在该上层浮层区域中的接触点位置,能够确定该向下滑动操作所对应的下滑距离,进而确定变化后该上层浮层区域的上边框的目标位置,从而减小该上层浮层区域的显示尺寸。该下滑距离,即是该上层浮层区域的纵向显示尺寸减小的幅度。
其中,变化后的该上层浮层区域所能显示的文字信息的信息量也相应变化。该上层浮层区域的显示尺寸增大,则相较于变化前能够显示更多的文字信息,在变化的过程中随着该上层浮层区域的尺寸的增大而陆续显示;该上层浮层区域的尺寸减小,则变化前所显示的部分文字信息的在变化的过程中陆续被收起而不再显示。在本公开实施例中,该上层浮层区域中的评论区域的显示尺寸会根据该第二滑动操作而变化,并且,根据变化后的显示尺寸,该评论区域所显示的评论数量会相应变化。
为了便于理解上述的图文显示界面的变化过程,本公开实施例提供了一种图文显示界面变化过程的示意图,参见图6。
参见图6,响应于在上层浮层区域中对文字信息的向上滑动操作,该评论区域的尺寸变大,其中所显示的评论数量从一条变为三条。
在步骤304中,终端响应于该向上滑动操作,在该图文显示界面中变化后的该上层浮层区域以外的显示区域内,显示该第一图片的部分图片,该部分图片的图片中心是该第一图片的图片中心,且,所该部分图片的图片中心与该显示区域的区域中心重合。
在本公开实施例中,第二滑动操作是向上滑动操作。响应于该向上滑动操作,该上层浮层区域的尺寸增大,则该显示区域的尺寸减小,该显示区域所能显示的该部分图片的尺寸也随之减小。
在本公开实施例中,该显示区域用于显示该第一图片的部分图片,随着该显示区域的尺寸减小,则该显示区域中所显示的部分图片的尺寸随之减小,而变化过程中,该部分图片的图片中心始终是该第一图片的图片中心,也即是,该部分图片始终是该第一图片的视觉中心区域。基于此,保证该部分图片的图片中心与该显示区域的区域中心重合,使得在该上层浮层区域尺寸变化的过程中,用户始终能够看到该第一图片的中心区域。
参见图6,响应于在上层浮层区域中对文字信息的向上滑动操作,该评论区域的尺寸变大,其中的评论数量从一条变为三条,与此同时,随着该上层浮层区域中评论区域的尺寸逐渐变大,显示区域中所显示的该第一图片的部分图片的中心始终是该第一图片的图片中心。
在一些实施例中,第二滑动操作是向下滑动操作。响应于该向下滑动操作,该上层浮层区域的显示尺寸减小,则该显示区域的尺寸增大,该显示区域所能显示的该部分图片的尺寸也随增大。该显示区域中所显示的部分图片的尺寸增大的过程中,该第一图片的图片中心始终是该部分图片的图片中心,也即是,该部分图片始终是该第一图片的视觉中心区域。
对应于步骤201所涉及的前后面板容器这种平行框架,该上层浮层区域中对该文字信息的向上滑动操作或者向下滑动操作,对应于对面板的滑动操作,而在滑动面板的过程中,背板所显示的部分图片的图片中心始终与第一图片的图片中心保持一致,基于此,最大程度保证在查看文字时图片有效画面的呈现。
需要说明的是,上述步骤303与步骤304分别阐述了响应于该第二滑动操作,显示该文字信息以及显示该第一图片的变化过程,步骤303与步骤304之间不存在时序上的先后关系。
在步骤305中,终端响应于变化后的该上层浮层区域的上边框与该图文显示界面的标题栏的下边框之间的距离小于目标距离,则显示该标题栏从透明状态向非透明状态的过渡过程。
其中,当该上边框与该下边框之间的距离小于该目标距离,说明该上层浮层区域的尺寸已经超过目标大小,此时上层浮层区域大于该图文显示界面中用于显示该第一图片的显示区域,则认为该图文显示界面当前侧重显示该图文内容项的文字信息,因此,显示该标题栏从透明状态向非透明状态过渡,以提供流畅的视觉效果。其中,该目标距离可以根据用户习惯设定。
在一些实施例中,该图文显示界面包括标题栏以及系统状态栏,该系统状态栏占据该图文显示界面顶端的固定区域,该标题栏的上边框与该系统状态栏的下边框重合。响应于变化后的该上层浮层区域的上边框与该标题栏的下边框重合,则该标题栏以及系统状态栏均开始从透明状态向非透明状态过渡。
在本公开实施例中,该透明状态是指:显示透明度设置为100%;该非透明状态是指:显示透明度设置为0%;该半透明状态是指:显示透明度设置在50%以上,100%以下。从透明状态向非透明状态的过渡过程是指:从显示透明度为100%逐渐减小为0%;从半透明状态向非透明状态的过渡过程是指:显示透明度逐渐减小为0%。
在步骤306中,终端响应于变化后的该上层浮层区域的上边框与该标题栏的下边框重合,则将该处于透明状态的标题栏显示为非透明状态。
其中,在该第二滑动操作是向上滑动操作的情况下,该上层浮层区域的尺寸随着该向上滑动操作上滑距离的增大而增大,也即是,该上层浮层区域的上边框持续上移。当该上边框与该标题栏的下边框重合,则显示该第一图片的显示区域已经减小至消失,该标题栏明由透明状态栏显示为非透明状态,从而从视觉上来说,用户已经无法看到第一图片。在本公开实施例中,响应于变化后的该上层浮层区域的上边框与该标题栏的下边框之间重合,相应地,显示该上层浮层区域中的文字描述区域从半透明状态变为非透明状态。
在一些实施例中,该图文显示界面包括标题栏以及系统状态栏,该系统状态栏占据该图文显示界面顶端的固定区域,该标题栏的上边框与该系统状态栏的下边框重合。响应于变化后的该上层浮层区域的上边框与该标题栏的下边框重合,则该标题栏以及系统状态栏均从透明状态显示为非透明状态,该上层浮层区域、该标题栏以及该系统状态栏,共同占据该图文显示界面,此时的图文显示界面中不再能够观察到该第一图片。
在本公开实施例中,该透明状态是指:显示透明度设置为100%;该非透明状态是指:显示透明度设置为0%。
为了便于理解上述305至306所描述的图文显示界面中标题栏、系统状态栏以及文字描述区域的变化过程,本公开实施例提供了一种图文显示界面变化过程的示意图,参见图 7中图(a)、图(b)以及图(c)。
图7中图(a)的标题栏、系统状态栏均为透明状态,该文字描述区域显示为半透明状态;响应于对该上层浮层区域的向上滑动操作,图7中图(b)的标题栏以及系统状态栏显示为从透明状态向非透明状态的过渡状态(图中显示为半透明);响应于该上层浮层区域的上边框与该标题栏的下边框重合,图7中图(b)的标题栏以及系统状态栏显示为非透明状态,该文字描述区域也显示为非透明状态。
本公开实施例提供的技术方案中,对于包括多张图片的图文内容项,通过第一滑动操作,在图文显示界面中收起文字信息的同时,即可从当前显示的图片切换至另一张图片来进行显示,通过上述技术方案,精简了图文显示过程中的用户操作的同时,保证了用户对多图片的图文内容的浏览体验,有效提高了人机交互效率。
进一步地,响应于第二滑动操作,在同时显示该第一图片与该文字信息的过程中,保证了该图文显示界面中,在该上层浮层区域中显示文字信息的同时,该第一图片的关键信息始终被重点显示,用户同时浏览图片与文字信息的浏览体验得到保障,大大提升了高人机交互效率。
上述图3对应的实施例,是以图文内容项中多张图片基于左右滑动进行切换显示为例进行说明,接下来将通过又一示例性实施例,对本公开提供的图文显示方法进行介绍。
图8是根据一示例性实施例示出的一种图文显示方法的流程图,执行主体为终端,以图文内容项中多张图片基于上下滑动进行切换显示为例进行说明,如图8所示,该实施例包括以下步骤:
在步骤801中,终端在图文显示界面中,显示图文内容项中多张图片中的第一图片,在该第一图片的上层浮层区域中,显示该图文内容项的文字信息。
该步骤801与上述步骤301同理。
在公开实施例中,该多张图片以长图片的形式显示。该长图片由该多张图片从上到下连续排列组成,该多张图片的排列顺序对应于在该内容显示界面中的显示顺序。
在一些实施例中,由于该长图片中的多张图片是上下连续排列的,因此,在显示该第一图片时,若该第一图片的尺寸小于图文显示界面中用于显示图片的显示区域的尺寸,则在该显示区域中,会显示有该长图片中与该第一图片相接的其他部分图片。
在步骤802中,终端响应于对该第一图片的向上滑动操作,收起该上层浮层区域中所显示的文字信息,显示该多张图片中的第二图片。
在本公开实施例中,是以第一滑动操作为向上滑动操作为例进行说明,此时,第二图片为显示顺序位于该第一图片之后的图片为例。在一些实施例中,若第一滑动操作为向下滑动操作,则该第二图片为显示顺序位于该第一图片之前的图片。
在本公开实施例中,该终端响应于该向上滑动操作,在该图文显示界面中,从显示该第一图片,切换为显示该第二图片,同时,收起上层浮层区域,以显示完整的第二图片,该第二图片上不显示文字信息。其中,在显示该第二图片的状态下,该第二图片的图片中心与该图文显示界面的中心重合,也即是,该第二图片全屏显示。
可选地,若该第二图片为该多张图片中显示顺序位于最后的图片,也即是,该长图片中排列在最下方的图片,则响应于对该第二图片的向上滑动操作,在该上层浮层区域中,显示该图文内容项的文字信息。
在一些实施例中,该终端还能够响应于对该第一图片的点击操作,收起该上层浮层区域中所显示的文字信息,与此同时,该第一图片的图片中心与该图文显示界面的中心重合,该图文显示界面中从仅显示该第一图片的部分图片切换为全屏显示该第一图片。
在另一些实施例中,该终端还能够响应于对该第一图片的向左滑动操作,收起该上层浮层区域中所显示的文字信息,可选地,该第一图片的图片中心与该图文显示界面的中心重合,该图文显示界面中从仅显示该第一图片的部分图片切换为全屏显示该第一图片。
为了便于理解上述步骤801至步骤802所描述的图文显示界面的变化过程,本公开实施例提供了一种图文显示界面的示意图,图9包括图(a)、图(b)与图(c)。
参见图9中图(a),该图文内容项对应的长图片包括从上至下连续排列的第一图片、第二图片和第三图片。该图文显示界面中的上层浮层区域从上至下排列有文字描述区域、评论区域以及功能区域,分别显示有该图文内容项的文字描述信息、对该图文内容项的评论以及针对该图文内容项的社交功能的多个功能按钮;在该上层浮层区域的上方,是该图文显示界面中用于显示该第一图片的显示区域,该显示区域中显示有该第一图片的部分图片,该部分图片的图片中心与该显示区域的区域中心重合。响应于向上滑动操作,该上层浮层区域已收起,该图文显示界面的中心与该第二图片的图片中心重合,也即是,该图文显示界面中该第二图片全屏显示。其中,由于该第一图片、第二图片和该第三图片连续排列,且尺寸均小于该图文显示界面的尺寸,因此,在该第二图片全屏显示的同时,该第二图片上方显示有该第一图片的部分图片,该第二图片下方显示有该第三图片的部分图片。
图9中图(a),对应于步骤801至步骤802,从显示该第一图片的部分图片以及文字信息,变化到全屏显示该第二图片且不显示该文字信息的过程。
参见图9中图(b),该第三图片是该长图片的最后一张图片,也即是,该多张图片中显示顺序位于最后的图片,在显示该第三图片的情况下,响应于对该第三图片的向上滑动操作,显示该长图片向上滑动的同时,在该长图片的下方区域,该上层浮层区域开始显示之前已收起的该文字信息。
参见图9中图(c),该终端能够响应于对该第一图片的点击操作,收起该上层浮层区域中所显示的文字信息,与此同时,该第一图片的图片中心与该图文显示界面的中心重合,该图文显示界面中该第一图片从部分显示变为全屏显示。
在步骤803中,终端响应于对该文字信息的向上滑动操作,显示该第一图片的上层浮层区域的尺寸随该向上滑动操作而发生变化,在变化后的该上层浮层区域中,显示该图文内容项的文字信息。
本步骤的实现过程参考步骤303,在此不作赘述。
在步骤804,终端响应于该向上滑动操作,在该图文显示界面中变化后的该上层浮层区域以外的显示区域内,显示该第一图片的部分图片,该部分图片的图片中心是该第一图片的图片中心,且,所该部分图片的图片中心与该显示区域的区域中心重合。
本步骤的实现过程参考步骤304,在此不作赘述。
在步骤805,终端响应于变化后的该上层浮层区域的上边框与该图文显示界面的标题栏的下边框之间的距离小于目标距离,则显示该标题栏从透明状态向非透明状态的过渡过程。
本步骤的实现过程参考步骤305,在此不作赘述。
在步骤806中,终端响应于变化后的该上层浮层区域的上边框与该标题栏的下边框重合,则将该处于透明状态的标题栏显示为非透明状态。
本步骤的实现过程参考步骤306,在此不作赘述。
本公开实施例提供的技术方案中,对于包括多张图片的图文内容项,通过第一滑动操作,在图文显示界面中收起文字信息的同时,即可从当前显示的图片切换至另一张图片并显示,通过上述技术方案,精简了图文显示过程中的用户操作的同时,保证了用户对多图片的图文内容的浏览体验,有效提高了人机交互效率。
进一步地,响应于该第二滑动操作,在同时显示该第一图片与该文字信息的过程中,保证了该图文显示界面中,在该上层浮层区域中显示文字信息的同时,该第一图片的关键信息始终被重点显示,用户同时浏览图片与文字信息的浏览体验得到保障,大大提升了高人机交互效率。
图10是根据一示例性实施例示出的一种图文显示装置的框图。参见图10,该装置包括第一显示单元1001、文字显示单元1002和第二显示单元1003。
该第一显示单元1001,被配置为执行在图文显示界面中,显示图文内容项中多张图片中的第一图片;
该文字显示单元1002,被配置为执行在该第一图片的上层浮层区域中,显示该图文内容项的文字信息;
该第二显示单元1003,被配置为执行响应于对该第一图片的第一滑动操作,收起该上层浮层区域中所显示的文字信息,显示该多张图片中的第二图片。
在一种可能实施方式中,该第二显示单元1003被配置为执行:
在第一图片浏览模式下,响应于对该第一图片的向左滑动操作,收起该上层浮层区域中所显示的文字信息,显示该多张图片中的第二图片,该第一图片浏览模式用于采用图片集形式显示该多张图片。
在一种可能实施方式中,该文字显示单元1002被配置为执行:
响应于对该文字信息的第二滑动操作,显示该第一图片的上层浮层区域的尺寸随该第二滑动操作而发生变化,在变化后的该上层浮层区域中,显示该图文内容项的文字信息。
在一种可能实施方式中,该装置还包括:
图片显示单元,被配置为执行响应于该第二滑动操作,显示该第一图片的部分图片。
在一种可能实施方式中,该图片显示单元被配置为执行:
响应于该第二滑动操作,在该图文显示界面中变化后的该上层浮层区域以外的显示区域内,显示该第一图片的部分图片,该部分图片的图片中心是该第一图片的图片中心,且,该部分图片的图片中心与该显示区域的区域中心重合。
在一种可能实施方式中,该装置还包括:
收起单元,被配置为执行响应于对该第一图片的点击操作,收起该上层浮层区域中所显示的文字信息。
在一种可能实施方式中,该图文显示界面的标题栏显示为透明状态。
在一种可能实施方式中,该装置还包括:
标题栏显示单元,被配置为执行响应于变化后的该上层浮层区域的上边框与该标题栏的下边框重合,则将该处于透明状态的标题栏显示为非透明状态。
在一种可能实施方式中,该装置还包括:
标题栏过渡单元,被配置为执行响应于变化后的该上层浮层区域的上边框与该标题栏的下边框之间的距离小于目标距离,则显示该标题栏从透明状态向非透明状态的过渡过程。
在一种可能实施方式中,该上层浮层区域包括从上至下排列的文字描述区域和评论区域,该文字描述区域显示为半透明状态。
在一种可能实施方式中,该装置还包括:
第三显示单元,被配置为执行在第一图片浏览模式下,响应于对该第二图片的向上滑动操作,显示该上层浮层区域中所显示的文字信息,该第一图片浏览模式用于采用图片集形式显示该多张图片。
在一种可能实施方式中,该装置还包括:
第四显示单元,被配置为执行在第二图片浏览模式下,若该第二图片为显示顺序位于该多张图片最后的图片,响应于对该第二图片的向上滑动操作,在该上层浮层区域中,显示该图文内容项的文字信息,该第二图片浏览模式用于采用长图片形式显示该多张图片。
需要说明的是:上述实施例提供的图文显示装置在显示图文内容项时,仅以上述各功能模块的划分进行举例说明,实际应用中,可以根据需要而将上述功能分配由不同的功能模块完成,即将设备的内部结构划分成不同的功能模块,以完成以上描述的全部或者部分功能。另外,上述实施例提供的图文显示装置与图文显示方法实施例属于同一构思,其具体实现过程详见方法实施例,这里不再赘述。
通过上述技术方案,对于包括多张图片的图文内容项,通过第一滑动操作,在图文显示界面中收起文字信息的同时,即可从当前显示的图片切换至另一张图片并显示。通过上述技术方案,精简了图文显示过程中的用户操作的同时,保证了用户对包括多张图片的图文内容的浏览体验,有效提升了人机交互效率。
图11是本公开根据一示例性实施例示出的终端的结构框图。该终端1100可以是:智能手机、平板电脑、MP3播放器(Moving Picture Experts Group Audio Layer III,动态影像专家压缩标准音频层面3)、MP4(Moving Picture Experts Group Audio Layer IV,动态影像专家压缩标准音频层面4)播放器、笔记本电脑或台式电脑。终端1100还可能被称为用户设备、便携式终端、膝上型终端、台式终端等其他名称。
通常,终端1100包括有:处理器1101和存储器1102。
处理器1101可以包括一个或多个处理核心,比如4核心处理器、8核心处理器等。处理器1101可以采用DSP(Digital Signal Processing,数字信号处理)、FPGA(Field-Programmable Gate Array,现场可编程门阵列)、PLA(Programmable Logic Array,可编程逻辑阵列)中的至少一种硬件形式来实现。处理器1101也可以包括主处理器和协处理器,主处理器是用于对在唤醒状态下的数据进行处理的处理器,也称CPU(Central Processing Unit,中央处理器);协处理器是用于对在待机状态下的数据进行处理的低功耗处理器。在一些实施例中,处理器1101可以集成有GPU(Graphics Processing Unit,图像处理器), GPU用于负责显示屏所需要显示的内容的渲染和绘制。一些实施例中,处理器1101还可以包括AI(Artificial Intelligence,人工智能)处理器,该AI处理器用于处理有关机器学习的计算操作。
存储器1102可以包括一个或多个计算机可读存储介质,该计算机可读存储介质可以是非暂态的。存储器1102还可包括高速随机存取存储器,以及非易失性存储器,比如一个或多个磁盘存储设备、闪存存储设备。在一些实施例中,存储器1102中的非暂态的计算机可读存储介质用于存储至少一个程序代码,该至少一个程序代码用于被处理器1101所执行以实现本申请中方法实施例提供的图文显示方法中终端执行的过程。
在一些实施例中,终端1100还可选包括有:外围设备接口1103和至少一个外围设备。处理器1101、存储器1102和外围设备接口1103之间可以通过总线或信号线相连。各个外围设备可以通过总线、信号线或电路板与外围设备接口1103相连。具体地,外围设备包括:射频电路1104、显示屏1105、摄像头组件1106、音频电路1107、定位组件1108和电源110 9中的至少一种。
外围设备接口1103可被用于将I/O(Input/Output,输入/输出)相关的至少一个外围设备连接到处理器1101和存储器1102。在一些实施例中,处理器1101、存储器1102和外围设备接口1103被集成在同一芯片或电路板上;在一些其他实施例中,处理器1101、存储器1102和外围设备接口1103中的任意一个或两个可以在单独的芯片或电路板上实现,本实施例对此不加以限定。
射频电路1104用于接收和发射RF(Radio Frequency,射频)信号,也称电磁信号。射频电路1104通过电磁信号与通信网络以及其他通信设备进行通信。射频电路1104将电信号转换为电磁信号进行发送,或者,将接收到的电磁信号转换为电信号。可选地,射频电路1104包括:天线系统、RF收发器、一个或多个放大器、调谐器、振荡器、数字信号处理器、编解码芯片组、用户身份模块卡等等。射频电路1104可以通过至少一种无线通信协议来与其它终端进行通信。该无线通信协议包括但不限于:城域网、各代移动通信网络(2 G、3G、4G及5G)、无线局域网和/或WiFi(Wireless Fidelity,无线保真)网络。在一些实施例中,射频电路1104还可以包括NFC(Near Field Communication,近距离无线通信) 有关的电路,本申请对此不加以限定。
显示屏1105用于显示UI(User Interface,用户界面)。该UI可以包括图形、文本、图标、视频及其它们的任意组合。当显示屏1105是触摸显示屏时,显示屏1105还具有采集在显示屏1105的表面或表面上方的触摸信号的能力。该触摸信号可以作为控制信号输入至处理器1101进行处理。此时,显示屏1105还可以用于提供虚拟按钮和/或虚拟键盘,也称软按钮和/或软键盘。在一些实施例中,显示屏1105可以为一个,设置在终端1100的前面板;在另一些实施例中,显示屏1105可以为至少两个,分别设置在终端1100的不同表面或呈折叠设计;在另一些实施例中,显示屏1105可以是柔性显示屏,设置在终端1100的弯曲表面上或折叠面上。甚至,显示屏1105还可以设置成非矩形的不规则图形,也即异形屏。显示屏1105可以采用LCD(Liquid Crystal Display,液晶显示屏)、OLED(Organic Light-E mittingDiode,有机发光二极管)等材质制备。
摄像头组件1106用于采集图像或视频。可选地,摄像头组件1106包括前置摄像头和后置摄像头。通常,前置摄像头设置在终端的前面板,后置摄像头设置在终端的背面。在一些实施例中,后置摄像头为至少两个,分别为主摄像头、景深摄像头、广角摄像头、长焦摄像头中的任意一种,以实现主摄像头和景深摄像头融合实现背景虚化功能、主摄像头和广角摄像头融合实现全景拍摄以及VR(Virtual Reality,虚拟现实)拍摄功能或者其它融合拍摄功能。在一些实施例中,摄像头组件1106还可以包括闪光灯。闪光灯可以是单色温闪光灯,也可以是双色温闪光灯。双色温闪光灯是指暖光闪光灯和冷光闪光灯的组合,可以用于不同色温下的光线补偿。
音频电路1107可以包括麦克风和扬声器。麦克风用于采集用户及环境的声波,并将声波转换为电信号输入至处理器1101进行处理,或者输入至射频电路1104以实现语音通信。出于立体声采集或降噪的目的,麦克风可以为多个,分别设置在终端1100的不同部位。麦克风还可以是阵列麦克风或全向采集型麦克风。扬声器则用于将来自处理器1101或射频电路1104的电信号转换为声波。扬声器可以是传统的薄膜扬声器,也可以是压电陶瓷扬声器。当扬声器是压电陶瓷扬声器时,不仅可以将电信号转换为人类可听见的声波,也可以将电信号转换为人类听不见的声波以进行测距等用途。在一些实施例中,音频电路1107还可以包括耳机插孔。
定位组件1108用于定位终端1100的当前地理位置,以实现导航或LBS(LocationBas ed Service,基于位置的服务)。定位组件1108可以是基于美国的GPS(GlobalPositionin g System,全球定位系统)、中国的北斗系统、俄罗斯的格雷纳斯系统或欧盟的伽利略系统的定位组件。
电源1109用于为终端1100中的各个组件进行供电。电源1109可以是交流电、直流电、一次性电池或可充电电池。当电源1109包括可充电电池时,该可充电电池可以支持有线充电或无线充电。该可充电电池还可以用于支持快充技术。
在一些实施例中,终端1100还包括有一个或多个传感器1110。该一个或多个传感器1 110包括但不限于:加速度传感器1111、陀螺仪传感器1112、压力传感器1113、指纹传感器1114、光学传感器1115以及接近传感器1116。
加速度传感器1111可以检测以终端1100建立的坐标系的三个坐标轴上的加速度大小。比如,加速度传感器1111可以用于检测重力加速度在三个坐标轴上的分量。处理器1101 可以根据加速度传感器1111采集的重力加速度信号,控制显示屏1105以横向视图或纵向视图进行用户界面的显示。加速度传感器1111还可以用于游戏或者用户的运动数据的采集。
陀螺仪传感器1112可以检测终端1100的机体方向及转动角度,陀螺仪传感器1112可以与加速度传感器1111协同采集用户对终端1100的3D动作。处理器1101根据陀螺仪传感器1 112采集的数据,可以实现如下功能:动作感应(比如根据用户的倾斜操作来改变UI)、拍摄时的图像稳定、游戏控制以及惯性导航。
压力传感器1113可以设置在终端1100的侧边框和/或显示屏1105的下层。当压力传感器1113设置在终端1100的侧边框时,可以检测用户对终端1100的握持信号,由处理器110 1根据压力传感器1113采集的握持信号进行左右手识别或快捷操作。当压力传感器1113设置在显示屏1105的下层时,由处理器1101根据用户对显示屏1105的压力操作,实现对UI 界面上的可操作性控件进行控制。可操作性控件包括按钮控件、滚动条控件、图标控件、菜单控件中的至少一种。
指纹传感器1114用于采集用户的指纹,由处理器1101根据指纹传感器1114采集到的指纹识别用户的身份,或者,由指纹传感器1114根据采集到的指纹识别用户的身份。在识别出用户的身份为可信身份时,由处理器1101授权该用户执行相关的敏感操作,该敏感操作包括解锁屏幕、查看加密信息、下载软件、支付及更改设置等。指纹传感器1114可以被设置在终端1100的正面、背面或侧面。当终端1100上设置有物理按键或厂商Logo时,指纹传感器1114可以与物理按键或厂商Logo集成在一起。
光学传感器1115用于采集环境光强度。在一些实施例中,处理器1101可以根据光学传感器1115采集的环境光强度,控制显示屏1105的显示亮度。具体地,当环境光强度较高时,调高显示屏1105的显示亮度;当环境光强度较低时,调低显示屏1105的显示亮度。在另一个实施例中,处理器1101还可以根据光学传感器1115采集的环境光强度,动态调整摄像头组件1106的拍摄参数。
接近传感器1116,也称距离传感器,通常设置在终端1100的前面板。接近传感器111 6用于采集用户与终端1100的正面之间的距离。在一个实施例中,当接近传感器1116检测到用户与终端1100的正面之间的距离逐渐变小时,由处理器1101控制显示屏1105从亮屏状态切换为息屏状态;当接近传感器1116检测到用户与终端1100的正面之间的距离逐渐变大时,由处理器1101控制显示屏1105从息屏状态切换为亮屏状态。
本领域技术人员可以理解,图11中示出的结构并不构成对终端1100的限定,可以包括比图示更多或更少的组件,或者组合某些组件,或者采用不同的组件布置。
在示例性实施例中,还提供了一种包括程序代码的计算机可读存储介质,例如包括程序代码的存储器1102,上述程序代码可由终端1100的处理器1101执行以完成上述图文显示方法。可选地,计算机可读存储介质可以是只读内存(read-only memory,ROM)、随机存取存储器(random access memory),RAM)、只读光盘(compact-disc read-only memory,CD-ROM)、磁带、软盘和光数据存储设备等。
在示例性实施例中,还提供了一种计算机程序产品,包括一条或多条指令,该一条或多条指令由终端1100的一个或多个处理器执行,使得该终端1100能够执行上述实施例提供的图文显示方法。
在一些实施例中,本申请实施例所涉及的计算机程序可被部署在一个计算机设备上执行,或者在位于一个地点的多个计算机设备上执行,又或者,在分布在多个地点且通过通信网络互连的多个计算机设备上执行,分布在多个地点且通过通信网络互连的多个计算机设备可以组成区块链系统。
本领域技术人员在考虑说明书及实践这里公开的发明后,将容易想到本公开的其它实施方案。本公开旨在涵盖本公开的任何变型、用途或者适应性变化,这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的,本公开的真正范围和精神由下面的权利要求指出。
应当理解的是,本公开并不局限于上面已经描述并在附图中示出的精确结构,并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限制。
Claims (10)
1.一种图文显示方法,其特征在于,所述方法包括:
在图文显示界面中,显示图文内容项中多张图片中的第一图片;
在所述第一图片的上层浮层区域中,显示所述图文内容项的文字信息;
响应于对所述第一图片的第一滑动操作,收起所述上层浮层区域中所显示的文字信息,显示所述多张图片中的第二图片。
2.根据权利要求1所述的图文显示方法,其特征在于,所述响应于对所述第一图片的第一滑动操作,收起所述上层浮层区域中所显示的文字信息,显示所述多张图片中的第二图片包括:
在第一图片浏览模式下,响应于对所述第一图片的向左滑动操作,收起所述上层浮层区域中所显示的文字信息,显示所述多张图片中的第二图片,所述第一图片浏览模式用于采用图片集形式显示所述多张图片。
3.根据权利要求1所述的图文显示方法,其特征在于,所述在所述第一图片的上层浮层区域中,显示所述图文内容项的文字信息包括:
响应于对所述文字信息的第二滑动操作,显示所述第一图片的上层浮层区域的尺寸随所述第二滑动操作而发生变化,在变化后的所述上层浮层区域中,显示所述图文内容项的文字信息。
4.根据权利要求3所述的图文显示方法,其特征在于,所述方法还包括:
响应于所述第二滑动操作,显示所述第一图片的部分图片。
5.根据权利要求4所述的图文显示方法,其特征在于,所述响应于所述第二滑动操作,显示所述第一图片的部分图片包括:
响应于所述第二滑动操作,在所述图文显示界面中变化后的所述上层浮层区域以外的显示区域内,显示所述第一图片的部分图片,所述部分图片的图片中心是所述第一图片的图片中心,且,所述部分图片的图片中心与所述显示区域的区域中心重合。
6.根据权利要求1所述的图文显示方法,其特征在于,所述方法还包括:
响应于对所述第一图片的点击操作,收起所述上层浮层区域中所显示的文字信息。
7.一种图文显示装置,其特征在于,所述装置包括:
第一显示单元,被配置为执行在图文显示界面中,显示图文内容项中多张图片中的第一图片;
文字显示单元,被配置为执行在所述第一图片的上层浮层区域中,显示所述图文内容项的文字信息;
第二显示单元,被配置为执行响应于对所述第一图片的第一滑动操作,收起所述上层浮层区域中所显示的文字信息,显示所述多张图片中的第二图片。
8.一种终端,其特征在于,所述终端包括:
一个或多个处理器;
用于存储所述处理器可执行指令的存储器;
其中,所述处理器被配置为执行所述指令,以实现如权利要求1至6中任一项所述的图文显示方法。
9.一种计算机可读存储介质,其特征在于,当所述计算机可读存储介质中的指令由终端的处理器执行时,使得终端能够执行如权利要求1至6中任一项所述的图文显示方法。
10.一种计算机程序产品,其特征在于,包括一条或多条指令,所述一条或多条指令由终端的一个或多个处理器执行,使得所述终端能够执行如权利要求1至权利要求6中任一项所述的图文显示方法。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202111322429.9A CN114546545B (zh) | 2021-11-09 | 2021-11-09 | 图文显示方法、装置、终端及存储介质 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202111322429.9A CN114546545B (zh) | 2021-11-09 | 2021-11-09 | 图文显示方法、装置、终端及存储介质 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN114546545A true CN114546545A (zh) | 2022-05-27 |
CN114546545B CN114546545B (zh) | 2023-11-21 |
Family
ID=81668596
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202111322429.9A Active CN114546545B (zh) | 2021-11-09 | 2021-11-09 | 图文显示方法、装置、终端及存储介质 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN114546545B (zh) |
Cited By (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN115033148A (zh) * | 2022-06-13 | 2022-09-09 | 北京字跳网络技术有限公司 | 文档的显示方法、装置、电子设备和存储介质 |
CN115080172A (zh) * | 2022-07-20 | 2022-09-20 | 灵智信息服务(深圳)有限公司 | 图文数据集的浏览方法、计算机设备、存储介质 |
Citations (7)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN105975581A (zh) * | 2016-05-05 | 2016-09-28 | 腾讯科技(北京)有限公司 | 媒体信息的展示方法、客户端及服务器 |
CN106383643A (zh) * | 2016-09-18 | 2017-02-08 | 浙江慧脑信息科技有限公司 | 一种同时浏览图片和文本的方法 |
CN111522492A (zh) * | 2020-04-30 | 2020-08-11 | 掌阅科技股份有限公司 | 图片滑动显示方法、终端及计算机存储介质 |
CN111782097A (zh) * | 2020-06-30 | 2020-10-16 | 北京达佳互联信息技术有限公司 | 图像资源切换方法及装置 |
CN113115096A (zh) * | 2021-03-18 | 2021-07-13 | 北京达佳互联信息技术有限公司 | 界面信息切换方法、装置、电子设备和存储介质 |
CN113176846A (zh) * | 2021-04-27 | 2021-07-27 | Oppo广东移动通信有限公司 | 一种图片显示方法、装置,设备及存储介质 |
CN113238706A (zh) * | 2021-05-10 | 2021-08-10 | 北京字跳网络技术有限公司 | 一种视图展示方法、装置、设备及介质 |
-
2021
- 2021-11-09 CN CN202111322429.9A patent/CN114546545B/zh active Active
Patent Citations (7)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN105975581A (zh) * | 2016-05-05 | 2016-09-28 | 腾讯科技(北京)有限公司 | 媒体信息的展示方法、客户端及服务器 |
CN106383643A (zh) * | 2016-09-18 | 2017-02-08 | 浙江慧脑信息科技有限公司 | 一种同时浏览图片和文本的方法 |
CN111522492A (zh) * | 2020-04-30 | 2020-08-11 | 掌阅科技股份有限公司 | 图片滑动显示方法、终端及计算机存储介质 |
CN111782097A (zh) * | 2020-06-30 | 2020-10-16 | 北京达佳互联信息技术有限公司 | 图像资源切换方法及装置 |
CN113115096A (zh) * | 2021-03-18 | 2021-07-13 | 北京达佳互联信息技术有限公司 | 界面信息切换方法、装置、电子设备和存储介质 |
CN113176846A (zh) * | 2021-04-27 | 2021-07-27 | Oppo广东移动通信有限公司 | 一种图片显示方法、装置,设备及存储介质 |
CN113238706A (zh) * | 2021-05-10 | 2021-08-10 | 北京字跳网络技术有限公司 | 一种视图展示方法、装置、设备及介质 |
Cited By (3)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN115033148A (zh) * | 2022-06-13 | 2022-09-09 | 北京字跳网络技术有限公司 | 文档的显示方法、装置、电子设备和存储介质 |
CN115033148B (zh) * | 2022-06-13 | 2024-04-19 | 北京字跳网络技术有限公司 | 文档的显示方法、装置、电子设备和存储介质 |
CN115080172A (zh) * | 2022-07-20 | 2022-09-20 | 灵智信息服务(深圳)有限公司 | 图文数据集的浏览方法、计算机设备、存储介质 |
Also Published As
Publication number | Publication date |
---|---|
CN114546545B (zh) | 2023-11-21 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN110602321B (zh) | 应用程序切换方法、装置、电子装置及存储介质 | |
CN111880712B (zh) | 页面显示方法、装置、电子设备及存储介质 | |
CN108449641B (zh) | 播放媒体流的方法、装置、计算机设备和存储介质 | |
CN111597008A (zh) | 弹窗管理方法、装置、终端及存储介质 | |
CN113127130B (zh) | 页面跳转方法、装置及存储介质 | |
CN112527287A (zh) | 物品详情信息展示方法、装置、终端及存储介质 | |
CN109922356B (zh) | 视频推荐方法、装置和计算机可读存储介质 | |
CN112181572A (zh) | 互动特效展示方法、装置、终端及存储介质 | |
CN108196755B (zh) | 背景图片显示方法及装置 | |
CN110288689B (zh) | 对电子地图进行渲染的方法和装置 | |
CN114546545B (zh) | 图文显示方法、装置、终端及存储介质 | |
CN112764654B (zh) | 组件的吸附操作方法、装置、终端及存储介质 | |
CN111694478A (zh) | 内容展示方法、装置、终端及存储介质 | |
CN112667835A (zh) | 作品处理方法、装置、电子设备及存储介质 | |
CN111368114A (zh) | 信息展示方法、装置、设备及存储介质 | |
CN108664300B (zh) | 一种画中画模式下的应用界面显示方法及装置 | |
CN112825040A (zh) | 用户界面的显示方法、装置、设备及存储介质 | |
CN112612405B (zh) | 窗口显示方法、装置、设备及计算机可读存储介质 | |
CN113886611A (zh) | 资源展示方法、装置、计算机设备及介质 | |
CN111370096A (zh) | 交互界面的显示方法、装置、设备及存储介质 | |
CN109032492B (zh) | 一种切歌的方法及装置 | |
CN116668790A (zh) | 视频播放方法、装置、电子设备以及存储介质 | |
CN111949341A (zh) | 展示信息的方法、装置、设备及存储介质 | |
CN111694535B (zh) | 闹钟信息显示方法及装置 | |
CN111464829B (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 | ||
GR01 | Patent grant | ||
GR01 | Patent grant |