图形用户界面的布局方法、装置、电子设备及存储介质制造方法及图纸

本发明专利技术公开了一种图形用户界面的布局方法、装置、电子设备及存储介质，其中，该方法包括：获取在图像用户界面上的滑动轨迹坐标信息，轨迹坐标信息至少包括：起始点坐标信息、终点坐标信息；根据预设起始阈值和起始点坐标信息判断滑动轨迹是否有效；响应于滑动轨迹有效，根据起始点坐标信息与终点坐标信息确定滑动偏移信息；根据滑动偏移信息确定与其对应的布局指令；根据布局指令对工具栏区域和内容显示区域进行布局调整操作，其中，工具栏区域的布局调整操作通过动画形式实现。通过本发明专利技术，可以提高用户的体验感。

Layout method, device, electronic equipment and storage medium of GUI

【技术实现步骤摘要】
图形用户界面的布局方法、装置、电子设备及存储介质
本专利技术涉及终端操作系统领域，具体涉及一种图形用户界面的布局方法、装置、电子设备及存储介质。
技术介绍
随着智能设备的普及，越来越多的移动应用部署在移动终端设备(例如，手机)上，由于移动终端设备屏幕先天的小屏特性，工具栏功能跳转和页面内容浏览需要合理布置和安排，其美观性、合理性和实用性直接影响着用户的观感和评价。然而，现有的图形用户界面(GraphicalUserInterface，GUI)布局方式一般为工具栏，该工具栏为固定设置，占据了大量的屏幕显示空间，影响了用户对页面内容的有效浏览，降低了用户的体验感。
技术实现思路
有鉴于此，本专利技术提供一种图形用户界面的布局方法、装置、电子设备及存储介质，以解决上述提及的目前移动终端显示屏上的工具栏占据大量显示空间而影响用户浏览页面体验感的问题。根据本专利技术的第一方面，提供一种图形用户界面的布局方法，所述图形用户界面包括：工具栏区域和内容显示区域，所述工具栏区域包括：多个功能部件，所述方法包括：获取在所述图像用户界面上的滑动轨迹坐标信息，所述轨迹坐标信息至少包括：起始点坐标信息、终点坐标信息；根据预设起始阈值和所述起始点坐标信息判断所述滑动轨迹是否有效；响应于所述滑动轨迹有效，根据所述起始点坐标信息与所述终点坐标信息确定滑动偏移信息；根据所述滑动偏移信息确定与其对应的布局指令；根据所述布局指令对所述工具栏区域和内容显示区域进行布局调整操作，其中，所述工具栏区域的布局调整操作通过动画形式实现。根据本专利技术的第二方面，提供一种图形用户界面的布局装置，所述图形用户界面包括：工具栏区域和内容显示区域，所述工具栏区域包括：多个功能部件，所述装置包括：轨迹坐标获取单元，用于获取在所述图像用户界面上的滑动轨迹坐标信息，所述轨迹坐标信息至少包括：起始点坐标信息、终点坐标信息；轨迹有效判断单元，用于根据预设起始阈值和所述起始点坐标信息判断所述滑动轨迹是否有效；滑动偏移确定单元，用于响应于所述滑动轨迹有效，根据所述起始点坐标信息与所述终点坐标信息确定滑动偏移信息；布局指令确定单元，用于根据所述滑动偏移信息确定与其对应的布局指令；布局操作单元，用于根据所述布局指令对所述工具栏区域和内容显示区域进行布局调整操作，其中，所述工具栏区域的布局调整操作通过动画形式实现。根据本专利技术的第三方面，提供一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现上述图形用户界面的布局方法的步骤。根据本专利技术的第四方面，本专利技术提供一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现上述图形用户界面的布局方法的步骤。由上述技术方案可知，根据获取的有效滑动轨迹来确定滑动偏移信息并确定对应的布局指令，根据确定的布局指令对工具栏区域和内容显示区域进行布局调整操作，其中，对工具栏区域的布局调整操作还可以通过动画形式来实现，通过重新布局工具栏区域和内容显示区域，可以克服现有技术中的工具栏区域在屏幕上占据较大的显示空间而影响用户有效浏览页面内容的问题，从而可以提高用户的体验感。附图说明为了更清楚地说明本专利技术实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本专利技术的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。图1是图形用户界面的一个示意图；图2是根据本专利技术实施例的图形用户界面的布局方法的流程图；图3是根据本专利技术实施例的图形用户界面的另一个示意图；图4(a)、图4(b)是根据本专利技术实施例的动画函数曲线示意图；图5是根据本专利技术实施例的图形用户界面的布局装置的结构框图；图6是根据本专利技术实施例的布局指令确定单元54的结构框图；图7是根据本专利技术实施例的图形用户界面的布局装置的详细结构框图；图8是根据本专利技术实施例的基于iOS操作系统的GUI布局装置的结构示例图；图9是根据本专利技术实施例的用户意图识别引擎1的结构框图；图10是根据本专利技术实施例的渐进变化装置3的结构框图；图11是根据本专利技术实施例的触摸轨迹示意图；图12是根据本专利技术实施例的电子设备的示意图。具体实施方式为使本专利技术实施例的目的、技术方案和优点更加清楚，下面将结合本专利技术实施例中的附图，对本专利技术实施例中的技术方案进行清楚、完整的描述，显然，所描述的实施例是本专利技术一部分实施例，而不是全部的实施例。基于本专利技术中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本专利技术保护的范围。鉴于现有移动终端的GUI布局一般为固定设置的工具栏和内容显示区域，其中，工具栏区域包括：多个功能部件，参见图1所示的GUI布局示意图，如图1所示，工具栏区域从左到右分别包括：筛选功能按钮，点击可以跳转到筛选页；搜索功能入口，点击可以跳转到搜索页；购物车功能按钮，点击可以跳转到购物车页面；订单功能按钮，点击可以跳转到订单页。由于工具栏区域在屏幕上占据了较大的显示空间，影响了用户对页面内容的有效浏览，从而降低了用户的体验感。基于此，本专利技术实施例提供一种图形用户界面的布局方案，以克服现有技术中的缺点，提高用户的体验感。以下结合附图来详细描述本专利技术实施例。本专利技术实施例提供了一种图形用户界面的布局方法，图2是该方法的流程图，如图2所示，该方法包括：步骤101，获取在所述图像用户界面上的滑动轨迹坐标信息，所述轨迹坐标信息至少包括：起始点坐标信息、终点坐标信息；步骤102，根据预设起始阈值和所述起始点坐标信息判断所述滑动轨迹是否有效；步骤103，响应于所述滑动轨迹有效，根据所述起始点坐标信息与所述终点坐标信息确定滑动偏移信息；步骤104，根据所述滑动偏移信息确定与其对应的布局指令；步骤105，根据所述布局指令对所述工具栏区域和内容显示区域进行布局调整操作，其中，所述工具栏区域的布局调整操作通过动画形式实现。由以上描述可知，根据获取的有效滑动轨迹来确定滑动偏移信息并确定对应的布局指令，根据确定的布局指令对工具栏区域和内容显示区域进行布局调整操作，其中，对工具栏区域的布局调整操作还可以通过动画形式来实现，通过重新布局工具栏区域和内容显示区域，可以克服现有技术中的工具栏区域在屏幕上占据较大的显示空间而影响用户有效浏览页面内容的问题，从而可以提高用户的体验感。在具体实施过程中，可以预先设置起始阈值，例如，可以是一个阈值范围，在该范围对应的屏幕部分的滑动轨迹，可以认为是有效滑动轨迹。在一个实施例中，可以根据所述起始点坐标信息与所述终点坐标信息的垂直距离差值来确定所述滑动偏移信息。具体而言，可以通过如下公式来计算滑动偏移信息Y_offset：Y_offset＝Begin_LocationY-End_Loc本文档来自技高网...

