CN112825040B - 用户界面的显示方法、装置、设备及存储介质 - Google Patents

Abstract

本申请公开了一种用户界面的显示方法、装置、设备及存储介质，属于人机交互领域，所述方法包括：显示用户界面，所述用户界面的图像显示区域包括采用单图显示布局的n张图像中的第i张图像；接收对应于所述第i张图像的第一触发指令，i为不大于n的整数；响应于所述第一触发指令，将所述图像显示区域中的所述第i张图像，切换显示为采用多图显示布局的所述n张图像。本申请实现了大图消费场景和多图预览场景的快速来回切换，用户既可以在单图显示布局下查看单张图像的细节内容，也可以在多图显示布局下预览多张图像的缩略图。

Description

用户界面的显示方法、装置、设备及存储介质

技术领域

本申请涉及人机交互领域，特别涉及一种用户界面的显示方法、装置、设备及存储介质。

背景技术

在移动应用程序(Application，APP)中，图像是非常重要的信息载体。同一个用户界面中存在单图、多图、单图和多图共存这三种呈现方式。

当用户界面中存在多张图像时，多张图像的排版分为消费场景和预览场景两种类型。消费场景更注重图像呈现的视觉冲击力和完整度，通常通过图像横排方式来呈现。用户通过左右滑动来切换消费图像，消费图像是用户界面中正在显示的当前图像。而预览场景通常采用图像宫格的方式来呈现，有利于用户的快速寻找。

在采用图像横排方式的n张图像消费场景中，对于用户需要滑动n-1次才能完全浏览所有的n张图像。如果同一个用户界面中的图像数量过多，用户所需要的滑动次数太多，导致用户的消费深度会大打折扣。比如，同一个用户界面中存在9张图像，一般用户只会查看前面的3-4张图像，而不会查看后面的5-6张图像。

发明内容

本申请实施例提供了一种用户界面的显示方法、装置、设备及存储介质，可以解决相关技术中采用图像横排方式的n张图像消费场景中，对于用户需要滑动n-1次才能完全浏览所有的n张图像。如果同一个用户界面中的图像数量过多，用户所需要的滑动次数太多，导致用户的消费深度会大打折扣的问题。所述技术方案如下：

根据本申请的一个方面，提供了一种用户界面的显示方法，所述方法包括：

显示用户界面，所述用户界面的图像显示区域包括采用单图显示布局的n张图像中的第i张图像，n为大于1的整数；

接收对应于所述第i张图像的第一触发指令，i为不大于n的整数；

响应于所述第一触发指令，将所述图像显示区域中的所述第i张图像，切换显示为采用多图显示布局的所述n张图像。

根据本申请的一个方面，提供了一种用户界面的显示装置，所述装置包括：

显示模块，用于显示用户界面，所述用户界面的图像显示区域包括采用单图显示布局的n张图像中的第i张图像，n为大于1的整数；

交互模块，用于接收对应于所述第i张图像的第一触发指令，i为不大于n的整数；

所述显示模块，还用于响应于所述第一触发指令，将所述图像显示区域中的所述第i张图像，切换显示为采用多图显示布局的所述n张图像。

根据本申请的一个方面，提供了一种计算机设备，所述计算机设备包括：处理器和存储器，所述存储器中存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、所述至少一段程序、所述代码集或指令集由所述处理器加载并执行以实现如上所述的用户界面的显示方法。

根据本申请的一个方面，提供了一种计算机可读存储介质，所述存储介质中存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、所述至少一段程序、所述代码集或指令集由所述处理器加载并执行以实现如上所述的用户界面的显示方法。

本申请实施例至少存在如下有益效果:

通过在用户界面的图像显示区域显示采用单图显示布局的n张图像中的第i张图像，响应于第一触发指令，将图像显示区域中的第i张图像，切换显示为采用多图显示布局的n张图像，实现了大图消费场景和多图预览场景的快速来回切换，用户既可以在单图显示布局下查看单张图像的细节内容，也可以在多图显示布局下预览多张图像的缩略图，即便用户界面中需要显示的图像较多，也能够使得用户很方便地查看到多张图像以及查看其中的任意一张图像，从而提高多图消费场景下的消费深度。

附图说明

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

图1是本申请一个示意性实施例提供的横排显示布局的示意图；

图2是本申请一个示意性实施例提供的竖排显示布局的示意图；

图3是本申请一个示意性实施例提供的层叠显示布局的示意图；

图4是本申请一个示意性实施例提供的宫格显示布局的示意图；

图5是本申请另一个示意性实施例提供的用户界面的显示方法的流程图；

图6是本申请另一个示意性实施例提供的用户界面的显示方法的界面示意图；

图7至图12是本申请另一个示意性实施例提供的宫格显示布局在不同排版布局下的界面示意图；

图13是本申请另一个示意性实施例提供的用户界面的显示方法的流程图；

图14是本申请另一个示意性实施例提供的用户界面的显示方法的流程图；

图15是本申请另一个示意性实施例提供的用户界面的显示方法的界面示意图；

图16是本申请另一个示意性实施例提供的用户界面的显示方法的界面示意图；

图17是本申请另一个示意性实施例提供的用户界面的显示方法的界面示意图；

图18是本申请另一个示意性实施例提供的用户界面的显示方法的流程图；

图19是本申请另一个示意性实施例提供的用户界面的显示方法的流程图；

图20是本申请另一个示意性实施例提供的用户界面的显示装置的框图；

图21是本申请另一个示意性实施例提供的计算机设备的框图。

具体实施方式

为使本申请的目的、技术方案和优点更加清楚，下面将结合附图对本申请实施方式作进一步地详细描述。

首先对本申请涉及的若干个名词进行介绍：

图集：同一个用户界面中需要集中显示的n张图像的集合，n为大于1的整数。

