CN117908716A

CN117908716A - 内容显示方法、装置、计算机设备及计算机可读存储介质

Info

Publication number: CN117908716A
Application number: CN202410078001.1A
Authority: CN
Inventors: 熊竹昕
Original assignee: Xiaohongshu Technology Co ltd
Current assignee: Xiaohongshu Technology Co ltd
Priority date: 2024-01-18
Filing date: 2024-01-18
Publication date: 2024-04-19

Abstract

本申请公开了一种内容显示方法、装置、计算机设备及计算机可读存储介质，通过在目标界面设置多个显示区域，具体通过第一区域和第二区域展示不同的媒体内容，并且，为显示层次设置在第一区域和第二区域之间的中间区域设置特定效果，即实现了对第一媒体内容和第二媒体内容的区别显示，避免混淆内容，也实现了第一区域与第二区域之间具有自然的过渡效果，从而实现两个区域之间的衔接更加自然柔和，使第一区域和第二区域之间更具有层次感，丰富了显示效果，提高了视觉效果，提升了用户的观感体验。

Description

内容显示方法、装置、计算机设备及计算机可读存储介质

技术领域

本申请涉及计算机技术领域，具体涉及一种内容显示方法、装置、计算机设备及计算机可读存储介质。

背景技术

随着计算机通信技术的不断发展，智能手机、电脑、平板电脑及笔记本电脑等终端的大量普及应用，终端向着多样化、个性化的方向发展，日益成为人们在生活与工作中不可或缺的设备。为了满足人们的日常需求和对精神生活的追求，一些能够承载有供用户进行信息浏览的娱乐平台的应用程序应运而生，用户可以通过手机或PDA等手持移动终端中的应用程序进行网上聊天、发邮件、发微博、浏览网页、应用搜索引擎进行查询或玩游戏等娱乐或工作操作，可以在应用程序中提供的信息显示页面进行媒体内容的显示。

现有技术中，用户可以通过应用程序提供的信息显示页面进行媒体内容的显示，例如在信息显示页面中显示第一区域和第二区域，第一区域显示文本，第二区域中显示图片，第一区域叠加显示在第二区域上，一方面叠加显示的效果难以保证(例如无法看清文本)，另一方面两个区域之间的衔接生硬，导致显示效果较为单一，视觉效果差，影响用户的观感体验。

发明内容

本申请实施例提供一种内容显示方法、装置、计算机设备及计算机可读存储介质，通过在目标界面设置多个显示区域，具体通过第一区域和第二区域展示不同的媒体内容，并且，为显示层次设置在第一区域和第二区域之间的中间区域设置特定效果，即实现了对第一媒体内容和第二媒体内容的区别显示，避免混淆内容，也实现了第一区域与第二区域之间具有自然的过渡效果，从而实现两个区域之间的衔接更加自然柔和，使第一区域和第二区域之间更具有层次感，丰富了显示效果，提高了视觉效果，提升了用户的观感体验。

本申请实施例提供了一种内容显示方法，该方法包括：

经由目标界面显示第一媒体内容和第二媒体内容，所述第一媒体内容与第二媒体内容相关联；

其中，所述目标界面包括具有显示层次的第一区域、第二区域和中间区域，所述第一区域、所述第二区域和所述中间区域之间至少存在部分重叠；所述第一区域用于显示所述第一媒体内容，所述第二区域用于显示第二媒体内容，所述中间区域用于作为所述第一媒体内容的显示背景，以区别显示所述第一媒体内容和所述第二媒体内容；所述中间区域的高度随所述第一区域的高度的变化而变化。

本申请实施例还提供了一种内容显示方法，该方法包括：

响应于选择目标评论信息，经由目标界面显示所述目标评论信息的第一媒体内容和所述目标评论信息的第二媒体内容，所述目标评论信息为目标用户账号发布的评论信息；

相应的，本申请实施例还提供了一种内容显示装置，该内容显示装置包括：

显示单元，用于经由目标界面显示第一媒体内容和第二媒体内容，所述第一媒体内容与第二媒体内容相关联；

响应单元，用于响应于选择目标评论信息，经由目标界面显示所述目标评论信息的第一媒体内容和所述目标评论信息的第二媒体内容，所述目标评论信息为目标用户账号发布的评论信息；

相应的，本申请实施例还提供一种计算机设备，其包括处理器和存储器，其中，所述存储器存储有计算机程序，当所述计算机程序被所述处理器执行时，使得所述处理器执行上述方面的各种可选实现方式中提供的内容显示方法的步骤。

相应的，本申请实施例还提供一种计算机可读存储介质，其包括计算机程序，当所述计算机程序在计算机设备上运行时，所述计算机程序用于使所述计算机设备执行上述方面的各种可选实现方式中提供的内容显示方法的步骤。

相应的，本申请实施例还提供一种计算机程序产品，包括计算机程序，所述计算机程序存储在计算机可读存储介质中；当计算机设备的处理器从所述计算机可读存储介质读取所述计算机程序时，所述处理器执行所述计算机程序，使得所述计算机设备执行上述方面的各种可选实现方式中提供的内容显示方法的步骤。

本申请实施例提供一种内容显示方法、装置、计算机设备及计算机可读存储介质，通过经由目标界面显示第一媒体内容和第二媒体内容，所述第一媒体内容与第二媒体内容相关联；其中，所述目标界面包括具有显示层次的第一区域、第二区域和中间区域，所述第一区域、所述第二区域和所述中间区域之间至少存在部分重叠；所述第一区域用于显示所述第一媒体内容，所述第二区域用于显示第二媒体内容，所述中间区域用于作为所述第一媒体内容的显示背景，以区别显示所述第一媒体内容和所述第二媒体内容；所述中间区域的高度随所述第一区域的高度的变化而变化。在本申请实施例中，通过在目标界面设置多个显示区域，具体通过第一区域和第二区域展示不同的媒体内容，并且，为显示层次设置在第一区域和第二区域之间的中间区域设置特定效果，即实现了对第一媒体内容和第二媒体内容的区别显示，避免混淆内容，也实现了第一区域与第二区域之间具有自然的过渡效果，从而实现两个区域之间的衔接更加自然柔和，使第一区域和第二区域之间更具有层次感，丰富了显示效果，提高了视觉效果，提升了用户的观感体验。

