CN113076160B - 显示界面的信息显示方法及相关装置 - Google Patents
显示界面的信息显示方法及相关装置 Download PDFInfo
- Publication number
- CN113076160B CN113076160B CN202110373704.3A CN202110373704A CN113076160B CN 113076160 B CN113076160 B CN 113076160B CN 202110373704 A CN202110373704 A CN 202110373704A CN 113076160 B CN113076160 B CN 113076160B
- Authority
- CN
- China
- Prior art keywords
- display interface
- information
- index
- menu
- display
- 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.)
- Active
Links
- 238000000034 method Methods 0.000 title claims abstract description 65
- 230000004927 fusion Effects 0.000 claims description 11
- 230000004044 response Effects 0.000 claims description 3
- 239000000758 substrate Substances 0.000 claims 5
- 239000000523 sample Substances 0.000 claims 1
- 238000010586 diagram Methods 0.000 description 14
- 230000006870 function Effects 0.000 description 9
- 230000000694 effects Effects 0.000 description 6
- 230000004048 modification Effects 0.000 description 6
- 238000012986 modification Methods 0.000 description 6
- 230000008859 change Effects 0.000 description 5
- 230000000007 visual effect Effects 0.000 description 3
- 238000012217 deletion Methods 0.000 description 2
- 230000037430 deletion Effects 0.000 description 2
- 239000000725 suspension Substances 0.000 description 2
- XLYOFNOQVPJJNP-UHFFFAOYSA-N water Substances O XLYOFNOQVPJJNP-UHFFFAOYSA-N 0.000 description 2
- 101100149023 Bacillus subtilis (strain 168) secA gene Proteins 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 239000003086 colorant Substances 0.000 description 1
- 230000001419 dependent effect Effects 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 230000000149 penetrating effect Effects 0.000 description 1
- 230000008569 process Effects 0.000 description 1
- 238000009877 rendering Methods 0.000 description 1
- 238000012163 sequencing technique Methods 0.000 description 1
- 230000001960 triggered effect Effects 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本申请涉及显示技术领域,公开了显示界面的信息显示方法及相关装置。该方法包括:获取菜单信息和指标信息;基于菜单信息生成菜单显示界面,以及基于指标信息生成指标显示界面;将菜单显示界面和指标显示界面进行融合,并将融合的第一显示界面显示于显示区域中的同一子显示区域。通过上述方式,能够提升用户阅读效率,增加用户体验。
Description
技术领域
本申请涉及显示技术领域,特别是涉及一种显示界面的信息显示方法及相关装置。
背景技术
随着电子设备的使用量增加,越来越多的信息通过电子设备的显示界面来进行展示。当操作菜单和展示指标数量少时,使用传统的“独立展示菜单面板和指标面板”使界面利用率低,且会让用户在信息搜索时视线扫视不聚焦,同时也有操作距离远等问题。
发明内容
本申请主要解决的技术问题是提供显示界面的信息显示方法及相关装置,能够提升用户阅读效率,增加用户体验。
本申请采用的一种技术方案是提供一种显示界面的信息显示方法,该方法包括:获取菜单信息和指标信息;基于菜单信息生成菜单显示界面,以及基于指标信息生成指标显示界面;将菜单显示界面和指标显示界面进行融合,并将融合的第一显示界面显示于显示区域中的同一子显示区域。
其中,将菜单显示界面和指标显示界面进行融合,并将融合的第一显示界面显示于显示区域中的同一子显示区域,包括:获取预设融合模板;将菜单显示界面和指标显示界面按照预设融合模板进行融合,并将融合的第一显示界面显示于显示区域中的同一子显示区域。
其中,菜单信息包括第一信息和第二信息,其中,第二信息为第一信息的从属信息;基于菜单信息生成菜单显示界面,包括:基于第一信息生成菜单显示界面;该方法还包括:在菜单显示界面接收到基于第一信息的第一触发指令时,开启第一悬浮窗口,并在第一悬浮窗口中显示第二信息。
其中,该方法还包括:在第一悬浮窗口接收到基于第二信息的第二触发指令时,将第二信息的详细内容显示于显示区域中的另一子显示区域,或者开启第二显示界面,并在第二显示界面中展示第二信息的详细内容。
其中,该方法还包括:在菜单显示界面或指标显示界面接收到拖动指令时,基于拖动指令将菜单显示界面或指标显示界面移动至第一区域;控制第一区域中的显示内容基于菜单显示界面或指标显示界面进行移动,以使第一区域用于显示菜单显示界面或指标显示界面。
其中,该方法还包括:在菜单显示界面或指标显示界面接收到第三触发指令时,开启第二悬浮窗口,并在第二悬浮窗口中展示多个显示样式;响应于多个显示样式中的目标显示样式被选择,关闭悬浮窗口,并将菜单显示界面或指标显示界面的当前显示样式设置为目标显示样式。
其中,该方法还包括:在指标显示界面接收到第四触发指令时,开启第三悬浮窗口,并在第三悬浮窗口中展示多个指标信息;响应于多个指标信息中的至少一个指标信息被选择,关闭悬浮窗口,并在指标显示界面显示至少一个指标信息。
其中,该方法还包括:在指标显示界面接收到基于至少一个指标信息的第五触发指令时,将指标信息的详细内容显示于显示区域中的另一子显示区域,或者开启第三显示界面,并在第三显示界面中展示指标信息的详细内容。
其中,该方法还包括:在菜单显示界面或指标显示界面接收到缩放指令时,将菜单显示界面或指标显示界面缩放至与缩放指令相对应的大小;控制菜单显示界面中的菜单信息或指标显示界面中的指标信息进行缩放,以使菜单信息适应菜单显示界面的当前大小或指标信息适应指标显示界面的当前大小。
本申请采用的另一种技术方案是提供一种电子设备,该电子设备包括处理器以及与处理器耦接的存储器;其中,存储器用于存储程序数据,处理器用于执行程序数据,以实现上述技术方案提供的方法。
本申请采用的另一种技术方案是提供一种计算机可读存储介质,该计算机可读存储介质用于存储程序数据,程序数据在被处理器执行时,用于实现上述技术方案提供的方法。
本申请的有益效果是:区别于现有技术的情况,本申请的一种显示界面的信息显示方法,该方法包括:获取菜单信息和指标信息;基于菜单信息生成菜单显示界面,以及基于指标信息生成指标显示界面;将菜单显示界面和指标显示界面进行融合,并将融合的第一显示界面显示于显示区域中的同一子显示区域。通过上述方式,融合的菜单显示界面和指标显示界面在同一子显示区域进行显示,使用户无需过多视觉搜索则可获取所需信息,提升用户阅读效率,增加用户体验。
附图说明
为了更清楚地说明本申请实施例中的技术方案,下面将对实施例描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本申请的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他的附图。其中:
图1是本申请提供的显示界面的信息显示方法第一实施例的流程示意图;
图2是本申请提供的菜单显示界面一实施例的示意图;
图3是本申请提供的菜单显示界面的另一实施例的示意图;
图4是本申请提供的图1中步骤13的具体流程示意图;
图5是本申请提供的显示界面一实施例的示意图;
图6是本申请提供的显示界面的信息显示方法第二实施例的流程示意图;
图7-图9是本申请提供的显示界面的信息显示方法一应用场景示意图;
图10是本申请提供的显示界面的信息显示方法另一应用场景示意图;
图11是本申请提供的显示界面的信息显示方法第三实施例的流程示意图;
图12-图14是本申请提供的显示界面的信息显示方法一应用场景示意图;
图15是本申请提供的显示界面的信息显示方法第四实施例的流程示意图;
图16-图18是本申请提供的显示界面的信息显示方法一应用场景示意图;
图19-图21是本申请提供的显示界面的信息显示方法另一应用场景示意图;
图22是本申请提供的显示界面的信息显示方法第五实施例的流程示意图;
图23-图25是本申请提供的显示界面的信息显示方法一应用场景示意图;
图26是本申请提供的显示界面的信息显示方法第六实施例的流程示意图;
图27-图28是本申请提供的显示界面的信息显示方法另一应用场景示意图;
图29是本申请提供的电子设备一实施例的结构示意图;
图30是本申请提供的计算机可读存储介质一实施例的结构示意图。
具体实施方式
下面将结合本申请实施例中的附图,对本申请实施例中的技术方案进行清楚、完整地描述。可以理解的是,此处所描述的具体实施例仅用于解释本申请,而非对本申请的限定。另外还需要说明的是,为了便于描述,附图中仅示出了与本申请相关的部分而非全部结构。基于本申请中的实施例,本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例,都属于本申请保护的范围。
在本文中提及“实施例”意味着,结合实施例描述的特定特征、结构或特性可以包含在本申请的至少一个实施例中。在说明书中的各个位置出现该短语并不一定均是指相同的实施例,也不是与其它实施例互斥的独立的或备选的实施例。本领域技术人员显式地和隐式地理解的是,本文所描述的实施例可以与其它实施例相结合。
参阅图1,图1是本申请提供的显示界面的信息显示方法第一实施例的流程示意图。该方法包括:
步骤11:获取菜单信息和指标信息。
在一些实施例中,菜单信息可以为一个系统的功能菜单,如电脑系统的功能菜单,如应用软件的功能菜单。指标信息可以是对应该菜单信息的系统的一些提示信息或推送信息,该指标信息用于提醒用户对该指标信息进行查看。
在一些实施例中,菜单信息和指标信息存储于数据库中,通过异步的方式从数据库中获取菜单信息和指标信息。
在一些实施例中,根据当前用户不同,获取到的菜单信息和指标信息也不相同。如在当前用户登陆后,从数据库获取与该用户相关的菜单信息和指标信息。
步骤12:基于菜单信息生成菜单显示界面,以及基于指标信息生成指标显示界面。
在一些实施例中,基于菜单信息的内容生成菜单显示界面,如菜单信息的内容较多,则生成的菜单显示界面的面积较大,菜单信息的内容较少,则生成的菜单显示界面的面积较小。具体的,参阅图2和图3进行说明,如在图2中,菜单信息包括菜单A、菜单B、菜单C、菜单D和菜单E,则对应形成菜单栏,其中每个菜单栏的面积为n*m。则图2中的菜单信息生成的菜单显示界面的面积为5n*m。如在图3中,菜单信息包括菜单A、菜单B和菜单C,则对应形成菜单栏,其中每个菜单栏的面积为n*m。则图3中的菜单信息生成的菜单显示界面的面积为3n*m。
可以理解,指标显示界面与菜单显示界面具有相同或相似的生成方式,这里不做赘述。
步骤13:将菜单显示界面和指标显示界面进行融合,并将融合的第一显示界面显示于显示区域中的同一子显示区域。
在一些实施例中,参阅图4,步骤13可以具体为如下步骤:
步骤131:获取预设融合模板。
在一些实施例中,预设融合模板可以设置菜单显示界面和指标显示界面的显示样式,如菜单显示界面的背景颜色、主题,菜单信息的字体类型、字体大小,以及菜单信息在点击时的动态效果。
在一些实施例中,预设融合模板可以设置指标显示界面的显示样式,如指标显示界面的背景颜色、主题,指标信息的字体类型、字体大小,以及指标信息在点击时的动态效果。
在一些实施例中,预设融合模板可以设置菜单显示界面和指标显示界面的显示样式,如菜单显示界面和指标显示界面的背景颜色、主题,菜单信息和指标信息的字体类型、字体大小,以及指标信息在点击时的动态效果。
步骤132:将菜单显示界面和指标显示界面按照预设融合模板进行融合,并将融合的第一显示界面显示于显示区域中的同一子显示区域。
在一些实施例中,参阅图5进行说明,菜单显示界面511和指标显示界面512按照预设融合模板融合后生成了第一显示界面51,将第一显示界面51显示于显示区域50中的同一子显示区域。如图5所示,此时第一显示界面51位于显示区域50左上方一子显示区域。
在本实施例中,通过获取菜单信息和指标信息;基于菜单信息生成菜单显示界面,以及基于指标信息生成指标显示界面;将菜单显示界面和指标显示界面进行融合,并将融合的第一显示界面显示于显示区域中的同一子显示区域。通过上述方式,融合的菜单显示界面和指标显示界面在同一子显示区域进行显示,使用户无需过多视觉搜索则可获取所需信息,提升用户阅读效率,增加用户体验。另外,最大化的利用显示界面空间,最少可以只占用界面头部区域,将余下空间供其他操作或内容展示。
参阅图6,图6是本申请提供的显示界面的信息显示方法第二实施例的流程示意图,该方法包括:
步骤61:在菜单显示界面接收到基于第一信息的第一触发指令时,开启第一悬浮窗口。
可以理解,步骤61应用于上述实施例中菜单显示界面和指标显示界面显示于同一子显示区域之后。
在一些实施例中,菜单信息包括第一信息和第二信息,其中,第二信息为第一信息的从属信息。如,菜单信息为系统管理、基本信息、修改密码。其中,系统管理为第一信息,基本信息和修改密码为第二信息。在当前状态下菜单显示界面只显示第一信息,也就是系统管理,在菜单显示界面接收到基于第一信息的第一触发指令时,开启第一悬浮窗口。
步骤62:在第一悬浮窗口中显示第二信息。
在一些实施例中,结合图7和图8进行说明:如图7所示,菜单显示界面显示的菜单信息为系统管理,当鼠标悬停在系统管理区域时,使用悬浮窗口显示第二信息,如图8所示,第二信息包括基本信息和修改密码。
在一些实施例中,第二信息与第一信息关联,在显示第一信息时,第二信息还未从数据库获取,在对第一信息进行点击或者其他操作时,根据第一信息从数据库获取到第二信息,并在第一悬浮窗口显示。
在一些实施例中,结合图7和图9进行说明:如图7所示,菜单显示界面显示的菜单信息为系统管理,当鼠标悬停在系统管理区域或点击系统管理区域时,在系统管理下方显示新的显示区域用于显示第二信息,如图9所示,第二信息包括基本信息和修改密码。
在一些实施例中,在第一悬浮窗口接收到基于第二信息的第二触发指令时,将第二信息的详细内容显示于显示区域中的另一子显示区域,或者开启第二显示界面,并在第二显示界面中展示第二信息的详细内容。如,参阅图10,显示区域100包括第一子显示区域101和第二子显示区域102。第一子显示区域包括菜单显示界面1011和指标显示界面1012。在对系统管理进行点击操作后,第二悬浮窗口展示系统管理关联的第二信息,如基本信息和修改密码。在对基本信息进行点击操作或鼠标悬停时,在第二子显示区域102显示基本信息的详细内容。如图10所示,在第二子显示区域102显示的详细内容为“基本信息:姓名:xxx出生日期:YYYY备注:zzzz”。
在一些实施例中,可以开启第二显示界面,并在第二显示界面中展示第二信息的详细内容。
参阅图11,图11是本申请提供的显示界面的信息显示方法第三实施例的流程示意图,该方法包括:
步骤111:获取菜单信息和指标信息。
步骤112:基于菜单信息生成菜单显示界面,以及基于指标信息生成指标显示界面。
步骤113:将菜单显示界面和指标显示界面进行融合,并将融合的第一显示界面显示于显示区域中的同一子显示区域。
步骤111-113与上述实施例具有相同或相似的技术方案,这里不做赘述。
步骤114:在菜单显示界面或指标显示界面接收到拖动指令时,基于拖动指令将菜单显示界面或指标显示界面移动至第一区域。
步骤115:控制第一区域中的显示内容基于菜单显示界面或指标显示界面进行移动,以使第一区域用于显示菜单显示界面或指标显示界面。
在一些实施例中,结合图12和图13对步骤114-115进行说明:
在子显示区域20中包括第一区域21和第二区域22。第一区域21中包括指标信息A、指标信息B、指标信息C和指标信息D,以形成指标显示界面。第二区域22中包括菜单显示界面。在菜单显示界面接收到拖动指令时,基于拖动指令将菜单显示界面或指标显示界面移动至第一区域21,控制第一区域21中的显示内容基于菜单显示界面进行移动,以使第一区域21用于显示菜单显示界面,如图13所示,指标信息和菜单显示界面融合。
在一些实施例中,因菜单显示界面与指标显示界面均位于第一区域,则可以将子显示区域20的面积缩小至第一区域的大小,形成如图14所示的界面。
在一些实施例中,若指标显示界面接收到拖动指令时,基于拖动指令将指标显示界面移动至第一区域。控制第一区域中的显示内容基于指标显示界面进行移动,以使第一区域用于显示指标显示界面。
参阅图15,图15是本申请提供的显示界面的信息显示方法第四实施例的流程示意图,该方法包括:
步骤151:在菜单显示界面或指标显示界面接收到第三触发指令时,开启第二悬浮窗口,并在第二悬浮窗口中展示多个显示样式。
步骤152:响应于多个显示样式中的目标显示样式被选择,关闭悬浮窗口,并将菜单显示界面或指标显示界面的当前显示样式设置为目标显示样式。
结合图16-图18对菜单显示界面的修改显示样式进行说明:
菜单显示界面接收到第三触发指令时,如修改样式按钮被点击,则开启第二悬浮窗口,如图16所示,第二悬浮窗口显示有显示样式A、显示样式B、显示样式C和默认样式。此时显示样式选择的是默认样式。
如图17所示,选择显示样式B,则形成如图18所示菜单显示界面显示样式的变化。
结合图19-图21对指标显示界面的修改显示样式进行说明:
指标显示界面接收到第三触发指令时,如修改样式按钮被点击,则开启第二悬浮窗口,如图19所示,第二悬浮窗口显示有显示样式A、显示样式B、显示样式C和默认样式。此时显示样式选择的是默认样式。
如图20所示,选择显示样式C,则形成如图21所示指标显示界面显示样式的变化。
参阅图22,图22是本申请提供的显示界面的信息显示方法第五实施例的流程示意图。该方法包括:
步骤221:在指标显示界面接收到第四触发指令时,开启第三悬浮窗口,并在第三悬浮窗口中展示多个指标信息。
步骤222:响应于多个指标信息中的至少一个指标信息被选择,关闭悬浮窗口,并在指标显示界面显示至少一个指标信息。
可以理解,步骤221应用于上述实施例中菜单显示界面和指标显示界面显示于同一子显示区域之后。
结合图23-25进行说明:
指标显示界面接收到第四触发指令时,如点击指标选择按钮,则开启第三悬浮窗口,并在第三悬浮窗口中展示多个指标信息,如图23所示,第三悬浮窗口显示有指标信息A、指标信息B、指标信息C、指标信息D、指标信息E、指标信息F、指标信息G、指标信息H、指标信息I、指标信息J、指标信息K和指标信息L。
如图24所示,按照实际需要对指标信息进行修改,选择指标信息B、指标信息D、指标信息I和指标信息L。
在选择完成后,则形成如图25所示的指标显示界面。
在一些实施例中,在指标显示界面接收到基于至少一个指标信息的第五触发指令时,将指标信息的详细内容显示于显示区域中的另一子显示区域。
在一些实施例中,在指标显示界面接收到基于至少一个指标信息的第五触发指令时,开启第三显示界面,并在第三显示界面中展示指标信息的详细内容。
参阅图26,图26是本申请提供的显示界面的信息显示方法第六实施例的流程示意图。该方法包括:
步骤261:在菜单显示界面或指标显示界面接收到缩放指令时,将菜单显示界面或指标显示界面缩放至与缩放指令相对应的大小。
可以理解,步骤261应用于上述实施例中菜单显示界面和指标显示界面显示于同一子显示区域之后。
步骤262:控制菜单显示界面中的菜单信息或指标显示界面中的指标信息进行缩放,以使菜单信息适应菜单显示界面的当前大小或指标信息适应指标显示界面的当前大小。
结合图27-图28说明对菜单显示界面的操作。
如图27所示,菜单显示界面中的菜单信息的字体为18pt(Point,点),在菜单显示界面接收到缩放指令时,将菜单显示界面缩放至与缩放指令相对应的大小,控制菜单显示界面中的菜单信息进行缩放,以使菜单信息适应菜单显示界面的当前大小,如图28所示,菜单显示界面中的菜单信息的字体为12pt。
在一些实施例中,将菜单显示界面和指标显示界面使用列表、图形、自定义等控件进行融合展示一层信息,使用多层或一个DIV(DIVision,划分)将其整体布局,将次级信息在点击或鼠标悬停等触发动作,使用浮窗展现下级信息;或者可以将整融合层作为大导航,显示界面其他区域作为详细内容展示区。
菜单显示界面支持无限级显示,鼠标移入显示当前的层级菜单,其他层级菜单隐藏;指标显示界面中的指标内容,通过ajax(Asynchronous Javascript And XML AndHTML,异步JavaScript和XML)异步加载对应的区域结构和数据,前后指标内容加载会有CSS3(Cascading Style Sheets Level 3,层叠样式表3级)动效切换效果,隐藏淡出,显示淡入,自然平滑的切换。
图表形态显示可使用div+css3实现,也可以使用Canvas+js(JavaScript)实现,或使用开源的第三方插件echarts.js实现。以往的图表模块是无法进行个性化定制的,本实施例的图表区域的模块支持拖拽排序和拉伸,用户可以根据信息的重要性层级,来自定义图表显示的位置,从而达到视觉观察点按照用户认为的重要性依次递减的顺序浏览,体验更加顺畅,也可以根据模块的内容,定制模块的尺寸,达到重要信息占用大的区域,减少了查找的负担。利用gridster.js完成这一系列交互,同时利用媒体查询和flex布局确保在拉伸时模块内容的排布不混乱。同时也支持模块的新增和删除,用户可以仅选择自己需要了解的功能放入模块,也可以删除自己不需要了解的模块,灵活定制属于自己的界面元素。高度个性化定制是本方案区别于现有方案的一大特点。
具体地,显示界面可提供以下编辑功能操作。
可新增删除:可对于需展示的菜单显示界面或指标显示界面进行自定义,已展示的内容可以关闭展示;点击新增,则用户可在后台预设的内容列表中,选择添加要展示的菜单、图形。
可改变位置:拖拽可改变菜单、图表的位置,拖动至鼠标指定位置时,其他内容的流式布局适应。
可改变大小:在预留空间内,可拖拽改变大小,菜单显示显示界面或指标显示界面的最小值和最大值可提前预设指定,比如24格栅格布局时,最小值可为3倍栅格高宽(包括栅格间的水槽),最大值为24倍栅格高宽(包括栅格间的水槽)。
可替换样式:可根据后台预设的图标内容进行自定义图表设置,同时,当界面响应时,可以后台预设响应规则,比如界面区域缩小时,图形等比例缩小、展示内容从图标替换成功能名称展示。
在一些实施例中,将子显示区域的左侧区域设置为菜单显示界面,右侧区域设置为指标显示界面。
其中,菜单显示界面的菜单结构使用div进行布局,可自由拓展菜单层级,支持无限级菜单显示,菜单名称对应JSON(JavaScript Object Notation,JavaScript对象简谱)文件数据,可直接读取显示对应的菜单名称,通过JQ(jQuery)控制菜单的层级显示;菜单点击,在浏览器新页签打开对应新的功能页。
指标显示界面,通过编辑模式,可灵活配置出适合的指标面板;“+”号添加指标数据;每一块的指标区域,都可以通过右上角的控制器,进行拖动改变区域大小和位置,区域里的内容进行自适应;图表形态显示使用第三方开源的插件eharts.js来实现效果,图表形状有对应的链接穿透功能,点击后在浏览新页签打开功能页。
图表区域的模块支持拖拽排序和拉伸,引入gridster.js插件,确定初始一倍模式下的模块默认大小,在html(Hyper Text Markup Language,超级文本标记语言)中定义好各个图表的模块,可通过JSON创建gridster实例,并对gridster.js进行初始化渲染,html中设置默认的模块大小,预设的最大和最小拖拽宽度,按照定义好的一倍模块宽度来倍数拉伸或压缩,从而达到在自定义的情况下不使界面杂乱的目的。我们针对个别需要特殊处理的模块,在html中利用标签定义其最大和最小的拖拽范围。为了保证模块的内容在屏幕分辨率变化的情况下不会发生显示错乱的问题,在css中利用媒体查询和flex布局确保在拉伸时模块内容的排布不混乱以及合理适应模块大小。同时也支持模块的新增和删除,用户可以仅选择自己需要了解的功能放入模块,也可以删除不需要了解的模块,灵活定制界面元素。
通过上述方式,根据用户实际需求对菜单显示界面和指标显示界面进行改变,提升用户体验。最大化的利用显示界面的空间,最少可以只占用显示界面头部区域,将余下空间供其他操作或内容展示。从最大程度上提升用户阅读效率、满足用户阅读习惯,保证用户获取信息的舒适感。
参阅图29,图29是本申请提供的电子设备一实施例的结构示意图。该电子设备290包括处理器291以及与处理器291耦接的存储器292;其中,存储器292用于存储程序数据,处理器291用于执行程序数据,以实现以下方法:
获取菜单信息和指标信息;基于菜单信息生成菜单显示界面,以及基于指标信息生成指标显示界面;将菜单显示界面和指标显示界面进行融合,并将融合的第一显示界面显示于显示区域中的同一子显示区域。
可以理解,处理器291用于执行程序数据时,还可以实现上述任一实施例中描述的方法。
参阅图30,图30是本申请提供的计算机可读存储介质一实施例的结构示意图。该计算机可读存储介质300用于存储程序数据301,所述程序数据301在被处理器执行时,用于实现以下方法:
获取菜单信息和指标信息;基于菜单信息生成菜单显示界面,以及基于指标信息生成指标显示界面;将菜单显示界面和指标显示界面进行融合,并将融合的第一显示界面显示于显示区域中的同一子显示区域。
可以理解,程序数据301在被处理器执行时,还可以实现上述任一实施例中描述的方法。
在本申请所提供的几个实施方式中,应该理解到,所揭露的方法以及设备,可以通过其它的方式实现。例如,以上所描述的设备实施方式仅仅是示意性的,例如,所述模块或单元的划分,仅仅为一种逻辑功能划分,实际实现时可以有另外的划分方式,例如多个单元或组件可以结合或者可以集成到另一个系统,或一些特征可以忽略,或不执行。
所述作为分离部件说明的单元可以是或者也可以不是物理上分开的,作为单元显示的部件可以是或者也可以不是物理单元,即可以位于一个地方,或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施方式方案的目的。
另外,在本申请各个实施方式中的各功能单元可以集成在一个处理单元中,也可以是各个单元单独物理存在,也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现,也可以采用软件功能单元的形式实现。
上述其他实施方式中的集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时,可以存储在一个计算机可读取存储介质中。基于这样的理解,本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来,该计算机软件产品存储在一个存储介质中,包括若干指令用以使得一台计算机设备(可以是个人计算机,服务器,或者网络设备等)或处理器(processor)执行本申请各个实施方式所述方法的全部或部分步骤。而前述的存储介质包括:U盘、移动硬盘、只读存储器(ROM,Read-Only Memory)、随机存取存储器(RAM,RandomAccess Memory)、磁碟或者光盘等各种可以存储程序代码的介质。
以上所述仅为本申请的实施方式,并非因此限制本申请的专利范围,凡是利用本申请说明书及附图内容所作的等效结构或等效流程变换,或直接或间接运用在其他相关的技术领域,均同理包括在本申请的专利保护范围内。
Claims (9)
1.一种显示界面的信息显示方法,其特征在于,所述方法包括:
获取菜单信息和指标信息,其中,所述菜单信息包括第一信息和第二信息,所述第二信息为所述第一信息的从属信息;
基于所述第一信息生成菜单显示界面,以及基于所述指标信息生成指标显示界面;
将所述菜单显示界面和所述指标显示界面进行融合,并将融合的第一显示界面显示于显示区域中的同一子显示区域;
其中,在所述菜单显示界面接收到基于所述第一信息的第一触发指令时,开启第一悬浮窗口,并在所述第一悬浮窗口中显示所述第二信息;在所述第一悬浮窗口接收到基于所述第二信息的第二触发指令时,将所述第二信息的详细内容显示于所述显示区域中的另一子显示区域,或者开启第二显示界面,并在所述第二显示界面中展示所述第二信息的详细内容。
2.根据权利要求1所述的方法,其特征在于,
所述将所述菜单显示界面和所述指标显示界面进行融合,并将融合的第一显示界面显示于显示区域中的同一子显示区域,包括:
获取预设融合模板;
将所述菜单显示界面和所述指标显示界面按照所述预设融合模板进行融合,并将融合的所述第一显示界面显示于显示区域中的同一子显示区域。
3.根据权利要求1所述的方法,其特征在于,
所述方法还包括:
在所述菜单显示界面或所述指标显示界面接收到拖动指令时,基于所述拖动指令将所述菜单显示界面或所述指标显示界面移动至第一区域;
控制所述第一区域中的显示内容基于所述菜单显示界面或所述指标显示界面进行移动,以使所述第一区域用于显示所述菜单显示界面或所述指标显示界面。
4.根据权利要求1所述的方法,其特征在于,
所述方法还包括:
在所述菜单显示界面或所述指标显示界面接收到第三触发指令时,开启第二悬浮窗口,并在所述第二悬浮窗口中展示多个显示样式;
响应于多个显示样式中的目标显示样式被选择,关闭所述悬浮窗口,并将所述菜单显示界面或所述指标显示界面的当前显示样式设置为所述目标显示样式。
5.根据权利要求1所述的方法,其特征在于,
所述方法还包括:
在所述指标显示界面接收到第四触发指令时,开启第三悬浮窗口,并在所述第三悬浮窗口中展示多个指标信息;
响应于多个指标信息中的至少一个指标信息被选择,关闭所述悬浮窗口,并在所述指标显示界面显示所述至少一个指标信息。
6.根据权利要求5所述的方法,其特征在于,
所述方法还包括:
在所述指标显示界面接收到基于所述至少一个指标信息的第五触发指令时,将所述指标信息的详细内容显示于所述显示区域中的另一子显示区域,或者开启第三显示界面,并在所述第三显示界面中展示所述指标信息的详细内容。
7.根据权利要求1所述的方法,其特征在于,
所述方法还包括:
在所述菜单显示界面或所述指标显示界面接收到缩放指令时,将所述菜单显示界面或所述指标显示界面缩放至与所述缩放指令相对应的大小;
控制所述菜单显示界面中的菜单信息或所述指标显示界面中的指标信息进行缩放,以使所述菜单信息适应所述菜单显示界面的当前大小或所述指标信息适应所述指标显示界面的当前大小。
8.一种电子设备,其特征在于,所述电子设备包括处理器以及与处理器耦接的存储器;
其中,所述存储器用于存储程序数据,所述处理器用于执行所述程序数据,以实现如权利要求1至7任一项所述的方法。
9.一种计算机可读存储介质,其特征在于,所述计算机可读存储介质用于存储程序数据,所述程序数据在被处理器执行时,用于实现如权利要求1-7任一项所述的方法。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202110373704.3A CN113076160B (zh) | 2021-04-07 | 2021-04-07 | 显示界面的信息显示方法及相关装置 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202110373704.3A CN113076160B (zh) | 2021-04-07 | 2021-04-07 | 显示界面的信息显示方法及相关装置 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN113076160A CN113076160A (zh) | 2021-07-06 |
CN113076160B true CN113076160B (zh) | 2024-01-12 |
Family
ID=76615623
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202110373704.3A Active CN113076160B (zh) | 2021-04-07 | 2021-04-07 | 显示界面的信息显示方法及相关装置 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN113076160B (zh) |
Families Citing this family (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN114003156B (zh) * | 2021-10-14 | 2024-07-09 | 深圳Tcl新技术有限公司 | 显示方法、装置、存储介质及电子设备 |
Citations (7)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
JP2002175141A (ja) * | 2000-12-08 | 2002-06-21 | Tech Res & Dev Inst Of Japan Def Agency | 複数情報統合表示処理方法 |
JP2011227540A (ja) * | 2010-04-15 | 2011-11-10 | Sharp Corp | 表示装置 |
CN105579949A (zh) * | 2013-07-11 | 2016-05-11 | 三星电子株式会社 | 用于显示内容的用户终端设备及其方法 |
CN105930043A (zh) * | 2016-04-15 | 2016-09-07 | 苏州佳世达电通有限公司 | 一种消息显示方法及电子设备 |
CN110633035A (zh) * | 2019-09-25 | 2019-12-31 | 深圳市闪联信息技术有限公司 | 一种动态悬浮菜单的实现方法和装置 |
CN111309413A (zh) * | 2019-08-28 | 2020-06-19 | 拉扎斯网络科技(上海)有限公司 | 界面的显示方法、装置、电子设备及存储介质 |
CN112099680A (zh) * | 2020-09-01 | 2020-12-18 | 维沃移动通信有限公司 | 用户界面调整方法、装置和电子设备 |
Family Cites Families (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
KR20130107974A (ko) * | 2012-03-23 | 2013-10-02 | 삼성전자주식회사 | 플로팅 사용자 인터페이스 제공 장치 및 방법 |
-
2021
- 2021-04-07 CN CN202110373704.3A patent/CN113076160B/zh active Active
Patent Citations (7)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
JP2002175141A (ja) * | 2000-12-08 | 2002-06-21 | Tech Res & Dev Inst Of Japan Def Agency | 複数情報統合表示処理方法 |
JP2011227540A (ja) * | 2010-04-15 | 2011-11-10 | Sharp Corp | 表示装置 |
CN105579949A (zh) * | 2013-07-11 | 2016-05-11 | 三星电子株式会社 | 用于显示内容的用户终端设备及其方法 |
CN105930043A (zh) * | 2016-04-15 | 2016-09-07 | 苏州佳世达电通有限公司 | 一种消息显示方法及电子设备 |
CN111309413A (zh) * | 2019-08-28 | 2020-06-19 | 拉扎斯网络科技(上海)有限公司 | 界面的显示方法、装置、电子设备及存储介质 |
CN110633035A (zh) * | 2019-09-25 | 2019-12-31 | 深圳市闪联信息技术有限公司 | 一种动态悬浮菜单的实现方法和装置 |
CN112099680A (zh) * | 2020-09-01 | 2020-12-18 | 维沃移动通信有限公司 | 用户界面调整方法、装置和电子设备 |
Also Published As
Publication number | Publication date |
---|---|
CN113076160A (zh) | 2021-07-06 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
US9874995B2 (en) | Maintaining context for maximize interactions on grid-based visualizations | |
US10261659B2 (en) | Orbit visualization for displaying hierarchical data | |
US10175854B2 (en) | Interaction in chain visualization | |
JP2022534214A (ja) | 階層流動コンポーネントおよび動的レイアウトを統合した応答編集および表示を提供するシステムおよび方法 | |
Matejka et al. | Patina: Dynamic heatmaps for visualizing application usage | |
US20170323464A1 (en) | Graph Expansion Mini-View | |
US20100037168A1 (en) | Systems and methods for webpage design | |
US20140359489A1 (en) | Web browser history | |
US9910835B2 (en) | User interface for creation of content works | |
KR20120139716A (ko) | 공유가능한 사용자 인터페이스를 이용해 정보를 구성하는 방법 및 시스템 | |
US10467782B2 (en) | Interactive hierarchical bar chart | |
CN113076160B (zh) | 显示界面的信息显示方法及相关装置 | |
US10204094B2 (en) | Inserting new elements in a tabular data structure | |
US10216363B2 (en) | Navigating a network of options | |
US10809904B2 (en) | Interactive time range selector | |
US10175856B2 (en) | Drawer for displaying hierarchical data | |
Shah | Supporting location learning in a spatial app launcher | |
Munro et al. | Introducing Layout Mode | |
US8595260B1 (en) | Alternating between data-driven and metadata-driven view for dataflow design | |
Freeman | Using the ListView Control | |
Wright et al. | Editing Pages |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
GR01 | Patent grant | ||
GR01 | Patent grant |