CN104461547A - 图形界面的排列显示方法及装置 - Google Patents

图形界面的排列显示方法及装置 Download PDF

Info

Publication number
CN104461547A
CN104461547A CN201410779073.5A CN201410779073A CN104461547A CN 104461547 A CN104461547 A CN 104461547A CN 201410779073 A CN201410779073 A CN 201410779073A CN 104461547 A CN104461547 A CN 104461547A
Authority
CN
China
Prior art keywords
data content
contour
icon
rectangular arranged
content collection
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Granted
Application number
CN201410779073.5A
Other languages
English (en)
Other versions
CN104461547B (zh
Inventor
黄佳嘉
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing Gridsum Technology Co Ltd
Original Assignee
Beijing Gridsum Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Beijing Gridsum Technology Co Ltd filed Critical Beijing Gridsum Technology Co Ltd
Priority to CN201410779073.5A priority Critical patent/CN104461547B/zh
Publication of CN104461547A publication Critical patent/CN104461547A/zh
Application granted granted Critical
Publication of CN104461547B publication Critical patent/CN104461547B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Landscapes

  • User Interface Of Digital Computer (AREA)

Abstract

本发明公开了一种图形界面的排列显示方法及装置。其中,该方法包括:读取屏幕的屏幕分辨率;根据屏幕分辨率对图形界面进行划分,生成排列网格;获取需要显示的数据内容集合;根据数据内容集合,获取与数据内容集合匹配的等高矩形排列模板,其中,等高矩形排列模板用于表征在图形界面内,在用于确定初始位置的正方形图标的横向方向上,以宽度不同的等高矩形图标按预定的排列方式对数据内容进行显示的排列显示方法;将数据内容集合按照等高矩形排列模板对数据内容进行排列显示。本发明解决了现有技术中设计人员、技术人员、咨询人员以及界面使用用户需要针对每个前端界面进行重复开发,导致的开发效率低、浪费人力资源的问题。

Description

图形界面的排列显示方法及装置
技术领域
本发明涉及计算机领域,具体而言,涉及一种图形界面的排列显示方法及装置。
背景技术
在日常的软件开发过程中,程序开发人员往往在对软件功能进行开发之后,还要对前端显示界面进行设计开发。在开发调试阶段,不但要对软件功能的可靠性进行测试,还要对前端界面的兼容性和美观度进行验证。
对于程序开发人员来说,前端显示界面的设计开发工作往往并不能得心应手,很难在保证前端显示界面兼容性的同时,还兼顾美观度。每次在对功能开发完毕之后,还要花费大量的时间和精力对前端显示界面进行重复的开发,造成了程序开发人员资源的浪费。
进一步的,如果在多个开发人员对同一个软件进行开发时,很难统一每个程序开发人员开发出来的前端显示界面的一致性。
就设计人员来说,创意的结果是多样的,从创意产生到最终的工程图样的呈现都是需要经过大量的尺度换算和设定。同时在设计中存在大量的定制和个性多元化的设计概念,这样在多平台设计当中增加了设计师的工作量。就咨询人员来说,需要大量将咨询结果转换为简单易懂的图形的绘图任务,处理图形界面的工作量非常庞大。就界面的使用用户来说,想要打造具有自己个性的操作界面的学习成本和实施成本都很高。
针对现有技术中设计人员、技术人员、咨询人员以及界面使用用户需要针对每个前端界面进行重复开发,导致的开发效率低、浪费人力资源的问题,目前尚未提出有效的解决方案。
发明内容
本发明的主要目的在于提供一种图形界面的排列显示方法及装置,以解决现有技术中设计人员、技术人员、咨询人员以及界面使用用户需要针对每个前端界面进行重复开发,导致的开发效率低、浪费人力资源的问题。
为了实现上述目的,根据本发明实施例的一个方面,提供了一种图形界面的排列显示方法。该方法包括:读取屏幕的屏幕分辨率;根据屏幕分辨率对图形界面进行划分,生成排列网格;获取需要显示的数据内容集合;根据数据内容集合,获取与数据内容集合匹配的等高矩形排列模板,其中,等高矩形排列模板用于表征在图形界面内,在用于确定初始位置的正方形图标的横向方向上,以宽度不同的等高矩形图标按预定的排列方式对数据内容进行显示的排列显示方法,排列网格用于表征等高矩形排列模板中用于计算各个矩形图标各个边长的基本单位;将数据内容集合按照等高矩形排列模板对数据内容进行排列显示。
为了实现上述目的,根据本发明实施例的另一方面,提供了一种图形界面的排列显示装置,该装置包括:读取模块,用于读取屏幕的屏幕分辨率;生成模块,用于根据屏幕分辨率对图形界面进行划分,生成排列网格;第一获取模块,用于获取需要显示的数据内容集合;第二获取模块,用于根据数据内容集合,获取与数据内容集合匹配的等高矩形排列模板,其中,等高矩形排列模板用于表征在图形界面内,在用于确定初始位置的正方形图标的横向方向上,以宽度不同的等高矩形图标按预定的排列方式对数据内容进行显示的排列显示方法,排列网格用于表征等高矩形排列模板中用于计算各个矩形图标各个边长的基本单位;显示模块,用于将数据内容集合按照等高矩形排列模板对数据内容进行排列显示。
根据发明实施例,通过读取屏幕的屏幕分辨率;根据屏幕分辨率对图形界面进行划分,生成排列网格;获取需要显示的数据内容集合;根据数据内容集合,获取与数据内容集合匹配的等高矩形排列模板,其中,等高矩形排列模板用于表征在图形界面内,在用于确定初始位置的正方形图标的横向方向上,以宽度不同的等高矩形图标按预定的排列方式对数据内容进行显示的排列显示方法,排列网格用于表征等高矩形排列模板中用于计算各个正方形图标边长的基本单位;将数据内容集合按照等高矩形排列模板对数据内容进行排列显示,解决了现有技术中设计人员、技术人员、咨询人员以及界面使用用户需要针对每个前端界面进行重复开发,导致的开发效率低、浪费人力资源的问题。实现了根据需要显示的数据内容自动生成与数据内容匹配的图形界面的效果。
附图说明
构成本申请的一部分的附图用来提供对本发明的进一步理解,本发明的示意性实施例及其说明用于解释本发明,并不构成对本发明的不当限定。在附图中:
图1是根据本发明实施例一的图形界面的排列显示方法的流程图;
图2是根据本发明实施例二的图形界面的排列显示装置的结构示意图;
图3是根据本发明实施例二优选的图形界面的排列显示装置的结构示意图;以及
图4是根据本发明实施例二优选的图形界面的排列显示装置的结构示意图。
具体实施方式
需要说明的是,在不冲突的情况下,本申请中的实施例及实施例中的特征可以相互组合。下面将参考附图并结合实施例来详细说明本发明。
为了使本技术领域的人员更好地理解本发明方案,下面将结合本发明实施例中的附图,对本发明实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅仅是本发明一部分的实施例,而不是全部的实施例。基于本发明中的实施例,本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例,都应当属于本发明保护的范围。
需要说明的是,本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象,而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换,以便这里描述的本发明的实施例。此外,术语“包括”和“具有”以及他们的任何变形,意图在于覆盖不排他的包含,例如,包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元,而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。
实施例1
本发明实施例提供了一种图形界面的排列显示方法。
图1是根据本发明实施例的图形界面的排列显示方法的流程图。如图1所示,该方法包括步骤如下:
步骤S11,读取屏幕的屏幕分辨率。
具体的,通过上述步骤S11,获取当前用于显示图形界面的屏幕的屏幕分辨率。
步骤S13,根据屏幕分辨率对图形界面进行划分,生成排列网格。
具体的,通过上述步骤S13,根据屏幕的屏幕分辨率,对图形界面以网状形式进行划分。将图形界面按照预定的间隔划分为若干个正方形区域,得到与屏幕分辨率对应的用于排列图标的排列网格。
在实际应用当中,常用的屏幕分辨率,以及屏幕比例只有几种。可以预先根据屏幕的分辨率设置与屏幕分辨率对应的排列网格划分的方案,以提高图形界面在各种屏幕分辨率的屏幕上都能得到很好的显示效果。
步骤S15,获取需要显示的数据内容集合。
具体的,通过上述步骤S15,获取需要通过图形界面进行显示的数据内容集合,通过数据内容集合可以确定需要显示的内容数量,以及需要进行显示的数据内容。
步骤S17,根据数据内容集合,获取与数据内容集合匹配的等高矩形排列模板,其中,等高矩形排列模板用于表征在图形界面内,在用于确定初始位置的正方形图标的横向方向上,以宽度不同的等高矩形图标按预定的排列方式对数据内容进行显示的排列显示方法,排列网格用于表征等高矩形排列模板中用于计算各个矩形图标各个边长的基本单位。
具体的,通过上述步骤S17,将预先设置的等高矩形排列模板与由数据内容集合确定的需要显示的内容数量进行匹配,得到与数据内容集合匹配的等高矩形排列模板。其中,等高矩形排列模板的排列方式,首先,需要在排列网格上确定用于确定初始位置的正方形图标的位置。然后,在正方形图标的横向方向,排列着至少一个高度相同而宽度不同的长方形图标。正方形图标和长方形图标都可以用来显示数据内容集合中的数据内容。通过等高矩形排列模板中的正方形图标和长方形图标的数量与数据内容集合中的数据内容进行匹配,得到与数据内容集合匹配的等高矩形排列模板。等高矩形排列模板中的各个等高矩形图标的长边边长和宽边边长都设定为排列网格的基本单位的整数倍,故需要通过排列网格的基本单位计算得到等高矩形排列模板中,各个图标在显示界面内的具体显示位置和大小。
在实际应用当中,可以根据需要显示的内容数量,预先设置不同的等高矩形排列模板。以针对需要对不同数量的内容数据进行显示的情况提供不同的显示方式,从而实现更好地显示效果。
步骤S19,将数据内容集合按照等高矩形排列模板对数据内容进行排列显示。
具体的,上述步骤S19,将数据内容中的数据,按照经过匹配得到的等高矩形排列模板进行显示。
通过上述步骤S11至步骤S19,首先根据不同屏幕的屏幕分辨率,对图形界面进行划分,划分为与屏幕分辨率对应的用于排列图标的排列网格。然后,将预先设置的等高矩形排列模板与数据内容集合的属性信息进行匹配,得到适用于数据内容集合的等高矩形排列模板,最后,将数据内容集合中的各个需要显示的数据内容依照划分的排列网格,按照等高矩形排列模板提供图标位置进行显示。
在实际应用当中,程序开发人员仅仅需要确定在图形界面显示的数据内容,本方法就可以根据屏幕的屏幕分辨率和需要显示的内容获取一套适用的等高矩形排列模板。将数据内容以横向排列的至少两个等高矩形图标的形式进行显示。
综上可知,本发明解决了现有技术中设计人员、技术人员、咨询人员以及界面使用用户需要针对每个前端界面进行重复开发,导致的开发效率低、浪费人力资源的问题,实现了根据需要显示的数据内容自动生成与数据内容匹配的图形界面的效果。
优选的,本申请上述实施例中,在步骤S13根据屏幕分辨率对图形界面进行划分,生成排列网格中,步骤可以包括:
步骤S131,根据屏幕分辨率,确定用于划分图形界面的基本单位a。
步骤S133,按照基本单位a对图形界面进行划分,将图形界面划分为由正方形组成的排列网格,其中,正方形边长为基本单位a。
具体的,上述步骤S131至步骤S133,通过屏幕分辨率确认适用于当前屏幕分辨率的用于划分图形界面的基本单位a。对图形界面按照基本单位a分别进行横向和纵向的划分,将图形界面划分为由边长为a的正方形组成的排列网格。根据屏幕分辨率确定基本单位a的具体步骤可以是:根据分辨率确定屏幕的横向、纵向像素数,进而根据横向、纵向像素数对图形界面进行划分,横向得到边长为a个像素点的数个正方形,纵向得到边长为a个像素点的数个正方形。
在实际应用当中,可以通过对图形界面划分的排列网格,确定每个正方形图标的位置。在对正方形等比排列模板的设计过程中,只需要确定各个图标在排列网格中的相对位置即可,不需要再针对每种屏幕分辨率设计单独的显示模板或者调节模板中的各个图标在屏幕中的绝对位置。
优选的,本申请上述实施例中,在数据内容集合至少包括:数据内容和与数据内容对应的预设图标属性的情况下,步骤S17根据数据内容集合,获取与数据内容集合匹配的等高矩形排列模板中,步骤可以包括:
步骤S171a,根据数据内容集合,确定数据内容集合包含的数据内容的数量。
步骤S173a,将数据内容的数量与等高矩形排列模板定义的图标数量进行匹配,得到与数据内容集合匹配的等高矩形排列模板。
步骤S175a,将数据内容的预设图标属性分别与等高矩形排列模板中与各个图标对应的预设的图标属性进行匹配,得到数据内容在等高矩形排列模板中的显示位置。
具体的,通过上述步骤S171a至步骤S175a,将获取到的数据内容集合进行分析,得到数据内容集合中包含的数据内容的数量。通过等高矩形排列模板定义的正方形图标的显示数量与数据内容集合所包含的数据内容的数量进行匹配,确定与数据内容集合匹配的等高矩形排列模板。将数据内容集合中预先对数据内容设置的图标属性与该等高矩形排列模板中各个位置图标的属性进行匹配,从而确定数据内容集合中各个数据内容在等高矩形排列模板中的显示位置。其中,数据内容集合中的预先对数据内容设置的图标属性可以是程序开发人员在开发过程中,在对该数据内容的显示有特殊要求时,设置的图标属性值。
在实际应用当中,数据内容集合中包含的内容数量是随机的,很难针对每种情况设计一套独有的等高矩形排列模板。所以,可以在设置等高矩形排列模板的时候,为每个等高矩形排列模板设置一个适用内容数量的适用区间,从而扩大每种模板的适用范围。
以数据内容集合中由四个需要显示的数据内容,并且预设图标属性是预先设置的预设图标边长为例进行说明。首先确定数据内容集合中的数据内容的数量为四。然后获取适用区间包含四个的等高矩形排列模板。最后,按照预设图标属性中预先设置的预设图标的各边边长与等高矩形排列模板中的矩形图标的各边边长进行匹配,得到预设图标边长与等高矩形排列模板中图标边长的匹配结果。当然,预设图标属性还可以是数据内容的显示优先级等。
优选的,本申请上述实施例中,在步骤S11读取屏幕的屏幕分辨率之前,方法还包括:
步骤S10a,设定等高矩形排列模板,等高矩形排列模板用于确定数据内容集合中的内容数据的显示位置和用于显示内容数据的等高矩形图标的图标大小。
具体的,通过上述步骤S10a,针对需要显示的内容数量,预先设置不同的等高矩形排列模板。等高矩形排列模板中规定了各个图标的显示位置和各个图标的显示大小。
优选的,本申请上述实施例中,在步骤S10a设定等高矩形排列模板中,设定模板的步骤可以包括:
步骤S101a,设定等高矩形图标间的图标间距为a。
步骤S103a,设定等高矩形图标中用于定义初始位置的正方形的初始图标的边长为a*n,其中,n为正整数。
步骤S105a,设定在初始图标在横向方向上的各个等高矩形图标的纵向高边边长为a*n,横向宽边边长为a*n’,其中,n’为正整数。
步骤S107a,根据初始图标的边长、等高矩形图标的横向宽边边长a*n’和图标间距,设定等高矩形图标的排列位置。
具体的,通过上述步骤S101a至步骤S107a,对设定等高矩形排列模板的步骤进行说明。首先,将等高矩形图标间的图标间距设置为a,其中,a是基本单位,a与屏幕分辨率相对应。然后,确定在图形界面中的初始矩形图标的位置和大小。根据初始正方形图标的位置和大小,在初始正方形图标的横向方向,依次设定若干个等高矩形图标,这些图标的高都与用于定义初始位置的正方形图标的边长相同,而宽边的边长则为a的整数倍。最后,根据上述初始图标的大小和等高矩形图标的大小,设定各个等高矩形图标的相对位置。
优选的,本申请上述实施例中,在数据内容集合至少包括:至少一个功能性数据和至少一个用于描述功能性数据的指标数据的情况下,步骤S17根据数据内容集合,获取与数据内容集合匹配的等高矩形排列模板中,步骤可以包括:
步骤S171b,根据数据内容集合,确定数据内容集合中包含的与每个功能性数据对应的指标数据的指标数量。
步骤S173b,将指标数量与等高矩形排列模板中定义为用于显示指标数据的等高矩形图标的显示数量进行匹配,得到与数据内容集合匹配的等高矩形排列模板。
具体的,通过上述步骤S171b至步骤S173b,将获取到的数据内容集合进行分析,得到数据内容集合中包含的功能性数据和与功能性数据对应的指标数据的数量。将等高矩形排列模板定义的正方形图标横向方向的等高矩形图标的数量与指标数据进行匹配,确定与数据内容集合匹配的等高矩形排列模板。其中,功能性指标可以是用于点击操作的图标内容,功能性指标也可以是直接反应数据本身的数值。而指标数据为对功能性数据的描述性数据,可以用于对功能性数据进行补充描述,也可以用于对功能性数据的分析数据,还可以用于针对于用户的关于功能性数据的提示性操作。
在实际应用当中,数据内容集合中至少包含了一个功能性参数,而对于功能性参数的指标数据的数量则是随机的,很难针对每种情况设计一套独有的等高矩形排列模板。所以,可以在设置等高矩形排列模板的时候,为每个等高矩形排列模板设置一个适用区间,从而扩大每种模板的适用范围。
并且,如果数据内容包含了两个以上的功能性参数时,等高矩形排列模板针对每一组功能性参数进行匹配。并针对于功能性参数对应的指标数据的数量匹配不同的等高矩形排列模板,对其进行显示。
优选的,本申请上述实施例中,在步骤S11读取屏幕的屏幕分辨率之前,方法还包括:
步骤S10b,设定等高矩形排列模板,等高矩形排列模板用于确定数据内容集合中用于显示功能性数据的正方形图标的位置,以及用于显示指标数据的等高矩形图标的图标位置和图标大小。
具体的,通过上述步骤S10b,针对需要显示的指标数据的数量,预先设置不同的等高矩形排列模板。等高矩形排列模板中规定了各个图标的显示位置和各个图标的显示大小。
优选的,本申请上述实施例中,在步骤S10b设定等高矩形排列模板中,步骤可以包括:
步骤S101b,设定等高矩形图标间的图标间距为a。
步骤S103b,设定用于显示功能数据的正方形图标的边长为a*n,其中,n为正整数。
步骤S105b,设定各个用于显示指标数据的等高矩形图标的纵向高边边长为a*n,横向宽边边长为a*n’,其中,n’为正整数。
步骤S107b,根据初始图标的边长a*n、等高矩形图标的横向宽边边长a*n’和图标间距a,设定等高矩形图标的排列位置。
具体的,通过上述步骤S101b至步骤S107b,对设定等高矩形排列模板的步骤进行说明。首先,将等高矩形图标间的图标间距设置为a,其中,a是基本单位,a与屏幕分辨率相对应。然后,确定在图形界面中用于显示功能性数据的初始矩形图标的位置和大小。根据初始正方形图标的位置和大小,在初始正方形图标的横向方向,依次设定若干个用于显示描述功能性数据的指标数据的等高矩形图标,这些图标的高边的边长都与用于定义初始位置的正方形图标的边长相同,而宽边的边长则为a的整数倍。最后,根据上述初始图标的大小和等高矩形图标的大小,设定各个等高矩形图标的相对位置。
在实际应用当中,通过将边长设置为基本单位a的这种方法,可以方便模板设计人员对模板中各个图标的位置进行定位,不用为了保证图标在不同屏幕分辨率的屏幕上显示的准确性,需要确定在每种屏幕上图标的具体坐标值。
实施例2
本发明实施例还提供了一种图形界面的排列显示装置,如图2所示,该装置可以包括:读取模块21、生成模块23、第一获取模块25、第二获取模块27和显示模块29。
其中,读取模块21,用于读取屏幕的屏幕分辨率。
具体的,通过上述读取模块21,获取当前用于显示图形界面的屏幕的屏幕分辨率。
生成模块23,用于根据屏幕分辨率对图形界面进行划分,生成排列网格。
具体的,通过上述生成模块23,根据屏幕的屏幕分辨率,对图形界面以网状形式进行划分。将图形界面按照预定的间隔划分为若干个正方形区域,得到与屏幕分辨率对应的用于排列图标的排列网格。
在实际应用当中,常用的屏幕分辨率,以及屏幕比例只有几种。可以预先根据屏幕的分辨率设置与屏幕分辨率对应的排列网格划分的方案,以提高图形界面在各种屏幕分辨率的屏幕上都能得到很好的显示效果。
第一获取模块25,用于获取需要显示的数据内容集合。
具体的,通过上述第一获取模块25,获取需要通过图形界面进行显示的数据内容集合,通过数据内容集合可以确定需要显示的内容数量,以及需要进行显示的数据内容。
第二获取模块27,用于根据数据内容集合,获取与数据内容集合匹配的等高矩形排列模板,其中,等高矩形排列模板用于表征在图形界面内,在用于确定初始位置的正方形图标的横向方向上,以宽度不同的等高矩形图标按预定的排列方式对数据内容进行显示的排列显示方法,排列网格用于表征等高矩形排列模板中用于计算各个矩形图标各个边长的基本单位。
具体的,通过上述第二获取模块27,将预先设置的等高矩形排列模板与由数据内容集合确定的需要显示的内容数量进行匹配,得到与数据内容集合匹配的等高矩形排列模板。其中,等高矩形排列模板的排列方式,首先,需要在排列网格上确定用于确定初始位置的正方形图标的位置。然后,在正方形图标的横向方向,排列着至少一个高度相同而宽度不同的长方形图标。正方形图标和长方形图标都可以用来显示数据内容集合中的数据内容。通过等高矩形排列模板中的正方形图标和长方形图标的数量与数据内容集合中的数据内容进行匹配,得到与数据内容集合匹配的等高矩形排列模板。等高矩形排列模板中的各个等高矩形图标的长边边长和宽边边长都设定为排列网格的基本单位的整数倍,故需要通过排列网格的基本单位计算得到等高矩形排列模板中,各个图标在显示界面内的具体显示位置和大小。
在实际应用当中,可以根据需要显示的内容数量,预先设置不同的等高矩形排列模板。以针对需要对不同数量的内容数据进行显示的情况提供不同的显示方式,从而实现更好地显示效果。
显示模块29,用于将数据内容集合按照等高矩形排列模板对数据内容进行排列显示。
具体的,上述显示模块29,将数据内容中的数据,按照经过匹配得到的等高矩形排列模板进行显示。
通过上述读取模块21、生成模块23、第一获取模块25、第二获取模块27和显示模块29,首先根据不同屏幕的屏幕分辨率,对图形界面进行划分,划分为与屏幕分辨率对应的用于排列图标的排列网格。然后,将预先设置的等高矩形排列模板与数据内容集合的属性信息进行匹配,得到适用于数据内容集合的等高矩形排列模板,最后,将数据内容集合中的各个需要显示的数据内容依照划分的排列网格,按照等高矩形排列模板提供图标位置进行显示。
在实际应用当中,程序开发人员仅仅需要确定在图形界面显示的数据内容,本方法就可以根据屏幕的屏幕分辨率和需要显示的内容获取一套适用的等高矩形排列模板。将数据内容以横向排列的至少两个等高矩形图标的形式进行显示。
综上可知,本发明解决了现有技术中设计人员、技术人员、咨询人员以及界面使用用户需要针对每个前端界面进行重复开发,导致的开发效率低、浪费人力资源的问题,实现了根据需要显示的数据内容自动生成与数据内容匹配的图形界面的效果。
进一步的,可以通过上述生成模块23,执行如下步骤:
首先,根据屏幕分辨率,确定用于划分图形界面的基本单位a。然后,按照基本单位a对图形界面进行划分,将图形界面划分为由正方形组成的排列网格,其中,正方形边长为基本单位a。
具体的,在上述步骤中,通过屏幕分辨率确认适用于当前屏幕分辨率的用于划分图形界面的基本单位a。对图形界面按照基本单位a分别进行横向和纵向的划分,将图形界面划分为由边长为a的正方形组成的排列网格。根据屏幕分辨率确定基本单位a的具体步骤可以是:根据分辨率确定屏幕的横向、纵向像素数,进而根据横向、纵向像素数对图形界面进行划分,横向得到边长为a个像素点的数个正方形,纵向得到边长为a个像素点的数个正方形。
在实际应用当中,可以通过对图形界面划分的排列网格,确定每个正方形图标的位置。在对正方形等比排列模板的设计过程中,只需要确定各个图标在排列网格中的相对位置即可,不需要再针对每种屏幕分辨率设计单独的显示模板或者调节模板中的各个图标在屏幕中的绝对位置。
进一步的,在上述第二获取模块27中的数据内容集合至少包括:数据内容和与数据内容对应的预设图标属性的情况下,通过上述第二获取模块27执行的步骤可以包括:
步骤A,根据数据内容集合,确定数据内容集合包含的数据内容的数量。
步骤B,将数据内容的数量与等高矩形排列模板定义的图标数量进行匹配,得到与数据内容集合匹配的等高矩形排列模板。
步骤C,将数据内容的预设图标属性分别与等高矩形排列模板中与各个图标对应的预设的图标属性进行匹配,得到数据内容在等高矩形排列模板中的显示位置。
具体的,通过上述步骤,将获取到的数据内容集合进行分析,得到数据内容集合中包含的数据内容的数量。通过等高矩形排列模板定义的正方形图标的显示数量与数据内容集合所包含的数据内容的数量进行匹配,确定与数据内容集合匹配的等高矩形排列模板。将数据内容集合中预先对数据内容设置的图标属性与该等高矩形排列模板中各个位置图标的属性进行匹配,从而确定数据内容集合中各个数据内容在等高矩形排列模板中的显示位置。其中,数据内容集合中的预先对数据内容设置的图标属性可以是程序开发人员在开发过程中,在对该数据内容的显示有特殊要求时,设置的图标属性值。
在实际应用当中,数据内容集合中包含的内容数量是随机的,很难针对每种情况设计一套独有的等高矩形排列模板。所以,可以在设置等高矩形排列模板的时候,为每个等高矩形排列模板设置一个适用内容数量的适用区间,从而扩大每种模板的适用范围。
以数据内容集合中由四个需要显示的数据内容,并且预设图标属性是预先设置的预设图标边长为例进行说明。首先确定数据内容集合中的数据内容的数量为四。然后获取适用区间包含四个的等高矩形排列模板。最后,按照预设图标属性中预先设置的预设图标的各边边长与等高矩形排列模板中的矩形图标的各边边长进行匹配,得到预设图标边长与等高矩形排列模板中图标边长的匹配结果。当然,预设图标属性还可以是数据内容的显示优先级等。
优选的,本申请上述实施例中,如图3所示,在上述第二获取模块27中的数据内容集合至少包括:数据内容和与数据内容对应的预设图标属性的情况下,装置还可以包括:第一设定模块201。
其中,第一设定模块201,用于设定等高矩形排列模板,等高矩形排列模板用于确定数据内容集合中的内容数据的显示位置和用于显示内容数据的等高矩形图标的图标大小。
具体的,通过上述第一设定模块201,针对需要显示的内容数量,预先设置不同的等高矩形排列模板。等高矩形排列模板中规定了各个图标的显示位置和各个图标的显示大小。
进一步的,通过上述第一设定模块201设定模板的步骤可以包括:
首先,设定等高矩形图标间的图标间距为a。然后,设定等高矩形图标中用于定义初始位置的正方形的初始图标的边长为a*n,其中,n为正整数。进一步,设定在初始图标在横向方向上的各个等高矩形图标的纵向高边边长为a*n,横向宽边边长为a*n’,其中,n’为正整数。最后,根据初始图标的边长、等高矩形图标的横向宽边边长a*n’和图标间距,设定等高矩形图标的排列位置。
具体的,通过上述第一设定模块201,对设定等高矩形排列模板的步骤进行说明。首先,将等高矩形图标间的图标间距设置为a,其中,a是基本单位,a与屏幕分辨率相对应。然后,确定在图形界面中的初始矩形图标的位置和大小。根据初始正方形图标的位置和大小,在初始正方形图标的横向方向,依次设定若干个等高矩形图标,这些图标的高都与用于定义初始位置的正方形图标的边长相同,而宽边的边长则为a的整数倍。最后,根据上述初始图标的大小和等高矩形图标的大小,设定各个等高矩形图标的相对位置。
进一步的,在上述第二获取模块27中的数据内容集合至少包括:至少一个功能性数据和至少一个用于描述功能性数据的指标数据的情况下。其中,通过上述第二获取模块27执行的步骤可以包括:
步骤A’,根据数据内容集合,确定数据内容集合中包含的与每个功能性数据对应的指标数据的指标数量。
步骤B’,将指标数量与等高矩形排列模板中定义为用于显示指标数据的等高矩形图标的显示数量进行匹配,得到与数据内容集合匹配的等高矩形排列模板。
具体的,通过上述步骤,将获取到的数据内容集合进行分析,得到数据内容集合中包含的功能性数据和与功能性数据对应的指标数据的数量。将等高矩形排列模板定义的正方形图标横向方向的等高矩形图标的数量与指标数据进行匹配,确定与数据内容集合匹配的等高矩形排列模板。其中,功能性指标可以是用于点击操作的图标内容,功能性指标也可以是直接反应数据本身的数值。而指标数据为对功能性数据的描述性数据,可以用于对功能性数据进行补充描述,也可以用于对功能性数据的分析数据,还可以用于针对于用户的关于功能性数据的提示性操作。
在实际应用当中,数据内容集合中至少包含了一个功能性参数,而对于功能性参数的指标数据的数量则是随机的,很难针对每种情况设计一套独有的等高矩形排列模板。所以,可以在设置等高矩形排列模板的时候,为每个等高矩形排列模板设置一个适用区间,从而扩大每种模板的适用范围。
并且,如果数据内容包含了两个以上的功能性参数时,等高矩形排列模板针对每一组功能性参数进行匹配。并针对于功能性参数对应的指标数据的数量匹配不同的等高矩形排列模板,对其进行显示。
优选的,本申请上述实施例中,如图4所示,在上述第二获取模块27中的数据内容集合至少包括:至少一个功能性数据和至少一个用于描述功能性数据的指标数据的情况下,装置还可以包括:第二设定模块202。
第二设定模块202,用于设定等高矩形排列模板,等高矩形排列模板用于确定数据内容集合中用于显示功能性数据的正方形图标的位置,以及用于显示指标数据的等高矩形图标的图标位置和图标大小。
具体的,通过上述第二设定模块202,针对需要显示的指标数据的数量,预先设置不同的等高矩形排列模板。等高矩形排列模板中规定了各个图标的显示位置和各个图标的显示大小。
进一步的,通过上述第二设定模块202设定模板的步骤可以包括:
首先,设定等高矩形图标间的图标间距为a。然后,设定用于显示功能数据的正方形图标的边长为a*n,其中,n为正整数。进一步的,设定各个用于显示指标数据的等高矩形图标的纵向高边边长为a*n,横向宽边边长为a*n’,其中,n’为正整数。最后,根据初始图标的边长a*n、等高矩形图标的横向宽边边长a*n’和图标间距a,设定等高矩形图标的排列位置。
具体的,通过上述第二设定模块202,对设定等高矩形排列模板的步骤进行说明。首先,将等高矩形图标间的图标间距设置为a,其中,a是基本单位,a与屏幕分辨率相对应。然后,确定在图形界面中用于显示功能性数据的初始矩形图标的位置和大小。根据初始正方形图标的位置和大小,在初始正方形图标的横向方向,依次设定若干个用于显示描述功能性数据的指标数据的等高矩形图标,这些图标的高边的边长都与用于定义初始位置的正方形图标的边长相同,而宽边的边长则为a的整数倍。最后,根据上述初始图标的大小和等高矩形图标的大小,设定各个等高矩形图标的相对位置。
在实际应用当中,通过将边长设置为基本单位a的这种方法,可以方便模板设计人员对模板中各个图标的位置进行定位,不用为了保证图标在不同屏幕分辨率的屏幕上显示的准确性,需要确定在每种屏幕上图标的具体坐标值。
需要说明的是,对于前述的各方法实施例,为了简单描述,故将其都表述为一系列的动作组合,但是本领域技术人员应该知悉,本发明并不受所描述的动作顺序的限制,因为依据本发明,某些步骤可以采用其他顺序或者同时进行。其次,本领域技术人员也应该知悉,说明书中所描述的实施例均属于优选实施例,所涉及的动作和模块并不一定是本发明所必须的。
在上述实施例中,对各个实施例的描述都各有侧重,某个实施例中没有详述的部分,可以参见其他实施例的相关描述。
在本申请所提供的几个实施例中,应该理解到,所揭露的装置,可通过其它的方式实现。例如,以上所描述的装置实施例仅仅是示意性的,例如所述单元的划分,仅仅为一种逻辑功能划分,实际实现时可以有另外的划分方式,例如多个单元或组件可以结合或者可以集成到另一个系统,或一些特征可以忽略,或不执行。另一点,所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口,装置或单元的间接耦合或通信连接,可以是电性或其它的形式。
所述作为分离部件说明的单元可以是或者也可以不是物理上分开的,作为单元显示的部件可以是或者也可以不是物理单元,即可以位于一个地方,或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
另外,在本发明各个实施例中的各功能单元可以集成在一个处理单元中,也可以是各个单元单独物理存在,也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现,也可以采用软件功能单元的形式实现。
所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时,可以存储在一个计算机可读取存储介质中。基于这样的理解,本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来,该计算机软件产品存储在一个存储介质中,包括若干指令用以使得一台计算机设备(可为个人计算机、移动终端、服务器或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括:U盘、只读存储器(ROM,Read-Only Memory)、随机存取存储器(RAM,Random Access Memory)、移动硬盘、磁碟或者光盘等各种可以存储程序代码的介质。
以上所述仅为本发明的优选实施例而已,并不用于限制本发明,对于本领域的技术人员来说,本发明可以有各种更改和变化。凡在本发明的精神和原则之内,所作的任何修改、等同替换、改进等,均应包含在本发明的保护范围之内。

Claims (11)

1.一种图形界面的排列显示方法,其特征在于,包括:
读取屏幕的屏幕分辨率;
根据所述屏幕分辨率对所述图形界面进行划分,生成排列网格;
获取需要显示的数据内容集合;
根据所述数据内容集合,获取与所述数据内容集合匹配的等高矩形排列模板,其中,所述等高矩形排列模板用于表征在图形界面内,在用于确定初始位置的正方形图标的横向方向上,以宽度不同的等高矩形图标按预定的排列方式对所述数据内容进行显示的排列显示方法,所述排列网格用于表征所述等高矩形排列模板中用于计算各个矩形图标各个边长的基本单位;
将所述数据内容集合按照所述等高矩形排列模板对所述数据内容进行排列显示。
2.根据权利要求1所述的方法,其特征在于,根据所述屏幕分辨率对所述图形界面进行划分,生成排列网格的步骤包括:
根据所述屏幕分辨率,确定用于划分所述图形界面的基本单位a;
按照所述基本单位a对所述图形界面进行划分,将所述图形界面划分为由正方形组成的所述排列网格,其中,所述正方形边长为所述基本单位a。
3.根据权利要求2所述的方法,其特征在于,所述数据内容集合至少包括:所述数据内容和与所述数据内容对应的预设图标属性,其中,根据所述数据内容集合,获取与所述数据内容集合匹配的等高矩形排列模板的步骤包括:
根据所述数据内容集合,确定所述数据内容集合包含的所述数据内容的数量;
将所述数据内容的数量与所述等高矩形排列模板定义的图标数量进行匹配,得到与所述数据内容集合匹配的等高矩形排列模板;
将所述数据内容的所述预设图标属性分别与所述等高矩形排列模板中与各个图标对应的预设的图标属性进行匹配,得到所述数据内容在所述等高矩形排列模板中的显示位置。
4.根据权利要求2所述的方法,其特征在于,在所述读取屏幕的屏幕分辨率之前,所述方法还包括:
设定所述等高矩形排列模板,所述等高矩形排列模板用于确定所述数据内容集合中的内容数据的显示位置和用于显示内容数据的等高矩形图标的图标大小。
5.根据权利要求4所述的方法,其特征在于,所述设定所述等高矩形排列模板的步骤包括:
设定所述等高矩形图标间的图标间距为a;
设定所述等高矩形图标中用于定义初始位置的正方形的初始图标的边长为a*n,其中,所述n为正整数;
设定在所述初始图标在横向方向上的各个所述等高矩形图标的纵向高边边长为a*n,横向宽边边长为为a*n’,其中,所述n’为正整数;
根据所述初始图标的边长、所述等高矩形图标的横向宽边边长和所述图标间距,设定所述等高矩形图标的排列位置。
6.根据权利要求2所述的方法,其特征在于,所述数据内容集合至少包括:至少一个功能性数据和至少一个用于描述所述功能性数据的指标数据,其中,根据所述数据内容集合,获取与所述数据内容集合匹配的等高矩形排列模板的步骤包括:
根据所述数据内容集合,确定所述数据内容集合中包含的与每个所述功能性数据对应的指标数据的指标数量;
将所述指标数量与所述等高矩形排列模板中定义为用于显示指标数据的所述等高矩形图标的显示数量进行匹配,得到与所述数据内容集合匹配的等高矩形排列模板。
7.根据权利要求6所述的方法,其特征在于,在所述读取屏幕的屏幕分辨率之前,所述方法还包括:
设定所述等高矩形排列模板,所述等高矩形排列模板用于确定所述数据内容集合中用于显示所述功能性数据的正方形图标的位置,以及用于显示所述指标数据的所述等高矩形图标的图标位置和图标大小。
8.根据权利要求7所述的方法,其特征在于,所述设定所述等高矩形排列模板的步骤包括:
设定所述等高矩形图标间的图标间距为a;
设定用于显示所述功能性数据的正方形图标的边长为a*n,其中,所述n为正整数;
设定各个用于显示所述指标数据的等高矩形图标的纵向高边边长为a*n,横向宽边边长为为a*n’,其中,所述n’为正整数;
根据所述初始图标的边长a*n、所述等高矩形图标的高边边长a*n’和所述图标间距a,设定所述等高矩形图标的排列位置。
9.一种图形界面的排列显示装置,其特征在于,所述装置包括:
读取模块,用于读取屏幕的屏幕分辨率;
生成模块,用于根据所述屏幕分辨率对所述图形界面进行划分,生成排列网格;
第一获取模块,用于获取需要显示的数据内容集合;
第二获取模块,用于根据所述数据内容集合,获取与所述数据内容集合匹配的等高矩形排列模板,其中,所述等高矩形排列模板用于表征在图形界面内,在用于确定初始位置的正方形图标的横向方向上,以宽度不同的等高矩形图标按预定的排列方式对所述数据内容进行显示的排列显示方法,所述排列网格用于表征所述等高矩形排列模板中用于计算各个矩形图标各个边长的基本单位;
显示模块,用于将所述数据内容集合按照所述等高矩形排列模板对所述数据内容进行排列显示。
10.根据权利要求9所述的装置,其特征在于,所述装置还包括:
第一设定模块,用于设定所述等高矩形排列模板,所述等高矩形排列模板用于确定所述数据内容集合中的内容数据的显示位置和用于显示内容数据的等高矩形图标的图标大小。
11.根据权利要求9所述的装置,其特征在于,所述装置还包括:
第二设定模块,用于设定所述等高矩形排列模板,所述等高矩形排列模板用于确定所述数据内容集合中用于显示功能性数据的正方形图标的位置,以及用于显示指标数据的所述等高矩形图标的图标位置和图标大小。
CN201410779073.5A 2014-12-15 2014-12-15 图形界面的排列显示方法及装置 Active CN104461547B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201410779073.5A CN104461547B (zh) 2014-12-15 2014-12-15 图形界面的排列显示方法及装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201410779073.5A CN104461547B (zh) 2014-12-15 2014-12-15 图形界面的排列显示方法及装置

Publications (2)

Publication Number Publication Date
CN104461547A true CN104461547A (zh) 2015-03-25
CN104461547B CN104461547B (zh) 2018-08-07

Family

ID=52907658

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201410779073.5A Active CN104461547B (zh) 2014-12-15 2014-12-15 图形界面的排列显示方法及装置

Country Status (1)

Country Link
CN (1) CN104461547B (zh)

Cited By (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106201196A (zh) * 2016-06-30 2016-12-07 维沃移动通信有限公司 一种桌面图标的整理方法及移动终端
CN107122098A (zh) * 2017-04-27 2017-09-01 成都奇鲁科技有限公司 网址显示方法及装置
CN108995678A (zh) * 2018-08-14 2018-12-14 武汉虹信通信技术有限责任公司 一种轨道交通网管系统的监控界面的生成方法
CN112527167A (zh) * 2020-12-18 2021-03-19 深圳市元征科技股份有限公司 一种图标显示方法、装置、设备及介质

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103064583A (zh) * 2012-12-20 2013-04-24 北京小米科技有限责任公司 显示块排列方法、显示块切换方法及移动终端
CN103500166A (zh) * 2013-08-22 2014-01-08 合一网络技术(北京)有限公司 一种渐进增强的响应式网页设计方法
CN103530052A (zh) * 2013-09-27 2014-01-22 华为技术有限公司 一种界面内容的显示方法和用户设备
CN103941958A (zh) * 2013-01-23 2014-07-23 腾讯科技(深圳)有限公司 一种桌面管理的方法及终端设备
CN104007991A (zh) * 2014-06-06 2014-08-27 百度在线网络技术(北京)有限公司 应用程序界面布局调整方法和装置
US20140304632A1 (en) * 2013-04-04 2014-10-09 Pantech Co., Ltd. Smart device for convenient graphic object arrangement and method of graphic object arrangement

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103064583A (zh) * 2012-12-20 2013-04-24 北京小米科技有限责任公司 显示块排列方法、显示块切换方法及移动终端
CN103941958A (zh) * 2013-01-23 2014-07-23 腾讯科技(深圳)有限公司 一种桌面管理的方法及终端设备
US20140304632A1 (en) * 2013-04-04 2014-10-09 Pantech Co., Ltd. Smart device for convenient graphic object arrangement and method of graphic object arrangement
CN103500166A (zh) * 2013-08-22 2014-01-08 合一网络技术(北京)有限公司 一种渐进增强的响应式网页设计方法
CN103530052A (zh) * 2013-09-27 2014-01-22 华为技术有限公司 一种界面内容的显示方法和用户设备
CN104007991A (zh) * 2014-06-06 2014-08-27 百度在线网络技术(北京)有限公司 应用程序界面布局调整方法和装置

Cited By (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106201196A (zh) * 2016-06-30 2016-12-07 维沃移动通信有限公司 一种桌面图标的整理方法及移动终端
CN107122098A (zh) * 2017-04-27 2017-09-01 成都奇鲁科技有限公司 网址显示方法及装置
CN107122098B (zh) * 2017-04-27 2020-11-03 成都安易迅科技有限公司 网址显示方法及装置
CN108995678A (zh) * 2018-08-14 2018-12-14 武汉虹信通信技术有限责任公司 一种轨道交通网管系统的监控界面的生成方法
CN112527167A (zh) * 2020-12-18 2021-03-19 深圳市元征科技股份有限公司 一种图标显示方法、装置、设备及介质

Also Published As

Publication number Publication date
CN104461547B (zh) 2018-08-07

Similar Documents

Publication Publication Date Title
CN104407779A (zh) 图形界面的排列显示方法及装置
TW202018533A (zh) 資料處理模型構建方法、裝置、伺服器和用戶端
US9411482B2 (en) Visualizing user interfaces
Au et al. Automated usability testing framework
CN114424257A (zh) 使用机器学习对表格数据进行自动描绘和提取
CN104461547A (zh) 图形界面的排列显示方法及装置
CN110442510A (zh) 一种页面属性获取方法、装置及计算机设备、存储介质
CN104484093A (zh) 图形界面的排列显示方法及装置
US20090326921A1 (en) Grammar checker for visualization
KR102248823B1 (ko) 데이터 시각화 서비스 시스템, 방법 및 어플리케이션
CN105930398A (zh) 一种电力系统中数据的可视化方法和装置
CN104461249A (zh) 图形界面的排列显示方法及装置
Costagliola et al. KnotSketch: a tool for knot diagram sketching, encoding and re-generation
Leal et al. Eshu: An extensible web editor for diagrammatic languages
US9372844B2 (en) Automatically generating a business process flow GUI using a symbolic annotation language
CN104461549A (zh) 图形界面的排列显示方法及装置
CN107135095B (zh) 虚拟机网络拓扑的可视化编辑方法及系统
CN113010829B (zh) 一种数据分区可视化方法、装置、计算机设备及存储介质
CN114443022A (zh) 生成页面搭建区块的方法及电子设备
Dobesova Strengths and weaknesses in data flow diagrams in GIS
Trese et al. Documenting software systems with views V: towards visual documentation of design patterns as an aid to program understanding
Khansa et al. Application of Augmented Reality Technology as an Alternative Media for Campus IT Telkom Purwokerto
Ramanujan et al. shapesift: Evaluating infovis tools for eco-conscious design
Fricker et al. Digital Landscape Architecture Education–Where Do We Stand and Where Should We Go?
Kurniawan et al. Augmented Reality of Historical Relics in the British Museum

Legal Events

Date Code Title Description
C06 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant
PE01 Entry into force of the registration of the contract for pledge of patent right
PE01 Entry into force of the registration of the contract for pledge of patent right

Denomination of invention: Graphical interface arrangement display method and graphical interface arrangement display device

Effective date of registration: 20190531

Granted publication date: 20180807

Pledgee: Shenzhen Black Horse World Investment Consulting Co., Ltd.

Pledgor: Beijing Guoshuang Technology Co.,Ltd.

Registration number: 2019990000503

CP02 Change in the address of a patent holder
CP02 Change in the address of a patent holder

Address after: 100083 No. 401, 4th Floor, Haitai Building, 229 North Fourth Ring Road, Haidian District, Beijing

Patentee after: Beijing Guoshuang Technology Co.,Ltd.

Address before: 100086 Beijing city Haidian District Shuangyushu Area No. 76 Zhichun Road cuigongfandian 8 layer A

Patentee before: Beijing Guoshuang Technology Co.,Ltd.