- 1、本文档共7页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
- 5、该文档为VIP文档,如果想要下载,成为VIP会员后,下载免费。
- 6、成为VIP后,下载本文档将扣除1次下载权益。下载后,不支持退款、换文档。如有疑问请联系我们。
- 7、成为VIP后,您将拥有八大权益,权益包括:VIP文档下载权益、阅读免打扰、文档格式转换、高级专利检索、专属身份标志、高级客服、多端互通、版权登记。
- 8、VIP文档为合作方或网友上传,每下载1次, 网站将根据用户上传文档的质量评分、类型等,对文档贡献者给予高额补贴、流量扶持。如果你也想贡献VIP文档。上传文档
查看更多
城市大脑 界面设计规范
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
文档评论(0)