《電力企業(yè)移動應(yīng)用界面設(shè)計指南》征求意見稿

ICS號

中國標(biāo)準(zhǔn)文獻(xiàn)分類號

CES

團(tuán)體標(biāo)準(zhǔn)

T/CESXXX-XXXX

電力企業(yè)移動應(yīng)用界面設(shè)計指南

PowerEnterpriseMobileApplicationInterfaceDesignGuidelines

（征求意見稿）

XXXX-XX-XX發(fā)布XXXX-XX-XX實施

T/CESXXX-XXXX

電力企業(yè)移動應(yīng)用界面設(shè)計指南

1范圍

本文件從信息結(jié)構(gòu)、布局、啟動、圖標(biāo)、色彩、文本、動作、設(shè)計輸出8個方面為電力

企業(yè)移動應(yīng)用提供界面設(shè)計指導(dǎo)。

本文件適用于電力企業(yè)移動應(yīng)用界面設(shè)計，旨在提高電力企業(yè)移動應(yīng)用界面的一致性和

用戶體驗。

本文件規(guī)定了電力企業(yè)以人為中心的移動應(yīng)用界面設(shè)計要求，主要集中在以下8個方面：

——第1部分：信息結(jié)構(gòu)

——第2部分：界面布局

——第3部分：啟動

——第4部分：圖標(biāo)

——第5部分：色彩

——第6部分：文本

——第7部分：動作

——第8部分：設(shè)計輸出

2參考文件

引用標(biāo)準(zhǔn)

下列文件中的內(nèi)容通過文中的規(guī)范性引用而構(gòu)成本文件必不可少的條款。其中，注日期

的引用文件，僅該日期對應(yīng)的版本適用于本文件;不注日期的引用文件，其最新版本(包括

所有的修改單)適用于本文件。

GB/T18976—2003以人為中心的交互系統(tǒng)設(shè)計過程

GB/T18978—2014系統(tǒng)交互工效學(xué)第151部分：互聯(lián)網(wǎng)用戶界面指南

GB/T18978.11—2004使用視覺顯示終端（VTDs）辦公的人類功效學(xué)要求第11部分：

可用性指南

ISO9241-210-2010Ergonomicsofhuman-systemineteraction-Part210:Human-centerd

designforinteractivesystems

DL/T600電力行業(yè)規(guī)范編寫基本規(guī)定（規(guī)則）

參考文獻(xiàn)

《國家電網(wǎng)公司品牌標(biāo)識推廣應(yīng)用手冊(第三版)》

AppleiOSHumanInterfaceGuidelinesAppleiOS人機界面指南

GoogleMaterialDesign谷歌材料設(shè)計

WindowsappsHumanInterfaceGuidelinesWindows應(yīng)用程序人機界面指南

HarmonyOSGeneraldesignguides鴻蒙通用設(shè)計指南

3術(shù)語和定義

下列術(shù)語和定義適用于本文件。

1

T/CESXXX-XXXX

3.1用戶User

與產(chǎn)品交互的個體。

[來源：GB/T18978.11-2004]

3.2原型Prototype

交互式系統(tǒng)整體性代表或部分性代表。盡管在某些方面代表性有局限，但能夠用于評價。

[來源：GB/T18976-2003]

3.3使用情景UsageScenarios

用戶、任務(wù)、設(shè)備以及使用產(chǎn)品的物理和社會壞境。

[來源：GB/T18978.11-2004]

3.4可用性Usability

以有效性、效率和滿意度為指標(biāo)，產(chǎn)品在特定使用背景下為了特定的目標(biāo)可為特定用戶

使用的程度。

[來源：GB/T18978.11-2004]

3.5用戶體驗UserExperience

個人對產(chǎn)品、系統(tǒng)或服務(wù)的使用和/或預(yù)期使用產(chǎn)生的看法和回應(yīng)。

[來源：ISO9241-210-2010]

3.6以用戶為中心UserCentric

把考慮使用某個系統(tǒng)的個人、團(tuán)體的利益及需求作為主要目標(biāo)的方法。

[來源：GB/T18976-2003]

