CN115657920A - 一种拖拽式的个性化的自定工作台组件控制方法及装置 - Google Patents

Abstract

本发明公开了一种拖拽式的个性化的自定工作台组件控制方法及装置，所述方法包括：对人机交互界面以及第一模块图标均进行网格化划分处理，且人机交互界面在横轴以及纵轴方向上包含的网格数量均大于第一模块图标的横轴以及纵轴方向上包含的网格数量；获取用户针对第一模块图标的拖动轨迹终点所处的目标网格；以所述目标网格为基准，将所述第一模块图标显示在所述人机交互界面上。本发明通过对人机交互界面以及第一模块图标进行网格化处理，进而可以得到人机交互界面以及第一模块图标的坐标，可以拖动第一模块图标的行为转换为数学处理过程，进而可以实现对第一模块图标位置的自定义维护，还提高了用户体验。

Description

一种拖拽式的个性化的自定工作台组件控制方法及装置

技术领域

本发明涉及人机交互控制技术领域，更具体涉及一种拖拽式的个性化的自定工作台组件控制方法及装置。

背景技术

在软件的人机交互界面方面，传统首页由UI设计人员统一设计，人机交互界面布局显示内容一致，无法更改，但是，随着信息化越来越完善，属于同一个单位货真公司的用户数量也不断的增加，高层、中层、基层及不同业务部门的工作内容不一样，个人工作台的展示内容各有差异，加之子系统不断增加，工作台的内容也多样化起来，因此，个人工作台的展示方式也变得多样化起来，需要不断的进行工作台的维护。

因此，如何进行人机交互界面的个性化维护是亟待解决的技术问题。

发明内容

本发明所要解决的技术问题在于提供了一种拖拽式的个性化的自定工作台组件控制方法及装置，以进行人机交互界面的个性化维护。

本发明是通过以下技术方案解决上述技术问题的：

本发明提供了一种基于拖拽式的个性化的自定工作台组件控制方法，所述方法包括：

对人机交互界面以及第一模块图标均进行网格化划分处理，且人机交互界面在横轴以及纵轴方向上包含的网格数量均大于第一模块图标的横轴以及纵轴方向上包含的网格数量；

获取用户针对第一模块图标的拖动轨迹终点所处的目标网格；

以所述目标网格为基准，将所述第一模块图标显示在所述人机交互界面上。

可选的，所述以所述目标网格为基准，将所述第一模块图标显示在所述人机交互界面上，包括：

获取所述用户所选中的第一模块图标；实时获取拖动轨迹上的当前坐标点，将第一模块图标显示在当前坐标点处；

将用户输入的最后一个当前坐标点作为拖动轨迹终点，以所述拖动轨迹终点所处网格为基准显示第一模块图标。

可选的，所述将所述第一模块图标显示在所述人机交互界面上，包括：

在用户输入完成拖动轨迹之后，将第一模块图标移动至目标网格处显示。

可选的，所述将第一模块图标移动至目标网格处显示，包括：

以所述拖动轨迹为运动轨迹，将第一模块图标沿着所述拖动轨迹运动至目标网格处。

可选的，所述将所述第一模块图标显示在所述人机交互界面上，包括：

将目标网格作为对称中心显示所述第一模块图标。

可选的，所述方法还包括：

获取用户针对第一模块图标的锁定操作，其中，所述锁定操作的启动图标位于所述第一模块图标上；

监听用户针对第一模块图标对应网格区域的第一选中操作，判断所述第一选中操作是否选中了所述启动图标；

在未选中所述启动图标的情况下，丢弃所述第一选中操作以锁定所述第一模块图标的尺寸以及位置；

在选中了所述启动图标的情况下，在监听用户针对第一模块图标对应网格区域的第二选中操作后执行所述第二选中操作，其中，所述第二选中操作的晚于第一选中操作。

可选的，所述方法还包括：

获取用户提取第二模块图标第一属性的指令，其中，所述第一属性包括：横向尺寸、纵向尺寸、颜色、构图风格中的一种或组合；

