ICS35.240

CCSL67

37

山東省地方標(biāo)準(zhǔn)

DB37/T4614.4—2023

“愛山東”政務(wù)服務(wù)平臺移動端

第4部分：界面設(shè)計要求

"Aishandong"governmentserviceplatformmobileterminal—Part4:Interfacedesign

requirements

2023-05-11發(fā)布2023-06-11實施

山東省市場監(jiān)督管理局發(fā)布

DB37/T4614.4—2023

目次

前言.................................................................................II

引言................................................................................III

1范圍...............................................................................1

2規(guī)范性引用文件.....................................................................1

3術(shù)語和定義.........................................................................1

4縮略語.............................................................................1

5基本要求...........................................................................1

6界面組成...........................................................................1

7界面元素...........................................................................2

8界面組件...........................................................................5

參考文獻(xiàn)..............................................................................8

I

DB37/T4614.4—2023

前言

本文件按照GB/T1.1—2020《標(biāo)準(zhǔn)化工作導(dǎo)則第1部分：標(biāo)準(zhǔn)化文件的結(jié)構(gòu)和起草規(guī)則》的規(guī)定

起草。

本文件是DB37/T4614《統(tǒng)一政務(wù)服務(wù)移動客戶端》的第4部分。DB37/T4614已經(jīng)發(fā)布了以下部分：

——第1部分：總體架構(gòu)；

——第2部分：運營管理規(guī)范；

——第4部分：界面設(shè)計要求。

請注意本文件的某些內(nèi)容可能涉及專利。本文件的發(fā)布機構(gòu)不承擔(dān)識別專利的責(zé)任。

本文件由山東省大數(shù)據(jù)局提出、歸口并組織實施。

II

DB37/T4614.4—2023

引言

“愛山東”政務(wù)服務(wù)平臺移動端是我省移動政務(wù)服務(wù)的總渠道和總?cè)肟冢行苿恿艘苿诱?wù)服務(wù)

資源整合。DB37/T4614旨在確立“愛山東”政務(wù)服務(wù)平臺移動端建設(shè)和管理要求，擬由四個部分組成。

——第1部分：總體架構(gòu)。本部分旨在規(guī)范統(tǒng)一政務(wù)服務(wù)移動客戶端的技術(shù)架構(gòu)和服務(wù)應(yīng)用架構(gòu)。

——第2部分：運營管理規(guī)范。本部分旨在規(guī)范統(tǒng)一政務(wù)服務(wù)移動客戶端的用戶服務(wù)、宣傳推廣、

輿情管理、應(yīng)用管理、分廳管理、移動端管理等內(nèi)容。

——第3部分：安全規(guī)范。本部分旨在規(guī)范“愛山東”政務(wù)服務(wù)平臺移動端的安全技術(shù)要求和安

全管理要求。

——第4部分：界面設(shè)計要求。本部分旨在規(guī)范統(tǒng)一政務(wù)服務(wù)移動客戶端的界面組成、界面元素、

界面組件要求。

III

DB37/T4614.4—2023

"愛山東"政務(wù)服務(wù)平臺移動端

第4部分：界面設(shè)計要求

1范圍

本文件規(guī)定了“愛山東”政務(wù)服務(wù)平臺移動端界面設(shè)計基本要求、界面組成、界面元素和界面組件

要求。

本文件適用于“愛山東”政務(wù)服務(wù)平臺移動端界面設(shè)計和應(yīng)用，也適用于指導(dǎo)服務(wù)應(yīng)用的界面開發(fā)

和設(shè)計。

注：本文件主要規(guī)范獨立開發(fā)的App界面設(shè)計，各類小程序界面參照執(zhí)行。

2規(guī)范性引用文件

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

僅該日期對應(yīng)的版本適用于本文件；不注日期的引用文件，其最新版本（包括所有的修改單）適用于本

文件。

DB37/T4614.1—2023“愛山東”政務(wù)服務(wù)平臺移動端第1部分：總體架構(gòu)

3術(shù)語和定義

DB37/T4614.1—2023界定的術(shù)語和定義適用于本文件。

4縮略語

下列縮略語適用于本文件。

px：像素（Pixel）

5基本要求

界面設(shè)計基本要求包括但不限于：

a)應(yīng)符合移動終端的交互方式，兼容當(dāng)前主流移動終端的屏幕尺寸與分辨率；

b)應(yīng)保持界面風(fēng)格一致；

c)界面欄目結(jié)構(gòu)層次不宜超過3層；

d)應(yīng)避免使用彈出窗口、漂浮窗口，確需使用時，不應(yīng)使用多個窗口，且窗口應(yīng)提供關(guān)閉按鈕。

6界面組成

6.1導(dǎo)航欄

宜包括操作性按鈕、導(dǎo)航標(biāo)題等組件，分布于界面上方，高度宜采用88px，見圖1。

1

DB37/T4614.4—2023

圖1導(dǎo)航欄

6.2內(nèi)容顯示區(qū)

