【技术实现步骤摘要】
页面布局方法、系统、电子装置及存储介质
本专利技术涉及人工智能
,尤其涉及一种基于黄金分割的页面布局方法、系统、电子装置及计算机可读存储介质。
技术介绍
页面布局是互联网应用产品的脸面,是最直接与用户进行互操作的重要途径。页面布局在很大程度上展现一个应用的美观程度,页面中各个控件的位置间距等信息,是页面美观度、可视化伸缩度、用户可用便捷性的充分体现,是各个厂商最关心的互联网产品要素之一。目前市面上绝大多数产品的页面布局都无法达到一个页面对所有设备屏幕自适应的效果,因此很多厂商会根据屏幕大小开发多套适配页面方案。例如手机版的APP、平板电脑版的APP、电脑端的APP。这种方案虽然达到了屏幕完好适应的效果,但是开发周期和开发成本呈现指数级增长,耗费人力财力。而基于UI设计师的响应式布局设计方案,则需要专业的人才和过多的研发时间。因此,如何提供一个切实有效的自适应各种屏幕大小的页面布局设计方案,已经成为一个亟待解决的技术问题。
技术实现思路
有鉴于此,本专利技术提出一种基于黄金分割的页面布 ...
【技术保护点】
1.一种基于黄金分割的页面布局方法,其特征在于,所述方法包括步骤:/n基于当前屏幕宽度设置页面布局的基准线;/n获取所述页面中需要布局的控件参数;/n根据所述基准线在所述页面中绘制斐波那契螺旋线;/n根据所述控件参数和所述斐波那契螺旋线确定每个控件的大小;及/n基于所确定的每个控件的大小自动完成适应所述屏幕大小的页面布局。/n
【技术特征摘要】
1.一种基于黄金分割的页面布局方法,其特征在于,所述方法包括步骤:
基于当前屏幕宽度设置页面布局的基准线;
获取所述页面中需要布局的控件参数;
根据所述基准线在所述页面中绘制斐波那契螺旋线;
根据所述控件参数和所述斐波那契螺旋线确定每个控件的大小;及
基于所确定的每个控件的大小自动完成适应所述屏幕大小的页面布局。
2.如权利要求1所述的基于黄金分割的页面布局方法,其特征在于,所述基于当前屏幕宽度设置页面布局的基准线包括:
将预设屏幕宽度对应的基准线设置为基本单位1,根据当前屏幕宽度与所述预设屏幕宽度之间的比例将所述当前屏幕宽度对应的基准线扩大或缩小相应倍数。
3.如权利要求1所述的基于黄金分割的页面布局方法,其特征在于,所述获取所述页面中需要布局的控件参数包括:
根据预先设置的对应一种屏幕大小的一套前端展示页面布局获取所述页面中需要布局的控件参数;或
接收用户输入的所述页面中需要布局的控件参数。
4.如权利要求3所述的基于黄金分割的页面布局方法,其特征在于,所述控件参数包括每个控件的名称、位置以及在预先设置的该套前端展示页面布局中的大小或者所述页面中多个控件之间的大小关系。
5.如权利要求1所述的基于黄金分割的页面布局方法,其特征在于,所述根据所述控件参数和所述斐波那契螺旋线确定每个控件的大小包括:
当绘制出所述页面中的所述斐波那契螺旋线后,得到多个符合黄金分割比的长方形框;
根据所述控件参数从所述多个长方形框中选择对应的长方形框,作为所述控件的大小。
...
【专利技术属性】
技术研发人员:景立森,
申请(专利权)人:中国平安财产保险股份有限公司,
类型:发明
国别省市:广东;44
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。