[发明专利]页面布局方法、系统、电子装置及存储介质

说明书

本发明涉及一种人工智能技术，揭露了一种基于黄金分割的页面布局方法，该方法包括：基于当前屏幕宽度设置页面布局的基准线；获取所述页面中需要布局的控件参数；根据所述基准线在所述页面中绘制斐波那契螺旋线；根据所述控件参数和所述斐波那契螺旋线确定每个控件的大小；基于所确定的每个控件的大小自动完成适应所述屏幕大小的页面布局。本发明还提供一种页面布局系统、电子装置及计算机可读存储介质。本发明能够自动基于黄金分割法实现页面布局和屏幕大小适配，根据页面中绘制的斐波那契螺旋线得到每个控件的大小，使每个控件均基于黄金分割比，简练美观。

技术领域

本发明涉及人工智能技术领域，尤其涉及一种基于黄金分割的页面布局方法、系统、电子装置及计算机可读存储介质。

背景技术

页面布局是互联网应用产品的脸面，是最直接与用户进行互操作的重要途径。页面布局在很大程度上展现一个应用的美观程度，页面中各个控件的位置间距等信息，是页面美观度、可视化伸缩度、用户可用便捷性的充分体现，是各个厂商最关心的互联网产品要素之一。

目前市面上绝大多数产品的页面布局都无法达到一个页面对所有设备屏幕自适应的效果，因此很多厂商会根据屏幕大小开发多套适配页面方案。例如手机版的APP、平板电脑版的APP、电脑端的APP。这种方案虽然达到了屏幕完好适应的效果，但是开发周期和开发成本呈现指数级增长，耗费人力财力。而基于UI设计师的响应式布局设计方案，则需要专业的人才和过多的研发时间。

因此，如何提供一个切实有效的自适应各种屏幕大小的页面布局设计方案，已经成为一个亟待解决的技术问题。

发明内容

有鉴于此，本发明提出一种基于黄金分割的页面布局方法、系统、电子装置及计算机可读存储介质，以解决上述技术问题。

首先，为实现上述目的，本发明提出一种基于黄金分割的页面布局方法，该方法包括步骤：

基于当前屏幕宽度设置页面布局的基准线；

获取所述页面中需要布局的控件参数；

根据所述基准线在所述页面中绘制斐波那契螺旋线；

根据所述控件参数和所述斐波那契螺旋线确定每个控件的大小；及

基于所确定的每个控件的大小自动完成适应所述屏幕大小的页面布局。

可选地，所述基于当前屏幕宽度设置页面布局的基准线包括：

将预设屏幕宽度对应的基准线设置为基本单位1，根据当前屏幕宽度与所述预设屏幕宽度之间的比例将所述当前屏幕宽度对应的基准线扩大或缩小相应倍数。

可选地，所述获取所述页面中需要布局的控件参数包括：

根据预先设置的对应一种屏幕大小的一套前端展示页面布局获取所述页面中需要布局的控件参数；或

接收用户输入的所述页面中需要布局的控件参数。

可选地，所述控件参数包括每个控件的名称、位置以及在预先设置的该套前端展示页面布局中的大小或者所述页面中多个控件之间的大小关系。

可选地，所述根据所述控件参数和所述斐波那契螺旋线确定每个控件的大小包括：

当绘制出所述页面中的所述斐波那契螺旋线后，得到多个符合黄金分割比的长方形框；

根据所述控件参数从所述多个长方形框中选择对应的长方形框，作为所述控件的大小。

可选地，所述根据所述控件参数和所述斐波那契螺旋线确定每个控件的大小包括：

当绘制出所述页面中的所述斐波那契螺旋线后，得到多个符合黄金分割比的长方形框；