CN111708959A - 页面显示方法、装置、存储介质及电子设备 - Google Patents

Abstract

本申请实施例公开了一种页面显示方法、装置、存储介质及电子设备，其中，方法包括：于页面显示至少一组件，所述组件用于显示第一内容和/或第二内容，所述第一内容是被所述组件覆盖的页面内容的全部或者部分；所述第一内容与所述第二内容具有映射关系；响应于所述组件与所述页面的相对位置发生改变，更新所述第一内容或第二内容。采用本申请实施例，可以简化页面显示步骤，提高页面显示的灵活性和显示效率。

Description

页面显示方法、装置、存储介质及电子设备

技术领域

本申请涉及计算机技术领域，尤其涉及一种页面显示方法、装置、存储介质及电子设备。

背景技术

随着通信技术的发展，终端逐渐成为用户查找资料，获取信息，社交聊天，查看文档等活动的主要渠道，然而目前终端页面中信息呈现的方式较为单一，无法满足不同用户的多样化需求，给用户带来十分不好的体验。

发明内容

本申请实施例提供了一种页面显示方法、装置、存储介质及电子设备，可以提升用户在终端上浏览信息时的体验。本申请实施例的技术方案如下：

第一方面，本申请实施例提供一种页面显示方法，所述方法包括：于页面显示至少一组件，所述组件用于显示第一内容，所述第一内容与所述第二内容具有映射关系；所述第二内容是被所述组件覆盖的页面内容的全部或者部分；

响应于所述组件与所述页面的相对位置发生改变，更新所述第一内容。

第二方面，一种页面显示装置，其特征在于，所述装置包括：

组件显示模块，用于于页面显示至少一组件；

内容获取模块，用于获取第一内容，所述第一内容与所述第二内容具有映射关系，所述第二内容是被所述组件覆盖的页面内容的全部或者部分；

内容显示模块，用于于组件内显示所述第一内容；

显示更新模块，用于响应于所述组件与所述页面的相对位置发生改变，更新所述第一内容。

第三方面，本申请实施例提供另一种页面显示方法，所述方法包括：

于页面显示至少一组件；所述组件用于显示第一内容，所述第一内容是所述第二内容的译文；所述第二内容是被所述组件覆盖的页面内容的全部或者部分。

第四方面，本申请实施例提供另一种页面显示装置，其特征在于，所述装置包括：

组件显示模块，用于于页面显示至少一组件；

译文获取模块，用于获取第一内容，所述第一内容是第二内容的译文，所述第二内容是被所述组件覆盖的页面内容的全部或者部分；

内容显示模块，用于于组件内显示所述第一内容。

第五方面，本申请实施例提供一种计算机存储介质，所述计算机存储介质存储有多条指令，所述指令适于由处理器加载并执行上述的方法步骤。

第六方面，本申请实施例提供一种电子设备，可包括：处理器和存储器；其中，所述存储器存储有计算机程序，所述计算机程序适于由所述处理器加载并执行上述的方法步骤。

本申请一些实施例提供的技术方案带来的有益效果至少包括：

在本申请一个或多个实施例中，通过调出组件的方式来显示当前页面内容的映射内容，且通过移动组件的方式使用户得以快捷获取与页面的特定内容有映射关系的内容，且不影响用户的对页面的正常浏览，便捷高效，极大地提升了用户在浏览页面时的体验。此外，在本申请另一些实施例中，通过组件的方式来显示当前页面的译文，使用户得以对页面的特定内容进行翻译，且不影响用户的对页面的正常浏览，便捷高效，极大地提升了用户在浏览页面时的体验。

附图说明

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

图1是本申请实施例提供的一种页面显示方法的流程示意图；

图2是本申请实施例提供的另一种页面显示方法的流程示意图；

图3是本申请实施例提供的页面显示方法中的一种组件的示意图；

图4是本申请实施例提供的一种涉及通过第一控件呼出组件的页面显示方法的场景图；

图5是本申请实施例提供的一种涉及拖动组件的页面显示方法的场景示意图；

图6是本申请实施例提供的另一种涉及拖动组件的页面显示方法的场景示意图；

图7是本申请实施例提供的一种涉及页面滑动的页面显示方法的场景示意图；

图8是本申请实施例提供的一种涉及调节组件尺寸的页面显示方法的场景示意图；

图9是本申请实施例提供的一种涉及第一提示信息的页面显示方法的场景示意图；

图10是本申请实施例提供的一种涉及第二提示信息的页面显示方法的场景示意图；

图11是本申请实施例提供的一种页面显示装置的结构示意图；

图12是本申请实施例提供的另一种页面显示装置的结构示意图；

图13是本申请实施例提供的一种电子设备的结构示意图；

图14是本申请实施例提供的操作***和用户空间的结构示意图；

图15是图14中安卓操作***的架构图；

图16是图14中IOS操作***的架构图。

具体实施方式

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

在本申请的描述中，需要理解的是，术语“第一”、“第二”等仅用于描述目的，而不能理解为指示或暗示相对重要性。在本申请的描述中，需要说明的是，除非另有明确的规定和限定，“包括”和“具有”以及它们任何变形，意图在于覆盖不排他的包含。例如包含了一系列步骤或单元的过程、方法、***、产品或设备没有限定于已列出的步骤或单元，而是可选地还包括没有列出的步骤或单元，或可选地还包括对于这些过程、方法、产品或设备固有的其他步骤或单元。对于本领域的普通技术人员而言，可以具体情况理解上述术语在本申请中的具体含义。此外，在本申请的描述中，除非另有说明，“多个”是指两个或两个以上。“和/或”，描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。字符“/”一般表示前后关联对象是一种“或”的关系。

