动态参照布局发明专利:ZL201310215942.7

试一试动态参照布局

您可以在新打开的页面左上方切换功能，同时观察在反复滚动页面时左右栏的参照变化

伴随着当今社会的日新月异，一个蕴含了大量信息的页面往往不能同时由一个窗 口全部展现出来时，窗口就会给用户提供一种叫做“滚动条”的工具，使用户可以上下左右 滚动查看，但是在这种情况下，经常会出现多个布局元素由于不能等高或者等宽，在页面布 局时无法对齐从而出现空白区域的现象，不但浪费了有限的窗口资源，减少了窗口的使用 效率，用户体验效果也不是很好，例如一个页面包含左右两栏，且两栏的高度不同，在页面 滚动浏览的过程中，相对短的一栏就会给窗口框架留出空白，如图 1.1、图 1.2 所示。为了 解决这个难题，最常用的就是把左右两栏分开控制，左右两栏各执一个滚动条，如图 1.3 所 示，但是这样，又会产生了新的问题 ：一是页面包含了多个滚动条时不好控制，二是滚动条 的出现减少了有限的窗口显示面积，三是影响页面的完整性、美观性。

本方法(发明专利号:201310215942.7)为界面提供了一种动态参照布局及展现方法，如果界面中的某些指定元素由于高度（或宽度）不能达成统一，从而造成界面的布局空白、缺失或其它不理想的效果，那么通过智能的判断指定元素及其窗口框架的大小关系，使指定元素在窗口框架中移动时，以其中某一指定元素所在区域或界面中的某一指定区域为参照对象，参照对象在“提供参照”状态时，如果指定元素的高度（或宽度）大于其窗口框架的高度（或宽度），那么指定元素在其窗口框架中根据参照对象反馈的移动数据也进行相应移动，指定元素可以通过“同步移动”或“同比移动”等各种合理方式进行移动，当指定元素在其窗口框架中的纵向（或横向）区域即将减少时予以锁定，直到符合解锁条件时，如参照对象转为“待提供参照”状态时，或者参照对象改变了对应的移动方向时，予以解锁，参照对象在“提供参照”状态时，如果指定元素的高度（或宽度）小于等于其窗口框架的高度（或宽度），直接将其锁定，直到参照对象转为“待提供参照”状态时予以解锁，通过这一过程，弥补界面中的先天空白或缺失，使界面保持完整、美观，或使操作界面明朗易用，增加操作效率，改善用户体验，其典型的动态参照布局过程请参照图 2、图 3 所示。

图 2.1 ：如图所示，窗口框架所在的纵向区域没有全部在纵向参照对象之内，根据规则，参照对象在“待提供参照”状态，此时页面左栏、界面右栏不受影响；
图 2.2 ：如图所示，界面在窗口框架中上移，纵向参照对象进入“提供参照”状态后，窗口框架下边缘与界面左栏下边缘对齐时，如果界面再继续上移的话，界面左栏的纵向区域在其窗口框架中即将减少，根据规则，此时将界面左栏纵向锁定，即界面左栏底部与窗口框架底部保持对齐状态；
图 2.3 ：如图所示，界面左栏被纵向锁定到窗口框架后，虽然界面仍继续上移，但界面左栏纵向区域并没有被移出窗口框架造成窗口框架的布局空白问题；
图 2.4 ：如图所示，界面左栏被纵向锁定后，界面继续向上移动，当窗口框架底边与参照对象底边重叠时，此时界面如果再继续向上移动，窗口框架所在的纵向区域将不会全部处在纵向参照对象中，根据规则，纵向参照对象转换为“待提供参照”状态，此时界面左栏与窗口框架解除纵向锁定关系；
图 2.5 ：如图所示，虽然界面左栏与窗口框架已经纵向解锁，但是界面左栏已经与其一开始所处在界面中的位置不同了，界面左栏纵向位置被留在了其在界面中纵向解锁时所处的位置，在窗口框架显示到了界面底部时，整个界面仍然保持着完整的布局，实际上，界面原来的空白区域被界面左栏合理的填充了；
图 3.1 ：如图所示，图 3.1 与图 2.5 其实是一样的，此时的界面其实是图2.5的一个延续，界面将会反向移动，界面左栏、界面右栏的参照对象不变，此时纵向参照对象为“待提供参照”状态；
图 3.2：如图所示，界面在窗口框架中下移，纵向参照对象进入“提供参照”状态后，窗口框架上边缘与界面左栏上边缘对齐时，如果界面再继续下移的话，界面左栏的纵向区域在其窗口框架中即将减少，根据规则，此时将界面左栏纵向锁定，即界面左栏顶部与窗口框架顶部保持对齐状态；
图 3.3 ：如图所示，界面左栏被纵向锁定到窗口框架后，虽然界面仍继续下移，但界面左栏纵向区域并没有被移出窗口框架造成窗口框架的布局空白问题；
图 3.4 ：如图所示，界面左栏被纵向锁定后，界面继续向下移动，当窗口框架顶边与参照对象顶边重叠时，此时界面如果再继续向下移动，窗口框架所在的纵向区域将不会全部处在纵向参照对象中，根据规则，纵向参照对象转换为“待提供参照”状态，此时界面左栏与窗口框架解除纵向锁定关系；
图 3.5：如图所示，在窗口框架显示到界面顶部时，整个界面又回到了如图 2.1 所示的初始布局样式；

