CN114063993B - 一种焦点移动处理方法、系统及计算机可读存储介质 - Google Patents

Abstract

本发明提供了一种焦点移动处理方法、系统及计算机可读存储介质，该方法包括：步骤S10、获取界面中各个UI元素，并定义每一UI元素的焦点位置，所述UI元素包括基础UI元素和扩展UI元素，所述基础UI元素的焦点位置为元素的中心位置，所述扩展UI元素的焦点位置为用户自定义得到；步骤S20、确定统一的焦点移动规则；步骤S30、根据UI元素的焦点位置和所述焦点移动规则确定焦点的移动轨迹；所述步骤S10和步骤S20无先后顺序。本发明无需对每一存在异形UI元素界面分别设置一套焦点移动轨迹或移动规则即可实现多样化需求设计，降低代码工作量和后期维护工作。

Description

一种焦点移动处理方法、系统及计算机可读存储介质

技术领域

本发明涉及计算机软件技术领域，特别指一种UI焦点移动处理方法、系统及计算机可读存储介质。

背景技术

UI元素是指应用程序里可以看见的任何可视元素，一些元素用来响应用户的操作，如按钮、文本字段，还有一些元素显示更多内容，如图像、标签等，常见的UI元素主要为形状大小固定的矩形，对于规则排布的UI元素其焦点移动方式是固定的，但电视界面根据需求变化较大，UI元素设计也变得复杂起来，出现一些不规则形状，即其界面是由不同形状不同排布的UI元素组成的界面，这种界面的焦点移动方式可以有多种形式，导致现在某些产品的UI界面上焦点移动轨迹无规律，由于现有制定的移动方式适用性不强，且每一界面的移动需求也不同，每个界面需要单独制定其焦点移动轨迹，代码量大，且各个界面的焦点移动轨迹需求设计不统一，同样加大了后期维护工作。

发明内容

本发明要解决的技术问题，在于提供一种UI焦点移动处理方法、系统及计算机可读存储介质，解决现有由于需求不同导致电视界面UI设计不规则，焦点移动轨迹不统一带来的软件代码量大，后期维护低效的问题。

第一方面，本发明提供了一种焦点移动处理方法，所述方法包括：

步骤S10、获取界面中各个UI元素，并定义每一UI元素的焦点位置，所述UI元素包括基础UI元素和扩展UI元素，所述基础UI元素的焦点位置为元素的中心位置，所述扩展UI元素的焦点位置为用户自定义得到；

步骤S20、确定统一的焦点移动规则；

步骤S30、根据UI元素的焦点位置和所述焦点移动规则确定焦点的移动轨迹；

所述步骤S10和步骤S20无先后顺序。

进一步的，所述焦点移动规则为：当发生焦点移动时，移动方向包括上、下、左或右，获取当前焦点移动方向上距离当前焦点位置最近的一个UI元素，并获取所述UI元素的焦点作为下一个焦点。

进一步的，所述步骤S10进一步包括：

步骤S11、获取界面中所有UI元素，所述UI元素包括基础UI元素和扩展UI元素，所述扩展UI元素为除基础UI元素以外的UI元素，所述基础UI元素为形状大小一致的UI元素；

步骤S12、对每一所述基础UI元素设置一个焦点，并定义每一所述基础UI元素的焦点位置为所述基础UI元素的中心位置；

步骤S13、对每一所述扩展UI元素进行自定义划分，得到复数个焦点区域，每一焦点区域设置一个区域焦点，每一所述区域焦点的焦点位置落入其对应的焦点区域内且由用户自定义选取的。

进一步的，每一所述焦点区域均为矩形区域。

进一步的，所述焦点移动规则为：当发生焦点移动时，移动方向包括上、下、左或右，获取当前焦点移动方向上距离当前焦点位置最近的一个UI元素，并获取所述UI元素的焦点作为下一个焦点，若所述UI元素为扩展UI元素，则获取所述扩展UI元素中距离当前焦点位置最近的一个焦点区域，并获取所述焦点区域的焦点作为下一个焦点。

第二方面，本发明提供了一种焦点移动处理系统，所述系统包括焦点位置选取模块、移动规则统一模块和焦点轨迹确定模块：

所述焦点位置选取模块，用于获取界面中各个UI元素，并定义每一UI元素的焦点位置，所述UI元素包括基础UI元素和扩展UI元素，所述基础UI元素的焦点位置为元素的中心位置，所述扩展UI元素的焦点位置为用户自定义得到；

