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

ICS號(hào)

中國(guó)標(biāo)準(zhǔn)文獻(xiàn)分類(lèi)號(hào)

CES

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

T/CESXXX-XXXX

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

PowerEnterpriseMobileApplicationInterfaceDesignGuidelines

（征求意見(jiàn)稿）

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

T/CESXXX-XXXX

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

1范圍

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

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

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

用戶(hù)體驗(yàn)。

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

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

——第2部分：界面布局

——第3部分：?jiǎn)?dòng)

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

——第5部分：色彩

——第6部分：文本

——第7部分：動(dòng)作

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

2參考文件

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

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

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

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

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

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

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

可用性指南

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

designforinteractivesystems

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

參考文獻(xiàn)

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

AppleiOSHumanInterfaceGuidelinesAppleiOS人機(jī)界面指南

GoogleMaterialDesign谷歌材料設(shè)計(jì)

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

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

3術(shù)語(yǔ)和定義

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

1

T/CESXXX-XXXX

3.1用戶(hù)User

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

[來(lái)源：GB/T18978.11-2004]

3.2原型Prototype

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

[來(lái)源：GB/T18976-2003]

3.3使用情景UsageScenarios

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

[來(lái)源：GB/T18978.11-2004]

3.4可用性Usability

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

使用的程度。

[來(lái)源：GB/T18978.11-2004]

3.5用戶(hù)體驗(yàn)UserExperience

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

[來(lái)源：ISO9241-210-2010]

3.6以用戶(hù)為中心UserCentric

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

[來(lái)源：GB/T18976-2003]

3.7容器Container

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

3.8移動(dòng)應(yīng)用MobileApps

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

手表。

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

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

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

4.1總體說(shuō)明

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

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

所示：

2

T/CESXXX-XXXX

圖1總體說(shuō)明圖

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

4.2.1導(dǎo)航

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

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

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

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

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

面，必須經(jīng)過(guò)父頁(yè)面；

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

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

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

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

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

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

應(yīng)用場(chǎng)景。

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

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

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

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

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

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

面包屑導(dǎo)航

徑。

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

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

3

T/CESXXX-XXXX

4.2.2內(nèi)容

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

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

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

下內(nèi)容：

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

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

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

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

（用戶(hù)界面）元素。

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

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

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

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

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

平衡。

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

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

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

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

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

音視頻播放音頻和視頻。

圖片視圖顯示和瀏覽相冊(cè)中的圖片。

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

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

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

4.2.3交互

4.2.3.1交互設(shè)計(jì)要求

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

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

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

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

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

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

4

T/CESXXX-XXXX

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

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

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

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

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

下拉列表、列表框用于用戶(hù)從展開(kāi)式列表中或可滾動(dòng)的框中選擇某一項(xiàng)。

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

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

菜單、上下文菜單顯示操作選項(xiàng)或上下文操作選項(xiàng)。

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

容器使用場(chǎng)景建議

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

欄承載一組命令菜單或選項(xiàng)的交互式控件。

對(duì)話(huà)框用于提供上下文操作反饋。

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

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

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

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

表4容器的要求

4.3布局

4.3.1布局適應(yīng)

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

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

覺(jué)狀態(tài)，滿(mǎn)足以下要求：

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

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

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

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

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

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

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

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

5

T/CESXXX-XXXX

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

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

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

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

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

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

e)應(yīng)對(duì)特定設(shè)備大小級(jí)別或方向來(lái)切換用戶(hù)界面；

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

4.3.2排版要求

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

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

循a的整數(shù)倍；

b)不同設(shè)備屏幕大小不同，無(wú)法針對(duì)每臺(tái)設(shè)備來(lái)設(shè)計(jì)用戶(hù)界面。應(yīng)針對(duì)一些關(guān)鍵的屏

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

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

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

c)設(shè)置Margin屬性來(lái)控制元素周?chē)目瞻卓臻g量，設(shè)置Padding屬性以控制元素的

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

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

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

有一部分邊距；

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

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

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

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

4.3.3設(shè)計(jì)單位要求

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

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

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

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

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

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

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

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

4.4啟動(dòng)

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

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

能；

b)設(shè)計(jì)移動(dòng)應(yīng)用時(shí)應(yīng)設(shè)計(jì)啟動(dòng)畫(huà)面，減少用戶(hù)等待焦慮，增強(qiáng)品牌感；

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

6

T/CESXXX-XXXX

4.5圖標(biāo)

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

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

a)應(yīng)用圖標(biāo)應(yīng)使用簡(jiǎn)潔、清晰的設(shè)計(jì)，方便用戶(hù)識(shí)別；

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

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

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

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

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

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

個(gè)單位，那么大正方形的邊長(zhǎng)的一半=8a，大圓半徑=7a，中圓半徑=4.25a，小圓半

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

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

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

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

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

如下：

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

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

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

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

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

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

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

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

致。

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

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

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

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

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

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

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

7

T/CESXXX-XXXX

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

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

4.6色彩

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

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

色；

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

c)應(yīng)給移動(dòng)應(yīng)用選擇功能色，實(shí)現(xiàn)用戶(hù)元素強(qiáng)調(diào)；

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

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

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

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

任務(wù)本身；

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

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

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

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

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

4.7文本

4.7.1字體要求

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

a)在一個(gè)移動(dòng)應(yīng)用中，應(yīng)只使用一種字體；iOS系統(tǒng)推薦使用的字體是“蘋(pí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)問(wè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)使用用戶(hù)的語(yǔ)言，而不是面向系統(tǒng)的術(shù)語(yǔ)；

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

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

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

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

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

4.8動(dòng)作

4.8.1手勢(shì)設(shè)計(jì)要求

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

a)移動(dòng)應(yīng)用與用戶(hù)交互時(shí)應(yīng)使用標(biāo)準(zhǔn)手勢(shì)。標(biāo)準(zhǔn)手勢(shì)參見(jiàn)附錄A.4。

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

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

4.8.2動(dòng)畫(huà)效果設(shè)計(jì)要求

以下是關(guān)于動(dòng)畫(huà)效果的設(shè)計(jì)要求：

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

b)不應(yīng)使用過(guò)多或不必要的動(dòng)畫(huà)使用戶(hù)分心或感到困擾；

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

4.9設(shè)計(jì)輸出

4.9.1圖片命名要求

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

4.9.2圖片輸出格式要求

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

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

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

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

4.9.3標(biāo)注要求

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

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

9

T/CESXXX-XXXX

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

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

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

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

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

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

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

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

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

A.1后退按鈕類(lèi)型

A.1.1不同對(duì)等組后退按鈕

頁(yè)面到頁(yè)面，不同的對(duì)等組，具體詳見(jiàn)圖A.1和圖A.2。

圖A.1返回不同對(duì)等組示意圖1

圖A.2返回不同對(duì)等組示意圖2

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

頁(yè)面到頁(yè)面，同一對(duì)等組，無(wú)屏幕導(dǎo)航元素，具體詳見(jiàn)圖A.3。

圖A.3返回同一對(duì)等組示意圖

10

T/CESXXX-XXXX

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

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

圖A.4返回上一級(jí)示意圖

A.1.4枚舉項(xiàng)目后退按鈕

枚舉項(xiàng)目，具體詳見(jiàn)圖A.5。

圖A.5枚舉項(xiàng)目示意圖

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

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

表A.1設(shè)備與其倍率的對(duì)應(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è)計(jì)方案

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

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