附图说明

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

图1是本申请实施例提供的内容显示方法系统的场景示意图。

图2a是技术提供的的内容显示方法的一种场景示意图。

图2b是本申请实施例提供的内容显示方法的一种流程示意图。

图3是本申请实施例提供的内容显示方法的一种场景示意图。

图4是本申请实施例提供的内容显示方法的另一种场景示意图。

图5是本申请实施例提供的内容显示方法的另一种场景示意图。

图6a是本申请实施例提供的内容显示方法的另一种场景示意图。

图6b是本申请实施例提供的内容显示方法的另一种场景示意图。

图6c是本申请实施例提供的内容显示方法的另一种场景示意图。

图7是本申请实施例提供的计算机设备的结构示意图。

具体实施方式

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

本公开实施例提供一种内容显示方法、装置、计算机设备及计算机可读存储介质。具体地，本公开实施例的内容显示方法可以由计算机设备执行，其中，该计算机设备可以为终端或者服务器等设备。该终端可以为智能手机、平板电脑、笔记本电脑、触控屏幕、游戏机、个人计算机(PC，Personal Computer)、个人数字助理(Personal Digital Assistant，PDA)等终端设备，终端还可以包括客户端，该客户端可以是应用客户端、携带有应用程序的浏览器客户端或即时通信客户端等。服务器可以是独立的物理服务器，也可以是多个物理服务器构成的服务器集群或者分布式系统，还可以是提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、CDN、以及大数据和人工智能平台等基础云计算服务的云服务器。

例如，当该内容显示方法运行于终端时，终端设备存储有应用程序并用于呈现应用程序提供的操作界面或应用页面。终端设备用于通过图形用户界面、应用页面或直播间页面与用户进行交互，例如通过终端设备下载安装应用程序并运行。该终端设备将图形用户界面、直播间选择页面或直播间页面提供给用户的方式可以包括多种，例如，可以渲染显示在终端设备的显示屏上，或者，通过全息投影呈现图形用户界面。例如，终端设备可以包括触控显示屏和处理器，该触控显示屏用于呈现图形用户界面以及接收用户作用于图形用户界面产生的操作指令，该处理器用于运行该应用程序、生成图形用户界面、响应操作指令以及控制图形用户界面在触控显示屏上的显示。

请参阅图1，图1为本公开实施例提供的一种内容显示系统的场景示意图。该系统可以包括至少一个终端，至少一个服务器，至少一个数据库，以及网络。用户持有的终端可以通过网络连接到不同应用程序的服务器。终端是具有计算硬件的任何设备，该计算硬件能够支持和执行与游戏对应的软件产品。另外，当系统包括多个终端、多个服务器、多个网络时，不同的终端可以通过不同的网络、通过不同的服务器相互连接。网络可以是无线网络或者有线网络，比如无线网络为无线局域网(WLAN)、局域网(LAN)、蜂窝网络、2G网络、3G网络、4G网络、5G网络等。另外，不同的终端之间也可以使用自身的蓝牙网络或者热点网络连接到其他终端或者连接到服务器等。例如，多个用户可以通过不同的终端在线从而通过适当网络连接并且相互同步，以支持多用户观看同一应用平台的信息。另外，该系统可以包括多个数据库，多个数据库耦合到不同的服务器，并且可以将与环境有关的信息在不同用户在线进行多用户观看时连续地存储于数据库中。

本公开实施例提供了一种内容显示方法，该方法可以由终端或服务器执行。本公开实施例以内容显示方法由终端执行为例来进行说明。其中，该终端可以包括触控显示屏和处理器(当然，终端也可以采用鼠标、键盘等外设作为输入设备，此处仅以触控显示屏为例进行说明)，该触控显示屏用于呈现图形用户界面(目标界面)以及接收用户作用于图形用户界面产生的操作指令。用户通过触控显示屏对图形用户界面进行操作时，该图形用户界面可以通过响应于接收到的操作指令控制终端本地的内容，也可以通过响应于接收到的操作指令控制对端服务器的内容。例如，用户作用于图形用户界面产生的操作指令包括用于启动应用程序的指令，处理器被配置为在接收到用户提供的启动应用程序的指令之后启动应用程序。此外，处理器被配置为在触控显示屏上渲染和绘制与应用程序相关联的图形用户界面。触控显示屏是能够感测屏幕上的多个点同时执行的触摸或者滑动操作的多触敏屏幕。用户在使用手指在图形用户界面上执行触控操作，图形用户界面在检测到触控操作时，控制图形用户界面中执行显示与触控操作对应的动作。

需要说明的是，图1所示的内容显示系统的场景示意图仅仅是一个示例，本公开实施例描述的信息输入框的处理系统以及场景是为了更加清楚的说明本公开实施例的技术方案，并不构成对于本公开实施例提供的技术方案的限定，本领域普通技术人员可知，随着新业务场景的出现，本公开实施例提供的技术方案对于类似的技术问题，同样适用。

基于上述问题，本公开实施例提供一种内容显示方法、装置、计算机设备及计算机可读存储介质，可以实现两个视图之间自然衔接，使视图之间更具有层次感，丰富了显示效果，提高了视觉效果，提升了用户的观感体验。以下分别进行详细说明。需说明的是，以下实施例的描述顺序不作为对实施例优选顺序的限定，本申请实施例提供的内容显示方法可以用于任何需要输入信息的场景，并不仅限于评论场景。

本公开实施例提供的内容显示方法的一种流程，该内容显示方法的具体流程可以如下：