所述移动规则统一模块，用于确定统一的焦点移动规则；

所述焦点轨迹确定模块，用于根据UI元素的焦点位置和所述焦点移动规则确定焦点的移动轨迹。

进一步的，所述焦点位置选取模块进一步包括：

用于获取界面中所有UI元素，所述UI元素包括基础UI元素和扩展UI元素，所述扩展UI元素为除基础UI元素以外的UI元素，所述基础UI元素为形状大小一致的UI元素；

对每一所述基础UI元素设置一个焦点，并定义每一所述基础UI元素的焦点位置为所述基础UI元素的中心位置；

对每一所述扩展UI元素进行自定义划分，得到复数个焦点区域，每一焦点区域设置一个区域焦点，每一所述区域焦点的焦点位置落入其对应的焦点区域内且由用户自定义选取的。

进一步的，每一所述焦点区域均为矩形区域。

进一步的，所述焦点移动规则为：当发生焦点移动时，移动方向包括上、下、左或右，获取当前焦点移动方向上距离当前焦点位置最近的一个UI元素，并获取所述UI元素的焦点作为下一个焦点，若所述UI元素为扩展UI元素，则获取所述扩展UI元素中距离当前焦点位置最近的一个焦点区域，并获取所述焦点区域的焦点作为下一个焦点。

第三方面，本发明提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现第一方面所述的方法。

本发明提供的一个或多个技术方案，至少具有如下技术效果或优点：

利用自定义焦点位置，结合原有的确定的移动规则或自定义移动规则，可以将不同需求的电视界面设计的焦点移动轨迹进行简化，避免每一差异界面撰写一次移动规则，同时可以兼顾各种设计需求。极大的简化了代码工作量，同时由于规则统一，也提高了后期维护工作效率。

附图说明

下面参照附图结合实施例对本发明作进一步的说明。

图1是本发明一种焦点移动处理方法的流程图。

图2是本发明一种焦点移动处理系统的系统框图。

图3为本发明实施例三中介质的结构示意图。

图4是本发明一具体实施例中扩展UI元素的焦点位置界面示意图。

图5是本发明一具体实施例中基础UI元素的焦点移动轨迹示意图。

图6是本发明一具体实施例中扩展UI元素的焦点移动轨迹示意图之一。

图7是本发明一具体实施例中扩展UI元素的焦点移动轨迹示意图之二。

图8是本发明一具体实施例中扩展UI元素的焦点移动轨迹示意图之三。

具体实施方式

本申请实施例提供一种焦点移动处理方法、系统和介质，用于解决现有不规则UI元素分布界面焦点移动轨迹复杂多样化导致的代码工作量大的问题。本申请实施例中的技术方案，总体思路如下：在各种UI界面布局上提炼出抽象普适的移动方式。当某个区域不满足制定的方式时，可以将多个UI元素看做一个整体，使其满足制定的规律。然后在这个整体内部再套用制定的规则，即利用统一的方式制定不同的设计，设计人员可以在各种复杂情况中套用制定的抽象移动方式，降低边际成本。

为了更好地理解上述技术方案，下面将结合说明书附图以及具体的实施方式对上述技术方案进行详细的说明。

实施例一

本发明提供了一种焦点移动处理方法，如图1所示，所述方法包括：

步骤S10、获取界面中各个UI元素，并定义每一UI元素的焦点位置，所述UI元素包括基础UI元素和扩展UI元素，所述基础UI元素的焦点位置为元素的中心位置，所述扩展UI元素的焦点位置为用户自定义得到；

步骤S20、确定统一的焦点移动规则；

步骤S30、根据UI元素的焦点位置和所述焦点移动规则确定焦点的移动轨迹；

所述步骤S10和步骤S20无先后顺序。

较佳的，所述焦点移动规则为：当发生焦点移动时，移动方向包括上、下、左或右，获取当前焦点移动方向上距离当前焦点位置最近的一个UI元素，并获取所述UI元素的焦点作为下一个焦点。

较佳的，所述步骤S10进一步包括：

步骤S11、获取界面中所有UI元素，所述UI元素包括基础UI元素和扩展UI元素，所述扩展UI元素为除基础UI元素以外的UI元素，所述基础UI元素为形状大小一致的UI元素；

步骤S12、对每一所述基础UI元素设置一个焦点，并定义每一所述基础UI元素的焦点位置为所述基础UI元素的中心位置；

