Time-aware front-end dynamic color mode adaptation method and system

Abstract

The application provides a time-aware front-end dynamic color mode adaptive method and system, and particularly relates to the front-end development and human-computer interaction technical field. The method introduces a visual comfort index as an intermediate variable, realizes continuous adjustment of the color mode, and breaks the mode limitation of non-black or white. Meanwhile, the target color mode of the final application creatively combines objective dimensional data (referring to real-time collected space-time data and environmental light intensity data) and subjective user preferences, ensures the scientificity of mode adjustment, embodies personalized needs, solves the problem of insufficient adaptive precision in the prior art, and can achieve the intelligent switching effect of the color mode that conforms to the environmental law and meets individual preferences.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of front-end development and human-computer interaction, and in particular to a front-end dynamic color mode self-adaptation method and system based on time perception. BACKGROUND

[0002] With the popularity of front-end applications, the daily use time of users for front-end products continues to increase. As a core element of front-end human-computer interaction, color mode directly affects the visual comfort and information recognition efficiency of users. The current front-end color mode adaptation scheme has significant technical pain points:

[0003] (1) Most front-end applications always use a fixed color mode (usually light color mode). This scheme will become the main light source in the evening or dim light environment, strongly stimulating the eyes of users, leading to visual fatigue; and in the daytime outdoor strong light, dark color mode will cause the content to be difficult to identify due to insufficient contrast.

[0004] (2) Some applications provide a manual switch button to allow users to select between light and dark modes. Although it provides a certain flexibility, it requires users to operate frequently and actively, and the experience is fragmented, and cannot achieve seamless and timely adaptation. SUMMARY

[0005] The embodiments of the present application provide a front-end dynamic color mode self-adaptation method and system based on time perception to overcome the above problems. The scheme innovatively combines multi-dimensional environment perception and user personalized preferences, aiming to provide an intelligent, smooth, and adaptive visual experience solution for various front-end products such as Web applications, mobile application front-ends, and small programs.

[0006] To solve the above problems, the embodiments of the present application disclose a front-end dynamic color mode self-adaptation method based on time perception, which comprises:

[0007] Obtaining user historical preference data, current spatio-temporal data, and ambient light intensity data;

[0008] Based on the spatio-temporal data and ambient light intensity data, a reference visual comfort index is calculated to represent the current color mode tendency of the front-end, wherein the reference visual comfort index is between the visual index of pure light color mode and the visual index of pure dark color mode;

[0009] Based on the spatio-temporal data, ambient light intensity data, and user historical preference data, the reference visual comfort index is calibrated to generate a calibrated visual comfort index;

[0010] Adjust the current color mode of the front end to a target color mode between the pure light color mode and the pure dark color mode, and a visual index of the target color mode is a calibrated visual comfort index.

[0011] In an embodiment of the present application, the spatio-temporal data comprises: a location of the user equipment, a current time; and the step of calculating a reference visual comfort index for representing a current color mode tendency of the front end based on the spatio-temporal data and the ambient light intensity data comprises:

[0012] According to the location of the user equipment and the current time, determine a sunrise, noon, sunset and midnight of the day at the location of the user equipment;

[0013] Establish a time sequence curve describing a change of the reference visual comfort index in a day, the time sequence curve is divided into multiple time periods according to the sunrise, noon, sunset and midnight of the day at the location of the user equipment, and different reference visual indices are assigned to the time periods; wherein the reference visual indices corresponding to the time periods are between a visual index of the pure light color mode and a visual index of the pure dark color mode.

[0014] Based on the real-time acquired ambient light intensity data, correct the reference visual index of the time period corresponding to the current time to obtain the reference visual comfort index.

[0015] In an embodiment of the present application, the current spatio-temporal data further comprises seasonal information; and the method further comprises: adjusting the reference visual indices of the time sequence curve according to the seasonal information; wherein the adjustment amplitudes of the reference visual indices of the time sequence curve are different in different seasons.

[0016] In an embodiment of the present application, the user historical preference data comprises: a visual index of a color mode after a manual switch by the user, and spatio-temporal data and ambient light intensity data at the time of the switch; and the step of calibrating the reference visual comfort index based on the spatio-temporal data, the ambient light intensity data and the user historical preference data to generate a calibrated visual comfort index comprises:

[0017] In the user historical preference data, query whether there is target spatio-temporal data matching the current spatio-temporal data and whether there is target ambient light intensity data matching the current ambient light intensity data;