获取用户针对第三模块图标的选中指令，根据所述第一属性调整所述第三模块图标的第二属性，以使第二属性与第一属性保持一致。

可选的，所述将所述第一模块图标显示在所述人机交互界面上，包括：

获取用户在人机交互界面上输入的封闭边框，判断所述用户针对第一模块图标的抖动特征达到预设阈值，其中，所述抖动特征包括：抖动幅度、抖动速度、抖动频率以及抖动方向中的一种或组合；

若是，将第一模块图标的大小缩放至封闭边框的大小。

本发明提供了一种基于拖拽式的个性化的自定工作台组件控制装置，所述装置包括：

网格化单元，用于对人机交互界面以及第一模块图标均进行网格化划分处理，且人机交互界面在横轴以及纵轴方向上包含的网格数量均大于第一模块图标的横轴以及纵轴方向上包含的网格数量；

获取单元，用于获取用户针对第一模块图标的拖动轨迹终点所处的目标网格；

显示单元，用于以所述目标网格为基准，将所述第一模块图标显示在所述人机交互界面上。

本发明相比现有技术具有以下优点：

本发明通过对人机交互界面以及第一模块图标进行网格化处理，进而可以得到人机交互界面以及第一模块图标的坐标，可以拖动第一模块图标的行为转换为数学处理过程，进而可以实现对第一模块图标位置的自定义维护，还提高了用户体验。

附图说明

图1为本发明实施例提供的一种基于拖拽式的个性化的自定工作台组件控制方法的流程示意图；

图2为本发明实施例中人机交互界面上坐标定义示意图；

图3为本发明实施例中人机交互界面上网格划分示意图；

图4为本发明实施例中第一模块图标在人机交互界面上的初始位置示意图；

图5为本发明实施例中第一模块图标在人机交互界面上的拖动示意图；

图6为本发明实施例中调整第一模块图标的尺寸示意图；

图7为本发明实施例中调整第二模块图标的第一属性的示意图；

具体实施方式

下面对本发明的实施例作详细说明，本实施例在以本发明技术方案为前提下进行实施，给出了详细的实施方式和具体的操作过程，但本发明的保护范围不限于下述的实施例。

实施例1

S101：对人机交互界面以及第一模块图标均进行网格化划分处理，且人机交互界面在横轴以及纵轴方向上包含的网格数量均大于第一模块图标的横轴以及纵轴方向上包含的网格数量。

图2为本发明实施例提供中人机交互界面上坐标定义示意图，如图2所示，人机交互界面左上角为起始位置(0，0)，依次横纵向坐标排列，每个坐标点为一个单元，一个单元为插件的最小分割单位；

图3为本发明实施例提供的中人机交互界面上网格划分示意图，如图3所示，人机交互界面使用网格布局，人机交互界面左上角为起始位置(0，0)，依次横纵向坐标排列，每个坐标点为一个单元，一个单元为插件的最小分割单位；

图4为本发明实施例中第一模块图标在人机交互界面上的初始位置示意图，如图4所示，第一模块图标为坐标上放置的实体元素，第一模块图标由大小 (size)、坐标(x,y)两个属性，第一模块图标可以占用多个单元，大小由横向和纵向所占用的空间组成，如[3,3]意思是该第一模块图标横向占用2个单元，纵向占用3个单元；坐标为第一模块图标左上角所在的单元的坐标,如:{x:0,y:2}表示该第一模块图标位于网格布局的第0行第2列。

在实际应用中，为了降低运算量，通常使用统一的网格尺寸进行第一模块图标以及人家交互界面的网格化处理。进一步的，为了对第一模块图标位置进行微调，可以将单个像素点的尺寸作为单个网格的尺寸。

S102：获取用户针对第一模块图标的拖动轨迹终点所处的目标网格。