步骤S13、对每一所述扩展UI元素进行自定义划分，得到复数个焦点区域，每一焦点区域设置一个区域焦点，每一所述区域焦点的焦点位置落入其对应的焦点区域内且由用户自定义选取的。每一扩展UI元素由复数个基础UI元素组成，通过自定义划分后拆成若干个焦点区域，如图4所示，在一界面设计中存在一个扩展UI元素，用户根据需要可以将其划分出至少一个焦点区域，如图4中的A、B、C三个焦点区域，且每一个焦点区域设置一个区域焦点，即这个扩展UI元素包括三个焦点区域以及三个区域焦点，对于扩展UI元素，也可以不进行划分，直接自定义其上一个位置作为焦点位置，如图4中的扩展UI元素中的圆点为其焦点位置。

较佳的，每一所述焦点区域均为矩形区域，各个焦点区域可以为形状大小不一的矩形区域。

较佳的，所述焦点移动规则为：当发生焦点移动时，移动方向包括上、下、左或右，获取当前焦点移动方向上距离当前焦点位置最近的一个UI元素，并获取所述UI元素的焦点作为下一个焦点，若所述UI元素为扩展UI元素，则获取所述扩展UI元素中距离当前焦点位置最近的一个焦点区域，并获取所述焦点区域的焦点作为下一个焦点。

例如，当界面中只有基础UI元素时，由于其分布均匀且对齐排布，因此，在焦点移动时，向上、向下、向左和向右移动都是唯一的，如图5所示，为了简化示图，各附图中隐藏基础UI元素的焦点图示（各基础UI元素的焦点位置均固定一致），基础UI元素之间的焦点移动轨迹是直线的，要么水平方向要么竖直方向。当界面中有一个扩展UI元素时，根据用户需求判断是否对该扩展UI元素进行划分，若不进行划分，则根据需要指定该扩展UI元素内部的一个位置作为其焦点位置，之后焦点的移动都集中在该焦点位置进行，如图6中轨迹所示，当从扩展UI元素左侧有一个焦点向右移动时，扩展UI元素作为其右侧最近一个元素，确定焦点移动至该扩展UI元素内部，之后根据该扩展UI元素的焦点位置判断下一个移动位置，此时若再向后移动，则取该UI扩展元素的焦点位置最近的右侧元素的焦点作为下一个焦点，若向上移动，同样的，也是取扩展UI元素的焦点位置最近的上方元素的焦点作为下一个焦点。同理，当界面中存在有多个不同的扩展UI元素时，仍然根据已经确定的焦点位置和统一的移动规则确定焦点移动轨迹，如图7所示，焦点移动时进入对应元素之后由该元素内部的焦点位置确定其下一个焦点的位置。当存在一些特殊页面需要更加精准的轨迹移动时，用户将扩展UI元素进行划分，并根据其预想的轨迹对扩展UI划分成多个焦点区域，设定多个区域焦点，如图8所示，通过设置多焦点区域的扩展UI元素的不同区域焦点位置实现对焦点轨迹进行设计，图8中的一个扩展UI区域被划分成左右两个矩形框，并根据需要将焦点设置在左边矩形框的左上角位置（根据用户想要的轨迹自定义，也可以是右上角、左下角或右下角等该区域内任意一个位置）和右边矩形框的左上角位置（根据用户想要的轨迹自定义，也可以是右上角、左下角或右下角等该区域内任意一个位置），之后根据进入该扩展UI元素的前一个UI元素的位置，判断前一个UI元素的焦点位置离左侧的矩形框近还是离右侧的矩形框近，从而判断进入扩展UI元素后进入左侧的区域焦点还是右侧的区域焦点，之后再根据左侧的区域焦点位置或者右侧的区域焦点位置确定下一个UI元素位置，以此类推，完成焦点轨迹移动。

基于同一发明构思，本申请还提供了与实施例一中的方法对应的装置，详见实施例二。

实施例二

本实施例提供一种焦点移动处理系统，所述系统包括焦点位置选取模块、移动规则统一模块和焦点轨迹确定模块：

所述焦点位置选取模块，用于获取界面中各个UI元素，并定义每一UI元素的焦点位置，所述UI元素包括基础UI元素和扩展UI元素，所述基础UI元素的焦点位置为元素的中心位置，所述扩展UI元素的焦点位置为用户自定义得到；

所述移动规则统一模块，用于确定统一的焦点移动规则；

所述焦点轨迹确定模块，用于根据UI元素的焦点位置和所述焦点移动规则确定焦点的移动轨迹。

较佳的，所述焦点位置选取模块进一步包括：