[0018] If there are the matching target spatio-temporal data and the target ambient light intensity data, determine a target historical color mode according to the target spatio-temporal data and the target ambient light intensity data, and calibrate the reference visual comfort index according to a visual index of the target historical color mode to generate a calibrated visual comfort index;

[0019] If there are no matching target spatio-temporal data and target ambient light intensity data, take the reference visual comfort index as the calibrated visual comfort index.

[0020] In an embodiment of the present application, when the target spatio-temporal data and the target ambient light intensity data match, if the determined target historical color pattern is one, the visual index of the target historical color pattern is taken as the calibrated visual comfort index, or a bias is applied to the reference visual comfort index to generate the calibrated visual comfort index; if the determined target historical color pattern is multiple, the user color pattern preference is predicted according to the multiple target historical color patterns and their respective target spatio-temporal data and target ambient light intensity data, and a bias is applied to the reference visual comfort index according to the prediction result to generate the calibrated visual comfort index.

[0021] In an embodiment of the present application, the method further comprises: obtaining screen material information of the user device; and when the screen material information indicates OLED, the calibrated visual comfort index is constrained to a dark color range.

[0022] In an embodiment of the present application, the step of adjusting the current color pattern of the front end to a target color pattern between the pure light color pattern and the pure dark color pattern, and taking the visual index of the target color pattern as the calibrated visual comfort index comprises:

[0023] predefining a first color theme color plate corresponding to the pure light color pattern and a second color theme color plate corresponding to the pure dark color pattern;

[0024] mapping the calibrated visual comfort index to a normalized weight value between 0 and 1, and performing linear interpolation calculation based on the normalized weight value for each group of color values corresponding to semantics in the first color theme color plate and the second color theme color plate to dynamically generate a transition color theme color plate as a visual embodiment of the target color pattern, wherein the transition color theme color plate includes background color, text color, border color and highlight color;

[0025] assigning the color values in the transition color theme color plate to a CSS custom property defined on a document root element, and synchronously updating the visual appearance of all UI elements referencing the CSS custom property.

[0026] In an embodiment of the present application, the method further comprises: identifying the current content scenario of the front-end application; predefining visual comfort index adjustment strategies corresponding to different content scenarios; and correcting the target color pattern according to the adjustment strategy corresponding to the identified current content scenario.

[0027] In an embodiment of the present application, the pre-defined content scenarios include a text reading scenario, a multimedia playing scenario or a data-intensive presenting scenario; and the step of correcting the target color pattern according to the adjustment strategy corresponding to the identified current content scenario comprises:

[0028] when the identified current content scenario is the text reading scenario, the contrast between the text and the background of the target color pattern is increased, and the saturation of the background is reduced.

[0029] When identified as a multimedia playing scene, the background color of the target color mode is constrained towards pure black, and the brightness of non-core elements of the interface is reduced;

[0030] When identified as a data-intensive scene, different data categories in the target color mode are given differentiated color identification while maintaining overall color harmony.

[0031] From a second aspect, the embodiments of the present application also provide a system running in a client browser or a mini-program container, which includes a module for executing the method of the first aspect of the embodiments of the present application.

[0032] The embodiments of the present application include the following advantages:

[0033] The present application provides a time-aware front-end dynamic color mode adaptive method, which calculates a reference visual comfort index for representing the current color mode tendency of the front-end based on spatio-temporal data and ambient light intensity data; and calibrates the reference visual comfort index based on the spatio-temporal data, the ambient light intensity data and user historical preference data to generate a calibrated visual comfort index.

[0034] The current color mode of the front-end is adjusted to a target color mode between the pure bright color mode and the pure dark color mode, and the visual index of the target color mode is the calibrated visual comfort index. By introducing the visual comfort index as an intermediate variable, the present application realizes continuous adjustment of the color mode and breaks the limitation of the non-black or white mode. At the same time, the target color mode of the final application creatively integrates objective dimensional data (referring to real-time collected spatio-temporal data and ambient light intensity data) and subjective user preferences, ensuring the scientificity of mode adjustment and reflecting personalized needs, solving the problem of insufficient adaptive precision of the prior art, and achieving the effect of intelligent switching of the color mode that meets both environmental laws and individual preferences. BRIEF DESCRIPTION OF DRAWINGS

[0035] In order to more clearly illustrate the technical solutions in the embodiments of the present application or the prior art, brief descriptions will be given below to the drawings needed to be used in the embodiments or prior art descriptions. Obviously, the drawings in the following description are only some embodiments of the present application, and for those skilled in the art, other drawings can also be obtained without creative labor on the basis of these drawings.