例如，请参阅图2b，计算机设备经由目标界面显示第一媒体内容和第二媒体内容，所述第一媒体内容与第二媒体内容相关联，例如，第一媒体内容和第二媒体内容为同一平台用户发布的用户发布内容。其中，所述目标界面包括具有显示层次的第一区域、第二区域和中间区域，所述第一区域、所述第二区域和所述中间区域之间至少存在部分重叠；所述第一区域用于显示所述第一媒体内容，所述第二区域用于显示第二媒体内容，所述中间区域用于作为所述第一媒体内容的显示背景，以区别显示所述第一媒体内容和所述第二媒体内容；所述中间区域的高度随所述第一区域的高度的变化而变化。在一些实施例中，第一媒体内容可以为缩略显示状态的文本信息，该文本信息由发布该媒体内容的目标用户账号的账号头像标识、账号名称以及评论信息组成，第二媒体内容可以为图片信息。其中，所述第一区域的显示层级、高于所述第二区域的显示层级，中间区域的显示层级设置于第一区域和第二区域之间，第一区域设置在目标界面的底部位置，中间区域的显示位置与第一区域的显示位置相匹配。第一区域还包括第一样式的显示切换控件“展开”，通过触发该第一样式的显示切换控件“展开”，可以将缩略显示状态的文本信息、切换为展开显示状态的文本信息进行显示，从而扩大第一区域的视图尺寸(视图尺寸即显示尺寸)。

进一步的，第一区域的显示尺寸可以随着第一媒体内容的显示状态切换而进行变化。具体的，请参阅图3，用户可以通过目标界面对第一样式的显示切换控件“展开”执行触控操作，计算机设备响应于针对第一样式的显示切换控件“展开”的触控操作，确定展开显示状态的文本信息，并需要根据展开显示状态的文本信息所需的显示区域大小对第一区域的视图尺寸进行调整，从而显示调整后的第一区域，并在调整后的第一区域的内容显示子区域显示展开显示状态的文本信息，此时，将第一样式的显示切换控件“展开”切换为第二样式的显示切换控件“收起”进行显示，通过触发该第二样式的显示切换控件“收起”，可以将展开显示状态的文本信息切换为缩略显示状态的文本信息进行显示，同时，需要根据缩略显示状态的文本信息所需的显示区域大小对第一区域的视图尺寸进行调整。

根据上述介绍的内容，下面将举例来进一步说明本申请的内容显示方法，该内容显示方法的具体实施例如下所述。

在一具体实施例中，所述第一区域的视图尺寸小于所述第二区域的视图尺寸，所述第二区域的视图尺寸与所述目标界面的界面尺寸相匹配。

具体的，为了突出对第二媒体内容(例如图片或视频)的展示，避免第一媒体内容对第二媒体内容进行遮挡，因此可以将所述第一区域的视图尺寸小于所述第二区域的视图尺寸，所述第二区域的视图尺寸与所述目标界面的界面尺寸相匹配，以使第二媒体内容可以恰当显示。

在一具体实施例中，所述中间区域被配置有目标显示参数，以使所述中间区域的显示颜色区别于所述第一媒体内容和/或所述第二媒体内容，其中，所述目标显示参数基于所述第一媒体内容的显示参数和/或所述第二媒体内容的显示参数确定，所述目标显示参数包括目标显示颜色以及指定显示透明度。例如，当第一媒体内容和/或第二媒体内容的显示颜色均为白色时，可以将中间区域设置为灰色。

在一实施例中，所述目标显示参数还包括渐变效果参数，所述渐变效果参数用于指示所述中间区域的显示效果为自所述中间区域的一侧至所述中间区域的另一侧渐变显示。

具体的，所述第一区域包括内容显示子区域和控件显示子区域，所述内容显示子区域用于显示所述第一媒体内容，所述控件显示子区域用于显示互动组件。

例如，控件显示子区域可以包括信息输入框和评价控件，该信息输入框显示至少一个功能控件，可以在信息输入框中显示第一功能控件、第二功能控件、以及第三功能控件，具体显示方式按照实际需求设置。其中，第一功能控件为用户提醒控件，用于触发用户账号展示区域进行显示，用户可以通过用户账号展示区域选中目标用户账号以提醒目标用户账号的用户来查看信息；第二功能控件为表情展示控件，用于触发表情展示页面进行显示，所述表情展示页面显示有多个表情标识以供用户进行选择；第三功能控件为图片选择控件，用于触发图片展示页面进行显示，该图片展示页面可以包括多个相册内的图片或预设图片，还可以包括拍摄控件，用户可以通过图片展示页面选择目标图片，以在图片展示区域显示目标图片。进一步的，当检测到用户经由所述信息输入框输入用户输入信息时，则在信息输入框的已显示的功能控件附近显示发送控件，该发送控件用于对当前内容显示子区域接收的用户输入信息进行信息确定操作。

具体的，所述方法还包括：

当检测到所述所示第一媒体内容和/或所述互动组件发生变化时，对所述第一区域的显示尺寸进行更新，得到更新后的第一区域，并基于更新后的第一区域更新所述中间区域的显示尺寸，以得到更新后的中间区域。

例如，请参阅图2a，目标界面包括具有显示层次的第一区域、第二区域和中间区域，所述第一区域、所述第二区域和所述中间区域之间至少存在部分重叠，所述第一区域用于显示所述第一媒体内容，所述第二区域用于显示第二媒体内容，所述中间区域为一个设置有特定颜色的遮罩，且仅为该遮罩设置了一个特定颜色和特定透明度，从而得到一个具有半透明颜色效果的遮罩。然而，将中间区域设置为一个仅具有半透明颜色效果的遮罩，会在第一区域和第二区域的衔接处显示一条用户可以直观看到的分界线。为了改善这种情况，进一步的，可以设置一个具有颜色、透明度、以及颜色渐进效果的遮罩，此时，颜色渐进效果可以通过将遮罩的遮罩类型设置为两点线性类型或者散点曲线类型，该遮罩可以随着内容显示子区域的高度变化而变化，从而避免在第一区域和第二区域衔接处显示分界线，使衔接更自然。然而，上述还存在一个问题，也即第一区域中显示的文字内容和第二区域中显示的图片内容的交界处效果不好，存在看不清文字内容的情况，也无法兼容所有应用场景，因此，本申请实施例将中间区域设置为包括两个遮罩，具体为一个动态高度的第一遮罩、以及一个固定高度的第二遮罩。

