DB3710 T 210-2023 城市大脑 界面设计规范.pdf

1、ICS 35.200 CCS L 70 DB3710威海市地方标准 DB 3710/T 2102023 城市大脑 界面设计规范 User interface design specifications for city brain 2023-11-17 发布2023-12-17 实施威海市市场监督管理局 发 布 DB3710/T 2102023 I 前 言 本文件按照GB/T 1.12020标准化工作导则 第1部分：标准化文件的结构和起草规则的规定起草。请注意本文件的某些内容可能涉及专利。本文件的发布机构不承担识别专利的责任。本文件由威海市大数据局提出、归口并组织实施和评估。本文件起草单位：威

2、海市大数据局、威海智慧北洋信息技术有限公司。本文件主要起草人：王璐、于治超、马欣惠、王强、娄旸。DB3710/T 2102023 II 引 言 根据关于印发的通知（数字强省办发20234号）的要求，实施城市大脑建设提升行动，探索构建城市智能体，在业务应用建设与互联互通、强化平台支撑与赋能应用、基层覆盖与智慧社区联动、技术标准与管理规范应用、建立健全建设与运行机制五个方向开展试点工作。技术标准与管理规范应用试点要求完善制定标准规范，初步建立市域城市大脑技术标准和管理规范体系。城市大脑部分专题应用以部门自建为主，为了保证整体风格的统一，同时便于后期的扩展和维护，需要有统一的界面规范，指导各部门进行

3、设计和开发，赋能城市大脑建设。本文件明确了城市大脑及各业务专题在UI界面设计时的规范化指导要求，需要威海市各部门的可视化系统按统一UI界面规范进行设计和接入。DB3710/T 2102023 1 城市大脑 界面设计规范 1 范围 本文件规定了城市大脑界面设计的术语和定义、缩略语、总体要求、界面模块设计、界面元素设计。本文件适用于各级各部门信息化系统可视化部分的界面设计和接入使用。2 规范性引用文件 本文件没有规范性引用文件。3 术语和定义 下列术语和定义适用于本文件。3.1 城市大脑 city brain 运用大数据、云计算、物联网、人工智能、区块链、数字孪生等技术，提升城市现代化治理能力和城

4、市竞争力的新型基础设施。3.2 全局边距 global margin 页面内容到平台设备屏幕边缘的距离。3.3 间距 spacing 界面中文字与文字、模块与模块之间的展示距离。4 缩略语 下列缩略语适用于本文件。UI：用户界面（User Interface）B/S：浏览器/服务器（Brower/Server）C/S：客户端/服务器（Client/Server）JPG：联合图像专家组(Joint Photographic Experts Group)文件格式 MPEG：动态图像专家组（Moving Picture Experts Group）PNG：可移植性网络图像（Portable Netw

5、ork Graphics）PSD：Photoshop的专用格式（Adobe Photoshop Document）DB3710/T 2102023 2 SKETCH：矢量绘图软件Sketch的专用格式（Sketch）PX：像素（Pixel）5 总体要求 总体设计应符合下列要求：a)符合 B/S 或 C/S 软件系统架构设计要求；b)兼容当前主流显示器的屏幕尺寸与分辨率，当各分平台、子平台在省级主平台界面展现时符合省级统一要求；c)保持界面风格一致；d)色彩对比度不低于 10：1；e)图片、附件、视频等显示要求：1)显示内容有效可用；2)名称直观准确；3)采用 JPG、PNG、PSD、MPEG、

6、SKETCH 等主流设计格式。6 界面模块设计 界面模块设计要求包括：a)标题栏：包括名称、天气情况、日期、时间等要素，整体高度为 201PX，示例见图 1；图1 标题栏示例 b)导航按钮：由各功能模块名称组成，位于平台名称两侧，示例见图 2；图2 导航按钮、数据卡片、地图、图表控件模块示例 c)数据卡片：包括标题、图表、文字等要素，其中标题、文字为必选要素，数据卡片可采用分级设计，示例见图 2；d)地图：包括行政区划、边界、数据标签等要素，示例见图 2；e)图表控件：包括折线图、条形图、环形图、列表等不同形式的图表，具体要求见 7.4。7 界面元素设计 7.1 颜色 DB3710/T 210