[0036] Figure 1 is a flowchart of the time-aware front-end dynamic color mode adaptive method of the embodiments of the present application;

[0037] Figure 2is a flowchart of a calibration process based on screen material information of a user equipment according to an embodiment of the present application;

[0038] Figure 3 is a flowchart of a calibration process based on text content according to an embodiment of the present application. DETAILED DESCRIPTION

[0039] The technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the drawings in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, rather than all the embodiments of the present application. Based on the embodiments in the present application, all other embodiments obtained by a person of ordinary skill in the art without creative work fall within the protection scope of the present application.

[0040] To solve the problems in the background art, the inventors find that the related art also proposes a scheme of automatically switching color modes. The current mainstream automatic switching scheme relies on a fixed time threshold (such as forcibly switching a dark color mode at 18:00 and switching a light color mode at 6:00), does not consider multi-dimensional influencing factors, and cannot provide a suitable visual interface for a user at a suitable time and in a suitable environment, resulting in poor user experience.

[0041] Therefore, the embodiments of the present application provide a time-aware front-end dynamic color mode adaptive method, which includes the following steps:

[0042] In step S101, user historical preference data and current spatio-temporal data and ambient light intensity data are obtained.

[0043] In step S102, a reference visual comfort index for representing a current color mode tendency of the front end is calculated based on the spatio-temporal data and the ambient light intensity data, wherein the reference visual comfort index is between a visual index of a pure light color mode and a visual index of a pure dark color mode.

[0044] In step S103, the reference visual comfort index is calibrated based on the spatio-temporal data, the ambient light intensity data, and the user historical preference data to generate a calibrated visual comfort index.

[0045] In step S104, the current color mode of the front end is adjusted to a target color mode between the pure light color mode and the pure dark color mode, and a visual index of the target color mode is the calibrated visual comfort index.

[0046] The user historical preference data is the operation record of the user manually switching the color mode in the past, and is formed by recording the historical behavior of the user manually switching the color mode and the space-time data and the ambient light intensity data at the time of occurrence. The user historical preference data can include the visual index of the color mode after the user manually switches and the space-time data and the ambient light intensity data at the time of switching. The space-time data can specifically include the positioning of the user equipment and the current time. The ambient light intensity data can be the ambient environment light brightness value obtained by the light sensor of the user equipment.

[0047] The pure bright color mode can be understood as an interface display mode with white as the main background, which is suitable for a strong light environment; and the pure dark color mode can be understood as an interface display mode with dark as the main background, which is suitable for a weak light environment. Optionally, the visual index of the pure bright color mode is 100 (or 1.0), and the visual index of the pure dark color mode is 0 (or 0.0). Alternatively, the visual index of the pure bright color mode is 0 (or 0.0), and the visual index of the pure dark color mode is 100 (or 1.0).

[0048] By steps S101-S104, the present application realizes continuous adjustment of the color mode by introducing the visual comfort index as an intermediate variable, breaking the mode limit of black or white. At the same time, the target color mode of the final application creatively combines objective dimensional data (referring to the real-time collected space-time data and ambient light intensity data) and subjective user preference, ensuring the scientificity of mode adjustment and embodying personalized needs, solving the problem of insufficient adaptive precision in the prior art, and achieving the effect of intelligent switching of the color mode that meets both environmental rules and individual preferences.

[0049] Taking the space-time data including the positioning of the user equipment and the current time as an example, in some embodiments of the present application, the step of calculating a reference visual comfort index for representing the current color mode tendency of the front end based on the space-time data and the ambient light intensity data of step S102 can include:

[0050] Sub-step S102-1, according to the positioning of the user equipment and the current time, determining the sunrise, noon, sunset and midnight of the day at the location of the user equipment.

[0051] Sub-step S102-2, establishing a time sequence curve describing the change of the reference visual comfort index in a day, the time sequence curve being divided into multiple time periods according to the sunrise, noon, sunset and midnight of the day at the location of the user equipment, and different reference visual indices being assigned to each time period; wherein the reference visual index corresponding to each time period is between the visual index of the pure bright color mode and the visual index of the pure dark color mode.

[0052] Sub-step S102-3, the reference visual index of the time period corresponding to the current time is corrected based on the real-time acquired ambient light intensity data, to obtain the reference visual comfort index.

