CN102236647A

CN102236647A - 一种基于时间的属性配置显示方法和设备

Info

Publication number: CN102236647A
Application number: CN2010101519101A
Authority: CN
Inventors: 段云; 杨杰
Original assignee: Tencent Technology Beijing Co Ltd
Current assignee: Tencent Technology Beijing Co Ltd
Priority date: 2010-04-21
Filing date: 2010-04-21
Publication date: 2011-11-09
Anticipated expiration: 2030-04-21
Also published as: CN102236647B

Abstract

本发明公开了一种基于时间的属性配置显示方法和设备，通过应用本发明的技术方案，通过二维布局分别显示时间和属性类型，并通过两者交互，以不同的显示形式将各属性类型在不同的时间区间内的属性参数值进行形象的显示，便于用户进行识别和操作，从而，简化了现有的属性显示和编辑界面，并可以更加清晰的显示基于时间变化，各属性参数质的变化情况，改善了用户体验，简化了用户操作的复杂度。

Description

一种基于时间的属性配置显示方法和设备

技术领域

本发明涉及互联网信息处理领域，尤其涉及一种基于时间的属性配置显示方法和设备。

背景技术

现有广告位属性的编辑普遍采用大量的输入框，以表格的形式排列于界面，随着内容的增加，占用的界面也需要增加，占用用户大量的视野，用户体验不佳，用户操作起来也不够直观。

如图1所示，为现有技术中的传统广告位属性编辑界面的示意图，该示意图列出了以“客户端RichButton”为例的传统广告位属性的编辑界面。

为方便描述，将广告位的属性分成两类，

一类是随时间变化频率低或者不变化，只需要一条记录的属性，比如名称，ID，描述等。这一类，不存在内容过多的情况。

第二类，随时间变化的属性，该类属性值，只对一定时间范围有效，比如价格，1-3月的广告位价格为100000元/月，4-6月的广告位价格为80000元/月。这类型的属性需要多条记录，时间分段越细，记录越多。

从图1所显示的属性编辑界面可以看出，现有技术中，传统的用户界面体验不佳，而且存在内容过长的问题，操作不直观，用户体验差。

发明内容

本发明提供了一种基于时间的属性配置显示方法和设备，用于简化现有的属性显示形式，提高操作的便捷性和应用体验。

本发明提供了一种基于时间的属性配置显示方法，包括以下步骤：

设置第一坐标轴表示时间，第二坐标轴表示属性类型；

对于所述第二坐标轴所对应的各属性类型，分别通过不同的显示形式在所述第一坐标轴所对应的不同时间区间内显示不同的属性参数值。

优选的，所述方法，还包括，设置基准线：

通过拖动所述基准线，移动所述第一坐标轴的当前显示区间；

其中，在非拖动的情况下，所述基准线始终位于所述第一坐标轴的当前显示区间的中间位置。

优选的，所述不同的显示形式，具体为：

设置多种不同的显示形式，所述多种不同的显示形式之间配置相应的循环顺序。

优选的，所述对于所述第二坐标轴所对应的各属性类型，分别通过不同的显示形式在所述第一坐标轴所对应的不同时间区间内显示不同的属性参数值，具体包括：

在一个属性类型所对应的方向上，根据所述循环顺序，分别通过不同的显示形式依次显示所述属性类型的不同的属性参数值。

优选的，所述在一个属性类型所对应的方向上，根据所述循环顺序，分别通过不同的显示形式依次显示所述属性类型的不同的属性参数值，具体为：

在当前显示区间中，各属性类型所对应的第一个属性参数值通过所述循环顺序中的第一种显示形式进行显示；

其中，当拖动所述基准线，移动所述第一坐标轴的当前显示区间时，移动后的显示区间中，各属性类型所对应的移动后的第一个属性参数值通过所述循环顺序中的第一种显示形式进行显示。

优选的，当同一个属性类型所对应的属性参数发生变化时，所述方法还包括：

当同一个属性类型所对应的多个相邻的属性参数进行合并时，合并后的属性参数通过合并前的第一个属性参数所对应的显示形式进行显示；

当同一个属性类型所对应的一个属性参数拆分为多个属性参数时，拆分后的第一个属性参数通过拆分前的属性参数所对应的显示形式进行显示，余下的属性参数按照所述循环顺序，通过相应的显示形式进行显示。

优选的，当移动所述第一坐标轴的当前显示区间，或属性参数发生合并或拆分时，各属性参数在其相对应显示区间中，居中显示。

另一方面，本发明还提供了一种基于时间的属性配置显示设备，包括：