在相关技术中，用户查找和浏览目标内容的关联信息，通常需要先将目标内容复制粘贴到搜索框中，点击搜索，操作路径长，不方便，且当需要获取关联信息的目标内容较多时，需要一一进行查询，十分不方便。

例如，当用户需要查询某段文字的翻译时，相关技术中有以下几种方式：1、可通过复制粘贴操作将想要翻译的内容粘贴至翻译软件，选择目标语言后进行翻译，但整个过程操作繁琐且需要单独安装翻译软件，占用资源；2、在某些应用场景下，用户也可以通过长按选择待翻译文本并调出选择菜单，选择目标语言后完成翻译，但长按选择文本后不便于调整待翻译文本的内容，且该方式仅针对部分做过相应适配的应用场景才能实现；3、在某些翻译软件中，用户也可以通过拍照来获取待翻译文本，在该场景下，用户在翻译过程中需要维持终端稳定，十分不便于操作，且要么只能选择单个词的查词模式，要么只能选择翻译整个画面的内容，耗时长且不便于调整待翻译内容。

又如，用户在浏览网页时，看到某个明星的剧评，突然想看一下该明星还参演过哪些剧，则需要退出当前网页，另外在搜索页面搜索并浏览，之后再返回原来的网页，操作繁琐，且影响用户浏览的连续性，用户体验差。

下面结合具体的实施例对本申请进行详细说明。

在一些实施例中，如图1所示，特提出一种页面显示方法，该方法可依赖于计算机程序实现，可运行于基于冯诺依曼体系的页面显示装置上。该计算机程序可集成在应用中，也可作为独立的工具类应用运行。

其中，页面显示装置可以是终端，特别地，可以是具备触摸屏的终端，终端可以是具有页面显示功能的电子设备，该电子设备包括但不限于：可穿戴设备、手持设备、个人电脑、平板电脑、车载设备、智能手机、计算设备或连接到无线调制解调器的其它处理设备等。在不同的网络中终端设备可以叫做不同的名称，例如：用户设备、接入终端、用户单元、用户站、移动站、移动台、远方站、远程终端、移动设备、用户终端、终端、无线通信设备、用户代理或用户装置、蜂窝电话、无绳电话、个人数字处理(personal digital assistant，PDA)、5G网络或未来演进网络中的终端设备等。

图1示出了本申请的一种实施例的页面显示方法，具体的，该页面显示方法包括：

于页面显示至少一组件；所述组件用于显示第一内容，所述第一内容与第二内容具有映射关系；所述第二内容是被所述组件覆盖的页面内容的全部或者部分。

在一些实施例中，于页面显示至少一组件，可以由终端执行“显示组件”运算或功能的某种控制代码实现。实际应用中，终端执行实现“显示组件”运算或功能的控制代码，从而在界面中显示出组件。

可以理解的是，组件可以是显示组件，由软件模块实现，是人机交互中图形用户界面中的一种元素，组件包含用于显示的区域，可选地，组件还可以包含用于控制的区域。

组件的形式可以为控件、浮窗、插件、框体等各种元素及其组合，在一些实施例中，组件可以是显示框体和控件的组合，显示框体用于显示，控件位于控制区域，用于对组件进行控制；此外，组件的形式也可以是浮窗，图3中示出了一种典型的浮窗实施例。

在一些实施例中，页面是终端显示屏上显示的页面(例如图3中A)，例如用户在显示屏上浏览的网页或者用户与他人进行通讯的通讯界面，或者处于用户编辑状态的页面，又或者用户离线阅读的界面，如用读书软件阅读离线书籍时的页面，本实施例不做具体限定。于页面显示至少一组件，可以理解为，在页面范围内显示一个或多个组件，可选择地，当显示多个组件时，多个组件可以排列显示于页面，所述排列可以是上下排列，左右排列，或者混合排列，多个组件显示时可以相互有重叠区域，也可以彼此之间没有重叠区域；此外，多个组件可以是相同的尺寸，也可以是不同的尺寸。组件的形状、大小、颜色、样式等可以由用户预先设置，也可以由***默认设置。具体地，组件的形状可以为长方形、正方形、带圆角的长方形、带圆角的正方形，也可以为其他形状；组件的宽度可以和显示屏的宽度相同，也可以比显示屏的宽度窄；组件的高度可以和显示屏的高度相同，也可以比显示屏的高度小，本实施例不做具体限定。

组件用于显示第一内容，在一些实施例中，所述组件还可以用于显示第二内容(例如图3中B)；第二内容是被所述组件覆盖的页面内容的全部或者部分(例如图3中b1)，在一些实施例中，“被所述组件覆盖的页面内容”可以理解为：由于组件显示在页面上，组件和页面在显示屏上产生一定程度的重合，所述重合区域内的页面内容为组件覆盖的页面内容；进一步地，“被所述组件覆盖的页面内容的全部或者部分”可以理解为重合区域内的全部页面内容或者部分页面内容，例如，组件和页面重合区域为R，页面上R区域中的内容为r1+r2，则第一内容可以为r1+r2，也可以为r1，还可以为r2。可以理解的是，根据页面类型的不同，第二内容可能包含多种格式，例如，第二内容中可以包括文本，也可以包括图片和/或视频，亦或是其他符号，本发明不做限定。在一些实施例中，可以理解的是，存在组件的情况下，用户可以通过作用于组件所在位置之外的区域，正常地对当前页面进行控制，例如，通过对组件所在位置之外的区域滑动，终端可以在当前页面做出正常的响应，所述正常的响应是指与不存在组件时相同的响应，例如，翻页等。组件显示第二内容，可以有多种实现方式，例如，可以将组件的全部或者部分区域设置为透明状态，这样，当组件位于页面上层时，被组件处于透明状态的区域覆盖的第一内容可以透过组件显现出来，进一步地，所述透明状态可以理解为区域的不透明度参数在某个阈值以下(如60％)，其中，不透明度参数在0％-100％范围内取值，当不透明度参数为100％时，区域下面的内容完全被遮挡，当不透明度参数为0％时，该区域完全透明；此外，终端也可以先获取所述第一内容，通过执行显示控制代码将第一内容重新显示于组件内。