7、2023 3 界面颜色包括背景色、主色、辅助色、警示色。界面的颜色及应用场景应符合表1的规定。表1 颜色及应用场景 序号 类别 色值 用途 1 背景色#010205 用于平台背景 2 主色#001F49、#014CC0、#017DFE 用于主平台色调 3 辅助色#2EB8FF、#19FAFF、#CBF0FF、#DBDBDB、#FFFFFF、#05FFA6、#1FCA97、#FFD902、#F38251、#000000、#606060 用于平台中的图标、图表等 4 警示色#E5201E 用于强调警示 7.2 字体样式 7.2.1 字体及应用场景 界面的字体及应用场景应符合表2的规定。表2 字体及

8、应用场景 序号 字体名称 应用场景 1 思源黑体 平台名称、系统标题、子标题名称以及数据卡片标题 2 Arial 指标数字 3 思源宋体 内容及其他 7.2.2 字号及应用场景 界面的字号及应用场景应符合表3的规定。表3 字号及应用场景 序号 字号尺寸，PX 应用场景 1 128 平台名称、系统标题 2 6480 子标题名称 3 60 导航按钮名称 4 5056 数据卡片标题 5 4048 指标数字 6 4048 一般图表中描述性文字 7 40 坐标轴文字 7.3 图标 7.3.1 系统图标 界面中的系统图标主要用于导航按钮和驾驶舱，示例见图3，透明度根据实际情况适当选择。系统图标设计应符合下

9、列要求。a)导航图标分为文字图标、图形图标等，包括外框、内框、图标等元素：1)文字图标：外框尺寸为 600PX156PX，内框尺寸为 532PX132PX，图标尺寸不超过 54PX54PX；DB3710/T 2102023 4 2)图形图标：外框尺寸为 224PX156PX，内框尺寸为 156PX132PX，图标尺寸不超过 60PX60PX。b)驾驶舱图标：包括外框、图标等元素，外框尺寸为 168PX168PX，图标尺寸不超过 90PX90PX。图3 图标尺寸示例 7.3.2 辅助图标 界面中的辅助图标用于地图操控组件设计，包括外框、图标等元素，示例见图4。辅助图标设计应符合下列要求：a)外框

10、尺寸为 336PX420PX，填充颜色根据具体情况进行选择；b)图标：尺寸不超过 270PX270PX，填充色号为#000000。图4 辅助图标示例 7.4 图表 7.4.1 条形图 条形图用于数据集的比较，示例见图5。条形图应符合下列要求：a)坐标轴分别为指标数值和类别；b)文字符合 7.2 要求；c)悬浮框内显示详细数值；d)无背景栅格和坐标轴轴线；e)填充颜色采用渐变填充。DB3710/T 2102023 5 图5 条形图示例 7.4.2 折线图 折线图用于反映数据随时间变化的趋势，示例见图6，折线图应符合下列要求：a)横轴为时间维度，纵轴为指标数值；b)颜色采用 7.1 辅色色号；c

11、)文字符合 7.2 要求；d)悬浮框内显示详细数值；e)无背景栅格，坐标轴轴线采用实线，色号#647C9D，线条尺寸根据图表整体高度自适应；f)填充颜色采用 7.1 辅助色，或根据实际情况自行选择匹配颜色。图6 折线图示例 7.4.3 环形图 环形图用于数据占比显示，颜色采用 7.1 辅助色，数字和文字应符合 7.2 要求，示例见图 7。DB3710/T 2102023 6 图7 环形图示例 7.4.4 列表 列表用于指标数据展示，颜色采用7.1辅助色，表头及分割背景高度应根据全局列表自适应，示例见图8。图8 列表示例 7.5 界面间距 界面边距设计应符合下列要求：a)全局边距：标题栏尺寸为 7680PX201PX，页面内容到屏幕边缘的距离为 30PX 或 60PX，示例见图 9、图 10；图9 驾驶舱页示例 DB3710/T 2102023 7 图10 专题页示例 b)卡片间距：卡片间距根据界面分布情况自适应设计。_