为了实现第一区域和第二区域之间自然柔和的过渡效果，所述中间区域包括第一遮罩和第二遮罩，所述第一遮罩与所述第二遮罩相邻设置在所述中间区域中，其中，所述第一遮罩的至少部分位于所述第一区域和所述第二区域的重叠处，所述第二遮罩的至少部分位于所述第一区域和所述第二区域的交界处，所述第一遮罩被配置为随着所述第一区域的显示尺寸的调整而进行相应调整。第一遮罩和第二遮罩的数量均可以为一个或多个，例如当第一区域与第二区域有两个交界处，则对应可以配置两个第二遮罩。可以理解地，第一遮罩部分可以用于突出显示第一媒体内容，第二遮罩部分可以用于突出显示第二媒体内容。

例如，请参阅图4，中间区域包括第一遮罩和第二遮罩，所述第一遮罩与所述第二遮罩相邻设置在所述第一区域中，第一遮罩为动态遮罩，可以跟随第一区域中内容显示子区域和/或控件显示子区域的尺寸变化而变化，第二遮罩为固定遮罩，尺寸不发生变化。第一遮罩设置在第一区域靠近目标界面的底部位置的一端，第二遮罩相邻设置在第一遮罩的顶部位置。两个遮罩交界处的颜色是相匹配的，例如第一遮罩的顶部颜色与第二遮罩的底部颜色相同，从而使得两者之间过渡自然。

在一实施例中，所述第一遮罩的渐变显示参数和所述第二遮罩的渐变显示参数不同，所述渐变显示参数用于指示遮罩的颜色渐变方向以及对应的渐变趋势。例如，上述遮罩的遮罩类型可以为线性类型，或者可以散点曲线类型，所述遮罩类型用于指示遮罩的颜色渐变方向以及对应的渐变趋势。

例如，请参阅图6a，在本申请实施例中，第一遮罩的遮罩类型可以为线性类型，第二遮罩的遮罩类型可以为散点曲线类型，图6a左侧图用于显示第一媒体内容为缩略显示状态时的、线性类型的第一遮罩和散点曲线类型的第二遮罩的显示效果，图6a右侧图用于显示第一媒体内容为展开显示状态时的、线性类型的第一遮罩和散点曲线类型的第二遮罩的显示效果。

又例如，请参阅图6b，在本申请实施例中，可以将中间区域设置为一个线性类型的遮罩，图6b左侧图用于显示第一媒体内容为缩略显示状态时的、一个线性类型的遮罩的显示效果，图6b右侧图用于显示第一媒体内容为展开显示状态时的、一个线性类型的遮罩的显示效果。

又例如，请参阅图6c，在本申请实施例中，可以将中间区域设置为一个散点曲线类型的遮罩，图6c左侧图用于显示第一媒体内容为缩略显示状态时的、一个散点曲线类型的遮罩的显示效果，图6c右侧图用于显示第一媒体内容为展开显示状态时的、一个散点曲线类型的遮罩的显示效果。

基于上述可知，当中间区域是一个线性类型或散点曲线类型的遮罩时，会导致第一区域中显示的文字内容和第二区域中显示的图片内容的交界处效果不好，存在看不清文字内容的情况。因此，可以通过将中间区域设置为包括两个遮罩，具体为一个动态高度的第一遮罩、以及一个固定高度的第二遮罩，可以实现对第一媒体内容和第二媒体内容的区别显示，避免混淆内容，也实现了第一区域与第二区域之间具有自然的过渡效果，从而实现两个区域之间的衔接更加自然柔和。

在一实施例中，所述第一遮罩的高度基于所述第一区域的高度确定，以使所述第一遮罩和所述第二遮罩组合形成的目标遮罩的高度、等于或略高于所述第一区域的高度。

其中，第一遮罩的高度可以根据指示器的高度、控件显示子区域的高度、内容显示子区域的高度以及预定高度确定，具体的，可以将指示器的高度、控件显示子区域的高度、与内容显示子区域的高度之和，减去预定高度，从而得到第一遮罩的高度。指示器的位置设置在控件显示子区域的一侧(也即目标界面底部)。该指示器又叫HOME控件，是一个用于将显示界面切换回到主屏幕的控件。

例如，第一遮罩和第二遮罩组合形成的目标遮罩可以略高于第一区域的高度，以使第一区域与第二区域实现自然柔和的衔接效果。

在一实施例中，所述方法还包括：

当检测到所述第一媒体内容和/或所述互动组件发生变化时，对所述第一区域的显示尺寸进行更新，得到更新后的第一区域，并基于更新后的第一区域更新所述第一遮罩的遮罩尺寸，以得到更新后的第一遮罩。

例如，第一媒体内容可以为文本内容，当检测到文本内容的显示长度发生变化时，对所述第一区域的显示尺寸进行更新，得到更新后的第一区域；互动组件可以为信息输入框，当检测到信息输入框的显示高度发生变化时，可以对所述第一区域的显示尺寸进行更新，得到更新后的第一区域。

在一具体实施例中，步骤“所述第一区域还包括显示切换控件，所述显示切换控件用于切换所述内容显示子区域显示所述第一媒体内容的显示状态”，所述方法还包括：

响应于针对所述显示切换控件的触发操作，确定所述内容显示子区域中显示的第一媒体内容的待切换显示状态；

基于所述待切换显示状态确定目标区域尺寸；

基于所述目标区域尺寸调整所述内容显示子区域的区域尺寸、以及所述第一遮罩的遮罩尺寸，以在所述目标界面显示调整后的内容显示子区域、调整后的第一遮罩、以及所述第二遮罩。

具体的，步骤“所述响应于针对所述显示切换控件的触发操作，确定所述内容显示子区域中显示的第一媒体内容的待切换显示状态”，方法可以包括：

响应于针对所述显示切换控件的触发操作；

若所述内容显示子区域中显示的第一媒体内容为缩略显示状态，则确定所述内容显示子区域中显示的第一媒体内容的待切换显示状态为展开显示状态；

若所述内容显示子区域中显示的第一媒体内容为所述展开显示状态，则确定所述内容显示子区域中显示的第一媒体内容的待切换显示状态为所述缩略显示状态。

进一步的，步骤“所述基于所述待切换显示状态确定目标区域尺寸”，包括：

基于所述展开显示状态或所述缩略显示状态，确定第一区域尺寸或第二区域尺寸作为所述目标区域尺寸，其中，所述第一区域尺寸为所述内容显示子区域在显示所述展开显示状态下的第一媒体内容所需的区域尺寸，所述第二区域尺寸为所述内容显示子区域在显示所述缩略显示状态下的第一媒体内容所需的区域尺寸。

