CN112199137A - 登录界面的展示方法、装置、电子设备及存储介质 - Google Patents
登录界面的展示方法、装置、电子设备及存储介质 Download PDFInfo
- Publication number
- CN112199137A CN112199137A CN202010905840.8A CN202010905840A CN112199137A CN 112199137 A CN112199137 A CN 112199137A CN 202010905840 A CN202010905840 A CN 202010905840A CN 112199137 A CN112199137 A CN 112199137A
- Authority
- CN
- China
- Prior art keywords
- login interface
- color
- icon
- login
- party application
- 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
- 238000000034 method Methods 0.000 title claims abstract description 44
- 238000009877 rendering Methods 0.000 claims abstract description 60
- 238000005070 sampling Methods 0.000 claims description 35
- 238000013475 authorization Methods 0.000 claims description 26
- 238000000605 extraction Methods 0.000 claims description 12
- 238000012544 monitoring process Methods 0.000 claims description 4
- 230000000007 visual effect Effects 0.000 abstract description 5
- 238000010586 diagram Methods 0.000 description 18
- 238000012790 confirmation Methods 0.000 description 8
- 238000013459 approach Methods 0.000 description 4
- 238000004590 computer program Methods 0.000 description 3
- 238000009792 diffusion process Methods 0.000 description 3
- 238000005516 engineering process Methods 0.000 description 3
- 230000006870 function Effects 0.000 description 3
- 230000003287 optical effect Effects 0.000 description 3
- 230000009286 beneficial effect Effects 0.000 description 2
- 239000003086 colorant Substances 0.000 description 2
- 230000002093 peripheral effect Effects 0.000 description 2
- 238000012545 processing Methods 0.000 description 2
- 230000006978 adaptation Effects 0.000 description 1
- 230000036528 appetite Effects 0.000 description 1
- 235000019789 appetite Nutrition 0.000 description 1
- 238000003491 array Methods 0.000 description 1
- 238000004891 communication Methods 0.000 description 1
- 238000011161 development Methods 0.000 description 1
- 230000004438 eyesight Effects 0.000 description 1
- PCHJSUWPFVWCPO-UHFFFAOYSA-N gold Chemical compound [Au] PCHJSUWPFVWCPO-UHFFFAOYSA-N 0.000 description 1
- 239000010931 gold Substances 0.000 description 1
- 229910052737 gold Inorganic materials 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000008719 thickening Effects 0.000 description 1
- 238000012795 verification Methods 0.000 description 1
Images
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
-
- 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/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
- G06F3/04817—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance using icons
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本公开关于一种登录界面的展示方法、装置、电子设备及存储介质，涉及软件应用技术领域，该方法包括：当监听到针对第三方应用的图标组件的点击事件时，获取第三方应用的图标；提取图标的颜色信息，统计提取的颜色信息，根据统计结果确定用于对第三方应用授权的登录界面进行颜色渲染的目标颜色，利用该目标颜色，渲染登录界面，并展示渲染后的登录界面。本公开对登录界面进行颜色渲染，通过区别明显的可视化展示方式，使用户可轻易判断所选第三方与预期选取的第三方是否一致，同时，使得登录界面上的展示信息能凸显所选第三方应用的图标的颜色特征，提高了第三方应用的辨识度，使用户能快速、准确地做出判断。
Description
技术领域
本公开涉及软件应用技术领域，尤其涉及一种登录界面的展示方法、装置、电子设备及存储介质。
背景技术
随着互联网及移动终端技术的迅速发展，独立网站的数量越来越多，各种功能的互联网产品也应运而生。然而用户在使用不同网站、不同应用以试图获取个性化服务时，都需要进行注册、登录等验证操作。众多登录信息的保存和使用对用户带来了极大的不便，繁复的验证操作影响了到用户的使用体验。
在现有技术中，针对此种情况，网站和应用平台通常会在登录界面展示多个第三方应用的图标(Icon)和文字，通过支持第三方(Third Party)应用登录的方式，减少用户操作。然而此种情况下，所展示的图标和文字的相似度较高，通过区分图标和文字来识别不同的第三方应用，往往会导致用户误选登录方式，严重影响用户体验。
发明内容
本公开提供一种登录界面的展示方法、装置、电子设备及存储介质，以至少解决相关技术中通过区分第三方应用的图标和文字来识别不同的第三方应用，往往会导致用户误选登录方式。本公开的技术方案如下：
根据本公开实施例的第一方面，提供一种登录界面的展示方法，当监听到针对第三方应用的图标组件的点击事件时，获取所述第三方应用的图标；提取所述图标的颜色信息，统计提取的所述颜色信息，根据统计结果确定用于对所述第三方应用授权的登录界面进行颜色渲染的目标颜色；利用所述目标颜色，渲染所述登录界面，并展示渲染后的所述登录界面。
根据本公开的一个实施例，所述利用所述目标颜色，渲染所述登录界面，包括：
获取所述目标颜色的RGB值；根据所述RGB值，渲染所述登录界面。
根据本公开的一个实施例，所述根据所述RGB值，渲染所述登录界面，包括：将所述登录界面上所显示的至少部分文本信息的字体颜色的RGB值设置为所述目标颜色的RGB值。
根据本公开的一个实施例，所述至少部分文本信息包括所述第三方应用的名称信息、所述登录界面上所显示的文本提示信息中的一个或者多个。
根据本公开的一个实施例，所述根据所述RGB值，渲染所述登录界面，包括：
将所述登录界面的界面背景色的RGB值设置为所述目标颜色的RGB值。
根据本公开的一个实施例，所述根据所述RGB值，渲染所述登录界面，包括：
将所述登录界面上的登录授权码的背景色的RGB值设置为所述目标颜色的RGB值，或将所述登录界面上的登录授权码的像素点的RGB值设置为所述目标颜色的RGB值。
根据本公开的一个实施例，所述提取所述图标的颜色信息，统计提取的所述颜色信息，根据统计结果确定用于对所述第三方应用授权的登录界面进行颜色渲染的目标颜色，包括：对所述图标中的多个像素点进行采样，获取所述多个像素点的颜色信息；统计所述颜色信息相同的像素点的第一数量，将最大的所述第一数量对应的颜色信息，确定为所述目标颜色。
根据本公开的一个实施例，所述统计所述颜色信息相同的像素点的第一数量之前，还包括：从所述多个像素点中，剔除RGB值为设定值的像素点，其中，所述设定值表征颜色为白色。
根据本公开的一个实施例，所述对所述图标中的多个像素点进行采样，包括：按照预设行间隔和/或预设列间隔，对所述图标上的像素点进行采样；或者，从所述图标的中心像素点，按照设定采样间隔向所述图像的边缘像素点进行扩散采样。
根据本公开实施例的第二方面，提供一种登录界面的展示装置，包括：监听模块，被配置执行当监听到针对第三方应用的图标组件的点击事件时，获取用于授权登录的第三方应用的图标；颜色提取模块，被配置执行提取所述图标的颜色信息，统计提取的所述颜色信息，根据统计结果确定用于对所述第三方应用授权的登录界面进行颜色渲染的目标颜色；渲染模块，被配置执行利用所述目标颜色，渲染所述登录界面，并展示渲染后的所述登录界面。
根据本公开的一个实施例，所述渲染模块，包括：获取单元，被配置执行获取所述目标颜色的RGB值；渲染单元，被配置执行根据所述RGB值，渲染所述登录界面。
根据本公开的一个实施例，所述渲染单元，包括：第一渲染子单元，被配置执行将所述登录界面上所显示的至少部分文本信息的字体颜色的RGB值设置为所述目标颜色的RGB值。
根据本公开的一个实施例，所述至少部分文本信息包括所述第三方应用的名称信息、所述登录界面上所显示的文本提示信息中的一个或者多个。
根据本公开的一个实施例，所述渲染单元，包括：第二渲染子单元，被配置执行将所述登录界面的界面背景色的RGB值设置为所述目标颜色的RGB值。
根据本公开的一个实施例，所述渲染单元，包括：第三渲染子单元，被配置执行将所述登录界面上的登录授权码的背景色的RGB值设置为所述目标颜色的RGB值，或将所述登录界面上的登录授权码的像素点的RGB值设置为所述目标颜色的RGB值。
根据本公开的一个实施例，所述颜色提取模块，包括：采样单元，被配置执行对所述图标中的多个像素点进行采样，获取所述多个像素点的颜色信息；统计单元，被配置执行统计所述颜色信息相同的像素点的第一数量，将最大的所述第一数量对应的颜色信息，确定为所述目标颜色。
根据本公开的一个实施例，所述颜色提取模块，还包括：剔除单元，被配置执行在统计所述颜色信息相同的像素点的第一数量之前，从所述多个像素点中，剔除中RGB值为设定值的像素点，其中，所述设定值表征颜色为白色。
根据本公开的一个实施例，所述采样单元，被配置执行按照预设行间隔和/或预设列间隔，对所述图标上的像素点进行采样；或者，从所述图标的中心像素点，按照设定采样间隔向所述图像的边缘像素点进行扩散采样。
根据本公开实施例的第三方面，提供一种电子设备，包括：处理器；用于存储所述处理器可执行指令的存储器；其中，所述处理器被配置为执行所述指令，以实现如本公开第一方面实施例提供的登录界面的展示方法。
根据本公开实施例的第四方面，提供一种存储介质，当所述存储介质中的指令由电子设备的处理器执行时，使得所述电子设备能够执行如本公开第一方面实施例提供的登录界面的展示方法。
本公开的实施例提供的技术方案至少带来以下有益效果：
本公开根据所选取的用于授权登录的第三方应用的图标的颜色，对登录界面进行颜色渲染，使得渲染后的登录界面尽可能地凸显了第三方应用的图标的颜色特征，通过区别明显的可视化展示方式，提高了第三方应用的辨识度，使得用户可以更加快速、准确地做出所选取的第三方应用与预期选取的第三方应用是否一致的判断。在实际应用中，若实际选取的第三方应用与预期不一致，用户往往打开的是预期的第三方应用，这种情况下会出现扫码授权码出现扫码出错的问题，通过本公开中提供的方法，可以有效地避免了用户在扫描授权码误选预期第三方应用而导致登录不成功的技术问题，进一步地提升了用户体验。
附图说明
此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理，并不构成对本公开的不当限定。
图1是根据一示例性实施例示出的一种登录界面的展示方法的流程图。
图2是相关技术示出的一种登录界面的应用示意图。
图3是根据一示例性实施例示出的另一种登录界面的应用示意图。
图4是根据一示例性实施例示出的另一种登录界面的应用示意图。
图5是根据一示例性实施例示出的另一种登录界面的应用示意图。
图6是根据一示例性实施例示出的另一种登录界面的应用示意图。
图7是根据一示例性实施例示出的另一种登录界面的应用示意图。
图8是根据一示例性实施例示出的另一种登录界面的应用示意图。
图9是根据一示例性实施例示出的另一种登录界面的应用示意图。
图10是根据一示例性实施例示出的另一种登录界面的展示方法的流程图。
图11是根据一示例性实施例示出的一种多像素点采样方式的示意图。
图12是根据一示例性实施例示出的另一种多像素点采样方式的示意图。
图13是根据一示例性实施例示出的另一种多像素点采样方式的示意图。
图14是根据一示例性实施例示出的另一种多像素点采样方式的示意图。
图15是根据一示例性实施例示出的一种登录界面的展示装置的框图。
图16是根据一示例性实施例示出的一种登录界面的展示装置的框图。
图17是根据一示例性实施例示出的另一种登录界面的展示装置的框图。
图18是根据一示例性实施例示出的电子设备的框图。
具体实施方式
为了使本领域普通人员更好地理解本公开的技术方案，下面将结合附图，对本公开实施例中的技术方案进行清楚、完整地描述。
需要说明的是，本公开的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本公开的实施例能够以除了在这里图示或描述的那些以外的顺序实施。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。
图1是根据一示例性实施例示出的一种登录界面的展示方法的流程图。如图1所示，本实施例提出的登录界面的展示方法，包括以下步骤：
在步骤101中，当监听到针对第三方应用的图标组件的点击事件时，获取第三方应用的图标。
需要说明的是，本公开的登录界面的展示方法的执行主体为登录界面的展示装置。本公开实施例的登录界面的展示方法可以由本公开实施例的登录界面的渲染展示执行，登录界面的展示装置具体可以为硬件设备，或者硬件设备中的软件等。其中，硬件设备例如终端设备、客户端、移动设备等。
需要说明的是，在用户试图登录一个对象时，可以通过该对象支持的第三应用的授权来完成登录，其中，试图的登录的对象可以为应用、网站或系统。第三方应用可以是包括但不限于应用程序、网站、系统、邮箱，应当理解的是，第三方应用是需要用户登录才能使用的应用。
在本公开实施例中，用户试图登录的一个对象时，该对象的登录界面上显示有至少一个第三方应用的图标组件，用户可以通过点击其中一个第三方应用的图标组件，登录界面的展示装置可以对用户通过点击操作生成的点击事件进行监听，当监听到该监听事件时，就可以根据该点击事件确定出用户点击的第三方应用。本公开实施例中，用户可以通过点击不同第三方应用的图标组件，选取不同的第三方应用完成对应用、网站或系统的登录。
可选地，点击事件中携带用户执行的点击操作的操作位置，进而根据操作位置，并结合登录界面的页面布局情况，能够确定出用户所选取的用于授权登录的第三方应用的图标组件。在图标组件中包括第三方应用的图标，进而可以从该图标组件中获取到所点击的第三方应用的图标。
在步骤102中，提取图标的颜色信息，统计提取的颜色信息，根据统计结果确定用于对第三方应用授权的登录界面进行颜色渲染的目标颜色。
一般图标里，背景往往是大面积的主色调，而商标(Logo)往往采用与背景颜色差异大的突出颜色，因此，可以设置颜色信息的提取策略为对图标中背景区域的颜色信息进行提取。举例而言，可以将第三方应用的图标划分为背景区域和图标中的Logo区域，共两个区域，然后按照提取策略，对背景区域内的颜色信息进行提取，然后基于提取的颜色信息进行统计，以得到目标颜色。
可选地，可以对第三方应用的图标进行像素点的整体采样，然后根据采样获取到的颜色信息进行统计，并根据统计结果中颜色信息获取到目标颜色。
在步骤103中，利用目标颜色，渲染登录界面，并展示渲染后的登录界面。
在点击了第三方应用的图标组件后，登录界面的展示装置从当前登录界面跳转至下一登录界面，该下一登录界面往往用于对第三方应用进行授权的登录界面，在该授权的登录界面上显示所选取的第三方应用的名称，并且显示授权信息，或者授权操作的提示信息，以使用户根据提示完成通过第三方应用来实现对授权登录。一个实施例中，当监听到针对某一个第三方应用的图标组件的点击事件时，授权的登录界面可显示该第三方应用的授权码；用户通过电子设备扫描该授权码，并通过电子设备发送确认登录指令。若登录界面的展示装置监听到用户针对该授权码的确认登录指令，则允许该用户登录。
举例而言，如图2(a)所示，登录界面1上展示有多个第三方应用的图标组件，包括：应用甲的图标2-11和应用甲的文本信息2-12、应用乙的图标2-21和应用乙的文本信息2-22、应用丙的文本信息2-31和应用丙的文本信息2-32，以及应用丁的图标2-41和应用丁的文本信息2-42。用户通过点击不同的图标组件，可以选取不同的第三方应用来完成对试图登录的对象的登录。当点击操作的操作位置为应用甲的图标2-11上，说明用户选取的用于授权登录的第三方应用为应用甲，通过该应用甲来完成登录。
在相关技术中，如图2(b)所示，可以根据点击操作生成向授权登录确认界面跳转的指令，然后根据跳转指令，从当前的登录界面1跳转至授权登录确认界面2，并在授权登录确认界面2上加载应用甲的授权登录确认提示，以使用户根据提示授权应用甲登录。然而对于大部分用户来说，登录界面上展示的第三方应用的图标通常区别极不明显，相似度极高，由此极易导致用户无法快速、轻易且准确地选取适当的第三方登录方式。
而本公开实施例中，在获取到目标颜色后，可以利用该目标颜色，渲染登录界面。一般情况下登录界面包括背景、提示消息等，本公开实施例中可以通过获取到的目标颜色对登录界面中的提示信息、背景、二维码等界面元素进行渲染，例如，可以修改登录界面上提示信息中文字的字体颜色，或者背景的颜色等，使得授权登录确认界面能够携带所选取的第三方应用的图标中的颜色特征。
在完成登录界面的渲染后，将渲染后的登录界面进行展示，渲染后的登录界面显示了所选取的第三方应用的颜色信息，能够直观地从视觉提示用户当前实际选取的第三方应用。
本公开实施例根据所选取的用于授权登录的第三方应用的图标的颜色，对登录界面进行颜色渲染，使得渲染后的登录界面尽可能地凸显了第三方应用的图标的颜色特征，通过区别明显的可视化展示方式，提高了第三方应用的辨识度，使得用户可以更加快速、准确地做出所选取的第三方应用与预期选取的第三方应用是否一致的判断。在实际应用中，若实际选取的第三方应用与预期不一致，用户往往打开的是预期的第三方应用，这种情况下会出现扫码授权码出现扫码出错的问题，通过本公开中提供的方法，可以有效地避免了用户在扫描授权码误选预期第三方应用而导致登录不成功的技术问题，即使用户打开的第三方应用与预期选取的不同，用户也可以通过本公开实施例提供的方法快速地判断选取的第三方应用与预期选取的第三方应用是否一致，进一步地提升了用户体验。
需要说明的是，本公开实施例中，在利用目标颜色对登录界面进行颜色渲染时，可以对登录界面上的部分界面元素进行渲染，例如，可以为在界面上显示的至少部分文本信息、登录界面的界面背景、登录界面上的登录授权码的背景色、或者登录授权码进行颜色渲染，以实现登录界面的颜色渲染。
本公开实施例中，在获取到目标颜色后，可以获取目标颜色的RGB值，根据该RGB值，渲染登录界面。例如，可以利用该RGB值，对登录界面上的文本信息、背景的颜色的RGB进行设置。
作为一种可能的实现方式，将登录界面上所显示的至少部分文本信息的字体颜色设置为目标颜色，具体地，将登录界面上所显示的至少部分文本信息的字体颜色的RGB值设置为目标颜色的RGB值。其中，至少部分文本信息，包括：用户选取的第三方应用的名称信息、登录界面上所显示的文本提示信息中的一个或者多个；文本提示信息，可以为除第三方的名称信息以外的任意文字信息，例如提示信息“扫描二维码”、“应用甲登录”等。
例如，结合图2(b)和图3所示，可以将登录界面上所显示的第三方应用的名称信息3-1以及文本提示信息中的第三方的名称信息3-2的字体颜色从当前的黑色更改为目标颜色。结合图2(b)和图4所示，可以将登录界面上所显示的第三方的名称信息4-1以及文本提示信息中的“扫描二维码”4-2的字体颜色从当前的黑色更改为目标颜色。再例如，结合图图2(b)和图5所示，可以将登录界面上所显示的所有文本信息(包括5-1和5-2)的字体颜色从当前的黑色更改为目标颜色。
需要说明的是，为了进一步便于用户可以轻易识别出所选取的第三方登录方式是否与预期一致，在对登录界面完成颜色渲染后，还可以对至少部分文本信息进行加粗、更改字号至预设字号等操作。
举例而言，结合图图2(b)和图6所示，在将登录界面上所显示的第三方的名称信息6-1以及文本提示信息中的第三方的名称信息6-2的字体颜色从当前的黑色更改为目标颜色后，可以将前述两处文本信息进行加粗，并将将当前字号更改至16号。也即，还可设置登录界面上所显示的至少部分文本信息的字体格式、大小。
作为另一种可能的实现方式，本公开实施例中，在利用目标颜色对登录界面进行颜色渲染时，可以将登录界面的界面背景色更改为目标颜色。具体地，根据目标颜色的RGB，将登录界面的界面背景色的RGB值设置为目标颜色的RGB值。例如，结合图2(b)和图7所示，可以将登录界面的背景7-1从当前的白色更改为目标颜色。
作为又一种可能的实现方式，本公开实施例中，在利用目标颜色对登录界面进行颜色渲染时，可以将登录界面上的登录授权码的背景色设置为目标颜色。具体地，根据目标颜色的RGB，将登录界面的登录授权码的背景色的RGB值设置为目标颜色的RGB值。例如，结合图2(b)和图8所示，可以将登录界面上的登录授权的二维码的背景色8-1从当前的白色更改为目标颜色。在其他实现方式中，还可将登录界面的登录授权码设置为目标颜色，具体的，将登录授权码像素点的RGB值设置为目标颜色的RGB值。
举例而言，结合图2(b)和图9所示，所选取用于授权登录的第三方应用为应用乙，应用乙的图标中背景9-1为绿色，Logo 9-2为白色，经过颜色提取后，能够确定出目标颜色为绿色，然后就利用该绿色对授权的登录界面进行颜色渲染，可以对文本信息中“应用乙”9-3的和登录授权码9-4同步进行渲染。需要说明的是，为了能够在登录界面上显示出文本信息和登录授权码，此种情况下往往不会再渲染登录界面的背景色。
本公开利用目标颜色，对登录界面的至少部分文本信息、登录界面的背景以及登录界面上的登录授权码的背景色中的至少一处进行颜色渲染，不仅能够凸显与第三方应用的图标的目标颜色一致的颜色特征，使得用户可以快速地、轻易地、准确地判断所选取的第三方与预期选取的第三方是否与预期一致，还能够将至少部分文本提示信息以目标颜色进行展示，将关键提示信息进行突出展示，减少了用户的学习成本，进一步提升了用户体验。
需要说明的是，在对图标的颜色信息进行提取，根据提取的颜色信息，确定用于对第三方应用授权的登录界面进行颜色渲染的目标颜色时，可以通过对图标中的多个像素点进行采样并统计，将颜色信息相同的像素点对应的颜色信息作为目标颜色。
作为一种可能的实现方式，如图10所示，在上述实施例的基础上，上述步骤102中对图标的颜色信息进行提取，根据提取的颜色信息，确定用于对第三方应用授权的登录界面进行颜色渲染的目标颜色的过程，具体包括以下步骤：
在步骤201中，对图标中的多个像素点进行采样，获取多个像素点的颜色信息。
本公开实施例中，可以按照预先设置的采样数量对图标中的多个像素点进行采样，以获取多个像素点，并提取多个像素点的颜色信息。其中，图标的采样数量根据图标携带的像素点的数量配置。例如，图标携带的像素点的数量为2000个，则可以配置采样数量为500个。
作为一种可能的实现方式，可以按照预设行间隔和/或预设列间隔，对图标上的像素点进行采样，以获取多个像素点。
可选地，可以按照预设行间隔将图标等距划分为多行进行采集，例如，如图11所示，从第1行开始，每间隔5行进行一次采样，直至最后一行。即言，对第1行、第7行、第13行进行采样。
可选地，可以按照预设列间隔将图标等距划分为多列进行采集，例如，如图12所示，从第1列开始，每间隔5列进行一次采样，直至最后一列。即言，对第1列、第7列、第13列进行采样。
可选地，为了提高采集精度，可以按照预设行间隔和预设列间隔将图标等距划分为多点进行采集。其中，预设行间隔和预设列间隔可以根据实际情况进行设定，一般情况下，可以预先根据图像的像素点总行数和总列数，确定横向(列)采集的像素点个数，以及纵向(行)采集的像素点个数，横向采样个数与列上采样个数相乘即为总采样个数。其中，在横向和纵向具有相同的采样间隔。例如，可以设定在横向的采样点为20，纵向的采样点为20，一共采集20*20＝400个像素点。
举例而言，如图13所示，可以设定预设行间隔和预设列间隔均为3，也就是说，可以在横向采集4个像素点，在纵向采集4个像素点，一共4*4＝16个像素点。
作为另一种可能的实现方式，可以从图标的中心像素点，按照设定间隔向图标的边缘像素进行扩展，以获取多个像素点。需要说明的是，本公开中对按照设定间隔向图标的边缘像素进行扩展的具体扩展方式不作限定，例如可以进行圆形扩展、方形扩展等。
举例而言，如图14所示，从中心像素点甲开始，按照2个像素点的间隔向图标的边缘像素进行方形扩展，直至图标的边缘。
需要说明的是，前述附图11～14，仅对多像素点的采样方式进行了解释说明，具体的图标均为在图中示出。
进一步地，在获取到多个像素点后，可以提取多个像素点的颜色信息。
需要说明的是，在提取到多个像素点的颜色信息后，可以将多个像素点的颜色信息通过RGB值进行表示。本公开中对颜色信息的具体表示方式不作限定，可以根据实际情况进行选择。
可选地，可以将多个像素点的颜色信息通过红、绿、蓝色彩模式(Red Green BlueColor Mode，简称RGB色彩模式)进行表示，例如，当RGB色彩模式为(255,255,0)时，则表示此颜色为黄色。
可选地，为了能够更加精准地描述像素点的颜色，可以将多个像素点的颜色信息以色值形式进行表示，例如，当色值为4E2F2F时，则表示此颜色为印第安红色。
在步骤202中，统计颜色信息相同的像素点的第一数量，将最大的第一数量对应的颜色信息，确定为目标颜色。
需要说明的是，由于授权登录确认界面的背景颜色往往为白色，若目标颜色与登录界面的背景颜色一致，势必会导致被渲染至目标颜色的文本信息等不可视。因此，本公开实施例中，在试图统计颜色信息相同的像素点的第一数量之前，可以从多个像素点中，剔除RGB值为设定值的像素点，其中，设定值为白色像素点的RGB值，例如白色的RGB值可以为(0，0，0)。
需要说明的是，出于个性化设置等考量，登录界面的默认背景颜色也可能为非白色的其他颜色，例如利于保护用户视力的绿色、刺激用户食欲的黄色等颜色，此种情况下，在试图统计颜色信息相同的像素点的第一数量之前，可以从多个像素点中，剔除表征颜色与背景颜色一致的颜色信息对应的像素点。例如，当背景颜色为灰色时，可从多个像素点中剔除RGB值表征灰色的像素点，其中，当像素点的R、G、B三者的取值相同时就是灰色像素点，例如，灰色像素点的RGB值可以为(128，128，128)。
举例而言，在剔除与登录界面的背景颜色一致的白色后，获取到颜色信息相同的像素点的第一数量分别为金色-275个、暗玫瑰色-75个以及土黄色-50个，此时，可以将275对应的金色确定为目标颜色。
本公开实施例通过对图标中的多个像素点进行采样，并提取多个像素点的颜色信息，并统计颜色信息相同的像素点的第一数量，将最大的第一数量对应的颜色信息，确定为目标颜色，使得所展示的渲染后的登录界面上能够凸显与第三方应用的图标的目标颜色一致的颜色特征，使得用户可以快速地、轻易地、准确地判断所选取的第三方应用与预期选取的第三方应用是否与预期一致，进一步提升了用户体验。
为了实现上述实施例，本公开实施例提供了一种登录界面的展示装置。
图15为是根据一示例性实施例示出的一种登录界面的展示装置的框图。如图15所示，该登录界面的展示装置1000包括：监听模块110、颜色提取模块120和渲染模块130。
其中，监听模块110，被配置执行当监听到针对第三方应用的图标组件的点击事件时，获取第三方应用的图标；
颜色提取模块120，被配置执行提取图标的颜色信息，统计提取的颜色信息，根据统计结果确定用于对第三方用授权的登录界面进行颜色渲染的目标颜色；
渲染模块130，被配置执行利用目标颜色，渲染所述登录界面，并展示渲染后的登录界面。
进一步地，如图16所示，渲染模块130，包括：获取单元131和渲染单元132。
其中，获取单元131，被配置执行获取目标颜色的RGB值。
渲染单元132，被配置执行根据所述RGB值，渲染所述登录界面。
进一步地，渲染单元131，还包括：第一渲染子单元1311、第二渲染子单元1312和第三渲染子单元1313。
其中，第一渲染子单元1311，被配置执行将登录界面上所显示的至少部分文本信息的字体颜色的RGB值设置为目标颜色的RGB值。
可选地，所述至少部分文本信息包括第三方应用的名称信息、登录界面上所显示的文本提示信息中的一个或者多个。
其中，第二渲染子单元1312，被配置执行将登录界面的界面背景色的RGB值设置为目标颜色的RGB。
其中，第三渲染子单元1313，被配置执行将登录界面上的登录授权码的背景色的RGB值设置为目标颜色的RGB，或将所述登录界面上的登录授权码的像素点的RGB值设置为所述目标颜色的RGB值。
进一步地，如图17所示，颜色提取模块120，包括：采样单元121和统计单元122。
其中，采样单元121，被配置执行对图标中的多个像素点进行采样，获取多个像素点的颜色信息；
统计单元，被配置执行统计颜色信息相同的像素点的第一数量，将最大的第一数量对应的颜色信息，确定为目标颜色。
可选地，统计提取模块120还包括剔除单元123。
其中，剔除单元123，被配置执行在统计颜色信息相同的像素点的第一数量之前，从多个像素点中，剔除RGB值为设定值的像素点，其中，该设定值表征颜色为白色。
可选地，图标的采样数量根据图标携带的像素点的数量配置。
可选地，采用单元121，被配置执行：
按照预设行间隔和/或预设列间隔，对所述图标上的像素点进行采样；或者，
从所述图标的中心像素点，按照设定采样间隔向所述图像的边缘像素点进行扩散采样。
关于上述实施例中的装置，其中各个模块执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。
本公开根据所选取的用于授权登录的第三方应用的图标的颜色，对登录界面进行颜色渲染，使得渲染后的登录界面尽可能地凸显了第三方应用的图标的颜色特征，通过区别明显的可视化展示方式，提高了第三方应用的辨识度，使得用户可以更加快速、准确地做出所选取的第三方应用与预期选取的第三方应用是否一致的判断。在实际应用中，若实际选取的第三方应用与预期不一致，用户往往打开的是预期的第三方应用，这种情况下会出现扫码授权码出现扫码出错的问题，通过本公开中提供的方法，可以有效地避免了用户在扫描授权码误选预期第三方应用而导致登录不成功的技术问题，进一步地提升了用户体验。
为了实现上述实施例，本公开提出了一种电子设备。
其中，电子设备包括：
处理器；
用于存储所述处理器可执行指令的存储器；
其中，所述处理器被配置为执行所述指令，以实现如前所述的登录界面的展示方法。
作为一种示例，图18是根据一示例性实施例示出的一种用于登录界面展示的电子设备的框图。如图18所示，上述电子设备2000，还可以包括：
存储器210及处理器220，连接不同组件(包括存储器210和处理器220)的总线230，存储器210存储有计算机程序，当处理器220执行所述程序时实现本公开实施例所述的登录界面的展示定位方法。
总线230表示几类总线结构中的一种或多种，包括存储器总线或者存储器控制器，外围总线，图形加速端口，处理器或者使用多种总线结构中的任意总线结构的局域总线。举例来说，这些体系结构包括但不限于工业标准体系结构(ISA)总线，微通道体系结构(MAC)总线，增强型ISA总线、视频电子标准协会(VESA)局域总线以及外围组件互连(PCI)总线。
电子设备2000典型地包括多种电子设备可读介质。这些介质可以是任何能够被电子设备200访问的可用介质，包括易失性和非易失性介质，可移动的和不可移动的介质。
存储器210还可以包括易失性存储器形式的计算机系统可读介质，例如随机存取存储器(RAM)240和/或高速缓存存储器250。电子设备2000可以进一步包括其它可移动/不可移动的、易失性/非易失性计算机系统存储介质。仅作为举例，存储系统260可以用于读写不可移动的、非易失性磁介质(图18未显示，通常称为“硬盘驱动器”)。尽管图10中未示出，可以提供用于对可移动非易失性磁盘(例如“软盘”)读写的磁盘驱动器，以及对可移动非易失性光盘(例如CD-ROM，DVD-ROM或者其它光介质)读写的光盘驱动器。在这些情况下，每个驱动器可以通过一个或者多个数据介质接口与总线230相连。存储器210可以包括至少一个程序产品，该程序产品具有一组(例如至少一个)程序模块，这些程序模块被配置以执行本公开各实施例的功能。
具有一组(至少一个)程序模块270的程序/实用工具280，可以存储在例如存储器210中，这样的程序模块270包括——但不限于——操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。程序模块270通常执行本公开所描述的实施例中的功能和/或方法。
电子设备2000也可以与一个或多个外部设备290(例如键盘、指向设备、显示器291等)通信，还可与一个或者多个使得用户能与该电子设备200交互的设备通信，和/或与使得该电子设备200能与一个或多个其它计算设备进行通信的任何设备(例如网卡，调制解调器等等)通信。这种通信可以通过输入/输出(I/O)接口292进行。并且，电子设备200还可以通过网络适配器293与一个或者多个网络(例如局域网(LAN)，广域网(WAN)和/或公共网络，例如因特网)通信。如图所示，网络适配器293通过总线230与电子设备200的其它模块通信。应当明白，尽管图18中未示出，可以结合电子设备2000使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、RAID系统、磁带驱动器以及数据备份存储系统等。
处理器220通过运行存储在存储器210中的程序，从而执行各种功能应用以及数据处理。
需要说明的是，本实施例的电子设备的实施过程和技术原理参见前述对本公开实施例的登录界面的展示方法的解释说明，此处不再赘述。
本公开根据所选取的用于授权登录的第三方应用的图标的颜色，对登录界面进行颜色渲染，使得渲染后的登录界面尽可能地凸显了第三方应用的图标的颜色特征，通过区别明显的可视化展示方式，提高了第三方应用的辨识度，使得用户可以更加快速、准确地做出所选取的第三方应用与预期选取的第三方应用是否一致的判断。在实际应用中，若实际选取的第三方应用与预期不一致，用户往往打开的是预期的第三方应用，这种情况下会出现扫码授权码出现扫码出错的问题，通过本公开中提供的方法，可以有效地避免了用户在扫描授权码误选预期第三方应用而导致登录不成功的技术问题，进一步地提升了用户体验。
为了实现上述实施例，本公开提出了一种存储介质，当所述存储介质中的指令由电子设备的处理器执行时，使得电子设备能够执行上述实施例所述的登录界面的展示方法。
为了实现上述实施例，本公开提出了一种计算机程序产品，当所述计算机程序产品中的指令由电子设备的处理器执行时，使得电子设备能够执行上述实施例所述的登录界面的展示方法。
本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本公开的其它实施方案。本申请旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和精神由下面的权利要求指出。
应当理解的是，本公开并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限制。
Claims (10)
1.一种登录界面的展示方法，其特征在于，包括：
当监听到针对第三方应用的图标组件的点击事件时，获取所述第三方应用的图标；
提取所述图标的颜色信息，统计提取的所述颜色信息，根据统计结果确定用于对所述第三方应用授权的登录界面进行颜色渲染的目标颜色；
利用所述目标颜色，渲染所述登录界面，并展示渲染后的所述登录界面。
2.根据权利要求1所述的登录界面的展示方法，其特征在于，所述利用所述目标颜色，渲染所述登录界面，包括：
获取所述目标颜色的RGB值；
根据所述RGB值，渲染所述登录界面。
3.根据权利要求2所述的登录界面的展示方法，其特征在于，所述根据所述RGB值，渲染所述登录界面，包括：
将所述登录界面上所显示的至少部分文本信息的字体颜色的RGB值设置为所述目标颜色的RGB值。
4.根据权利要求3所述的登录界面的展示方法，其特征在于，所述至少部分文本信息包括所述第三方应用的名称信息、所述登录界面上所显示的文本提示信息中的一个或者多个。
5.根据权利要求2所述的登录界面的展示方法，其特征在于，所述根据所述RGB值，渲染所述登录界面，包括：
将所述登录界面的界面背景色的RGB值设置为所述目标颜色的RGB值。
6.根据权利要求2所述的登录界面的展示方法，其特征在于，所述根据所述RGB值，渲染所述登录界面，包括：
将所述登录界面上的登录授权码的背景色的RGB值设置为所述目标颜色的RGB值，或将所述登录界面上的登录授权码的像素点的RGB值设置为所述目标颜色的RGB值。
7.根据权利要求1-6任一项所述的登录界面的展示方法，其特征在于，所述提取所述图标的颜色信息，统计提取的所述颜色信息，根据统计结果确定用于对所述第三方应用授权的登录界面进行颜色渲染的目标颜色，包括：
对所述图标中的多个像素点进行采样，获取所述多个像素点的颜色信息；
统计所述颜色信息相同的像素点的第一数量，将最大的所述第一数量对应的颜色信息，确定为所述目标颜色。
8.一种登录界面的展示装置，其特征在于，包括：
监听模块，被配置执行当监听到针对第三方应用的图标组件的点击事件时，获取所述第三方应用的图标；
颜色提取模块，被配置执行提取所述图标的颜色信息，统计提取的所述颜色信息，根据统计结果确定用于对所述第三方应用授权的登录界面进行颜色渲染的目标颜色；
渲染模块，被配置执行利用所述目标颜色，渲染所述登录界面，并展示渲染后的所述登录界面。
9.一种电子设备，其特征在于，包括：
处理器；
用于存储所述处理器可执行指令的存储器；
其中，所述处理器被配置为执行所述指令，以实现如权利要求1至7中任一项所述的登录界面的展示方法。
10.一种存储介质，当所述存储介质中的指令由电子设备的处理器执行时，使得电子设备能够执行如权利要求1至7中任一项所述的登录界面的展示方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010905840.8A CN112199137A (zh) | 2020-09-01 | 2020-09-01 | 登录界面的展示方法、装置、电子设备及存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010905840.8A CN112199137A (zh) | 2020-09-01 | 2020-09-01 | 登录界面的展示方法、装置、电子设备及存储介质 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN112199137A true CN112199137A (zh) | 2021-01-08 |
Family
ID=74006284
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010905840.8A Pending CN112199137A (zh) | 2020-09-01 | 2020-09-01 | 登录界面的展示方法、装置、电子设备及存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112199137A (zh) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113467678A (zh) * | 2021-06-10 | 2021-10-01 | 北京达佳互联信息技术有限公司 | 目标对象显示方法、装置、电子设备及计算机可读存储介质 |
| CN117151743A (zh) * | 2023-10-27 | 2023-12-01 | 江苏中天互联科技有限公司 | 数字备案标识方法、装置、电子设备及存储介质 |
Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103218595A (zh) * | 2013-03-29 | 2013-07-24 | 深圳市金立通信设备有限公司 | 一种终端及二维码的识别方法 |
| CN104077091A (zh) * | 2013-03-29 | 2014-10-01 | 联想(北京)有限公司 | 一种显示处理方法和电子设备 |
| CN105955564A (zh) * | 2016-04-18 | 2016-09-21 | 北京小米移动软件有限公司 | 应用程序启动方法及装置 |
| CN108234391A (zh) * | 2016-12-14 | 2018-06-29 | 珠海金山办公软件有限公司 | 一种登录信息提示方法及装置 |
| CN108494794A (zh) * | 2018-04-11 | 2018-09-04 | 苏州锦佰安信息技术有限公司 | 一种身份验证方法和装置 |
| CN109558104A (zh) * | 2018-12-10 | 2019-04-02 | 网易（杭州）网络有限公司 | 操控对象的显示方法、装置、存储介质和电子设备 |
| CN110263266A (zh) * | 2019-05-20 | 2019-09-20 | 江苏大学 | 一种基于微信小程序和爬虫的数据展示方法 |
-
2020
- 2020-09-01 CN CN202010905840.8A patent/CN112199137A/zh active Pending
Patent Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103218595A (zh) * | 2013-03-29 | 2013-07-24 | 深圳市金立通信设备有限公司 | 一种终端及二维码的识别方法 |
| CN104077091A (zh) * | 2013-03-29 | 2014-10-01 | 联想(北京)有限公司 | 一种显示处理方法和电子设备 |
| CN105955564A (zh) * | 2016-04-18 | 2016-09-21 | 北京小米移动软件有限公司 | 应用程序启动方法及装置 |
| CN108234391A (zh) * | 2016-12-14 | 2018-06-29 | 珠海金山办公软件有限公司 | 一种登录信息提示方法及装置 |
| CN108494794A (zh) * | 2018-04-11 | 2018-09-04 | 苏州锦佰安信息技术有限公司 | 一种身份验证方法和装置 |
| CN109558104A (zh) * | 2018-12-10 | 2019-04-02 | 网易（杭州）网络有限公司 | 操控对象的显示方法、装置、存储介质和电子设备 |
| CN110263266A (zh) * | 2019-05-20 | 2019-09-20 | 江苏大学 | 一种基于微信小程序和爬虫的数据展示方法 |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113467678A (zh) * | 2021-06-10 | 2021-10-01 | 北京达佳互联信息技术有限公司 | 目标对象显示方法、装置、电子设备及计算机可读存储介质 |
| CN117151743A (zh) * | 2023-10-27 | 2023-12-01 | 江苏中天互联科技有限公司 | 数字备案标识方法、装置、电子设备及存储介质 |
| CN117151743B (zh) * | 2023-10-27 | 2024-01-30 | 江苏中天互联科技有限公司 | 数字备案标识方法、装置、电子设备及存储介质 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US9904458B2 (en) | Method for information processing and electronic apparatus thereof | |
| US11347835B2 (en) | Verification method and device | |
| CN112199137A (zh) | 登录界面的展示方法、装置、电子设备及存储介质 | |
| CN105302413B (zh) | 控件的ui测试方法及系统 | |
| US10789914B2 (en) | Computer system, screen sharing method, and program | |
| CN103177226A (zh) | 一种防窥可视密码的显示方法及装置 | |
| CN105045554B (zh) | 一种图片显示方法及用户终端 | |
| CN111368744A (zh) | 图片中非结构化表格识别方法及装置 | |
| CN111143812B (zh) | 一种基于图形的登陆认证方法 | |
| CN109542546A (zh) | 一种应用进程窗口及界面的投屏方法及装置 | |
| US20020085018A1 (en) | Method for reducing chinese character font in real-time | |
| CN108681531B (zh) | 文档输入的控制方法及装置 | |
| CN109450646B (zh) | 验证请求处理方法和系统 | |
| CN111402117A (zh) | 图片处理方法、装置、存储介质及客户端设备 | |
| US20240012897A1 (en) | Verification code processing method and apparatus, and device and storage medium | |
| CN109753217B (zh) | 动态键盘操作方法、装置、存储介质及电子设备 | |
| CN112199131B (zh) | 一种页面检测方法、装置及设备 | |
| JP4994042B2 (ja) | ディスプレイのストライピング方向と平行な空間周波数ドミナンスを有するオブジェクトのサブコンポーネントベースのレンダリング方法及びプログラム | |
| CN106934814B (zh) | 一种基于图像的背景信息识别方法及装置 | |
| CN112306838A (zh) | 页面布局兼容性测试方法、装置、设备及可读存储介质 | |
| CN112150345A (zh) | 图像处理方法及装置、视频处理方法和发送卡 | |
| JP2016224510A (ja) | 情報処理装置、及びコンピュータプログラム | |
| CN113760686B (zh) | 用户界面的测试方法、装置、终端和存储介质 | |
| CN105244009A (zh) | 一种可识别性高的控制显示装置及其显示方法 | |
| CN105573698A (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 |