DB37 T 4614.4-2023 “爱山东”政务服务平台移动端 第4部分：界面设计要求.pdf

1、 ICS 35.240 CCS L 67 37 山东省地方标准 DB37/T 4614.42023 “爱山东”政务服务平台移动端 第 4 部分：界面设计要求 Aishandong government service platform mobile terminalPart 4:Interface design requirements2023-05-11 发布2023-06-11 实施山东省市场监督管理局发 布 DB37/T 4614.42023 I 目次 前言.II 引言.III 1 范围.1 2 规范性引用文件.1 3 术语和定义.1 4 缩略语.1 5 基本要求.1 6 界面组成.1

2、7 界面元素.2 8 界面组件.5 参考文献.8 DB37/T 4614.42023 II 前言 本文件按照GB/T 1.12020标准化工作导则 第1部分：标准化文件的结构和起草规则的规定起草。本文件是DB37/T 4614统一政务服务移动客户端的第4部分。DB37/T 4614已经发布了以下部分：第 1 部分：总体架构；第 2 部分：运营管理规范；第 4 部分：界面设计要求。请注意本文件的某些内容可能涉及专利。本文件的发布机构不承担识别专利的责任。本文件由山东省大数据局提出、归口并组织实施。DB37/T 4614.42023 III 引言“爱山东”政务服务平台移动端是我省移动政务服务的总渠

3、道和总入口，有效推动了移动政务服务资源整合。DB37/T 4614旨在确立“爱山东”政务服务平台移动端建设和管理要求，拟由四个部分组成。第 1 部分：总体架构。本部分旨在规范统一政务服务移动客户端的技术架构和服务应用架构。第 2 部分：运营管理规范。本部分旨在规范统一政务服务移动客户端的用户服务、宣传推广、舆情管理、应用管理、分厅管理、移动端管理等内容。第 3 部分：安全规范。本部分旨在规范“爱山东”政务服务平台移动端的安全技术要求和安全管理要求。第 4 部分：界面设计要求。本部分旨在规范统一政务服务移动客户端的界面组成、界面元素、界面组件要求。DB37/T 4614.42023 1 爱山东政

4、务服务平台移动端 第 4 部分：界面设计要求 1 范围 本文件规定了“爱山东”政务服务平台移动端界面设计基本要求、界面组成、界面元素和界面组件要求。本文件适用于“爱山东”政务服务平台移动端界面设计和应用，也适用于指导服务应用的界面开发和设计。注：本文件主要规范独立开发的App界面设计，各类小程序界面参照执行。2 规范性引用文件 下列文件中的内容通过文中的规范性引用而构成本文件必不可少的条款。其中，注日期的引用文件，仅该日期对应的版本适用于本文件；不注日期的引用文件，其最新版本（包括所有的修改单）适用于本文件。DB37/T 4614.12023 “爱山东”政务服务平台移动端 第1部分：总体架构

5、3 术语和定义 DB37/T 4614.12023界定的术语和定义适用于本文件。4 缩略语 下列缩略语适用于本文件。px：像素（Pixel）5 基本要求 界面设计基本要求包括但不限于：a)应符合移动终端的交互方式，兼容当前主流移动终端的屏幕尺寸与分辨率；b)应保持界面风格一致；c)界面栏目结构层次不宜超过 3 层；d)应避免使用弹出窗口、漂浮窗口，确需使用时，不应使用多个窗口，且窗口应提供关闭按钮。6 界面组成 导航栏 6.1 宜包括操作性按钮、导航标题等组件，分布于界面上方，高度宜采用88px，见图1。DB37/T 4614.42023 2 图1 导航栏 内容显示区 6.2 宜包括图标、按钮

6、、表单、列表、对话框、搜索框、分段式标签、服务应用标语栏等组件，分布于导航栏下方。底部菜单栏 6.3 为需要子菜单切换的界面提供底部菜单栏，最多不超过5个子菜单，分布于界面底部，高度宜采用92px，见图2。图2 底部菜单栏 7 界面元素 颜色 7.1 7.1.1 基础色 界面总体使用蓝色和橙色作为主色，宜用于指示性强烈的组件及在特定场景下需要重点突出的信息，辅助色宜应用于辅助性的按钮、图标等组件，主色、辅助色宜采用图3中给出的色号。图3 基础色 DB37/T 4614.42023 3 7.1.2 背景 页面背景、卡片背景、控件背景等背景色宜采用图4中给出的色号。图4 背景色 7.1.3 文字

