ok

Auxiliary colors and components

In order to articulate an operational command, auxiliary colors are used to embellish the numbering or system buttons. The shapes that each color can assume have specific, predefined meanings, and a specific order must be obeyed.

1.Numbering

The shape of each number's color tab must be a circle. Circles are available in two sizes and four colors; their order of appearance and quantities are fixed on each screen. The numbers and their corresponding color labels can appear in the following two sizes and four colors.
Large numbering tab without stroke
Colored numbers used in the menu list: large circles

                               

Yellow: #f3be07                    Green: #5dc24a                  Blue-green: #03c4b4 

Size: 111dp*111dp              Size: 111dp*111dp             Size: 111dp*111dp

Small numbering tab with stroke
Colored numbers used in grid menus: small circles with black borders

                                                                                    

Yellow: # f3be07                   Green: #5dc24a                       Blue-green: #03c4b4                 Blue: #12afe2

Size: 102dp*102dp               Size: 102dp*102dp                 Size: 102dp*102dp                    Size: 102dp*102dp

Usage & hierarchy rule

The numbering tabs of different sizes must obey certain usage rules. Large tabs with no black borders are used only in single or double-column menus Small tabs with black borders are used in a horizontal contact list or the grid view. The order of appearance of the numbers and their corresponding color labels is fixed, and they are ordered from top to bottom, left to right.

  1. Single-column List view
    A vertical single-column list view is displayed with large tabs.

    Do
    Large circles must be used in a list of menu items and be ordered from top to bottom and also arranged in the correct color order.
    Yellow: # f3be07      >    Green: #5dc24a      >    Blue-green: #03c4b4



    Don’t
    No more than three rows of information are allowed on the menu list.


    Don’t
    The numbering tabs on the menu must follow the correct order from top to bottom, namely green, blue, and yellow.


    Don’t
    The numbering tabs on the menu are not allowed to have arbitrary colors; they can only be selected from the three colors mentioned above: yellow, green, and blue-green.


    Don’t
    The size of the numbering tabs on the menu must not be changed.
  2. Double-column List view
    Only large tabs without black borders are used for vertical, two-column list view.

    Do
    Large circles must be used in a list of menu items and be ordered from top to bottom and also arranged in the correct color order.
    The numbers must be arranged in rows(going from left to right).
    Yellow: #f3be07      >    Green: #5dc24a      >    Blue-green: #03c4b4


    Don’t
    No more than three rows of information are allowed on any menu list.


    Don’t
    For a double-column list view, the numbers must be arranged in rows (going from left to right) and may not be arranged in columns.


    Don’t
    The colors of numbering tabs must be in the order of green, orange, and pink, arranged from top to bottom. Arbitrarily ordered labels will be difficult to read.


    Don’t
    The size of the numbering tabs on the menu must not be changed.

  3. Contacts List or the grid view
    Small tabs with black borders are used in a horizontal contacts menu or the grid view.

    Do
    On a grid menu, it is necessary to use small circles with black borders, arranged from left to right in the correct color order, which is: Yellow: #f3be07  > Green: #5dc24a > Blue-green: #03c4b4  > Blue: # 12afe2


    Do
    For the contacts list, it is likewise necessary to use small circles with black borders, arranged from left to right in the correct color order, which is:
    Yellow: #f3be07  > Green: #5dc24a > Blue-green: #03c4b4  > Blue: # 12afe2


    Don’t
    The size of the numbering tabs on the menu must not be changed.


    Don’t

    For a contacts or grid view, the colors of the numbering tabs must be arranged in the correct order (green, orange, pink, purple) from left to right. Avoid using arbitrarily ordered labels which may be difficult to read.


  4. System Buttons
    System buttons are the principal means of operation for Zenbo's GUI; no more than 5 buttons are allowed on a single screen. Each system button must be in the shape of a capsule, with a fixed height and color that corresponds to the text string's meaning.

    Color & Linguistic rules
    The color of a system button is determined by the meaning of the text string contained within: blue for neutral tasks, red for a decisive but negative word/phrase or warning, and green for a decisive and positive word/phrase.
    Blue: #12afe2            Red: #ff0c57           Green: #03c4b4

    Hierarchy rule
    For a hierarchical arrangement, the order of colors are: blue  > red  > green, placed from left to right and top to bottom.

    When buttons of all three colors appear together, the blue button is always in the leftmost position, followed by the red button. The green button appears in the rightmost position.

    Do
    The order of system buttons' colors, arranged from left to right, top to bottom, are:
    blue (#12afe2)  > red (#ff0c57)  > green (#03c4b4)


    Don’t
    System buttons must follow the order described above and cannot be rearranged arbitrarily.


    Do
    The colors of system buttons should match their assigned functions.


    Don’t
    The colors of system buttons should not be rearranged arbitrarily in a way that confuses the logic; they must match the assigned functions of the buttons.


    Don’t
    The order of system buttons must be arranged in an order that reflects their function.

    Spec
    If a system button is disabled, lower its opacity level to 20%. If the button is in feedback mode, then a color with 20% opacity is used as the background.

    Blue disable stroke: #12afe2 opacity 20% BG:#000000 opacity 20% ; Blue normal stroke: #12afe2 BG:#000000 opacity 80% ; Blue pressed stroke: #12afe2 BG: #12afe2 opacity 20%
    Red disable stroke: #ff0c57 opacity 20% BG:#000000 opacity 20% ; Red normal stroke: #ff0c57 BG:#000000 opacity 80% ; Red pressed stroke: #ff0c57 BG: #ff0c57 opacity 20%
    Green disable stroke: #03c4b4 opacity 20% BG:#000000 opacity 20% ; Green normal stroke: #03c4b4 BG:#000000 opacity 80% ; Green pressed stroke: #03c4b4 BG: #03c4b4  opacity 20%

    Size & layout rules
    There are two sizes and four states, depending on the conditions of arrangement.
    If only one option is available, the "long" button placed at the center and lower portion of the screen must be used.

    Height: 80dp, width: 570dp

    When there are two buttons, they must also be placed at the bottom of the screen.

    Height: 80dp, width: 570dp, Spacing 20dp

    For three options, use "short" buttons and place them at the bottom of the screen.

    Height: 80dp, width: 374dp, Spacing 20dp

    For four options, use "long" buttons arranged in two different rows.

    Height: 80dp, width: 570dp, Horizontal Spacing 20dp, Vertical Spacing: 30dp

    If there are five buttons, they must be arranged in two different rows with three "short" buttons on the top and two "long" buttons on the bottom.

    Top row: three short button, Height: 80dp, width: 374dp
    Button row: two long button, Height: 80dp, width: 570dp
    Horizontal Spacing 20dp, Vertical Spacing: 30dp
  5. Buttons and Icons on the browser
    To better reflect users' actual browsing habits, each button must contain an icon and descriptive text. These buttons are shorter in length than system buttons, and different specs are allowed for the font; however, these type of buttons can only be used when browsing websites. For other apps, their system buttons must conform to the specs specified for Zenbo's system buttons.

    Color & Size
    In terms of colors, only monochrome blue #12afe2 should be used, along with simple icons that are flat with thick borders.

    Top row: five buttons a line, Height: 80dp, width: 238dp
    Bottom row: Height: four button a line, 80dp, width: 299dp
    Spacing: 15dp
  6. Status icons
    When using the camera, video player, or music player interface, the screen will present the current status with an on-screen button which is in circular in shape with a blue background, and contains a white icon that is proportionally large.

                     
            
                Auto                        Beauty mode                        HDR                               Party                        Panorama

 

5.Illustrations

Illustrations used on system screens must be in a flat, 2D style with solid colors to produce a lively effect.



Color gradients and components
Some components are designed with high color saturation gradients to present special optical effects, which echo Zenbo's sense of futuristic technology reflecting its sleek visual image.

1.Green-yellow gradient

Color & Usage
Start color: #00fff0
Following color: #fff000

Selected contact highlight
When the system engages in an important step where a selection must be made, such as the selection of a contact, a green-yellow gradient will be placed behind the selection to emphasize its importance.


Icon Highlight
When the user has selected a particular function or has completed a transfer, the system will display an icon in green-yellow gradient on a black background with 80% opacity.

2.Blue-green gradient

Color & Usage
Start color: #00e4b1
Following color: #005bfe

Countdown progress
When the system carries out an important step such as file deletion or exiting without saving, a countdown screen will be required. The color will transition gradually from blue-green to dark blue, and the background should be black with 80% opacity.

Do
Streamlined curves with a flowing sensation on a black background with 80% opacity.


Don’t
In order to create more sharp contrasts between components, commands, and text strings as well as to improve the overall readability, it is necessary to use a black background with 80% opacity on the countdown screen.


Multimedia Player
When playing video or music, a blue-green gradient must be used. Note that when using trailing effects with a color gradient, the component's circular top must produce a trailing effect similar to the after image left behind by a sparkler in the dark.

Do
A color gradient must be displayed when playing a video, and the gradient must be the blue-green combination.


Don’t
Do not use gradients with different color combinations when playing a video.

3.Yellow-White gradient

Color & Usage
Start color: #fff000
Following color: #ffffff

Brightness adjustment
When the system adjusts the screen's brightness level, a special yellow-white gradient will be used to reflect colors associated with the level of illumination.

Do
When adjusting the screen's brightness, it is necessary to employ the yellow-white tones in conjunction with a component with trailing effects.


Don’t
Do not use colors other than yellow and white to indicate levels of screen brightness. In addition, do not use a regular circle at the top of the component's circular arc.

4.Blue-White gradient

Color & Usage
Start color: #d7fafe
Following color: #36c7fd

Increment adjustment drag bars

When adjusting the volume, use the relatively simple blue-white gradient.

Do

Use blue-white gradient for a simple and uncluttered screen.

Don’t

When adjusting system settings, use simple colors instead of gradients to avoid visual confusion.

Accent colors

1.Blue Highlight

Color & Usage
Start color: #12afe2

If the text is long, highlight the important words and phrases in blue.

Do

Use the system's blue color to highlight important words and phrases.

Don’t

The highlighting color must be used sparingly, otherwise the point of focusing on only important words will be lost.

Selecting Components

  1. List of components
    The colors of the system's control components, such as check boxes, radio buttons, switch buttons, are mainly a combination of white and blue.


    Color
    Start color: #12afe2

    Spec
    check box, radio button, switch button on & off
    Multiple selections: check box
    Single selection: radio button
    Toggle: switch button
  2. Single-column menus
    Color & Usage
    When the user selects an item with voice commands under the single-selection state, it is necessary to highlight the item with a blue background to indicate its selection. Under the multiple-selection state, use a blue background with blue check boxes to highlight selected items.

    Single-selection state
    Using background color to highlight selections
    Highlight BG color: #03c4b4
    Highlight BG opacity:50% 

    Multiple-selection state

    Highlight check box color: #12afe2
    Highlight BG color: #03c4b4
    Highlight BG opacity: 50%
     
  3. Multimedia menu item selection
    Color & Usage
    Highlight color: #12afe2

    When selecting items with voice, use blue borders and blue check boxes to highlight the selected objects.

    Do
    Use a check box and blue borders to highlight each selected object.
    Don’t
    Do not use any other colors for check boxes or selection borders.
Go To Top