例如，请一并参阅图4和图5，用户可以通过目标界面对第一样式的显示切换控件“展开”执行触控操作，计算机设备响应于针对第一样式的显示切换控件“展开”的触控操作，确定所述内容显示子区域中显示的第一媒体内容的待切换显示状态为展开显示状态，基于展开显示状态确定第一目标区域尺寸，基于第一目标区域尺寸调整所述内容显示子区域的区域尺寸、以及所述第一遮罩的遮罩尺寸，以在所述目标界面显示的调整后的第一区域中显示调整后的内容显示子区域、调整后的第一遮罩、以及所述第二遮罩。

为了满足用户仅观看第二媒体内容“图片或视频”的要求，用户可以在目标界面进行触控操作，从而取消第一区域的显示，所述方法还包括：

响应于针对所述目标界面的触控操作，基于所述触控操作取消所述第一区域在所述目标界面上的显示。

例如，用户可以通过目标界面执行第一双击操作，计算机设备响应于针对所述目标界面的第一双击操作，基于第一双击操作取消所述第一区域在所述目标界面上的显示。进一步的，用户可以通过目标界面继续执行第二双击操作，计算机设备响应于针对所述目标界面的第二双击操作，基于第二双击操作还原所述第一区域在所述目标界面上的显示。

为了使用户可以全屏对图片进行放大或缩小查看，用户可以在目标界面触发长按操作和滑动操作对图片进行放大或缩小查看的同时，取消第一区域的显示。当滑动操作结束时，可以还原第二媒体内容的显示尺寸、以及还原第一区域的显示，所述方法还包括：

响应于针对所述目标界面的第一长按操作，基于所述第一长按操作取消所述第一区域在所述目标界面上的显示；

响应于与所述第一长按操作连续的第一滑动操作，基于所述第一滑动操作调整所述第二媒体内容的初始显示尺寸，以在所述第二区域中显示调整后的第二媒体内容；

当检测到所述第一滑动操作结束时，将所述第二区域中显示的所述调整后的第二媒体内容还原为所述第二媒体内容进行显示，并恢复所述第一区域在所述目标界面上的显示。

例如，用户可以通过目标界面执行第一长按操作，计算机设备响应于针对所述目标界面的第一长按操作，基于所述第一长按操作取消所述第一区域在所述目标界面上的显示。用户可以通过目标界面执行对图片放大处理对应的第一滑动操作，计算机设备响应于与所述第一长按操作连续的第一滑动操作，基于所述第一滑动操作调大所述第二媒体内容的初始显示尺寸，以在所述第二区域中显示放大后的第二媒体内容；当检测到所述第一滑动操作结束时，将所述第二区域中显示的所述放大后的第二媒体内容还原为所述第二媒体内容进行显示，并恢复所述第一区域在所述目标界面上的显示。

在另一实施例中，为了使用户可以全屏对图片进行放大或缩小查看，用户可以在目标界面触发长按操作和滑动操作对图片进行放大或缩小查看的同时，取消第一区域的显示。当滑动操作结束时，可以保持调整后的第二媒体内容的显示、以及还原第一区域的显示，所述方法还包括：

响应于针对所述目标界面的第二长按操作，基于所述第二长按操作取消所述第一区域在所述目标界面上的显示；

响应于与所述第二长按操作连续的第二滑动操作，基于所述第二滑动操作调整所述第二媒体内容的初始显示尺寸，以在所述第二区域中显示调整后的第二媒体内容；

当检测到所述第二滑动操作结束时，保持在所述第二区域中显示所述调整后的第二媒体内容，并恢复所述第一区域在所述目标界面上的显示。

例如，用户可以通过目标界面执行第二长按操作，计算机设备响应于针对所述目标界面的第二长按操作，基于所述第二长按操作取消所述第一区域在所述目标界面上的显示。用户可以通过目标界面执行对图片放大处理对应的第二滑动操作，计算机设备响应于与所述第二长按操作连续的第二滑动操作，基于所述第二滑动操作调大所述第二媒体内容的初始显示尺寸，以在所述第二区域中显示放大后的第二媒体内容；当检测到所述第二滑动操作结束时，保持在所述第二区域中显示所述调整后的第二媒体内容，并恢复所述第一区域在所述目标界面上的显示。

其中，所述第一媒体内容和所述第二媒体内容为文本内容、图片内容、视频内容或音频内容。

本公开实施例提供的内容显示方法的另一种流程，该内容显示方法的具体流程可以如下：

具体的，所述第一区域显示所述目标评论信息的第一媒体内容，所述第二区域显示所述目标评论信息的第二媒体内容，所述目标评论信息为目标用户账号发布的评论信息。

例如，计算机设备响应于选择目标评论信息，经由目标界面显示所述目标评论信息的第一媒体内容和所述目标评论信息的第二媒体内容，所述目标评论信息为目标用户账号发布的评论信息。所述第一媒体内容为所述目标评论信息的文本信息或音频信息，所述第二媒体内容为所述目标评论信息的图片信息、视频信息或音频信息。

需要说明的是，本申请实施例中提到的触控操作或触发操作，可以是单击操作、双击操作、长按操作、滑动操作、拖动操作等触控操作，在此仅为举例说明，更多操作方式不做赘述。

综上所述，本申请实施例提供一种内容显示方法，通过经由目标界面显示第一媒体内容和第二媒体内容，所述第一媒体内容与第二媒体内容相关联；其中，所述目标界面包括具有显示层次的第一区域、第二区域和中间区域，所述第一区域、所述第二区域和所述中间区域之间至少存在部分重叠；所述第一区域用于显示所述第一媒体内容，所述第二区域用于显示第二媒体内容，所述中间区域用于作为所述第一媒体内容的显示背景，以区别显示所述第一媒体内容和所述第二媒体内容；所述中间区域的高度随所述第一区域的高度的变化而变化。在本申请实施例中，通过在目标界面设置多个显示区域，具体通过第一区域和第二区域展示不同的媒体内容，并且，为显示层次设置在第一区域和第二区域之间的中间区域设置特定效果，即实现了对第一媒体内容和第二媒体内容的区别显示，避免混淆内容，也实现了第一区域与第二区域之间具有自然的过渡效果，从而实现两个区域之间的衔接更加自然柔和，使第一区域和第二区域之间更具有层次感，丰富了显示效果，提高了视觉效果，提升了用户的观感体验。

