CN113110838A - 落地页设计界面展示方法、装置、设备和计算机可读介质 - Google Patents
落地页设计界面展示方法、装置、设备和计算机可读介质 Download PDFInfo
- Publication number
- CN113110838A CN113110838A CN202110369434.9A CN202110369434A CN113110838A CN 113110838 A CN113110838 A CN 113110838A CN 202110369434 A CN202110369434 A CN 202110369434A CN 113110838 A CN113110838 A CN 113110838A
- Authority
- CN
- China
- Prior art keywords
- style
- component module
- component
- page design
- response
- 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.)
- Pending
Links
- 238000013461 design Methods 0.000 title claims abstract description 184
- 238000000034 method Methods 0.000 title claims abstract description 70
- 230000004044 response Effects 0.000 claims abstract description 94
- 238000000926 separation method Methods 0.000 claims description 19
- 238000001514 detection method Methods 0.000 claims description 13
- 238000004590 computer program Methods 0.000 claims description 9
- 238000013507 mapping Methods 0.000 claims description 2
- 238000010586 diagram Methods 0.000 description 14
- 239000003795 chemical substances by application Substances 0.000 description 9
- 230000006870 function Effects 0.000 description 8
- 238000011161 development Methods 0.000 description 7
- 230000018109 developmental process Effects 0.000 description 7
- 230000000694 effects Effects 0.000 description 7
- 238000004891 communication Methods 0.000 description 6
- 238000012938 design process Methods 0.000 description 4
- 230000003287 optical effect Effects 0.000 description 4
- 230000008569 process Effects 0.000 description 4
- 238000012545 processing Methods 0.000 description 4
- 230000000007 visual effect Effects 0.000 description 3
- 239000003086 colorant Substances 0.000 description 2
- 230000004438 eyesight Effects 0.000 description 2
- 230000003993 interaction Effects 0.000 description 2
- 230000002452 interceptive effect Effects 0.000 description 2
- 230000000644 propagated effect Effects 0.000 description 2
- 238000012360 testing method Methods 0.000 description 2
- 238000003491 array Methods 0.000 description 1
- 238000010276 construction Methods 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 230000011890 leaf development Effects 0.000 description 1
- 239000004973 liquid crystal related substance Substances 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 239000013307 optical fiber Substances 0.000 description 1
- 239000004065 semiconductor Substances 0.000 description 1
- 238000012546 transfer Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/34—Graphical or visual programming
Landscapes
- Engineering & Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- User Interface Of Digital Computer (AREA)
- Processing Or Creating Images (AREA)
Abstract
本公开的实施例公开了落地页设计界面展示方法、装置、设备和计算机可读介质。该方法的一具体实施方式包括:响应于检测到作用于落地页设计界面中的组件选择区的选择操作,在落地页设计界面中的落地页设计区中展示组件模块,以及在落地页设计界面中的样式编辑区中展示组件模块样式信息;响应于检测到作用于组件模块样式信息的编辑操作,调整组件模块在落地页设计区中的展示样式;响应于检测到作用于组件模块中任一组件的选择操作,在样式编辑区中展示组件样式信息;响应于检测到作用于组件样式信息的编辑操作,调整所选择的组件在组件模块中的展示样式。该实施方式极大的降低落地页设计的技术门槛,并提升了落地页设的效率。
Description
技术领域
本公开的实施例涉及计算机技术领域,具体涉及落地页设计界面展示方法、装置、设备和计算机可读介质。
背景技术
落地页设计,是指对落地页进行页面设计的一项技术。目前,在对落地页进行设计时,通常采用的方式为:历经产品、交互、视觉、开发和测试等多个环节以及较长的开发周期,实现对落地页的设计以及搭建,若在开发过程中需要对落地页的设计构想进行改动,则需要重新历经产品、交互、视觉、开发和测试等多个环节。
当采用上述方式对进行落地页设计时,经常会存在如下技术问题:在落地页的设计过程中需要历经开发等阶段,从而,导致落地页设计的技术门槛较高,需要懂得相关落地页开发技术的人员才能进行设计,同时,落地页设计过程中的可视化程度较低,难以提升落地页设的效率。
发明内容
本公开的内容部分用于以简要的形式介绍构思,这些构思将在后面的具体实施方式部分被详细描述。本公开的内容部分并不旨在标识要求保护的技术方案的关键特征或必要特征,也不旨在用于限制所要求的保护的技术方案的范围。
本公开的一些实施例提出了落地页设计界面,来解决以上背景技术部分提到的技术问题。
第一方面,本公开的一些实施例提供了一种落地页设计界面展示方法,该方法包括:响应于检测到作用于落地页设计界面中的组件选择区的选择操作,在上述落地页设计界面中的落地页设计区中展示组件模块,以及在上述落地页设计界面中的样式编辑区中展示组件模块样式信息,其中,上述组件模块用于以组件组的形式展示在上述组件选择区中选择的组件;响应于检测到作用于上述组件模块样式信息的编辑操作,调整上述组件模块在上述落地页设计区中的展示样式;响应于检测到作用于上述组件模块中任一组件的选择操作,在上述样式编辑区中展示组件样式信息;响应于检测到作用于上述组件样式信息的编辑操作,调整所选择的组件在上述组件模块中的展示样式。
第二方面,本公开的一些实施例提供了一种落地页设计界面展示装置,装置包括:第一展示单元,被配置成响应于检测到作用于落地页设计界面中的组件选择区的选择操作,在上述落地页设计界面中的落地页设计区中展示组件模块,以及在上述落地页设计界面中的样式编辑区中展示组件模块样式信息,其中,上述组件模块用于以组件组的形式展示在上述组件选择区中选择的组件;第一调整单元,被配置成响应于检测到作用于上述组件模块样式信息的编辑操作,调整上述组件模块在上述落地页设计区中的展示样式;第二展示单元,被配置成响应于检测到作用于上述组件模块中任一组件的选择操作,在上述样式编辑区中展示组件样式信息;第二调整单元,被配置成响应于检测到作用于上述组件样式信息的编辑操作,调整所选择的组件在上述组件模块中的展示样式。
第三方面,本公开的一些实施例提供了一种电子设备,包括:一个或多个处理器;存储装置,其上存储有一个或多个程序,当一个或多个程序被一个或多个处理器执行,使得一个或多个处理器实现上述第一方面任一实现方式所描述的方法。
第四方面,本公开的一些实施例提供了一种计算机可读介质,其上存储有计算机程序,其中,程序被处理器执行时实现上述第一方面任一实现方式所描述的方法。
本公开的上述各个实施例具有如下有益效果:通过本公开的一些实施例的落地页设计界面展示方法,可以通过模块组合拼装的方式快速的完成落地页的设计以及调整,提升了落地页设计的效率并降低了落地页设计门槛。为了实现上述效果,本公开的一些实施例的落地页设计界面展示方法,首先,响应于检测到作用于落地页设计界面中的组件选择区的选择操作,在上述落地页设计界面中的落地页设计区中展示组件模块,以及在上述落地页设计界面中的样式编辑区中展示组件模块样式信息。由此,可以直接以组件模块的形式在落地页设计区中展示所选择的组件,可以减少落地页设计过程中的操作步骤,同时在样式编辑区中展示组件模块样式信息以便对展示的组件模块进行调整。然后,响应于检测到作用于上述组件模块样式信息的编辑操作,调整上述组件模块在上述落地页设计区中的展示样式。由此,可以根据编辑操作,实时的、可视化的展示并调整上述组件模块在上述落地页设计区中的展示样式,便于设计人员实时掌握设计效果。接着,响应于检测到作用于上述组件模块中任一组件的选择操作,在上述样式编辑区中展示组件样式信息。最后,响应于检测到作用于上述组件样式信息的编辑操作,调整所选择的组件在上述组件模块中的展示样式。由此,可以单独的调整组件模块中每个组件的展示样式,使得落地页的设计效果更为多样化。正是通过落地页设计界面的这种可视化的交互设计方式,直接由组件模块组合拼装设计落地页,避免了落地页设计中的开发环节,可以极大的降低落地页设计的技术门槛,并提升了落地页设的效率。
附图说明
结合附图并参考以下具体实施方式,本公开各实施例的上述和其他特征、优点及方面将变得更加明显。贯穿附图中,相同或相似的附图标记表示相同或相似的元素。应当理解附图是示意性的,元件和元素不一定按照比例绘制。
图1-4是本公开的一些实施例的落地页设计界面展示方法的一个应用场景的多个示意图;
图5是根据本公开的落地页设计界面展示方法的一些实施例的流程图;
图6-7是根据本公开的一些实施例的落地页设计界面展示方法的一个应用场景的多个示意图;
图8是根据本公开的落地页设计界面展示方法的另一些实施例的流程图;
图9-16是根据本公开的另一些实施例的落地页设计界面展示方法的一个应用场景的多个示意图;
图17是根据本公开的落地页设计界面展示装置的一些实施例的结构示意图;
图18是适于用来实现本公开的一些实施例的电子设备的结构示意图。
具体实施方式
下面将参照附图更详细地描述本公开的实施例。虽然附图中显示了本公开的某些实施例,然而应当理解的是,本公开可以通过各种形式来实现,而且不应该被解释为限于这里阐述的实施例。相反,提供这些实施例是为了更加透彻和完整地理解本公开。应当理解的是,本公开的附图及实施例仅用于示例性作用,并非用于限制本公开的保护范围。
另外还需要说明的是,为了便于描述,附图中仅示出了与有关发明相关的部分。在不冲突的情况下,本公开中的实施例及实施例中的特征可以相互组合。
需要注意,本公开中提及的“第一”、“第二”等概念仅用于对不同的装置、模块或单元进行区分,并非用于限定这些装置、模块或单元所执行的功能的顺序或者相互依存关系。
需要注意,本公开中提及的“一个”、“多个”的修饰是示意性而非限制性的,本领域技术人员应当理解,除非在上下文另有明确指出,否则应该理解为“一个或多个”。
本公开实施方式中的多个装置之间所交互的消息或者信息的名称仅用于说明性的目的,而并不是用于对这些消息或信息的范围进行限制。
下面将参考附图并结合实施例来详细说明本公开。
图1-4是本公开的一些实施例的落地页设计界面展示方法的一个应用场景的多个示意图。
如图1所示,计算设备101可以响应于检测到作用于落地页设计界面102中的组件选择区103的选择操作,在上述落地页设计界面102中的落地页设计区104中展示组件模块105,以及在上述落地页设计界面102中的样式编辑区106中展示组件模块样式信息107,其中,上述组件模块105用于以组件组的形式展示在上述组件选择区103中选择的组件。
如图2所示,计算设备101可以响应于检测到作用于上述组件模块样式信息107的编辑操作,调整上述组件模块105在上述落地页设计区104中的展示样式。
如图3所示,计算设备101可以响应于检测到作用于上述组件模块105中任一组件的选择操作,在上述样式编辑区106中展示组件样式信息108。
如图4所示,计算设备101可以响应于检测到作用于上述组件样式信息108的编辑操作,调整所选择的组件在上述组件模块105中的展示样式。
需要说明的是,上述计算设备101可以是硬件,也可以是软件。当计算设备为硬件时,可以实现成多个服务器或终端设备组成的分布式集群,也可以实现成单个服务器或单个终端设备。当计算设备体现为软件时,可以安装在上述所列举的硬件设备中。其可以实现成例如用来提供分布式服务的多个软件或软件模块,也可以实现成单个软件或软件模块。在此不做具体限定。
应该理解,图1中的计算设备的数目仅仅是示意性的。根据实现需要,可以具有任意数目的计算设备。
继续参考图5,示出了根据本公开的落地页设计界面展示方法的一些实施例的流程500。该落地页设计界面展示方法,包括以下步骤:
步骤501,响应于检测到作用于落地页设计界面中的组件选择区的选择操作,在落地页设计界面中的落地页设计区中展示组件模块,以及在落地页设计界面中的样式编辑区中展示组件模块样式信息。
在一些实施例中,落地页设计界面展示方法的执行主体(如图1所示的计算设备101)可以响应于检测到作用于落地页设计界面中的组件选择区的选择操作,在上述落地页设计界面中的落地页设计区中展示组件模块,以及在上述落地页设计界面中的样式编辑区中展示组件模块样式信息。其中,上述组件模块可以用于以组件组的形式展示在上述组件选择区中选择的组件。其中,上述选择操作可以是单击操作、双击操作或者滑动操作等。上述组件组的形式可以是多个类型相同的组件同时进行展示的形式。上述组件模块样式信息可以用于控制上述组件模块中展示的组件的数目以及排列样式。
作为示例,参考图1,可以响应于检测到作用于落地页设计界面102中的组件选择区103的选择操作,在上述落地页设计界面102中的落地页设计区104中展示组件模块105,以及在上述落地页设计界面102中的样式编辑区106中展示组件模块样式信息107。
在一些实施例的一些可选的实现方式中,上述执行主体在上述落地页设计界面中的样式编辑区中展示组件模块样式信息,还可以包括在上述样式编辑区中展示背景色勾选控件。其中,上述背景色勾选控件可以用于控制上述落地页设计区中展示的组件模块的背景色。当上述背景色勾选控件的勾选状态为未勾选时,上述组件模块的背景色可以为透明色。当上述背景色勾选控件的勾选状态为勾选时,上述组件模块的背景色可以为预设的颜色。
可选的,上述执行主体还可以响应于检测到作用于上述背景色勾选控件的选择操作,对上述组件模块的背景色进行调整。
当上述背景色勾选控件的勾选状态为未勾选时,可以响应于检测到作用于上述背景色勾选控件的选择操作,将上述背景色勾选控件的勾选状态更改为已勾选状态,并将上述组件模块的背景色更新为预设的颜色。
作为示例,参考图6,当背景色勾选控件109的勾选状态为未勾选时,可以响应于检测到作用于上述背景色勾选控109件的选择操作,将上述背景色勾选控件109的勾选状态更改为已勾选状态,并将上述组件模块105的背景色更新为预设的颜色。
当上述背景色勾选控件的勾选状态为勾选时,可以响应于检测到作用于上述背景色勾选控件的选择操作,将上述背景色勾选控件的勾选状态更改为未勾选状态,并将上述组件模块的背景色更新为透明色。
在一些实施例的一些可选的实现方式中,上述执行主体在上述落地页设计界面中的样式编辑区中展示组件模块样式信息,还可以包括在上述样式编辑区中展示上间距勾选控件。其中,上述上间距勾选控件可以用于控制上述落地页设计区中展示的组件模块与在该组件模块之前的上一个组件模块之间的间距。若该组件模块为上述落地页设计区中的第一个组件模块,则上间距勾选控件可以用于控制上述落地页设计区中展示的组件模块与上述落地页设计区的上边距之间的间距。
当上述上间距勾选控件的勾选状态为未勾选时,上述组件模块与在该组件模块之前的上一个组件模块或者上述落地页设计区上边距之间的间距值可以为第一预设间距值。当上述上间距勾选控件的勾选状态为勾选时,上述组件模块与在该组件模块之前的上一个组件模块或者上述落地页设计区上边距之间的间距值可以为第二预设间距值。上述第二预设间距值可以大于上述第一预设间距值。例如,上述第一预设间距值可以为3像素,上述第二预设间距值可以为5像素。
可选的,上述执行主体还可以响应于检测到作用于上述上间距勾选控件的选择操作,对上述组件模块的上间距进行调整。
当上述上间距勾选控件的勾选状态为未勾选时,可以响应于检测到作用于上述上间距勾选控件的选择操作,将上述上间距勾选控件的勾选状态更改为已勾选状态,并将上述组件模块与在该组件模块之前的上一个组件模块或者上述落地页设计区上边距之间的间距值调整为第二预设间距值。
作为示例,参考图7,当上述上间距勾选控件110的勾选状态为未勾选时,可以响应于检测到作用于上述上间距勾选控件110的选择操作,将上述上间距勾选控件110的勾选状态更改为已勾选状态,并将上述组件模块105与上述落地页设计区104上边距之间的间距值调整为第二预设间距值。
当上述上间距勾选控件的勾选状态为勾选时,可以响应于检测到作用于上述上间距勾选控件的选择操作,将上述上间距勾选控件的勾选状态更改为未勾选状态,并将上述组件模块与在该组件模块之前的上一个组件模块或者上述落地页设计区上边距之间的间距值调整为第一预设间距值。
步骤502,响应于检测到作用于组件模块样式信息的编辑操作,调整组件模块在落地页设计区中的展示样式。
在一些实施例中,上述执行主体可以响应于检测到作用于上述组件模块样式信息的编辑操作,调整上述组件模块在上述落地页设计区中的展示样式。其中,上述编辑操作可以是输入操作或者点击操作等。可以根据对组件模块样式信息的编辑结果,调整上述组件模块在上述落地页设计区中的展示的组件的数量以及各个组件的排列样式。
作为示例,参考图2,上述执行主体可以响应于检测到作用于上述组件模块样式信息107的编辑操作,调整上述组件模块105在上述落地页设计区104中的展示样式。
步骤503,响应于检测到作用于组件模块中任一组件的选择操作,在样式编辑区中展示组件样式信息。
在一些实施例中,上述执行主体可以响应于检测到作用于上述组件模块中任一组件的选择操作,在上述样式编辑区中展示组件样式信息。其中,上述组件样式信息可以用于控制所选择的组件在组件模块中所展示的组件名称或图标。
作为示例,参考图3,上述执行主体可以响应于检测到作用于上述组件模块105中任一组件的选择操作,在上述样式编辑区106中展示组件样式信息108。
步骤504,响应于检测到作用于组件样式信息的编辑操作,调整所选择的组件在组件模块中的展示样式。
在一些实施例中,上述执行主体可以响应于检测到作用于上述组件样式信息的编辑操作,调整所选择的组件在上述组件模块中的展示样式。可以根据对上述组件样式信息的编辑结果,例如,对组件名称的填写或修改,或者对组件图标的选择或者更改。
作为示例,参考图4,上述执行主体可以响应于检测到作用于上述组件样式信息108的编辑操作,调整所选择的组件在上述组件模块105中的展示样式。
本公开的上述各个实施例具有如下有益效果:通过本公开的一些实施例的落地页设计界面展示方法,可以通过模块组合拼装的方式快速的完成落地页的设计以及调整,提升了落地页设计的效率并降低了落地页设计门槛。为了实现上述效果,本公开的一些实施例的落地页设计界面展示方法,首先,响应于检测到作用于落地页设计界面中的组件选择区的选择操作,在上述落地页设计界面中的落地页设计区中展示组件模块,以及在上述落地页设计界面中的样式编辑区中展示组件模块样式信息。由此,可以直接以组件模块的形式在落地页设计区中展示所选择的组件,可以减少落地页设计过程中的操作步骤,同时在样式编辑区中展示组件模块样式信息以便对展示的组件模块进行调整。然后,响应于检测到作用于上述组件模块样式信息的编辑操作,调整上述组件模块在上述落地页设计区中的展示样式。由此,可以根据编辑操作,实时的、可视化的展示并调整上述组件模块在上述落地页设计区中的展示样式,便于设计人员实时掌握设计效果。接着,响应于检测到作用于上述组件模块中任一组件的选择操作,在上述样式编辑区中展示组件样式信息。最后,响应于检测到作用于上述组件样式信息的编辑操作,调整所选择的组件在上述组件模块中的展示样式。由此,可以单独的调整组件模块中每个组件的展示样式,使得落地页的设计效果更为多样化。正是通过落地页设计界面的这种可视化的交互设计方式,直接由组件模块组合拼装设计落地页,避免了落地页设计中的开发环节,可以极大的降低落地页设计的技术门槛,并提升了落地页设的效率。
进一步参考图8,其示出了落地页设计界面展示方法的另一些实施例的流程800。该落地页设计界面展示方法的流程800,包括以下步骤:
步骤801,响应于检测到作用于落地页设计界面中的组件选择区的选择操作,在落地页设计界面中的落地页设计区中展示组件模块,以及在落地页设计界面中的样式编辑区中展示组件模块样式信息。
步骤802,响应于检测到作用于组件模块样式信息的编辑操作,调整组件模块在落地页设计区中的展示样式。
步骤803,响应于检测到作用于组件模块中任一组件的选择操作,在样式编辑区中展示组件样式信息。
步骤804,响应于检测到作用于组件样式信息的编辑操作,调整所选择的组件在组件模块中的展示样式。
在一些实施例中,步骤801-804的具体实现方式及所带来的技术效果可以参考图2对应的那些实施例中的步骤501-504,在此不再赘述。
步骤805,响应于检测到作用于背景色设置控件的选择操作,提取目标图像的主题色彩,得到主题色彩组,以及在样式编辑区中展示主题色彩组。
在一些实施例中,上述落地页设计界面还可以用于展示全局样式控件区,上述全局样式控件区可以用于展示用于设置落地页全局样式的控件。上述全局样式控件区可以用于展示背景色设置控件。
落地页设计界面展示方法的执行主体(如图1所示的计算设备101)可以响应于检测到作用于上述背景色设置控件的选择操作,提取目标图像的主题色彩,得到主题色彩组,以及在上述样式编辑区中展示上述主题色彩组。其中,上述目标图像可以是上述落地页设计区中展示的图片,也可以是单独选做用于供提取主题色彩的图像。上述背景色设置控件可以用于设置上述落地页设计区的背景色。上述全局样式控件区和上述组件选择区可以占用上述落地页设计界面中的同一区域。可以通过滑动操作或者双击操作等对上述全局样式控件区和上述组件选择区进行切换展示。
作为示例,参考图9,上述执行主体101可以响应于检测到作用于上述全局样式控件区111中展示的背景色设置控件1111的选择操作,提取目标图像112的主题色彩,得到主题色彩组113,以及在上述样式编辑区106中展示上述主题色彩组113。
在一些实施例的一些可选的实现方式中,上述执行主体还可以在上述样式编辑区中展示背景色自定义设置模块。
可选的,上述执行主体还可以执行以下步骤:
第一步,响应于检测到作用于上述背景色自定义设置模块的选择操作,在上述落地页设计界面中展示拾色器。
作为示例,参考图10,上述执行主体可以响应于检测到作用于上述样式编辑区106中展示的背景色自定义设置模块114的选择操作,在上述落地页设计界面102中展示拾色器115。
第二步,响应于检测到作用于上述拾色器的拾色操作,将上述落地页设计区的背景色调整为上述拾色器拾取到的色彩。其中,上述拾色操作可以是单击操作或者双击操作等。
在一些实施例的一些可选的实现方式中,上述执行主体还可以在上述样式编辑区中展示背景图片铺排控件。其中,上述背景图片铺排控件可以用于对上述落地页设计区的背景进行填充。
可选的,上述执行主体可以响应于检测到作用于上述背景图片铺排控件的选择操作,利用上述目标图像对上述落地页设计区的背景进行填充。其中,上述填充方式可以为将目标图像的长和宽分别拉伸为与上述落地页设计区的长和宽相同,并将拉伸后的目标图像作为上述落地页设计区的背景。上述填充方式还可以为对上述目标图像进行复制和拼接后作为上述落地页设计区的背景。
步骤806,响应于检测到作用于主题色彩组中任一主题色彩的选择操作,将落地页设计区的背景色调整为所选择的主题色彩。
在一些实施例中,上述执行主体可以响应于检测到作用于上述主题色彩组中任一主题色彩的选择操作,将上述落地页设计区的背景色调整为所选择的主题色彩。
作为示例,参考图11,上述执行主体可以响应于检测到作用于上述主题色彩组113中任一主题色彩的选择操作,将上述落地页设计区104的背景色调整为所选择的主题色彩。
在一些实施例的一些可选的实现方式中,上述执行主体还可以在上述样式编辑区中展示透明度调整滑块。
可选的,上述执行主体还可以响应于检测到作用于上述透明度调整滑块的拖拽操作,调整上述落地页设计区的背景色的透明度。
作为示例,参考图12,上述执行主体可以响应于检测到作用于上述透明度调整滑块116的拖拽操作,调整上述落地页设计区104的背景色的透明度。
步骤807,响应于检测到作用于组件模块分隔设置控件的选择操作,在样式编辑区中展示组件模块间距调整滑块。
在一些实施例中,上述全局样式控件区还可以用于展示组件模块分隔设置控件。上述执行主体可以响应于检测到作用于上述组件模块分隔设置控件的选择操作,在上述样式编辑区中展示组件模块间距调整滑块。其中,上述组件模块间距调整滑块可以用于统一调整上述落地页设计区所展示的各个组件模块之间的间距。
作为示例,参考图13,上述执行主体可以响应于检测到作用于上述全局样式控件区111中展示的组件模块分隔设置控件1112的选择操作,在上述样式编辑区106中展示组件模块间距调整滑块117。
在一些实施例的一些可选的实现方式中,上述执行主体在上述样式编辑区中展示组件模块间距调整滑块,还可以包括以下步骤:
第一步,在上述样式编辑区中展示组件模块分隔样式控件组,其中,上述组件模块分隔样式控件组中的组件模块分隔样式控件用于设置上述落地页设计区中各个组件模块之间的间距样式。
第二步,响应于检测到作用于上述组件模块分隔样式控件组中任一组件模块分隔样式控件的选择操作,将上述落地页设计区中各个组件模块之间的间距样式设置为所选择的组件模块分隔样式控件所表征的样式。
作为示例,参考图14,上述执行主体可以响应于检测到作用于上述组件模块分隔样式控件组118中任一组件模块分隔样式控件的选择操作,将上述落地页设计区104中各个组件模块之间的间距样式设置为所选择的组件模块分隔样式控件所表征的样式。
步骤808,响应于检测到作用于组件模块间距调整滑块的拖拽操作,对落地页设计区中展示的各个组件模块之间的间距进行统一调整。
在一些实施例中,上述执行主体可以响应于检测到作用于上述组件模块间距调整滑块的拖拽操作,将上述落地页设计区中展示的各个组件模块之间的间距统一调整为与上述拖拽操作对应的间距值。
作为示例,参考图15,上述执行主体可以响应于检测到作用于上述组件模块间距调整滑块117的拖拽操作,将上述落地页设计区104中展示的各个组件模块之间的间距统一调整为与上述拖拽操作的间距值。
步骤809,响应于检测到作用于目标组件模块间距设置滑块的拖拽操作,调整落地页设计区中的目标组件模块与其他组件模块之间的间距。
在一些实施例中,上述全局样式控件区还可以用于展示目标组件模块间距设置滑块。上述执行主体可以响应于检测到作用于上述目标组件模块间距设置滑块的拖拽操作,调整上述落地页设计区中的目标组件模块与其他组件模块之间的间距。其中,上述目标组件模块间距设置滑块可以用于调整上述落地页设计区中展示的目标组件模块与和该目标组件模块相邻的模块之间的间距。上述目标组件模块可以是仅用于展示图片的组件模块。
在一些实施例的一些可选的实现方式中,上述全局样式控件区还可以用于展示色彩模式调整控件。上述执行主体还可以执行以下步骤:
第一步,响应于检测到作用于上述色彩模式调整控件的选择操作,在上述样式编辑区中展示深色模式控件和浅色模式控件。
作为示例,参考图16,上述执行主体可以响应于检测到作用于上述全局样式控件区111中展示的色彩模式调整控件1113的选择操作,在上述样式编辑区106中展示深色模式控件119和浅色模式控件120。
第二步,响应于检测到作用于上述深色模式控件或上述浅色模式控件的选择操作,根据预设的色彩映射信息对上述落地页设计区的色彩进行调整。
从图8中可以看出,与图5对应的一些实施例的描述相比,图8对应的一些实施例中的落地页设计界面展示方法的流程800体现了对落地页设计界面中的可执行的操作以及展示的控件的丰富。由此,这些实施例描述的方案可以进一步提升落地页设计界面的功能,从而为落地页的设计提供更为丰富的选择。
进一步参考图17,作为对上述各图所示方法的实现,本公开提供了一种落地页设计界面展示装置的一些实施例,这些装置实施例与图5所示的那些方法实施例相对应,该装置具体可以应用于各种电子设备中。
如图17所示,一些实施例的落地页设计界面展示装置1700包括:第一展示单元1701、第一调整单元1702、第二展示单元1703和第二调整单元1704。其中,第一展示单元1701被配置成响应于检测到作用于落地页设计界面中的组件选择区的选择操作,在上述落地页设计界面中的落地页设计区中展示组件模块,以及在上述落地页设计界面中的样式编辑区中展示组件模块样式信息,其中,上述组件模块用于以组件组的形式展示在上述组件选择区中选择的组件;第一调整单元1702被配置成响应于检测到作用于上述组件模块样式信息的编辑操作,调整上述组件模块在上述落地页设计区中的展示样式;第二展示单元1703被配置成响应于检测到作用于上述组件模块中任一组件的选择操作,在上述样式编辑区中展示组件样式信息;第二调整单元1704被配置成响应于检测到作用于上述组件样式信息的编辑操作,调整所选择的组件在上述组件模块中的展示样式。
可以理解的是,该装置1700中记载的诸单元与参考图5描述的方法中的各个步骤相对应。由此,上文针对方法描述的操作、特征以及产生的有益效果同样适用于装置1700及其中包含的单元,在此不再赘述。
下面参考图18,其示出了适于用来实现本公开的一些实施例的电子设备1800的结构示意图。图18示出的电子设备仅仅是一个示例,不应对本公开的实施例的功能和使用范围带来任何限制。
如图18所示,电子设备1800可以包括处理装置(例如中央处理器、图形处理器等)1801,其可以根据存储在只读存储器(ROM)1802中的程序或者从存储装置1808加载到随机访问存储器(RAM)1803中的程序而执行各种适当的动作和处理。在RAM 1803中,还存储有电子设备1800操作所需的各种程序和数据。处理装置1801、ROM 1802以及RAM 1803通过总线1804彼此相连。输入/输出(I/O)接口1805也连接至总线1804。
通常,以下装置可以连接至I/O接口1805:包括例如触摸屏、触摸板、键盘、鼠标、摄像头、麦克风、加速度计、陀螺仪等的输入装置1806;包括例如液晶显示器(LCD)、扬声器、振动器等的输出装置1807;以及通信装置1809。通信装置1809可以允许电子设备1800与其他设备进行无线或有线通信以交换数据。虽然图18示出了具有各种装置的电子设备1800,但是应理解的是,并不要求实施或具备所有示出的装置。可以替代地实施或具备更多或更少的装置。图18中示出的每个方框可以代表一个装置,也可以根据需要代表多个装置。
特别地,根据本公开的一些实施例,上文参考流程图描述的过程可以被实现为计算机软件程序。例如,本公开的一些实施例包括一种计算机程序产品,其包括承载在计算机可读介质上的计算机程序,该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的一些实施例中,该计算机程序可以通过通信装置1809从网络上被下载和安装,或者从存储装置1808被安装,或者从ROM 1802被安装。在该计算机程序被处理装置1801执行时,执行本公开的一些实施例的方法中限定的上述功能。
需要说明的是,本公开的一些实施例中记载的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件,或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于:具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本公开的一些实施例中,计算机可读存储介质可以是任何包含或存储程序的有形介质,该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本公开的一些实施例中,计算机可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号,其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式,包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读信号介质还可以是计算机可读存储介质以外的任何计算机可读介质,该计算机可读信号介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输,包括但不限于:电线、光缆、RF(射频)等等,或者上述的任意合适的组合。
在一些实施方式中,客户端、服务器可以利用诸如HTTP(HyperText TransferProtocol,超文本传输协议)之类的任何当前已知或未来研发的网络协议进行通信,并且可以与任意形式或介质的数字数据通信(例如,通信网络)互连。通信网络的示例包括局域网(“LAN”),广域网(“WAN”),网际网(例如,互联网)以及端对端网络(例如,ad hoc端对端网络),以及任何当前已知或未来研发的网络。
上述计算机可读介质可以是上述电子设备中所包含的;也可以是单独存在,而未装配入该电子设备中。上述计算机可读介质承载有一个或者多个程序,当上述一个或者多个程序被该电子设备执行时,使得该电子设备:响应于检测到作用于落地页设计界面中的组件选择区的选择操作,在上述落地页设计界面中的落地页设计区中展示组件模块,以及在上述落地页设计界面中的样式编辑区中展示组件模块样式信息,其中,上述组件模块用于以组件组的形式展示在上述组件选择区中选择的组件;响应于检测到作用于上述组件模块样式信息的编辑操作,调整上述组件模块在上述落地页设计区中的展示样式;响应于检测到作用于上述组件模块中任一组件的选择操作,在上述样式编辑区中展示组件样式信息;响应于检测到作用于上述组件样式信息的编辑操作,调整所选择的组件在上述组件模块中的展示样式。
可以以一种或多种程序设计语言或其组合来编写用于执行本公开的一些实施例的操作的计算机程序代码,上述程序设计语言包括面向对象的程序设计语言—诸如Java、Smalltalk、C++,还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中,远程计算机可以通过任意种类的网络——包括局域网(LAN)或广域网(WAN)——连接到用户计算机,或者,可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。
附图中的流程图和框图,图示了按照本公开各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上,流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分,该模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意,在有些作为替换的实现中,方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如,两个接连地表示的方框实际上可以基本并行地执行,它们有时也可以按相反的顺序执行,这依所涉及的功能而定。也要注意的是,框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合,可以用执行规定的功能或操作的专用的基于硬件的系统来实现,或者可以用专用硬件与计算机指令的组合来实现。
描述于本公开的一些实施例中的单元可以通过软件的方式实现,也可以通过硬件的方式来实现。所描述的单元也可以设置在处理器中,例如,可以描述为:一种处理器包括第一展示单元、第一调整单元、第二展示单元和第二调整单元。其中,这些单元的名称在某种情况下并不构成对该单元本身的限定,例如,第一展示单元还可以被描述为“展示组件模块以及组件模块样式信息的单元”。
本文中以上描述的功能可以至少部分地由一个或多个硬件逻辑部件来执行。例如,非限制性地,可以使用的示范类型的硬件逻辑部件包括:现场可编程门阵列(FPGA)、专用集成电路(ASIC)、专用标准产品(ASSP)、片上系统(SOC)、复杂可编程逻辑设备(CPLD)等等。
Claims (20)
1.一种落地页设计界面展示方法,包括:
响应于检测到作用于落地页设计界面中的组件选择区的选择操作,在所述落地页设计界面中的落地页设计区中展示组件模块,以及在所述落地页设计界面中的样式编辑区中展示组件模块样式信息,其中,所述组件模块用于以组件组的形式展示在所述组件选择区中选择的组件;
响应于检测到作用于所述组件模块样式信息的编辑操作,调整所述组件模块在所述落地页设计区中的展示样式;
响应于检测到作用于所述组件模块中任一组件的选择操作,在所述样式编辑区中展示组件样式信息;
响应于检测到作用于所述组件样式信息的编辑操作,调整所选择的组件在所述组件模块中的展示样式。
2.根据权利要求1所述的方法,其中,所述在所述落地页设计界面中的样式编辑区中展示组件模块样式信息,还包括:
在所述样式编辑区中展示背景色勾选控件。
3.根据权利要求2所述的方法,其中,所述方法还包括:
响应于检测到作用于所述背景色勾选控件的选择操作,对所述组件模块的背景色进行调整。
4.根据权利要求1所述的方法,其中,所述在所述落地页设计界面中的样式编辑区中展示组件模块样式信息,还包括:
在所述样式编辑区中展示上间距勾选控件。
5.根据权利要求4所述的方法,其中,所述方法还包括:
响应于检测到作用于所述上间距勾选控件的选择操作,对所述组件模块的上间距进行调整。
6.根据权利要求1所述的方法,其中,所述落地页设计界面还用于展示全局样式控件区,所述全局样式控件区用于展示用于设置落地页全局样式的控件。
7.根据权利要求6所述的方法,其中,所述全局样式控件区用于展示背景色设置控件;以及
所述方法还包括:
响应于检测到作用于所述背景色设置控件的选择操作,提取目标图像的主题色彩,得到主题色彩组,以及在所述样式编辑区中展示所述主题色彩组;
响应于检测到作用于所述主题色彩组中任一主题色彩的选择操作,将所述落地页设计区的背景色调整为所选择的主题色彩。
8.根据权利要求7所述的方法,其中,所述在所述样式编辑区中展示所述主题色彩组,还包括:
在所述样式编辑区中展示背景色自定义设置模块。
9.根据权利要求8所述的方法,其中,所述方法还包括:
响应于检测到作用于所述背景色自定义设置模块的选择操作,在所述落地页设计界面中展示拾色器;
响应于检测到作用于所述拾色器的拾色操作,将所述落地页设计区的背景色调整为所述拾色器拾取到的色彩。
10.根据权利要求7所述的方法,其中,所述在所述样式编辑区中展示所述主题色彩组,还包括:
在所述样式编辑区中展示透明度调整滑块。
11.根据权利要求10所述的方法,其中,所述方法还包括:
响应于检测到作用于所述透明度调整滑块的拖拽操作,调整所述落地页设计区的背景色的透明度。
12.根据权利要求7所述的方法,其中,所述在所述样式编辑区中展示所述主题色彩组,还包括:
在所述样式编辑区中展示背景图片铺排控件。
13.根据权利要求12所述的方法,其中,所述方法还包括:
响应于检测到作用于所述背景图片铺排控件的选择操作,利用所述目标图像对所述落地页设计区的背景进行填充。
14.根据权利要求6所述的方法,其中,所述全局样式控件区还用于展示组件模块分隔设置控件;以及
所述方法还包括:
响应于检测到作用于所述组件模块分隔设置控件的选择操作,在所述样式编辑区中展示组件模块间距调整滑块;
响应于检测到作用于所述组件模块间距调整滑块的拖拽操作,对所述落地页设计区中展示的各个组件模块之间的间距进行统一调整。
15.根据权利要求14所述的方法,其中,所述在所述样式编辑区中展示组件模块间距调整滑块,还包括:
在所述样式编辑区中展示组件模块分隔样式控件组,其中,所述组件模块分隔样式控件组中的组件模块分隔样式控件用于设置所述落地页设计区中各个组件模块之间的间距样式;
响应于检测到作用于所述组件模块分隔样式控件组中任一组件模块分隔样式控件的选择操作,将所述落地页设计区中各个组件模块之间的间距样式设置为所选择的组件模块分隔样式控件所表征的样式。
16.根据权利要求6所述的方法,其中,所述全局样式控件区还用于展示目标组件模块间距设置滑块;以及
所述方法还包括:
响应于检测到作用于所述目标组件模块间距设置滑块的拖拽操作,调整所述落地页设计区中的目标组件模块与其他组件模块之间的间距。
17.根据权利要求6所述的方法,其中,所述全局样式控件区还用于展示色彩模式调整控件;以及
所述方法还包括:
响应于检测到作用于所述色彩模式调整控件的选择操作,在所述样式编辑区中展示深色模式控件和浅色模式控件;
响应于检测到作用于所述深色模式控件或所述浅色模式控件的选择操作,根据预设的色彩映射信息对所述落地页设计区的色彩进行调整。
18.一种落地页设计界面展示装置,包括:
第一展示单元,被配置成响应于检测到作用于落地页设计界面中的组件选择区的选择操作,在所述落地页设计界面中的落地页设计区中展示组件模块,以及在所述落地页设计界面中的样式编辑区中展示组件模块样式信息,其中,所述组件模块用于以组件组的形式展示在所述组件选择区中选择的组件;
第一调整单元,被配置成响应于检测到作用于所述组件模块样式信息的编辑操作,调整所述组件模块在所述落地页设计区中的展示样式;
第二展示单元,被配置成响应于检测到作用于所述组件模块中任一组件的选择操作,在所述样式编辑区中展示组件样式信息;
第二调整单元,被配置成响应于检测到作用于所述组件样式信息的编辑操作,调整所选择的组件在所述组件模块中的展示样式。
19.一种电子设备,包括:
一个或多个处理器;
存储装置,其上存储有一个或多个程序,
当所述一个或多个程序被所述一个或多个处理器执行,使得所述一个或多个处理器实现如权利要求1-17中任一所述的方法。
20.一种计算机可读介质,其上存储有计算机程序,其中,所述程序被处理器执行时实现如权利要求1-17中任一所述的方法。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202110369434.9A CN113110838A (zh) | 2021-04-06 | 2021-04-06 | 落地页设计界面展示方法、装置、设备和计算机可读介质 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202110369434.9A CN113110838A (zh) | 2021-04-06 | 2021-04-06 | 落地页设计界面展示方法、装置、设备和计算机可读介质 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN113110838A true CN113110838A (zh) | 2021-07-13 |
Family
ID=76714247
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202110369434.9A Pending CN113110838A (zh) | 2021-04-06 | 2021-04-06 | 落地页设计界面展示方法、装置、设备和计算机可读介质 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN113110838A (zh) |
Citations (5)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN106201459A (zh) * | 2016-06-24 | 2016-12-07 | 武汉斗鱼网络科技有限公司 | 一种快速构建专题落地页的方法及系统 |
CN109918607A (zh) * | 2019-03-20 | 2019-06-21 | 杭州网易再顾科技有限公司 | 页面搭建方法及装置、介质和计算设备 |
CN110888634A (zh) * | 2019-11-04 | 2020-03-17 | 上海硬通网络科技有限公司 | 游戏落地页生成方法、装置、计算机设备和存储介质 |
WO2020140940A1 (zh) * | 2019-01-06 | 2020-07-09 | 阿里巴巴集团控股有限公司 | 代码的生成方法、装置、设备及存储介质 |
CN112434175A (zh) * | 2020-12-10 | 2021-03-02 | 北京城市网邻信息技术有限公司 | 多媒体信息展示方法、装置、电子设备和计算机可读介质 |
-
2021
- 2021-04-06 CN CN202110369434.9A patent/CN113110838A/zh active Pending
Patent Citations (5)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN106201459A (zh) * | 2016-06-24 | 2016-12-07 | 武汉斗鱼网络科技有限公司 | 一种快速构建专题落地页的方法及系统 |
WO2020140940A1 (zh) * | 2019-01-06 | 2020-07-09 | 阿里巴巴集团控股有限公司 | 代码的生成方法、装置、设备及存储介质 |
CN109918607A (zh) * | 2019-03-20 | 2019-06-21 | 杭州网易再顾科技有限公司 | 页面搭建方法及装置、介质和计算设备 |
CN110888634A (zh) * | 2019-11-04 | 2020-03-17 | 上海硬通网络科技有限公司 | 游戏落地页生成方法、装置、计算机设备和存储介质 |
CN112434175A (zh) * | 2020-12-10 | 2021-03-02 | 北京城市网邻信息技术有限公司 | 多媒体信息展示方法、装置、电子设备和计算机可读介质 |
Non-Patent Citations (1)
Title |
---|
吕亮;徐青;施群山;周杨;: "基于定制页面的二维态势数值可视化研究", 系统仿真学报, no. 08 * |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN108833787B (zh) | 用于生成短视频的方法和装置 | |
CN110634049B (zh) | 页面显示内容的处理方法、装置、电子设备及可读介质 | |
US20230024650A1 (en) | Method and apparatus for selecting menu items, readable medium and electronic device | |
US10353876B2 (en) | Dynamic property data integration framework | |
CN111966255A (zh) | 信息显示方法、装置、电子设备和计算机可读介质 | |
CN109816037B (zh) | 提取图像的特征图的方法和装置 | |
CN112954441B (zh) | 视频编辑及播放方法、装置、设备、介质 | |
CN113254136A (zh) | 信息推荐弹窗展示方法、装置、设备和计算机可读介质 | |
CN108595211B (zh) | 用于输出数据的方法和装置 | |
WO2023077951A1 (zh) | 数据渲染方法及装置 | |
CN106919406A (zh) | 一种桌面应用组件发布、更新方法及装置 | |
CN110766780A (zh) | 渲染房间图像的方法、装置、电子设备及计算机可读介质 | |
CN115018909A (zh) | 可行驶区域生成方法、装置、电子设备和计算机可读介质 | |
CN111008047A (zh) | 页面元素冲突的处理方法、装置和电子设备 | |
CN112527436A (zh) | 弹窗显示方法、装置、电子设备和计算机可读介质 | |
CN109672931B (zh) | 用于处理视频帧的方法和装置 | |
CN113110838A (zh) | 落地页设计界面展示方法、装置、设备和计算机可读介质 | |
CN108153845B (zh) | 一种实现后台图像数据导出的方法及装置 | |
CN114327732B (zh) | 页面配置方法、装置、电子设备和计算机可读介质 | |
CN113961280B (zh) | 视图的展示方法、装置、电子设备及计算机可读存储介质 | |
CN111010449B (zh) | 图像信息输出方法、系统、装置、介质及电子设备 | |
CN113791858A (zh) | 一种显示方法、装置、设备及存储介质 | |
CN109062645B (zh) | 用于终端的处理信息的方法和装置 | |
CN111770385A (zh) | 一种卡片显示方法、装置、电子设备及介质 | |
CN110703971A (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 |