在一些实施例中，第一内容与第二内容具有映射关系，所述映射关系可以理解为文本与文本之间的映射、文本与图像之间的映射、图像与图像之间的映射、文本与视频之间的映射、图像与视频之间的映射、视频与视频之间的映射中的至少一个。具体地，映射关系可以为文本和文本的映射，例如文本与文本的对应的解释，其中文本对应的解释可以和文本为同一语言，也可以和文本属于不同的语言；映射关系也可以为文本和图片的映射，例如名词(植物名、动物名、地名、建筑名等)与该名词对应的图片，名字(名人名、好友名、昵称等)与其对应的照片；映射关系还可以是图片与图片之间的映射，例如同一物品不同时期/部位的图片(植株照片及其花朵/果实之间的映射)、同一人物不同时期的照片(如同一人在童年和成年后的照片)、有特殊关系的人物的照片(如父亲/母亲的照片与孩子的照片之间的映射)；映射关系也可以是文字与视频之间的映射，例如节目名与其对应的节目视频、角色名与其对应的视频、台词与其对应的视频等；当然，映射关系也可以为图片和视频之间的映射，例如视频截图与其对应的视频、剧照与其对应的视频、角色照片与其对应的视频等；映射关系还可以是视频与视频之间的映射，例如，视频与其关联视频，具体如视频的开头片段和对应的结尾片段、具备同一角色的视频A和视频B等，本申请不做过多限定。

通过本申请实施例的方案，用户可以便捷地查询目标内容对应的关联内容：通过组件选择目标内容，可以避免直接针对全页面内容进行映射带来的延时。

优选地，如图2示出的页面显示方法，在一些实施例中，第一内容是第二内容的译文，第二内容的译文可以是仅针对第二内容中的文本进行翻译后的译文，其中，提取第二内容中的文本可以通过以下方式中的至少一种实现：直接根据页面源数据得到第二内容中的文本、通过将组件所在位置的页面截图并进行图像识别以提取文本、直接对屏幕进行OCR识别以提取文本等。也可以是对第二内容中的图片和/或视频中的包含的文本信息进行识别和提取，并针对第二内容中包含的文本和图片中提取出的文本进行翻译后的译文。

在一些实施例中，终端可以自动识别第二内容中的文本所属的语言，本发明不做过多赘述。用户也可以手动选择第二内容中包含的文本所属的语言，例如，当终端出现语言识别错误或者离线状态下，用户手动设置待翻译文本所属的语言。通常情况下，用户可以手动设置翻译目标语言，所述翻译目标语言指翻译后的译文所属的语言，如用户想要将页面中的英文翻译为中文，则中文为翻译目标语言，英语为待翻译文本所属的语言。在一些实施例中，终端也可以直接采用默认的翻译目标语言，如将中文设为翻译目标语言，在用户没有设置翻译目标语言时，直接将中文作为第二内容的译文语言。在一些实施例中，终端也可以设置第一翻译目标语言和第二翻译目标语言，第一翻译目标语言的优先级高于第二翻译目标语言，当待翻译文本不属于第一翻译目标语言时，直接将第一翻译目标语言作为第二内容的译文语言，当待翻译文本属于第一翻译目标语言时，将第二翻译目标语言作为第二内容的译文语言，例如，第一翻译目标语言可以是中文，第二翻译目标语言可以英语，当第二内容中的文本属于中文以外的语言(如法语、印度语、英语等)，终端将第二内容翻译为中文，当第二内容中的文本属于中文时，终端将第二内容翻译为英语。

进一步地，第一内容的获取可以基于网络查询实现，也可以基于终端本地数据库查询实现，也可以先基于终端本地数据库查询，如未查询到相应结果再发起网络查询，本申请不做过多赘述。

如此，通过在组件区域内显示出第二内容对应的翻译，使得用户可以便捷地翻译目标页面内容；并且通过在组件区域显示第二内容或第二内容对应的译文，使得用户能够准确地将原始文本和译文对应起来，有助于用户理解和学习。

在一些实施例中，该页面显示方法还包括：

响应于第一操作，所述组件显示的内容在第一内容和第二内容之间相互切换。

具体地，第一操作可以是任意触控操作，包括点击操作、滑动操作、长按操作等在内的一种或多种，例如作用于组件的点击操作等，如图4c-4d。在一些实施例中，第一操作也可以是其他非触控操作，如晃动终端等；在一些实施例中，第一操作还可以是语音操作，如“执行翻译”等语音指令，本实施例不做具体限定。

可以理解的是，组件显示的内容在第一内容和第二内容之间相互切换，具体包括：组件显示的内容从第一内容切换到第二内容，或者组件显示的内容从第二内容切换到第一内容；具体地，从第一内容切换到第二内容时，第二内容可能已经被加载到终端缓存中，则终端直接从缓存中读取第二内容进行显示，第二内容也可能未被加载，则终端需要先进行第二内容的获取。在一种典型的应用场景中，组件初始显示原文，用户首次点击组件，终端获取译文并存储于缓存，组件显示切换为译文，用户再次点击组件，组件显示切换回原文，用户又一次点击组件，终端从缓存读取译文并显示于组件以节约加载时间。当然，终端也可以在每次从第二内容切换到第一内容时，均重新执行本发明所述的第一内容获取过程，本实施例不做具体限定。