【技术保护点】
1.一种图形用户界面的布局方法，所述图形用户界面包括：工具栏区域和内容显示区域，所述工具栏区域包括：多个功能部件，其特征在于，所述方法包括：/n获取在所述图像用户界面上的滑动轨迹坐标信息，所述轨迹坐标信息至少包括：起始点坐标信息、终点坐标信息；/n根据预设起始阈值和所述起始点坐标信息判断所述滑动轨迹是否有效；/n响应于所述滑动轨迹有效，根据所述起始点坐标信息与所述终点坐标信息确定滑动偏移信息；/n根据所述滑动偏移信息确定与其对应的布局指令；/n根据所述布局指令对所述工具栏区域和内容显示区域进行布局调整操作，其中，所述工具栏区域的布局调整操作通过动画形式实现。/n

【技术特征摘要】
1.一种图形用户界面的布局方法，所述图形用户界面包括：工具栏区域和内容显示区域，所述工具栏区域包括：多个功能部件，其特征在于，所述方法包括：
获取在所述图像用户界面上的滑动轨迹坐标信息，所述轨迹坐标信息至少包括：起始点坐标信息、终点坐标信息；
根据预设起始阈值和所述起始点坐标信息判断所述滑动轨迹是否有效；
响应于所述滑动轨迹有效，根据所述起始点坐标信息与所述终点坐标信息确定滑动偏移信息；
根据所述滑动偏移信息确定与其对应的布局指令；
根据所述布局指令对所述工具栏区域和内容显示区域进行布局调整操作，其中，所述工具栏区域的布局调整操作通过动画形式实现。


