CN111240669B - 界面生成方法、装置、电子设备及计算机存储介质 - Google Patents

界面生成方法、装置、电子设备及计算机存储介质 Download PDF

Info

Publication number
CN111240669B
CN111240669B CN201811434902.0A CN201811434902A CN111240669B CN 111240669 B CN111240669 B CN 111240669B CN 201811434902 A CN201811434902 A CN 201811434902A CN 111240669 B CN111240669 B CN 111240669B
Authority
CN
China
Prior art keywords
component
display
content data
information
interface
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
Application number
CN201811434902.0A
Other languages
English (en)
Other versions
CN111240669A (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.)
Alibaba Group Holding Ltd
Original Assignee
Alibaba Group Holding 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 Alibaba Group Holding Ltd filed Critical Alibaba Group Holding Ltd
Priority to CN201811434902.0A priority Critical patent/CN111240669B/zh
Publication of CN111240669A publication Critical patent/CN111240669A/zh
Application granted granted Critical
Publication of CN111240669B publication Critical patent/CN111240669B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/38Creation or generation of source code for implementing user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本发明实施例提供了一种界面生成方法、装置、电子设备及计算机存储介质,其中,所述界面生成方法包括:对待展示的内容数据进行数据分析,根据分析结果确定与所述内容数据相匹配的展示组件和所述展示组件在待生成的界面中的布局信息;根据所述内容数据,对所述展示组件中相对应的属性信息进行设置;将设置结果和所述布局信息发送给浏览器,通过浏览器动态渲染所述展示组件以生成展示界面。该界面生成方法可以提升展示效率。

Description