[0053] Wherein, the current time can be obtained by the user equipment front-end interface (such as browser Date object or mobile device system time interface) "current year / month / day / time / min" to get. The positioning of the user equipment can be obtained by calling the terminal positioning function (browser Geolocation API, mobile GPS) to obtain the latitude and longitude of the user; if the positioning permission is closed, the city-level data can also be obtained by IP address positioning. The user equipment can be connected to the third party astronomical meteorological API, input the positioning and current time of the user equipment, and calculate the sunrise, noon, sunset and midnight of the user equipment location on the same day.

[0054] Through sub-step S102-1~sub-step S102-3, the embodiment of the application first determines the key light time point (sunrise, noon, sunset, midnight) according to the positioning of the user equipment and the current time, divides different time periods, and constructs the time sequence variation curve of the reference visual index, to obtain the reference visual index of the time period corresponding to the current time; then the reference visual index is corrected based on the real-time acquired ambient light intensity data, to finally obtain the reference visual comfort index. This method not only captures the change rule of the natural light of day and night (such as the strongest light at noon and the weakest light at midnight) through the time sequence curve, but also accurately adapts the current actual light condition (such as cloudy day, indoor and other local environment differences) through the real-time ambient light data correction.

[0055] Exemplary: a user uses the application in Guangzhou (east longitude 113°, north latitude 23°). The system calculates that the sunrise time in Guangzhou on the same day is 6:00, the noon is 12:00, the sunset is 18:45, and the midnight is 0:00.

[0056] The timing curve can be set as follows: before sunrise (to 6:00) - reference visual index 0.2 (darker mode); sunrise to noon (6:00-12:00) - reference visual index linearly rises from 0.2 to 0.9 (gradually brightens); noon to sunset (12:00-18:45) - reference visual index remains 0.9 (brightest mode); sunset to late night (18:45-0:00) - reference visual index linearly falls from 0.9 to 0.1 (gradually darkens); late night to sunrise of the next day (0:00-6:00) - reference visual index remains 0.1 (darkest mode). If the current time is 14:30 (during the period from noon to sunset), the reference visual index corresponding to the timing curve is 0.9, and the real-time detected ambient light intensity data is 500 lux (overcast indoor, lower than the average outdoor illumination during this period), based on this data, the reference visual comfort index is corrected to 0.6 by a preset algorithm (such as the illumination-index mapping model); if the same time point is in the sun outdoors, the ambient light intensity is 10000 lux, and the corrected reference visual comfort index remains 0.9 (no need to dim).

[0057] Further, in some embodiments of the present application, the current spatio-temporal data can also include: seasonal information, which is a data representing the current season (spring, summer, autumn, winter); after performing sub-step S102-2, the reference visual indices of the timing curve can also be adjusted according to the seasonal information; wherein the adjustment amplitude of the reference visual indices of the timing curve is different in different seasons. Because the sunshine duration, illumination intensity and color temperature are significantly different in different seasons, the visual comfort demand at the same time point is also different. This embodiment introduces the seasonal factor to optimize the timing curve, and adjusts the reference visual indices of the timing curve through the seasonal information, so that the calculation result is more in line with the seasonal characteristics and the physiological adaptation law of the user.

[0058] For example: the same user at the same time point (19:00) in the same place (north latitude 35°). Summer: sunset is late (about 19:30), 19:00 is still bright, the original reference visual index of the timing curve is 0.6, the adjustment amplitude in summer can be +0.2, and the actual reference visual index is 0.8; winter: sunset is early (about 17:30), 19:00 is completely dark, the original reference visual index of the timing curve is 0.6, the adjustment amplitude in winter can be -0.3, and the actual reference visual index is 0.3. Spring and autumn: the adjustment amplitude can be 0, and the original reference visual index 0.6 is maintained.

[0059] The user history preference data includes the visual index of the color mode manually switched by the user and the spatio-temporal data and the ambient light intensity data at the time of switching; in some embodiments of the present application, the step S103 of generating the calibrated visual comfort index based on the spatio-temporal data, the ambient light intensity data and the user history preference data can include:

[0060] The sub-step S103-1 queries, in the user history preference data, whether there is target spatio-temporal data matching the current spatio-temporal data and whether there is target ambient light intensity data matching the current ambient light intensity data.