为便于更好的实施本公开实施例提供的内容显示方法，本公开实施例还提供一种基于上述内容显示方法的内容显示装置。其中名词的含义与上述内容显示方法中相同，具体实现细节可以参考方法实施例中的说明。

本公开实施例提供的内容显示装置的一种结构，该内容显示装置包括：

在一些实施例中，该内容显示装置包括处理子单元，用于：

所述中间区域被配置有目标显示参数，以使所述中间区域的显示颜色区别于所述第一媒体内容和/或所述第二媒体内容，其中，所述目标显示参数基于所述第一媒体内容的显示参数和/或所述第二媒体内容的显示参数确定，所述目标显示参数包括目标显示颜色以及指定显示透明度。

所述目标显示参数还包括渐变效果参数，所述渐变效果参数用于指示所述中间区域的显示效果为自所述中间区域的一侧至所述中间区域的另一侧渐变显示。

所述第一区域包括内容显示子区域和控件显示子区域，所述内容显示子区域用于显示所述第一媒体内容，所述控件显示子区域用于显示互动组件。

在一些实施例中，该内容显示装置包括处理子单元，用于：

所述中间区域包括第一遮罩和第二遮罩，所述第一遮罩与所述第二遮罩相邻设置在所述中间区域中，其中，所述第一遮罩的至少部分位于所述第一区域和所述第二区域的重叠处，所述第二遮罩的至少部分位于所述第一区域和所述第二区域的交界处，所述第一遮罩被配置为随着所述第一区域的显示尺寸的调整而进行相应调整。

所述第一遮罩的渐变显示参数和所述第二遮罩的渐变显示参数不同，所述渐变显示参数用于指示遮罩的颜色渐变方向以及对应的渐变趋势。

所述第一遮罩的高度基于所述第一区域的高度确定，以使所述第一遮罩和所述第二遮罩组合形成的目标遮罩的高度、等于或略高于所述第一区域的高度。

在一些实施例中，该内容显示装置包括处理子单元，用于：

基于所述待切换显示状态确定目标区域尺寸；

在一些实施例中，该内容显示装置包括处理子单元，用于：

响应于针对所述显示切换控件的触发操作；

在一些实施例中，该内容显示装置包括处理子单元，用于：

所述第一媒体内容和所述第二媒体内容为文本内容、图片内容、视频内容或音频内容。

本公开实施例公开了一种内容显示装置，通过显示单元经由目标界面显示第一媒体内容和第二媒体内容，所述第一媒体内容与第二媒体内容相关联；其中，所述目标界面包括具有显示层次的第一区域、第二区域和中间区域，所述第一区域、所述第二区域和所述中间区域之间至少存在部分重叠；所述第一区域用于显示所述第一媒体内容，所述第二区域用于显示第二媒体内容，所述中间区域用于作为所述第一媒体内容的显示背景，以区别显示所述第一媒体内容和所述第二媒体内容；所述中间区域的高度随所述第一区域的高度的变化而变化。在本申请实施例中，通过在目标界面设置多个显示区域，具体通过第一区域和第二区域展示不同的媒体内容，并且，为显示层次设置在第一区域和第二区域之间的中间区域设置特定效果，即实现了对第一媒体内容和第二媒体内容的区别显示，避免混淆内容，也实现了第一区域与第二区域之间具有自然的过渡效果，从而实现两个区域之间的衔接更加自然柔和，使第一区域和第二区域之间更具有层次感，丰富了显示效果，提高了视觉效果，提升了用户的观感体验。

相应的，本公开实施例还提供一种计算机设备，该计算机设备可以为终端或者服务器，该终端可以为智能手机、平板电脑、笔记本电脑、触控屏幕、游戏机、个人计算机(PC，Personal Computer)、个人数字助理(Personal Digital Assistant，PDA)等终端设备。如图7所示，图7为本公开实施例提供的计算机设备的结构示意图。该计算机设备300包括有一个或者一个以上处理核心的处理器301、有一个或一个以上计算机可读存储介质的存储器302及存储在存储器302上并可在处理器上运行的计算机程序。其中，处理器301与存储器302电性连接。本领域技术人员可以理解，图中示出的计算机设备结构并不构成对计算机设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。

处理器301是计算机设备300的控制中心，利用各种接口和线路连接整个计算机设备300的各个部分，通过运行或加载存储在存储器302内的软件程序和/或模块，以及调用存储在存储器302内的数据，执行计算机设备300的各种功能和处理数据，从而对计算机设备300进行整体监控。

在本公开实施例中，计算机设备300中的处理器301会按照如下的步骤，将一个或一个以上的应用程序的进程对应的指令加载到存储器302中，并由处理器301来运行存储在存储器302中的应用程序，从而实现各种功能：

在一实施例中，所述中间区域被配置有目标显示参数，以使所述中间区域的显示颜色区别于所述第一媒体内容和/或所述第二媒体内容，其中，所述目标显示参数基于所述第一媒体内容的显示参数和/或所述第二媒体内容的显示参数确定，所述目标显示参数包括目标显示颜色以及指定显示透明度。

在一实施例中，所述第一区域包括内容显示子区域和控件显示子区域，所述内容显示子区域用于显示所述第一媒体内容，所述控件显示子区域用于显示互动组件。

在一实施例中，所述方法还包括：

在一实施例中，所述中间区域包括第一遮罩和第二遮罩，所述第一遮罩与所述第二遮罩相邻设置在所述中间区域中，其中，所述第一遮罩的至少部分位于所述第一区域和所述第二区域的重叠处，所述第二遮罩的至少部分位于所述第一区域和所述第二区域的交界处，所述第一遮罩被配置为随着所述第一区域的显示尺寸的调整而进行相应调整。

在一实施例中，所述第一遮罩的渐变显示参数和所述第二遮罩的渐变显示参数不同，所述渐变显示参数用于指示遮罩的颜色渐变方向以及对应的渐变趋势。