如此，用户可以通过简单的操作在组件显示区域内切换读取页面内容或其对应的译文，使得用户能够准确地将原始文本和译文对应起来，有助于用户理解和学习。

在一些实施例中，该页面显示方法还包括：

响应于所述组件与所述页面的相对位置发生改变，更新所述第一内容和/或第二内容。

组件与页面的相对位置发生改变，可以理解为：页面保持不变，组件位置发生改变，例如响应于第二操作，移动所述组件，具体地，第二操作可以为作用于组件的拖动操作，此处以及本申请中其他地方所述的“作用于”应当被理解为包括直接作用，也包括如隔空操作中的间接作用，此外，所述拖动操作可以被设置为作用于组件的任意位置，也可以仅被设置为作用于部分位置，例如，如图5中，控件区域的位置，用户在控件所在区域进行拖动，组件随着拖动操作而移动到页面底部。在一些实施例中，组件既可以上下移动，也可以左右移动；在另一些实施例中，组件也可以被设置为仅能上下移动或者仅能左右移动。

组件与页面的相对位置发生改变，也可以理解为：组件位置不变，页面发生改变，例如响应于第三操作，改变页面；具体地，第三操作可以为作用于页面的滑动、点击等任意操作，“改变页面”可以理解为：页面由于被滑动、翻页、或者跳转等，显示内容发生改变；具体地，终端可以响应于作用于组件位置以外的页面的滑动、点击等任意操作，对页面进行滑动、翻页、跳转等，本实施例不做具体限定。

当然，组件与页面的相对位置发生改变，还可以理解为组件和页面的位置同时发生改变。

更新第一内容或第二内容，可以理解为：组件与页面的相对位置发生改变，所述组件覆盖的页面页面也随之改变；因此，组件内显示的第二内容或者第一内容也要相应地更新，如图5a-5b，图6a-6b，图7a-7b中所示。具体地，在一些实施例中，如图5中，组件中显示第二内容时，组件由页面上部移动到页面底部时，组件内显示的第二内容更新为页面底部被组件遮挡的部分内容(图5b)；在一些实施例中，如图6中，组件中显示第一内容时，组件由页面上部移动到页面底部时，组件内显示的第一内容更新为页面底部被组件遮挡的部分内容对应的第一内容；在一些实施例中，如图7所示，组件始终位于屏幕上部，用户滑动页面后，页面滚动显示导致组件覆盖的页面内容发生改变，组件内显示的第二内容变为滚动后的页面内容(图7b)，需要说明的是，图5-7中的页面内容及其译文仅仅是本申请中第一内容和第二内容的一个优选实施例的示例，第一内容和第二内容之间也可以为其他映射关系，此处不再赘述。此外，更新所述第一内容时，可以采用多种更新方案中的一种或多种，例如，在一些实施例中，终端可以根据组件和页面相对位置的移动实时地获取并显示第一内容；在另一些实施例中，终端也可以在两者相对移动到某一位置并停驻超过预定的时长(如0.5秒)才显示该位置的对应的第一内容，以避免频繁地获取第一内容，占用终端资源；进一步地，终端还可以在检测到相对移动结束(对应操作被释放)后，才更新显示第一内容。

通过本申请实施例的方案，用户可以便捷地查询目标内容对应的关联内容：通过组件选择目标内容，可以避免直接针对全页面内容进行映射带来的延时，且能够实现目标内容和关联内容精确对应，便于用户学习和记忆。

在一些实施例中，所述页面显示方法还包括：

响应于第四操作，于页面显示所述组件；

具体地，第四操作可以是作用于页面的任意触控操作，包括点击操作、滑动操作、长按操作等在内的一种和/或多种；例如，第一操作可以是作用于第一控件的触控操作；所述第一控件用于控制终端于当前页面显示所述组件；此外，第四操作还可以为语音操作，如用户的“开启翻译”等语音指令，本实施例不做具体限定。

在一些实施例中，当第四操作为作用于第一控件的触控操作时，所述页面显示方法进一步包括：

响应于第五操作，于页面显示所述第一控件；

具体地，第五操作可以是作用于当前页面的任意触控操作，包括点击操作、滑动操作、长按操作等在内的一种和/或多种。典型地，第五操作可以是作用于触摸屏侧边沿的滑动操作或者作用于触摸屏顶部/底部的下拉/上滑操作，则响应于该第五操作，终端在侧边栏(如图4中所示)或者下拉菜单栏/上滑菜单栏显示第一控件。在一些实施例中，第五操作也可以是其他非触控操作，如晃动终端等本实施例不做具体限定。此外，终端也可以在页面的其他区域显示第一控件，本实施例不做具体限定。

如此，通过操作控件唤出浮窗，并通过第五操作在组件内显示出第二内容对应的第一内容，保证了用户在信息浏览操作时的交互连续性，缩短了用户的操作路径，同时组件/第一控件不常驻页面，避免影响用户的正常浏览。

在一些实施例中，所述页面显示方法还包括：

响应于第六操作，改变所述组件的尺寸；

具体地第六操作可以为作用于所述组件边框的第六操作；响应于所述第六操作，改变所述组件的尺寸；典型地，所述第六操作为拖动操作，当然第六操作也可以为其他操作。图8中示出了一种可能的调整组件尺寸的方式，响应于用户对组件边框的下拖，组件尺寸向下变大，相反地，响应于用户对组件边框的上拖，组件尺寸向上变小。