[0061] The sub-step S103-2 determines the target historical color mode according to the target spatio-temporal data and the target ambient light intensity data if there is matching target spatio-temporal data and target ambient light intensity data, and calibrates the baseline visual comfort index according to the visual index of the target historical color mode to generate a calibrated visual comfort index; if there is no matching target spatio-temporal data and target ambient light intensity data, the baseline visual comfort index is taken as the calibrated visual comfort index.

[0062] Through the sub-step S103-1 to the sub-step S103-2, the present embodiment can learn the individualized preference of the user by querying the record similar to the current spatio-temporal data and the current ambient light intensity data in the user history preference data, and gradually optimize the visual comfort index calculated before. If there is a matching item, the baseline index can be adjusted according to the preference of the user at that time; if there is no matching item, the baseline index remains unchanged. The present embodiment can integrate the subjective preference on the basis of objective calculation, and solves the problem of insufficient individualization in the prior art.

[0063] For example, the current environment of the user is: current time (19:00), indoor light environment (300 lux), and the user is positioned at home. The system queries the user history preference data and finds that the user manually adjusts the visual index from 0.5 to 0.3 under similar conditions (18:30-19:30, 250-350 lux, home position) for 3 times in the past.

[0064] The baseline visual comfort index calculated at present is 0.5, and the system automatically calibrates the baseline index to 0.3 according to the user history preference.

[0065] In the user historical preference data, whether there is target spatio-temporal data matching the current spatio-temporal data and whether there is target ambient light intensity data matching the current ambient light intensity data can be obtained by setting a relevant similarity threshold. For example, the historical spatio-temporal data in the user historical preference data with a similarity greater than a first threshold to the current spatio-temporal data is taken as the target spatio-temporal data. For example, the historical ambient light intensity data in the user historical preference data with a similarity greater than a second threshold to the current ambient light intensity data is taken as the target ambient light intensity data. Based on this matching mode, in the case that there is matching target spatio-temporal data and target ambient light intensity data, the present embodiment proposes the following calibration strategy, and this hierarchical processing mechanism makes the calibration result more accurate. Specifically: if the determined target historical color mode is one, the visual index of the target historical color mode is taken as the calibrated visual comfort index, or an offset is applied to the reference visual comfort index to generate the calibrated visual comfort index; if the determined target historical color mode is multiple, the user color mode preference is predicted according to the multiple target historical color modes and their respective target spatio-temporal data and target ambient light intensity data by analyzing the rules of these data (such as weighted average, trend analysis, etc.), and an offset is applied to the reference visual comfort index according to the prediction result to generate the calibrated visual comfort index.

[0066] The user equipment such as a smart phone, a tablet computer, a smart watch, etc. generally adopts an OLED or LCD screen. As for the OLED material screen, it has the characteristics of self-emission of each pixel, no emission of the pixel in black display, more power saving and higher contrast. Therefore, in some embodiments of the present application, the method proposed by the present application can further include the following steps: Figure 2

[0067] Step S201, obtaining screen material information of the user equipment;

[0068] Step S202, when the screen material information indicates OLED, the calibrated visual comfort index is constrained to the dark color range.

[0069] For example: for the LCD screen equipment: the calibrated visual comfort index is 0.5, and the value is kept unchanged. For the OLED screen equipment: if the calibrated index is 0.5, the system will constrain it to 0.4 (darker). The constraint degree can be set to 80% of the original index (example value), while ensuring not less than the minimum value 0.1. Through the optimization scheme of steps S201-S202, power consumption can be saved, the screen burn-in problem caused by long-time display of bright colors can be avoided, and good visual experience can be maintained.

[0070] ​In some embodiments of the present application, the step of adjusting the current color mode of the front end to a target color mode between the pure light color mode and the pure dark color mode in step S104, the target color mode having a visual index of the calibrated visual comfort index, can specifically include:

[0071] Step S104-1, predefining a first color theme palette corresponding to the pure light color mode and a second color theme palette corresponding to the pure dark color mode;

[0072] Step S104-2, mapping the calibrated visual comfort index to a normalized weight value between 0 and 1, and dynamically generating a transition color theme palette as a visual embodiment of the target color mode by linear interpolation calculation based on the normalized weight value for color values corresponding to each group of semantics in the first color theme palette and the second color theme palette, the transition color theme palette including background color, text color, border color, and highlight color;

[0073] Step S104-3, assigning color values in the transition color theme palette to a CCS custom attribute defined on the document root element, and synchronously updating the visual appearance of all UI elements referencing the custom attribute.

