ICS 35.200 CCS L 70 DB3710 威海市地方标准 DB 3710/T 210—2023 城市大脑 界面设计规范 User interface design specifications for city brain 2023 - 11 - 17发布 2023 - 12 - 17实施 威海市市场监督管理局 发布 DB3710/T 210—2023 I 前 言 本文件按照 GB/T 1.1—2020《标准化工作导则 第1部分：标准化文件的结构和起草规则》的规定起 草。 请注意本文件的某些内容可能涉及专利。本文件的发布机构不承担识别专利的责任。 本文件由威海市大数据局 提出、归口并组织实施和评估。 本文件起草单位：威海市大数据局、威海 智慧北洋信息技术有限公司 。 本文件主要起草人：王璐、于治超、马欣惠、王强、娄旸。 DB3710/T 210—2023 II 引 言 根据《关于印发 <加快推进“城市大脑”建设工作方案 ><“城市大脑”建设试点分工 >的通知》（数 字强省办发〔 2023〕4号）的要 求，实施城市 大脑建设提升行动，探索构建城市智能体，在业务应用建 设与互联互通、强化平台支撑与赋能应用、基层覆盖与智慧社区联动、技术标准与管理规范应用、建立 健全建设与运行机制五个方向开展试点工作。 技术标准与管理规范应用试点要求完善制定标准规范， 初步建立市域城市大脑技术标准和管理规范 体系。 城市大脑部分专题应用以部门自建为主，为了保证整体风格的统一，同时便于后期的扩展和维护， 需要有统一的界面规范，指导各部门进行设计和开发，赋能城市大脑建设。 本文件明确了城市大脑及各业务专题在 UI界面设计时的规范化指导要求， 需要威海市各部门 的可视 化系统按统一 UI界面规范进行设计和接入。 DB3710/T 210—2023 1 城市大脑 界面设计规范 1 范围 本文件规定了 城市大脑界面设计的术语和定义、 缩略语、总体要求、界面模块设计、 界面元素设计 。 本文件适用于各级各部门 信息化系统可视化部分的 界面设计和接入使用 。 2 规范性引用文件 本文件没有规范性引用文件。 3 术语和定义 下列术语和定义适用于本文件。 3.1 城市大脑 city brain 运用大数据、云计算、物联网、人工智能、区块链、数字孪生等技术，提升城市现代化治理能力和 城市竞争力的新型基础设施。 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 Networ k Graphics ） PSD：Photoshop 的专用格式（ Adobe Photo shop Document ） DB3710/T 210—2023 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、SKETCH等主流设计格式。 6 界面模块设计 界面模块设计要求包括： a) 标题栏：包括名称、天气情况、 日期、时间 等要素，整体高度为 201PX，示例见图1； 图1 标题栏示例 b) 导航按钮：由各功能模块名称组成，位于平台名称两侧 ，示例见图2； 图2 导航按钮 、数据卡片 、地图、图表控件模块示例 c) 数据卡片：包括标题、图表、文字等要素，其中标题、文字为必选要素，数据卡片可采用分级 设计，示例见图2； d) 地图：包括行政区划、边界、数据标签等要素， 示例见图2； e) 图表控件：包括折线图、条形 图、环形图、列表等不同形式的图表，具体要求见 7.4。 7 界面元素设计 7.1 颜色 DB3710/T 210—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 字体及应用场景 序号 字体名称 应用场景 1 思源黑体 平台名称、系统标题 、子标题名称 以及数据卡片标题 2 Arial 指标数字 3 思源宋体 内容及其他 7.2.2 字号及应用场景 界面的字号及应用场景应符合表 3的规定。 表3 字号及应用场景 序号 字号尺寸， PX 应用场景 1 128 平台名称、系统标题 2 64～80 子标题名称 3 60 导航按钮名称 4 50～56 数据卡片 标题 5 40～48 指标数字 6 40～48 一般图表中描述性文字 7 40 坐标轴文字 7.3 图标 7.3.1 系统图标 界面中的系统图标主要用于导航 按钮和驾驶舱，示例见图 3，透明度根据实际情况适当选择。系统 图标设计应符合下列要求。 a) 导航图标分为文字图标、图形图标等，包括外框、内框、图标等元素： 1) 文字图标：外框尺寸为 600PX×156PX，内框尺寸为 532PX×132PX，图标尺寸不超过 54PX ×54PX； DB3710/T 210—2023 4 2) 图形图标：外框尺寸为 224PX×156PX，内框尺寸为 156PX×132PX，图标尺寸不超过 60PX ×60PX。 b) 驾驶舱图标： 包括外框、 图标等元素， 外框尺寸为 168PX×168PX， 图标尺寸不超过 90PX×90PX。 图3 图标尺寸示例 7.3.2 辅助图标 界面中的辅助图标用于 地图操控组件设计 ，包括外框、图标等元素，示例见图 4。辅助图标设计应 符合下列要求： a) 外框：尺寸为 336PX×420PX，填充颜色根据具体情况进行选择； b) 图标：尺寸不超过 270PX×270PX，填充色号为 #000000。 图4 辅助图标示例 7.4 图表 7.4.1 条形图 条形图用于数据集的比较， 示例见图5。条形图应符合下列要求： a) 坐标轴分别为指标数值和 类别； b) 文字符合 7.2要求； c) 悬浮框内显示详细数值 ； d) 无背景栅格和坐标轴轴线 ； e) 填充颜色采用渐变填充。