在本发明实施例1中，用户使用鼠标进行第一模块图标的选中、拖动，以及拖动轨迹的输入。在用户选中第一模块图标之后，长按鼠标左键即可保持对第一模块图标的选中操作。

然后，用户控制鼠标在人机交互界面上的移动，第一模块图标随着鼠标的移动而移动，鼠标移动到A点，第一模块图标就运动至A点，鼠标移动到B点，第一模块图标就运动至B点。

用户释放鼠标左键时的坐标即为最后一个当前坐标点，也就是轨迹终点。

第一模块图标也可以被称为模块。

S103：以所述目标网格为基准，将所述第一模块图标显示在所述人机交互界面上。

在实施例1中，S103与S102步骤为同时执行，图5为本发明实施例中第一模块图标在人机交互界面上的拖动示意图，如图5所示，用户可以使用鼠标长按左键实现第一模块图标的选中，然后移动鼠标，进而实现第一模块图标位置上、下、左、右移动。

用户松开鼠标左键第一模块图标以磁吸方式自动定位到坐标适当位置，鼠标上方若没有第一模块图标，第一模块图标会自动定位到坐标顶部。

进一步的，图6为本发明实施例中调整第一模块图标的尺寸示意图，如图6 所示，鼠标移动到第一模块图标的右下角的灰色三角区域可以按住鼠标左右拖动鼠标来改变第一模块图标大小。

本发明实施例可由用户根据自己需要通过工具栏或菜单以拖放的形式自定义个性化工作台首页，用户在模块图标处于非锁定状态下可任意拖动小工具放到首页的任何位置；相比较目前大多数系统首页，从某种程度上降低了UI设计及前端开发人员重复修改首页工作量；同时，为日益复杂的企业内部管理系统提供了一种新的设计方案；并为给前端技术人员提供了一套灵活多变的操作方式，对于新上线子系统无需修改首页代码即可将新的功能提供给用户使用；还降低了设计人员与技术人员之间的耦合性，使前端开发人员更专于功能性的开发。应用本发明实施例，用户可以自定义自己的小工具，小工具显示效果及大小由各自系统自己定义，显示大小可设置最大显示效果最小效果。

另外，本发明实施例中，先对人机交互界面以及第一模块图标进行网格化处理，可以通过监听浏览器window大小的变化，来动态计算插件中第一模块图标的大小及位置，以便于实现插件适应不同分辨率的显示器，进而实现了网格尺寸的自动化弹性变化。

最后，本发明实施例中，系统还可以提取出用户自定义的第一人机交互界面上第一模块图标的分布信息，将这些分布信息生成格式文件，然后将格式文件存储在云端，在利用另一台电脑的前置摄像头监测到用户登录时，另一台电脑可以从云端下载格式文件，导入系统后，系统自动将另一台电脑的第二人机交互界面调整为与第一人机交互界面相同的样式，这样用户可以在不同的电脑上使用熟悉的界面风格，提高用用户体验。

另外，在用户退出另一台电脑时，系统根据本地存储的原始格式文件进行第二人机交互界面的恢复。

实施例2

基于本发明实施例1，本发明实施例2增加了以下步骤：

获取用户提取第二模块图标第一属性的指令，其中，所述第一属性包括：横向尺寸、纵向尺寸、颜色、构图风格中的一种或组合；获取用户针对第三模块图标的选中指令，根据所述第一属性调整所述第三模块图标的第二属性，以使第二属性与第一属性保持一致。

具体的，图7为本发明实施例中调整第二模块图标的第一属性的示意图，如图7所示，为了更方便的修改第一模块图标大小的一致问题，在第二模块图标上生成格式刷图标，点击格式刷图标后，系统即可读取出第二模块图标的第一属性信息。然后用户再点击需要改变大小的第三模块图标，第三模块图标的大小会自动改为第一模块图标的大小，此时第三模块图标的第二属性与第二模块图标的第一属性相同。

应用本发明上述实施例，可以快捷的改变第三模块图标的大小，进而使第三模块图标的尺寸与第二模块图标的尺寸保持一致。