3.7容器Container

能夠?qū)⑵渌丶胖迷谄渖厦娴目丶?/p>

3.8移動應(yīng)用MobileApps

是一種計算機程序或軟件應(yīng)用程序設(shè)計成在運行上的移動設(shè)備，諸如電話、平板電腦或

手表。

3.9信息結(jié)構(gòu)InformationArchitecture

是指對某一特定內(nèi)容里的信息進(jìn)行統(tǒng)籌、規(guī)劃、設(shè)計、安排等一系列有機處理的想法。

4移動應(yīng)用界面設(shè)計要求

4.1總體說明

移動應(yīng)用界面設(shè)計是在遵從iOS、Andriod和Harmony平臺總體設(shè)計要求基礎(chǔ)之上制定

的，包括信息結(jié)構(gòu)、布局、啟動、圖標(biāo)、色彩、文本、動作和設(shè)計輸出8個部分。具體如圖1

所示：

2

T/CESXXX-XXXX

圖1總體說明圖

4.2信息結(jié)構(gòu)

4.2.1導(dǎo)航

4.2.1.1導(dǎo)航設(shè)計要求

導(dǎo)航是配合使用導(dǎo)航結(jié)構(gòu)、導(dǎo)航控件以及硬件或系統(tǒng)級導(dǎo)航功能以提供在微應(yīng)用、頁面

之間切換的操作模型。設(shè)計要求包含以下內(nèi)容：

a)應(yīng)使用對等導(dǎo)航結(jié)構(gòu)，實現(xiàn)按任意順序從一個頁面轉(zhuǎn)到另一個頁面；

b)應(yīng)使用層級結(jié)構(gòu)將頁面組織為樹狀結(jié)構(gòu)，每個子頁面應(yīng)只有一個父頁面，若要訪問子頁

面，必須經(jīng)過父頁面；

c)應(yīng)根據(jù)類型和數(shù)量將內(nèi)容進(jìn)行合理分層和分組，并形成多個頁面以供用戶瀏覽、編輯和

交互，不應(yīng)將應(yīng)用的全部或大部分內(nèi)容、功能放置在同一個頁面內(nèi)；

d)應(yīng)合理設(shè)計標(biāo)識元素，讓用戶隨時知道當(dāng)前在應(yīng)用內(nèi)所處的位置；

e)應(yīng)用內(nèi)應(yīng)提供后退按鈕；關(guān)于后退按鈕的類型參見附錄A.1。

4.2.1.2導(dǎo)航控件及應(yīng)用場景

應(yīng)正確使用導(dǎo)航控件，使用場景應(yīng)符合應(yīng)用場景。表1提供了經(jīng)典導(dǎo)航控件以及對應(yīng)的

應(yīng)用場景。

經(jīng)典導(dǎo)航控件應(yīng)用場景

全局導(dǎo)航支持用戶在同級別屏幕頁面之間切換。

大綱導(dǎo)航支持用戶在頁面詳細(xì)內(nèi)容之間切換。

選項導(dǎo)航支持用戶在一組水平選項之間進(jìn)行切換。

中心導(dǎo)航支持用戶在一個頁面內(nèi)瀏覽查看內(nèi)容，而無需導(dǎo)航到其他頁面。

支持顯示當(dāng)前位置路徑以及用戶能夠返回到以前的任何級別操作路

面包屑導(dǎo)航

徑。

超鏈接導(dǎo)航支持用戶通過嵌入的超鏈接元素進(jìn)行頁面切換。

表1導(dǎo)航控件及應(yīng)用場景

3

T/CESXXX-XXXX

4.2.2內(nèi)容

4.2.2.1內(nèi)容設(shè)計要求

內(nèi)容即移動應(yīng)用顯示的實際內(nèi)容。內(nèi)容根據(jù)應(yīng)用場景分為“展示”、“編輯”和“交互”

三種典型類型。其中，前兩者主要是單向交互體驗，后者是雙向交互體驗。設(shè)計要求包含以

下內(nèi)容：

a)側(cè)重于內(nèi)容展示