[0074] The first color theme palette (corresponding to the pure light color mode) is a pre-set complete set of interface colors suitable for a bright light environment (such as daytime outdoors), which can include fixed colors of interface core elements, such as "background color is pure white, text color is deep black, border color is light gray, and highlight color (such as buttons and titles) is deep blue". The second color theme palette (corresponding to the pure dark color mode) is a pre-set complete set of interface colors suitable for a dim light environment (such as nighttime indoors), which has core element colors corresponding to the light color palette, such as "background color is dark gray, text color is light gray, border color is dark gray, and highlight color is light blue". The transition color theme palette is a complete set of transition colors generated by proportional mixing and finally used for interface display, including background color, text color, border color, highlight color, and all other required colors of UI elements.

[0075] The CCS (Cascading Style Sheets) custom attribute, also known as a CSS variable, is a reusable variable defined in CSS, which is used to uniformly manage the color values of interface elements. The uniform color management rule is a global color control mechanism pre-set in the front-end system, and all interface elements (such as titles, buttons, lists, and borders) follow this rule to obtain colors, i.e., there is no need to set colors for each element individually, but only to call the uniform color definition under this rule.

[0076] In a popular understanding, the core of the embodiment is to convert the calibrated visual comfort index into specific interface colors that users can see, which can be divided into three steps: first, prepare two sets of standard color plates (first color theme color plate and second color theme color plate) as the basic raw materials for color mixing; second, determine the mixing ratio (weight value) according to the calibrated visual comfort index, for example, if the index is biased towards dark colors, the dark color plate color ratio will be higher; third, mix the corresponding colors of the two sets of color plates in proportion to generate a transition color plate, and then use the CSS custom property as a "unified color management rule" to make all interface elements use this set of transition color theme plate, realizing the switching of the overall color mode. In this embodiment, the system does not switch between two fixed CSS styles, but calculates an intermediate value between the light color value and the dark color value for each color variable (such as background color and text color) in real time, solving the problem of harsh mode switching and providing a more visually comfortable and smooth transition experience.

[0077] For example, if a user uses a news app, the specific process is as follows:

[0078] Predefine the first color theme color plate (pure light color): the background color is pure white, the text color is deep black, the border color is light gray, and the emphasis color (news title) is dark blue; Predefine the second color theme color plate (pure dark color): the background color is dark gray, the text color is light gray, the border color is dark gray, and the emphasis color (news title) is light blue. The weight value mapping assumes that the calibrated visual comfort index is 0.4 (between pure light color 0.0 and pure dark color 1.0, biased towards dark color), which is mapped to "normalized weight value 0.4" according to the rules, that is, "light color plate color accounts for 40%, dark color plate color accounts for 60%".

[0079] Mixing generates a transition color theme color plate by mixing the corresponding colors of the two sets of color plates in a ratio of 4:6:

[0080] Target background color: pure white (40%) + dark gray (60%) = light gray (transition color that is darker than pure white and lighter than dark gray); Target text color: deep black (40%) + light gray (60%) = medium gray (lighter than deep black and darker than light gray, avoiding glare); Target border color: light gray (40%) + dark gray (60%) = slightly dark gray; Target emphasis color (news title): dark blue (40%) + light blue (60%) = medium blue (eye-catching and not conspicuous); Finally, a transition color theme color plate is formed: background light gray, text medium gray, border slightly dark gray, and title medium blue.

[0081] Synchronous update of the front end of the interface: the background of the news list automatically becomes "light gray"; all news titles automatically become "medium blue"; the article text automatically becomes "medium gray"; buttons and list borders automatically become "deep gray"; there is no need to separately adjust the color of each button and each piece of text, and all UI elements are synchronously updated to the target color mode at one time.

[0082] In view of different requirements of different types of content (such as text, video, and data) on visual experience, in some embodiments of the present application, reference is made to Figure 3 The method provided by the present application can further include the following steps:

[0083] Step S301: identifying a current content scenario of a front-end application;

[0084] Step S302: presetting a visual comfort index adjustment strategy corresponding to different content scenarios;

[0085] Step S303: correcting a target color mode according to the adjustment strategy corresponding to the identified current content scenario.

[0086] The current content scenario of the front-end application refers to an application function module or a content type (such as reading an article or watching a video) that is being used by the user. The visual comfort index adjustment strategy can be understood as a color mode optimization rule preset for different content scenarios.