横排显示布局：针对含有n张图像的图集，同一时刻仅显示n张图像中的单张图像，通过向左切换信号切换显示上一张图像，通过向右切换信号切换显示下一张图像的显示布局方式。如图1所示，假设图集包括5张图像，则将5张图像按照横向进行排列，用户界面中默认从第1张图像开始显示，其它4张图像隐藏在用户界面之外。当用户在用户界面上向左滑动时，切换至上一张图像；当用户在用户界面上向右滑动时，切换至下一张图像。横排显示布局也可称为“大图显示布局”或“大图消费场景”或“单图显示布局”。

竖排显示布局：针对含有n张图像的图集，同一时刻仅显示n张图像中的单张图像，通过向上切换信号切换显示上一张图像，通过向下切换信号切换显示下一张图像的显示布局方式。如图2所示，假设图集包括5张图像，则将5张图像按照竖向进行排列，用户界面中默认从第1张图像开始显示，其它4张图像隐藏在用户界面之外。当用户在用户界面上向上滑动时，切换至上一张图像；当用户在用户界面上向下滑动时，切换至下一张图像。比如图2中示出了将第1张图像向上滑动后，所显示出的第2张图像。

层叠显示布局：针对含有n张图像的图集，同一时刻在图像显示区域的主显示区域中显示n张图像中的单张图像，将其它图像采用层叠的方式置于该张图像的下层，用户可以预览到其它图像的边缘部分。可选地，用户在用户界面上向左滑动时，切换至上一张图像；当用户在用户界面上向右滑动时，切换至下一张图像，如图3所示。层叠显示布局属于横排显示布局的变种。

宫格显示布局：针对含有n张图像的图集，同一时刻在图像显示区域采用相同大小或不同大小的宫格同时显示n张图像，如图4所示。宫格显示布局和列表显示布局均属于多图显示布局。

图像消费完成率：消费图像的数量/图集中的图像总数量n。消费图像可理解被用户查看的图像数量。

多图深度消费：多图消费场景中，图像消费完成率大于阈值Q时，判定为深度消费。

在含有多张图像的深度消费场景中，由于横排显示布局必须要按照固定顺序消费图像，当图像数量过多(为N)时，用户需要滑动N-1次才能遍历所有图像，图像消费完成率很低。而对于竖排显示布局，虽然在一定程度上能够解决消费深度不足的问题，但是空间浪费很严重，会对下方文字内容的曝光造成挤压。因此上述横排显示布局和竖排显示布局，均不能很好的解决图像消费深度的问题。

本申请实施例提供了一种用户界面的显示方法，巧妙地将“单图显示布局”和“多图显示布局”进行结合，帮助用户快速完成对多图内容的预览与消费。

图5示出了本申请一个示例性实施例提供的用户界面的显示方法的流程图。本方法可以应用于安装有应用程序的终端来执行。该方法包括：

步骤501，显示用户界面，用户界面的图像显示区域包括采用单图显示布局的n张图像中的第i张图像，n为大于1的整数；

用户界面(User Interface)是应用程序中提供有至少一个人机交互元素的显示界面。人机交互元素包括但不限于：文字显示区域、图像显示区域、视频显示区域、音频显示区域、按钮控件、旋钮控件、文本输入框等等。

应用程序可以是支持图像信息流的应用程序、支持图文信息流的应用程序、支持社区交友的应用程序、支持媒体播放的应用程序、支持电子商务的应用程序、支持笔记分享的应用程序、支持新闻的应用程序等等。

在本实施例中，用户界面中至少包括：图像显示区域。该图像显示区域是用户界面中用于呈现图像的全部或部分区域。该图像显示区域包括采用单图显示布局的n张图像中的第i张图像，n为大于1的整数，i为不大于n的整数。

单图显示布局是同一时刻在图像显示区域(或图像显示区域的主要视觉表达区域)中仅显示n张图像中的单张图像的布局方式。

单图显示布局包括：横排显示布局或竖排显示布局。

横排显示布局是同一时刻仅显示单张图像且采用左右方向进行相邻图像切换的显示布局。通常，横排显示布局上还显示有n张图像对应的n个标识点，其中与正在显示的第i张图像对应的标识点会与其它标识点区别显示。区别显示包括但不限于：放大显示、更改颜色显示、更改动画显示、更改标识点的样式中的至少一种。可选地，横排显示布局的左侧还显示有上一张按钮，右侧还显示有下一张按钮。

竖排显示布局是同一时刻仅显示单张图像且采用上下方向进行相邻图像切换的显示布局。通常，竖排显示布局上还显示有n张图像对应的n个标识点，其中与正在显示的第i张图像对应的标识点会与其它标识点区别显示。区别显示包括但不限于：放大显示、更改颜色显示、更改动画显示、更改标识点的样式中的至少一种。可选地，横排显示布局的左侧还显示有上一张按钮，右侧还显示有下一张按钮。

参考图6，以单图显示布局是横排显示布局为例，用户界面50中需要显示的图集包括5张图像。初始状态下，图像显示区域51显示5张图像中的第1张图像，当用户左滑时，图像显示区域54显示5张图像中的第2张图像。在第2张图像上叠加显示有5个标识点53，在图像显示区域中显示第2张图像时，第2个标识点与其它标识点采用不同的显示方式。

步骤502，接收对应于第i张图像的第一触发指令；

示例性的，第一触发指令包括：第一点击信号、第一双击信号、第一长按信号、第一悬停信号、第一眼睛注视信号、终端上的运动传感器采集到的第一运动信号，终端上的摄像头采集到的第一手势信号中的至少一种。

以第一触发指令是第一点击信号为例，该第一点击信号可以是用户在触摸屏上的触摸操作触发的，也可以是用户使用鼠标在用户界面上进行点击触发的。

示例性的，第一触发指令是作用在第i张图像上的第一点击信号。

步骤503，响应于第一触发指令，将图像显示区域中的第i张图像，切换显示为采用多图显示布局的n张图像。

多图显示布局是同一时刻在图像显示区域显示至少两张(n张图像中的全部或一部分)图像的布局方式。