在一实施例中，所述方法还包括：

在一实施例中，所述第一区域还包括显示切换控件，所述显示切换控件用于切换所述内容显示子区域显示所述第一媒体内容的显示状态，所述方法还包括：

基于所述待切换显示状态确定目标区域尺寸；

在一实施例中，所述响应于针对所述显示切换控件的触发操作，确定所述内容显示子区域中显示的第一媒体内容的待切换显示状态，包括：

响应于针对所述显示切换控件的触发操作；

在一实施例中，所述基于所述待切换显示状态确定目标区域尺寸，包括：

在一实施例中，所述方法还包括：

在一实施例中，所述第一媒体内容和所述第二媒体内容为文本内容、图片内容、视频内容或音频内容。

在一实施例中，还提供一种内容显示方法，包括：

以上各个操作的具体实施可参见前面的实施例，在此不再赘述。

可选的，如图7所示，计算机设备300还包括：触控显示屏303、射频电路304、音频电路305、输入单元306以及电源307。其中，处理器301分别与触控显示屏303、射频电路304、音频电路305、输入单元306以及电源307电性连接。本领域技术人员可以理解，图7中示出的计算机设备结构并不构成对计算机设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。

触控显示屏303可用于显示图形用户界面以及接收用户作用于图形用户界面产生的操作指令。触控显示屏303可以包括显示面板和触控面板。其中，显示面板可用于显示由用户输入的信息或提供给用户的信息以及计算机设备的各种图形用户接口，这些图形用户接口可以由图形、文本、图标、视频和其任意组合来构成。可选的，可以采用液晶显示器(LCD，Liquid Crystal Display)、有机发光二极管(OLED，Organic Light-EmittingDiode)等形式来配置显示面板。触控面板可用于收集用户在其上或附近的触摸操作(比如用户使用手指、触笔等任何适合的物体或附件在触控面板上或在触控面板附近的操作)，并生成相应的操作指令，且操作指令执行对应程序。可选的，触控面板可包括触摸检测装置和触摸控制器两个部分。其中，触摸检测装置检测用户的触摸方位，并检测触摸操作带来的信号，将信号传送给触摸控制器；触摸控制器从触摸检测装置上接收触摸信息，并将它转换成触点坐标，再送给处理器301，并能接收处理器301发来的命令并加以执行。触控面板可覆盖显示面板，当触控面板检测到在其上或附近的触摸操作后，传送给处理器301以确定触摸事件的类型，随后处理器301根据触摸事件的类型在显示面板上提供相应的视觉输出。在本公开实施例中，可以将触控面板与显示面板集成到触控显示屏303而实现输入和输出功能。但是在某些实施例中，触控面板与触控面板可以作为两个独立的部件来实现输入和输出功能。即触控显示屏303也可以作为输入单元306的一部分实现输入功能。

在本公开实施例中，通过处理器301执行游戏应用程序在触控显示屏303上生成图形用户界面。该触控显示屏303用于呈现图形用户界面以及接收用户作用于图形用户界面产生的操作指令。

射频电路304可用于收发射频信号，以通过无线通信与网络设备或其他计算机设备建立无线通讯，与网络设备或其他计算机设备之间收发信号。

音频电路305可以用于通过扬声器、传声器提供用户与计算机设备之间的音频接口。音频电路305可将接收到的音频数据转换后的电信号，传输到扬声器，由扬声器转换为声音信号输出；另一方面，传声器将收集的声音信号转换为电信号，由音频电路305接收后转换为音频数据，再将音频数据输出处理器301处理后，经射频电路304以发送给比如另一计算机设备，或者将音频数据输出至存储器302以便进一步处理。音频电路305还可能包括耳塞插孔，以提供外设耳机与计算机设备的通信。

输入单元306可用于接收输入的数字、字符信息或用户特征信息(例如指纹、虹膜、面部信息等)，以及产生与用户设置以及功能控制有关的键盘、鼠标、操作杆、光学或者轨迹球信号输入。

电源307用于给计算机设备300的各个部件供电。可选的，电源307可以通过电源管理系统与处理器301逻辑相连，从而通过电源管理系统实现管理充电、放电、以及功耗管理等功能。电源307还可以包括一个或一个以上的直流或交流电源、再充电系统、电源故障检测电路、电源转换器或者逆变器、电源状态指示器等任意组件。

尽管图7中未示出，计算机设备300还可以包括摄像头、传感器、无线保真模块、蓝牙模块等，在此不再赘述。

在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。

由上可知，本实施例提供的计算机设备，通过经由目标界面显示第一媒体内容和第二媒体内容，所述第一媒体内容与第二媒体内容相关联；其中，所述目标界面包括具有显示层次的第一区域、第二区域和中间区域，所述第一区域、所述第二区域和所述中间区域之间至少存在部分重叠；所述第一区域用于显示所述第一媒体内容，所述第二区域用于显示第二媒体内容，所述中间区域用于作为所述第一媒体内容的显示背景，以区别显示所述第一媒体内容和所述第二媒体内容；所述中间区域的高度随所述第一区域的高度的变化而变化。在本申请实施例中，通过在目标界面设置多个显示区域，具体通过第一区域和第二区域展示不同的媒体内容，并且，为显示层次设置在第一区域和第二区域之间的中间区域设置特定效果，即实现了对第一媒体内容和第二媒体内容的区别显示，避免混淆内容，也实现了第一区域与第二区域之间具有自然的过渡效果，从而实现两个区域之间的衔接更加自然柔和，使第一区域和第二区域之间更具有层次感，丰富了显示效果，提高了视觉效果，提升了用户的观感体验。

本领域普通技术人员可以理解，上述实施例的各种方法中的全部或部分步骤可以通过指令来完成，或通过指令控制相关的硬件来完成，该指令可以存储于一计算机可读存储介质中，并由处理器进行加载和执行。

为此，本公开实施例提供一种计算机可读存储介质，其中存储有多条计算机程序，该计算机程序能够被处理器进行加载，以执行本公开实施例所提供的任一种内容显示方法中的步骤。例如，该计算机程序可以执行如下步骤：

在一实施例中，所述方法还包括：

基于所述待切换显示状态确定目标区域尺寸；