设置模块，用于设置第一坐标轴表示时间，第二坐标轴表示属性类型；

显示模块，用于对于所述第二坐标轴所对应的各属性类型，分别通过不同的显示形式在所述第一坐标轴所对应的不同时间区间内显示不同的属性参数值。

优选的，所述设备，还包括显示调整模块，用于设置基准线，当所述基准线被拖动时，所述第一坐标轴的当前显示区间被移动；

优选的，所述设置模块，还用于设置多种不同的显示形式，所述多种不同的显示形式之间配置相应的循环顺序。

优选的，所述显示模块在一个属性类型所对应的方向上，根据所述设置模块所设置的循环顺序，分别通过不同的显示形式依次显示所述属性类型的不同的属性参数值。

优选的，在当前显示区间中，所述显示模块将各属性类型所对应的第一个属性参数值通过所述循环顺序中的第一种显示形式进行显示；

其中，当所述显示调整模块所设置的所述基准线被拖动，所述第一坐标轴的当前显示区间被移动时，在移动后的显示区间中，各属性类型所对应的移动后的第一个属性参数值通过所述设置模块所设置的循环顺序中的第一种显示形式进行显示。

优选的，当同一个属性类型所对应的属性参数发生变化时，所述显示模块的处理过程包括：

当同一个属性类型所对应的多个相邻的属性参数进行合并时，所述显示模块将合并后的属性参数通过合并前的第一个属性参数所对应的显示形式进行显示；

当同一个属性类型所对应的一个属性参数拆分为多个属性参数时，所述显示模块将拆分后的第一个属性参数通过拆分前的属性参数所对应的显示形式进行显示，余下的属性参数按照所述循环顺序，通过相应的显示形式进行显示。

优选的，当移动所述第一坐标轴的当前显示区间，或属性参数发生合并或拆分时，所述显示模块将各属性参数在其相对应显示区间中，居中显示。

与现有技术相比，本发明具有以下优点：

通过应用本发明的技术方案，通过二维布局分别显示时间和属性类型，并通过两者交互，以不同的显示形式将各属性类型在不同的时间区间内的属性参数值进行形象的显示，便于用户进行识别和操作，从而，简化了现有的属性显示和编辑界面，并可以更加清晰的显示基于时间变化，各属性参数质的变化情况，改善了用户体验，简化了用户操作的复杂度。

附图说明

为了更清楚地说明本发明或现有技术中的技术方案，下面将对本发明或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1为现有技术中的传统广告位属性编辑界面的示意图；

图2为本发明所提出的一种基于时间的属性配置显示方法流程示意图；

图3为本发明所提出的一种具体应用场景下的广告位属性编辑界面的示意图；

图4为本发明所提出的一种具体应用场景下的广告位属性编辑界面的示意图；

图5为本发明所提出的一种具体应用场景下的广告位属性编辑界面的示意图；

图6为本发明所提出的一种具体应用场景下的广告位属性编辑界面的示意图；

图7为本发明所提出的一种具体应用场景下的广告位属性编辑界面的示意图；

图8为本发明所提出的一种基于时间的属性配置显示设备的结构示意图。

具体实施方式

基于背景技术的描述，本发明针对第二类广告位属性中随时间变化的特征，设计和实现了一种基于时间的属性配置显示方法，能够有效的解决内容分段过多及操作不直观等用户体验问题，并且提出了一种文字浮动的算法来加强用户体验。

下面将结合本发明中的附图，对本发明的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

如图2所示，为本发明所提出的一种基于时间的属性配置显示方法的流程示意图，具体包括以下步骤：

步骤S201、设置第一坐标轴表示时间，第二坐标轴表示属性类型。

步骤S202、对于所述第二坐标轴所对应的各属性类型，分别通过不同的显示形式在所述第一坐标轴所对应的不同时间区间内显示不同的属性参数值。

其中，所述不同的显示形式，具体为设置多种不同的显示形式，所述多种不同的显示形式之间配置相应的循环顺序。

在实际操作中，可以应用不同的颜色或不同的底纹或图片背景作为显示形式，对应相应的属性参数值。

在上述显示界面中，步骤S202的具体实现形式为在一个属性类型所对应的方向上，根据所述循环顺序，分别通过不同的显示形式依次显示所述属性类型的不同的属性参数值。

在具体的应用场景中，为了提高显示的效果，本方法还包括设置基准线：

基于上述的显示形式循环顺序和基准线的设置，在具体的现实场景中，会存在以下情况：

进一步的，当同一个属性类型所对应的属性参数发生变化时，所述方法还包括：