多图显示布局包括：宫格显示布局或列表显示布局。

宫格显示布局是同一时刻显示至少两张图像且采用宫格方式进行排版的显示布局。宫格方式是指存在至少一个排版行的排版元素为两个以上。可选地，每个排版行的显示元素(宫格)均为两个以上。每个宫格的大小和形状可以是相同的，也可以存在至少两个宫格的大小和形状是不同的。宫格的形状为矩形、正方形、菱形、圆形、椭圆形中的至少一种。

列表显示布局是同一时刻显示至少两张图像且采用列表方式进行排版的显示布局。

需要说明的一点是，由于图像显示区域(或用户界面)的显示面积有限，当采用多图显示布局的n张图像所需要的显示面积大于图像显示区域(或用户界面)的显示面积时，图像显示区域(或用户界面)中显示采用多图显示布局的n张图像的一部分内容，而剩余部分内容可以通过上下滑动来查看。

需要说明的另一点是，由于每个宫格的大小可以是不同的，当切换显示为采用多图显示布局的n张图像时，第i张图像(切换前被点击的图像)可以占据n个宫格中最大的一个宫格，也可以占据n个宫格中的其它宫格，本实施例对此不加以限定。

综上所述，本实施例提供的方法，通过在用户界面的图像显示区域显示采用单图显示布局的n张图像中的第i张图像，响应于第一触发指令，将图像显示区域中的第i张图像，切换显示为采用多图显示布局的n张图像，实现了大图消费场景和多图预览场景的快速来回切换，用户既可以在单图显示布局下查看单张图像的细节内容，也可以在多图显示布局下预览多张图像的缩略图，即便用户界面中需要显示的图像较多，也能够使得用户很方便地查看到多张图像以及查看其中的任意一张图像，从而提高多图消费场景下的消费深度。

在一个示例中，宫格显示布局在单个排版行的最小排版颗粒(或称数量)N＝2或N＝3。

当N＝2时，单个排版行的排版方式为1种，记为“2”，如图7所示。

当N＝3时，单个排版行的排版方式为3种，分别记为“3L”，“3R”和“3”，“3L”的排版方式中在左侧放置一张图像，右侧放置两张图像，如图8所示；“3R”的排版方式中在左侧方式两张图像，右侧放置一张图像，如图9所示；“3”的排版方式中均匀放置三张图像，如图10所示。

当图集中的图像数量N≥4时，都可以通过分解为上述最小排版颗粒的排列组合来实现。例如：

当N＝4时，可分解为2+2，共一种排版方式，如图11所示。

当N＝5时，可分解为2+3R、2+3L、2+3、3R+2、3L+2、3+2共六种排版方式，如图12所示。

当N＝6时，可分解为2+2+2、3R+3R、3R+3L、3R+3、3+3R、3+3L、3+3、3L+3R、3L+3L、3L+3共十种排版方式。

当N＝7时，可分解为2+2+3(3种)，2+3(3种)+2、3(3种)+2+2共九种排版方式。

当N＝8时，可分解为2+2+2+2、2+3+3(9种)、3+2+3(9种)、3+3+2(9种)，共28种排版方式。

当N＝9时，可分解为3+3+3(27种)、3+2+2+2(3种)、2+3+2+2(3种)、2+2+3+2(3种)、2+2+2+3(3种)，共39种排版方式。

依次类推，不再赘述。

最终的排版方式可从多个候选排版方式中有策略地选择一个，亦可以随机选择一种。

需要说明的是，由于单个排版行的最小排版颗粒可以是不同的，因此上述示例并不限定宫格排版方式的具体形式，仅为示例性说明。比如，当存在多个排版行时，可以允许部分排版行的最小排版颗粒为1。又比如，单个排版行的最小排版颗粒可以为4。再比如，每个宫格的形状为菱形或圆形时，还可以具有其它排版方式。

在基于图5的可选实施例中，上述步骤503可替代实现成为步骤503a和步骤503b，如图13所示：

步骤503a，响应于第一触发指令，根据n张图像的数量n来确定宫格显示布局下的宫格排版样式；

终端获取用户界面中需要显示的图像数量n，确定与n张图像的数量n对应的至少两种候选宫格排版样式。与数量n对应的至少两种候选宫格排版样式可以是预设的候选宫格排版样式，例如上述举例中所示。

在至少两种候选宫格排版样式中，按照目标策略选择出本次使用的宫格排版格式；

其中，目标策略包括：随机选择策略，或，指定排版样式优先策略。

指定排版样式优先策略可以是：指定最上层为最小排版颗粒为2的候选排版样式优先被选择、指定最上层为最小排版颗粒为3L的候选排版样式优先被选择、指定最上层为最小排版颗粒为3R的候选排版样式优先被选择、指定最上层为最小排版颗粒为3的候选排版样式优先被选择中的至少一种。

上述选择策略仅为示例性说明，并不构成限定，只需要能够从多种候选宫格排版样式中选择出本次使用的宫格排版样式即可。

步骤503b，在图像显示区域中取消显示第i张图像，且在图像显示区域中更新显示采用宫格排版样式进行排版的n张图像。

可选地，在图像显示区域中将第i张图像进行缩小显示，直至移出图像显示区域。然后在图像显示区域中，更新显示采用宫格排版样式进行排版的n张图像。

可选地，在采用宫格排版样式进行排版的n张图像中，n张图像与n个宫格之间的

综上所述，本实施例提供的方法，通过预先设定与数量n对应的多种候选宫格排版样式，在采用宫格排版样式进行排版显示时，采用随机选择策略或指定排版样式优先策略，选择出本次使用的宫格排版样式，能够提高宫格显示布局的排版多样性和多变性，提升用户界面的显示效果。

图14示出了本申请一个示例性实施例提供的用户界面的显示方法的流程图。本方法可以应用于安装有应用程序的终端来执行。该方法包括：

步骤501，显示用户界面，用户界面的图像显示区域包括采用单图显示布局的n张图像中的第i张图像，n为大于1的整数；

