[发明专利]界面布局装置和界面布局方法

说明书

技术领域

本发明涉及页面布局技术领域，具体而言，涉及一种界面布局装置和一种界面布局方法。

背景技术

现有技术中，对于界面布局主要有两种方式：流式布局和自由布局（固定宽度布局）。

其中，流式布局，主体部分应用了百分比宽度，因此可以自适应用户的分辨率。如图1所示，是一个简单流式（流体）布局的轮廓。虽然有些设计师可能给流动布局中某些元素设置了固定宽度，但只要主体元素是百分比宽度，就可以让布局自适应适应各种分辨率。

流式布局的优点是，页面对用户更友好，因为它能自适应用户的设置。页面周围的空白区域在所有分辨率和浏览器下都是相同的，在视觉上更美观。如果设计良好，流动布局可以避免在小分辨率下出现水平滚动条。

流式布局的缺点是，设计者更难控制用户所见，并可能忽略掉一些错误，因为在特定的分辨率下看起来好的图片，视频以及其他设置了宽度的内容可能需要多种宽度以适应不同分辨率的用户。在特别大的分辨率下，内容会被拉成长长的一行，变得难以阅读。

对于自由布局，这种布局有一个设置了固定宽度的外包裹，里面的各个模块也是固定宽度而非百分比。重要的是容器（外包裹）元素是设置为不能移动的。无论访问者屏幕的分辨率是多少，界面都显示为和其它访问者相同的宽度。

如图2所示，展示的是一个自由布局的基本轮廓。里面的三列分别是520px、200px和200px宽度。960px已经成为现代web设计的标准，因为大多数站点用户被假定为使用1024×768分辨率。

许多设计者喜欢固定宽度布局胜过流动布局，因为它更容易实现，并确保了设计者所见即用户所见。不过它和流动布局一样，具有两面性。

自由布局的优点是，固定宽度的布局更容易使用，在设计方面更容易定制。在所有浏览器中宽度一样，所以不会受到图片、表单、视频和其他固定宽度内容的麻烦。不需要min-width和max-width，所有浏览器都支持。即使需要兼容800×600这么小的分辨率，界面的主体内容仍然有足够的宽度易于阅读。

自由布局的缺点是，对于使用高分辨率的用户，固定宽度布局会留下很大的空白。因此出现了“黄金比例”，“三分定律”，综合平衡和其他设计原则。屏幕分辨率过小时需要垂直滚动条。无缝纹理，连续的图案需要适应更大的分辨率。固定宽度布局一般在可用性上得分较低。

因此，需要一种新的界面布局技术，能够将流式布局与自由布局相结合，使用户可以根据需要对流式布局中的控件进行摆放，并且界面既能适用于各种分辨率，又能更符合不同的业务习惯。

发明内容

本发明正是基于上述问题，提出了一种界面布局技术，能够将流式布局与自由布局相结合，使用户可以根据需要对流式布局中的控件进行摆放，并且界面既能适用于各种分辨率，又能更符合不同的业务习惯。

有鉴于此，本发明提出了一种界面布局装置，包括：获取单元，用于根据接收到的选择指令选择第一界面中的目标区域，获取所述目标区域中的目标控件；转化单元，用于将所述目标控件的信息转化为预设模型的信息，根据所述目标控件在所述第一界面中的布局在第二界面中显示所述目标控件；调整单元，用于根据接收到的调整指令，调整所述目标控件在所述第二界面中的布局，和/或在所述第二界面中新增容器控件，保存调整后的第二界面；展现单元，用于在加载所述调整后的第二界面时，展现所述调整后的第二界面。

在该技术方案中，第一界面可以是流式布局的界面，第二界面可以是自由布局的界面，通过将目标控件的信息转化为预设模型的信息，使得不同的界面，有了统一的模型，不同界面的控件相关信息都可以转化为预设模型信息，从而只需调整界面输入信息适配，便可使用自由布局界面中的调整功能，来调整流式布局界面中的控件，从而使得用户可以根据不同的业务需要，在流式布局的界面中调整控件的位置，而且还可以新增容器控件，把相关的控件摆放在一个容器中。

在上述技术方案中，优选地，所述预设模型用于确定所述目标控件在所述第一界面中的布局的结构，和所述目标控件在所述第二界面中的布局的结构，以及相应的可视化状态。

在上述技术方案中，优选地，所述展现单元还用于根据接收到的预览指令，展现所述调整后的第二界面；所述调整单元用于根据接收到的保存指令，保存所述调整后的第二界面。

在该技术方案中，当用户完成控件的调整后，可以预览调整后界面的整体效果，如果整体效果不满意，则可以继续调整控件，直至整体效果满意，再保存调整后的界面，避免了在保存界面后才能查看整体效果，提高了界面布局的效率。