7、主标题、副标题、提示语、警告语等文字宜采用图5中给出的色号。图5 文字色 7.1.4 蒙层 蒙层用于突出内容显示，色号宜采用#000000色号，可根据实际情况调整蒙层的透明度。字体 7.2 界面常用字体形式包括中文、英文和数字等，其字号大小、行间距、应用场景见表1。行间距和字号的比例宜保持1.4，中文、英文和数字组合使用时应保持字号一致。表1 字号、行间距及应用场景 序号 字号 行间距 应用场景 1 36px 50px 用于导航栏标题、全局按钮文字等 DB37/T 4614.42023 4 表1 字号、行间距及应用场景（续）序号 字号 行间距 应用场景 2 34px 48px 用于列表标题、表

8、单标题等 3 30px 42px 用于二级导航标题、详细信息等 4 26px 36px 用于应用名称、底部信息标识等 5 24px 32px 用于提示语、胶囊按钮文字等 6 22px 30px 用于菜单栏、备注信息等 间距 7.3 7.3.1 边界间距 边界间距用于间隔界面内容与界面边缘，尺寸宜为24px，见图6。图6 边界间距 7.3.2 模块间距 模块间距用于间隔模块内部内容，尺寸宜为12px、16px、24px、32px等4的倍数，见图7。图7 模块间距 7.3.3 图文间距 图文间距用于间隔图标和文字，包括但不限于：a)以宫格样式进行展示时，文间距尺寸宜为 8px；b)以内容样式进行展

9、示时，文间距尺寸宜为 16px；c)以列表样式进行展示时，文间距尺寸宜为 32px。图文间距见图 8。图8 图文间距 DB37/T 4614.42023 5 8 界面组件 图标 8.1 图标一般包括推荐图标和普通图标，图标的栅格视觉比例应保持一致。对于视觉张力较小的圆形图标，应撑满整格；对于视觉张力较大的方形图标，应等比例适当缩小；竖长图标应上下撑满格，左右间距相等；横长图标左右撑满格，上下间距相等。图标栅格视觉比例效果见图9。图9 图标栅格视觉比例 按钮 8.2 8.2.1 全局按钮 全局按钮用于对整个界面的操作，分为正常态和禁用态，高度、圆角、颜色等要求见图10。图10 全局按钮 8.2.

10、2 普通按钮 普通按钮用于具体界面的功能选择，高度、圆角、颜色等要求见图11。图11 普通按钮 8.2.3 胶囊按钮 胶囊按钮用于界面层级较低或者不鼓励用户操作时，高度、圆角、颜色等要求见图12。DB37/T 4614.42023 6 图12 胶囊按钮 表单 8.3 表单由标题、内容提示、控件等多种元素的一种或几种组合而成，字体、字号、颜色、尺寸等要求见图13。图13 表单 列表 8.4 列表由列表标题、内容提示、控件等多种元素的一种或几种组合而成，字体、字号、颜色、尺寸等要求见图14。图14 单行列表 对话框 8.5 对话框由内容和按钮组成，对话框内容应由文字、标题等多种元素的一种或几种组合

11、组成，字体、字号、颜色等要求见图15。图15 对话框 搜索框 8.6 DB37/T 4614.42023 7 搜索框由搜索图标、输入框、语音控件等多种元素的一种或几种组合组成，字体、字号、颜色等要求见图16。图16 搜索框 分段式标签 8.7 分段式标签用于切换不同内容，最多不超过5个标签，一般分布于导航栏下方，字体、字号、颜色等要求见图17。图17 分段式标签 服务应用标语栏 8.8 服务应用标语栏用于说明服务应用来源，一般分布于服务应用界面底部，字体、字号、颜色等要求见图18。图18 服务应用标语栏 DB37/T 4614.42023 8 参考文献 1 ZWFW C0104 国家政务服务平台政务服务移动端界面视觉要求 2 ISO/IEC 40500 Information technology.W3C Web Content Accessibility Guidelines(WCAG)2.0 3 关于印发“爱山东”政务服务平台移动端管理办法的通知（鲁数发202210号）