用户界面自适应配置的方法、系统、设备和介质技术方案

本发明专利技术涉及用户界面显示技术领域，特别涉及用户界面自适应配置的方法、系统、设备和介质。本发明专利技术的方法包括：分别将一个或多个用户界面组件与面板的多个区域中的一个区域相对应；对多个区域以及一个或多个用户界面组件进行拉伸操作，并且对多个区域进行移动操作，以生成适配于用户设备的适配面板以及一个或多个适配用户界面组件；分别将一个或多个适配用户界面组件放置到适配面板的对应区域，以生成适配用户界面。本发明专利技术简化了用户界面的设计步骤，可操作性强，实现用户界面自适应配置。

User Interface Adaptive Configuration Method, System, Equipment and Media

【技术实现步骤摘要】
用户界面自适应配置的方法、系统、设备和介质
本专利技术涉及用户界面显示
，特别涉及用户界面自适应配置的方法、系统、设备和介质。
技术介绍
在设计用户界面时，由于多个使用者的多个设备通常具有不同的分辨率，因此用户界面设计者需要考虑各种可能性，使得用户界面适配于多个使用者的多个设备，这将耗费较大的人力成本。现有的解决方案通常先设定可用区域，再在该可用区域中为不同的分辨率设计不同的用户界面逻辑。在现有的用户界面配置的过程中，需要考虑各种边界问题，从而导致用户界面的设计步骤繁琐，可操作性差，不能实现用户界面自适应配置。
技术实现思路
本专利技术的目的在于提供用户界面自适应配置的方法、系统、设备和介质，简化了用户界面的设计步骤，可操作性强，实现用户界面自适应配置。本专利技术公开了一种用户界面自适应配置的方法，用户界面包括面板以及被放置在所述面板上的一个或多个用户界面组件，所述方法包括：分别将所述一个或多个用户界面组件与所述面板的多个区域中的一个区域相对应；对所述多个区域以及所述一个或多个用户界面组件进行拉伸操作，并且对所述多个区域进行移动操作，以生成适配于用户设备的适配面板以及一个或多个适配用户界面组件；分别将所述一个或多个适配用户界面组件放置到所述适配面板的对应区域，以生成适配用户界面。可选地，所述面板具有以N乘M排列的N×M个区域，其中N和M都是正整数。可选地，分别将所述一个或多个用户界面组件与所述面板的多个区域中的一个区域相对应包括，根据每个用户界面组件的中心点，将所述每个用户界面组件与所述中心点所在的区域相对应。可选地，对所述多个区域以及所述一个或多个用户界面组件进行拉伸操作，并且对所述多个区域进行移动操作，以生成适配于用户设备的适配面板以及一个或多个适配用户界面组件包括，获取所述面板的面板高度和面板宽度；获取所述用户设备的屏幕高度和屏幕宽度；计算拉伸比例，所述拉伸比例为所述屏幕高度和所述面板高度的比值、以及所述屏幕宽度和所述面板宽度的比值中的较小值；根据所述拉伸比例，对所述多个区域以及所述一个或多个用户界面组件进行拉伸操作；如果所述屏幕高度和所述面板高度的比值小于所述屏幕宽度和所述面板宽度的比值，则将最左列区域向左移动至所述用户设备的屏幕边缘，并且将最右列区域向右移动至所述用户设备的屏幕边缘，以生成适配于所述用户设备的适配面板以及一个或多个适配用户界面组件；如果所述屏幕高度和所述面板高度的比值大于所述屏幕宽度和所述面板宽度的比值，则将第一行区域向上移动至所述用户设备的屏幕边缘，并且将最末行区域向下移动至所述用户设备的屏幕边缘，以生成适配于所述用户设备的适配面板以及一个或多个适配用户界面组件。可选地，分别将所述一个或多个适配用户界面组件放置到所述适配面板的对应区域，以生成适配用户界面包括，在分别将所述一个或多个用户界面组件与所述面板的多个区域中的一个区域相对应时，确定每个用户界面组件的中心点与对应区域的位置关系；根据所述位置关系，将每个适配用户界面组件的中心点放置到所述适配面板的对应区域，以生成所述适配用户界面。本专利技术公开了一种用户界面自适应配置的系统，用户界面包括面板以及被放置在所述面板上的一个或多个用户界面组件，所述系统包括：组件对应模块，用于分别将所述一个或多个用户界面组件与所述面板的多个区域中的一个区域相对应；拉伸移动模块，用于对所述多个区域以及所述一个或多个用户界面组件进行拉伸操作，并且对所述多个区域进行移动操作，以生成适配于用户设备的适配面板以及一个或多个适配用户界面组件；界面生成模块，用于分别将所述一个或多个适配用户界面组件放置到所述适配面板的对应区域，以生成适配用户界面。可选地，所述面板具有以N乘M排列的N×M个区域，其中N和M都是正整数。可选地，所述组件对应模块用于根据每个用户界面组件的中心点，将所述每个用户界面组件与所述中心点所在的区域相对应。可选地，所述拉伸移动模块用于获取所述面板的面板高度和面板宽度；获取所述用户设备的屏幕高度和屏幕宽度；计算拉伸比例，所述拉伸比例为所述屏幕高度和所述面板高度的比值、以及所述屏幕宽度和所述面板宽度的比值中的较小值；根据所述拉伸比例，对所述多个区域以及所述一个或多个用户界面组件进行拉伸操作；如果所述屏幕高度和所述面板高度的比值小于所述屏幕宽度和所述面板宽度的比值，则将最左列区域向左移动至所述用户设备的屏幕边缘，并且将最右列区域向右移动至所述用户设备的屏幕边缘，以生成适配于所述用户设备的适配面板以及一个或多个适配用户界面组件；如果所述屏幕高度和所述面板高度的比值大于所述屏幕宽度和所述面板宽度的比值，则将第一行区域向上移动至所述用户设备的屏幕边缘，并且将最末行区域向下移动至所述用户设备的屏幕边缘，以生成适配于所述用户设备的适配面板以及一个或多个适配用户界面组件。可选地，所述组件对应模块用于在分别将所述一个或多个用户界面组件与所述面板的多个区域中的一个区域相对应时，确定每个用户界面组件的中心点与对应区域的位置关系；所述界面生成模块用于根据所述位置关系，将每个适配用户界面组件的中心点放置到所述适配面板的对应区域，以生成所述适配用户界面。本专利技术公开了一种用户界面自适应配置的设备，所述设备包括存储有计算机可执行指令的存储器和处理器，所述处理器被配置为执行所述指令以实施用户界面自适应配置的方法，用户界面包括面板以及被放置在所述面板上的一个或多个用户界面组件，所述方法包括：分别将所述一个或多个用户界面组件与所述面板的多个区域中的一个区域相对应；对所述多个区域以及所述一个或多个用户界面组件进行拉伸操作，并且对所述多个区域进行移动操作，以生成适配于用户设备的适配面板以及一个或多个适配用户界面组件；分别将所述一个或多个适配用户界面组件放置到所述适配面板的对应区域，以生成适配用户界面。本专利技术公开了一种使用计算机程序编码的计算机存储介质，所述计算机程序包括指令，所述指令被一个以上的计算机执行以实施用户界面自适应配置的方法，用户界面包括面板以及被放置在所述面板上的一个或多个用户界面组件，所述方法包括：分别将所述一个或多个用户界面组件与所述面板的多个区域中的一个区域相对应；对所述多个区域以及所述一个或多个用户界面组件进行拉伸操作，并且对所述多个区域进行移动操作，以生成适配于用户设备的适配面板以及一个或多个适配用户界面组件；分别将所述一个或多个适配用户界面组件放置到所述适配面板的对应区域，以生成适配用户界面。本专利技术实施方式与现有技术相比，主要区别及其效果在于：本专利技术通过组件对应步骤、拉伸移动步骤以及界面生成步骤，使得用户界面设计者可以在统一分辨率的面板上进行用户界面组件的添加和修改，以生成基础用户界面，简化了用户界面的设计步骤，同时不必考虑过多的边界问题，可操作性强，能够根据用户设备实现用户界面自适应配置。附图说明图1A-1H示出用户界面自适应配置的示意图；图2示出用户界面自适应配置的方法的流程示意图；图3示出用户界面自适应配置的系统的结构示意图。具体实施方式在以下的叙述中，为了使读者更好地理解本申请而提出了许多技术细节。但是，本领域的普通技术人员可以理解，即使没有这些技术细节和基于以下各实施方式的种种变化和修改，也可以实现本申请各权利要求所要求保护的技术方案。为使本专利技术的目的本文档来自技高网...

