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.
- 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.
- 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.
- 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.
- 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 - 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 - 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
- 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 - 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%
- 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.