步骤502，接收对应于第i张图像的第一触发指令；

步骤503，响应于第一触发指令，将图像显示区域中的第i张图像，切换显示为采用多图显示布局的n张图像。

上述步骤501至步骤503的细节，还可结合参考图5或图13实施例的描述，不再赘述。

可选地，当用户界面中未能全部显示采用多图显示布局的n张图像时，切换显示为采用多图显示布局的n张图像的一部分图像，该一部分图像中包括第i张图像。

步骤504，接收对应于n张图像中的第j张图像的第二触发指令；

示例性的，第二触发指令包括：第二点击信号、第二双击信号、第二长按信号、第二悬停信号、第二眼睛注视信号、终端上的运动传感器采集到的第二运动信号，终端上的摄像头采集到的第二手势信号中的至少一种。

以第二触发指令是点击信号为例，该点击信号可以是用户在触摸屏上的触摸操作触发的，也可以是用户使用鼠标在用户界面上进行点击触发的。

示例性的，第二触发指令是点击在第j张图像上的点击信号。

步骤505，响应于第二触发指令，将图像显示区域中采用多图显示布局的n张图像，切换显示为采用单图显示布局的第j张图像。

将采用多图显示布局的n张图像中，除第j张图像之外的图像在图像显示区域中取消显示，将第j张图像放大后采用单图显示布局显示在图像显示区域中。其中，j为不大于n的整数。

在一个示例中，应用程序会预先加载n张图像，以保证在切换显示为采用单图显示布局的第j张图像时，没有明显的加载过程。

结合参考图15，当采用单图显示布局显示第2张图像时，若用户点击第2张图像，则在图像显示区域中切换显示采用多图显示布局的9张图像。若用户点击采用多图显示布局的9张图像中的第9张图像时，则在图像显示区域中切换显示采用单图显示布局的第9张图像。从而实现了“大图模式”和“宫格模式”的随时切换，而且从第2张图像切换至第9张图像仅需要用户的两次点击操作即可实现。

综上所述，本实施例提供的方法，通过响应于第二触发指令，将图像显示区域中采用多图显示布局的n张图像，切换显示为采用单图显示布局的第j张图像。如果i和j之间的间隔大于1，则能够明显减少用户在不同消费图像之间进行切换时的操作次数，提高人机交互效率。

需要说明的是，在单图显示布局和多图显示布局这两种布局下，图像显示区域的大小可以相同，也可以不同。比如，图像显示区域在多图显示布局下的大小，大于图像显示区域在单图显示布局下的大小。

结合上述实施例，由于用户界面通常采用上下滚动的浏览方式，若在用户产生第一触发指令时，图像显示区域可能仅显示第i张图像的一部分图像区域，并未显示第i张图像的完整图像。此时，上述方法还包括如下步骤：

当图像显示区域仅显示有第i张图像的部分内容时，在切换后将采用多图显示布局的n张图像的顶部，自动滚动至与图像显示区域的顶部对齐，示意性的参考图16。

结合上述实施例，由于用户界面通常采用上下滚动的浏览方式，若在用户产生第二触发指令时，图像显示区域可能仅显示采用多图显示布局的n张图像的部分内容，并未显示采用多图显示布局的n张图像的完整。此时，上述方法还包括如下步骤：

当图像显示区域仅显示有采用多图显示布局的n张图像的部分内容时，在切换后将采用单图显示布局的第j张图像的顶部，自动滚动至与图像显示区域的顶部对齐，示意性的参考图17。

在一个示例中，针对多图显示布局，应用程序的显示流程包括如下步骤，如图18所示：

步骤1801，拉取图集所有图像的图像数据；

步骤1802，获取所有图像的数量，以及所有图像的尺寸数据；

步骤1803，根据所有图像的数量和尺寸数据，在多种候选宫格排版样式中，确定出与当前数量对应的本次宫格排版样式；

步骤1804，使用占位图进行排列，并优先加载屏幕内的图像数据；

步骤1805，预加载屏幕外的图像数据。

可选地，针对上述流程的性能优化，包括但不限于如下几个步骤：

1、对图像进行缩放，缩放到对应的宫格尺寸；

2、当图像滑出屏幕时，进行内存回收防止内存占用过大；

3、预先计算N＝1～9时的候选宫格排版样式，对这些候选宫格排版样式进行存储，以减少图像排列计算的耗时。

在一个示例中，针对多图显示布局至单图显示布局的切换过程，应用程序的显示流程包括如下步骤，如图19所示：

步骤1901，当接收到触摸事件时，判断该触摸事件是否点击图片；

终端判断该触摸事件内的触摸坐标，是否位于图像显示区域内。

如果是，则进入步骤1902；如果不是，则不予处理或做其它响应。

步骤1902，判断当前是否为宫格显示布局；

如果是宫格显示布局，进入步骤1903；如果是横排显示布局，进入步骤1908。

步骤1903，当前点击图像放大，非当前点击图像缩小；

若点击第i张图像，则将第i张图像进行放大，由预览图尺寸放大到大图尺寸。将除第i张图像之外的其它图像进行放大，由预览图尺寸缩小为0。

步骤1904，进入横排显示布局；

步骤1905，左右滑动，计算切换后的图像对应的预览图在宫格显示布局下的位置；

当接收到向左滑动操作后，切换后的图像为第i+1张图像；当接收到向右滑动操作后，切换后的图像为第i-1张图像。

步骤1906，判断该位置是否在屏幕内；

如果不在屏幕内，则进入步骤1906；如果在屏幕内，则暂不做额外处理。

步骤1907，重新计算偏移位置，确保切换后的图像的预览图在屏幕内；

该偏移位置是图像显示区域的顶部相对于屏幕顶部的偏移位置，重新计算偏移位置，确保切换后的图像的预览图在宫格显示布局下位于屏幕内。

步骤1908，当前点击图像缩小，其它图像放大至预览图尺寸；