界面生成方法、装置、电子设备及计算机存储介质
技术领域
本发明实施例涉及计算机技术领域,尤其涉及一种界面生成方法、装置、电子设备及计算机存储介质。
背景技术
随着AI(Artificial Intelligence,人工智能)技术的飞速发展,采用AI技术的应用也越来越多,其中一种典型的应用就是对话式智能问答应用。对话式智能问答应用通过模拟人类对话的方式实现人机对话交互,并通过在UI(User Interface,用户界面)中展示对话卡片的方式将对话内容加以展示。
现有的对话式智能问答应用的UI开发过程中,UI布局、展示样式的迭代频繁,每次迭代时都要进行大量重复、相似的对话交互卡片的开发工作,以及需要频繁的修改展示样式逻辑,增加了代码复杂度和代码量。此外,每次迭代完成后,通过UI进行展示时需要十分复杂的数据处理过程,且只能以预设好的样式对内容进行展示,造成展示效率低,运行负载大,而且显示样式单一的问题。
发明内容
有鉴于此,本发明实施例提供一种界面生成方法、装置、电子设备及计算机存储介质,以解决上述问题。
根据本发明实施例的第一方面,提供了一种界面生成方法,包括:对待展示的内容数据进行数据分析,根据分析结果确定与所述内容数据相匹配的展示组件和所述展示组件在待生成的界面中的布局信息;根据所述内容数据,对所述展示组件中相对应的属性信息进行设置;将设置结果和所述布局信息发送给浏览器,通过浏览器动态渲染所述展示组件以生成展示界面。
根据本发明实施例的第二方面,提供了一种界面生成装置,包括:数据分析模块,用于对待展示的内容数据进行数据分析,根据分析结果确定与所述内容数据相匹配的展示组件和所述展示组件在待生成的界面中的布局信息;组件设置模块,用于根据所述内容数据,对所述展示组件中相对应的属性信息进行设置;界面生成模块,用于将设置结果和所述布局信息发送给浏览器,通过浏览器动态渲染所述展示组件以生成展示界面。
根据本发明实施例的第三方面,提供了一种电子设备,包括:处理器、存储器、通信接口和通信总线,所述处理器、所述存储器和所述通信接口通过所述通信总线完成相互间的通信;所述存储器用于存放至少一可执行指令,所述可执行指令使所述处理器执行如第一方面所述的界面生成方法对应的操作。
根据本发明实施例的第四方面,提供了一种计算机存储介质,其上存储有计算机程序,该程序被处理器执行时实现如第一方面所述的界面生成方法。
由以上技术方案可见,本发明实施例提供的界面生成方案,通过对待展示的内容数据进行数据分析,根据分析结果确定与内容数据相匹配的展示组件和布局信息,并根据内容数据对展示组件中的属性信息进行设置,根据设置结果和布局信息进行动态渲染生成展示界面,使得展示界面中的展示组件的布局、展示组件中展示的内容均根据内容数据确定,该展示界面中的布局可以自动根据内容数据的变化而变化,提升了展示界面的多样性和展示效率,且无需进行频繁的开发和更改,使展示界面的生成更加方便。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案,下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本发明实施例中记载的一些实施例,对于本领域普通技术人员来讲,还可以根据这些附图获得其他的附图。
图1为根据本发明实施例一的一种界面生成方法的步骤流程图;
图2为根据本发明实施例二的一种界面生成方法的步骤流程图;
图3为图2所示实施例中的一种展示模板的示意图;
图4为根据本发明实施例三的一种界面生成装置的结构框图;
图5为根据本发明实施例四的一种界面生成装置的结构框图;
图6为根据本发明实施例五的一种电子设备的结构示意图。
具体实施方式
为了使本领域的人员更好地理解本发明实施例中的技术方案,下面将结合本发明实施例中的附图,对本发明实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅是本发明实施例一部分实施例,而不是全部的实施例。基于本发明实施例中的实施例,本领域普通技术人员所获得的所有其他实施例,都应当属于本发明实施例保护的范围。
下面结合本发明实施例附图进一步说明本发明实施例具体实现。
实施例一
参照图1,示出了根据本发明实施例一的一种界面生成方法的步骤流程图。
本实施例的界面生成方法包括以下步骤:
步骤S102:对待展示的内容数据进行数据分析,根据分析结果确定与所述内容数据相匹配的展示组件和所述展示组件在待生成的界面中的布局信息。
本实施例中,以生成智能问答应用中的对话界面为例,对界面生成方法进行说明,但本领域技术人员应当明了的是,该界面生成方法可以应用于其他任何适当的场景,并不限于本实施例中说明的场景。
在用户使用智能问答应用进行AI智能对话的过程中,用户通过展示界面输入搜索关键词(搜索关键词可以是文本类的关键词,如:北京、好看的电影等,也可以是图像类的关键词,如包含人物或建筑等的照片,或者可以是音频类的关键词,如用户录制的语音),智能问答应用根据该搜索关键词执行相应的操作,如根据搜索关键词进行搜索,或将搜索关键词转发给其他数据处理方,以根据操作结果生成用于响应该搜索关键词的结果数据(如北京的信息、电影的信息等),再通过展示界面展示用户输入的搜索关键词和/或响应搜索关键词生成的结果数据,完成AI智能对话。
其中,待展示的内容数据可以包括用户输入的搜索关键词和/或为响应用户输入的搜索关键词生成的结果数据。在本实施例中,以待展示的内容数据为响应搜索关键词生成的结果数据为例进行说明。
对待展示的内容数据进行数据分析包括但不限于统一属性名称、数据过滤和类别分析等。其中,统一属性名称是指将获取的待展示的内容数据中指示同一属性,但属性名称不同的多个属性名称转换为统一的属性名称。数据过滤是指根据过滤规则对内容数据进行过滤处理,以减少生成展示界面时无需使用的冗余数据,提升数据处理效率,降低数据处理负担。类别分析是指对内容数据进行分析,以确定内容数据所属的类别,根据所属的类别确定对应的展示组件,并以对应的布局方式进行展示,这样对于不同的待展示的内容数据,可以采用不同的方式进行展示,使得适应性更好,展示方式更加灵活,而且可以根据需要方便地改变展示方式。内容数据所属的类别可以由本领域技术人员根据实际需求适当设置,例如,设置为:城市、人物、电影、电视、小说等。
展示组件用于渲染在展示界面上,以展示内容数据中的信息或实现交互功能。其可以是预先设置的展示组件。展示组件可以采用不同的定义方式进行定义,例如,根据是否可以嵌套其他展示组件,可以将展示组件分为容器类组件和元素类组件,其中,容器类组件可以嵌套其他展示组件(如嵌套其他容器类组件和/或元素类组件)。元素类组件主要用于展示内容数据中的内容单元(如标题、主体、更多链接等)和/或用于展示内容数据对应的交互设置(如点赞按钮、星级评论按钮等)。
进一步地,根据展示布局方式的不同,容器类组件可以分为横向滚动容器组件、纵向滚动容器组件、以及栅格布局容器组件。横向滚动容器组件中的多个内容可以沿横向依次布置,且可以根据用户的操作横向切换显示的内容。纵向滚动容器组件又可称为列表容器组件,其中的多个内容可以沿纵向依次布置,且可以根据用户的操作纵向切换显示的内容。栅格布局容器组件例如九宫格容器组件,其中的内容可以沿横向和纵向两个方向布置。
根据展示的内容不同,元素类组件可以分为标题元素组件、按钮元素组件、图像元素组件、评论元素组件、文本元素组件、富文本元素组件等。
布局信息用于指示各个展示组件在展示界面中的位置,和/或指示各展示组件间的位置关系,以使渲染后的展示界面较为美观,更便于用户操作。
步骤S104:根据所述内容数据,对所述展示组件中相对应的属性信息进行设置。
所述属性信息用于指示以下属性至少之一:用于指示展示组件的组件名的标识属性、用于指示展示组件中内容的内容属性、用于指示展示组件尺寸的尺寸属性等。其中,根据需要的不同,内容属性中可以包括不同的下级属性,用于指示内容的不同格式,如文本属性、图像属性、链接属性、音频属性和视频属性等。
在根据内容数据对展示组件中相对应的属性信息进行设置时,可以根据内容数据中的属性名称所指示的属性确定展示组件中指示对应属性的属性信息,从而根据该属性名称对应的属性内容设置对应的属性信息中的属性值。
例如,内容数据中的属性名称为title,用于指示标题属性,属性内容为“北京”,则将相匹配的展示组件中指示标题属性的属性信息的属性值设置为“北京”。
步骤S106:将设置结果和所述布局信息发送给浏览器,通过浏览器动态渲染所述展示组件以生成展示界面。
将设置结果和布局信息发送给浏览器,浏览器根据布局信息的指示,在对应位置动态渲染设置结果中指示的设置后的展示组件,以生成展示界面。
根据本实施例的界面生成方法,通过对待展示的内容数据进行数据分析,根据分析结果确定与内容数据相匹配的展示组件和布局信息,并根据内容数据对展示组件中的属性信息进行设置,根据设置结果和布局信息进行动态渲染生成展示界面,使得展示界面中的展示组件的布局、展示组件中展示的内容均根据内容数据确定,该展示界面中的布局可以自动根据内容数据的变化而变化,提升了展示界面的多样性和展示效率,且无需进行频繁的开发和更改,使展示界面的生成更加方便。
本实施例的界面生成方法可以由任意适当的具有数据处理能力的终端设备执行,包括但不限于:服务器和/或移动终端,如平板电脑、手机,以及台式机等。
实施例二
参照图2,示出了根据本发明实施例二的一种界面生成方法的步骤流程图。
本实施例的界面生成方法包括以下步骤:
步骤S202:对待展示的内容数据进行数据分析,根据分析结果确定所述内容数据所属的类别。
在本实施例中,以该界面生成方法应用到智能问答应用中为例进行说明。在其他实施例中,该界面生成方法可以应用到任何适宜的场景,本实施例对此不作限定。
此外,在本实施例中,以待展示的内容数据包括智能问答应用响应用户输入的搜索关键词而生成的结果数据为例进行说明。
在智能问答应用中,不同的对话场景中生成的待展示的内容数据也不同,为了确保针对任何内容数据均能够实现较好的展示效果,可以对内容数据进行分类,根据内容数据的类别确定适合的展示方式进行展示,以使用户能够更加方便地查看和/或操作展示的内容。
可选地,一种可行的所述对待展示的内容数据进行数据分析,并根据分析结果确定所述内容数据所属的类别的方式,包括:从所述内容数据中提取关键词;根据提取的关键词和预设的分类规则,确定所述内容数据所属的类别。
其中,从内容数据中提取关键词的方式可以是任意适当的方式,如通过自然语言处理的方式,具体如通过分词、去除停用词、执行textrank算法的方式从内容数据中提取关键词;也可以利用训练完成的神经网络模型直接从内容数据中提取关键词,或者通过其他适当的方式提取关键词。
预设的分类规则可以是预设的类别表,在类别表中存储有关键词与类别的映射关系,通过查找预设的类别表确定内容数据所属的类别;也可以是预设的分类算法,如文本相似度算法,通过计算关键词与预设的类别间的文本相似度,确定内容数据所属的类别。
在另一种可行的确定内容数据所属类别的方式中,若内容数据具有类别属性,则可以直接对内容数据进行解析,从类别属性中提取出用于指示类别的属性内容,并据此确定内容数据所属的类别。
在本实施例中,在智能问答应用的场景中,预设的类别表中的类别包括但不限于城市、人物、电视、电影、游戏等。在其他使用场景中,预设的类别可以是其他任何适当的类别,例如,文学、自然科学、社会科学等。
此外,在对内容数据进行数据分析之前,为了便于数据分析,确保处理的准确性,还可以对内容数据进行一些预处理,如属性名称统一处理、数据过滤处理和数据格式转换处理等。其中,数据格式转换处理用于将不同数据类型和/或数据格式的内容数据转换为设定的统一的数据类型和/或数据格式。例如,将WAV类型的音频统一转换为MP3类型的音频。
步骤S204:确定与所述类别匹配的展示模板。
在本实施例中,为了确保展示效果,并能够较为快速地确定展示方式,在智能问答应用中预设了至少一个展示模板。各类别均对应有至少一个匹配的展示模板。例如,展示模板A与城市类别匹配,展示模板B与人物类别匹配等。
所述展示模板包括组件信息和组件位置信息,所述组件信息用于指示所述展示模板包含的展示组件,所述组件位置信息用于指示各个展示组件的位置关系。例如,通过指示展示组件的位置和/或嵌套关系的方式,指示各个展示组件的位置关系。
为了减少开发成本,提升展示界面的灵活性和多样性,在本实施例中,展示组件可以是预先开发完成的模块化的能够实现不同功能的展示组件。例如,所述展示组件包括至少一个元素类组件和/或至少一个容器类组件。为了便于控制展示界面的展示样式,在本实施例中,各个展示组件中均不包括位置信息,展示组件的位置信息根据后续传入的组件位置信息确定,以避免后续在展示界面中布局展示组件时,由于展示组件自身定义了位置导致的展示组件容易叠加的问题。
其中,每个所述元素类组件用于展示所述内容数据的一个内容单元(如展示内容数据中的标题、更多链接等)和/或展示所述内容数据对应的交互设置(如展示内容数据中的点赞功能、评论功能等)。
可选地,所述元素类组件包括下列至少之一:标题元素组件、按钮元素组件、图像元素组件、评论元素组件、文本元素组件、富文本元素组件。
标题元素组件可以用于展示标题(所述标题可以包括文本数据和/或图像数据)。
按钮元素组件用于接收用户操作,并执行对应的处理,按钮元素组件执行的具体处理可以根据内容数据确定。
图像元素组件用于展示图像。
评论元素组件用户接收用户的评论操作,并生成对应的包含用户倾向性意见的数据,如星级评论元素组件根据用户的评论操作,确定被评论对象的星级。
文本元素组件用于展示纯文本内容。
富文本元素组件可以用于展示文本和/或图像等富文本形式的内容。
每个所述容器类组件对应有一种组件展示方式,每个所述容器类组件用于使用对应的组件展示方式展示当前容器类组件中包含的所述元素类组件和/或下级的容器类组件。例如,所述容器类组件包括下列至少之一:横向滚动容器组件、纵向滚动容器组件、栅格布局容器组件。
横向滚动容器组件内的元素(该元素可以是元素类组件也可以是下一级容器类组件)横向排列展示,且元素可以根据用户的操作进行横向移动。纵向滚动容器组件(例如,列表组件)内展示的元素(该元素可以是元素类组件也可以是下一级容器类组件)纵向排列展示,且元素可以根据用户的操作进行纵向移动。栅格布局容器组件内的元素在横向和纵向两个方向上排列展示。
一种可行的展示模板如图3所示,展示模板A中的组件信息指示包括4个展示组件,分别为展示标题的标题元素组件、展示图像的图像元素组件、展示文本的文本元素组件和容纳其他展示组件的纵向滚动容器组件。展示模板A中的组件位置信息用于指示标题元素组件、图像元素组件和文本元素组件这3个组件嵌套在纵向滚动容器组件中,且前述3个组件沿纵向依次排列。组件位置信息还可以指示相邻两个展示组件间的间距,和/或指示前述3个组件与纵向滚动容器组件间的间距。
上述展示组件通过展示界面渲染展示,以展示相应的数据或实现交互功能。
步骤S206:根据所述组件信息,确定与所述内容数据相匹配的展示组件;根据所述组件位置信息,确定相匹配的所述展示组件在待生成的界面中的布局信息。
其中,所述布局信息包括以下至少之一:用于指示所述展示组件的展示位置的位置信息、用于指示所述展示组件间的嵌套关系的嵌套信息。其中,位置信息可以是某一展示组件的定位点坐标,也可以是两个展示组件的定位边间的间距等。在本实施例中,相匹配的所述展示组件在待生成的界面中的布局信息根据组件位置信息确定。
通过以上步骤S202~步骤S206的执行,实现了对待展示的内容数据进行数据分析,根据分析结果确定与所述内容数据相匹配的展示组件和所述展示组件在待生成的界面中的布局信息的功能。
但不限于此,在确定与内容数据相匹配的展示组件时,除了可以根据匹配的展示模板中的组件信息所指示的展示组件确定相匹配的展示组件外,还可以根据内容数据中的属性名确定相匹配的展示组件,如当内容数据包括属性名为标题的内容时,则可以确定相匹配的展示组件包括用于展示标题的标题元素组件。
步骤S208:根据所述内容数据,对所述展示组件中相对应的属性信息进行设置。
在一种可行方式中,根据所述内容数据,对所述展示组件中相对应的属性信息进行设置,包括:根据所述内容数据中的标识信息,确定所述展示组件中与所述内容数据对应的属性信息;将对应的所述属性信息的属性值,设置为所述内容数据中所述标识信息对应的内容。
其中,标识信息可以是内容数据中的属性名。例如,若内容数据中属性名为标题,则先确定对应的标题元素组件的属性信息,如,标题内容属性,并将该标题内容属性的属性值设置为内容数据中该属性名对应的属性内容,例如,内容数据中“标题”属性的属性内容为“北京”,则可以将标题元素组件中的标题内容属性的属性值设置为“北京”。
当然,不同的内容数据的标识信息可以不同,本实施例对此不作限定。
步骤S210:将设置结果和所述布局信息发送给浏览器,通过浏览器动态渲染所述展示组件以生成展示界面。
在本实施例中,浏览器可以动态渲染展示组件以生成展示界面。在进行动态渲染时,展示界面在渲染的过程中执行分析内容数据的过程,根据内容数据的分析结果动态拼接和渲染展示组件,生成展示界面。
一种可行方式中,将根据设置结果和所述布局信息发送给浏览器,通过浏览器动态渲染所述展示组件以生成展示界面,包括:根据所述设置结果和所述布局信息,生成渲染参数;将渲染参数发送给浏览器,使浏览器根据所述渲染参数动态渲染所述展示组件,以生成展示界面。其中,渲染参数中包括设置后的展示组件的信息、以及展示组件间的位置关系。
一种可行方式中,渲染参数中通过各展示组件的定位点坐标信息指示各展示组件的位置。各展示组件的定位点坐标信息(如展示组件的左上角顶点的top值和left值)根据设置结果中各展示组件的尺寸属性的属性值和布局信息中的位置信息和嵌套信息计算确定。该定位点坐标的信息用于指示展示组件在其所属的容器组件中的位置,top值指示其与容器组件的上边界的距离,left值指示其与容器组件的左边界的距离。
需要说明的是,前述的步骤S202~步骤S208、以及将设置结果和布局信息发送给浏览器的步骤可以由浏览器所在的本地电子设备如本地服务器执行,在服务器端的浏览器实现渲染展示;也可以由服务器将设置结果和布局信息发送给客户端的浏览器,由客户端的浏览器动态渲染生成展示界面。
可见,根据本实施例的界面生成方法,通过对待展示的内容数据进行数据分析,根据分析结果确定与内容数据相匹配的展示组件和布局信息,并根据内容数据对展示组件中的属性信息进行设置,根据设置结果和布局信息进行动态渲染生成展示界面,使得展示界面中的展示组件的布局、展示组件中展示的内容均根据内容数据确定,该展示界面中的布局可以自动根据内容数据的变化而变化,提升了展示界面的多样性和展示效率,且无需进行频繁的开发和更改,使展示界面的生成更加方便。
此外,该界面生成方法中的展示组件可以是预先开发完成的通用的展示组件。在生成展示界面时,只需要根据渲染参数进行展示组件的拼接和嵌套即可,进行展示界面的展示样式更改时只需要调整渲染参数中的布局信息即可更改,避免了现有技术中每次修改展示样式都需要重新编写代码的问题,简化了展示样式修改过程和开发成本。而且,由于展示组件自身未定义位置信息,避免了展示组件布局时容易产生展示组件叠加的问题。
综上所述,本实施例的界面生成方法将展示界面中的内容原子化,拆分成各种各样通用的展示组件,然后根据获取的不同的内容数据,确定不同的展示组件,并通过展示组件的拼接组合与嵌套,生成所需要的展示界面样式,既提升了展示界面的多样性,又使得展示界面样式更改更加简单方便,降低了开发成本。把现有技术中大量重复的相似的界面开发,转换为功能独立可复用的展示组件开发,减少了很多不必要的开发工作量。
另外,该界面生成方法可以在后端(如提供内容数据的设备)和前端(如实现卡片渲染的浏览器)之间执行,主要负责针对内容数据的数据处理和展示界面拼接组合与嵌套。这样当需要进行展示界面样式更新时,直接通过更改展示组件的组合方式即可完成,而且展示组件的组合可以通过内容数据来控制,使得更新和迭代更加方便快速,增加了产品迭代的灵活性。
针对不同的应用产品,只需要提供不同的内容数据和展示模板就可以生成不同的展示界面,适用性更好。
本实施例的界面生成方法可以由任意适当的具有数据处理能力的终端设备执行,包括但不限于:服务器和/或移动终端,如平板电脑、手机,以及台式机等。
实施例三
参照图4,示出了根据本发明实施例三的一种界面生成装置的结构框图。
如图4所示,界面生成装置包括:数据分析模块402,用于对待展示的内容数据进行数据分析,根据分析结果确定与所述内容数据相匹配的展示组件和所述展示组件在待生成的界面中的布局信息;组件设置模块404,用于根据所述内容数据,对所述展示组件中相对应的属性信息进行设置;界面生成模块406,用于将设置结果和所述布局信息发送给浏览器,通过浏览器动态渲染所述展示组件以生成展示界面。
本实施例的界面生成装置,通过对待展示的内容数据进行数据分析,根据分析结果确定与内容数据相匹配的展示组件和布局信息,并根据内容数据对展示组件中的属性信息进行设置,根据设置结果和布局信息进行动态渲染生成展示界面,使得展示界面中的展示组件的布局、展示组件中展示的内容均根据内容数据确定,该展示界面中的布局可以自动根据内容数据的变化而变化,提升了展示界面的多样性和展示效率,且无需进行频繁的开发和更改,使展示界面的生成更加方便。
实施例四
参照图5,示出了根据本发明实施例四的一种界面生成装置的结构框图。
如图5所示,界面生成装置包括:数据分析模块502,用于对待展示的内容数据进行数据分析,根据分析结果确定与所述内容数据相匹配的展示组件和所述展示组件在待生成的界面中的布局信息;组件设置模块504,用于根据所述内容数据,对所述展示组件中相对应的属性信息进行设置;界面生成模块506,用于将设置结果和所述布局信息发送给浏览器,通过浏览器动态渲染所述展示组件以生成展示界面。
可选地,所述数据分析模块502包括:类别确定模块5021,用于对待展示的内容数据进行数据分析,根据分析结果确定所述内容数据所属的类别;模板确定模块5022,用于确定与所述类别匹配的展示模板,其中,所述展示模板包括组件信息和组件位置信息,所述组件信息用于指示所述展示模板包含的展示组件,所述组件位置信息用于指示各个展示组件的位置关系;组件与布局确定模块5023,用于根据所述组件信息,确定与所述内容数据相匹配的展示组件;根据所述组件位置信息,确定相匹配的所述展示组件在待生成的界面中的布局信息。
可选地,所述类别确定模块5021包括:提取模块5021a,用于从所述内容数据中提取关键词;分类模块5021b,用于根据提取的关键词和预设的分类规则,确定所述内容数据所属的类别。
可选地,所述展示组件包括至少一个元素类组件和/或至少一个容器类组件,每个所述元素类组件用于展示所述内容数据的一个内容单元和/或展示所述内容数据对应的交互设置;每个所述容器类组件对应有一种组件展示方式,每个所述容器类组件用于使用对应的组件展示方式展示当前容器类组件中包含的所述元素类组件和/或下级的容器类组件。
可选地,所述容器类组件包括下列至少之一:横向滚动容器组件、纵向滚动容器组件、栅格布局容器组件;和/或,所述元素类组件包括下列至少之一:标题元素组件、按钮元素组件、图像元素组件、评论元素组件、文本元素组件、富文本元素组件。
可选地,所述组件设置模块504包括:属性确定模块5041,用于根据所述内容数据中的标识信息,确定所述展示组件中与所述内容数据对应的属性信息;属性设置模块5042,用于将对应的所述属性信息的属性值,设置为所述内容数据中所述标识信息对应的内容。
可选地,所述布局信息包括以下至少之一:用于指示所述展示组件的展示位置的位置信息、用于指示所述展示组件间的嵌套关系的嵌套信息。
可选地,所述界面生成模块506包括:参数生成模块5061,用于根据所述设置结果和所述布局信息,生成渲染参数;界面展示模块5062,用于将所述渲染参数发送给浏览器,使浏览器根据所述渲染参数动态渲染所述展示组件,以生成展示界面。
根据本实施例的界面生成装置,通过对待展示的内容数据进行数据分析,根据分析结果确定与内容数据相匹配的展示组件和布局信息,并根据内容数据对展示组件中的属性信息进行设置,根据设置结果和布局信息进行动态渲染生成展示界面,使得展示界面中的展示组件的布局、展示组件中展示的内容均根据内容数据确定,该展示界面中的布局可以自动根据内容数据的变化而变化,提升了展示界面的多样性和展示效率,且无需进行频繁的开发和更改,使展示界面的生成更加方便。
实施例五
参照图6,示出了根据本发明实施例五的一种电子设备的结构示意图。本发明具体实施例并不对电子设备的具体实现做限定。
如图6所示,该电子设备可以包括:处理器(processor)602、通信接口(Communications Interface)604、存储器(memory)606、以及通信总线608。
其中:
处理器602、通信接口604、以及存储器606通过通信总线608完成相互间的通信。
通信接口604,用于与其它电子设备进行通信。
处理器602,用于执行程序610,具体可以执行上述界面生成方法实施例中的相关步骤。
具体地,程序610可以包括程序代码,该程序代码包括计算机操作指令。
处理器602可能是中央处理器CPU,或者是特定集成电路ASIC(ApplicationSpecific Integrated Circuit),或者是被配置成实施本发明实施例的一个或多个集成电路。电子设备包括的一个或多个处理器,可以是同一类型的处理器,如一个或多个CPU;也可以是不同类型的处理器,如一个或多个CPU以及一个或多个ASIC。
存储器606,用于存放程序610。存储器606可能包含高速RAM存储器,也可能还包括非易失性存储器(non-volatile memory),例如至少一个磁盘存储器。
程序610具体可以用于使得处理器602执行以下操作:对待展示的内容数据进行数据分析,根据分析结果确定与所述内容数据相匹配的展示组件和所述展示组件在待生成的界面中的布局信息;根据所述内容数据,对所述展示组件中相对应的属性信息进行设置;将设置结果和所述布局信息发送给浏览器,通过浏览器动态渲染所述展示组件以生成展示界面。
在一种可选的实施方式中,程序610还用于使得处理器602在所述对待展示的内容数据进行数据分析,根据分析结果确定与所述内容数据相匹配的展示组件和所述展示组件在待生成的界面中的布局信息时,对待展示的内容数据进行数据分析,根据分析结果确定所述内容数据所属的类别;确定与所述类别匹配的展示模板,其中,所述展示模板包括组件信息和组件位置信息,所述组件信息用于指示所述展示模板包含的展示组件,所述组件位置信息用于指示各个展示组件的位置关系;根据所述组件信息,确定与所述内容数据相匹配的展示组件;根据所述组件位置信息,确定相匹配的所述展示组件在待生成的界面中的布局信息。
在一种可选的实施方式中,程序610还用于使得处理器602在所述对待展示的内容数据进行数据分析,并根据分析结果确定所述内容数据所属的类别时,从所述内容数据中提取关键词;根据提取的关键词和预设的分类规则,确定所述内容数据所属的类别。
在一种可选的实施方式中,所述展示组件包括至少一个元素类组件和/或至少一个容器类组件,每个所述元素类组件用于展示所述内容数据的一个内容单元和/或展示所述内容数据对应的交互设置;每个所述容器类组件对应有一种组件展示方式,每个所述容器类组件用于使用对应的组件展示方式展示当前容器类组件中包含的所述元素类组件和/或下级的容器类组件。
在一种可选的实施方式中,所述容器类组件包括下列至少之一:横向滚动容器组件、纵向滚动容器组件、栅格布局容器组件;和/或,所述元素类组件包括下列至少之一:标题元素组件、按钮元素组件、图像元素组件、评论元素组件、文本元素组件、富文本元素组件。
在一种可选的实施方式中,程序610还用于使得处理器602在所述根据所述内容数据,对所述展示组件中相对应的属性信息进行设置时,根据所述内容数据中的标识信息,确定所述展示组件中与所述内容数据对应的属性信息;将对应的所述属性信息的属性值,设置为所述内容数据中所述标识信息对应的内容。
在一种可选的实施方式中,所述布局信息包括以下至少之一:用于指示所述展示组件的展示位置的位置信息、用于指示所述展示组件间的嵌套关系的嵌套信息。
在一种可选的实施方式中,程序610还用于使得处理器602在将设置结果和所述布局信息发送给浏览器,通过浏览器动态渲染所述展示组件以生成展示界面时,根据所述设置结果和所述布局信息,生成渲染参数;将所述渲染参数发送给浏览器,使浏览器根据所述渲染参数动态渲染所述展示组件,以生成展示界面。
程序610中各步骤的具体实现可以参见上述界面生成方法实施例中的相应步骤和单元中对应的描述,在此不赘述。所属领域的技术人员可以清楚地了解到,为描述的方便和简洁,上述描述的设备和模块的具体工作过程,可以参考前述方法实施例中的对应过程描述,在此不再赘述。
通过本实施例的电子设备,通过对待展示的内容数据进行数据分析,根据分析结果确定与内容数据相匹配的展示组件和布局信息,并根据内容数据对展示组件中的属性信息进行设置,根据设置结果和布局信息进行动态渲染生成展示界面,使得展示界面中的展示组件的布局、展示组件中展示的内容均根据内容数据确定,该展示界面中的布局可以自动根据内容数据的变化而变化,提升了展示界面的多样性和展示效率,且无需进行频繁的开发和更改,使展示界面的生成更加方便。
需要指出,根据实施的需要,可将本发明实施例中描述的各个部件/步骤拆分为更多部件/步骤,也可将两个或多个部件/步骤或者部件/步骤的部分操作组合成新的部件/步骤,以实现本发明实施例的目的。
上述根据本发明实施例的方法可在硬件、固件中实现,或者被实现为可存储在记录介质(诸如CD ROM、RAM、软盘、硬盘或磁光盘)中的软件或计算机代码,或者被实现通过网络下载的原始存储在远程记录介质或非暂时机器可读介质中并将被存储在本地记录介质中的计算机代码,从而在此描述的方法可被存储在使用通用计算机、专用处理器或者可编程或专用硬件(诸如ASIC或FPGA)的记录介质上的这样的软件处理。可以理解,计算机、处理器、微处理器控制器或可编程硬件包括可存储或接收软件或计算机代码的存储组件(例如,RAM、ROM、闪存等),当所述软件或计算机代码被计算机、处理器或硬件访问且执行时,实现在此描述的界面生成方法。此外,当通用计算机访问用于实现在此示出的界面生成方法的代码时,代码的执行将通用计算机转换为用于执行在此示出的界面生成方法的专用计算机。
本领域普通技术人员可以意识到,结合本文中所公开的实施例描述的各示例的单元及方法步骤,能够以电子硬件、或者计算机软件和电子硬件的结合来实现。这些功能究竟以硬件还是软件方式来执行,取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能,但是这种实现不应认为超出本发明实施例的范围。
以上实施方式仅用于说明本发明实施例,而并非对本发明实施例的限制,有关技术领域的普通技术人员,在不脱离本发明实施例的精神和范围的情况下,还可以做出各种变化和变型,因此所有等同的技术方案也属于本发明实施例的范畴,本发明实施例的专利保护范围应由权利要求限定。

