页面访问方法、装置、计算机设备及可读存储介质与流程

文档序号:32788486发布日期:2023-01-03 20:13阅读:22来源:国知局
页面访问方法、装置、计算机设备及可读存储介质与流程

1.本技术涉及互联网技术领域,特别是涉及一种页面访问方法、装置、计算机设备及可读存储介质。


背景技术:

2.随着互联网技术的发展,页面的设计水平也在不断提升,页面设计技术在引导功能的设计中也得到了较为广泛的应用。在产品更新后,项目开发者通常需要设计引导页面指引用户了解并使用新增的功能,所以引导页面的显示质量一定程度上会影响用户能否快速、有效地了解产品的更新内容与更新后的使用方法。
3.在传统的页面显示方法中,通常会对重要功能区域或更新区域进行标注指引,所述标注指引通常是逐页显示的静态页面。然而每当产品更新时,设计人员都需要针对更新内容重新设计静态引导页面,例如,当某个交互按键从原产品的左上方移动至右上方时,设计人员则需要重新布局设计以提供新的静态引导页面。因此,传统的静态页面显示方法无疑增加了设计人员的设计成本,降低了引导页面设计效率。


技术实现要素:

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.图1为一个实施例中页面访问方法的应用环境图;
35.图2为一个实施例中页面访问方法的流程示意图;
36.图3为一个实施例中页面访问方法中确定引导对象位置的示意图;
37.图4为一个实施例中引导对象的示意图;
38.图5为一个具体实施例中页面访问方法的流程示意图;
39.图6为一个具体实施例中页面访问方法的效果展示示意图;
40.图7为一个实施例中页面访问装置的结构框图。
41.附图说明:11、目标对象;12、左侧水平线;13、右侧水平线;14、上侧垂直线;15、下侧垂直线;16、第一候选区域;17、第二候选区域;18、第三候选区域;19、第四候选区域;20、目标区域;21、引导对象。
具体实施方式
42.为了使本技术的目的、技术方案及优点更加清楚明白,以下结合附图及实施例,对本技术进行进一步详细说明。应当理解,此处描述的具体实施例仅仅用以解释本技术,并不用于限定本技术。
43.除另作定义外,本技术所涉及的技术术语或者科学术语应具有本技术所属技术领域具备一般技能的人所理解的一般含义。在本技术中的“一”、“一个”、“一种”、“该”、“这些”等类似的词并不表示数量上的限制,它们可以是单数或者复数。在本技术中所涉及的术语“包括”、“包含”、“具有”及其任何变体,其目的是涵盖不排他的包含;例如,包含一系列步骤或模块(单元)的过程、方法和系统、产品或设备并未限定于列出的步骤或模块(单元),而可包括未列出的步骤或模块(单元),或者可包括这些过程、方法、产品或设备固有的其他步骤或模块(单元)。在本技术中所涉及的“连接”、“相连”、“耦接”等类似的词语并不限定于物理的或机械连接,而可以包括电气连接,无论是直接连接还是间接连接。在本技术中所涉及的“多个”是指两个或两个以上。“和/或”描述关联对象的关联关系,表示可以存在三种关系,例如,“a和/或b”可以表示:单独存在a,同时存在a和b,单独存在b这三种情况。通常情况下,字符“/”表示前后关联的对象是一种“或”的关系。在本技术中所涉及的术语“第一”、“第二”、“第三”等,只是对相似对象进行区分,并不代表针对对象的特定排序。
44.以下所使用的术语“模块”、“单元”等为可以实现预定功能的软件和/或硬件的组合。尽管在以下实施例中所描述的装置较佳地以硬件来实现,但是软件,或者软件和硬件的组合的实现也是可能并被构想的。
45.本技术实施例提供的页面访问方法,可以应用于如图1所示的应用环境中。其中,
终端102通过网络与服务器104进行通信。数据存储系统可以存储服务器104需要处理的数据。数据存储系统可以集成在服务器104上,也可以放在云上或其他网络服务器上。本技术实施例中,终端102接收用户基于引导对象输入的第一指令,根据所述第一指令确定所述用户请求的目标对象,其中,所述引导对象叠加显示于第一页面中。在其他实施例中,也可以由终端102接收用户基于引导对象输入的第一指令,并将所述第一指令发送至服务器104,服务器104响应于所述第一指令确定所述用户请求的目标对象并发送至终端102。确定目标对象后,终端102在浏览器视窗中凸显所述目标对象,并将所述引导对象叠加显示于所述目标对象所在页面且与所述目标对象相邻。其中,终端102可以但不限于是各种个人计算机、笔记本电脑、智能手机、平板电脑、物联网设备和便携式可穿戴设备,物联网设备可为智能音箱、智能电视、智能空调、智能车载设备等。便携式可穿戴设备可为智能手表、智能手环、头戴设备等。服务器104可以用独立的服务器或者是多个服务器组成的服务器集群来实现。
46.在一个实施例中,如图2所示,提供了一种页面访问方法,以该方法应用于图1中的应用场景为例进行说明,包括以下步骤:
47.s201:接收用户基于引导对象输入的第一指令,根据所述第一指令确定所述用户请求的目标对象,其中,所述引导对象叠加显示于第一页面中。
48.本技术实施例中,所述目标对象为需要引导的对象。当产品更新或版本升级时,产品开发人员可能会更新原产品中的内容、功能或增加新的内容、功能,例如基于新功能增设新的交互控件,或将位于原页面左侧的内容转移至页面右侧显示等。上述更新后的内容或功能对于用户来说较为陌生,若缺乏引导会为用户的使用带来困难或不便,因此有必要针对需要引导的目标对象设置引导对象,以使用户能够快速了解目标对象的更新内容或快速掌握目标对象的操作方法。
49.本技术实施例中,所述引导对象用于对所述目标对象的内容进行说明,和/或,对所述目标对象的功能进行操作指引。所述引导对象包括用于接收用户输入第一指令的交互控件。其中,所述第一指令可以包括在预设交互区域内单击、双击、达到预设时间的悬停、轻触、长触、沿预设轨迹进行滑动中的任意一项或多项。所述交互控件可以包括“上一步”、“下一步”、“跳过全部引导”、“暂不引导”、“开始填写”等。在其他实施例中,若将所述目标对象的待引导内容分为多个模块,并进一步将多个模块分为多个步骤进行引导,所述交互控件还可以包括“上一引导模块”、“下一引导模块”、“第一引导模块”、“第二引导模块
”……“
第n引导模块”,使用户可以根据需要通过输入第一指令将目标对象从当前引导模块切换至目标引导模块。当切换引导模块时,确定目标引导模块的首个步骤对应的目标对象作为所述用户请求的目标对象。
50.本技术实施例中,所述引导对象叠加显示于第一页面中,其中,所述第一页面为浏览器视窗显示的当前页面。所述叠加显示可以包括将所述引导对象覆盖于所述第一页面的上层进行显示。在其他实施例中,也可以调整所述引导对象的透明度使引导对象与其覆盖的区域均处于可见状态。
51.在一些实施例中,当多页面的产品更新后,在一个页面中可能存在多个需要引导的目标对象。在其他实施例中,按照预设引导顺序设置的两个相邻的目标对象也可能位于不同的页面之中。基于此,本技术实施例中,根据所述第一指令确定所述用户请求的目标对象可以包括,根据所述第一指令在所述第一页面中确定所述目标对象,和/或,在所述目标
对象所在的页面中确定所述目标对象。例如,在一个实施例中,若按照预设引导顺序设置,当前目标对象与相邻的下一目标对象位于不同页面中,当用户基于引导对象输入“下一步”的第一指令时,可以使用超链接跳转至下一目标对象所在的页面,并在跳转后的页面中确定所述用户请求的目标对象。
52.s203:在浏览器视窗中凸显所述目标对象,并将所述引导对象叠加显示于所述目标对象所在页面且与所述目标对象相邻。
53.本技术实施例中,所述浏览器视窗包括用户当前打开的可视化窗口界面。具体的,所述浏览器视窗可以包括用户打开的软件界面、终端app界面、浏览器窗口界面等。确定所述目标对象之后,在浏览器视窗中凸显所述目标对象包括,在所述浏览器视窗显示的第一页面中凸显所述目标对象;或者,跳转至第二页面,在所述浏览器视窗显示的第二页面中凸显所述目标对象。具体的,可以在目标对象上层设置第一透明度的遮蔽层,或,在非目标对象上层设置第二透明度的遮蔽层,所述非目标对象包括所述浏览器视窗中除所述目标对象以外的区域。
54.本技术实施例中,将所述引导对象叠加显示于所述目标对象所在页面且与所述目标对象相邻。所述叠加显示可以包括将所述引导对象的区域覆盖于所述目标对象所在页面的上层进行显示。所述相邻包括所述引导对象的边界与所述目标对象的边界有至少一个交点。具体的,若所述引导对象与所述目标对象为直角矩形或圆角矩形,所述相邻可以包括所述引导对象与所述目标对象有至少一条边线共线。可以理解的,在页面设计过程中,在布局时所划分的引导对象所在的区域或目标对象所在的区域,与实际展示效果未必完全一致,通常在设计时选定的引导对象或目标对象的区域要大于相应实际展示时的区域,也即,在设计人员设计时选定引导对象或目标对象区域时其可能会留有一定的边界冗余,页面设计时引导对象与目标对象相邻,但实际展示时在引导对象与目标对象之间可能会包含部分缝隙或预留空间,这与本技术实施例中所述的相邻并不矛盾。
55.在另一些实施例中,若所述目标对象的范围大于所述浏览器视窗的显示范围,或非目标对象的范围小于引导对象的范围,则将所述引导对象叠加显示于所述目标对象所在页面且与所述目标对象相邻还包括,将所述引导对象在所述浏览器视窗中的预设位置叠加显示于所述目标对象所在页面。例如,在一个实施例中,若整个页面作为目标对象且整个页面范围超出了浏览器视窗的可视范围,则将所述引导对象叠加在页面上,并在浏览器视窗中心位置显示所述引导对象,同时还可以选择对整个页面设置灰色遮蔽层,以高亮显示所述引导对象。
56.本技术实施例提供的页面访问方法,能够在接收到用户输入的第一指令后确定目标对象,在浏览器视窗中凸显所述目标对象,并自动将所述引导对象叠加显示于所述目标对象所在页面且与所述目标对象相邻,使设计人员在设计引导页面时,可以基于确定的目标对象自动确定引导对象的显示位置,实现了引导页面在浏览器视窗中的自动布局,有效节省了大量引导页面设计时间,为用户提供有效指引的同时减少了引导页面的设计成本,提高了引导页面的设计效率,也进一步释放了产品更新时的设计资源。
57.本技术实施例中,在步骤s203中,所述将所述引导对象叠加显示于所述目标对象所在页面且与所述目标对象相邻,包括:
58.s301:根据所述目标对象在所述浏览器视窗中的位置和尺寸,将所述浏览器视窗
划分为多个候选区域,其中,所述多个候选区域与所述目标对象互不重叠。
59.s303:将所述多个候选区域的尺寸和所述引导对象的尺寸进行比较,根据比较结果确定目标区域,并将所述引导对象叠加显示于所述目标区域中。
60.本技术实施例中,所述目标对象在所述浏览器视窗中的位置可以通过所述目标对象的几何中心或边界与浏览器视窗的距离确定。所述目标对象的尺寸包括各个边界长度或目标对象的面积。将所述浏览器视窗划分为多个候选区域,所述多个候选区域与所述目标对象互不重叠,即将浏览器视窗中除目标对象外的区域划分为多个候选区域。
61.本技术实施例中,所述候选区域的尺寸包括各边界长度或候选区域面积。所述引导对象的尺寸括各个边界长度或引导对象的面积。将所述多个候选区域的尺寸和所述引导对象的尺寸进行比较,根据比较结果确定目标区域,可以包括将满足预设条件的候选区域确定为目标区域。所述预设条件包括所述候选区域面积大于所述引导对象面积,且能够容纳所述引导对象的所有边界。若存在多个满足所述预设条件的候选区域,则将其中面积最大的候选区域确定为目标区域。确定目标区域后,将所述引导对象叠加显示于所述目标区域中。
62.本技术实施例中,通过划分候选区域,并将所述引导对象叠加显示在目标区域中,可以实现自动确定目标引导对象的显示位置。产品更新后,只需要设置引导对象的预设尺寸,即可通过本技术实施例基于目标对象的位置和尺寸自动确定引导对象的显示位置,节省了需要针对每次更新内容重新设计静态页面的时间,有效提高了引导页面的设计效率,也进一步释放了产品更新时的设计资源。
63.本技术实施例还提供另一种确定引导对象位置的方法,包括:
64.s401:所述根据所述目标对象在所述浏览器视窗中的位置和尺寸,将所述浏览器视窗划分为多个候选区域,包括:
65.s4011:基于穿过所述目标对象位置中心点的水平线和垂直线,将所述浏览器视窗划分为四个候选区域,其中,所述水平线和所述垂直线相互垂直。
66.s403:所述将所述多个候选区域的尺寸和所述引导对象的尺寸进行比较,根据比较结果确定目标区域,包括:
67.s4031:确定所述水平线被所述目标对象分割后的左侧水平线长度、右侧水平线长度中的最大值。
68.s4033:若所述最大值不小于所述引导对象的宽度,则对应确定目标区域为所述目标对象的左侧或右侧。
69.s4035:若所述最大值小于所述引导对象的宽度,则确定所述垂直线被所述目标对象分割后的上侧垂直线长度、下侧垂直线长度中的最大值,并对应确定目标区域为所述目标对象的上侧或下侧。
70.本技术实施例中,确定所述目标对象的中心点,以经过所述中心点的相互垂直的水平线和垂直线将所述浏览器视窗划分为四个候选区域。之后,确定所述水平线被所述目标对象分割后的左侧水平线长度、右侧水平线长度中的最大值,将所述最大值与所述指引对象的宽度进行比较。若所述最大值不小于所述引导对象的宽度,则对应确定目标区域为所述目标对象的左侧或右侧,具体而言,若所述最大值为左侧水平线,则对应确定目标区域为所述目标对象的左侧;若所述最大值为右侧水平线,则对应确定目标区域为所述目标对
象的右侧。若所述最大值小于所述引导对象的宽度,则进一步确定所述垂直线被所述目标对象分割后的上侧垂直线长度、下侧垂直线长度中的最大值,并对应确定目标区域为所述目标对象的上侧或下侧。
71.下面通过一个具体的实施例进行说明,如图3所示,确定所述目标对象11的位置中心点,以经过所述中心点的相互垂直的水平线和垂直线将所述浏览器视窗划分为四个候选区域:第一候选区域16、第二候选区域17、第三候选区域18、第四候选区域19。所述水平线被所述目标对象11分割后为左侧水平线12和右侧水平线13,所述垂直线被所述目标对象11分割后为上侧垂直线14和下侧垂直线15。确定左侧水平线12的长度、右侧水平线13的长度中的最大值,如图3所示的实施例中,可以确定右侧水平线13的长度为所述最大值,且所述最大值不小于所述引导对象21的宽度,则对应确定目标区域20为所述目标对象11的右侧。
72.本技术实施例中,步骤s203中,所述在浏览器视窗中凸显所述目标对象,包括:
73.s501:在所述浏览器视窗显示的第一页面中凸显所述目标对象;或者,跳转至第二页面,在所述浏览器视窗显示的第二页面中凸显所述目标对象。
74.本技术实施例中,根据所述第一指令确定所述用户请求的目标对象,可能位于当前显示的第一页面中,也可能位于其它页面中。若所述目标对象位于浏览器视窗显示的第一页面中,则直接凸显所述目标对象;若所述目标对象位于浏览器视窗显示范围之外的第一页面中,则将所述目标对象对应的页面部分显示在所述浏览器视窗中,并凸显所述目标对象。另一方面,若所述目标对象不在所述浏览器视窗显示的第一页面中,则可以通过超链接的方式跳转至目标对象所在的第二页面中,并在所述浏览器视窗显示的第二页面中凸显所述目标对象。
75.另外,本技术实施例中,步骤s203中,所述在浏览器视窗中凸显所述目标对象,还包括:
76.s601:在非目标对象上层设置预设透明度的遮蔽层,所述非目标对象包括所述浏览器视窗中除所述目标对象以外的区域。
77.本技术实施例中,为凸显所述目标对象,可以在非目标对象上层设置预设透明度的遮蔽层。所述透明度可以设置为50%以下,以使目标对象作为浏览器视窗中的重点可视区域。在其他实施例中,若需要对非对象目标进行显示或操作,则也可以基于实际需要将所述透明度升高,如60%或70%。本技术对所述透明度值不作具体限制。所述遮蔽层可以设置基础颜色,如黑色、灰色等,以使所述目标对象高亮显示。其中,所述非目标对象包括所述浏览器视窗中除所述目标对象以外的区域。
78.若需要对非目标对象进行交互操作,本技术实施例还提供一种页面访问方法,包括:
79.s701:设置穿透控件,所述穿透控件用于响应于用户指令以与所述非目标对象进行交互。
80.本技术实施例中,所述穿透控件可以包括层叠样式表中的pointer-events属性,用于对设置遮蔽层的页面进行交互。在对非目标对象设置遮蔽层以凸显目标对象的情况下,若用户需要与非目标对象进行交互,可以设置穿透控件,使用户在接受引导对象引导的同时,可以通过发送交互指令与非目标对象进行交互,实时学习或验证目标对象所提供的新内容或新功能,便于用户在接受引导对象的同时以实际操作快速了解新内容或熟悉新功
能的操作方法,提高了引导的效率。
81.本技术实施例中,若存在较多需要引导的目标对象,还可以将多个目标对象划分为多个模块分别引导,以提高引导的效率。所述引导对象包括:
82.s801:第一引导单元,用于提供第一交互控件和第二交互控件,以及展示对应于当前页面中目标对象的引导信息,其中,所述第一交互控件和所述第二交互控件用于响应于所述第一指令,以基于预设引导顺序确定所述用户请求的目标对象。
83.s803:第二引导单元,用于提供多个按照预设引导顺序排列的第三交互控件,其中,各所述第三交互控件用于响应于所述第一指令,以确定所述用户请求的目标对象。
84.本技术实施例中,所述引导对象可以包括第一引导单元和第二引导单元。所述第一引导单元用于展示对应于当前页面中目标对象的引导信息,以及提供第一交互控件和第二交互控件。所述第一交互控件和第二交互控件可以接收用户输入的第一指令,并响应于所述第一指令以基于预设引导顺序确定所述用户请求的目标对象。在一些实施例中,所述第一交互控件可以包括“下一步”,还可以包括“上一步”、“上一模块”、“下一模块”等。所述第二交互控件可以包括“跳过引导”,还可以包括“跳过当前模块”、“开始填写”等。所述第二引导单元用于提供多个按照预设引导顺序排列的第三交互控件,其中,各所述第三交互控件用于响应于所述第一指令,以确定所述用户请求的目标对象。所述第三交互控件可以用于表示各个引导模块,例如,以“1”、“2”、“3
”……
或“一”、“二”、“三
”……
表示各个目标对象模块。在一个具体的实施例中,如图4所示,左侧白色区域为第一引导单元,右侧包含有数字的区域为第二引导单元,用户当前位于第一个目标对象模块。若用户需要查看第四目标对象模块,则可以直接点击第二引导单元中的交互控件

