Graphical user interface for controlling ambient lighting color in vehicles (electronic devices)

Abstract

1. Name of the product in this design: Graphical User Interface for Color Control of Ambient Lighting in Vehicles. 2. Purpose of this design: An electronic device. 3. The key design features of this product are its graphical user interface. 4. The image or photo that best illustrates the design points: Interface change state diagram 2. 5. Other views are omitted as they are standard design. 6. Purpose of the graphical user interface: Used for customizing the ambient lighting colors of the upper and lower levels of the vehicle cabin and displaying information. 7. Human-Computer Interaction Method of Graphical User Interface: The main view is the vehicle application settings interface. Clicking the ambient light mode button at the bottom of the main view interface will jump to the ambient light mode settings interface, as shown in Interface Change State Figure 1. The custom button in Interface Change State Figure 1 is the button for customizing the upper and lower ambient light colors of the vehicle cabin. The upper color in its icon displays the color of the upper ambient light of the vehicle cabin, and the lower color in its icon displays the color of the lower ambient light of the vehicle cabin. Clicking the custom button in Interface Change State Figure 1 will jump to the ambient light color customization interface, and a floating layer will appear on the interface, as shown in Interface Change State Figure 2. The right side of the floating layer in Interface Change State Figure 2 has the upper color button and the lower color button, which display the colors of the upper and lower ambient lights of the vehicle cabin, respectively. The upper color button is lit by default, and the color is displayed in Figure 2. When the button is lit, it indicates that the ambient light color can be selected by dragging the circle on the left side of the overlay in Interface Change State Diagram 2. Dragging the left circle in Interface Change State Diagram 2 to select the desired color will change the upper ambient light of the vehicle cabin to the selected color, and the interface will jump to the ambient light color selection result interface. The color in the upper color button on the right side of the overlay will change to the same color as the selected color in the left circle, as shown in Interface Change State Diagram 3. Clicking the connection button between the upper and lower color buttons on the right side of the overlay in Interface Change State Diagram 3 will change the color of the lower ambient light of the vehicle cabin to the same color as the upper ambient light of the vehicle cabin, and the interface will jump. The color of the lower color button on the right side of the overlay will change to the same color as the upper color button, as shown in Interface Change State Diagram 4. The brown blocks in the main view and Interface Change State Diagrams 1-4 are all content screens.

Images