所谓“同比移动”，简单的说即指定元素在其窗口框架中通过改变移动速度的方式使其与参照对象保持相同的移动比，其实现的技术方法为：参照对象在“提供参照”状态时，指定元素与参照对象两者在其窗口框架中的移动百分比保持相近相等，同比移动的恒等式为 ：指定元素在其窗口框架中纵向（或横向）移动的距离/ 指定元素在其窗口框架外的高度（或宽度）≈= 参照对象在其窗口框架中纵向（或横向）移动的距离 / 参照对象在其窗口框架外的高度（或宽度），如下图所示。

图 9：如图所示，指定元素的移动方法采用“同比移动”，根据规则，界面左栏与界面右栏的纵向参照对象相同，因此可以视为共用一个纵向参照对象，此组图片所声明的H、Hw、Hl、Hr、H1、Hl1、Hr1、N、Nl、Nr均以长度单位为单位并且单位相同，声明的P以“%”为单位；
图 9.1 ：如图所示，纵向参照对象的高度为H，窗口框架的高度为Hw,界面左栏的高度为Hl，界面右栏的高度为Hr,根据规则，纵向参照对象在其窗口框架外的高度H1=H-Hw，界面左栏在其窗口框架外的高度Hl1=Hl-Hw，界面右栏在其窗口框架外的高度Hr1=Hr-Hw；
图 9.2 ：如图所示，纵向参照对象在进入“提供参照”状态后，在其窗口框架中移动的距离假设为N，根据规则，首先计算参照对象的移动比P=N/H1*100%，那么界面左栏在其窗口框架中移动的距离Nl=Hl1*P,界面右栏在其窗口框架中移动的距离Nr=Hr1*P；
图 9.3：如图所示，纵向参照对象在其窗口框架中继续移动，当转为“待提供参照”状态时，界面左栏、界面右栏虽然在其窗口框架中移动的长度Nl、Nr不同，但是却始终保持了相同的移动比率；

所谓“同步移动”，简单的说即指定元素与参照对象在其窗口框架中移动时保持相同的移动速度，其实现的技术方法为：参照对象在“提供参照”状态时，如果参照对象在其窗口框架中向某个方向移动的长度为N，那么指定元素在其窗口框架中也会向某个方向移动的长度为N，直到符合锁定条件时将其锁定，如下图所示

图 8 ：如图所示，指定元素的移动方法采用“同步移动”，当纵向参照对象为“提供参照”状态时，纵向参照对象在其窗口框架中移动的距离假设为N，根据规则，界面左栏、界面右栏在未锁定的状态下，在其窗口框架中移动的距离也为N，其中N以长度单位为单位；

该技术方法解决了多栏结构的界面中元素尺寸不一带来的布局难题，使界面显示内容更充实、更完整，更美观，更容易操作，还使用户的无效滚动操作减少。这点对于电子商务尤为重要，比如现在的电子商务网站页面，一般都是把商品分类目录放到左栏，把商品介绍放到界面右栏，由于商品介绍的内容和图片会占用很大的篇幅以至于远远超出左栏商品分类目录的高度，至使用户在向下滚动浏览的过程中，左栏的目录早已被滚出当前窗口所显示的区域，在用户浏览完商品介绍后，想再看到左栏的商品分类目录，只能做很多的无效滚动才能再次看到左栏的商品分类目录，还有一点值得注意的事，很多网站会把一些广告位也放到左栏，但是仍不及右栏的商品介绍的栏目长，所以在用户浏览滚动时也会把左栏中的广告移出当前窗口，每时每刻，都会有成千上万的用户访问网页，如果用户看不到广告，商家也就失去了机会，造成的损失可想而知。从另一个角度讲，在不同的商品界面，由于左栏跟右栏的内容是动态调取出来的，左栏跟右栏的栏目不能齐高，而使左栏或者右栏出现大量的空白，这也是美术设计非常头痛的问题，此技术方法的应用，对用户来讲改善了用户操作上的有效性跟体验度，又增强了界面的友好度，更重要的是增加了更多的阅读机会，对设计师来讲解决了界面设计的完整性跟美观性的需求。