輔助顏色和元件
為了清楚地表達操作命令，可以使用輔助顏色修飾編號或系統按鈕。每種顏色可以採用的形狀具有特定的預定含義，並且必須遵守特定的順序。
1.編號
每個有顏色編號選項必須都是圓形。圓形有兩種尺寸和四種顏色可供選擇;他們的外觀順序和數量固定在每個螢幕上。數值及其相應的顏色標籤可以顯示為以下兩種尺寸和四種顏色。
不帶框線的大編號選項
功能表清單中使用的色彩：大圓圈
Yellow: #f3be07 Green: #5dc24a Blue-green: #03c4b4
Size: 111dp*111dp Size: 111dp*111dp Size: 111dp*111dp
帶框線的小編號選項
格線選單使用的色彩：帶有黑色邊框的小圓圈
Yellow: # f3be07 Green: #5dc24a Blue-green: #03c4b4 Blue: #12afe2
Size: 102dp*102dp Size: 102dp*102dp Size: 102dp*102dp Size: 102dp*102dp
用法和階層規則
不同大小的編號標籤必須遵守一定的使用規則。 沒有黑色邊框的大標籤僅用於單欄或雙欄清單，帶有黑色邊框的小標籤用於水平式的聯絡人列表或grid view。 數字及其對應的顏色標籤順序是固定的，從上到下，從左到右排列。
- 單列列表
顯示含有大標籤的垂直式單列列表。
使用
大圓圈必須用於清單列表，並且從上到下排序，並以正確的顏色順序排列。
Yellow: # f3be07 > Green: #5dc24a > Blue-green: #03c4b4
不要這樣使用
清單列表中的訊息超過三行。
不要這樣使用
清單上的編號選項必須從上到下遵循正確的順序。
不要這樣使用
清單上的編號選項不允許有任意顏色； 他們只能從上述三種顏色中選擇：黃色、綠色和藍綠色。
不要這樣使用
不得更改清單上編號選項的大小。
- 雙列列表
不含黑色邊框的大選項只用於垂直式有兩列的列表視圖。
使用
大圓圈必須在清單列表中使用，並且從上到下排序，並以正確的顏色順序排列。
數字必須按行排列（從左到右）。
Yellow: #f3be07 > Green: #5dc24a > Blue-green: #03c4b4
不要這樣使用
任何清單列表中的行數不得超過三行。
不要這樣使用
對於雙列列表，數字必須按行排列（從左到右），不得按列排列。
不要這樣使用
編號選項的顏色必須順序，從上到下排列。 顏色隨意排列的標籤將難以閱讀。
不要這樣使用
不得更改清單上編號選項的大小。
- 聯絡人列表或grid view
帶有黑色邊框的小標籤用於水平聯絡人清單或grid view。
使用
在grid清單上，必須使用帶有黑色邊框的小圓圈，以正確的顏色順序從左到右排列為：
Yellow: #f3be07 > Green: #5dc24a > Blue-green: #03c4b4 > Blue: # 12afe2
使用
對於聯絡人列表，同樣需要使用帶有黑色邊框的小圓圈，以正確的顏色順序從左到右排列為：
Yellow: #f3be07 > Green: #5dc24a > Blue-green: #03c4b4 > Blue: # 12afe2
不要這樣使用
不得更改清單上編號選項的大小。
不要這樣使用
對於聯絡人或grid，編號選項的顏色必須以正確的順序（綠色、橙色、粉色、紫色）從左到右排列。 避免使用任意順序的標籤，因為難以閱讀。
2.系統按鈕
系統按鈕是 Zenbo 在使用者介面上主要的操作方式； 單個螢幕上最多允許有 5 個按鈕。 每個系統按鈕必須是膠囊的形狀，且高度及顏色應與字串的含義相對應。
顏色和語言規則
系統按鈕的顏色由按鈕裡的字串涵義決定：藍色表示中性任務，紅色表示決定性但負面的文字/語句或警告，綠色表示決定性和正向的文字/語句。
Blue: #12afe2 Red: #ff0c57 Green: #03c4b4
階層規則
對於分層排列，顏色的順序是：藍色 > 紅色 > 綠色，從左到右，從上到下排列。
當三種顏色的按鈕一起出現時，藍色按鈕總是在最左邊，紅色按鈕緊隨其後。 綠色按鈕出現在最右邊的位置。
使用
系統按鈕顏色的順序，從左到右，從上到下，依次為：
blue (#12afe2) > red (#ff0c57) > green (#03c4b4)
不要這樣使用
系統按鈕必須按照上述順序，不能隨意重新排列。
使用
系統按鈕的顏色應與其指定的功能相匹配。
不要這樣使用
系統按鈕的顏色不應隨意重新排列，混淆邏輯；他們必須與按鈕的指定功能相匹配。
不要這樣使用
系統按鈕的順序必須按照對應功能的順序排列。
規格
如果系統按鈕被禁用，請將其不透明度級別降低到 20%。 如果按鈕處於反饋模式，則使用不透明度為 20% 的顏色作為背景。
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%
尺寸和版面配置
有兩種尺寸和四種狀態，視排列情況而定。
如果只有一個選項可用，則必須使用位於螢幕中央和下部的“長”按鈕。
Height: 80dp, width: 570dp
當有兩個按鈕時，他們也必須放在螢幕底部。
Height: 80dp, width: 570dp, Spacing 20dp
對於三個選項，使用“短”按鈕並將他們放在螢幕底部。
Height: 80dp, width: 374dp, Spacing 20dp
對於四個選項，請使用排列在兩個不同行中的“長”按鈕。
Height: 80dp, width: 570dp, Horizontal Spacing 20dp, Vertical Spacing: 30dp
如果有五個按鈕，他們必須排列成兩排，上方三個“短”按鈕，下方兩個“長”按鈕。
Top row: three short button, Height: 80dp, width: 374dp
Button row: two long button, Height: 80dp, width: 570dp
Horizontal Spacing 20dp, Vertical Spacing: 30dp
3.瀏覽器上的按鈕和圖示
為了讓使用者的瀏覽體驗更好，每個按鈕都必須包含一個圖示和描述性文字。 這些按鈕的長度比系統按鈕短，並且字體允許不同的規格； 但是，這些類型的按鈕只能在瀏覽網站時使用。 對於其他應用程式，其系統按鈕必須符合 Zenbo 系統按鈕的規範。
顏色和尺寸
在顏色方面，應該只使用單色Blue#12afe2，以及扁平的粗邊框的簡單圖示。
Top row: five buttons a line, Height: 80dp, width: 238dp
Bottom row: Height: four button a line, 80dp, width: 299dp
Spacing: 15dp
4.狀態圖示
使用相機、多媒體播放器或音樂播放器介面時，螢幕將顯示當前狀態，螢幕按鈕為藍色背景的圓形，並包含一個比例相較大的白色圖示。
Auto Beauty mode HDR Party Panorama
5.插圖
系統螢幕上使用的插圖必須是純色的平面 2D 樣式，以產生生動的效果。
色彩漸層和組成部分
一些組成部分採用高色彩飽和度的設計，呈現特殊的光學效果，呼應 Zenbo 的未來科技感，體現其流暢的視覺形象。
- 綠黃漸層色
顏色和用法
Start color: #00fff0
Following color: #fff000
強調選定的聯絡人
當系統在必須進行選擇的重要步驟時，例如選擇聯絡人，將在選擇的後面放置一個黃綠漸層色以強調其重要性。
圖示特別顯示
當使用者選擇特定功能或完成傳輸時，系統會在不透明度為 80% 的黑色背景上顯示一個綠黃漸層色的圖示。
- 藍綠漸層色
顏色和用法
Start color: #00e4b1
Following color: #005bfe
倒數進度
當系統執行文件刪除或不保存退出等重要步驟時，將需要倒數計時畫面。 顏色將從藍綠色逐漸過渡到深藍色，背景應為黑色，不透明度為 80%。
使用
流線型曲線在黑色背景上具有流動感，不透明度為 80%。
不要這樣使用
為了在組件、命令和字串之間形成更鮮明的對比，並提高整體可讀性，需要在倒數計時畫面上使用不透明度為 80% 的黑色背景。
多媒體播放器
播放影片或音樂時，必須使用藍綠色漸變。 請注意，當使用帶有色彩漸層的拖尾效果時，組件的圓形頂部必須產生一種拖尾效果，類似於在黑暗中由煙火留下的殘影。
使用
播放影片時必須顯示顏色漸變，漸變必須是藍綠色組合。
不要這樣使用
播放影片時不要使用具有不同顏色組合的漸變。
- 黃白漸層色
顏色和用法
Start color: #fff000
Following color: #ffffff
亮度調節
當系統調整螢幕的亮度時，將使用特殊的黃白漸層色來呈現與照明等級相關的顏色。
使用
在調整螢幕亮度時，需要結合使用黃白色調和帶有拖尾效果的組件。
不要這樣使用
請勿使用黃色和白色以外的顏色來表示螢幕亮度。 此外，不要在圓弧的上方使用圓形。
- 藍白漸層色
顏色和用法
Start color: #d7fafe
Following color: #36c7fd
增量調整拖曳條
調節音量時，使用比較簡單的藍白漸層色。
使用
使用藍白漸層色以獲得簡單而整潔的畫面。
不要這樣使用
調整系統設置時，請使用簡單的顏色而不是漸層色，以避免視覺混亂。
6.強調色
藍色強調色
Color & Usage
Start color: #12afe2
如果文章很長，請以藍色強調重要的文字和句子。
使用
使用系統的藍色強調重要的單詞和句子。
不要這樣使用
強調顏色必須謹慎使用，否則會失去這些重要文字的意義。
7.選擇組件
- 元件列表
系統控制元件的顏色主要是白色和藍色的組合，如核取方塊取、單選按鈕、開關按鈕。
Color
Start color: #12afe2
規格
核取方塊、單選按鈕、開關按鈕的開啟和關閉
多選：核取方塊
單選：單選按鈕
切換：開關按鈕
- 單欄選單
顏色和用法
當使用者在單選狀態下選擇帶有語音命令的項目時，需要用藍色背景強調該項目以表明其被選中。 在多選狀態下，使用藍色背景和藍色核取方塊強調選中的項目。
單選狀態
- 使用背景顏色強調選擇的項目
Highlight BG color: #03c4b4
Highlight BG opacity:50%
多選狀態
Highlight check box color: #12afe2
Highlight BG color: #03c4b4
Highlight BG opacity: 50%
- 多媒體選單
顏色和用法
Highlight color: #12afe2
選擇帶語音的項目時，使用藍色邊框和藍色核取方塊強調所選項目。
使用
使用核取方塊和藍色邊框強調每個選定項目。
不要這樣使用
不要為核取方塊或選擇邊框使用任何其他顏色。