[0087] The preset content scenarios can include a text reading scenario, a multimedia playing scenario, or a data-intensive presentation scenario. The data-intensive presentation scenario refers to a scenario in which the user views an interface (such as a report or a chart) containing a large amount of data. Corresponding to the above-mentioned preset content scenarios, there are a visual comfort index adjustment strategy corresponding to the text reading scenario, a visual comfort index adjustment strategy corresponding to the multimedia playing scenario, and a visual comfort index adjustment strategy corresponding to the data-intensive presentation scenario. In step S303, the step of correcting the target color mode according to the adjustment strategy corresponding to the identified current content scenario can include: when the text reading scenario is identified, the contrast between the text and the background of the target color mode is improved, and the background saturation is reduced; when the multimedia playing scenario is identified, the background color of the target color mode is constrained towards pure black, and the brightness of non-core elements of the interface is reduced; and when the data-intensive presentation scenario is identified, different data categories in the target color mode are given differentiated color identification, while the overall color tone is kept coordinated.

[0088] Compared with the color mode adjustment of the prior art, the prior art usually does not distinguish content scenes and adopts a unified standard. The application creatively introduces a content scene perception mechanism, designs a differentiated optimization strategy for different types of content, and makes the color mode not only adapt to the environment and user preferences, but also match the visual requirements of the current content, thereby solving the problem of insufficient scene adaptability of the prior art and further improving the user experience in a specific scene.

[0089] For example, the system generates a basic target color mode visual index of 0.5. When it is identified that the user is reading a long novel (a text reading scene), the corresponding adjustment strategy is triggered to increase the contrast, reduce the background saturation, and the corrected visual index may be adjusted to 0.55 (slightly bright), and the color saturation parameter is adjusted. When the user switches to watching a video (a multimedia playing scene), the corresponding adjustment strategy is triggered to make the background darker and reduce the brightness of non-core elements, and the corrected visual index may be adjusted to 0.3 (darker).

[0090] Based on the same inventive concept, the embodiments of the application also provide a system running in a client browser or a small program container, and the system comprises a module for executing the time-aware front-end dynamic color mode adaptation method according to the embodiments of the application.

[0091] For the time-aware front-end dynamic color mode adaptation method, reference can be made to the foregoing description, and no further description is given here.

[0092] It should be noted that each of the embodiments in the specification adopts a progressive description manner, and each embodiment focuses on the difference from other embodiments, and the same or similar parts of each embodiment can be referred to each other.

[0093] It also needs to be explained that, in this article, the terms "center", "upper", "lower", "left", "right", "vertical", "horizontal", "inner", "outer" and the like indicate the orientation or positional relationship based on the orientation or positional relationship shown in the drawings, and are only for the convenience of describing the present application and simplifying the description, and do not indicate or imply that the devices or elements referred to must have a particular orientation, be constructed and operated in a particular orientation, and therefore cannot be understood as limiting the present application. In addition, relational terms such as "first" and "second" are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any such actual relationship or order between the entities or operations, nor can it be understood as indicating or implying relative importance. Moreover, the terms "include", "contain" or any other variants thereof are intended to cover non-exclusive inclusion, so that the process, method, article or terminal device including a series of elements not only includes those elements, but also includes other elements not explicitly listed or inherent to such process, method, article or terminal device. Without more limitations, the element defined by the statement "including a" does not exclude the presence of other identical elements in the process, method, article or terminal device including the element.

[0094] The above describes the technical solutions provided by the present application in detail, and the principles and implementation modes of the present application are described by applying specific examples. The above example is only used to help understand the present application, and the content of the description should not be understood as limiting the present application. Meanwhile, for those skilled in the art, according to the present application, different forms of changes in specific implementation modes and application scope will be made, which do not need and cannot be exhausted here, and the obvious changes or variations derived therefrom are still within the protection scope of the present application.

Claims

1. A time-aware based front-end dynamic color mode adaptation method, characterized in that, The method comprises: acquiring user historical preference data and current spatio-temporal data, ambient light intensity data; based on the spatio-temporal data and the ambient light intensity data, a baseline visual comfort index is calculated to represent the current color mode tendency of the front end, wherein the baseline visual comfort index is between the visual index of the pure light color mode and the visual index of the pure dark color mode; based on the spatio-temporal data, the ambient light intensity data and the user historical preference data, the baseline visual comfort index is calibrated to generate a calibrated visual comfort index; the current color mode of the front end is adjusted to a target color mode between the pure light color mode and the pure dark color mode, and the visual index of the target color mode is the calibrated visual comfort index; wherein the step of adjusting the current color mode of the front end to a target color mode between the pure light color mode and the pure dark color mode, and the visual index of the target color mode is the calibrated visual comfort index, comprises: predefining a first color theme color plate corresponding to the pure light color mode and a second color theme color plate corresponding to the pure dark color mode; mapping the calibrated visual comfort index to a normalized weight value between 0 and 1, and for each set of color values corresponding to a semantic in the first color theme color plate and the second color theme color plate, performing linear interpolation calculation based on the normalized weight value to dynamically generate a transition color theme color plate as a visual embodiment of the target color mode, the transition color theme color plate including background color, text color, border color and highlight color; assigning the color values in the transition color theme color plate to the CSS custom properties defined on the document root element, so that all UI elements referencing the CSS custom properties are synchronized to update their visual appearance.

