(19)国家知识产权局 (12)发明 专利申请 (10)申请公布号 (43)申请公布日 (21)申请 号 202211065747.6 (22)申请日 2022.08.31 (71)申请人 京东方科技 集团股份有限公司 地址 100015 北京市朝阳区酒仙桥路10号 (72)发明人 陈林兵　 (74)专利代理 机构 北京风雅颂专利代理有限公 司 11403 专利代理师 王刚 (51)Int.Cl. G06F 9/451(2018.01) (54)发明名称 界面设计的布局方法、 界面的展示方法及相 关设备 (57)摘要 本公开提供一种界面设计的布局方法、 界面 的展示方法及相关设备。 该界面设计的布局方 法， 包括： 提供用于对所述界面设计进行布局的 页面， 所述页面中包括用于拖拽生成所述界面设 计的界面对象的至少一个图标； 响应于针对所述 至少一个图标中的目标图标的拖拽操作， 在所述 页面的展示区域的与所述拖拽操作对应的位置 生成所述目标图标对应的目标界面对象； 其中， 所述展示区域包括多个单元格， 所述目标界面对 象以占用单元格的形式布局在所述展示区域中 且所述目标界面对象至少占用一个所述单元格； 以及基于 所述展示区域和所述目标界面对象， 生 成所述界面设计对应的界面。 权利要求书3页 说明书13页 附图9页 CN 115390976 A 2022.11.25 CN 115390976 A 1.一种界面设计的布局方法， 包括： 提供用于对所述界面设计进行布局的页面， 所述页面中包括用于拖拽生成所述界面设 计的界面对象的至少一个图标； 响应于针对所述至少一个图标中的目标图标的拖拽操作， 在所述页面的展示 区域的与 所述拖拽操作对应的位置生成所述 目标图标对应的目标界面对 象； 其中， 所述展示区域包 括多个单元格， 所述目标界面对象以占用单元格的形式布局在所述展示区域中且所述目标 界面对象至少占用一个所述单 元格； 以及 基于所述展示区域和所述目标界面对象， 生成所述界面设计对应的界面。 2.如权利要求1所述的方法， 还 包括： 确定所述页面的展示 区域的尺寸， 并根据 所述展示 区域的尺寸将所述展示区域划分为 多个单元格。 3.如权利要求2所述的方法， 其中， 确定所述页面的展示区域的尺寸， 并根据所述展示 区域的尺寸将所述展示区域划分为多个单 元格， 包括： 确定所述页面的展示区域的尺寸、 沿第一方向排列的单元格数量、 靠近所述展示区域 的垂直于所述第一方向的第一边缘的单元格与所述第一边缘之间的间距以及相邻单元格 之间的间距； 根据所述页面的展示区域的尺寸、 沿第一方向排列的单元格数量、 靠近所述展示区域 的垂直于所述第一方向的第一边缘的单元格与所述第一边缘之间的间距以及相邻单元格 之间的间距， 确定所述单 元格沿所述第一方向的长度； 确定所述单元格的宽高比， 并根据所述宽高比确定所述单元格沿第二方向的长度； 以 及 根据所述单元格沿所述第 一方向的长度、 所述单元格沿所述第 二方向的长度以及所述 展示区域的尺寸， 将所述展示区域划分为多个单 元格。 4.如权利要求1所述的方法， 其中， 响应于针对所述至少一个图标中的目标图标的拖拽 操作， 在所述页面的展示区域的与所述拖拽操作对应的位置生成所述目标图标对应的目标 界面对象， 包括： 响应于针对所述至少一个图标中的目标图标的拖拽操作， 确定所述目标图标对应的目 标界面对象以及所述目标界面对象占用的单 元格的数量； 以及 在所述展示区域的与 所述拖拽操作对应的位置生成所述目标界面对象， 所述目标界面 对象的大小与所述数量的单 元格的总面积相关。 5.如权利要求4所述的方法， 其中， 所述目标界面对象占用的单元格的数量包括所述目 标界面对象沿第一方向占用的单元格的数量和所述目标界面对 象沿第二方向占用的单元 格的数量， 所述第一方向与所述第二方向垂直。 6.如权利要求4所述的方法， 其中， 在所述展示区域的与 所述拖拽操作对应的位置生成 所述目标界面对象， 包括： 确定所述 拖拽操作的在所述展示区域中的释放 位置； 根据所述释放 位置确定目标 单元格； 以及 根据所述目标单元格的位置以及所述目标界面对象占用的单元格的数量， 生成所述目 标界面对象。权　利　要　求　书 1/3 页 2 CN 115390976 A 27.如权利要求6所述的方法， 还 包括： 存储所述目标图标的信 息、 所述目标单元格的位置信 息以及所述目标界面对象占用的 单元格的数量。 8.如权利要求1所述的方法， 其中， 在所述页面的展示区域的与 所述拖拽操作对应的位 置生成所述目标图标对应的目标界面对象之前， 还 包括： 响应于所述拖拽操作的当前拖拽位置处于所述展示 区域， 在所述展示 区域的与所述当 前拖拽位置对应的位置生成所述目标界面对象的虚拟图像。 9.一种界面的展示方法， 所述界面包括至少一个界面对象， 所述方法包括： 接收展示所述界面的第一指令； 以及 根据所述第一指令， 在所述界面中展示所述界面对象； 其中， 所述展示区域包括多个单元格， 所述界面对象以占用单元格的形式布局在所述 展示区域中且至少占用一个所述单 元格。 10.如权利要求9所述的方法， 还 包括： 确定所述页面的展示 区域的尺寸， 并根据 所述展示 区域的尺寸将所述展示区域划分为 多个单元格。 11.如权利要求10所述的方法， 其中， 确定所述页面的展示区域的尺寸， 并根据所述展 示区域的尺寸将所述展示区域划分为多个单 元格， 包括： 确定所述页面的展示区域的尺寸、 沿第一方向排列的单元格数量、 靠近所述展示区域 的垂直于所述第一方向的第一边缘的单元格与所述第一边缘之间的间距以及相邻单元格 之间的间距； 根据所述页面的展示区域的尺寸、 沿第一方向排列的单元格数量、 靠近所述展示区域 的垂直于所述第一方向的第一边缘的单元格与所述第一边缘之间的间距以及相邻单元格 之间的间距， 确定所述单 元格沿所述第一方向的长度； 确定所述单元格的宽高比， 并根据所述宽高比确定所述单元格沿第二方向的长度； 以 及 根据所述单元格沿所述第 一方向的长度、 所述单元格沿所述第 二方向的长度以及所述 展示区域的尺寸， 将所述展示区域划分为多个单 元格。 12.如权利要求1 1所述的方法， 其中， 在所述界面中展示所述界面对象， 包括： 确定所述界面对象在所述展示区域中的位置和占用单 元格的数量； 以及 根据所述界面对象在所述展示 区域中的位置和占用单元格的数量， 在所述界面中展示 所述界面对象。 13.如权利要求9所述的方法， 其中， 所述方法应用于浏览器， 且所述方法还 包括： 注册所述浏览器的变化事 件； 以及 根据所述浏览器的变化事 件， 更新所述展示区域的尺寸。 14.一种计算机设备， 包括一个或者多个处理器、 存储器； 和一个或多个程序， 其中所述 一个或多个程序被存储在所述存储器中， 并且被所述一个或多个处理器执行， 所述程序包 括用于执行根据权利要求1 ‑8任一项所述的方法或者权利要求9 ‑13任一项 所述的方法的指 令。 15.一种包含计算机程序的非易失性计算机可读存储介质， 当所述计算机程序被一个权　利　要　求　书 2/3 页 3 CN 115390976 A 3