Claims (16)

1.一种界面生成方法,其特征在于,包括:
对待展示的内容数据进行数据分析,根据分析结果确定所述内容数据所属的类别;
确定与所述类别匹配的展示模板,其中,所述展示模板包括组件信息和组件位置信息,所述组件信息用于指示所述展示模板包含的展示组件,所述组件位置信息用于指示各个展示组件的位置关系;
根据所述组件信息,确定与所述内容数据相匹配的展示组件;根据所述组件位置信息,确定相匹配的所述展示组件在待生成的界面中的布局信息;
根据所述内容数据,对所述展示组件中相对应的属性信息进行设置;
将设置结果和所述布局信息发送给浏览器,通过浏览器动态渲染所述展示组件以生成展示界面。
2.根据权利要求1所述的方法,其特征在于,所述对待展示的内容数据进行数据分析,并根据分析结果确定所述内容数据所属的类别,包括:
从所述内容数据中提取关键词;
根据提取的关键词和预设的分类规则,确定所述内容数据所属的类别。
3.根据权利要求1或2所述的方法,其特征在于,
所述展示组件包括至少一个元素类组件和/或至少一个容器类组件,每个所述元素类组件用于展示所述内容数据的一个内容单元和/或展示所述内容数据对应的交互设置;
每个所述容器类组件对应有一种组件展示方式,每个所述容器类组件用于使用对应的组件展示方式展示当前容器类组件中包含的所述元素类组件和/或下级的容器类组件。
4.根据权利要求3所述的方法,其特征在于,
所述容器类组件包括下列至少之一:横向滚动容器组件、纵向滚动容器组件、栅格布局容器组件;
和/或,
所述元素类组件包括下列至少之一:标题元素组件、按钮元素组件、图像元素组件、评论元素组件、文本元素组件、富文本元素组件。
5.根据权利要求1所述的方法,其特征在于,所述根据所述内容数据,对所述展示组件中相对应的属性信息进行设置,包括:
根据所述内容数据中的标识信息,确定所述展示组件中与所述内容数据对应的属性信息;
将对应的所述属性信息的属性值,设置为所述内容数据中所述标识信息对应的内容。
6.根据权利要求1所述的方法,其特征在于,所述布局信息包括以下至少之一:用于指示所述展示组件的展示位置的位置信息、用于指示所述展示组件间的嵌套关系的嵌套信息。
7.根据权利要求5或6所述的方法,其特征在于,将设置结果和所述布局信息发送给浏览器,通过浏览器动态渲染所述展示组件以生成展示界面,包括:
根据所述设置结果和所述布局信息,生成渲染参数;
将所述渲染参数发送给浏览器,使浏览器根据所述渲染参数动态渲染所述展示组件,以生成展示界面。
8.一种界面生成装置,其特征在于,包括:
数据分析模块,包括:
类别确定模块,用于对待展示的内容数据进行数据分析,根据分析结果确定所述内容数据所属的类别;
模板确定模块,用于确定与所述类别匹配的展示模板,其中,所述展示模板包括组件信息和组件位置信息,所述组件信息用于指示所述展示模板包含的展示组件,所述组件位置信息用于指示各个展示组件的位置关系;
组件与布局确定模块,用于根据所述组件信息,确定与所述内容数据相匹配的展示组件;根据所述组件位置信息,确定相匹配的所述展示组件在待生成的界面中的布局信息;
组件设置模块,用于根据所述内容数据,对所述展示组件中相对应的属性信息进行设置;
界面生成模块,用于将设置结果和所述布局信息发送给浏览器,通过浏览器动态渲染所述展示组件以生成展示界面。
9.根据权利要求8所述的装置,其特征在于,所述类别确定模块包括:
提取模块,用于从所述内容数据中提取关键词;
分类模块,用于根据提取的关键词和预设的分类规则,确定所述内容数据所属的类别。
10.根据权利要求8或9所述的装置,其特征在于,
所述展示组件包括至少一个元素类组件和/或至少一个容器类组件,每个所述元素类组件用于展示所述内容数据的一个内容单元和/或展示所述内容数据对应的交互设置;
每个所述容器类组件对应有一种组件展示方式,每个所述容器类组件用于使用对应的组件展示方式展示当前容器类组件中包含的所述元素类组件和/或下级的容器类组件。
11.根据权利要求10所述的装置,其特征在于,
所述容器类组件包括下列至少之一:横向滚动容器组件、纵向滚动容器组件、栅格布局容器组件;
和/或,
所述元素类组件包括下列至少之一:标题元素组件、按钮元素组件、图像元素组件、评论元素组件、文本元素组件、富文本元素组件。
12.根据权利要求8所述的装置,其特征在于,所述组件设置模块包括:
属性确定模块,用于根据所述内容数据中的标识信息,确定所述展示组件中与所述内容数据对应的属性信息;
属性设置模块,用于将对应的所述属性信息的属性值,设置为所述内容数据中所述标识信息对应的内容。
13.根据权利要求8所述的装置,其特征在于,所述布局信息包括以下至少之一:用于指示所述展示组件的展示位置的位置信息、用于指示所述展示组件间的嵌套关系的嵌套信息。
14.根据权利要求12或13所述的装置,其特征在于,所述界面生成模块包括:
参数生成模块,用于根据所述设置结果和所述布局信息,生成渲染参数;
界面展示模块,用于将所述渲染参数发送给浏览器,使浏览器根据所述渲染参数动态渲染所述展示组件,以生成展示界面。
15.一种电子设备,包括:处理器、存储器、通信接口和通信总线,所述处理器、所述存储器和所述通信接口通过所述通信总线完成相互间的通信;
所述存储器用于存放至少一可执行指令,所述可执行指令使所述处理器执行如权利要求1-7中任一项所述的界面生成方法对应的操作。
16.一种计算机存储介质,其上存储有计算机程序,该程序被处理器执行时实现如权利要求1-7中任一所述的界面生成方法。
CN201811434902.0A 2018-11-28 2018-11-28 界面生成方法、装置、电子设备及计算机存储介质 Active CN111240669B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201811434902.0A CN111240669B (zh) 2018-11-28 2018-11-28 界面生成方法、装置、电子设备及计算机存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201811434902.0A CN111240669B (zh) 2018-11-28 2018-11-28 界面生成方法、装置、电子设备及计算机存储介质