如此，用户可以随心地选择第二内容，不必长时间等待终端获取整个页面的第一内容，且可以通过调整组件的尺寸，精确地获取到目标内容对应的映射信息，便于用户理解和学习。

在一些实施例中，所述组件包括浮窗，具体地，浮窗可以包括第一区域和第二区域，第二内容具体为被第二区域覆盖的页面内容，第二区域用于显示第一内容和/或第二内容；例如，如图3所示，b1为浮窗的第二区域，在b1区域为透明时，第二内容显示在第二区域，在另一些情况下，b1区域也可以显示第一内容；在一些实施例中，第一区域位于浮窗顶部，第二区域位于浮窗底部；当然，第一区域也可以位于浮窗左部/右部/下部，相应地，第二区域可以位于浮窗右部/左部/上部。如图3所示，第一区域内可以显示多个内容，包括但不限于：用于复制第二区域内显示文本的复制虚拟按键，选择待翻译文本所属语言和翻译目标语言的语言选择虚拟按键，关闭浮窗的关闭虚拟按键等。可以理解的是，当复制虚拟按键被触发，终端复制第一区域内的部分或全部内容；当语言选择虚拟按键被触发，终端显示出待选语言列表，以供用户进一步选择；当关闭虚拟按键被触发，终端关闭浮窗，退出翻译。

在一种典型的应用场景中，终端可以接收作用于第一区域的拖动操作；响应于所述拖动操作，移动所述浮窗；用户点击第二区域，第二区域内显示的内容可以在第一内容和第二内容之间切换。

本申请的实施例中，在第一区域显示内容为译文的状态下，用户可以通过拖动浮窗直接翻译目标内容，无需进一步操作，保证了用户在页面翻译操作时的高效性和流畅性，同时通过移动浮窗翻译，用户能够准确地将原始文本和译文对应起来，有助于用户理解和学习。

在一些实施例中，所述页面方法还可以包括：

响应于第七操作，滑动所述第一内容；

可以选择地，第七操作可以是作用于第二区域的第七操作，可以理解的是，于第二区域显示第二内容映射后的第一内容时，由于映射之后，完整显示第一内容需要的显示区域可能会大于第二区域；因此，在一些实施例中，终端可以响应于作用于第二区域的第七操作，滑动所述第一内容，进一步地，所述第七操作可以是滑动操作；“滑动所述第一内容”可以理解为：第一内容在第二区域内滑动显示，进一步地可以理解为，第二区域内显示第一内容中的第一子内容，响应于第七操作，第二区域内显示第一内容中的第二子内容，可选择地，第一内容随着滑动操作滑动显示。在另一些实施例中，终端也可以根据第一内容的长度自动调节第一内容的显示尺寸，使得第一内容能够完整地显示在第二显示区域。

在一个典型的应用场景中，由于同一段文字在不同的语言下的长度不同，在采用相同字号进行显示的情况下，译文所需的显示区域可能会大于第一内容的显示区域。因此，在一些实施例中，采用与第二内容中的文本相同的字号显示译文，当译文所需显示区域超出第一显示区域时，接收作用于第一显示区域的滑动操作，响应于所述滑动操作，滑动显示所述译文。此外，在另一些实施例中，终端也可以根据译文长度自动调节译文的显示字号，使得译文能够完整地显示在第一显示区域。

在本申请的实施例中，用户可以通过拖动浮窗快捷地选择待翻译，避免在只需要翻译目标内容时，直接翻译整页内容导致的延时。保证了用户在页面翻译操作时的交互流畅性，同时通过移动浮窗翻译，用户能够准确地将原始文本和译文对应起来，有助于用户理解和学习。

在一些实施例中，第二区域还用于显示第一提示信息和/或第二提示信息；

所述第一提示信息用于提示用户输入所述第一操作；所述第一提示信息用于提示用户执行所述第一操作；具体地，第一提示信息可以为“点击查看照片”、“点击查看植物名”、“点击查看关联任务”、“点击浮窗，查看翻译”、“点击查看翻译”、“点击翻译”等，也可以为其他提示信息，本实施例不做具体限定。如此，在用户选择翻译操作时能够给与用户操作提示，使得整个翻译操作过程更加清楚和明确，提高用户的操作效率。

所述第二提示信息用于提示用户第一内容正在加载，此外，可能出现终端加载第一内容失败的情况，例如，超过预定的时长(如10秒)终端仍未成功加载第一内容，则判断第一内容加载失败。当判断出第一内容加载失败时，终端可以在第二区域内显示第三提示信息，所述第三提示信息用于提示用户第一内容加载失败；进一步地，还可以显示第四提示信息，用于提示用户是否检查/重连网络。所述第一内容加载成功，可以理解为：终端已获取到全部第二内容对应的第一内容。

在一些实施例中，显示提示信息时，第二区域可以为透明背景，所述透明背景可以理解为第二区域内除提示信息所在位置之外的区域为透明状态；在另一些实施例中，显示提示信息时，第二区域也可以为其他背景，例如半透明，蒙层(如图9-10所示)或者其他图案，以突出第一提示信息的视觉效果。

在一种典型的应用场景中，用户滑动侧边，终端在界面上显示“屏幕翻译”控件，用户点击控件，界面上显示出浮窗，浮窗包括显示框和菜单栏，显示框内显示“点击获取译文”，用户点击显示框内，终端开始加载译文并在显示框内显示“译文获取中”，加载完成，在框内显示被显示框覆盖的原文对应的译文，用户再次点击显示框内，显示框变为透明，页面原文呈现在显示框内；用户拖动浮窗菜单栏可以移动浮窗，用户也可以在浮窗外的页面区域对页面进行操作；用户还可以通过拖动显示狂的边框，调整浮窗的尺寸，当框体内无法显示全部的译文时，在框体右侧显示一滑动条，用户可以通过滑动译文或者滑动条使得译文在框体内滑动显示。