用于获取界面中所有UI元素，所述UI元素包括基础UI元素和扩展UI元素，所述扩展UI元素为除基础UI元素以外的UI元素，所述基础UI元素为形状大小一致的UI元素；

对每一所述基础UI元素设置一个焦点，并定义每一所述基础UI元素的焦点位置为所述基础UI元素的中心位置；

对每一所述扩展UI元素进行自定义划分，得到复数个焦点区域，每一焦点区域设置一个区域焦点，每一所述区域焦点的焦点位置落入其对应的焦点区域内且由用户自定义选取的。每一扩展UI元素由复数个基础UI元素组成，通过自定义划分后拆成若干个焦点区域，如图4所示，在一界面设计中存在一个扩展UI元素，用户根据需要可以将其划分出至少一个焦点区域，如图4中的A、B、C三个焦点区域，且每一个焦点区域设置一个区域焦点，即这个扩展UI元素包括三个焦点区域以及三个区域焦点，对于扩展UI元素，也可以不进行划分，直接自定义其上一个位置作为焦点位置，如图4中的扩展UI元素中的圆点为其焦点位置。

较佳的，每一所述焦点区域均为矩形区域。

较佳的，对所述焦点移动规则进行统一，所述焦点移动规则可以为：当发生焦点移动时，移动方向包括上、下、左或右，获取当前焦点移动方向上距离当前焦点位置最近的一个UI元素，并获取所述UI元素的焦点作为下一个焦点，若所述UI元素为扩展UI元素，则获取所述扩展UI元素中距离当前焦点位置最近的一个焦点区域，并获取所述焦点区域的焦点作为下一个焦点。

例如，当界面中只有基础UI元素时，由于其分布均匀且对齐排布，因此，在焦点移动时，向上、向下、向左和向右移动都是唯一的，如图5所示，为了简化示图，各附图中隐藏基础UI元素的焦点图示（各基础UI元素的焦点位置均固定一致），基础UI元素之间的焦点移动轨迹是直线的，要么水平方向要么竖直方向。当界面中有一个扩展UI元素时，根据用户需求判断是否对该扩展UI元素进行划分，若不进行划分，则根据需要指定该扩展UI元素内部的一个位置作为其焦点位置，之后焦点的移动都集中在该焦点位置进行，如图6中轨迹所示，当从扩展UI元素左侧有一个焦点向右移动时，扩展UI元素作为其右侧最近一个元素，确定焦点移动至该扩展UI元素内部，之后根据该扩展UI元素的焦点位置判断下一个移动位置，此时若再向后移动，则取该UI扩展元素的焦点位置最近的右侧元素的焦点作为下一个焦点，若向上移动，同样的，也是取扩展UI元素的焦点位置最近的上方元素的焦点作为下一个焦点。同理，当界面中存在有多个不同的扩展UI元素时，仍然根据已经确定的焦点位置和统一的移动规则确定焦点移动轨迹，如图7所示，焦点移动时进入对应元素之后由该元素内部的焦点位置确定其下一个焦点的位置。当存在一些特殊页面需要更加精准的轨迹移动时，用户将扩展UI元素进行划分，并根据其预想的轨迹对扩展UI划分成多个焦点区域，设定多个区域焦点，如图8所示，通过设置多焦点区域的扩展UI元素的不同区域焦点位置实现对焦点轨迹进行设计，图8中的一个扩展UI区域被划分成左右两个矩形框，并根据需要将焦点设置在左边矩形框的左上角位置（根据用户想要的轨迹自定义，也可以是右上角、左下角或右下角等该区域内任意一个位置）和右边矩形框的左上角位置（根据用户想要的轨迹自定义，也可以是右上角、左下角或右下角等该区域内任意一个位置），之后根据进入该扩展UI元素的前一个UI元素的位置，判断前一个UI元素的焦点位置离左侧的矩形框近还是离右侧的矩形框近，从而判断进入扩展UI元素后进入左侧的区域焦点还是右侧的区域焦点，之后再根据左侧的区域焦点位置或者右侧的区域焦点位置确定下一个UI元素位置，以此类推，完成焦点轨迹移动。

基于同一发明构思，本申请提供了实施例一对应的存储介质，详见实施例三。

实施例三

本实施例提供一种计算机可读存储介质，如图3所示，其上存储有计算机程序，该计算机程序被处理器执行时，可以实现实施例一中任一实施方式。