1)應(yīng)創(chuàng)建專用導(dǎo)航頁面和內(nèi)容查看頁面，使用戶查找內(nèi)容，在專用頁面上可不受

干擾的查看內(nèi)容；

2)應(yīng)創(chuàng)建一個全屏視圖選項，用于擴展內(nèi)容以填充整個屏幕并隱藏其他所有UI

（用戶界面）元素。

b)側(cè)重于內(nèi)容創(chuàng)建和編輯

1)應(yīng)減少導(dǎo)航元素的使用；

2)在用戶執(zhí)行大量的操作場景下，應(yīng)提供操作歷史記錄和撤消功能。

c)側(cè)重于內(nèi)容交互

1)對于側(cè)重于內(nèi)容交互形式的應(yīng)用場景，應(yīng)確保導(dǎo)航、內(nèi)容和交互元素三者保持

平衡。

d)應(yīng)將相似或相近的內(nèi)容放置在一起。

4.2.2.2內(nèi)容控件及使用場景

應(yīng)盡可能使用系統(tǒng)平臺提供的標(biāo)準(zhǔn)UI控件控制來顯示內(nèi)容，使用場景應(yīng)符合對應(yīng)的應(yīng)

用場景。表2提供了iOS、Android和Harmony內(nèi)容的標(biāo)準(zhǔn)UI元素以及對應(yīng)的應(yīng)用場景。

標(biāo)準(zhǔn)內(nèi)容控件應(yīng)用場景

音視頻播放音頻和視頻。

圖片視圖顯示和瀏覽相冊中的圖片。

表格視圖、下拉列表、列表視圖、網(wǎng)格視圖顯示和選擇交互式列表或網(wǎng)格中的選項。

文本、輸入框、文本域、文本編輯器顯示文本信息。

表2標(biāo)準(zhǔn)內(nèi)容控件及應(yīng)用場景

4.2.3交互

4.2.3.1交互設(shè)計要求

交互是使用戶能夠執(zhí)行創(chuàng)建、編輯和處理的交互式UI控件。設(shè)計要求包含以下內(nèi)容：

a)側(cè)重創(chuàng)建和編輯內(nèi)容時，應(yīng)明確想要用戶完成的操作，如：創(chuàng)建、編輯和處理以及

根據(jù)用戶目標(biāo)提供正確類型的交互；

b)讓用戶使用手勢動作、旋轉(zhuǎn)或以其他方式移動設(shè)備來直接操縱頁面中的內(nèi)容。

4.2.3.2交互控件及應(yīng)用場景

應(yīng)針對不同類型的交互選擇適合的UI控件，確保符合對應(yīng)的應(yīng)用場景。表3提供了iOS、

4

T/CESXXX-XXXX

Android和Harmony交互的標(biāo)準(zhǔn)UI控件以及對應(yīng)的應(yīng)用場景。

交互控件應(yīng)用場景

按鈕觸發(fā)一個即時操作，例如：提交表單數(shù)據(jù)。

日期選擇器查看、修改日期和時間信息。

表格、列表、網(wǎng)格列表顯示以文字選項或圖片選項為主的內(nèi)容集合。

下拉列表、列表框用于用戶從展開式列表中或可滾動的框中選擇某一項。

提示在用戶輸入時提供相關(guān)建議。

選項按鈕、選擇選擇不同的應(yīng)用配置選項。

菜單、上下文菜單顯示操作選項或上下文操作選項。

浮層控件用于常駐頁面的命令按鈕。

容器使用場景建議

畫布、窗格承載一組應(yīng)用的內(nèi)容區(qū)域。

欄承載一組命令菜單或選項的交互式控件。

對話框用于提供上下文操作反饋。

表3標(biāo)準(zhǔn)交互控件及應(yīng)用場景

4.2.3.3容器及應(yīng)用場景

應(yīng)針對不同的交互元素組合選擇適合的容器，確保用戶高效操作。表4提供了經(jīng)典容器

控件以及對應(yīng)的應(yīng)用場景。

表4容器的要求

4.3布局

4.3.1布局適應(yīng)

4.3.1.1布局適應(yīng)要求