本申请的实施例中，在浮窗保持不动的情况下，用户也可以通过滑动浮窗外的区域滑动当前页面，以便顺畅地浏览整个页面的内容，同时通过页面滑动更新浮窗内的翻译也使得用户对于目标翻译内容的选择操作多样化，更贴合用户交互习惯，保证用户在整个交互过程中的流畅性和便捷性，进一步地，也便于用户能够准确地将原始文本和译文对应起来，有助于用户理解和学习。

请参见图11，其示出了本申请一个示例性实施例提供的页面显示装置的结构示意图。该页面显示装置可以通过软件、硬件或者两者的结合实现成为装置的全部或一部分。该装置1包括页面显示模块11，组件显示模块12、内容获取模块13、内容显示模块14和显示更新模块15。

页面显示模块11，用于显示页面；

组件显示模块12，用于于页面显示至少一组件；

内容获取模块13，用于获取第一内容，所述第一内容与所述第二内容具有映射关系，所述第二内容是被所述组件覆盖的页面内容的全部或者部分；

内容显示模块14，内容显示模块，用于于组件内显示所述第一内容；

显示更新模块15，用于响应于所述组件与所述页面的相对位置发生改变，更新所述第一内容。

可选的，所述装置1，还可以包括：

操作接收模块16，用于接收第一至第七操作操作中的至少一个；

其中，所述第一操作用于指示内容显示模块13，以控制组件显示的内容在第一内容和第二内容之间切换；

所述第二操作指示所述组件显示模块11，以移动显示所述组件；

所述第三操作指示所述页面显示模块11改变页面显示；

所述第四操作指示所述组件显示模块12于页面显示所述组件；

所述第五操作指示所述页面显示模块11于页面显示第一控件；

所述第六操作指示所述组件显示模块12改变组件的显示尺寸；

所述第七操作指示所述内容显示模块14滑动显示第一内容。

请参见图12，其示出了本申请另一个示例性实施例提供的页面显示装置的结构示意图。该页面显示装置可以通过软件、硬件或者两者的结合实现成为装置的全部或一部分。该装置2包括页面显示模块21，组件显示模块22、译文获取模块23、和内容显示模块24。

页面显示模块21，用于显示页面；

组件显示模块22，用于于页面显示至少一组件；

译文获取模块23，用于获取第一内容，所述第一内容是第一内容的译文，所述第一内容是被所述组件覆盖的页面内容的全部或者部分；

内容显示模块24，用于于组件内显示所述第一内容。

可选择地，所述内容显示模块24，还用于于组件内显示所述第二内容；

所述装置2，还可以包括：

显示更新模块25，用于响应于所述组件与所述页面的相对位置发生改变，更新所述第一内容或第二内容。

操作接收模块26，用于接收第一至第七操作操作中的至少一个；

其中，所述第一操作用于指示内容显示模块23，以控制组件显示的内容在第一内容和第二内容之间切换；

所述第二操作指示所述组件显示模块21，以移动显示所述组件；

所述第三操作指示所述页面显示模块21改变页面显示；

所述第四操作指示所述组件显示模块22于页面显示所述组件；

所述第五操作指示所述页面显示模块21于页面显示第一控件；

所述第六操作指示所述组件显示模块22改变组件的显示尺寸；

所述第七操作指示所述内容显示模块24滑动显示第一内容。

需要说明的是，上述实施例提供的应页面显示装置在执行页面显示方法时，仅以上述各功能模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能模块完成，即将设备的内部结构划分成不同的功能模块，以完成以上描述的全部或者部分功能。另外，上述实施例提供的页面显示装置与页面显示方法实施例属于同一构思，其体现实现过程详见方法实施例，这里不再赘述。

上述本申请实施例序号仅仅为了描述，不代表实施例的优劣。

本申请实施例还提供了一种计算机存储介质，所述计算机存储介质可以存储有多条指令，所述指令适于由处理器加载并执行如上述图1-图10所示实施例的所述页面显示方法，具体执行过程可以参见图1-图10所示实施例的具体说明，在此不进行赘述。

本申请还提供了一种计算机程序产品，该计算机程序产品存储有至少一条指令，所述至少一条指令由所述处理器加载并执行如上述图1-图10所示实施例的所述页面显示方法，具体执行过程可以参见图1-图10所示实施例的具体说明，在此不进行赘述。

请参考图13，其示出了本申请一个示例性实施例提供的电子设备的结构方框图。本申请中的电子设备可以包括一个或多个如下部件：处理器110、存储器120、输入装置130、输出装置140和总线150。处理器110、存储器120、输入装置130和输出装置140之间可以通过总线150连接。

处理器110可以包括一个或者多个处理核心。处理器110利用各种接口和线路连接整个电子设备内的各个部分，通过运行或执行存储在存储器120内的指令、程序、代码集或指令集，以及调用存储在存储器120内的数据，执行电子设备100的各种功能和处理数据。可选地，处理器110可以采用数字信号处理(digital signal processing，DSP)、现场可编程门阵列(field－programmable gate array，FPGA)、可编程逻辑阵列(programmable logicArray，PLA)中的至少一种硬件形式来实现。处理器110可集成中央处理器(centralprocessing unit，CPU)、图像处理器(graphics processing unit，GPU)和调制解调器等中的一种或几种的组合。其中，CPU主要处理操作***、用户界面和应用程序等；GPU用于负责显示内容的渲染和绘制；调制解调器用于处理无线通信。可以理解的是，上述调制解调器也可以不集成到处理器110中，单独通过一块通信芯片进行实现。

