页面设计处理方法、设备及存储介质与流程

1.本技术涉及计算机技术领域，尤其涉及一种页面设计处理方法、设备及存储介质。


背景技术：

2.前端界面设计主要包括对网站界面、应用程序(app)界面等的设计，在进行界面设计时，不仅需要考虑视觉和信息的匹配性，还应注意相关视觉元素的布局等。一个好的界面设计，能够提高用户的使用率，因此前端界面设计是非常重要的。
3.目前，前端界面研发流程主要是：产品设计师(product designer，pd)提出具体的需求和目标，界面设计师根据需求和目标进行相应的界面设计，界面设计包括素材的选择与布局等，生成设计草稿，随后再由代码工程师基于设计草稿和界面需求，进行代码层开发。
4.上述研发流程中，产品设计师向界面设计师和代码工程师提出多种业务需求，并不直接参与界面设计，期间往往需要多轮沟通与确认，研发周期比较长。


技术实现要素：

5.本技术实施例提供一种页面设计处理方法、设备及存储介质，可提升设计人员的平台使用体验，大大缩短页面设计与优化的研发周期。
6.本技术实施例的第一方面提供一种页面设计处理方法，应用于电子设备，方法包括：
7.在所述电子设备的显示屏显示页面设计的操作界面，所述操作界面至少包括用于显示待优化页面的第一区域，以及用于提交页面设计需求的第二区域，所述待优化页面是从数据平台获取已开发的任一页面；
8.获取用户在所述第二区域提交的对所述待优化页面的第一优化设计数据；
9.从所述第一优化设计数据中确定可直接调控的第二优化设计数据；
10.基于所述第二优化设计数据，在所述第一区域实时调整所述待优化页面。
11.本技术第一方面的一个可选实施例中，所述第一优化设计数据包括以下至少一项：对所述待优化页面的页面组件的样式设计数据，内容设计数据，行为设计数据，业务定制设计数据。
12.本技术第一方面的一个可选实施例中，所述获取用户在所述第二区域提交的对所述待优化页面的第一优化设计数据，包括：
13.响应于针对所述第一区域的所述待优化页面的任一页面组件的选中操作，在所述第二区域显示所述页面组件的可配置项；其中，所述可配置项包括所述页面组件的样式，内容，行为，业务定制的至少一项；
14.响应于针对所述第二区域所述页面组件的可配置项的配置操作，获取所述第一优化设计数据。
15.本技术第一方面的一个可选实施例中，所述第二优化设计数据包括以下至少一
项：对所述待优化页面的页面组件的样式设计数据，内容设计数据；
16.所述基于所述第二优化设计数据，在所述第一区域实时调整所述待优化页面，包括：
17.基于所述第二优化设计数据中对页面组件的样式设计数据，在所述第一区域实时调整所述待优化页面中所述页面组件的显示样式；和/或
18.基于所述第二优化设计数据中对页面组件的内容设计数据，在所述第一区域实时调整所述待优化页面中所述页面组件的显示内容。
19.本技术第一方面的一个可选实施例中，所述操作界面还包括第三区域，所述第三区域显示用户对所述待优化页面的页面组件的优化设计记录；
20.所述优化设计记录包括待优化的页面组件在所述待优化页面的位置信息和/或索引信息。
21.本技术第一方面的一个可选实施例中，所述第三区域包括可供用户选择的所述优化设计记录的显示模式，所述显示模式包括位置模式和列表模式；
22.所述位置模式用于显示待优化的页面组件在所述待优化页面的位置，所述列表模式用于显示待优化的页面组件的索引。
23.本技术第一方面的一个可选实施例中，所述方法还包括：
24.从所述第一设计优化数据中获取第三优化设计数据，所述第三优化设计数据包括以下至少一项：对页面组件的行为设计数据，业务定制设计数据；
25.向页面设计服务器发送所述第三优化设计数据，以便所述页面设计服务器将所述第三优化设计数据推送至页面开发人员的设备。
26.本技术实施例的第二方面提供一种页面设计处理方法，应用于电子设备，所述电子设备的显示屏显示页面设计的操作界面，所述电子设备包括第一处理单元和第二处理单元，所述方法包括：
27.所述第一处理单元通过所述第二处理单元向页面设计服务器发送页面获取请求；
28.所述第二处理单元接收来自所述页面设计服务器的页面获取响应，所述页面获取响应包括待优化页面的第一地址信息以及页面调控脚本的第二地址信息；
29.所述第二处理单元基于所述第一地址信息获取所述待优化页面，在所述操作界面的第一区域加载显示所述待优化页面；
30.所述第二处理单元基于所述第二地址信息获取所述页面调控脚本，所述页面调控脚本用于识别所述待优化页面的页面设计数据。
31.本技术第二方面的一个可选实施例中，所述第一处理单元通过所述第二处理单元向页面设计服务器发送页面获取请求之前，所述方法还包括：
32.所述第一处理单元在所述操作界面上加载用于提交页面设计需求的第二区域。
33.本技术第二方面的一个可选实施例中，所述方法还包括：
34.响应于针对所述待优化页面的任一页面组件的选中操作，所述第二处理单元基于所述页面调控脚本，获取所述页面组件当前的第一设计数据；
35.所述第二处理单元向所述第一处理单元发送所述第一设计数据；
36.所述第一处理单元在所述操作界面的第二区域显示所述第一设计数据。
37.本技术第二方面的一个可选实施例中，所述方法还包括：
38.响应于针对所述第一设计数据的编辑操作，所述第一处理单元获取所述页面组件最新的第二设计数据；
39.所述第一处理单元向所述第二处理单元发送所述第二设计数据，所述第二设计数据包括对所述页面组件的样式设计数据和/或内容设计数据；
40.所述第二处理单元基于所述第二设计数据，实时调整所述待优化页面中所述页面组件的显示样式和/或显示内容。
41.本技术第二方面的一个可选实施例中，所述第一处理单元通过所述第二处理单元向页面设计服务器发送页面获取请求之前，所述方法还包括：
42.所述第一处理单元在所述操作界面上加载第三区域，所述第三区域显示用户对所述待优化页面的页面组件的优化设计记录，所述优化设计记录包括待优化的页面组件在所述待优化页面的位置信息和/或索引信息。
43.本技术实施例的第三方面提供一种页面设计处理装置，包括：
44.显示模块，用于显示页面设计的操作界面，所述操作界面至少包括用于显示待优化页面的第一区域，以及用于提交页面设计需求的第二区域，所述待优化页面是从数据平台获取已开发的任一页面；
45.获取模块，用于获取用户在所述第二区域提交的对所述待优化页面的第一优化设计数据；
46.处理模块，用于从所述第一优化设计数据中确定可直接调控的第二优化设计数据；基于所述第二优化设计数据，在所述第一区域实时调整所述待优化页面。
47.本技术第三方面的一个可选实施例中，所述第一优化设计数据包括以下至少一项：对所述待优化页面的页面组件的样式设计数据，内容设计数据，行为设计数据，业务定制设计数据。
48.本技术第三方面的一个可选实施例中，显示模块，用于响应于针对所述第一区域的所述待优化页面的任一页面组件的选中操作，在所述第二区域显示所述页面组件的可配置项；其中，所述可配置项包括所述页面组件的样式，内容，行为，业务定制的至少一项；
49.获取模块，用于响应于针对所述第二区域所述页面组件的可配置项的配置操作，获取所述第一优化设计数据。
50.本技术第三方面的一个可选实施例中，所述第二优化设计数据包括以下至少一项：对所述待优化页面的页面组件的样式设计数据，内容设计数据；
51.处理模块，用于基于所述第二优化设计数据中对页面组件的样式设计数据，在所述第一区域实时调整所述待优化页面中所述页面组件的显示样式；和/或
52.基于所述第二优化设计数据中对页面组件的内容设计数据，在所述第一区域实时调整所述待优化页面中所述页面组件的显示内容。
53.本技术第三方面的一个可选实施例中，所述操作界面还包括第三区域，所述第三区域显示用户对所述待优化页面的页面组件的优化设计记录；
54.所述优化设计记录包括待优化的页面组件在所述待优化页面的位置信息和/或索引信息。
55.本技术第三方面的一个可选实施例中，所述第三区域包括可供用户选择的所述优化设计记录的显示模式，所述显示模式包括位置模式和列表模式；
56.所述位置模式用于显示待优化的页面组件在所述待优化页面的位置，所述列表模式用于显示待优化的页面组件的索引。
57.本技术第三方面的一个可选实施例中，获取模块，用于从所述第一设计优化数据中获取第三优化设计数据，所述第三优化设计数据包括以下至少一项：对页面组件的行为设计数据，业务定制设计数据；
58.可选的，所述页面设计处理装置还包括：发送模块。
59.发送模块，用于向页面设计服务器发送所述第三优化设计数据，以便所述页面设计服务器将所述第三优化设计数据推送至页面开发人员的设备。
60.本技术实施例的第四方面提供一种电子设备，包括：显示器，存储器，处理器以及计算机程序；所述显示器用于显示页面设计的操作界面，所述操作界面至少包括用于显示待优化页面的第一区域，以及用于提交页面设计需求的第二区域，所述待优化页面是从数据平台获取已开发的任一页面；
61.所述计算机程序存储在所述存储器中，并被配置为由所述处理器执行以实现如本技术第一方面任一项所述的方法，或者如本技术第二方面任一项所述的方法。
62.本技术实施例的第五方面提供一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行以实现如本技术第一方面任一项所述的方法，或者如本技术第二方面任一项所述的方法。
63.本技术实施例的第六方面提供一种计算机程序产品，包括计算机程序，所述计算机程序被处理器执行时实现本技术第一方面任一项所述的方法，或者如本技术第二方面任一项所述的方法。
64.本技术实施例提供一种页面设计处理方法、设备及存储介质，该方法包括：终端设备在显示屏显示页面设计的操作界面，该操作界面至少包括用于显示待优化页面的第一区域，以及用于提交页面设计需求的第二区域；通过获取用户在第二区域提交的对待优化页面的第一优化设计数据，从第一优化设计数据中确定可直接调控的第二优化设计数据；基于第二优化设计数据，在操作界面的第一区域实时调整待优化页面的页面效果。其中，待优化页面可以是线上真实页面。上述方案为产品设计师提供了参与页面设计的工具化产品，产品设计师可实时调控页面、查看效果，提升了产品设计师的平台使用体验。对于简单的页面样式和内容的设计，不必提交给页面开发人员，大大缩短了页面设计与优化的研发周期。
附图说明
65.图1为本技术实施例提供的一种页面设计处理方法的应用场景示意图；
66.图2为本技术实施例提供的一种界面示意图；
67.图3为本技术实施例提供的一种页面设计处理方法的流程示意图；
68.图4a至4d为本技术实施例提供的第二区域可配置的各类优化设计数据的示意图；
69.图5为本技术实施例提供的一种界面示意图；
70.图6为本技术实施例提供的一种界面示意图；
71.图7为本技术实施例提供的一种界面示意图；
72.图8为本技术实施例提供的一种页面设计处理方法的流程示意图；
73.图9为本技术实施例提供的一种页面设计处理方法的流程示意图；
74.图10为本技术实施例提供的一种页面设计处理装置的结构示意图；
75.图11为本技术实施例提供的一种电子设备的硬件结构图。
具体实施方式
76.为使本技术实施例的目的、技术方案和优点更加清楚，下面将结合本技术实施例中的附图，对本技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本技术一部分实施例，而不是全部的实施例。基于本技术中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本技术保护的范围。
77.本技术实施例的说明书、权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本技术的实施例能够以除了在这里图示或描述之外的顺序实施。
78.应当理解，本文中使用的术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。
79.下面首先对本技术实施例涉及到的专业名词进行简要说明。
80.埋点：又称为事件追踪，指的是针对特定用户行为或事件进行捕获、处理和发送的相关技术及其实施过程。埋点是用来收集用户行为数据，例如想要了解一个用户在app中点击了哪些按钮，看了哪些页面等，就可以通过埋点来实现。
81.ab测试：又称为分离测试，是比较两个版本的页面，确定哪个版本的页面更优。具体的做法是在同一时间维度，分别让组成成分相同或相似的用户群组随机的访问这些页面，收集各群组的用户体验数据和业务数据，最后分析确定出较好版本正式采用。
82.现阶段，前端界面设计过程中产品设计师的参与度不高，产品设计师主要是提出需求，有比较抽象的需求，例如对页面组件的功能要求等，也有比较具象的需求，例如对页面背景色的要求等。针对比较具象的需求，很多都是通过口述或提交文档需求的方式，需求描述可能并不准确，例如背景色为红色，需要多次沟通才能确定产品设计师想要的是哪一种红色。
83.通常情况下，数据平台需要设计的页面数量巨大，如果产品设计师提出的页面设计需求不清楚，整个研发流程需要往复多次，严重影响页面开发进度。因此，本技术实施例提供的技术方案中，页面设计平台提供一种页面设计的操作界面，使得产品设计师可以在提交需求的同时，直接参与页面(包括已发布的线上页面和已开发但未上线页面)的设计与优化，这里尤其是指产品设计师可以直接参与数据平台上已有页面的设计与优化。界面工程师以及代码工程师均可以在页面设计平台查看产品设计师的改动以及提交的需求。对于比较具象的页面设计，例如页面组件的样式、内容等，产品设计师可以直接在操作界面上直接编辑，而对于比较抽象的页面设计，例如页面组件的功能优化等，往往设计代码层的改动，产品设计师可在操作界面输入具体的需求，随时修改提交给代码工程师。上述方案可提升设计人员的平台使用体验，尤其可提升产品设计师的平台使用体验，为产品设计师提供了参与页面设计的工具化产品。与此同时，上述方案大大缩短了页面设计与优化的研发周
期，可加速数据平台产出优质页面。
84.本技术实施例提供的页面设计处理方法，可以适用于任何具有显示功能的电子设备。下文以电子设备为终端设备为例进行方案说明。
85.图1为本技术实施例提供的一种页面设计处理方法的应用场景示意图。如图1所示，本实施例的应用场景包括终端设备101、页面设计服务器102以及终端设备103，终端设备101和终端设备103分别与页面设计服务器102通信连接。其中，终端设备101可以是页面设计的产品设计师的终端设备，终端设备103可以是页面设计的研发人员的终端设备。
86.作为一种示例，产品设计师通过终端设备101访问页面设计服务器102，提交页面设计需求；研发人员通过终端设备103访问页面设计服务器102，获取页面设计需求，研发人员审核无误后，确定页面设计需求的研发任务；研发人员在终端设备103本地完成页面代码层开发，最终将页面设计代码上传至页面设计服务器102，以便进行页面的效果测试。
87.作为一种示例，产品设计师通过终端设备101访问页面设计服务器102，终端设备101的显示屏显示页面设计的操作界面。示例性的，图2为本技术实施例提供的一种界面示意图，图2中a所示的操作界面包括内嵌页面展示区201以及页面优化编辑区202，其中，内嵌页面展示区201虚拟化展示一智能手机。该智能手机上加载内嵌页面，内嵌页面即待优化页面，可以是某应用程序的真实页面。产品设计师可在内嵌页面展示区201中点选内嵌页面的任一页面组件，并在页面优化编辑区202对点选的页面组件的样式和内容进行修改，或者，增加新的设计需求。
88.对于页面组件的样式和内容的修改，产品设计师可直接在内嵌页面展示区201上实时查看对页面组件的调整效果；对于页面组件新增的设计需求，终端设备101需要将新增的设计需求打包上传页面设计服务器102，以便研发人员对新增的设计需求进行页面代码层开发。
89.可选的，在一些实施例中，内嵌页面展示区201还可以虚拟化展示其他类型的终端设备，如平板电脑、智能手表表盘等，对此本技术实施例不作任何限制。
90.可选的，在一些实施例中，图2中b所示的操作界面除了包括上述的内嵌页面展示区201和页面优化编辑区202，还包括页面优化记录的导航区203，导航区203记录产品设计师在提交页面设计需求前，对内嵌页面所作的优化配置。产品设计师可通过导航区203快速定位每项优化配置，可在页面优化编辑区202查看优化配置的具体数据，也可在内嵌页面展示区201查看优化配置在页面上的展示效果。
91.可选的，在一些实施例中，操作界面上加载的内嵌页面可以是来自数据平台上的任一真实页面，其中数据平台可以是提供不同业务的网络平台，例如电商平台、社交平台、短视频平台等，对此本技术实施例不作任何限制。
92.本实施例中，终端设备101和终端设备103可以是具有显示功能的任意电子设备，包括但不限于智能手机、笔记本电脑、平板电脑、智能车载设备、智能穿戴设备、智慧屏等。
93.本实施例中，页面设计服务器102也可称为页面设计平台，可提供对网页或应用程序等页面的设计服务。可选的，页面设计服务器102可以是普通服务器或云服务器，云服务器又称为云计算服务器或云主机，是云计算服务体系中的一项主机产品。可选的，页面设计服务器102也可以是分布式系统的服务器，或者是结合了区块链的服务器。
94.基于上述应用场景，下面通过具体实施例对本技术实施例提供的页面设计处理方
案进行详细说明。需要说明的是，本技术实施例提供的技术方案可以包括以下内容中的部分或全部，下面这几个具体的实施例可以相互结合，对于相同或相似的概念或过程可能在某些实施例中不再赘述。
95.图3为本技术实施例提供的一种页面设计处理方法的流程示意图。本实施例提供的页面设计处理方法可应用于图1所示的终端设备101，下面以终端设备为例进行方案说明。如图3所示，本实施例的页面设计处理方法包括以下步骤：
96.步骤301、在终端设备的显示屏显示页面设计的操作界面。
97.页面设计平台提供页面设计的操作界面，产品设计师可通过终端设备访问页面设计平台，终端设备的显示屏上加载该操作界面。可选的，操作界面至少包括用于显示待优化页面的第一区域，以及用于提交页面设计需求的第二区域。示例性的，图2中a或b所示的内嵌页面展示区201即第一区域，页面优化编辑区202即第二区域。
98.可选的，待优化页面可以是从数据平台获取已开发的任一页面，已开发的页面包括已开发上线的页面和已开发未上线的页面，例如电商平台提供的线上某一真实物品浏览页面，又例如页面设计平台已发布的某业务页面等。
99.可选的，操作界面的第二区域可显示待优化页面已有的页面设计数据，以供产品设计师查看或修改。
100.综上可知，产品设计师可以在操作界面的第一区域查看待优化页面的视觉效果，还可以在操作界面的第二区域提交新的页面设计需求或者修改已有的页面设计数据。
101.步骤302、获取用户在操作界面的第二区域提交的对待优化页面的第一优化设计数据。
102.本实施例中，用户可以是产品设计师或界面设计师。
103.可选的，第一优化设计数据包括以下至少一项：对待优化页面的页面组件的样式设计数据，内容设计数据，行为设计数据，业务定制设计数据。
104.示例性的，图4a至4d为本技术实施例提供的第二区域可配置的各类优化设计数据的示意图。如图4a所示，页面组件的样式设计数据包括例如页面组件的尺寸、位置、文字、背景、边框、布局等。如图4b所示，页面组件的内容设计数据包括例如智能物料、文字内容、图片内容、列表内容等，其中智能物料是指页面设计服务器预设的可供pd选取的、包含例如文本、图片、视频等物料。如图4c所示，页面组件的行为设计数据是指c端(即消费者端)用户针对页面组件的行为，包括例如点击事件行为(较为复杂时可以输入文本)、埋点行为、自定义优化建议(无法用现在的配置项描述时使用)等。如图4d所示，页面组件的业务定制设计数据包括例如智能用户界面ui、ab(测试)分桶策略(方便产品设计师pd实验)、通用唤端策略(如打开某应用程序等操作)、动画方案(可以描述添加动画)、通用分享策略(用户进行页面分享时)等。
105.需要指出的是，上述任意类别的优化设计数据都是针对待优化页面中的某一页面组件，页面组件也可称为页面元素，页面元素可以理解为页面上可配置的最小单元。
106.本实施例中，第一优化设计数据包括对待优化页面的至少一个页面组件的优化设计数据。具体的，可通过以下步骤获取任意一个页面组件的优化设计数据：
107.步骤3021、响应于针对第一区域的待优化页面的任一页面组件的选中操作，在第二区域显示页面组件的可配置项。
108.步骤3022、响应于针对第二区域页面组件的可配置项的配置操作，获取第一优化设计数据。其中，可配置项包括页面组件的样式，内容，行为，业务定制的至少一项。
109.示例性的，图5为本技术实施例提供的一种界面示意图。图5所示的操作界面包括用于显示待优化页面的第一区域501，以及用于提交页面设计需求的第二区域502。用户点击第一区域501中待优化页面的页面组件503，在第二区域502中显示页面组件503的可配置项，如图5中的内容优化配置项，用户可在该内容优化配置项修改静态文案，获取修改后的内容设计数据。当然，用户还可以在第二区域502中修改其他可配置项，如点击第二区域502中按钮504，查看、修改页面组件503已配置的样式设计数据。用户还可以在第二区域502中新增其他可配置项，如点击第二区域502中按钮505，新增对页面组件503的行为的配置。
110.步骤303、从第一优化设计数据中确定可直接调控的第二优化设计数据。
111.步骤304、基于第二优化设计数据，在操作界面的第一区域实时调整待优化页面。
112.可选的，第二优化设计数据包括以下至少一项：对待优化页面的页面组件的样式设计数据，内容设计数据。
113.本实施例的一个可选实施例中，若第二优化设计数据包括对待优化页面的页面组件的样式设计数据，则可以基于第二优化设计数据中对页面组件的样式设计数据，在第一区域实时调整待优化页面中页面组件的显示样式。
114.本实施例的一个可选实施例中，若第二优化设计数据包括对待优化页面的页面组件的内容设计数据，则可以基于第二优化设计数据中对页面组件的内容设计数据，在第一区域实时调整待优化页面中页面组件的显示内容。
115.本技术实施例示出的页面设计处理方法中，终端设备在显示屏显示页面设计的操作界面，该操作界面至少包括用于显示待优化页面的第一区域，以及用于提交页面设计需求的第二区域；通过获取用户在第二区域提交的对待优化页面的第一优化设计数据，从第一优化设计数据中确定可直接调控的第二优化设计数据；基于第二优化设计数据，在操作界面的第一区域实时调整待优化页面的页面效果。其中，待优化页面可以是线上真实页面。上述方案为产品设计师提供了参与页面设计的工具化产品，产品设计师可实时调控页面、查看效果，提升了产品设计师的平台使用体验。对于简单的页面样式和内容的设计，不必提交给页面开发人员，大大缩短了页面设计与优化的研发周期。
116.可选的，在一些实施例中，终端设备从第一设计优化数据中获取第三优化设计数据，可向页面设计服务器发送第三优化设计数据，以便页面设计服务器将第三优化设计数据推送至页面开发人员(即代码工程师)的设备。可选的，第三优化设计数据包括以下至少一项：对页面组件的行为设计数据，业务定制设计数据。
117.基于上述实施例，第一优化设计数据包括两大类，一类是可直接调控显示于第一区域的待优化页面上的数据，即上述的第二优化设计数据，包括例如页面组件的样式、内容等设计数据，另一类是需要其他人员协助开发的数据，即上述的第三优化设计数据，包括例如页面组件的行为、业务、业务定制等设计数据。
118.基于上述各实施例，页面设计平台提供的操作界面向产品设计师开放了对线上真实页面的编辑权限，产品设计师可以在提交抽象需求(即上述的第三优化设计数据)的同时，直接对待优化页面中简单而具象的页面内容进行修改，并在操作界面上实时地展示修改效果，避免非必要的需求提交，提升产品设计师的页面设计参与度，提高页面设计优化的
效率，可缩短页面设计优化的研发周期。
119.在上述实施例的基础上，可选的，页面设计的操作界面还可以包括第三区域，第三区域显示用户对待优化页面的页面组件的优化设计记录。其中，优化设计记录包括待优化的页面组件在待优化页面的位置信息和/或索引信息。
120.可选的，第三区域包括可供用户选择的优化设计记录的显示模式。优先设计记录的显示模式包括位置模式和列表模式。其中，位置模式用于显示待优化的页面组件在待优化页面的位置，列表模式用于显示待优化的页面组件的索引。
121.示例性的，图6为本技术实施例提供的一种界面示意图。图6所示操作界面的第三区域506以位置模式显示用户对待优化页面的页面组件的优化设计记录，第三区域506显示有7个优化项，这7个优化项分别位于第三区域的不同位置，与待优化页面的7个页面组件具有对应关系，指示用户对待优化页面中的7个页面组件进行了优化配置。
122.作为一种示例，用户可以通过点选第三区域的任一优化项，查看该优化项对应的页面组件在待优化页面上的显示效果。例如，用户在第三区域506点选优化项3，在第一区域501的待优化页面中以矩形框形式框选优化项3对应的页面组件503，同时可在第二区域502显示页面组件503已配置的内容，如静态文案“9.9元3件”。
123.作为一种示例，用户还可以点选第一区域的待优化页面上的任一页面组件，在第三区域突显该页面组件对应的优化项(指示位置信息)，同时可在第二区域显示该页面组件已配置的内容。
124.基于上述示例可知，用户点选操作界面的第一区域或第三区域，均可实现操作界面的三个区域的联动显示，方便用户查看或修改待优化页面的配置数据，可提升用户页面设计的使用体验。
125.示例性的，图7为本技术实施例提供的一种界面示意图。图7所示操作界面的第三区域以列表模式显示用户对待优化页面的页面组件的优化设计记录，第三区域可按照优化配置的时间顺序，依次记录对不同页面组件的优化配置的索引。作为一种示例，用户点击图7中第三区域506的优化项6，优化项6当前显示的索引包括内容，指示优化项6对应的页面组件仅配置了组件的内容，如优化项6对应待优化页面中矩形框507的页面组件显示的内容为“立即下单”，用户可在第二区域502增加对该页面组件的行为设计数据的配置，如配置点击事件行为、埋点行为等。应理解，用户在完成行为设计数据配置后，第三区域506的优化项6显示的索引将包括内容和行为两项。
126.基于本示例可知，用户可在第三区域的列表模式下查看页面组件的优化配置记录，查看每个页面组件配置了哪些数据，如有的页面组件配置了内容和行为，有的页面组件配置仅配置了内容，方便用户快速定位页面组件，增加或修改页面组件的设计数据。
127.在上述实施例的基础上，本技术还提供一种页面设计处理方法，该方法同样适用于图1所示的终端设备101，该方法涉及终端设备内部的交互过程。下面结合附图对本实施例的页面设计处理方法进行详细说明。
128.图8为本技术实施例提供的一种页面设计处理方法的流程示意图。本实施例的终端设备包括第一处理单元和第二处理单元，页面处理方法可以包括以下步骤：
129.步骤801、第一处理单元通过第二处理单元向页面设计服务器发送页面获取请求。
130.本实施例中，第一处理单元用于控制操作界面的第二区域，或者，用于控制操作界
面的第二区域和第三区域，即第一处理单元用于控制操作界面中除内嵌页面之外的区域。第二处理单元用于控制操作界面的第一区域，即第二处理单元用于控制操作界面的内嵌页面。
131.作为一种示例，第一处理单元通过第二处理单元向页面设计服务器发送页面获取请求之前，第一处理单元在操作界面上加载用于提交页面设计需求的第二区域。
132.作为一种示例，第一处理单元通过第二处理单元向页面设计服务器发送页面获取请求之前，第一处理单元在操作界面上加载用于提交页面设计需求的第二区域以及第三区域。其中，第三区域显示用户对待优化页面的页面组件的优化设计记录，优化设计记录包括待优化的页面组件在待优化页面的位置信息和/或索引信息。
133.基于上述几个示例可知，第一处理单元首先加载操作界面的基础区域(如第二区域，或者，第二区域和第三区域)，在完成基础区域加载后，第一处理单元通知第二处理单元开始初始化操作界面的内嵌页面(即第一区域显示的页面)，第二处理单元可从页面设计服务器获取内嵌页面。
134.步骤802、第二处理单元接收来自页面设计服务器的页面获取响应，页面获取响应包括待优化页面的第一地址信息以及页面调控脚本的第二地址信息。
135.步骤803、第二处理单元基于第一地址信息获取待优化页面，在操作界面的第一区域加载显示待优化页面。
136.步骤804、第二处理单元基于第二地址信息获取页面调控脚本，页面调控脚本用于识别待优化页面的页面设计数据。
137.本实施例中，待优化页面可以是某数据平台已发布的任一真实页面，例如电商平台的物品浏览页面等。终端设备的第二处理单元可通过页面设计服务器获取线上真实页面的第一地址信息，如页面的统一资源定位符(uniform resource locator，url)地址，第二处理单元基于页面的url地址获取线上真实页面的页面数据，并将页面数据加载到操作界面的第一区域，以便用户在操作界面上对线上真实页面进行优化设计。
138.需要指出的是，页面设计服务器在向终端设备的第二处理单元发送线上真实页面的第一地址信息时，还附带了页面调控脚本的第二地址信息，以便第二处理单元具备页面调控能力，与第一处理单元交互线上真实页面的页面数据。
139.可选的，作为一种示例，第二处理单元基于第二地址信息获取页面调控脚本，并将页面调控脚本存储于第二处理单元的存储模块，以便后续直接调用本地的页面调控脚本。
140.可选的，作为一种示例，第二处理单元在完成待优化页面的加载显示，以及页面调用脚本的加载后，第二处理单元向第一处理单元发送通知消息，通知消息用于指示已完成待优化页面和页面调控脚本的初始化加载。
141.可选的，作为一种示例，响应于针对待优化页面的任一页面组件的选中操作，第二处理单元基于页面调控脚本，获取页面组件当前的第一设计数据；第二处理单元向第一处理单元发送第一设计数据；第一处理单元在操作界面的第二区域显示第一设计数据。
142.本示例中，页面组件当前的第一设计数据包括以下至少一项：对页面组件的样式设计数据，内容设计数据，行为设计数据，业务定制设计数据。第二处理单元将第一设计数据传递给第一处理单元后，第一处理单元可基于第一设计数据，在操作界面的第二区域显示第一设计数据。
143.可选的，第一处理单元还可以基于第一设计数据，在操作界面的第三区域显示第一设计数据，第三区域用于指示第一设计数据中页面组件的位置和/或索引。
144.由上述示例可知，第二处理单元基于页面调控脚本，可识别用户在待优化页面点选的任一页面组件，并将该页面组件的设计数据发送至第一处理单元，以便第一处理单元将设计数据加载显示到第二区域和第三区域，用户可在第二区域对页面组件的设计数据进行重新配置，或者，增加新的页面设计需求。
145.可选的，作为一种示例，响应于针对第一设计数据的编辑操作，第一处理单元获取页面组件最新的第二设计数据；第一处理单元向第二处理单元发送第二设计数据，第二设计数据包括对页面组件的样式设计数据和/或内容设计数据；第二处理单元基于第二设计数据，实时调整待优化页面中页面组件的显示样式和/或显示内容。
146.一种可能的实施方式中，第一处理单元响应于用户在第二区域针对任一页面组件的内容的编辑操作，获取该页面组件最新的内容设计数据；第一处理单元将该页面组件最新的内容设计数据发送至第二处理单元，第二处理单元基于该页面组件最新的内容设计数据，实时调整操作界面第一区域中待优化页面上该页面组件的显示内容。示例性的，用户在图6所示第二区域502中修改页面组件503的静态文案，将“9.9元3件”修改为“9.9元4件”，第一处理单元将修改内容实时发送至第二处理单元，第二处理单元实时调整第一区域501的页面组件503的显示内容。可选的，显示内容除了包括上述文本内容外，还可以包括图片内容，音视频内容等，对此本实施例不作任何限制。
147.一种可能的实施方式中，第一处理单元响应于用户在第二区域针对任一页面组件的样式的编辑操作，获取该页面组件最新的样式设计数据；第一处理单元将该页面组件最新的样式设计数据发送至第二处理单元，第二处理单元基于该页面组件最新的样式设计数据，实时调整操作界面第一区域中待优化页面上该页面组件的显示样式。示例性的，用户在图6所示第二区域502中修改页面组件503中文字尺寸、颜色、字体样式等，第一处理单元将修改样式实时发送至第二处理单元，第二处理单元实时调整第一区域501的页面组件503中文字的尺寸、颜色、字体样式。可选的，页面组件的显示样式除了包括页面组件中文字的尺寸、颜色、样式外，还可以包括页面组件的背景颜色、边框、尺寸、位置等，对此本实施例不作任何限制。
148.由上述示例可知，对于待优化页面中页面组件的内容设计数据和样式设计数据，第一处理单元可直接将用户编辑后的设计数据发送至第二处理单元，由第二处理单元基于页面调控脚本将用户编辑后的设计数据实时地加载显示到操作界面的内嵌页面中，方便用户直接查看页面优化效果，提升用户页面设计的使用体验。
149.本技术实施例示出的页面设计处理方法中，终端设备包括第一处理单元和第二处理单元，第二处理单元预先从页面设计服务器获取页面调控脚本，第二处理单元基于该页面调控脚本读取操作界面上内嵌页面的页面设计数据，并通过与第一处理单元交互页面设计数据。第一处理单元在获取用户在其控制区域的界面操作后，可向第二处理单元发送用户对内嵌页面的页面组件内容和/或样式的编辑数据，第二处理单元可实时调整内嵌页面中页面组件的内容和/或样式，用户可直接在操作界面查看编辑后的页面效果，无需将编辑数据提交给代码工程师，进行代码层面的修改。上述方案为产品设计师提供了参与页面设计的工具化产品，可提升产品设计师的平台使用体验，同时大大缩短了页面设计与优化的
研发周期。
150.图9为本技术实施例提供的一种页面设计处理方法的流程示意图。本实施例提供的页面设计处理方法涉及终端设备与服务端(即页面设计服务器)的交互，其中终端设备包括第一处理单元和第二处理单元。如图9所示，本实施例的页面设计处理方法包括两个阶段，分别为调控准备阶段和调控执行阶段。
151.本实施例中，调控准备阶段主要包括以下几个步骤：
152.步骤1、第一处理单元加载操作界面，开始初始化内嵌页(即上文的待优化页面)，第一处理单元通过第二处理单元向服务端询问内嵌页的地址信息(即上文的待优化页面的第一地址信息)。
153.步骤2、服务端通过主文档代理方式追加页面调控脚本。即服务端提供内嵌页的地址信息，同时附带页面调控脚本的地址信息，向终端设备的第二处理单元发送包含内嵌页地址信息和页面调控脚本的地址信息。其中，页面调控脚本赋予终端设备第二处理单元识别线上任一真实页面的页面设计数据的能力。
154.步骤3、第二处理单元加载页面调控脚本。
155.步骤4、第二处理单元在完成内嵌页加载(页面准备完成)后，通知第一处理单元内嵌页已加载完毕。
156.步骤5、第一处理单元读取已有的调控内容(即上文的优化设计记录)，第一处理单元将已有的调控内容传递至第二处理单元，由第二处理单元基于页面调控脚本，将已有的调控内容加载(回写)到内嵌页上。
157.应理解，如果是新的调控过程，则本步骤中已有的调控内容为空。
158.本实施例中，调控执行阶段主要包括以下步骤：
159.步骤1、第一处理单元获取用户对页面优化项的编辑操作，向第二处理单元发送页面编辑数据，页面编辑数据包括对页面组件的样式、内容、行为、业务定制等可调控项的编辑数据。
160.步骤2、第二处理单元基于页面编辑数据在内嵌页显示编辑后的优化项。其中在内嵌页可直接显示的优化项包括例如页面组件的样式和/或内容。
161.步骤3、第二处理单元向第一处理单元传递线上实时的页面设计数据，第一处理单元记录和显示编辑后的优化项。其中，第一处理单元可在操作界面的第三区域记录编辑后的优化项，在操作界面的第二区域显示编辑后的优化项。
162.步骤4、第一处理单元向服务端同步编辑后的优化项，即在服务端留存页面调控记录。
163.本实施例示出的页面设计处理方法，通过调控准备阶段在终端设备加载操作界面的各个区域，其中第二处理单元加载用于显示内嵌页的第一区域，第一处理单元加载用于提交优化项的第二区域和用于记录优化项的第三区域。通过调控执行阶段中第一处理单元和第二处理单元之间的数据交互，实现对内嵌页优化项数据的实时显示和记录。上述方案可提升产品设计师的平台使用体验，同时大大缩短了页面设计与优化的研发周期。
164.上文描述了本技术实施例提供的页面设计处理方法，下面将描述本技术实施例提供的页面设计处理装置。本技术实施例可以根据上述方法实施例对页面设计处理装置进行功能模块的划分，例如，可以对应各个功能划分各个功能模块，也可以将两个或两个以上的
功能集成在一个处理模块中。上述集成的模块既可以使用硬件的形式实现，也可以使用软件功能模块的形式实现。需要说明的是，本技术实施例中对模块的划分是示意性的，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式。下面以使用对应各个功能划分各个功能模块为例进行说明。
165.图10为本技术实施例提供的一种页面设计处理装置的结构示意图。如图10所示，本实施例的页面设计处理装置1000，包括：显示模块1001，获取模块1002以及处理模块1003。
166.显示模块1001，用于显示页面设计的操作界面，所述操作界面至少包括用于显示待优化页面的第一区域，以及用于提交页面设计需求的第二区域，所述待优化页面是从数据平台获取已开发的任一页面；
167.获取模块1002，用于获取用户在所述第二区域提交的对所述待优化页面的第一优化设计数据；
168.处理模块1003，用于从所述第一优化设计数据中确定可直接调控的第二优化设计数据；基于所述第二优化设计数据，在所述第一区域实时调整所述待优化页面。
169.本实施例的一个可选实施例中，所述第一优化设计数据包括以下至少一项：对所述待优化页面的页面组件的样式设计数据，内容设计数据，行为设计数据，业务定制设计数据。
170.本实施例的一个可选实施例中，显示模块1001，用于响应于针对所述第一区域的所述待优化页面的任一页面组件的选中操作，在所述第二区域显示所述页面组件的可配置项；其中，所述可配置项包括所述页面组件的样式，内容，行为，业务定制的至少一项；
171.获取模块1002，用于响应于针对所述第二区域所述页面组件的可配置项的配置操作，获取所述第一优化设计数据。
172.本实施例的一个可选实施例中，所述第二优化设计数据包括以下至少一项：对所述待优化页面的页面组件的样式设计数据，内容设计数据；
173.处理模块1003，用于基于所述第二优化设计数据中对页面组件的样式设计数据，在所述第一区域实时调整所述待优化页面中所述页面组件的显示样式；和/或
174.基于所述第二优化设计数据中对页面组件的内容设计数据，在所述第一区域实时调整所述待优化页面中所述页面组件的显示内容。
175.本实施例的一个可选实施例中，所述操作界面还包括第三区域，所述第三区域显示用户对所述待优化页面的页面组件的优化设计记录；
176.所述优化设计记录包括待优化的页面组件在所述待优化页面的位置信息和/或索引信息。
177.本实施例的一个可选实施例中，所述第三区域包括可供用户选择的所述优化设计记录的显示模式，所述显示模式包括位置模式和列表模式；
178.所述位置模式用于显示待优化的页面组件在所述待优化页面的位置，所述列表模式用于显示待优化的页面组件的索引。
179.本实施例的一个可选实施例中，获取模块1002，用于从所述第一设计优化数据中获取第三优化设计数据，所述第三优化设计数据包括以下至少一项：对页面组件的行为设计数据，业务定制设计数据；
180.可选的，所述页面设计处理装置1000还包括：发送模块1004。
181.发送模块1004，用于向页面设计服务器发送所述第三优化设计数据，以便所述页面设计服务器将所述第三优化设计数据推送至页面开发人员的设备。
182.本实施例提供的页面设计处理装置，可以执行前述图3所示方法实施例的技术方案，其实现原理和技术效果类似，此处不再赘述。
183.图11为本技术实施例提供的一种电子设备的硬件结构图。如图11所示，本实施例提供的电子设备1100，包括：
184.显示器1101，存储器1102，处理器1103以及计算机程序；其中，显示器1101用于显示页面设计的操作界面，所述操作界面至少包括用于显示待优化页面的第一区域，以及用于提交页面设计需求的第二区域，所述待优化页面是从数据平台获取已开发的任一页面。计算机程序存储在存储器1102中，并被配置为由处理器1103执行以实现前述任一方法实施例的技术方案，其实现原理和技术效果类似，此处不再赘述。
185.可选的，存储器1102既可以是独立的，也可以跟处理器1103集成在一起。当存储器1102是独立于处理器1103之外的器件时，电子设备1100还包括：总线1104，用于连接存储器1102和处理器1103。
186.本技术实施例提供一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器1103执行以实现如前述任一方法实施例的技术方案。
187.本技术实施例提供一种计算机程序产品，包括计算机程序，所述计算机程序被处理器执行时实现如前述任一方法实施例的技术方案。
188.本技术实施例提供了一种芯片，包括：处理模块与通信接口，该处理模块能执行前述任一方法实施例的技术方案。
189.可选的，该芯片还包括存储模块(如，存储器)，存储模块用于存储指令，处理模块用于执行存储模块存储的指令，并且对存储模块中存储的指令的执行使得处理模块执行前述任一方法实施例的技术方案。
190.应理解，上述处理器可以是中央处理单元(英文：central processing unit，简称：cpu)，还可以是其他通用处理器、数字信号处理器(英文：digital signal processor，简称：dsp)、专用集成电路(英文：application specific integrated circuit，简称：asic)等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。结合发明所公开的方法的步骤可以直接体现为硬件处理器执行完成，或者用处理器中的硬件及软件模块组合执行完成。
191.存储器可能包含高速ram存储器，也可能还包括非易失性存储nvm，例如至少一个磁盘存储器，还可以为u盘、移动硬盘、只读存储器、磁盘或光盘等。
192.总线可以是工业标准体系结构(industry standard architecture，isa)总线、外部设备互连(peripheral component，pci)总线或扩展工业标准体系结构(extended industry standard architecture，eisa)总线等。总线可以分为地址总线、数据总线、控制总线等。为便于表示，本技术附图中的总线并不限定仅有一根总线或一种类型的总线。
193.上述存储介质可以是由任何类型的易失性或非易失性存储设备或者它们的组合实现，如静态随机存取存储器(sram)，电可擦除可编程只读存储器(eeprom)，可擦除可编程只读存储器(eprom)，可编程只读存储器(prom)，只读存储器(rom)，磁存储器，快闪存储器，
磁盘或光盘。存储介质可以是通用或专用计算机能够存取的任何可用介质。
194.一种示例性的存储介质耦合至处理器，从而使处理器能够从该存储介质读取信息，且可向该存储介质写入信息。当然，存储介质也可以是处理器的组成部分。处理器和存储介质可以位于专用集成电路(application specific integrated circuits，简称：asic)中。当然，处理器和存储介质也可以作为分立组件存在于电子设备中。
195.最后应说明的是：以上各实施例仅用以说明本技术的技术方案，而非对其限制；尽管参照前述各实施例对本技术进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本技术各实施例的技术方案的范围。