为了达到更好的用户体验，当移动所述第一坐标轴的当前显示区间，或属性参数发生合并或拆分时，各属性参数在其相对应显示区间中，居中显示。

需要说明的是，上述的显示形式和属性类型的内容可以根据具体的应用场景进行调整，同时，第一坐标轴和第二坐标轴的位置也可以进行调整，这样的变化并不影响本发明的保护范围。

与现有技术相比，本发明具有以下优点：

下面，进一步结合具体的实施例，对本发明的技术方案进行详细、具体的描述。

为了便于说明，以不同的颜色为相应的显示形式，以横轴为第一坐标轴，以纵轴为第二坐标轴，针对基于时间的广告位报价属性进行显示处理的过程进行描述，在具体的应用场景中，相应的显示内容和显示形式的变化并不会影响本发明的保护范围。

首先，如图3所示，建立相应的显示窗口，窗口纵向为各个属性，横向为时间，虚线标识出了广告位周期中重要的时间点(在系统中有预先存储)，实线代表当前日期(即为前述技术方案中的基准线)，在具体的实现过程中，可以通过醒目的颜色，如红色，进行标识。

每个颜色条代表一段连续属性值。比如：2010-1-1至2010-4-1的时间区间内的广告位价格为100000元/月，2010-4-2至2010-10-1的时间区间内的广告位价格为80000元/月，那么，就会有两段不同的颜色条在编辑区。

当用户通过鼠标操作或其他操作指令选中一个颜色条后，会出现界面上横条编辑窗，设置属性值和有效日期。这样可以使得使用者对相应的颜色条具有预览效果，

如图4所示，当操作指针悬停在一个颜色条上的时候，会出现该颜色条属性和有效时间的提示。

各个颜色条之间空2个像素，相邻颜色条采用不同色彩，循环设置。

设置2个像素间隔的作用在于使不同颜色条之间可以存在相应的间隔空隙，令使用者可以在视觉上区分不同的颜色条的边界，也便于在显示界面上进行分割显示，具体的间隔距离可以根据需要进行相应的调整，这样的变化并不影响本发明的保护范围。

比如图4中广告位尺寸这一属性，采用4种色彩的循环方案，蓝色，紫色，灰色，橘黄色，从左到右，依次采用所配置的四种颜色，当存在第五个属性参数值的时候，重新从蓝色开始，依次循环取色。这样的设计，符合属性随时间变化的规律和不同值之间的差别，清晰直观，修改操作也简单。

在具体的应用场景中，具体采用的颜色种类和数量都可以进行相应的调整，这样的变化并不影响本发明的保护范围。

如果修改了颜色条的属性，可能会和相邻时间的属性值合并。如果一个颜色条被分解两个不同的值，则会发生拆分。

为了使变化过程得到具体的显示，本发明通过动画方式表示各颜色条在横向上的长度伸缩，和颜色的变化，保证色彩循环的连续，这个过程让用户在修改完数据后，更容易明确发生了什么，是否和预期的相同。

对于一个属性参数值，其所对应的时间跨度可能很长，超出当前的显示区间，传统设计通常采用滚动条来完成整体移动，在本发明中也可以通过这种方式进行显示，但是，为了达到更协调的视觉效果，同时为了避免因为滚动条和颜色条同为条状显示所造成的区分度过低，以及由此所造成的误操作的可能性，本发明采用手抓拖动的方式移动颜色条。

如图5至图7，分别是以与各颜色条相垂直的实线为准，将当前的显示区间从左边被拖拽到右边的分解图。

在具体的应用场景中，上述的与各颜色条相垂直的实线，可以实现对当前显示区域的横向移动，如果属性类型的种类过多，还可以选择与各颜色条相平行的实线，实现对当前显示区域的纵向移动，这样的变化并不影响本发明的保护范围。

其中，当前的显示区间的大小是由用户实现输入的时间段决定的，这个时间段代表了用户关心的主要时间区间。不在该时间区间内的属性，就可以通过拖动来查看和编辑。

传统界面拖拽，界面上的图形都和鼠标具有相同的移动距离，而在本发明中，因为文字默认是在颜色条上居中的，如果保持文字位置固定不变，则在颜色条拖拽过程中，会有部分颜色条出现只有颜色，没有文字的情况，即该颜色条的文字被拖动到了当前显示区间之外，从而导致用户不知道其具体属性是什么，并进而影响进一步的操作。

因此，本发明为了解决上述问题，进一步提供了一种文字浮动的算法，可以在显示区间的拖拽过程中，将文字相对于颜色条的当前显示部分局中。