若点击第j图像，则将第j张图像进行缩小，由大图尺寸缩小到预览图尺寸。将除第j张图像之外的其它图像进行放大，由0放大至预览图尺寸。

步骤1909，进入宫格显示布局。

图20示出了本申请一个示意性实施例提供的用户界面的显示装置的框图。所述装置包括：显示模块2020和交互模块2040。

显示模块2020，用于显示用户界面，所述用户界面的图像显示区域包括采用单图显示布局的n张图像中的第i张图像，n为大于1的整数；

交互模块2040，用于接收对应于所述第i张图像的第一触发指令，i为不大于n的整数；

显示模块2020，用于响应于所述第一触发指令，将所述图像显示区域中的所述第i张图像，切换显示为采用多图显示布局的所述n张图像。

在一个可选的实施例中，所述单图显示布局是同一时刻仅显示单张图像且采用左右方向进行图像切换的横排显示布局；所述多图显示布局是同一时刻显示至少两张图像且采用宫格方式进行排版的宫格显示布局。

在一个可选的实施例中，所述显示模块2020，用于根据所述n张图像的数量n来确定所述宫格显示布局下的宫格排版样式；在所述图像显示区域中取消显示所述第i张图像，且在所述图像显示区域中更新显示采用所述宫格排版样式进行排版的所述n张图像。

在一个可选的实施例中，所述显示模块2020，用于确定与所述n张图像的数量n对应的至少两种候选宫格排版样式；在所述至少两种候选宫格排版样式中，按照目标策略选择出本次使用的宫格排版格式；其中，所述目标策略包括：随机选择策略，或者，指定样式优先策略。

在一个可选的实施例中，所述显示模块2020，用于当所述图像显示区域仅显示有所述第i张图像的部分内容时，在切换后将采用所述多图显示布局的所述n张图像的顶部，自动滚动至与所述图像显示区域的顶部对齐。

在一个可选的实施例中，所述第一触发指令包括：第一点击信号、第一双击信号、第一长按信号、第一悬停信号、第一眼睛注视信号、终端上的运动传感器采集到的第一运动信号，所述终端上的摄像头采集到的第一手势信号中的至少一种。

在一个可选的实施例中，所述交互模块2040，用于接收对应于所述n张图像中的第j张图像的第二触发指令，j为不大于n的整数；

所述显示模块2020，用于响应于所述第二触发指令，将所述图像显示区域中采用所述多图显示布局的所述n张图像，切换显示为采用所述单图显示布局的所述第j张图像。

在一个可选的实施例中，所述显示模块2020，用于将采用所述多图显示布局的所述n张图像中，除所述第j张图像之外的图像在所述图像显示区域中取消显示，将所述第j张图像放大后采用所述单图显示布局显示在所述图像显示区域中。

在一个可选的实施例中，所述显示模块2020，用于当所述图像显示区域仅显示有采用多图显示布局的所述n张图像的部分内容时，在切换后将采用所述单图显示布局的所述第j张图像的顶部，自动滚动至与所述图像显示区域的顶部对齐。

在一个可选的实施例中，所述第二触发指令包括：第二点击信号、第二双击信号、第二长按信号、第二悬停信号、第二眼睛注视信号、终端上的运动传感器采集到的第二运动信号，终端上的摄像头采集到的第二手势信号中的至少一种。

本申请还提供了一种计算机设备，该计算机设备包括处理器和存储器，存储器中存储有至少一条指令，至少一条指令由处理器加载并执行以实现上述各张方法实施例提供的用户界面的显示方法。需要说明的是，该计算机设备可以是如下图21所提供的计算机设备。

图21示出了本申请一个示例性实施例提供的终端2100的结构框图。该终端2100可以是：智能手机、平板电脑、MP3播放器(Moving Picture Experts Group Audio LayerIII，动态影像专家压缩标准音频层面3)、MP4(Moving Picture Experts Group AudioLayer IV，动态影像专家压缩标准音频层面4)播放器、笔记本电脑或台式电脑。终端2100还可能被称为用户设备、便携式终端、膝上型终端、台式终端等其他名称。

通常，终端2100包括有：处理器2101和存储器2102。

处理器2101可以包括一个或多个处理核心，比如4核心处理器、8核心处理器等。处理器2101可以采用DSP(Digital Signal Processing，数字信号处理)、FPGA(Field－Programmable Gate Array，现场可编程门阵列)、PLA(Programmable Logic Array，可编程逻辑阵列)中的至少一种硬件形式来实现。处理器2101也可以包括主处理器和协处理器，主处理器是用于对在唤醒状态下的数据进行处理的处理器，也称CPU(Central ProcessingUnit，中央处理器)；协处理器是用于对在待机状态下的数据进行处理的低功耗处理器。在一些实施例中，处理器2101可以在集成有GPU(Graphics Processing Unit，图像处理器)，GPU用于负责显示屏所需要显示的内容的渲染和绘制。一些实施例中，处理器2101还可以包括AI(Artificial Intelligence，人工智能)处理器，该AI处理器用于处理有关机器学习的计算操作。

存储器2102可以包括一个或多个计算机可读存储介质，该计算机可读存储介质可以是非暂态的。存储器2102还可包括高速随机存取存储器，以及非易失性存储器，比如一个或多个磁盘存储设备、闪存存储设备。在一些实施例中，存储器2102中的非暂态的计算机可读存储介质用于存储至少一个指令，该至少一个指令用于被处理器2101所执行以实现本申请中方法实施例提供的用户界面的显示方法。

在一些实施例中，终端2100还可选包括有：外围设备接口2103和至少一个外围设备。处理器2101、存储器2102和外围设备接口2103之间可以通过总线或信号线相连。各个外围设备可以通过总线、信号线或电路板与外围设备接口2103相连。具体地，外围设备包括：射频电路2104、触摸显示屏2105、摄像头2106、音频电路2107、定位组件2108和电源2109中的至少一种。