應(yīng)為UI定義不同的視覺狀態(tài)，以便在窗口寬度或高度超過指定的閾值時應(yīng)用不同的視

覺狀態(tài)，滿足以下要求：

a)在設(shè)備發(fā)生旋轉(zhuǎn)時，應(yīng)始終保持聚焦在當(dāng)前內(nèi)容；

b)應(yīng)確保內(nèi)容是清晰的。在用戶沒有主動放大文本或圖像時、內(nèi)容是默認(rèn)大小時，應(yīng)

保證能夠清晰瀏覽內(nèi)容。

c)應(yīng)避免不必要的布局變化，旋轉(zhuǎn)設(shè)備不應(yīng)使整個布局發(fā)生變化，應(yīng)維持原有的使用

習(xí)慣，使用相似的格式。

d)應(yīng)支持一個方向上的兩種變化。如果移動應(yīng)用只支持一個方向，那么當(dāng)設(shè)備旋轉(zhuǎn)時，

移動應(yīng)用也應(yīng)旋轉(zhuǎn)內(nèi)容來響應(yīng)變化。

e)應(yīng)合理使用布局屬性和面板以重新定位、調(diào)整大小和重排內(nèi)容。

5

T/CESXXX-XXXX

4.3.1.2響應(yīng)式布局設(shè)計要求

響應(yīng)式布局設(shè)計要求如下，關(guān)于響應(yīng)式布局重新布局參見附錄A.3：

a)應(yīng)修改UI元素的位置和布局方式，以充分利用每臺設(shè)備；

b)應(yīng)調(diào)整UI元素的邊距和大小來優(yōu)化框架大??；

c)應(yīng)根據(jù)設(shè)備和方向更改UI元素的排列，以最佳方式呈現(xiàn)內(nèi)容；

d)應(yīng)基于屏幕空間顯示或隱藏UI；

e)應(yīng)對特定設(shè)備大小級別或方向來切換用戶界面；

f)應(yīng)折疊或拆分應(yīng)用的體系結(jié)構(gòu)，以更好地適應(yīng)特定設(shè)備。

4.3.2排版要求

移動應(yīng)用界面布局的排版要求如下：

a)應(yīng)以基線網(wǎng)格作為為最少排版單位，定義為a，界面元素尺寸屬性和空間屬性應(yīng)遵

循a的整數(shù)倍；

b)不同設(shè)備屏幕大小不同，無法針對每臺設(shè)備來設(shè)計用戶界面。應(yīng)針對一些關(guān)鍵的屏

幕尺寸進(jìn)行設(shè)計。在針對手機的設(shè)備進(jìn)行設(shè)計時，應(yīng)以豎屏來作為默認(rèn)啟動方向和

移動應(yīng)用默認(rèn)使用方向；在針對平板等中型設(shè)備進(jìn)行設(shè)計時，應(yīng)以橫屏作為默認(rèn)啟

動方向和移動應(yīng)用默認(rèn)使用方向。

c)設(shè)置Margin屬性來控制元素周圍的空白空間量，設(shè)置Padding屬性以控制元素的

內(nèi)部邊框與其內(nèi)容之間的空間量。為方便對齊和排版，元素到左側(cè)、頂部、右側(cè)和

底部的邊距值應(yīng)統(tǒng)一。

d)移動應(yīng)用界面的排版布局應(yīng)是豐滿的，不應(yīng)出現(xiàn)大面積空白；內(nèi)容到界面邊緣應(yīng)留

有一部分邊距；

e)為使界面看上去清晰有條理，界面元素宜使用左對齊；

f)應(yīng)確保所有用戶需要點擊UI元素的最小可點擊區(qū)域；

g)應(yīng)將重要的內(nèi)容和功能放到更重要的位置，以便用戶可以更容易關(guān)注到主要任務(wù)；

h)應(yīng)在設(shè)計時考慮到用戶單手操作的使用情境。

4.3.3設(shè)計單位要求

移動應(yīng)用界面布局的設(shè)計單位要求如下：

a)應(yīng)為移動應(yīng)用提供所有圖像的高分辨率圖像，以便移動應(yīng)用支持所有設(shè)備。圖像的