响应于针对所述显示切换控件的触发操作；

在一实施例中，所述方法还包括：

在一实施例中，还提供一种内容显示方法，包括：

其中，该存储介质可以包括：只读存储器(ROM，Read Only Memory)、随机存取记忆体(RAM，Random Access Memory)、磁盘或光盘等。

由于该存储介质中所存储的计算机程序，可以通过经由目标界面显示第一媒体内容和第二媒体内容，所述第一媒体内容与第二媒体内容相关联；其中，所述目标界面包括具有显示层次的第一区域、第二区域和中间区域，所述第一区域、所述第二区域和所述中间区域之间至少存在部分重叠；所述第一区域用于显示所述第一媒体内容，所述第二区域用于显示第二媒体内容，所述中间区域用于作为所述第一媒体内容的显示背景，以区别显示所述第一媒体内容和所述第二媒体内容；所述中间区域的高度随所述第一区域的高度的变化而变化。在本申请实施例中，通过在目标界面设置多个显示区域，具体通过第一区域和第二区域展示不同的媒体内容，并且，为显示层次设置在第一区域和第二区域之间的中间区域设置特定效果，即实现了对第一媒体内容和第二媒体内容的区别显示，避免混淆内容，也实现了第一区域与第二区域之间具有自然的过渡效果，从而实现两个区域之间的衔接更加自然柔和，使第一区域和第二区域之间更具有层次感，丰富了显示效果，提高了视觉效果，提升了用户的观感体验。

根据本申请实施例的一个方面，还提供了一种计算机程序产品或计算机程序，该计算机程序产品或计算机程序包括计算机指令，该计算机指令存储在存储介质中。计算机设备的处理器从计算机可读存储介质读取该计算机指令，处理器执行该计算机指令，使得该计算机设备执行上述方面的各种可选实现方式中提供的内容显示方法。

以上对本公开实施例所提供的一种内容显示方法、装置、计算机设备及计算机可读存储介质进行了详细介绍，本文中应用了具体个例对本公开的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本公开的技术方案及其核心思想；本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本公开各实施例的技术方案的范围。

Claims

1.一种内容显示方法，其特征在于，包括：

2.根据权利要求1所述的内容显示方法，其特征在于，所述中间区域被配置有目标显示参数，以使所述中间区域的显示颜色区别于所述第一媒体内容和/或所述第二媒体内容，其中，所述目标显示参数基于所述第一媒体内容的显示参数和/或所述第二媒体内容的显示参数确定，所述目标显示参数包括目标显示颜色以及指定显示透明度。

3.根据权利要求2所述的内容显示方法，其特征在于，所述目标显示参数还包括渐变效果参数，所述渐变效果参数用于指示所述中间区域的显示效果为自所述中间区域的一侧至所述中间区域的另一侧渐变显示。

4.根据权利要求3所述的内容显示方法，其特征在于，所述第一区域包括内容显示子区域和控件显示子区域，所述内容显示子区域用于显示所述第一媒体内容，所述控件显示子区域用于显示互动组件。

5.根据权利要求4所述的内容显示方法，其特征在于，所述方法还包括：

6.根据权利要求4所述的内容显示方法，其特征在于，所述中间区域包括第一遮罩和第二遮罩，所述第一遮罩与所述第二遮罩相邻设置在所述中间区域中，其中，所述第一遮罩的至少部分位于所述第一区域和所述第二区域的重叠处，所述第二遮罩的至少部分位于所述第一区域和所述第二区域的交界处，所述第一遮罩被配置为随着所述第一区域的显示尺寸的调整而进行相应调整。

7.根据权利要求6所述的内容显示方法，其特征在于，所述第一遮罩的渐变显示参数和所述第二遮罩的渐变显示参数不同，所述渐变显示参数用于指示遮罩的颜色渐变方向以及对应的渐变趋势。

8.根据权利要求6所述的内容显示方法，其特征在于，所述第一遮罩的高度基于所述第一区域的高度确定，以使所述第一遮罩和所述第二遮罩组合形成的目标遮罩的高度、等于或略高于所述第一区域的高度。

9.根据权利要求8所述的内容显示方法，其特征在于，所述方法还包括：

10.根据权利要求6所述的内容显示方法，其特征在于，所述第一区域还包括显示切换控件，所述显示切换控件用于切换所述内容显示子区域显示所述第一媒体内容的显示状态，所述方法还包括：

基于所述待切换显示状态确定目标区域尺寸；

11.根据权利要求10所述的内容显示方法，其特征在于，所述响应于针对所述显示切换控件的触发操作，确定所述内容显示子区域中显示的第一媒体内容的待切换显示状态，包括：

响应于针对所述显示切换控件的触发操作；

12.根据权利要求10所述的内容显示方法，其特征在于，所述基于所述待切换显示状态确定目标区域尺寸，包括：

13.根据权利要求1所述的内容显示方法，其特征在于，所述方法还包括：

14.根据权利要求1所述的内容显示方法，其特征在于，所述方法还包括：

15.根据权利要求1所述的内容显示方法，其特征在于，所述方法还包括：

16.根据权利要求1至15任一项所述的内容显示方法，其特征在于，所述第一媒体内容和所述第二媒体内容为文本内容、图片内容、视频内容或音频内容。

17.一种内容显示方法，其特征在于，包括：

18.一种内容显示装置，其特征在于，包括：

19.一种内容显示装置，其特征在于，包括：

20.一种计算机设备，其特征在于，其包括处理器和存储器，其中，所述存储器存储有计算机程序，当所述计算机程序被所述处理器执行时，使得所述处理器执行权利要求1至17中任一所述的内容显示方法的步骤。

21.一种计算机可读存储介质，其特征在于，其包括计算机程序，当所述计算机程序在计算机设备上运行时，所述计算机程序用于使所述计算机设备执行权利要求1至17中任一所述的内容显示方法的步骤。

22.一种计算机程序产品，其特征在于，包括计算机程序，所述计算机程序存储在计算机可读存储介质中；当计算机设备的处理器从所述计算机可读存储介质读取所述计算机程序时，所述处理器执行所述计算机程序，使得所述计算机设备执行权利要求1至17中任一所述的内容显示方法的步骤。