外围设备接口2103可被用于将I/O(Input/Output，输入/输出)相关的至少一个外围设备连接到处理器2101和存储器2102。在一些实施例中，处理器2101、存储器2102和外围设备接口2103被集成在同一芯片或电路板上；在一些其他实施例中，处理器2101、存储器2102和外围设备接口2103中的任意一个或两个可以在单独的芯片或电路板上实现，本实施例对此不加以限定。

射频电路2104用于接收和发射RF(Radio Frequency，射频)信号，也称电磁信号。射频电路2104通过电磁信号与通信网络以及其他通信设备进行通信。射频电路2104将电信号转换为电磁信号进行发送，或者，将接收到的电磁信号转换为电信号。可选地，射频电路2104包括：天线系统、RF收发器、一个或多个放大器、调谐器、振荡器、数字信号处理器、编解码芯片组、用户身份模块卡等等。射频电路2104可以通过至少一种无线通信协议来与其它终端进行通信。该无线通信协议包括但不限于：城域网、各代移动通信网络(2G、3G、4G及5G)、无线局域网和/或WiFi(Wireless Fidelity，无线保真)网络。在一些实施例中，射频电路2104还可以包括NFC(Near Field Communication，近距离无线通信)有关的电路，本申请对此不加以限定。

显示屏2105用于显示UI(User Interface，用户界面)。该UI可以包括图形、文本、图标、视频及其它们的任意组合。当显示屏2105是触摸显示屏时，显示屏2105还具有采集在显示屏2105的表面或表面上方的触摸信号的能力。该触摸信号可以作为控制信号输入至处理器2101进行处理。此时，显示屏2105还可以用于提供虚拟按钮和/或虚拟键盘，也称软按钮和/或软键盘。在一些实施例中，显示屏2105可以为一个，设置终端2100的前面板；在另一些实施例中，显示屏2105可以为至少两个，分别设置在终端2100的不同表面或呈折叠设计；在再一些实施例中，显示屏2105可以是柔性显示屏，设置在终端2100的弯曲表面上或折叠面上。甚至，显示屏2105还可以设置成非矩形的不规则图形，也即异形屏。显示屏2105可以采用LCD(Liquid Crystal Display，液晶显示屏)、OLED(Organic Light-Emitting Diode,有机发光二极管)等材质制备。

摄像头组件2106用于采集图像或视频。可选地，摄像头组件2106包括前置摄像头和后置摄像头。通常，前置摄像头设置在终端的前面板，后置摄像头设置在终端的背面。在一些实施例中，后置摄像头为至少两个，分别为主摄像头、景深摄像头、广角摄像头、长焦摄像头中的任意一种，以实现主摄像头和景深摄像头融合实现背景虚化功能、主摄像头和广角摄像头融合实现全景拍摄以及VR(Virtual Reality，虚拟现实)拍摄功能或者其它融合拍摄功能。在一些实施例中，摄像头组件2106还可以包括闪光灯。闪光灯可以是单色温闪光灯，也可以是双色温闪光灯。双色温闪光灯是指暖光闪光灯和冷光闪光灯的组合，可以用于不同色温下的光线补偿。

音频电路2107可以包括麦克风和扬声器。麦克风用于采集用户及环境的声波，并将声波转换为电信号输入至处理器2101进行处理，或者输入至射频电路2104以实现语音通信。出于立体声采集或降噪的目的，麦克风可以为多个，分别设置在终端2100的不同部位。麦克风还可以是阵列麦克风或全向采集型麦克风。扬声器则用于将来自处理器2101或射频电路2104的电信号转换为声波。扬声器可以是传统的薄膜扬声器，也可以是压电陶瓷扬声器。当扬声器是压电陶瓷扬声器时，不仅可以将电信号转换为人类可听见的声波，也可以将电信号转换为人类听不见的声波以进行测距等用途。在一些实施例中，音频电路2107还可以包括耳机插孔。

定位组件2108用于定位终端2100的当前地理位置，以实现导航或LBS(LocationBased Service，基于位置的服务)。定位组件2108可以是基于美国的GPS(GlobalPositioning System，全球定位系统)、中国的北斗系统、俄罗斯的格雷纳斯系统或欧盟的伽利略系统的定位组件。

电源2109用于为终端2100中的各个组件进行供电。电源2109可以是交流电、直流电、一次性电池或可充电电池。当电源2109包括可充电电池时，该可充电电池可以支持有线充电或无线充电。该可充电电池还可以用于支持快充技术。

在一些实施例中，终端2100还包括有一个或多个传感器2110。该一个或多个传感器2110包括但不限于：加速度传感器2111、陀螺仪传感器2112、压力传感器2113、指纹传感器2114、光学传感器2115以及接近传感器2116。

加速度传感器2111可以检测以终端2100建立的坐标系的三个坐标轴上的加速度大小。比如，加速度传感器2111可以用于检测重力加速度在三个坐标轴上的分量。处理器2101可以根据加速度传感器2111采集的重力加速度信号，控制触摸显示屏2105以横向视图或纵向视图进行用户界面的显示。加速度传感器2111还可以用于游戏或者用户的运动数据的采集。

陀螺仪传感器2112可以检测终端2100的机体方向及转动角度，陀螺仪传感器2112可以与加速度传感器2111协同采集用户对终端2100的3D动作。处理器2101根据陀螺仪传感器2112采集的数据，可以实现如下功能：动作感应(比如根据用户的倾斜操作来改变UI)、拍摄时的图像稳定、游戏控制以及惯性导航。

压力传感器2113可以设置在终端2100的侧边框和/或触摸显示屏2105的下层。当压力传感器2113设置在终端2100的侧边框时，可以检测用户对终端2100的握持信号，由处理器2101根据压力传感器2113采集的握持信号进行左右手识别或快捷操作。当压力传感器2113设置在触摸显示屏2105的下层时，由处理器2101根据用户对触摸显示屏2105的压力操作，实现对UI界面上的可操作性控件进行控制。可操作性控件包括按钮控件、滚动条控件、图标控件、菜单控件中的至少一种。