存储器120可以包括随机存储器(random Access Memory，RAM)，也可以包括只读存储器(read-only memory，ROM)。可选地，该存储器120包括非瞬时性计算机可读介质(non-transitory computer-readable storage medium)。存储器120可用于存储指令、程序、代码、代码集或指令集。存储器120可包括存储程序区和存储数据区，其中，存储程序区可存储用于实现操作***的指令、用于实现至少一个功能的指令(比如触控功能、声音播放功能、图像播放功能等)、用于实现下述各个方法实施例的指令等，该操作***可以是安卓(Android)***，包括基于Android***深度开发的***、苹果公司开发的IOS***，包括基于IOS***深度开发的***或其它***。存储数据区还可以存储电子设备在使用中所创建的数据比如电话本、音视频数据、聊天记录数据，等。

参见图14所示，存储器120可分为操作***空间和用户空间，操作***即运行于操作***空间，原生及第三方应用程序即运行于用户空间。为了保证不同第三方应用程序均能够达到较好的运行效果，操作***针对不同第三方应用程序为其分配相应的***资源。然而，同一第三方应用程序中不同应用场景对***资源的需求也存在差异，比如，在本地资源加载场景下，第三方应用程序对磁盘读取速度的要求较高；在动画渲染场景下，第三方应用程序则对GPU性能的要求较高。而操作***与第三方应用程序之间相互独立，操作***往往不能及时感知第三方应用程序当前的应用场景，导致操作***无法根据第三方应用程序的具体应用场景进行针对性的***资源适配。

为了使操作***能够区分第三方应用程序的具体应用场景，需要打通第三方应用程序与操作***之间的数据通信，使得操作***能够随时获取第三方应用程序当前的场景信息，进而基于当前场景进行针对性的***资源适配。

以操作***为Android***为例，存储器120中存储的程序和数据如图15所示，存储器120中可存储有Linux内核层320、***运行时库层340、应用框架层360和应用层380，其中，Linux内核层320、***运行库层340和应用框架层360属于操作***空间，应用层380属于用户空间。Linux内核层320为电子设备的各种硬件提供了底层的驱动，如显示驱动、音频驱动、摄像头驱动、蓝牙驱动、Wi-Fi驱动、电源管理等。***运行库层340通过一些C/C++库来为Android***提供了主要的特性支持。如SQLite库提供了数据库的支持，OpenGL/ES库提供了3D绘图的支持，Webkit库提供了浏览器内核的支持等。在***运行时库层340中还提供有安卓运行时库(Android runtime)，它主要提供了一些核心库，能够允许开发者使用Java语言来编写Android应用。应用框架层360提供了构建应用程序时可能用到的各种API，开发者也可以通过使用这些API来构建自己的应用程序，比如活动管理、窗口管理、视图管理、通知管理、内容提供者、包管理、通话管理、资源管理、定位管理。应用层380中运行有至少一个应用程序，这些应用程序可以是操作***自带的原生应用程序，比如联系人程序、短信程序、时钟程序、相机应用等；也可以是第三方开发者所开发的第三方应用程序，比如游戏类应用程序、即时通信程序、相片美化程序、应用分屏程序等。

以操作***为IOS***为例，存储器120中存储的程序和数据如图16所示，IOS***包括：核心操作***层420(Core OS layer)、核心服务层440(CoreServices layer)、媒体层460(Media layer)、可触摸层480(Cocoa Touch Layer)。核心操作***层420包括了操作***内核、驱动程序以及底层程序框架，这些底层程序框架提供更接近硬件的功能，以供位于核心服务层440的程序框架所使用。核心服务层440提供给应用程序所需要的***服务和/或程序框架，比如基础(Foundation)框架、账户框架、广告框架、数据存储框架、网络连接框架、地理位置框架、运动框架等等。媒体层460为应用程序提供有关视听方面的接口，如图形图像相关的接口、音频技术相关的接口、视频技术相关的接口、音视频传输技术的无线播放(AirPlay)接口等。可触摸层480为应用程序开发提供了各种常用的界面相关的框架，可触摸层480负责用户在电子设备上的触摸交互操作。比如本地通知服务、远程推送服务、广告框架、游戏工具框架、消息用户界面接口(User Interface，UI)框架、用户界面UIKit框架、地图框架等等。

在图16所示出的框架中，与大部分应用程序有关的框架包括但不限于：核心服务层440中的基础框架和可触摸层480中的UIKit框架。基础框架提供许多基本的对象类和数据类型，为所有应用程序提供最基本的***服务，和UI无关。而UIKit框架提供的类是基础的UI类库，用于创建基于触摸的用户界面，iOS应用程序可以基于UIKit框架来提供UI，所以它提供了应用程序的基础架构，用于构建用户界面，绘图、处理和用户交互事件，响应手势等等。

其中，在IOS***中实现第三方应用程序与操作***数据通信的方式以及原理可参考Android***，本申请在此不再赘述。

其中，输入装置130用于接收输入的指令或数据，输入装置130包括但不限于键盘、鼠标、摄像头、麦克风或触控设备。输出装置140用于输出指令或数据，输出装置140包括但不限于显示设备和扬声器等。在一个示例中，输入装置130和输出装置140可以合设，输入装置130和输出装置140为触摸显示屏，该触摸显示屏用于接收用户使用手指、触摸笔等任何适合的物体在其上或附近的触摸操作，以及显示各个应用程序的用户界面。触摸显示屏通常设置在电子设备的前面板。触摸显示屏可被设计成为全面屏、曲面屏或异型屏。触摸显示屏还可被设计成为全面屏与曲面屏的结合，异型屏与曲面屏的结合，本申请实施例对此不加以限定。

