WO2017100341A1 - Procédés et système de définition de couleurs d'éléments d'interface - Google Patents

Procédés et système de définition de couleurs d'éléments d'interface Download PDF

Info

Publication number
WO2017100341A1
WO2017100341A1 PCT/US2016/065418 US2016065418W WO2017100341A1 WO 2017100341 A1 WO2017100341 A1 WO 2017100341A1 US 2016065418 W US2016065418 W US 2016065418W WO 2017100341 A1 WO2017100341 A1 WO 2017100341A1
Authority
WO
WIPO (PCT)
Prior art keywords
color
value
interface element
color values
values
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.)
Ceased
Application number
PCT/US2016/065418
Other languages
English (en)
Inventor
Shuai Chen
Zhi Li
Tao Lin
Xushu LU
Junlin TIAN
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Alibaba Group Holding Ltd
Original Assignee
Alibaba Group Holding Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Priority claimed from CN201510906885.6A external-priority patent/CN106855797A/zh
Application filed by Alibaba Group Holding Ltd filed Critical Alibaba Group Holding Ltd
Publication of WO2017100341A1 publication Critical patent/WO2017100341A1/fr
Anticipated expiration legal-status Critical
Ceased legal-status Critical Current

Links

Classifications

    • G—PHYSICS
    • G09—EDUCATION; CRYPTOGRAPHY; DISPLAY; ADVERTISING; SEALS
    • G09G—ARRANGEMENTS OR CIRCUITS FOR CONTROL OF INDICATING DEVICES USING STATIC MEANS TO PRESENT VARIABLE INFORMATION
    • G09G5/00—Control arrangements or circuits for visual indicators common to cathode-ray tube indicators and other visual indicators
    • G09G5/02—Control arrangements or circuits for visual indicators common to cathode-ray tube indicators and other visual indicators characterised by the way in which colour is displayed
    • G—PHYSICS
    • G06—COMPUTING OR CALCULATING; 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
    • G—PHYSICS
    • G06—COMPUTING OR CALCULATING; 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
    • G—PHYSICS
    • G06—COMPUTING OR CALCULATING; COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T11/00—Two-dimensional [2D] image generation
    • G06T11/10—Texturing; Colouring; Generation of textures or colours
    • G—PHYSICS
    • G06—COMPUTING OR CALCULATING; COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T7/00—Image analysis
    • G06T7/90—Determination of colour characteristics
    • G—PHYSICS
    • G09—EDUCATION; CRYPTOGRAPHY; DISPLAY; ADVERTISING; SEALS
    • G09G—ARRANGEMENTS OR CIRCUITS FOR CONTROL OF INDICATING DEVICES USING STATIC MEANS TO PRESENT VARIABLE INFORMATION
    • G09G5/00—Control arrangements or circuits for visual indicators common to cathode-ray tube indicators and other visual indicators
    • G—PHYSICS
    • G09—EDUCATION; CRYPTOGRAPHY; DISPLAY; ADVERTISING; SEALS
    • G09G—ARRANGEMENTS OR CIRCUITS FOR CONTROL OF INDICATING DEVICES USING STATIC MEANS TO PRESENT VARIABLE INFORMATION
    • G09G5/00—Control arrangements or circuits for visual indicators common to cathode-ray tube indicators and other visual indicators
    • G09G5/003—Details of a display terminal, the details relating to the control arrangement of the display terminal and to the interfaces thereto
    • G—PHYSICS
    • G09—EDUCATION; CRYPTOGRAPHY; DISPLAY; ADVERTISING; SEALS
    • G09G—ARRANGEMENTS OR CIRCUITS FOR CONTROL OF INDICATING DEVICES USING STATIC MEANS TO PRESENT VARIABLE INFORMATION
    • G09G2340/00—Aspects of display data processing
    • G09G2340/10—Mixing of images, i.e. displayed pixel being the result of an operation, e.g. adding, on the corresponding input pixels
    • G—PHYSICS
    • G09—EDUCATION; CRYPTOGRAPHY; DISPLAY; ADVERTISING; SEALS
    • G09G—ARRANGEMENTS OR CIRCUITS FOR CONTROL OF INDICATING DEVICES USING STATIC MEANS TO PRESENT VARIABLE INFORMATION
    • G09G2354/00—Aspects of interface with display user