指纹传感器2114用于采集用户的指纹，由处理器2101根据指纹传感器2114采集到的指纹识别用户的身份，或者，由指纹传感器2114根据采集到的指纹识别用户的身份。在识别出用户的身份为可信身份时，由处理器2101授权该用户执行相关的敏感操作，该敏感操作包括解锁屏幕、查看加密信息、下载软件、支付及更改设置等。指纹传感器2114可以被设置终端2100的正面、背面或侧面。当终端2100上设置有物理按键或厂商Logo时，指纹传感器2114可以与物理按键或厂商Logo集成在一起。

光学传感器2115用于采集环境光强度。在一个实施例中，处理器2101可以根据光学传感器2115采集的环境光强度，控制触摸显示屏2105的显示亮度。具体地，当环境光强度较高时，调高触摸显示屏2105的显示亮度；当环境光强度较低时，调低触摸显示屏2105的显示亮度。在另一个实施例中，处理器2101还可以根据光学传感器2115采集的环境光强度，动态调整摄像头组件2106的拍摄参数。

接近传感器2116，也称距离传感器，通常设置在终端2100的前面板。接近传感器2116用于采集用户与终端2100的正面之间的距离。在一个实施例中，当接近传感器2116检测到用户与终端2100的正面之间的距离逐渐变小时，由处理器2101控制触摸显示屏2105从亮屏状态切换为息屏状态；当接近传感器2116检测到用户与终端2100的正面之间的距离逐渐变大时，由处理器2101控制触摸显示屏2105从息屏状态切换为亮屏状态。

本领域技术人员可以理解，图21中示出的结构并不构成对终端2100的限定，可以包括比图示更多或更少的组件，或者组合某些组件，或者采用不同的组件布置。

存储器还包括一个或者一个以上的程序，一个或者一个以上程序存储于存储器中，一个或者一个以上程序包含用于进行本申请实施例提供的用户界面的显示方法。

本申请实施例还提供一种计算机设备，该计算机设备包括存储器和处理器，存储器中存储有至少一条指令、至少一段程序、代码集或指令集，至少一条指令、至少一段程序、代码集或指令集由处理器加载并实现上述用户界面的显示方法。

本申请实施例还提供一种计算机可读存储介质，该可读存储介质中存储有至少一条指令、至少一段程序、代码集或指令集，至少一条指令、至少一段程序、代码集或指令集由处理器加载并执行以实现上述用户界面的显示模型的训练方法或用户界面的显示方法。

本申请还提供了一种计算机程序产品，当计算机程序产品在计算机上运行时，使得计算机执行上述各个方法实施例提供的用户界面的显示模型的训练方法或用户界面的显示方法。

应当理解的是，在本文中提及的“多张”是指两张或两张以上。“和/或”，描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。字符“/”一般表示前后关联对象是一种“或”的关系。

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

本领域普通技术人员可以理解实现上述实施例的全部或部分步骤可以通过硬件来完成，也可以通过程序来指令相关的硬件完成，所述的程序可以存储于一种计算机可读存储介质中，上述提到的存储介质可以是只读存储器，磁盘或光盘等。

以上所述仅为本申请的可选实施例，并不用以限制本申请，凡在本申请的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本申请的保护范围之内。

Claims (10)

1.一种用户界面的显示方法，其特征在于，所述方法包括：

显示用户界面，所述用户界面为应用程序中提供有至少一个人机交互元素的显示界面，所述应用程序为支持图文信息流的应用程序，所述人机交互元素至少包括：文字显示区域和图像显示区域，所述图像显示区域包括采用单图显示布局的n张图像中的第i张图像，n为大于1的整数；

接收对应于所述第i张图像的第一触发指令，i为不大于n的整数；

响应于所述第一触发指令，将所述图像显示区域中的所述第i张图像，切换显示为采用多图显示布局的所述n张图像，其中，若接收到所述第一触发指令时，所述用户界面被滚动至使所述图像显示区域仅显示第i张图像的一部分区域，则在切换后将采用多图显示布局的n张图像的顶部自动滚动至与图像显示区域的顶部对齐；其中，当采用多图显示布局的n张图像所需要的显示面积大于所述图像显示区域的显示面积时，所述图像显示区域中显示采用多图显示布局的所述n张图像的一部分内容，而剩余部分内容通过上下滑动操作来查看，且被显示的部分图像包括所述第i张图像；

其中，所述多图显示布局是同一时刻显示至少两张图像且采用宫格方式进行排版的宫格显示布局，所述宫格方式下存在至少两个宫格的大小和形状不同，存在至少两个排版行的排版方式不同，宫格的形状包括矩形、正方形、菱形、圆形、椭圆形中至少两种；所述宫格显示布局的最小排版行的最小排版颗粒N=2或N=3，当N=2时，单个排版行的排版方式包括左右并排布置两个图像，当N=3时，单个排版行的排版方式包括：左侧放置一张图像，右侧上下方向布置两张图像，记为3L；左侧上下方式布置两张图像，右侧放置一张图像，记为3R；沿左右方向均匀放置三张图像，记为3；

当图集中的图像数量大于等于4时，通过分解为所述最小排版颗粒的组合来得到对应的候选宫格排版方式；

所述将所述图像显示区域中的所述第i张图像，切换显示为采用多图显示布局的所述n张图像，包括：

确定与所述n张图像的数量n对应的至少两种候选宫格排版样式；

在所述至少两种候选宫格排版样式中，按照指定排版样式优先策略选择出本次使用的宫格排版格式；其中，所述指定排版样式优先策略包括：指定最上层为最小排版颗粒为2的候选排版样式优先被选择、指定最上层为最小排版颗粒为3L的候选排版样式优先被选择、指定最上层为最小排版颗粒为3R的候选排版样式优先被选择、指定最上层为最小排版颗粒为3的候选排版样式优先被选择中的至少一种；