除此之外，本领域技术人员可以理解，上述附图所示出的电子设备的结构并不构成对电子设备的限定，电子设备可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。比如，电子设备中还包括射频电路、输入单元、传感器、音频电路、无线保真(wireless fidelity，WiFi)模块、电源、蓝牙模块等部件，在此不再赘述。

在本申请实施例中，各步骤的执行主体可以是上文介绍的电子设备。可选地，各步骤的执行主体为电子设备的操作***。操作***可以是安卓***，也可以是IOS***，或者其它操作***，本申请实施例对此不作限定。

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

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

在本申请各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

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

以上所述者，仅为本公开的示例性实施例，不能以此限定本公开的范围。即但凡依本公开教导所作的等效变化与修饰，皆仍属本公开涵盖的范围内。本领域技术人员在考虑说明书及实践这里的公开后，将容易想到本公开的其它实施方案。本申请旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未记载的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的范围和精神由权利要求限定。

Claims (20)

1.一种页面显示方法，应用于终端，其特征在于，所述方法包括：

于页面显示至少一组件，所述组件用于显示第一内容，所述第一内容与第二内容具有映射关系；所述第二内容是被所述组件覆盖的页面内容的全部或者部分；

响应于所述组件与所述页面的相对位置发生改变，更新所述第一内容。

2.根据权利要求1所述的方法，其特征在于，所述组件包括：控件和/或框体。

3.根据权利要求1所述的方法，其特征在于，所述映射关系包括：文本与文本之间的映射、文本与图像之间的映射、图像与图像之间的映射、文本与视频之间的映射、图像与视频之间的映射、视频与视频之间的映射中的至少一个。

4.根据权利要求3所述的方法，其特征在于，所述映射关系进一步包括：文字与其译文、名词与其图片、名字与其照片、图像与其关联图像、角色名与对应视频、节目名与对应视频、角色照片与对应视频、视频与其关联视频中的至少一个。

5.根据权利要求1-2任一所述的方法，其特征在于，还包括：

所述组件还用于显示第二内容；

响应于第一操作，所述组件显示的内容在第一内容和第二内容之间相互切换。

6.一种页面显示装置，其特征在于，所述装置包括：

组件显示模块，用于于页面显示至少一组件；

内容获取模块，用于获取第一内容，所述第一内容与所述第二内容具有映射关系，所述第二内容是被所述组件覆盖的页面内容的全部或者部分；

内容显示模块，用于于组件内显示所述第一内容；

显示更新模块，用于响应于所述组件与所述页面的相对位置发生改变，更新所述第一内容。

7.一种页面显示方法，应用于终端，其特征在于，所述方法包括：

于页面显示至少一组件；所述组件用于显示第一内容，所述第一内容是所述第二内容的译文；所述第二内容是被所述组件覆盖的页面内容的全部或者部分。

8.根据权利要求7所述的方法，其特征在于，还包括：

所述组件还用于显示第二内容；

响应于第一操作，所述组件显示的内容在第一内容和第二内容之间相互切换。

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

响应于所述组件与所述页面的相对位置发生改变，更新所述第一内容或第二内容。

10.根据权利要求9所述的方法，其特征在于，所述组件与所述页面的相对位置发生改变，具体包括以下几种中的至少一种：

响应于第二操作，移动所述组件；

或者，响应于第三操作，改变所述页面。

11.根据权利要求9所述的方法，其特征在于，所述更新所述第一内容或第二内容，具体包括：

若所述组件显示的是第一内容，则响应于所述组件与所述页面的相对位置发生改变，更新所述第一内容；

或者，若所述组件显示的是第二内容，则响应于所述组件与所述页面的相对位置发生改变，更新所述第二内容。

12.根据权利要求7所述的方法，其特征在于，所述于页面显示至少一组件之前，还包括：

响应于第四操作，于页面显示所述组件。

13.根据权利要求7所述的方法，其特征在于，所述第四操作为作用于第一控件的触控操作，响应所述第四操作之前，还包括：

响应于第五操作，于页面显示所述第一控件。

14.根据权利要求7所述的方法，其特征在于，还包括：

响应于第六操作，改变所述组件的尺寸。

15.根据权利要求7-14任一所述的方法，其特征在于，所述组件包括：浮窗，所述浮窗包括第一区域和第二区域，所述第一内容为被所述第二区域覆盖的页面内容，所述第二区域用于显示所述第一内容。

16.根据权利要求15任一所述的方法，其特征在于，响应于第七操作，滑动所述第一内容。

17.根据权利要求15所述的方法，其特征在于，所述第二区域还用于显示第一提示信息和/或第二提示信息；

所述第一提示信息用于提示用户输入所述第一操作；

所述第二提示信息用于提示用户译文正在加载。

18.一种页面显示装置，其特征在于，所述装置包括：

组件显示模块，用于于页面显示至少一组件，所述组件用于显示第一内容；

译文获取模块，用于获取第一内容，所述第一内容是第二内容的译文，所述第二内容是被所述组件覆盖的页面内容的全部或者部分；

内容显示模块，用于于组件内显示所述第一内容。

19.一种计算机存储介质，其特征在于，所述计算机存储介质存储有多条指令，所述指令适于由处理器加载并执行如权利要求1-5或7～17任意一项的方法步骤。

20.一种电子设备，其特征在于，包括：处理器和存储器；其中，所述存储器存储有计算机程序，所述计算机程序适于由所述处理器加载并执行如权利要求1-5或7～17任意一项的方法步骤。

Images