进一步的，第一属性信息还可以为颜色，或者构图风格，例如，第二模块图标的构图风格为二次元动漫风，则利用本发明上述实施例也可以快捷的将第三模块图标的构图风格改为二次元动漫风。应用本发明上述实施例，可以使不同的图标构图风格保持一致，提高用户体验。

实施例3

基于本发明实施例1，本发明实施例3增加了以下步骤：

获取用户针对第一模块图标的锁定操作，其中，所述锁定操作的启动图标位于所述第一模块图标上；监听用户针对第一模块图标对应网格区域的第一选中操作，判断所述第一选中操作是否选中了所述启动图标；在未选中所述启动图标的情况下，丢弃所述第一选中操作以锁定所述第一模块图标的尺寸以及位置，并向用户展示解除对所述第一模块图标的尺寸以及位置的锁定的信息。在选中了所述启动图标的情况下，在监听用户针对第一模块图标对应网格区域的第二选中操作后执行所述第二选中操作，其中，所述第二选中操作的晚于第一选中操作。

用户调整第一模块图标大小位置达到自己想要的效果后，点击锁定按钮进执行锁定操作，则第一模块图标进入锁定状态，锁定状态下第一模块图标第一模块图标之间不可移动且第一模块图标大小不可改变；

用户自定首页完成后可锁定人机交互界面，锁定后的人机交互界面将退出人机交互界面自定义功能，锁定状态下用户不能拖动第一模块图标，进而避免误操作，提高用户体验。

实施例4

基于本发明实施例1，本发明实施例4增加了以下步骤：

在用户输入完成拖动轨迹之后，将第一模块图标移动至目标网格处显示。

用户可以先操作鼠标在人机交互界面上移动，系统记录鼠标在人机交互界面上的移动轨迹，将该移动轨迹作为拖动轨迹，识别出拖动轨迹的终点，然后将第一模块图标移动至目标网格处显示。应用本发明实施例，避免了第一模块图标的随动显示，降低系统计算量。

进一步的，可以所述拖动轨迹为运动轨迹，将第一模块图标沿着所述拖动轨迹运动至目标网格处，也就是说用户可以先规划一个拖动轨迹，然后第一模块沿着拖动轨迹的运动以类似动画播放的形式展示给用户。在实际应用中，用户可以画出图案，或者其他异型形状。

应用本发明上述实施例，提高了第一模块图标位置调整的趣味性，提高了用户体验。

实施例5

基于本发明实施例1，本发明实施例5增加了以下步骤：

获取用户在人机交互界面上输入的封闭边框，判断所述用户针对第一模块图标的抖动特征达到预设阈值，其中，所述抖动特征包括：抖动幅度、抖动速度、抖动频率以及抖动方向中的一种或组合；若是，将第一模块图标的大小缩放至封闭边框的大小。

示例性的，用户在人机交互界面上勾勒了一个矩形，该矩形的尺寸大于第一模块图标的尺寸，用户将第一模块图标拖入到矩形内后，然后按照一定的速度、方向来回抖动达到一定幅度若干次后，系统识别出该操作，进而自动将第一模块图标放大至填满整个矩形。

应用本发明上述实施例，可以使用户比较简单的改变第一功能模块的大小与长宽比，相对于现有技术中拖动边框改变尺寸的方式更加简单，提高了用户体验。

实施例6

对应于本发明实施例1-5任一实施例，本发明实施例6提供了一种基于拖拽式的个性化的自定工作台组件控制装置，所述装置包括：

网格化单元，用于对人机交互界面以及第一模块图标均进行网格化划分处理，且人机交互界面在横轴以及纵轴方向上包含的网格数量均大于第一模块图标的横轴以及纵轴方向上包含的网格数量；

获取单元，用于获取用户针对第一模块图标的拖动轨迹终点所处的目标网格；

显示单元，用于以所述目标网格为基准，将所述第一模块图标显示在所述人机交互界面上。

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

Claims (9)