2. The method of claim 1, wherein: the spatio-temporal data includes the location of the user device and the current time; the step of calculating a baseline visual comfort index representing the current color mode tendency of the front end based on the spatio-temporal data and the ambient light intensity data comprises: determining the sunrise, noon, sunset and midnight of the day at the location of the user device according to the location of the user device and the current time; establishing a time sequence curve describing the change of the baseline visual comfort index in a day, the time sequence curve dividing multiple time periods according to the sunrise, noon, sunset and midnight of the day at the location of the user device and assigning different baseline visual indices to each time period; wherein the baseline visual index corresponding to each time period is between the visual index of the pure light color mode and the visual index of the pure dark color mode; based on the real-time acquired ambient light intensity data, the baseline visual index of the time period corresponding to the current time is corrected to obtain the baseline visual comfort index.

3. The method of claim 2, wherein: the current spatio-temporal data further includes seasonal information. The method further comprises: adjusting each reference visual index of the time curve according to the seasonal information; wherein the adjustment amplitude of each reference visual index of the time curve is different in different seasons.

4. The method of claim 1, It is characterized in that, wherein, The user historical preference data comprises: visual index of color mode switched manually by the user, and spatio-temporal data and ambient light intensity data at the time of switching; The step of calibrating the reference visual comfort index based on the spatio-temporal data, the ambient light intensity data, and the user historical preference data to generate a calibrated visual comfort index comprises: In the user historical preference data, it is inquired whether there is target spatio-temporal data matching the current spatio-temporal data and whether there is target ambient light intensity data matching the current ambient light intensity data; If there is matching target spatio-temporal data and target ambient light intensity data, a target historical color mode is determined according to the target spatio-temporal data and the target ambient light intensity data, and the reference visual comfort index is calibrated according to the visual index of the target historical color mode to generate a calibrated visual comfort index; If there is no matching target spatio-temporal data and target ambient light intensity data, the reference visual comfort index is taken as the calibrated visual comfort index.

5. The method of claim 4, wherein, in the case of matching target spatio-temporal data and target ambient light intensity data, if the determined target historical color mode is one, the visual index of the target historical color mode is taken as the calibrated visual comfort index, or an offset is applied to the reference visual comfort index to generate the calibrated visual comfort index; if the determined target historical color mode is multiple, user color mode preference is predicted according to the multiple target historical color modes and their respective target spatio-temporal data and target ambient light intensity data, and an offset is applied to the reference visual comfort index according to the prediction result to generate the calibrated visual comfort index.

6. The method of claim 4 or 5, wherein, the method further comprises: obtaining screen material information of a user device; when the screen material information indicates OLED, the calibrated visual comfort index is constrained to a dark color range.

7. The method of claim 1, wherein, The method further comprises: identifying a current content scenario of a front-end application; presetting visual comfort index adjustment strategies corresponding to different content scenarios; correcting the target color mode according to the adjustment strategy corresponding to the identified current content scenario.

8. The method of claim 7, wherein, the preset content scenarios include a text reading scenario, a multimedia playing scenario, or a data-intensive presenting scenario; the step of correcting the target color mode according to the adjustment strategy corresponding to the identified current content scenario comprises: when the text reading scenario is identified, the contrast between text and background of the target color mode is improved, and the background saturation is reduced. When identified as the multimedia playing scene, the background color of the target color mode is constrained towards pure black, and the brightness of non-core elements of the interface is reduced; When identified as the data-intensive scene, different data categories in the target color mode are given differentiated color identification while the overall color tone is kept coordinated. 9.A time-aware front-end dynamic color mode adaptive system running in a client browser or applet container, characterized in that, The system comprises modules for performing the method of any of claims 1 to 8.

Images