像素是根據(jù)不同設(shè)備乘以一個相應(yīng)的系數(shù)，參見附錄A.2設(shè)備與其倍率的對應(yīng)表。

b)在設(shè)計過程中，應(yīng)把單位設(shè)置成邏輯像素。iOS、Android和Harmony和平臺都定

義了各自的邏輯像素單位，iOS系統(tǒng)的開發(fā)單位為pt，Android系統(tǒng)的開發(fā)單位為

dp，Harmony系統(tǒng)的開發(fā)單位為vp。

c)在準(zhǔn)備資源圖時，應(yīng)按照倍率準(zhǔn)備實際像素的圖。實際像素除以倍率，就得到邏輯

像素尺寸，單位之間的換算關(guān)系隨倍率變化。

4.4啟動

移動應(yīng)用界面的啟動設(shè)計要求如下：

a)根據(jù)需要可使登錄功能延后，讓用戶在沒有登錄時就可以使用移動應(yīng)用的部分功

能；

b)設(shè)計移動應(yīng)用時應(yīng)設(shè)計啟動畫面，減少用戶等待焦慮，增強品牌感；

c)應(yīng)提供用戶可能需要的幫助信息。

6

T/CESXXX-XXXX

4.5圖標(biāo)

4.5.1應(yīng)用圖標(biāo)設(shè)計要求

移動應(yīng)用圖標(biāo)設(shè)計要求如下：

a)應(yīng)用圖標(biāo)應(yīng)使用簡潔、清晰的設(shè)計，方便用戶識別；

b)應(yīng)用圖標(biāo)應(yīng)使用一個簡單的圖標(biāo)背景，內(nèi)容不必將整個圖標(biāo)區(qū)域填滿；

c)應(yīng)用圖標(biāo)中不應(yīng)使用文字；

d)圖標(biāo)中不應(yīng)包含照片、屏幕截圖等圖像；

e)應(yīng)在深色和淺色等不同的壁紙下多次測試圖標(biāo)應(yīng)用，確?？捎眯?；

f)應(yīng)避免給系統(tǒng)圖標(biāo)賦予另外的名稱和含義；

g)應(yīng)使用圖標(biāo)柵格系統(tǒng)，確保圖標(biāo)尺寸規(guī)范和元素對齊。如圖2所示，以64px為一

個單位，那么大正方形的邊長的一半=8a，大圓半徑=7a，中圓半徑=4.25a，小圓半

徑=3a，圖標(biāo)中元素的大小不宜超過大圓。

圖2應(yīng)用圖標(biāo)柵格

4.5.2輔助圖標(biāo)設(shè)計要求

自定義圖標(biāo)通常是顯示在導(dǎo)航欄、標(biāo)簽欄、工具欄或是主屏幕快速操作視圖等位置所看

到的圖標(biāo)樣式。自定義圖標(biāo)按功能分為功能性圖標(biāo)和示意性圖標(biāo)。自定義圖標(biāo)的設(shè)計要求

如下：

a)設(shè)計的圖標(biāo)應(yīng)能被用戶正確理解；

b)自定義功能性圖標(biāo)應(yīng)是純色并帶有透明度、無鋸齒、無陰影的1pt（或1dp）描邊

的圖標(biāo)（在@2x分辨率下使用2px）；

c)自定義圖標(biāo)不應(yīng)與系統(tǒng)圖標(biāo)混淆；

d)在移動應(yīng)用中的所有圖標(biāo)都應(yīng)在圖標(biāo)尺寸、顏色、描邊粗細(xì)、筆畫和邊角、透視角

度、命名規(guī)則等方面保持一致；

e)圖形內(nèi)容無需填滿給定的空間。圖3和圖4提供了常見的輔助圖標(biāo)基本形狀——圓

形、正方形、水平矩形、垂直矩形，根據(jù)基本形狀自定義圖標(biāo)，在視覺上應(yīng)大小一

致。

f)應(yīng)根據(jù)系統(tǒng)平臺的要求把圖標(biāo)切圓角；