所述方法还包括：

接收对应于所述n张图像中的第j张图像的第二触发指令，j为不大于n的整数；

响应于所述第二触发指令，将所述图像显示区域中采用所述多图显示布局的所述n张图像，切换显示为采用所述单图显示布局的所述第j张图像，其中，若接收到所述第二触发指令时，所述用户界面被滚动至使所述图像显示区域仅显示有采用多图显示布局的所述n张图像的部分内容时，在切换后将采用所述单图显示布局的所述第j张图像的顶部，自动滚动至与所述图像显示区域的顶部对齐。

2.根据权利要求1所述的方法，其特征在于，

所述单图显示布局是同一时刻仅显示单张图像且采用左右方向进行图像切换的横排显示布局。

3.根据权利要求2所述的方法，其特征在于，所述将所述图像显示区域中的所述第i张图像，切换显示为采用多图显示布局的所述n张图像，还包括：

在所述图像显示区域中取消显示所述第i张图像，且在所述图像显示区域中更新显示采用所述宫格排版样式进行排版的所述n张图像。

4.根据权利要求1至3任一所述的方法，其特征在于，所述第一触发指令包括：第一点击信号、第一双击信号、第一长按信号、第一悬停信号、第一眼睛注视信号、终端上的运动传感器采集到的第一运动信号，所述终端上的摄像头采集到的第一手势信号中的至少一种。

5.根据权利要求1所述的方法，其特征在于，所述将所述图像显示区域中采用多图显示布局的所述n张图像，切换显示为采用所述单图显示布局的所述第j张图像，包括：

将采用所述多图显示布局的所述n张图像中，除所述第j张图像之外的图像在所述图像显示区域中取消显示，将所述第j张图像放大后采用所述单图显示布局显示在所述图像显示区域中。

6.根据权利要求1所述的方法，其特征在于，所述第二触发指令包括：第二点击信号、第二双击信号、第二长按信号、第二悬停信号、第二眼睛注视信号、终端上的运动传感器采集到的第二运动信号，终端上的摄像头采集到的第二手势信号中的至少一种。

7.一种用户界面的显示装置，其特征在于，所述装置包括：

显示模块，用于显示用户界面，所述用户界面为应用程序中提供有至少一个人机交互元素的显示界面，所述应用程序为支持图文信息流的应用程序，所述人机交互元素至少包括：文字显示区域和图像显示区域，所述图像显示区域包括采用单图显示布局的n张图像中的第i张图像，n为大于1的整数；

交互模块，用于接收对应于所述第i张图像的第一触发指令，i为不大于n的整数；

所述显示模块，还用于响应于所述第一触发指令，将所述图像显示区域中的所述第i张图像，切换显示为采用多图显示布局的所述n张图像，其中，若接收到所述第一触发指令时，所述用户界面被滚动至使所述图像显示区域仅显示第i张图像的一部分区域，则在切换后将采用多图显示布局的n张图像的顶部自动滚动至与图像显示区域的顶部对齐；其中，当采用多图显示布局的n张图像所需要的显示面积大于所述图像显示区域的显示面积时，所述图像显示区域中显示采用多图显示布局的所述n张图像的一部分内容，而剩余部分内容通过上下滑动操作来查看；

其中，所述多图显示布局是同一时刻显示至少两张图像且采用宫格方式进行排版的宫格显示布局，所述宫格方式下存在至少两个宫格的大小和形状不同，存在至少两个排版行的排版方式不同，宫格的形状包括矩形、正方形、菱形、圆形、椭圆形中至少两种；

所述宫格显示布局的最小排版行的最小排版颗粒N=2或N=3，当N=2时，单个排版行的排版方式包括左右并排布置两个图像，当N=3时，单个排版行的排版方式包括：左侧放置一张图像，右侧上下方向布置两张图像，记为3L；左侧上下方式布置两张图像，右侧放置一张图像，记为3R；沿左右方向均匀放置三张图像，记为3；

当图集中的图像数量大于等于4时，通过分解为所述最小排版颗粒的组合来得到对应的候选宫格排版方式；

所述将所述图像显示区域中的所述第i张图像，切换显示为采用多图显示布局的所述n张图像，包括：

确定与所述n张图像的数量n对应的至少两种候选宫格排版样式；

在所述至少两种候选宫格排版样式中，按照指定排版样式优先策略选择出本次使用的宫格排版格式；其中，所述指定排版样式优先策略包括：指定最上层为最小排版颗粒为2的候选排版样式优先被选择、指定最上层为最小排版颗粒为3L的候选排版样式优先被选择、指定最上层为最小排版颗粒为3R的候选排版样式优先被选择、指定最上层为最小排版颗粒为3的候选排版样式优先被选择中的至少一种；

所述交互模块，还用于接收对应于所述n张图像中的第j张图像的第二触发指令，j为不大于n的整数；

所述显示模块，还用于响应于所述第二触发指令，将所述图像显示区域中采用所述多图显示布局的所述n张图像，切换显示为采用所述单图显示布局的所述第j张图像，其中，若接收到所述第二触发指令时，所述用户界面被滚动至使所述图像显示区域仅显示有采用多图显示布局的所述n张图像的部分内容时，在切换后将采用所述单图显示布局的所述第j张图像的顶部，自动滚动至与所述图像显示区域的顶部对齐。

8.根据权利要求7所述的装置，其特征在于，

所述单图显示布局是同一时刻仅显示单张图像且采用左右方向进行图像切换的横排显示布局。

9.一种计算机设备，其特征在于，所述计算机设备包括：处理器和存储器；

所述存储器中存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、所述至少一段程序、所述代码集或指令集由所述处理器加载并执行以实现如上权利要求1至6任一所述的用户界面的显示方法。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质中存储有至少一条指令、至少一段程序、代码集或指令集，所述至少一条指令、所述至少一段程序、所述代码集或指令集由处理器加载并执行以实现如上权利要求1至6任一所述的用户界面的显示方法。