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

35.200CCS

L

70DB3710

3710/T

210—2023城市大脑

界面设计规范User

for

brain威海市市场监督管理局发

布DB3710/T

—2023本文件按照GB/T

1.1—《标准化工作导则

第1草。请注意本文件的某些内容可能涉及专利。本文件的发布机构不承担识别专利的责任。本文件由威海市大数据局提出、归口并组织实施和评估。本文件起草单位：威海市大数据局、威海智慧北洋信息技术有限公司。本文件主要起草人：王璐、于治超、马欣惠、王强、娄旸。DB3710/T

—2023<><>字强省办发〔2023〕4号）的要求，实施城市大脑建设提升行动，探索构建城市智能体，在业务应用建健全建设与运行机制五个方向开展试点工作。体系。城市大脑部分专题应用以部门自建为主，为了保证整体风格的统一，同时便于后期的扩展和维护，需要有统一的界面规范，指导各部门进行设计和开发，赋能城市大脑建设。本文件明确了城市大脑及各业务专题在UI化系统按统一UI界面规范进行设计和接入。IIDB3710/T

—2023

1 范围本文件适用于各级各部门信息化系统可视化部分的界面设计和接入使用。2 规范性引用文件本文件没有规范性引用文件。3术语和定义下列术语和定义适用于本文件。3.1城市大脑

city

brain城市竞争力的新型基础设施。3.2全局边距

margin页面内容到平台设备屏幕边缘的距离。3.3间距

界面中文字与文字、模块与模块之间的展示距离。4 缩略语下列缩略语适用于本文件。UI：用户界面（User

Interface）B/S：浏览器/服务器（Brower/Server）C/S：客户端/Client/Server）JPG：联合图像专家组

Photographic

Group)文件格式MPEG：动态图像专家组（Moving

Picture

Experts

Group）PNG：可移植性网络图像（Portable

）PSD：Photoshop的专用格式（Adobe

Photoshop

Document）DB3710/T

—2023SKETCH：矢量绘图软件Sketch）PX：像素（Pixel）5 总体要求总体设计应符合下列要求：a)

符合

或

C/S

软件系统架构设计要求；b)

省级统一要求；c)

保持界面风格一致；d)

色彩对比度不低于

：1；e)

图片、附件、视频等显示要求：1)

显示内容有效可用；2)

名称直观准确；3)

采用

、PNG、PSD、、SKETCH

等主流设计格式。6 界面模块设计界面模块设计要求包括：a)

标题栏：包括名称、天气情况、日期、时间等要素，整体高度为

201PX，示例见图

1；图1 标题栏示例b)

导航按钮：由各功能模块名称组成，位于平台名称两侧，示例见图

2；图2 导航按钮、数据卡片、地图、图表控件模块示例c)

设计，示例见图

2；d)

地图：包括行政区划、边界、数据标签等要素，示例见图

2；e)

图表控件：包括折线图、条形图、环形图、列表等不同形式的图表，具体要求见

。7 界面元素设计7.1 颜色PX128646050数据卡片标题404040#010205#001F49#2EB8FF

#CBF0FF#DBDBDB#FFFFFF#05FFA6#F38251用于平台中的图标、图表等#E5201E平台名称、系统标题、子标题名称以及数据卡片标题ArialDB3710/T

—2023界面颜色包括背景色、主色、辅助色、警示色。界面的颜色及应用场景应符合表1的规定。表1颜色及应用场景7.2字体样式7.2.1字体及应用场景界面的字体及应用场景应符合表2的规定。表2字体及应用场景7.2.2 字号及应用场景界面的字号及应用场景应符合表3的规定。表3 字号及应用场景7.3 图标7.3.1 系统图标界面中的系统图标主要用于导航按钮和驾驶舱，示例见图3，透明度根据实际情况适当选择。系统图标设计应符合下列要求。a)

导航图标分为文字图标、图形图标等，包括外框、内框、图标等元素：1)

×156PX

×132PX

×54PX；DB3710/T

—20232)

×156PX

×132PX

×60PX。b)

168PX×168PX

90PX×。图3 图标尺寸示例7.3.2 辅助图标界面中的辅助图标用于地图操控组件设计，包括外框、图标等元素，示例见图4。辅助图标设计应符合下列要求：a)

外框：尺寸为

336PX×，填充颜色根据具体情况进行选择；b)

图标：尺寸不超过

270PX×270PX，填充色号为。图4 辅助图标示例7.4 图表7.4.1 条形图条形图用于数据集的比较，示例见图5。条形图应符合下列要求：a)

坐标轴分别为指标数值和类别；b)

文字符合

要求；c)

悬浮框内显示详细数值；d)

无背景栅格和坐标轴轴线；e)

填充颜色采用渐变填充。DB3710/T

—2023图5 条形图示例7.4.2折线图折线图用于反映数据随时间变化的趋势，示例见图6，折线图应符合下列要求：a)

横轴为时间维度，纵轴为指标数值；b)

颜色采用

辅色色号；c)

文字符合

要求；d)

悬浮框内显示详细数值；e)

无背景栅格，坐标轴轴线采用实线，色号#647C9D，线条尺寸根据图表整体高度自适应；f)

填充颜色采用

辅助色，或根据实际情况自行选择匹配颜色。图6折线图示例7.4.3 环形图环形图用于数据占比显示，颜色采用

7.1

辅助色，数字和文字应符合

要求，示例见图

7。DB3710/T

—2023图7环形图示例7.4.4列表列表用于指标数据展示，颜色采用7.1辅助色，表头及分割背景高度应根据全局列表自适应，示例见图8。图8 列表示例7.5界面间距界面边距设计应符合下列要求：a)

全局边距：标题栏尺寸为

7680PX×201PX，页