2.根据权利要求1所述的图形用户界面的布局方法，其特征在于，根据所述起始点坐标信息与所述终点坐标信息确定滑动偏移信息包括：
根据所述起始点坐标信息与所述终点坐标信息的垂直距离差值来确定所述滑动偏移信息。


3.根据权利要求1所述的图形用户界面的布局方法，其特征在于，根据所述滑动偏移信息确定与其对应的布局指令包括：
当所述滑动偏移信息指示所述滑动轨迹为从屏幕下方向屏幕上方时，确定所述布局指令为将所述工具栏区域进行缩小操作、将所述内容显示区域进行扩大操作。


4.根据权利要求3所述的图形用户界面的布局方法，其特征在于，将所述工具栏区域进行缩小操作、将所述内容显示区域进行扩大操作包括：
将各功能部件的显示区域进行缩小操作并将缩小显示的功能部件在预定区域显示；以及
相应地扩大所述内容显示区域。


5.根据权利要求3所述的图形用户界面的布局方法，其特征在于，根据所述滑动偏移信息确定与其对应的布局指令还包括：
当所述滑动偏移信息指示所述滑动轨迹为从屏幕上方向屏幕下方时，确定所述布局指令为将缩小的工具栏区域进行扩大并恢复到初始状态操作、将扩大的内容显示区域进行缩小并恢复到初始状态操作。


6.根据权利要求1所述的图形用户界面的布局方法，其特征在于，所述轨迹坐标信息还包括：至少一个轨迹中任意点坐标信息，所述方法还包括：
当根据所述起始点坐标信息、所述终点坐标信息以及至少一个轨迹中任意点坐标信息确定所述滑动轨迹为漩涡状时，语音播报所述内容显示区域的当前显示内容。


7.根据权利要求1所述的图形用户界面的布局方法，其特征在于，所述动画形式通过如下方式实现：
根据各功能部件的初始位置信息、终点位置信息、中点位置信息、以及单位时间在预设的整个动画时间内的占比信息来进行所述各功能部件的布局调整操作。


8.一种图形用户界面的布局装置，所述图形用户界面包括：工具栏区域和内容显示区域，所述工具栏区域包括：多个功能部件，其特征在于，所述装置包括：
轨迹坐标获取单元，用于获取在所述图像用户界面上的滑动轨迹坐标信息，所述轨迹坐标信息至少包括：起始点坐标信息、终点坐标信息；...

【专利技术属性】
技术研发人员：沈思思，连煜伟，曾志达，黄好，
申请(专利权)人：中国工商银行股份有限公司，
类型：发明
国别省市：北京;11