(19)国家知识产权局 (12)发明 专利申请 (10)申请公布号 (43)申请公布日 (21)申请 号 202211125640.6 (22)申请日 2022.09.16 (71)申请人 武汉虹信技 术服务有限责任公司 地址 430205 湖北省武汉市江夏区藏龙岛 科技园谭湖2路1号虹信无线通信产业 园2号楼4楼 (72)发明人 曾华　黄晓艳　钟卫为　 (74)专利代理 机构 武汉东喻专利代理事务所 (普通合伙) 42224 专利代理师 张英 (51)Int.Cl. G06F 8/20(2018.01) G06F 9/451(2018.01) (54)发明名称 一种可视化UI界面 生成方法及系统 (57)摘要 本发明涉及可视化界面技术领域， 尤其涉及 一种可视化UI界面生成方法及系统， 方法包括： 将用户界面网格化处理， 获取每个网格的坐标； 为用户界面中的不同菜单栏生成多个不同的标 记点， 将每个标记点附着至第一位置周围 的网格 点， 获取标记点的第一坐标； 获取用户界面在标 记点上的交互指令， 之后将每个标记 点附着至第 二位置周围的网格点， 获取第二位置的网格点的 坐标， 覆盖该标记点的位置坐标， 获取标记点的 实时位置。 本发明通过对用户界面进行网格化， 并为每个网格点定位， 通过设置网格点吸附模 块， 能够将用户界面菜单栏上的标记 点吸附到网 格点上， 实现对菜单栏位置的调节， 使得用户界 面更加界面化与人性化， 便于用户跟随自己的操 作习惯进行使用。 权利要求书1页 说明书6页 附图1页 CN 115373644 A 2022.11.22 CN 115373644 A 1.一种可视化UI界面 生成方法， 其特 征在于， 包括： 将用户界面网格化处 理， 获取每 个网格的坐标； 为所述用户界面中的不同菜单栏生成多个不同的标记点， 将每个标记点附着至第 一位 置周围的网格点， 获取 标记点的第一 坐标； 获取用户界面在标记点上的交互指令， 之后将每个标记点附着至第 二位置周围的网格 点， 获取所述第二位置的网格点的坐标， 覆盖该标记点的位置坐标， 获取标记点的实时位 置。 2.根据权利要求1所述的一种可视化UI界面 生成方法， 其特 征在于， 包括： 获取用户显示设备的分辨率， 将网格化生成的网格模型的分辨率调 整为所述显示设备 的分辨率。 3.根据权利要求1所述的一种可视化UI界面 生成方法， 其特 征在于， 包括： 捕捉所述菜单栏上的所述标记点在所述网格界面上的移动轨迹， 并获取标记点的位置 坐标。 4.根据权利要求3所述的一种可视化UI界面 生成方法， 其特 征在于， 包括： 在所述第一位置， 获取当前标记点的初始位置坐标， 将标记点与距离最近的网格点匹 配， 将初始位置坐标替换为对应网格点的坐标； 在所述第二位置， 获取当前标记点的第二位置坐标， 将标记点与距离最近的网格点匹 配， 将第二 位置坐标替换为对应网格点的坐标。 5.根据权利要求 4所述的一种可视化UI界面 生成方法， 其特 征在于， 包括： 获取所述标记点移动至所述第 二位置之前， 获取与所述标记点在实时位置上匹配的多 个网格点， 分别将每个网格点的坐标替换为对应的网格点的坐标， 生成所述标记点从所述 第一位置移动至所述第二 位置的轨 迹。 6.根据权利要求1 ‑5任一项所述的一种可视化UI界面 生成方法， 其特 征在于， 包括： 将所述用户界面网格化处 理后， 获取的网格化模型为矢量图。 7.一种可视化UI界面 生成系统， 其特 征在于， 包括： 网格化模块， 用于将用户界面网格化处 理， 获取每 个网格的坐标； 标记点生成模块， 用于为所述用户界面中的不同菜单栏 生成多个不同的标记点； 网格点吸附模块， 用于将每个标记点附着至第一位置周围的网格点， 获取标记点的第 一坐标； 坐标匹配模块， 用于获取用户界面在标记点上的交互指令， 之后将每个标记点附着至 第二位置周围的网格点， 获取所述第二位置的网格点的坐标， 覆盖该标记点的位置坐标， 获 取标记点的实时位置 。 8.一种电子设备， 包括存储器、 处理器及存储在所述存储器上并可在所述处理器上运 行的计算机程序， 其特征在于， 所述处理器执行所述程序时实现如权利要求1至6任一项所 述可视化UI界面 生成方法的步骤。 9.一种非暂态计算机可读存储介质， 其上存储有计算机程序， 其特征在于， 所述计算机 程序被处 理器执行时实现如权利要求1至 6任一项所述可视化UI界面 生成方法的步骤。权　利　要　求　书 1/1 页 2 CN 115373644 A 2一种可视化UI界面生成方 法及系统 技术领域 [0001]本发明涉及可视化界面 技术领域， 尤其涉及一种可视化UI界面 生成方法及系统。 背景技术 [0002]用户界面是指对软件的人机交互、 操作逻辑、 界面美观的整体设计。 好的UI设计不 仅是让软件变得有个性有品味， 还要让软件的操作变得舒适、 简单、 自由、 充分体现软件的 定位和特点。 UI设计又称界面设计， 是指对软件的人机交互、 操作逻辑、 界面美观的整体设 计。 [0003]目前的可视化页面生成技术还有着如下的缺点： 开发的可视化页面面向众多不同 的行业， 使得用户需要花费更多时间来自行调整界面的显示属 性， 会影响到用户的使用效 率； 不管是APP端的用户界面还是网页端的用户界面， 其上各个菜单栏的位置是固定不变 的， 用户无法根据自己的使用习惯对菜 单栏的位置进 行调节， 降低了用户界面的个性化， 同 时也不利于用户的使用。 发明内容 [0004]本发明提供一种可视化UI界面生成方法及系统， 用以解决上述现有技术的缺陷， 实现对菜单栏位置的调节， 能根据用户的使用随意调整UI的位置， 并能根据用户对标记 点、 菜单栏的操作指令及时响应至各类尺寸的显示设备， 兼容 性好。 [0005]本发明提供一种可视化UI界面 生成方法， 包括 步骤： [0006]将用户界面网格化处 理， 获取每 个网格的坐标； [0007]为所述用户界面中的不同菜单栏生成多个不同的标记点， 将每个标记点附着至第 一位置周围的网格点， 获取 标记点的第一 坐标； [0008]获取用户界面在标记点上的交互指令， 之后将每个标记点附着至第二位置周围的 网格点， 获取所述第二位置的网格点的坐标， 覆盖该标记点的位置坐标， 获取标记点的实时 位置。 [0009]根据本发明提供的一种可视化UI界面 生成方法， 进一 步包括： [0010]获取用户显示设备的分辨率， 将网格化生成的网格模型的分辨率调整为所述显示 设备的分辨 率。 [0011]根据本发明提供的一种可视化UI界面 生成方法， 进一 步包括： [0012]捕捉所述菜单栏上的所述标记点在所述网格界面上的移动轨迹， 并获取标记点的 位置坐标。 [0013]根据本发明提供的一种可视化UI界面 生成方法， 进一 步包括： [0014]在所述第一位置， 获取当前标记点的初始位置坐标， 将标记点与距离最近 的网格 点匹配， 将初始位置坐标替换为对应网格点的坐标； [0015]在所述第二位置， 获取当前标记点的第二位置坐标， 将标记点与距离最近 的网格 点匹配， 将第二 位置坐标替换为对应网格点的坐标。说　明　书 1/6 页 3 CN 115373644 A 3