组件css下拉菜单

广东政务服务网申办受理平台界面设计(UI)规范2019-08-20发布2019-08-20实施广东省政务服务数据管理局发布ICS35.
240.
99L67ZWFW广东数字政府标准规范GDZW0014-2019GDZW0014—2019目次前言.
I引言.
II1范围.
12规范性引用文件.
13术语和定义.
14缩略语.
25总体要求.
26组件使用方式.
36.
1概述.
36.
2使用方式.
37组件UI要求.
37.
1概述.
37.
2组件要求.
38网页UI要求.
98.
1概述.
98.
2页面要求.
99视觉UI要求.
169.
1概述.
169.
2视觉UI要求.
16GDZW0014—2019I前言本标准按GB/T1.
1-2009给出的规则起草.
本标准由广东省政务服务数据管理局归口.
GDZW0014—2019II引言为规范入驻到广东政务服务网的在线申办事项所涉及业务系统的UI设计,包括组件、网页、视觉UI三方面,制定本界面设计(UI)规范.
GDZW0014—20191广东政务服务网申办受理平台界面设计(UI)规范1范围本标准规定了广东政务服务网申办受理平台界面的组件UI、网页UI、视觉UI规范内容.
本标准适用于省、市、县(市、区)、镇(街)、村(居)所有入驻到广东政务服务网的在线申办事项所涉及的业务系统.
2规范性引用文件下列文件对于本文件的应用是必不可少的.
凡是注日期的引用文件,仅注日期的版本适用于本文件.
凡是不注日期的引用文件,其最新版本(包括所有的修改单)适用于本文件.
GB/T16681-2003信息技术开放系统中文界面规范C0102-2018国家政务服务平台政务服务门户建设要求C0104-2019国家政务服务平台政务服务移动端界面视觉要求3术语和定义下列术语和定义适用于本文件.
3.
1网页可在互联网上进行信息查询的信息页.
3.
2业务系统需要接入申办受理平台的第三方系统.
3.
3gdui政府设计用户界面(Government-designedUserInterface),为实现UI风格统一而设计的组件库.
3.
4html超文本标记语言(HyperTextMarkupLanguage),用于描述网页内容.
3.
5css层叠样式表(CascadingStyleSheets),用于控制网页样式.
3.
6js同JavaScript,一种浏览器运行的脚本语言.
3.
7Vue一套用于构建用户界面的渐进式JavaScript框架.
3.
8IE8GDZW0014—20192Windows系统自带浏览器第8代版本(InternetExplorer8).
4缩略语下列缩略语定义适用于本文件.
UI用户界面(UserInterface)5总体要求业务系统的界面设计要求见表1:表1规范要求规范类型类型子集新建业务系统设计规范要求已有业务系统设计规范要求组件UI规范组件:头部必须必须组件:底部必须必须组件:选择办理情形必须参考组件:事项基本信息必须参考组件:办理条件自检必须参考组件:材料清单自检必须参考组件:申请人信息必须参考组件:经办人信息必须参考组件:法人信息必须参考组件:协议信息必须参考组件:填写表单参考参考组件:电子材料上传必须参考页面UI规范页面:信息自检页必须参考页面:填写表单页参考参考页面:材料上传页必须参考页面:完成反馈页必须参考页面:事项详情页必须参考页面:材料补正页必须参考视觉UI规范色彩必须必须字体必须必须按钮必须参考对话框必须参考开关参考参考下拉菜单参考参考步骤条必须参考输入框必须参考分页必须参考锚点必须参考文字提示必须参考多选框与单选框必须参考GDZW0014—20193标签页必须参考日期选择框必须参考注1:标注为"必须"是指必须遵循的规范要求.
注2:标注为"参考"是指建议项,可根据自身情况决定是否使用.
6组件使用方式6.
1概述组件的使用方式包括gdui、静态html+css+js、引入静态JS渲染方法三种方式.
6.
2使用方式6.
2.
1gdui基于vue制作的组件库"gdui",推荐使用此方式.
使用说明:需要掌握基本的vue、mvvm基础知识,不支持IE8及以下浏览器.
更新说明:当组件库更新后,只需要执行dnpmi@digitalgd/gdui@x.
x.
x–save,然后重新使用wefebuild打包便可.
6.
2.
2静态html+css+js使用原生html、css实现,内置新版网厅样式,可在任何框架下直接使用.
使用说明:a)无需熟悉任何前端mvvm框架,支持IE7及以上、市面绝大部分浏览器;b)该方式不便于更新迭代,可能需要自己实现部分交互,可能存在与业务系统css的classname污染问题.
6.
2.
3静态JS渲染基于静态html+css+js文件模板,通过原生js去实现UI的渲染.
使用说明:a)快速接入,只需要引入一段,并执行初始化方案即可;b)对现有系统改造成本低;c)无需关注后续UI的更新迭代;d)方案缺点:可能与现有业务系统产生样式冲突,需要少量调试工作.
7组件UI要求7.
1概述组件包括头部、底部、选择办理情形、事项基本信息、办理条件自检、材料清单自检、申请人信息、经办人信息、法人信息、选择办理情形、填写表单、电子材料上传、完成反馈页面等内容.
7.
2组件要求7.
2.
1头部申办流程头部组件见图1;事项详情头部组件见图2.
图1申办流程头部组件图2事项详情头部组件GDZW0014—201947.
2.
2底部底部组件见图3.
注:自建系统:版权、ICP、电话须改成对应自建系统信息.
图3底部组件7.
2.
3选择办理情形组件选择办理情形组件见图4.
图4选择办理情形组件7.
2.
4事项基本信息组件事项基本信息组件见图5.
图5事项基本信息组件7.
2.
5办理条件自检组件办理条件自检组件见图6.
图6办理条件自检组件7.
2.
6材料清单自检组件材料清单自检组件见图7.
GDZW0014—20195图7材料清单自检组件7.
2.
7申请人信息组件申请人信息组件见图8.
图8申请人信息组件7.
2.
8经办人信息组件经办人信息组件见图9.
图9经办人信息组件7.
2.
9法人信息组件法人信息组件包括申请人信息组件和经办人组件,见图10、图11.
GDZW0014—20196图10法人信息-申请人信息组件图11法人信息-经办人组件7.
2.
10协议信息组件协议信息组件应包括协议信息选择、协议信息弹窗,见图12、图13.
图12协议信息选择图13协议信息弹窗7.
2.
11填写表单组件填写表单组件见图14.
GDZW0014—20197图14填写表单组件7.
2.
12电子材料上传组件电子材料上传组件包括单材料上传和多材料上传,展现样式见图15、图16、图17、图18、图19.
图15单材料上传展现样式1图16单材料上传展现样式2图17多材料上传展现样式1GDZW0014—20198图18多材料上传展现样式2图19多材料上传展现样式37.
2.
13完成反馈页面组件完成反馈页面组件见图20.
操作步骤:a)点击"工单流水号"跳转至用户中心,我的事项/我的办件详情页;b)点击"我的事项"跳转至用户中心,我的事项/我的办件列表;c)点击"返回首页"跳转至广东政务服务网首页.
GDZW0014—20199图20完成反馈页面组件8网页UI要求8.
1概述网页UI包括信息自检页、填写表单页、材料上传页、完成反馈页、事项详情页、材料补正页等内容.
8.
2页面要求8.
2.
1信息自检页信息自检页包含头部组件、横向步骤条、选择情形组件、事项基本信息组件、办理条件自检组件、材料清单自检组件、经办人信息组件、法人信息组件之一申请人信息及底部组件等.
见图21、图22.
GDZW0014—201910图21信息自检页样式1GDZW0014—201911图22信息自检页样式28.
2.
2填写表单页填写表单页包含头部组件、横向步骤条、填写表单组件及底部组件等.
见图23.
GDZW0014—201912图23填写表单页8.
2.
3材料上传页材料上传页包含头部组件、横向步骤条、电子材料上传组件(多材料上传)展现样式及底部组件等.
见图24.
GDZW0014—201913图24材料上传页8.
2.
4完成反馈页完成反馈页包含头部组件、横向步骤条、完成反馈组件及底部组件等.
见图25.
GDZW0014—201914图25完成反馈页8.
2.
5事项详情页填写表单页包含头部组件、事项名称、工单流水号、横向步骤条、纵向步骤条、事项基本信息组件(包含办理情形、事项基本信息、经办人信息、申请人法人信息)、表单信息(包含表单基本信息)、材料信息(材料上传信息)、回执通知书(包含回执通知书信息、回执单信息)及底部组件等.
见图26、图27、图28、图29、图30.
图26事项详请页-基本信息GDZW0014—201915图27事项详请页-表单信息图28事项详请页-材料图29事项详请页-回执通知书图30回执通知书-查看详情8.
2.
6材料补正页材料补正页包含头部组件、事项名称、工单流水号、材料补正、表单补正及底部组件等.
见图31.
GDZW0014—201916图31材料补正页9视觉UI要求9.
1概述视觉UI包括色彩、字体、按钮、对话框、开关、下拉菜单、步骤条、输入框、分页、锚点、文字提示、多选框与复选框、标签页、日期与单选框、标签页、日期与单选框等.
9.
2视觉UI要求9.
2.
1色彩色彩见图32.
文字颜色背景颜色类型色块十六进制颜色码类型色块十六进制颜色码GDZW0014—201917一级文字#0D1C28一级背景#C5C8CA二级文字#45484B二级背景#DFE1E2三级文字#727475三级背景#F1F2F3背景色反色#FFFFFF页面背景#FFFFFF链接颜色强调色类型色块颜色码类型色块颜色码链接#3E97DF强调#F13939链接悬停#0066B9强对比背景#152E48已点链接#5635A0按钮颜色状态色类型色块颜色码类型色块颜色码按钮#3E97DF成功提示#0C9363按钮悬停#3784C2错误提示#F13939图32色彩9.
2.
2字体字体见图33.
GDZW0014—201918图33字体9.
2.
3按钮按钮见图34.
主按钮次按钮状态:默认状态背景色:#3E97DF文字:#FFFFFF、16px状态:默认状态背景色:#EBF4FB文字:#3E97DF、16px状态:鼠标悬停状态背景色:#0066B9文字:#FFFFFF、16px状态:鼠标悬停状态背景色:#D8EAF9文字:#3E97DF、16px状态:禁用状态背景色:#EBF4FB文字:#B7D7F2、16px状态:禁用状态背景色:#EBF4FB文字:#B7D7F2、16px图34按钮9.
2.
4对话框对话框见图35、图36、图37、图38、图39.
类型情景类型1文字阅读,例如:信息传达,操作反馈,警示提示字号说明Bold,42px一般为网页一级办事事项的标题,也可以用于阿拉伯数字等Bold,24px用于页面标签页的标题Bold,18px用于非常重要的阅读文字等,也可以是标题Regular,18px用于二级正文字体Bold,16px用于被强调的正文字体等,如需填写的表单内文字等Regular,16px用于文本阅读的基础字号Regular,14px说明文本,如标注文字、版权信息、复杂的表单内文字、名称等GDZW0014—201919类型2单层层级表单填写类型2变体信息和表单混排,多层级表单填写类型3操作提醒和二维码类型3变体无标题二维码三图35对话框类型一GDZW0014—201920图36对话框类型二GDZW0014—201921图37对话框类型二变体GDZW0014—201922图38对话框类型三GDZW0014—201923图39对话框类型三变体9.
2.
5下拉菜单下拉菜单见图41.
图40下拉菜单9.
2.
6步骤条步骤条见图42.
GDZW0014—201924图41步骤条9.
2.
7输入框输入框见图43.
图42输入框9.
2.
8分页分页见图44.
图43分页9.
2.
9锚点锚点见图45.
GDZW0014—201925图44锚点9.
2.
10文字提示文字提示见图46.
图45文字提示9.
2.
11多选框与复选框多选框与复选框见图47.
图46多选框与复选框GDZW0014—2019269.
2.
12标签页标签页见图48.
图47标签页9.
2.
13日期与单选框日期与单选框见图49.
图48日期与单选框