比如图5至图7中“资源级别”中的颜色条上，“2级”在向左拖动的过程中，始终相对于界面上显示的长度局中。同样，图5至图7中的“是否有效”属性，因为单一颜色条一直贯穿在见面上，所以其文字一直局中。

该算法步骤描述如下：

1、获取可视区域的矩形系数recA，包括左上定点的x，y坐标，矩形长度，高度。

这样就可以唯一的确定这个矩形在界面上的位置和形状(不考虑旋转扭曲的情况)。视窗左上角坐标为0，x，y轴向左向下为正值。和Flash所采用的坐标系相同。

比如：

recA＝{x：0；y：0；width：900；height：500；}。

2、获取颜色条的矩形系数recB＝{x：-100；y：90；width：200；height：20；}。

3、计算recA和recB的交集矩形recC＝{x：0；y：90；width：100；height：20}。计算2个矩形交集的算法有很多，本发明的实现可以采用flash action script自身提供的方法。

4、计算recC的中心坐标x＝recC.x+recC.width/2＝50；y＝recC.y+recC.height/2＝100。

5、此坐标即为拖动过程中，当前显示下颜色条上文字中心，相对于整个视窗的坐标。

这样的算法保证了文字始终会居于颜色条当前显示区间的中央，实现了与颜色条的对应显示，实现了在当前显示区间中对颜色条对应的参数值的识别。

每次用户点击一个颜色条，修改属性值，开始时间和结束时间后，除了可能和相邻的颜色条组合外，也可能自身拆分再和左右合并，也可能该属性上的所有其他颜色条都会被影响。

以价格所对应的颜色条为例，如表1所示，表示已有的价格属性项。每一项在界面上将由一个颜色条代表，假入用户点击了第三个(2010-6-1至2010-10-31号)颜色条，然后只修改了属性时间为2010-1-1至2010-12-31，那界面上价格这个属性的所有颜色条会被合并成一个。

类似的情况，如果第三个颜色条被修改为80000，但时间不变，则其会和第二个颜色条合并，使得价格属性只留下3个颜色条。

再举个复杂一点的例子，假如点击第三个属性值后，将值修改为60000，开始时间修改为2010-8-1，结束时间不变，那么第三条要被分成两部分，2010-6-1至2010-7-31仍然为100000，2010-8-1号之后会原本的第四条颜色合并，界面上动画显示为，第三条缩短，第四条增长。所有可能涉及到的合并拆分情况，都需要一个算法来保证其操作结果的数据正确性和动画正确性。这个算法就是颜色条修改算法。

表1

属性值	开始时间	结束时间
			100000	2010-1-1	2010-3-31
80000	2010-4-1	2010-5-31
			100000	2010-6-1	2010-10-31
60000	2010-11-1	2010-12-31

颜色条修改算法的逻辑如下：

1、获取被点击颜色条A的属性值和开始结束时间。

2、遍历该属性所有颜色条，假设遍历到的当前颜色条为I。

如果I和A的时间没有交集且不相邻(例如1-31和2-1为相邻)，则将I直接插入结果数组ARR。

如果I和A的时间有交集或者相邻，并且值相同，则合并到A中，继续循环，直到下一个不能合并的节点，然后将A插入ARR。如果值不通，则拆分I，将能合并到A中的部分合并，剩下的保留，被拆分的I直接写入ARR，A继续保留直到结束或者碰到下一个不能合并的颜色条，然后插入ARR。

如果颜色条长度有变化，则其自身播放Flash自带的Resize动画，如果被删除则Resize到0然后从界面上删除。如果是插入操作，则在界面上插入，然后播放从0到最终宽度的Resize动画。

在动画播放结束后，根据其在属性中的位置，更新其自身颜色。

这样的颜色调整实现了在参数值得修改过程中的颜色显示和修改，保证了当前显示区域中各颜色条的信息显示完整性和连续性。

与现有技术相比，本发明具有以下优点：

通过应用本发明的技术方案，通过二维布局分别显示时间和属性类型，并通过两者交互，以不同的显示形式将各属性类型在不同的时间区间内的属性参数值进行形象的显示，便于用户进行识别和操作。

为了实现本发明的技术方案，本发明还提出了一种基于时间的属性配置显示设备。

如图8所示，为本发明提供的一种基于时间的属性配置显示设备的结构示意图，具体包括：

设置模块81，用于设置第一坐标轴表示时间，第二坐标轴表示属性类型；

显示模块82，用于对于所述第二坐标轴所对应的各属性类型，分别通过不同的显示形式在所述第一坐标轴所对应的不同时间区间内显示不同的属性参数值。