【技术保护点】
1.一种用户界面自适应配置的方法，用户界面包括面板以及被放置在所述面板上的一个或多个用户界面组件，其特征在于，所述方法包括：分别将所述一个或多个用户界面组件与所述面板的多个区域中的一个区域相对应；对所述多个区域以及所述一个或多个用户界面组件进行拉伸操作，并且对所述多个区域进行移动操作，以生成适配于用户设备的适配面板以及一个或多个适配用户界面组件；分别将所述一个或多个适配用户界面组件放置到所述适配面板的对应区域，以生成适配用户界面。

【技术特征摘要】
1.一种用户界面自适应配置的方法，用户界面包括面板以及被放置在所述面板上的一个或多个用户界面组件，其特征在于，所述方法包括：分别将所述一个或多个用户界面组件与所述面板的多个区域中的一个区域相对应；对所述多个区域以及所述一个或多个用户界面组件进行拉伸操作，并且对所述多个区域进行移动操作，以生成适配于用户设备的适配面板以及一个或多个适配用户界面组件；分别将所述一个或多个适配用户界面组件放置到所述适配面板的对应区域，以生成适配用户界面。2.根据权利要求1所述的方法，其特征在于，所述面板具有以N乘M排列的N×M个区域，其中N和M都是正整数。3.根据权利要求1所述的方法，其特征在于，分别将所述一个或多个用户界面组件与所述面板的多个区域中的一个区域相对应包括，根据每个用户界面组件的中心点，将所述每个用户界面组件与所述中心点所在的区域相对应。4.根据权利要求1所述的方法，其特征在于，对所述多个区域以及所述一个或多个用户界面组件进行拉伸操作，并且对所述多个区域进行移动操作，以生成适配于用户设备的适配面板以及一个或多个适配用户界面组件包括，获取所述面板的面板高度和面板宽度；获取所述用户设备的屏幕高度和屏幕宽度；计算拉伸比例，所述拉伸比例为所述屏幕高度和所述面板高度的比值、以及所述屏幕宽度和所述面板宽度的比值中的较小值；根据所述拉伸比例，对所述多个区域以及所述一个或多个用户界面组件进行拉伸操作；如果所述屏幕高度和所述面板高度的比值小于所述屏幕宽度和所述面板宽度的比值，则将最左列区域向左移动至所述用户设备的屏幕边缘，并且将最右列区域向右移动至所述用户设备的屏幕边缘，以生成适配于所述用户设备的适配面板以及一个或多个适配用户界面组件；如果所述屏幕高度和所述面板高度的比值大于所述屏幕宽度和所述面板宽度的比值，则将第一行区域向上移动至所述用户设备的屏幕边缘，并且将最末行区域向下移动至所述用户设备的屏幕边缘，以生成适配于所述用户设备的适配面板以及一个或多个适配用户界面组件。5.根据权利要求1所述的方法，其特征在于，分别将所述一个或多个适配用户界面组件放置到所述适配面板的对应区域，以生成适配用户界面包括，在分别将所述一个或多个用户界面组件与所述面板的多个区域中的一个区域相对应时，确定每个用户界面组件的中心点与对应区域的位置关系；根据所述位置关系，将每个适配用户界面组件的中心点放置到所述适配面板的对应区域，以生成所述适配用户界面。6.一种用户界面自适应配置的系统，用户界面包括面板以及被放置在所述面板上的一个或多个用户界面组件，其特征在于，所述系统包括：组件对应模块，用于分别将所述一个或多个用户界面组件与所述面板的多个区域中的一个区域相对应；拉伸...

【专利技术属性】
技术研发人员：吴迪，
申请(专利权)人：上海莉莉丝科技股份有限公司，
类型：发明
国别省市：上海,31