城市大脑 界面设计规范.pdfVIP

城市大脑 界面设计规范 1 范围 本文件规定了威海市城市大脑界面设计的术语和定义、缩略语、总体要求、界面模块设计、界面元 素设计。 本文件适用于威海市各级各部门信息化系统可视化部分的界面设计和接入使用。 2 规范性引用文件 本文件没有规范性引用文件。 3 术语和定义 下列术语和定义适用于本文件。 3.1 城市大脑 city brain 运用大数据、云计算、物联网、人工智能、区块链、数字孪生等技术，提升城市现代化治理能力和 城市竞争力的新型基础设施。 3.2 全局边距 globalmargin 页面内容到平台设备屏幕边缘的距离。 3.3 间距 spacing 界面中文字与文字、模块与模块之间的展示距离。 4 缩略语 下列缩略语适用于本文件。 UI：用户界面 （UserInterface） B/S：浏览器/服务器 （Brower/Server） C/S：客户端/服务器 （Client/Server） JPG：联合图像专家组(JointPhotographicExpertsGroup)文件格式 MPEG：动态图像专家组 （MovingPictureExpertsGroup） PNG：可移植性网络图像 （PortableNetworkGraphics） 1 PSD：Photoshop的专用格式 （AdobePhotoshopDocument） 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 颜色 2 界面颜色包括背景色、主色、辅助色、警示色。界面的颜色及应用场景应符合表1的规定。 表1 颜色及应用场景 序号 类别 色值 用途 1 背景色 #010205 用于平台背景 2 主色 #001F49、#014CC0、#017DFE 用于主平台色调 #2EB8FF、#19FAFF、#CBF0FF、#DBDBDB、#FFFFFF、 3 辅助色 用于平台中的图标、图表等 #05FFA6、#1FCA97、#FFD902、#F38251、#000000、#606060 4 警示色 #E5201E