优选的，所述设备还包括显示调整模块83，用于设置基准线，当所述基准线被拖动时，所述第一坐标轴的当前显示区间被移动；

优选的，所述设置模块81，还用于设置多种不同的显示形式，所述多种不同的显示形式之间配置相应的循环顺序。

优选的，所述显示模块82在一个属性类型所对应的方向上，根据所述设置模块81所设置的循环顺序，分别通过不同的显示形式依次显示所述属性类型的不同的属性参数值。

优选的，在当前显示区间中，所述显示模块82将各属性类型所对应的第一个属性参数值通过所述循环顺序中的第一种显示形式进行显示；

其中，当所述显示调整模块83所设置的所述基准线被拖动，所述第一坐标轴的当前显示区间被移动时，在移动后的显示区间中，各属性类型所对应的移动后的第一个属性参数值通过所述设置模块81所设置的循环顺序中的第一种显示形式进行显示。

优选的，当同一个属性类型所对应的属性参数发生变化时，所述显示模块82的处理过程包括：

当同一个属性类型所对应的多个相邻的属性参数进行合并时，所述显示模块82将合并后的属性参数通过合并前的第一个属性参数所对应的显示形式进行显示；

当同一个属性类型所对应的一个属性参数拆分为多个属性参数时，所述显示模块82将拆分后的第一个属性参数通过拆分前的属性参数所对应的显示形式进行显示，余下的属性参数按照所述循环顺序，通过相应的显示形式进行显示。

优选的，当移动所述第一坐标轴的当前显示区间，或属性参数发生合并或拆分时，所述显示模块82将各属性参数在其相对应显示区间中，居中显示。

与现有技术相比，本发明具有以下优点：

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到本发明可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台终端设备(可以是手机，个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述的方法。

以上所述仅是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视本发明的保护范围。

本领域技术人员可以理解实施例中的装置中的模块可以按照实施例描述进行分布于实施例的装置中，也可以进行相应变化位于不同于本实施例的一个或多个装置中。上述实施例的模块可以集成于一体，也可以分离部署；可以合并为一个模块，也可以进一步拆分成多个子模块。

上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。

以上公开的仅为本发明的几个具体实施例，但是，本发明并非局限于此，任何本领域的技术人员能思之的变化都应落入本发明的保护范围。

Claims

1.一种基于时间的属性配置显示方法，其特征在于，包括以下步骤：

设置第一坐标轴表示时间，第二坐标轴表示属性类型；

2.如权利要求1所述的方法，其特征在于，还包括，设置基准线：

3.如权利要求1所述的方法，其特征在于，所述不同的显示形式，具体为：

4.如权利要求3所述的方法，其特征在于，所述对于所述第二坐标轴所对应的各属性类型，分别通过不同的显示形式在所述第一坐标轴所对应的不同时间区间内显示不同的属性参数值，具体包括：

5.如权利要求2或4所述的方法，其特征在于，所述在一个属性类型所对应的方向上，根据所述循环顺序，分别通过不同的显示形式依次显示所述属性类型的不同的属性参数值，具体为：

6.如权利要求4所述的方法，其特征在于，当同一个属性类型所对应的属性参数发生变化时，所述方法还包括：

7.如权利要求2或6所述的方法，其特征在于，

当移动所述第一坐标轴的当前显示区间，或属性参数发生合并或拆分时，各属性参数在其相对应显示区间中，居中显示。

8.一种基于时间的属性配置显示设备，其特征在于，包括：

9.如权利要求8所述的设备，其特征在于，还包括显示调整模块，用于设置基准线，当所述基准线被拖动时，所述第一坐标轴的当前显示区间被移动；

10.如权利要求8所述的设备，其特征在于，所述设置模块，还用于设置多种不同的显示形式，所述多种不同的显示形式之间配置相应的循环顺序。

11.如权利要求10所述的设备，其特征在于，

所述显示模块在一个属性类型所对应的方向上，根据所述设置模块所设置的循环顺序，分别通过不同的显示形式依次显示所述属性类型的不同的属性参数值。

12.如权利要求9或11所述的设备，其特征在于，

在当前显示区间中，所述显示模块将各属性类型所对应的第一个属性参数值通过所述循环顺序中的第一种显示形式进行显示；

13.如权利要求11所述的设备，其特征在于，当同一个属性类型所对应的属性参数发生变化时，所述显示模块的处理过程包括：

14.如权利要求9或13所述的设备，其特征在于，

当移动所述第一坐标轴的当前显示区间，或属性参数发生合并或拆分时，所述显示模块将各属性参数在其相对应显示区间中，居中显示。