本发明实施例中提供的一个或多个技术方案，至少具有如下技术效果或优点：利用自定义焦点位置，结合原有的确定的移动规则或自定义移动规则，可以将不同需求的电视界面设计的焦点移动轨迹进行简化，避免每一差异界面撰写一次移动规则，同时可以兼顾各种设计需求。用户只需要对不同扩展UI元素进行焦点设计，通过不同的焦点位置实现不同的轨迹设计，只需要一套焦点移动规则，即可实现不同轨迹的设计，即将不同需求集中在焦点位置的设计上，不需要重复撰写各种复杂的移动规则，也可以得到不同的焦点移动轨迹，极大的简化了代码工作量，同时由于规则统一，也便于后期界面的修改与维护，提高界面设计效率。

虽然以上描述了本发明的具体实施方式，但是熟悉本技术领域的技术人员应当理解，我们所描述的具体的实施例只是说明性的，而不是用于对本发明的范围的限定，熟悉本领域的技术人员在依照本发明的精神所作的等效的修饰以及变化，都应当涵盖在本发明的权利要求所保护的范围内。

Claims (5)

1.一种焦点移动处理方法，其特征在于：所述方法包括：

步骤S10、获取界面中各个UI元素，并定义每一UI元素的焦点位置，所述UI元素包括基础UI元素和扩展UI元素，所述基础UI元素的焦点位置为元素的中心位置，所述扩展UI元素的焦点位置为用户自定义得到；所述步骤S10进一步包括：

步骤S11、获取界面中所有UI元素，所述UI元素包括基础UI元素和扩展UI元素，所述扩展UI元素为除基础UI元素以外的UI元素，所述基础UI元素为形状大小一致的UI元素；

步骤S12、对每一所述基础UI元素设置一个焦点，并定义每一所述基础UI元素的焦点位置为所述基础UI元素的中心位置；

步骤S13、对每一所述扩展UI元素进行自定义划分，得到复数个焦点区域，每一焦点区域设置一个区域焦点，每一所述区域焦点的焦点位置落入其对应的焦点区域内且由用户自定义选取的；

步骤S20、确定统一的焦点移动规则；所述焦点移动规则为：当发生焦点移动时，移动方向包括上、下、左或右，获取当前焦点移动方向上距离当前焦点位置最近的一个UI元素，并获取所述UI元素的焦点作为下一个焦点，若所述UI元素为扩展UI元素，则获取所述扩展UI元素中距离当前焦点位置最近的一个焦点区域，并获取所述焦点区域的焦点作为下一个焦点；

步骤S30、根据UI元素的焦点位置和所述焦点移动规则确定焦点的移动轨迹；

所述步骤S10和步骤S20无先后顺序。

2.如权利要求1所述的一种焦点移动处理方法，其特征在于：每一所述焦点区域均为矩形区域。

3.一种焦点移动处理系统，其特征在于：所述系统包括焦点位置选取模块、移动规则统一模块和焦点轨迹确定模块：

所述焦点位置选取模块，用于获取界面中各个UI元素，并定义每一UI元素的焦点位置，所述UI元素包括基础UI元素和扩展UI元素，所述基础UI元素的焦点位置为元素的中心位置，所述扩展UI元素的焦点位置为用户自定义得到；所述焦点位置选取模块进一步包括：

用于获取界面中所有UI元素，所述UI元素包括基础UI元素和扩展UI元素，所述扩展UI元素为除基础UI元素以外的UI元素，所述基础UI元素为形状大小一致的UI元素；

对每一所述基础UI元素设置一个焦点，并定义每一所述基础UI元素的焦点位置为所述基础UI元素的中心位置；

对每一所述扩展UI元素进行自定义划分，得到复数个焦点区域，每一焦点区域设置一个区域焦点，每一所述区域焦点的焦点位置落入其对应的焦点区域内且由用户自定义选取的；

所述移动规则统一模块，用于确定统一的焦点移动规则；所述焦点移动规则为：当发生焦点移动时，移动方向包括上、下、左或右，获取当前焦点移动方向上距离当前焦点位置最近的一个UI元素，并获取所述UI元素的焦点作为下一个焦点，若所述UI元素为扩展UI元素，则获取所述扩展UI元素中距离当前焦点位置最近的一个焦点区域，并获取所述焦点区域的焦点作为下一个焦点；

所述焦点轨迹确定模块，用于根据UI元素的焦点位置和所述焦点移动规则确定焦点的移动轨迹。

4.如权利要求3所述的一种焦点移动处理系统，其特征在于：每一所述焦点区域均为矩形区域。

5.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现如权利要求1至2任一项所述的方法。

Images