1.一种基于拖拽式的个性化的自定工作台组件控制方法，其特征在于，所述方法包括：

对人机交互界面以及第一模块图标均进行网格化划分处理，且人机交互界面在横轴以及纵轴方向上包含的网格数量均大于第一模块图标的横轴以及纵轴方向上包含的网格数量；

获取用户针对第一模块图标的拖动轨迹终点所处的目标网格；

以所述目标网格为基准，将所述第一模块图标显示在所述人机交互界面上。

2.根据权利要求1所述的一种基于拖拽式的个性化的自定工作台组件控制方法，其特征在于，所述以所述目标网格为基准，将所述第一模块图标显示在所述人机交互界面上，包括：

获取所述用户所选中的第一模块图标；实时获取拖动轨迹上的当前坐标点，将第一模块图标显示在当前坐标点处；

将用户输入的最后一个当前坐标点作为拖动轨迹终点，以所述拖动轨迹终点所处网格为基准显示第一模块图标。

3.根据权利要求1所述的一种基于拖拽式的个性化的自定工作台组件控制方法，其特征在于，所述将所述第一模块图标显示在所述人机交互界面上，包括：

在用户输入完成拖动轨迹之后，将第一模块图标移动至目标网格处显示。

4.根据权利要求3所述的一种基于拖拽式的个性化的自定工作台组件控制方法，其特征在于，所述将第一模块图标移动至目标网格处显示，包括：

以所述拖动轨迹为运动轨迹，将第一模块图标沿着所述拖动轨迹运动至目标网格处。

5.根据权利要求1所述的一种基于拖拽式的个性化的自定工作台组件控制方法，其特征在于，所述将所述第一模块图标显示在所述人机交互界面上，包括：

将目标网格作为对称中心显示所述第一模块图标。

6.根据权利要求1所述的一种基于拖拽式的个性化的自定工作台组件控制方法，其特征在于，所述方法还包括：

获取用户针对第一模块图标的锁定操作，其中，所述锁定操作的启动图标位于所述第一模块图标上；

监听用户针对第一模块图标对应网格区域的第一选中操作，判断所述第一选中操作是否选中了所述启动图标；

在未选中所述启动图标的情况下，丢弃所述第一选中操作以锁定所述第一模块图标的尺寸以及位置；

在选中了所述启动图标的情况下，在监听用户针对第一模块图标对应网格区域的第二选中操作后执行所述第二选中操作，其中，所述第二选中操作的晚于第一选中操作。

7.根据权利要求1所述的一种基于拖拽式的个性化的自定工作台组件控制方法，其特征在于，所述方法还包括：

获取用户提取第二模块图标第一属性的指令，其中，所述第一属性包括：横向尺寸、纵向尺寸、颜色、构图风格中的一种或组合；

获取用户针对第三模块图标的选中指令，根据所述第一属性调整所述第三模块图标的第二属性，以使第二属性与第一属性保持一致。

8.根据权利要求1所述的一种基于拖拽式的个性化的自定工作台组件控制方法，其特征在于，所述将所述第一模块图标显示在所述人机交互界面上，包括：

获取用户在人机交互界面上输入的封闭边框，判断所述用户针对第一模块图标的抖动特征达到预设阈值，其中，所述抖动特征包括：抖动幅度、抖动速度、抖动频率以及抖动方向中的一种或组合；

若是，将第一模块图标的大小缩放至封闭边框的大小。

9.一种基于拖拽式的个性化的自定工作台组件控制装置，其特征在于，所述装置包括：

网格化单元，用于对人机交互界面以及第一模块图标均进行网格化划分处理，且人机交互界面在横轴以及纵轴方向上包含的网格数量均大于第一模块图标的横轴以及纵轴方向上包含的网格数量；

获取单元，用于获取用户针对第一模块图标的拖动轨迹终点所处的目标网格；

显示单元，用于以所述目标网格为基准，将所述第一模块图标显示在所述人机交互界面上。

Images