宜包括圖標(biāo)、按鈕、表單、列表、對話框、搜索框、分段式標(biāo)簽、服務(wù)應(yīng)用標(biāo)語欄等組件，分布于

導(dǎo)航欄下方。

6.3底部菜單欄

為需要子菜單切換的界面提供底部菜單欄，最多不超過5個子菜單，分布于界面底部，高度宜采用

92px，見圖2。

圖2底部菜單欄

7界面元素

7.1顏色

7.1.1基礎(chǔ)色

界面總體使用藍(lán)色和橙色作為主色，宜用于指示性強烈的組件及在特定場景下需要重點突出的信息，

輔助色宜應(yīng)用于輔助性的按鈕、圖標(biāo)等組件，主色、輔助色宜采用圖3中給出的色號。

圖3基礎(chǔ)色

2

DB37/T4614.4—2023

7.1.2背景

頁面背景、卡片背景、控件背景等背景色宜采用圖4中給出的色號。

圖4背景色

7.1.3文字

主標(biāo)題、副標(biāo)題、提示語、警告語等文字宜采用圖5中給出的色號。

圖5文字色

7.1.4蒙層

蒙層用于突出內(nèi)容顯示，色號宜采用#000000色號，可根據(jù)實際情況調(diào)整蒙層的透明度。

7.2字體

界面常用字體形式包括中文、英文和數(shù)字等，其字號大小、行間距、應(yīng)用場景見表1。行間距和字

號的比例宜保持1.4，中文、英文和數(shù)字組合使用時應(yīng)保持字號一致。

表1字號、行間距及應(yīng)用場景

序號字號行間距應(yīng)用場景

136px50px用于導(dǎo)航欄標(biāo)題、全局按鈕文字等

3

DB37/T4614.4—2023

表1字號、行間距及應(yīng)用場景（續(xù)）

序號字號行間距應(yīng)用場景

234px48px用于列表標(biāo)題、表單標(biāo)題等

330px42px用于二級導(dǎo)航標(biāo)題、詳細(xì)信息等

426px36px用于應(yīng)用名稱、底部信息標(biāo)識等

524px32px用于提示語、膠囊按鈕文字等

622px30px用于菜單欄、備注信息等

7.3間距

7.3.1邊界間距

邊界間距用于間隔界面內(nèi)容與界面邊緣，尺寸宜為24px，見圖6。

圖6邊界間距

7.3.2模塊間距

模塊間距用于間隔模塊內(nèi)部內(nèi)容，尺寸宜為12px、16px、24px、32px等4的倍數(shù)，見圖7。

圖7模塊間距

7.3.3圖文間距

圖文間距用于間隔圖標(biāo)和文字，包括但不限于：

a)以宮格樣式進(jìn)行展示時，文間距尺寸宜為8px；

b)以內(nèi)容樣式進(jìn)行展示時，文間距尺寸宜為16px；

c)以列表樣式進(jìn)行展示時，文間距尺寸宜為32px。

圖文間距見圖8。

圖8圖文間距

4

DB37/T4614.4—2023

8界面組件

8.1圖標(biāo)

圖標(biāo)一般包括推薦圖標(biāo)和普通圖標(biāo)，圖標(biāo)的柵格視覺比例應(yīng)保持一致。對于視覺張力較小的圓形圖

標(biāo)，應(yīng)撐滿整格；對于視覺張力較大的方形圖標(biāo)，應(yīng)等比例適當(dāng)縮??；豎長圖標(biāo)應(yīng)上下?lián)螡M格，左右間

距相等；橫長圖標(biāo)左右撐滿格，上下間距相等。圖標(biāo)柵格視覺比例效果見圖9。

圖9圖標(biāo)柵格視覺比例

8.2按鈕

8.2.1全局按鈕

全局按鈕用于對整個界面的操作，分為正常態(tài)和禁用態(tài)，高度、圓角、顏色等要求見圖10。

圖10全局按鈕

8.2.2普通按鈕

普通按鈕用于具體界面的功能選擇，高度、圓角、顏色等要求見圖11。

圖11普通按鈕

8.2.3膠囊按鈕

膠囊按鈕用于界面層級較低或者不鼓勵用戶操作時，高度、圓角、顏色等要求見圖12。

5

DB37/T4614.4—2023

圖12膠囊按鈕

8.3表單

表單由標(biāo)題、內(nèi)容提示、控件等多種元素的一種或幾種組合而成，字體、字號、顏色、尺寸等要求

見圖13。

圖13表單

8.4列表

列表由列表標(biāo)題、內(nèi)容提示、控件等多種元素的一種或幾種組合而成，字體、字號、顏色、尺寸等

要求見圖14。

圖14單行列表

8.5對話框

對話框由內(nèi)容和按鈕組成，對話框內(nèi)容應(yīng)由文字、標(biāo)題等多種元素的一種或幾種組合組成，字體、

字號、顏色等要求見圖15。

圖15對話框

8.6搜索框

6

DB37/T4614.4—2023

搜索框由搜索圖標(biāo)、輸入框、語音控件等多種元素的一種或幾種組合組成，字體、字號、顏色等要

求見圖16。