Publications (2)

Publication Number Publication Date
CN111240669A CN111240669A (zh) 2020-06-05
CN111240669B true CN111240669B (zh) 2024-04-12

Family

ID=70875714

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201811434902.0A Active CN111240669B (zh) 2018-11-28 2018-11-28 界面生成方法、装置、电子设备及计算机存储介质

Country Status (1)

Country Link
CN (1) CN111240669B (zh)

Families Citing this family (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111913708B (zh) * 2020-08-07 2024-02-27 广州虎牙科技有限公司 界面显示方法、装置、存储介质及电子设备
CN114077466A (zh) * 2020-08-12 2022-02-22 北京智邦国际软件技术有限公司 一种Web界面表单中多行多列字段自动布局算法
CN112395472A (zh) * 2020-11-16 2021-02-23 北京乐学帮网络技术有限公司 一种图像展示方法、装置、计算机设备和存储介质
CN113204657B (zh) * 2021-05-19 2024-02-06 广州九舞数字科技有限公司 一种集成组合式智能展示系统
CN114845154B (zh) * 2022-04-28 2023-05-09 四川虹魔方网络科技有限公司 媒资数据的快速适配方法

Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2012145561A1 (en) * 2011-04-19 2012-10-26 Qwiki, Inc. Systems and methods for assembling and/or displaying multimedia objects, modules or presentations
CN103051684A (zh) * 2012-12-07 2013-04-17 百度在线网络技术(北京)有限公司 将网站转化为Web App进行展示的方法、系统和装置
CN104978317A (zh) * 2014-04-02 2015-10-14 腾讯科技(北京)有限公司 网页生成方法及装置、网站生成方法及建站服务器
CN105468377A (zh) * 2015-12-10 2016-04-06 北京中科汇联科技股份有限公司 一种移动端页面生成方法及系统
CN106339226A (zh) * 2016-08-26 2017-01-18 南威软件股份有限公司 一种网页页面的展示方法和页面展示插件
CN108089878A (zh) * 2017-12-14 2018-05-29 腾讯科技(深圳)有限公司 页面信息展现和生成方法、装置及系统
CN108171610A (zh) * 2017-12-28 2018-06-15 中国平安人寿保险股份有限公司 页面生成方法、页面生成设备、存储介质及装置

Family Cites Families (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102193953B (zh) * 2010-03-17 2017-04-12 日电(中国)有限公司 桌面应用迁移系统和方法

Patent Citations (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2012145561A1 (en) * 2011-04-19 2012-10-26 Qwiki, Inc. Systems and methods for assembling and/or displaying multimedia objects, modules or presentations
CN103051684A (zh) * 2012-12-07 2013-04-17 百度在线网络技术(北京)有限公司 将网站转化为Web App进行展示的方法、系统和装置
CN104978317A (zh) * 2014-04-02 2015-10-14 腾讯科技(北京)有限公司 网页生成方法及装置、网站生成方法及建站服务器
CN105468377A (zh) * 2015-12-10 2016-04-06 北京中科汇联科技股份有限公司 一种移动端页面生成方法及系统
CN106339226A (zh) * 2016-08-26 2017-01-18 南威软件股份有限公司 一种网页页面的展示方法和页面展示插件
CN108089878A (zh) * 2017-12-14 2018-05-29 腾讯科技(深圳)有限公司 页面信息展现和生成方法、装置及系统
CN108171610A (zh) * 2017-12-28 2018-06-15 中国平安人寿保险股份有限公司 页面生成方法、页面生成设备、存储介质及装置

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
基于多尺度描述方法的移动用户界面生成框架;杜一;田丰;马翠霞;戴国忠;王宏安;;计算机学报;20131115(11);全文 *

Also Published As

Publication number Publication date
CN111240669A (zh) 2020-06-05

Similar Documents

Publication Publication Date Title
CN111240669B (zh) 界面生成方法、装置、电子设备及计算机存储介质
CN111095215B (zh) 应用间传递格式特定的数据对象
JP5439454B2 (ja) 電子コミック編集装置、方法及びプログラム
JP5439455B2 (ja) 電子コミック編集装置、方法及びプログラム
CN107766349B (zh) 一种生成文本的方法、装置、设备及客户端
CN111488186B (zh) 数据处理方法、装置、电子设备及计算机存储介质
WO2018226349A1 (en) Vector graphics handling processes for user applications
CN111435367A (zh) 知识图谱的构建方法、系统、设备及存储介质
US20220301307A1 (en) Video Generation Method and Apparatus, and Promotional Video Generation Method and Apparatus
CN117057318A (zh) 领域模型生成方法、装置、设备以及存储介质
CN113626023A (zh) 基于Sketch的跨平台界面开发方法和系统、计算机设备和介质
US20200364034A1 (en) System and Method for Automated Code Development and Construction
JP2020502710A (ja) ウェブページメイン画像認識方法及び装置
CN108536715B (zh) 一种预览页面生成方法、装置、设备以及存储介质
CN114092608B (zh) 表情的处理方法及装置、计算机可读存储介质、电子设备
CN109522429A (zh) 用于生成信息的方法和装置
CN114443022A (zh) 生成页面搭建区块的方法及电子设备
CN112328940A (zh) 网页嵌入过渡页的方法、装置、计算机设备及存储介质
CN107729499A (zh) 信息处理方法、介质、系统和电子设备
CN111782309B (zh) 显示信息的方法、装置及计算机可读存储介质
CN107168627A (zh) 用于触摸屏的文本编辑方法和装置
CN109741417B (zh) 一种图形文件的生成方法、装置、计算设备及存储介质
CN112613270A (zh) 基于预训练的绘画创作模型对目标文本进行样式推荐的方法、系统、设备及存储介质
CN113762223B (zh) 题目拆分模型训练方法、题目拆分方法及相关装置
CN113535017B (zh) 一种绘本文件的处理、同步显示方法、装置及存储介质

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