g)應(yīng)設(shè)計圖標(biāo)未選中和選中狀態(tài)；

h)輔助圖標(biāo)也不應(yīng)包含文本；

i)宜在構(gòu)建圖標(biāo)時僅使用純幾何形狀；

j)線條的角度宜在網(wǎng)格中取1：1、1：2、1：3和1：4的角度構(gòu)建斜線。在創(chuàng)建圖

標(biāo)時，此類線條可以組合、連接、旋轉(zhuǎn)和反射。

k)曲線應(yīng)構(gòu)建于整個圓的一部分，禁止扭曲。宜采用1/4圓弧和1/8圓弧。

7

T/CESXXX-XXXX

圖3輔助圖標(biāo)基本形狀

圖4功能圖標(biāo)示意圖

4.6色彩

移動應(yīng)用色彩設(shè)計要求如下：

a)應(yīng)給移動應(yīng)用定義一個主題色，移動應(yīng)用的應(yīng)用圖標(biāo)應(yīng)體現(xiàn)主題色，不應(yīng)偏離主題

色；

b)應(yīng)給移動應(yīng)用選擇中性色，用于背景和分割；

c)應(yīng)給移動應(yīng)用選擇功能色，實現(xiàn)用戶元素強調(diào)；

d)在一個移動應(yīng)用中，顏色不宜超過3種。超過3種，也應(yīng)使用主題色、功能色、中

性色的調(diào)整色調(diào)。

e)為了打造以人為本更高效的信息層級，文本、分割線宜根據(jù)信息層級設(shè)置不同的透

明度，將品牌色賦予在重要信息或關(guān)鍵點上，襯以大面積的中性色，讓用戶聚焦到

任務(wù)本身；

f)交互鏈接應(yīng)使用主題色。如果與頁面背景相似，為了獲得更好的對比度，交互鏈接

可以使用主題色的較淺或較深色調(diào)。

g)不應(yīng)把顏色作為區(qū)分兩種UI元素的唯一標(biāo)識；例如：不應(yīng)使用紅色和綠色區(qū)分離

線和在線兩種狀態(tài)，可以使用紅色正方形和綠色圓圈表現(xiàn)兩種狀態(tài)。

h)應(yīng)根據(jù)用戶需求、品牌文化結(jié)合用色流行趨勢，選取主題色、中性色、功能色。

4.7文本

4.7.1字體要求

字體設(shè)計要求如下：

a)在一個移動應(yīng)用中，應(yīng)只使用一種字體；iOS系統(tǒng)推薦使用的字體是“蘋方”，

英文和數(shù)字是“SanFrancisco”，特殊字體是“DIN”，字重分別為Regular、Light、Medium；

Android系統(tǒng)推薦使用的字體是“思源黑體”，英文和數(shù)字字體為“Roboto”，特殊

8

T/CESXXX-XXXX

字體是“DIN”，自重分別為Regular、Light、Medium；Harmony系統(tǒng)推薦使用的字

體是“HarmonyOSSans”。

b)推薦使用系統(tǒng)字體。如果需要使用自定義字體，根據(jù)使用壞境應(yīng)確保清晰易讀和字

體的版權(quán)問題。

c)應(yīng)盡量使用操作系統(tǒng)的內(nèi)置文本樣式。iOS系統(tǒng)、Android系統(tǒng)和的HarmonyOS系

統(tǒng)內(nèi)置文本樣式。

4.7.2表述要求

以下是關(guān)于界面中表述的要求：

a)應(yīng)使用用戶的語言，而不是面向系統(tǒng)的術(shù)語；

b)避免將應(yīng)用領(lǐng)域的專業(yè)詞匯表述為日常用語；

c)避免使用詞匯的非標(biāo)準(zhǔn)含義；

d)應(yīng)從用戶的視角進(jìn)行語言表述；

e)應(yīng)使用一致的表述來表達(dá)相同的含義；

f)文字表述應(yīng)使用準(zhǔn)確無歧義。

4.8動作

4.8.1手勢設(shè)計要求

以下是關(guān)于手勢的設(shè)計要求：