,所述目标对象即可确定为第四个目标对象模块中的首个目标对象。本技术实施例中,无论当前引导对象引导的目标对象是第几个模块,用户都可以通过向第二引导单元的交互控件发送第一指令,以切换至任意目标目标对象模块进行引导。
85.本技术实施例中,通过对多个目标对象划分为多个模块进行分别引导,且可以通过交互控件跳转至任意模块,与传统静态引导页面只能基于“上一步”、“下一步”的引导模式相比而言,可以对引导对象进行多次复用,能够精确切换至各模块进行重复引导,使用户可以基于自身需要选择需要引导的目标对象,能够使用户更加快速地了解产品更新的内容和掌握新功能的操作方法,有效提高了引导的效率。
86.下面通过本技术一个具体实施例,以javascript作为编程语言举例说明本技术提供的页面访问方法。如图5所示,通过接口获取入门导航步骤,即获取预设引导顺序的目标对象。定位高亮模块即确定需要高亮显示的目标对象并进行定位,可以利用getboundingclientrect获取目标对象的位置与尺寸,所述位置可以由函数返回的object对象中top、left、right、bottom确定,所述尺寸可以由返回的width、height确定。其中,top、left、right、bottom分别表示所述目标对象与浏览器视窗上、左、右、下的距离,width、height表示目标对象的宽度和高度。根据tpye展示不同的组件,包括一排三的跳转链接按钮组件和正常引导组件,所述一排三的跳转链接按钮组件用于跳转页面至目标对象所在页面时使用。设计布局时,在目标对象的dom元素四周用4个图层div进行拼接,所述4个图层可以参考图3所示的16、17、18、19四个候选区域,对非目标对象的dom元素设置预设透明度的黑色蒙层以达到遮挡作用,目标对象的dom元素设置透明的背景色进行高亮显示。若需要对
非目标对象的dom元素进行交互操作,可以利用css的属性pointer-events,提供点击穿透功能。确定引导对象位置时,需考虑目标对象的dom元素left值或right值和目标对象的width值之和不小于引导对象的宽度,或目标对象的dom元素top值或bottom值和目标对象的height值之和不小于引导对象的高度。生成对应按钮包括生成相应的交互控件,可以包括“跳过引导”、“上一步”、“下一步”、“开始填写”、“暂不开启”。“开始填写”和“暂不开启”后基于当前组件进行操作,完成后调用方法过渡至“跳过引导”。
87.下面通过具体实施例展示本技术提供的页面访问方法,以附图6作为参考展示效果。附图6中,虚线框选部分为目标对象,引导对象在目标对象右侧相邻展示,此处虽展示效果并不相邻但与本技术所述相邻并不矛盾,详见上述步骤s203中的说明,此处不再赘述。
88.应该理解的是,虽然如上所述的各实施例所涉及的流程图中的各个步骤按照箭头的指示依次显示,但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明,这些步骤的执行并没有严格的顺序限制,这些步骤可以以其它的顺序执行。而且,如上所述的各实施例所涉及的流程图中的至少一部分步骤可以包括多个步骤或者多个阶段,这些步骤或者阶段并不必然是在同一时刻执行完成,而是可以在不同的时刻执行,这些步骤或者阶段的执行顺序也不必然是依次进行,而是可以与其它步骤或者其它步骤中的步骤或者阶段的至少一部分轮流或者交替地执行。
89.基于同样的发明构思,本技术实施例还提供了一种用于实现上述所涉及的页面访问方法的页面访问装置900。该装置900所提供的解决问题的实现方案与上述方法中所记载的实现方案相似,故下面所提供的一个或多个页面访问装置900实施例中的具体限定可以参见上文中对于页面访问方法的限定,在此不再赘述。
90.在一个实施例中,如图7所示,提供了一种页面访问装置900,包括:
91.目标对象确定模块901,用于接收用户基于引导对象输入的第一指令,根据所述第一指令确定所述用户请求的目标对象,其中,所述引导对象叠加显示于第一页面中;
92.引导模块902,用于在浏览器视窗中凸显所述目标对象,并将所述引导对象叠加显示于所述目标对象所在页面且与所述目标对象相邻。
93.上述页面访问装置900中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中,也可以以软件形式存储于计算机设备中的存储器中,以便于处理器调用执行以上各个模块对应的操作。
94.在一个实施例中,提供了一种计算机设备,包括存储器和处理器,所述存储器存储有计算机程序,所述处理器执行所述计算机程序时实现上述任一项所述的页面访问方法的步骤。
95.在一个实施例中,提供了一种计算机可读存储介质,其上存储有计算机程序,所述计算机程序被处理器执行时实现上述任一项所述的页面访问方法的步骤。
96.需要说明的是,本技术所涉及的用户信息(包括但不限于用户设备信息、用户个人信息等)和数据(包括但不限于用于分析的数据、存储的数据、展示的数据等),均为经用户授权或者经过各方充分授权的信息和数据。
97.本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程,是可以通过计算机程序来指令相关的硬件来完成,所述的计算机程序可存储于一非易失性计算机可读取存储介质中,该计算机程序在执行时,可包括如上述各方法的实施例的流程。其中,
本技术所提供的各实施例中所使用的对存储器、数据库或其它介质的任何引用,均可包括非易失性和易失性存储器中的至少一种。非易失性存储器可包括只读存储器(read-only memory,rom)、磁带、软盘、闪存、光存储器、高密度嵌入式非易失性存储器、阻变存储器(reram)、磁变存储器(magnetoresistive random access memory,mram)、铁电存储器(ferroelectric random access memory,fram)、相变存储器(phase change memory,pcm)、石墨烯存储器等。易失性存储器可包括随机存取存储器(random access memory,ram)或外部高速缓冲存储器等。作为说明而非局限,ram可以是多种形式,比如静态随机存取存储器(static random access memory,sram)或动态随机存取存储器(dynamic random access memory,dram)等。本技术所提供的各实施例中所涉及的数据库可包括关系型数据库和非关系型数据库中至少一种。非关系型数据库可包括基于区块链的分布式数据库等,不限于此。本技术所提供的各实施例中所涉及的处理器可为通用处理器、中央处理器、图形处理器、数字信号处理器、可编程逻辑器、基于量子计算的数据处理逻辑器等,不限于此。
98.以上实施例的各技术特征可以进行任意的组合,为使描述简洁,未对上述实施例中的各个技术特征所有可能的组合都进行描述,然而,只要这些技术特征的组合不存在矛盾,都应当认为是本说明书记载的范围。
99.以上所述实施例仅表达了本技术的几种实施方式,其描述较为具体和详细,但并不能因此而理解为对本技术专利范围的限制。应当指出的是,对于本领域的普通技术人员来说,在不脱离本技术构思的前提下,还可以做出若干变形和改进,这些都属于本技术的保护范围。因此,本技术的保护范围应以所附权利要求为准。
当前第1页1 2 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1