Definitions

  • the present application relates to a method and a system for setting interface element colors.
  • a user may wish to adjust interface elements of a user terminal to display certain colors to enhance the user's experience.
  • interface elements typically do not allow the adjustment of the display of the interface elements described above.
  • interface elements use a fixed image or colors, which are predefined and difficult to dynamically change and the interface elements display non- predefined images or colors.
  • FIG. 1 A is a flowchart of an embodiment of a process for setting interface element colors.
  • FIG. IB is a flowchart of an embodiment of a process for determining color values.
  • FIG. 1C is an illustration of an embodiment of icons, text, controls, display area borders, and display areas included in an interface.
  • FIG. ID is a diagram of an embodiment illustrating a process for assigning color values to interface element color attributes.
  • FIG. IE is a flowchart of an embodiment of a process for assigning a color attribute of an interface element.
  • FIG. 2A is a flowchart of an embodiment of a process for displaying an interface.
  • FIG. 2B is a diagram of an example of nine colors included in a preset system guideline color spectrum.
  • FIGS. 2C and 2D are illustrations of examples of codes for different first color values.
  • FIG. 2E includes screenshots illustrating a wallpaper changing color causing an interface element to change color.
  • FIG. 3 is a structural diagram of an embodiment of a system for setting interface element colors.
  • FIG. 4 is a structural diagram of an embodiment of a smart device for setting interface element colors.
  • FIG. 5 is a functional diagram illustrating an embodiment of a programmed computer system for setting interface element colors.
  • the invention can be implemented in numerous ways, including as a process; an apparatus; a system; a composition of matter; a computer program product embodied on a computer readable storage medium; and/or a processor, such as a processor configured to execute instructions stored on and/or provided by a memory coupled to the processor.
  • these implementations, or any other form that the invention may take, may be referred to as techniques.
  • the order of the steps of disclosed processes may be altered within the scope of the invention.
  • a component such as a processor or a memory described as being configured to perform a task may be implemented as a general component that is temporarily configured to perform the task at a given time or a specific component that is manufactured to perform the task.
  • the term 'processor' refers to one or more devices, circuits, and/or processing cores configured to process data, such as computer program instructions.
  • the present application provides a process for setting interface element colors.
  • the process can be performed by devices such as a mobile phone, a tablet computer, a personal computer, a smart television, or any appropriate user terminal with an operating system, etc.
  • the process can also be performed by an application (app) installed on a user terminal.
  • FIG. 1 A is a flowchart of an embodiment of a process for setting interface element colors.
  • the process 100 is implemented by a user terminal 300 of FIG. 3 and comprises:
  • the user terminal renders an interface element.
  • the user terminal determines first color values.
  • the user terminal determines the first color values based on the following types of information: statuses of interface elements, designated images, designated events, user-selected color values, or any combination thereof.
  • a first color relates to a color chosen in the process. For example, when the sky is drawn, blue is chosen as the first color or base color, and when the sky is actually drawn, one shade of blue is used.
  • the determination of a first color value based on at least one of the above types of information:
  • Example 1 A first color value is determined based on a status of an interface element.
  • the interface element refers to an interface element having a color attribute to be set.
  • the interface elements can have different statuses.
  • the interface element is a control "button," and the "button” can have one of three statuses: “Pressed,” “Normal,” and “Disabled.”
  • color values corresponding separately to each of these three statuses can be preset. For example, “Pressed” is set to correspond to a color value of deep blue, “Normal” is set to correspond to a color value of light blue, and “Disabled” is set to correspond to a color value of gray.
  • a third party configures the color attribute of the image that is to be configured based on the deep blue color value corresponding to "Pressed.”
  • the third party relates to a third party program or application which includes a button.
  • a user could directly set the deep blue- indicating color value to correspond to the color attribute value of the to-be-set image.
  • the user wants to set the button color to be blue, the user can set the button color to blue via an operation system configuration.
  • the user could have the color value calculated by applying a preset color value calculation technique to the deep blue-indicating color value and set the calculated color value to be the color attribute value of the to-be-set image.
  • Example 2 A first color value is determined based on a designated image.
  • the designated image can, for example, be any image stored locally on a user terminal.
  • the designated image can be stored as a vectorgraph or a bitmap.
  • the default for the image is wallpaper that the user terminal is currently using, or the designated image is a certain image designated by the user.
  • the wallpaper can be desktop wallpaper, lock screen wallpaper, or the like.
  • FIG. IB is a flowchart of an embodiment of a process for determining color values.
  • the process 1100 is an implementation of operation 110 of FIG. 1 A and comprises:
  • the user terminal receives a wallpaper setting instruction.
  • the wallpaper setting instruction includes a reference (e.g., a file name and/or location, a link or a pointer to a file, etc.) to an image to be set as the wallpaper (e.g., display background) for the user terminal.
  • a reference e.g., a file name and/or location, a link or a pointer to a file, etc.
  • the user terminal in response to the receiving of the wallpaper setting instruction, sets an image corresponding to the wallpaper setting instruction to be wallpaper in current use by the user terminal.
  • the user terminal determines a first color value based on pixel color values of the image corresponding to the wallpaper setting instruction.
  • the first color value immediately after the user terminal completes the setting for the wallpaper currently in use can be determined. Furthermore, by applying operation 120 of FIG. 1 A, one can relate the pixel color values of the wallpaper of the user terminal currently in use to the color value of the interface element and thus ensure that the user has a consistent visual experience. For example, when the summer weather is hot, the user uses bamboo as the desktop wallpaper, which makes the user feels cool and refreshed when looking at the desktop wallpaper. In another example, if the user opens a frequently used application having red as its main wallpaper color, the user may feel uncomfortable; however, if the frequently used application is changed to have green as its main wallpaper color, the user can feel cool and relaxed again when the frequently used application is opened. Typically, applications do not actively change their main wallpaper color.
  • a certain image designated by the user could, for example, be a certain image determined by the user terminal in response to receiving a specific image selection instruction.
  • the image selection instruction could, for example, correspond to a click instruction or a gesture instruction directed at the image.
  • pixels of the designated image have color values.
  • the color values of the pixels can also be called pixel color values.
  • the pixel color values can be (but are not limited to) expressed by one or more red-green- blue (RGB) arrays.
  • RGB red-green- blue
  • a set of three values can be used to represent the red, green, and blue components corresponding to a pixel.
  • Other color formats such as YUV, YCbCr, etc., can also be used.
  • the pixel color values can be expressed by one or more parameter values determined by an RGB array. Other color representations can be used.
  • the first color value includes at least one color value determined based on the pixel color values of the designated image.
  • the user terminal determines a certain pixel color value of the designated image to be the first color value.
  • the user terminal calculates a mean value of the pixel color values of the designated image and determines the mean value to be a first color value.
  • the user terminal counts pixels having different color values in the designated image and regards the color value corresponding to a maximum of the count totals as the first color value.
  • the user terminal determines a pixel color value of a main hue representing the designated image and determines the pixel color value to be a first color value.
  • the pixel color values of the designated image can be, but are not limited to, pixel color values obtained by the user terminal by sampling the color values of the pixels of the designated image.
  • the "dominant hue” represents the basic tendency of the color appearance.
  • the image is said to have a tendency with regard to the image's overall color. For example, the image tends towards blue or tends towards red.
  • the image can tend to be warm or cool, etc.
  • the basic tendency of a color appearance corresponds to the dominant hue of an image.
  • the dominant hue is differentiated based on the image's warmth or coolness.
  • "Warm dominant hues,” “cool dominant hues,” and “intermediate dominant hues” can exist.
  • the brighter a cool hue is, the more the image's overall feel tends towards warmth.
  • the brighter a warm hue is, the more the image's overall feel tends towards coolness.
  • Example 3 A first color value is determined based on a designated event.
  • the designated event could, for example, be a time-related event, such as an arrival of a holiday or an arrival of the user's birthday.
  • the designated event is a holiday.
  • the user could choose one color to express feelings towards the holiday.
  • the time-related event could be an event caused by the user terminal such as the receipt by the user terminal of a text message from a designated contact, payment of an order by the user terminal, acquisition by the user terminal of a forecast for a designated type of weather (such as clear or overcast), etc.
  • a color value mapping to the currently existing designated event based on mapping relationships between each designated event and a color value can be determined.
  • the color value that is determined can serve as the first color value.
  • Example 4 The first color value is determined based on a user-selected color value.
  • a color value interface including at least two colors is displayed.
  • the appropriate color value is determined based on the user's selection of a color included in a displayed color value interface.
  • the first color value is determined based on the determined appropriate color value.
  • the determined appropriate color value is directly determined as the first color value.
  • the user terminal assigns a value for a color attribute of an interface element based on the determined first color value.
  • the assignment can be done via the operating system.
  • the user terminal updates the interface element according to the assigned value.
  • an interface element has various attributes related to display effects.
  • the user terminal by using attribute values to assign values to the attributes related to the display effects, can cause the interface element to have the display effects corresponding to the attributes when the interface element is being displayed.
  • the assigning of the values to the interface element attributes that are related to display effects can include, but is not limited to, the assigning of values to attributes of an image that is used as an interface element background image.
  • the size and shape of the image can be set based on the expected display effects of the interface elements.
  • the image can be a bitmap or a vectorgraph.
  • the image can have texture features, shape features, and/or other appropriate features.
  • the user terminal assigns a value for an interface element color attribute based on a first color value, which was determined based on the designated image.
  • a first color value is determined based on the designated image, and when the designated image is the wallpaper currently in use by the user terminal, by relating the interface element color to the color of the wallpaper currently in use, color coordination of the interface element with the wallpaper currently in use can be ensured, thus providing the user with a consistent and aesthetically pleasing visual effect.
  • the assignment of values to color attributes for such an interface element is based on the first color value that was determined and comprises: the color attributes to an interface element having a first status are assigned based on the first color value that was determined. For example, a first color, such as red, is used to generate a set of color. If an interface element is to be emphasized, the interface element can use a strong red color. In other words, although the main color is red, different shades of red colors can be used to indicate other statuses.
  • an assignment of a value to the color attribute of the "button” when the "button” has one of the three statuses is based on the determined first color value.
  • a color value is assigned for a function icon when a function associated with the function icon has an "on” status
  • a different color value is assigned for the functional icon when its associated function has an "off status.
  • Function icons can include at least one of the following: Bluetooth switch icons, wireless network switch icons, airplane mode switch icons, and other such function icons.
  • a network connectivity icon can be assigned a color value associated with green when the associated network connection is on, and the network connectivity icon can be assigned a color value associated with red when the network connection is off.
  • Displaying an interface element in different states with corresponding color values allows the user to determine the state of an application or function by mere visual inspection, without having to navigate to a particular menu or setting to make the determination.
  • system resources are conserved and usability is improved.
  • the color can automatically change based on specific events, such as a wallpaper change, and the user does not need to manually perform the color change.
  • a value can be assigned to a color attribute of a first interface element or to the color attribute of multiple interface elements.
  • the number of interface elements to be assigned the color attribute value is arbitrary and depends on implementation.
  • FIG. 1C is an illustration of an embodiment of icons, text, controls, display area borders, and display areas included in an interface.
  • the interface elements of the interface can include at least one of the following: icons, text, controls, display area boundaries, display areas, or the like.
  • the interface elements can be interface elements of basic apps, interface elements of third party apps, or a combination thereof.
  • the "basic apps” refer to the user terminal's operating system and standard, pre-loaded apps that come with the operating system.
  • the “third party apps” refer to apps other than the basic apps installed on the user terminal.
  • the user terminal In the event that the interface elements are the interface elements of basic apps, the user terminal typically can invoke a system interface to assign values to color attributes of the interface elements of the system app based on first color values.
  • the interface elements are the interface elements of the third party apps, the user terminal can invoke a third party interface to the user terminal's operating system to assign values to color attributes of the interface elements of the third party app based on the first color values.
  • the user terminal prior to performing operation 120, receives an app selection instruction that includes a reference to an app (e.g., name, location, link, etc.), and in response to receiving the instruction, determines that the selected app is to serve as an app whose colors are to be adjusted.
  • an example of an implementation of operation 120 includes: the user terminal assigns (via the operating system) values to color attributes of at least one interface element of the app whose colors are to be adjusted.
  • the assigning of the values to the color attributes of the interface elements based on the first color values includes: assigning the first color values to the color attributes of the interface elements; or determining second color values mapping to the first color values, and assigning values to color attributes of the interface elements based on the determined second color values.
  • a preset quantity of color value sets can be set up.
  • mapping relationships can be established between each color value set and different color value ranges (first mapping relationships).
  • Each color value set separately includes at least one color value: color values included in each color value set correspond to the above second color values.
  • the collection of color value sets can be referred to as a system guideline color spectrum.
  • operation 120 can include determining color value ranges into which the first color values fall based on the first color values and the different color value ranges.
  • the color value sets mapped from the color value range into which the first color values fall are determined from within the system guideline spectrum based on the first mapping relationships.
  • values are assigned to color attributes of interface elements based on color values in the color value sets that were determined in the previous operation (operation 120).
  • values of color attributes of one interface element or values of color attributes of two or more interface elements can be assigned based on the color values in the sets of color values that were determined. In the event that a color value set that was determined includes one color value, the color value can be assigned to one or more interface elements. In the event that the color value set that was determined includes two or more color values, the two or more color values included in the color value set can be separately assigned to two or more corresponding interface elements.
  • mapping relationships between the different color values in the color value sets and categories of interface elements can be established. Based on the second mapping relationships, and after the color value sets mapped from the color value ranges into which the first color values fall are determined from within the system guideline spectrum based on the first mapping relationships, the interface element categories that separately map to different color values in the previously determined color value sets are determined, and thus the different color values in a determined color value set to the interface elements of the corresponding categories, respectively, can be determined. For example, color value A in a determined color value set X is assigned to the interface elements in the "Control" category.
  • the main color is green (A) in a green color value set (X), and the main color A is chosen as the Control color.
  • color value B in the determined color value set X is assigned to the interface elements in the "Icon" category.
  • the first color value is the color value of a dominant hue of a desktop wallpaper in current use by the user terminal, and the system guideline color spectrum includes nine sets of color-matching schemes.
  • FIG. ID is a diagram illustrating an embodiment of a process for assigning color values to interface element color attributes.
  • the box (Numeral I) on the left side of FIG. ID represents a user terminal desktop before values are assigned to color attributes of interface elements based on the first color values.
  • the desktop makes use of wallpaper.
  • the wallpaper is the desktop wallpaper in current use by the user terminal.
  • the color value of a dominant hue used to represent the wallpaper as the first color value can be determined by analyzing the color value, e.g., the RGB value, YUV value, and the like.
  • the box (Numeral II) in the middle of FIG. ID is a diagram of nine color-matching schemes included in the system guideline color spectrum.
  • color-matches 1-9 represent the nine color-matching schemes.
  • These nine color-matching schemes can be nine color value sets, nine color-computing techniques, etc.
  • the color-matching schemes that map to the first color value can be determined. For example, given the first color being blue, the color-matching scheme that is determined is color-matching 3 in FIG. ID. For the first color being blue, the color-matching scheme of the 9 color-matching schemes that mostly close matches blue is chosen.
  • the box (Numeral III) on the right side of FIG. ID represents an interface where interface elements are located following an assignment of values to color attributes.
  • the color attributes of an interface element in the interface can have values assigned to them based on color-matching 3.
  • the color values in the color value sets and the interface element categories that map to the color values can be set by a user interface (UI) designer based on popular aesthetic standards. Therefore, by using different color values in a single color values set to assign values to color attributes of interface elements of the corresponding category, an interface having an interface element color-matching that conforms to popular aesthetics can be obtained and thereby ensures a good visual experience for the user.
  • UI user interface
  • the way in which second color values are mapped to first color values can also be achieved as follows: [0071] Calculation of the second color values can be based on the first color values and a preset color value mapping rule. For example, if the first color values are color values represented by (R, G, B) arrays, the preset color value mapping rule is (R - 50, G - 50, B - 50). Thus, when the first color values are (128, 100, 128), the preset color value mapping rule can be used to calculate the second color values of (78, 50, 78).
  • a second color value can be calculated based on first color values and a color value mapping rule. Determining the second color values corresponding to different categories of interface elements can be based on the first color values and second color value- determining rules individually preset for the different categories of the interface elements (the rule can, for example, be a color value mapping rule). Values can be assigned to color attributes of the different categories of the interface elements based on the determined second color values corresponding to the different categories of the interface elements.
  • the second color value corresponding to "control” is determined to be X (e.g., RGB (150, 50, 160)), and the second color value corresponding to "icon” is determined to be Y (e.g., RGB (200, 60, 130))
  • the value X can be assigned to the color attribute for "control” and the value Y can be assigned to the color attribute for "icon.”
  • the same interface elements have different statuses.
  • the interface element "control" has three statuses: normal, pressed (selected or pressed by the user), and disabled.
  • values can be assigned to color attributes of different statuses corresponding to the interface elements.
  • FIG. IE is a flowchart of an embodiment of a process for assigning a color attribute of an interface element.
  • process 1200 is an implementation of 120 of process 100 and comprises: [0075]
  • the user terminal determines the color values corresponding to at least one status of the interface elements based on the second color values that were determined and color value-determining rules set individually for at least one status of the interface elements.
  • the color value determining rules can be a simple mapping relationship of one color value corresponding to another color value, or the color value determining rules can be a more complex calculation formula.
  • the user terminal assigns values to color attributes corresponding to at least one status of the interface elements based on the color values corresponding to the at least one status of the interface elements (as determined through operation 1210).
  • Operations 110 and 120 of FIG. 1 A can be applied to support the assignment of different color values to the color attributes of different statuses of interface elements. Operations 110 and 120 thus achieve differentiated display of interface elements of different statuses, enabling the user to obtain increased satisfaction in the visual experience and safeguarding the user from possible erroneous applications resulting from an inability to distinguish between interface elements. Therefore, process 100 of FIG. 1A reduces system processing resources waste.
  • process 100 can further include: [0082] Determining non-color display effects-related attribute values corresponding to the at least one status of the interface elements based on a rule for determining attribute values related to non-color display effects that are not color attribute values, and that are individually set for at least one status of interface elements.
  • the attribute values related to the non-color display effects can include, but are not limited to at least one of the following: transparency values, brightness values, gray scale values, or the like.
  • the timing of the performance of operation 120 comes after receiving the interface element including an interface display instruction, or can be performed at some other time.
  • an interface element has a color that reflects operating system security levels.
  • the interface element's color could often indicate some fixed meanings. For example, when the color of a security risk level-indicating interface element is blue, that color would indicate a low security risk. When the color is red, that color would indicate a high security risk. Therefore, the color values of the interface elements are not required to be related to the first color values.
  • an identifier can be used to indicate whether the color attribute value of an interface element is adjustable or non-adjustable. A determination can be made whether the interface elements are preset interface elements that have non-adjustable color attribute values based on the identifier.
  • Process 100 of FIG. 1 A provides an interface element color-setting technique for assigning values to the color attributes of the interface elements based on the first color values that were determined.
  • process 100 is a highly-efficient interface element color attribute value-setting technique because the technique can support automatic adjustments to color attributes of interface elements-based user-set wallpaper, etc. This technique is more efficient than conventional approaches due to the use of the adjustments to user terminal system themes to change interface element attributes. Therefore, process 100 can conserve processing resources of user terminal processors while achieving the goal of adjusting interface element colors.
  • each operation in the technique provided by process 100 can be performed by the same device or executing entity, such as the same user terminal or the same server, or process 100 can also be performed by different devices as the executing entities.
  • the executing entity of operation 110 could be a user terminal
  • the executing entity of operation 120 could be a server.
  • the user terminal After determining the first color values by performing operation 110, the user terminal could send the first user values to a server and thus trigger the server to perform operation 120.
  • FIG. 2A is a flowchart of an embodiment of a process for displaying an interface.
  • process 200 is implemented by an operating system of a mobile phone 300 of FIG. 3 and comprises:
  • the mobile phone receives an element color adjustment instruction.
  • a click instruction issued by the user at a button that is displayed on a desktop and that includes the text "Interface element color adjustment” is the element color adjustment instruction.
  • the click instruction issued by the user at a "Set the image as desktop wallpaper” option or “Set the image as lock screen wallpaper” option while setting the desktop wallpaper or the lock screen wallpaper can also serve as the element color adjustment instruction.
  • the mobile phone in response to the receiving of the element color adjustment instruction, collects color values of pixels of desktop wallpaper or lock screen wallpaper. [0096] In 230, the mobile phone determines a first color value of a dominant hue representing the desktop wallpaper or the lock screen wallpaper based on the collected color values of the pixels. In other words, the mobile phone determines the first color value, as described above.
  • the mobile phone to obtain a second color value, determines a color value mapping to the first color value based on the first color value and a preset system guideline color spectrum.
  • the determined first color value determines the second color value, as described above.
  • FIG. 2B is a diagram of an example of nine colors included in a preset system guideline color spectrum.
  • the preset system guideline color spectrum includes the nine color values shown in FIG. 2B and that the different color values have
  • the determined first color value is the color value indicating the dominant hue “white” and that the color value mapping to this color value is the color value (which is also "white") having a code in the system guideline color spectrum being "#f8f8f8,” then the determined second color value is the color value having a code of "#f8f8f8.”
  • FIGS. 2C and 2D are illustrations of examples of codes for different first color values.
  • first color value indicating that the dominant hue is white
  • first color values that map to other codes in the system guideline color spectrum.
  • Each first color value can also have a code.
  • codes of different first color values and mapping relationships between different first color values and second color values exist, as shown in FIGS. 2C and 2D.
  • each image is labeled with two corresponding boxes in the upper-right corner.
  • the color in the upper box of the two boxes indicates the color corresponding to the dominant hue of the image.
  • the values in the box indicate the code of the color value of the color.
  • the color in the lower box indicates a color corresponding to the color value in the system guideline color spectrum mapping from the dominant hue in the image.
  • the characters in the lower box indicate the code of the color value in the system guideline color spectrum. Dominant hues of different images often correspond to different colors, and each of the colors corresponding to a dominant hue of an image can be mapped to a different color value in the system guideline color spectrum.
  • the designated interface elements are interface elements of a basic app.
  • the mobile phone by invoking an operating system interface, assigns a second determined color value to a color attribute of the designated interface elements having a "normal" status.
  • the mobile phone calculates a third color value C3 based on the color value- calculating formula that was set and assigns the third color value to the color attribute of the designated interface elements having a "pressed" status.
  • the mobile phone optionally selects a transparency value from within a first transparency value range (e.g., [65%, 90%]) and assigns the selected transparency value to a transparency attribute of the designated interface elements having a "pressed" status.
  • the mobile phone assigns the determined second color value to the color attribute of the designated interface elements having a "disabled” status.
  • the mobile phone selects a transparency value from within a second transparency value range (e.g., [20%), 60%)]) and assigns the selected transparency value to the transparency attribute of the designated interface elements having a "disabled” status.
  • the mobile phone acquires the designated interface element's color attribute value corresponding to the current status and the designated interface element's color attribute value's transparency attribute value based on the current status of the designated interface element. Moreover, the mobile phone renders an interface including the designated interface elements based on the acquired color attribute value and transparency attribute value, and displays the rendered interface.
  • a presentation condition for the designated interface element can be a condition for triggering presentation of the desktop by the mobile phone.
  • the mobile phone receives a click instruction from the user directed at a "Home" key.
  • the presentation condition for the interface element could be a condition for triggering the mobile phone to present the pull-down notification center.
  • the mobile phone could be receiving a user swipe instruction input through the desktop by swiping from the desktop top to the desktop bottom.
  • the pull-down notification center can be an interface for presenting system notifications, system function switches (such as a Bluetooth switch or airplane mode switch), frequently-used apps of the user, or any combination thereof.
  • the pull-down notification center typically has a hidden status.
  • Process 200 can assign values to color attributes of designated interface elements of a basic app based on the pixel color values of the wallpaper in current use by the user, and thus provide a flexible interface element setting technique. Process 200 thus avoids a poor flexibility arising from the inability to assign values other than default values to color attributes of the interface elements.
  • the designated interface element is a third party app interface element, and if the third party app opens a data access interface to the mobile phone operating system, the mobile phone can employ operations similar to the above to implement the rendering and the displaying of the third party app interface.
  • the mobile phone can assign values to color attributes or transparency attributes of the interface elements by invoking the data access interface.
  • Process 200 can support interface element color adaptive adjustments that are performed each time the wallpaper in current use (desktop wallpaper or lock screen wallpaper) is adjusted by the user. The user thus can enjoy increased satisfaction in the visual experience.
  • FIG. 2E includes screenshots illustrating a wallpaper changing color causing an interface element to change color.
  • the dominant hue of the wallpaper is green and some interface elements (or buttons) also have a green dominant hue.
  • the interface elements (or buttons) that had a green dominant hue change to have a blue dominant hue.
  • FIG. 3 is a structural diagram of an embodiment of a system for setting interface element colors.
  • the system 300 is configured to perform process 100 of FIG. 1 A and includes a color value determining unit 310 and a value assigning unit 320.
  • the system 300 relates to a user terminal, a mobile phone, a device, or the like.
  • the color value determining unit 310 is configured to determine first color values.
  • the color value determining unit 310 specifically determines the first color values based on statuses of the interface elements, designated images, designated events, user-selected color values, or any combination thereof.
  • the color value determining unit 310 determines a first color value based on a color value of a wallpaper currently in use by the user, a color value of the image corresponding to an image selection instruction, or a combination thereof. In another example, the color value determining unit 310 determines a color value mapped from the current status of the interface element based on mapping relationships of different statuses of the interface element to color values. In yet another example, the color value determining unit 310, when a first designated event currently exists, determines color values mapping to first designated events based on the mapping relationships between various designated events and color values. In yet another example, the color value determining unit 310 displays a color value interface including at least two colors and determines the first color values based on user selected colors included in the color value interface.
  • the value assigning unit 320 is configured to assign values to color attributes of interface elements based on the first color values determined by the color value determining unit 310.
  • the value assigning unit 320 assigns values to color attributes of interface elements of a first status based on the first color values determined by the color value determining unit 310.
  • the interface elements include function icons, and the first status includes corresponding functions represented by function icons having an "on" status.
  • the value assigning unit 320 assigns the first color values determined by the color value determining unit 310 to color attributes of the interface elements, or determines second color values mapping to the first color values determined by the color value determining unit 310, and assigns values to color attributes of the interface elements based on the determined second color values.
  • the value assigning unit 320 determines second color values from among the second color values included in a preset second color value set based on the first color values determined by the color value determining unit 310, or calculates the second color values based on the first color values and a preset color value mapping rule. [0120] In some embodiments, the value assigning unit 320 determines second color values corresponding to different categories of interface elements based on the first color values and second color value-determining rules individually preset for the different categories of the interface elements and assigns values to color attributes of interface elements of the different categories based on the second color values corresponding to the different categories of interface elements.
  • the value assigning unit 320 determines the color values corresponding to at least one status of the interface elements based on the second color values determined by the color value determining unit 310 and the color value determining rule for separately setting at least one status of the interface elements, and assigns values to color attributes corresponding to the at least one status of the interface elements based on the color values corresponding to the at least one status of the interface elements.
  • the device further includes: another attribute value determining unit 330 configured to determine attribute values related to non-color display effects and corresponding to interface elements.
  • the value assigning unit 320 is further configured to assign values to attributes related to non-color display effects of the interface elements based on attribute values that are related to the non-color display effects and that were determined by the other attribute value determining unit 330.
  • the attribute values related to non-color display effects include: transparency values, brightness values, gray scale values, or any combination thereof.
  • the color value determining unit 310 is further configured to receive a wallpaper setting instruction, in response to receiving the wallpaper setting instruction, set the image corresponding to the wallpaper setting instruction to be the wallpaper in current use by the user terminal, and determine first color values based on the pixel color values of the image
  • the device 300 can also support assigning values to interface elements that satisfy a designated condition based on the first color values. For example, a value assigning unit 320 determines whether interface elements are preset, color attribute value non-adjustable interface elements prior to assigning values to color attributes of the interface elements based on the first color values, and obtains a negative assessment result.
  • the interface elements include the following categories: icons, text, controls, display area boundaries, display areas, or any combination thereof.
  • the interface elements are interface elements of basic apps, interface elements of third party apps, or a combination thereof.
  • the device 300 can assign values to color attributes of interface elements based on the determined first color values and thus provide an interface element color-setting technique.
  • the technique is a highly-efficient interface element color attribute value-setting technique, because the technique can support automatic adjustments to color attributes of interface elements-based user-set wallpaper, etc. This technique is more efficient than conventional approaches, namely changing interface element attributes based on the adjustments to user terminal system themes. Therefore, the technique can conserve processing resources of user terminal processors while adjusting interface element colors.
  • the units described above can be implemented as software components executing on one or more general purpose processors, as hardware such as programmable logic devices and/or Application Specific Integrated Circuits designed to perform certain functions, or a combination thereof.
  • the units can be embodied by a form of software products which can be stored in a nonvolatile storage medium (such as optical disk, flash storage device, mobile hard disk, etc.), including a number of instructions for making a computer device (such as personal computers, servers, network equipment, etc.) implement the methods described in the embodiments of the present invention.
  • the units may be implemented on a single device or distributed across multiple devices. The functions of the units may be merged into one another or further split into multiple sub-units or units.
  • FIG. 4 is a structural diagram of an embodiment of a smart device for setting interface element colors.
  • the smart device 400 includes: memory 410 and a processor 420.
  • the memory 410 is configured to store computer program instructions.
  • the processor 420 coupled to the memory is configured to read computer instructions stored in the memory, and execute the following operations:
  • the processor assigns values to color attributes of interface elements having a first status.
  • the interface elements include function icons, and the first status includes the corresponding functions represented by the function icons having an "on" status.
  • the processor determines first color values based on statuses of the interface elements, designated images, designated events, user-selected color values, or any combination thereof.
  • the processor determines, based on pixel color values of a designated image, the color value of a dominant hue used to represent the designated image as the first color value. In another example, the processor determines the color value mapped from the current status of the interface element as the first color value based on the mapping relationships of different statuses of the interface element to color values. In yet another example, the processor, when a first designated event currently exists, determines the color values mapping to first designated events based on the mapping relationships between various designated events and color values to be the first color values. In yet another example, the processor displays a color value interface including at least two colors and determines first color values based on selections made by the user of colors included in the color value interface.
  • the processor assigns the first color values to the color attributes of the interface elements; or determines second color values mapping to the first color values, and assigns values to the color attributes of the interface elements based on the determined second color values.
  • the processor determines second color values from among the second color values included in a preset second color value set based on the first color values, or calculates the second color values based on the first color values and a preset color value mapping rule.
  • the processor determines second color values corresponding to different categories of the interface elements based on the first color values and second color value-determining rules individually preset for the different categories of the interface elements and assigns values to color attributes of the interface elements of the different categories based on the second color values corresponding to the different categories of the interface elements.
  • the processor determines the color values corresponding to at least one status of the interface elements based on the determined second color values and the color value determining rule for separately setting at least one status of the interface element, and assigns values to color attributes corresponding to the at least one status of the interface element based on the color values corresponding to the at least one status of the interface element.
  • the smart device can also assign values to attributes related to non-color display effects and corresponding to the interface elements.
  • the processor in the smart device can also determine the attribute values related to the non-color display effects and corresponding to the interface elements, and assign values to attributes related to the non-color display effects of the interface elements based on the attribute values that are related to the non- color display effects and that were determined by the other attribute value determining unit.
  • the attribute values related to the non-color display effects can include transparency values, brightness values, gray scale values, or any combination thereof.
  • FIG. 5 is a functional diagram illustrating an embodiment of a programmed computer system for setting interface element colors. As will be apparent, other computer system architectures and configurations can be used to set interface element colors.
  • Computer system 500 which includes various subsystems as described below, includes at least one microprocessor subsystem (also referred to as a processor or a central processing unit (CPU)) 502.
  • processor 502 can be implemented by a single-chip processor or by multiple processors.
  • processor 502 is a general purpose digital processor that controls the operation of the computer system 500. Using instructions retrieved from memory 510, the processor 502 controls the reception and manipulation of input data, and the output and display of data on output devices (e.g., display 518).
  • Processor 502 is coupled bi-directionally with memory 510, which can include a first primary storage, typically a random access memory (RAM), and a second primary storage area, typically a read-only memory (ROM).
  • primary storage can be used as a general storage area and as scratch-pad memory, and can also be used to store input data and processed data.
  • Primary storage can also store programming instructions and data, in the form of data objects and text objects, in addition to other data and instructions for processes operating on processor 502.
  • primary storage typically includes basic operating instructions, program code, data, and objects used by the processor 502 to perform its functions (e.g., programmed instructions).
  • memory 510 can include any suitable computer- readable storage media, described below, depending on whether, for example, data access needs to be bi-directional or uni-directional.
  • processor 502 can also directly and very rapidly retrieve and store frequently needed data in a cache memory (not shown).
  • a removable mass storage device 512 provides additional data storage capacity for the computer system 500, and is coupled either bi-directionally (read/write) or uni-directionally (read only) to processor 502.
  • storage 512 can also include computer-readable media such as magnetic tape, flash memory, PC-CARDS, portable mass storage devices, holographic storage devices, and other storage devices.
  • a fixed mass storage 520 can also, for example, provide additional data storage capacity. The most common example of mass storage 520 is a hard disk drive. Mass storages 512, 520 generally store additional programming instructions, data, and the like that typically are not in active use by the processor 502.
  • bus 514 can also be used to provide access to other subsystems and devices. As shown, these can include a display monitor 518, a network interface 516, a keyboard 504, and a pointing device 506, as well as an auxiliary input/output device interface, a sound card, speakers, and other subsystems as needed.
  • the pointing device 506 can be a mouse, stylus, track ball, or tablet, and is useful for interacting with a graphical user interface.
  • the network interface 516 allows processor 502 to be coupled to another computer, computer network, or telecommunications network using a network connection as shown.
  • the processor 502 can receive information (e.g., data objects or program instructions) from another network or output information to another network in the course of performing method/process steps.
  • Information often represented as a sequence of instructions to be executed on a processor, can be received from and outputted to another network.
  • An interface card or similar device and appropriate software implemented by e.g.,
  • processor 502 can be used to connect the computer system 500 to an external network and transfer data according to standard protocols. For example, various process embodiments disclosed herein can be executed on processor 502, or can be performed across a network such as the Internet, intranet networks, or local area networks, in conjunction with a remote processor that shares a portion of the processing. Additional mass storage devices (not shown) can also be connected to processor 502 through network interface 516.
  • auxiliary I/O device interface (not shown) can be used in conjunction with computer system 500.
  • the auxiliary I/O device interface can include general and customized interfaces that allow the processor 502 to send and, more typically, receive data from other devices such as microphones, touch-sensitive displays, transducer card readers, tape readers, voice or handwriting recognizers, biometrics readers, cameras, portable mass storage devices, and other computers.
  • the computer system shown in FIG. 5 is but an example of a computer system suitable for use with the various embodiments disclosed herein.
  • Other computer systems suitable for such use can include additional or fewer subsystems.
  • bus 514 is illustrative of any interconnection scheme serving to link the subsystems.
  • Other computer architectures having different configurations of subsystems can also be utilized.

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • Computer Hardware Design (AREA)
  • Human Computer Interaction (AREA)
  • Computer Vision & Pattern Recognition (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

L'invention concerne une définition de couleurs d'éléments d'interface qui consiste à : restituer un élément d'interface; déterminer des premières valeurs de couleurs; affecter une valeur à un attribut de couleur de l'élément d'interface d'après les premières valeurs de couleurs; et mettre à jour l'élément d'interface selon la valeur affectée.
PCT/US2016/065418 2015-12-09 2016-12-07 Procédés et système de définition de couleurs d'éléments d'interface Ceased WO2017100341A1 (fr)

Applications Claiming Priority (4)

Application Number Priority Date Filing Date Title
CN201510906885.6 2015-12-09
CN201510906885.6A CN106855797A (zh) 2015-12-09 2015-12-09 一种界面元素颜色的设置方法及装置
US15/368,414 US10311600B2 (en) 2015-12-09 2016-12-02 Method and system for setting interface element colors
US15/368,414 2016-12-02

Publications (1)

Publication Number Publication Date
WO2017100341A1 true WO2017100341A1 (fr) 2017-06-15

Family

ID=59013232

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/US2016/065418 Ceased WO2017100341A1 (fr) 2015-12-09 2016-12-07 Procédés et système de définition de couleurs d'éléments d'interface

Country Status (1)

Country Link
WO (1) WO2017100341A1 (fr)

Cited By (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US10534973B2 (en) * 2017-04-18 2020-01-14 Google Llc Methods, systems, and media for color palette extraction for video content items
CN115268915A (zh) * 2022-08-10 2022-11-01 抖音视界有限公司 页面代码文件的生成方法及装置、页面的渲染方法及装置
CN115729661A (zh) * 2022-11-09 2023-03-03 福建星网视易信息系统有限公司 基于元素颜色的页面皮肤生成方法及存储介质
EP4246447A3 (fr) * 2017-11-20 2023-11-01 Huawei Technologies Co., Ltd. Procédé et dispositif d'affichage dynamique d'icône selon une image d'arrière-plan
CN117076805A (zh) * 2023-08-31 2023-11-17 北京字跳网络技术有限公司 一种页面元素的配置方法、装置、设备和介质

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20070200875A1 (en) * 2004-04-30 2007-08-30 Isabell Seeger Multimedia system for selecting and activating functions
US20090204913A1 (en) * 2008-02-11 2009-08-13 Apple Inc. User interfaces for managing image colors
US20120154420A1 (en) * 2010-12-15 2012-06-21 Microsoft Corporation Automatic adjustment of computer interface colors using image processing
US8416255B1 (en) * 2009-05-22 2013-04-09 Adobe Systems Incorporated Methods and systems for using colors and color themes

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20070200875A1 (en) * 2004-04-30 2007-08-30 Isabell Seeger Multimedia system for selecting and activating functions
US20090204913A1 (en) * 2008-02-11 2009-08-13 Apple Inc. User interfaces for managing image colors
US8416255B1 (en) * 2009-05-22 2013-04-09 Adobe Systems Incorporated Methods and systems for using colors and color themes
US20120154420A1 (en) * 2010-12-15 2012-06-21 Microsoft Corporation Automatic adjustment of computer interface colors using image processing

Cited By (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US10534973B2 (en) * 2017-04-18 2020-01-14 Google Llc Methods, systems, and media for color palette extraction for video content items
EP4246447A3 (fr) * 2017-11-20 2023-11-01 Huawei Technologies Co., Ltd. Procédé et dispositif d'affichage dynamique d'icône selon une image d'arrière-plan
US12164760B2 (en) 2017-11-20 2024-12-10 Huawei Technologies Co., Ltd. Method and apparatus for dynamically displaying icon based on background image
CN115268915A (zh) * 2022-08-10 2022-11-01 抖音视界有限公司 页面代码文件的生成方法及装置、页面的渲染方法及装置
CN115729661A (zh) * 2022-11-09 2023-03-03 福建星网视易信息系统有限公司 基于元素颜色的页面皮肤生成方法及存储介质
CN117076805A (zh) * 2023-08-31 2023-11-17 北京字跳网络技术有限公司 一种页面元素的配置方法、装置、设备和介质

Similar Documents

Publication Publication Date Title
US10885677B2 (en) Method and system for setting interface element colors
US12112024B2 (en) User interfaces for managing media styles
CN104508684B (zh) 使用照片来设置操作系统颜色
US7146573B2 (en) Automatic window representation adjustment
JP5990600B2 (ja) 色区分に関する色調整器
WO2017100341A1 (fr) Procédés et système de définition de couleurs d'éléments d'interface
CN106919301B (zh) 壁纸预览方法和系统以及壁纸更换方法和系统
CN107621966B (zh) 图形用户界面显示方法、装置和终端设备
CN104750393B (zh) 壁纸设置方法及装置
MX2012009334A (es) Metodo y aparato para generar una interfaz de usuario.
CN106952235B (zh) 一种图像处理方法和移动终端
CN105808035B (zh) 图标显示方法及装置
CN105511728B (zh) 一种终端设备的桌面图标管理方法及装置
CN108737878B (zh) 用于结合视频呈现来修改用户界面颜色的方法和系统
AU2022100086A4 (en) Systems and methods for automatically adjusting design element attributes
CN106777329A (zh) 一种图像信息的处理方法及移动终端
CN103765473B (zh) 提供视图的调整的数字图像表示的方法以及装置
CN116057574A (zh) 色盲辅助技术系统和方法
EP2911115B1 (fr) Dispositif électronique et procédé d'extraction de couleur
CN111399965A (zh) 用户界面兼容显示方法及装置、设备、存储介质
CN106855744A (zh) 一种屏幕显示方法及移动终端
WO2022179431A1 (fr) Procédé et appareil de commutation de mode d'affichage, ainsi que dispositif électronique et support
CN111857474A (zh) 应用程序控制方法、装置及电子设备
CN116261712A (zh) 桌面展示方法、电子设备、显示装置及计算机可读存储介质
CN104090764B (zh) 一种终端

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 16873780

Country of ref document: EP

Kind code of ref document: A1

NENP Non-entry into the national phase

Ref country code: DE

122 Ep: pct application non-entry in european phase

Ref document number: 16873780

Country of ref document: EP

Kind code of ref document: A1