a)移動應(yīng)用與用戶交互時應(yīng)使用標(biāo)準(zhǔn)手勢。標(biāo)準(zhǔn)手勢參見附錄A.4。

b)不宜阻止操作系統(tǒng)的默認(rèn)手勢；

c)不應(yīng)使用標(biāo)準(zhǔn)手勢去執(zhí)行非標(biāo)準(zhǔn)操作。

4.8.2動畫效果設(shè)計要求

以下是關(guān)于動畫效果的設(shè)計要求：

a)動畫應(yīng)有助于增進(jìn)用戶理解并指導(dǎo)用戶如何與UI交互；

b)不應(yīng)使用過多或不必要的動畫使用戶分心或感到困擾；

c)自定義動畫應(yīng)與系統(tǒng)動畫保持一致的觸感和體驗。

4.9設(shè)計輸出

4.9.1圖片命名要求

圖片命名方式為：（界面或者功能）+（控件名）+（狀態(tài)）+（補充描述）。

4.9.2圖片輸出格式要求

a)iOS系統(tǒng)、Android系統(tǒng)和Harmony系統(tǒng)都應(yīng)選擇PNG格式作為輸出圖片（控件和

圖標(biāo)等）的標(biāo)準(zhǔn)格式。

b)移動應(yīng)用的Banner圖和啟動時的展示圖片，宜使用JPG格式。

c)應(yīng)確保圖片文件大小適中，避免視覺不清晰或加載過慢。

4.9.3標(biāo)注要求

通過文字的形式標(biāo)注供開發(fā)人員使用，標(biāo)注信息應(yīng)包括以下幾個方面：

a)標(biāo)注圖像的大小和間距；

9

T/CESXXX-XXXX

b)標(biāo)注圖像的顏色和透明度；

c)標(biāo)注圖像的狀態(tài)變化；

d）標(biāo)注圖像時，應(yīng)遵守以下標(biāo)注要求：

1）優(yōu)先標(biāo)注能夠復(fù)用的組控件，不能復(fù)用的單獨標(biāo)注；

2）同種類信息擺放在一起并整齊排列，一目了然；

3）標(biāo)注色彩清晰，勿使用與背景難以分辨的色彩；

4）標(biāo)注與圖像本身間預(yù)留適當(dāng)間隔，以不影響圖像本身為原則；

5）按照頁面層級逐頁標(biāo)注，不應(yīng)重復(fù)標(biāo)注。

附錄A（資料性）移動應(yīng)用基礎(chǔ)定義

A.1后退按鈕類型

A.1.1不同對等組后退按鈕

頁面到頁面，不同的對等組，具體詳見圖A.1和圖A.2。

圖A.1返回不同對等組示意圖1

圖A.2返回不同對等組示意圖2

A.1.2同一對等組無屏幕導(dǎo)航元素后退按鈕

頁面到頁面，同一對等組，無屏幕導(dǎo)航元素，具體詳見圖A.3。

圖A.3返回同一對等組示意圖

10

T/CESXXX-XXXX

A.1.3同一對等組帶有屏幕導(dǎo)航元素后退按鈕

頁面到頁面，同一對等組，帶有屏幕導(dǎo)航元素，具體詳見圖A.4。

圖A.4返回上一級示意圖

A.1.4枚舉項目后退按鈕

枚舉項目，具體詳見圖A.5。

圖A.5枚舉項目示意圖

A.2設(shè)備與其倍率的對應(yīng)表

設(shè)備與其倍率的對應(yīng)關(guān)系詳見表A.1：

表A.1設(shè)備與其倍率的對應(yīng)

單位為px

設(shè)備倍率

@1x\@2x\@3x3

iPhone

1dpi1

Mdpi1

hdpi1.5

Android

xhdpi2

xxhdpi3

xxxhdpi4

11

T/CESXXX-XXXX

A.3響應(yīng)式布局設(shè)計方案

A.3.1響應(yīng)式布局位置和布局設(shè)計方案如下：

應(yīng)修改UI元素的位置和布局方式，以充分利用每臺設(shè)備，具體詳見圖A.6。