医疗保障信息平台用户界面规范
第1 部分：PC 端用户界面规范
1范围
本部分规定了医疗保障信息平台包括公共服务网厅和业务系统界面的配、文字、版式布局和常用组件的设计要求。
本部分适用于医疗保障信息化项目的公共服务网厅和业务系统的用户界面设计。
2术语和定义
2.1
图标icon
用于表示系统对象(或)应用程序功能的可交互符号。
2.2
标签页tabs
用于标记当前位置和展示可切换的相关联的场景的组件。
2.3
单选框radio
用于单项选择的组件。
2.4
复选框checkbox
用于多项选择的组件。
2.5
输入框input
用于输入文字信息的组件。
2.6
分页pagination
用于将数据信息分成固定大小的页面展示的组件。
2.7
网页界面设计中面包屑breadcrumb
用于显示当前页面的路径，提供快速返回之前的任意页面的功能的组件。
2.8
滚动条scrollbar
用于在跨页的时候，通过滚动滑块切换页面信息的组件。
2.9
穿梭框transfer
用于两个表格间的数据穿梭的组件。
XJ-C01.1-2019
2.10
标签tag
用于表示具体的功能或展示具体内容的组件。
2.11
弹框messagebox
用于提示操作状态、反馈流程关键节点的组件。
2.12
加载器loading
用于数据加载、页面跳转的转场对象组件。
2.13
表格table
用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。2.14
树形组件tree
用清晰的层级结构展示信息，并提供展开或折叠操作的组件。
2.15
标记badge
可设置在按钮、图标旁的数字或状态标记的组件。
2.16
消息提示 message
常用于主动操作后的展示反馈提示的组件。
2.17
进度条progress
用于展示操作进度，告知用户当前状态和预期的组件。
2.18
图表chart
又称统计图表，指在界面上显示的可直观展示统计信息属性(时间性、数量性等)，对信息直观生动感受起关键作用的图形结构，是一种将对象属性数据直观、形象地可视化手段。2.19 PC
一般指个人计算机，包括台式计算机、一体机、笔记本、掌上电脑等。
2.20
像素Pixel（px）
界面中标识字型大小的单位
3总体要求
总体要求包括下述内容：
a)页面应简洁明了，保持统一风格；
b)页面设计宜按适配常用分辨率的规格设计，页面分辨率宜设置为 72 像素每英寸，
页面画布尺寸宽宜设置为 1920px，中间内容区域宽度宜设置为 1100px；
c)使用符合用户习惯的标准字型和字号，同一类别的栏目和信息应使用同一模板，统一
字型、字号、行间距和布局；
d)页面布局应科学合理、层次分明、重点突出，符合从左到右、从上到下的阅读习惯；
首页页面设计不宜过长，尽量少使用过大的图片及音视频文件，在主流计算机配置和
当地平均网速条件下，页面能较快加载；
e)除了首页以外，每个页面都应清晰地标注当前所访问页面所在的位置，并且可逐级访
问各子页面；打开子页面时，应通过当前页面进行跳转，不宜打开新窗口展现；每
个子页面都应设置跳转到首页的链接；
f)对主流类别及常用版本浏览器具有较好的兼容性，页面整齐不变形，不出现文字错行、
表格错位、功能和组件不可用的情况；
g)对移动端浏览器具有较好的适应性和兼容性，在移动端浏览器上宜进行结构重排及样
式重新渲染，与移动端浏览器显示方式相匹配，页面整齐不变形，不出现文字错行、
表格错位、功能和组件不可用的情况。
4风格布局
4.1配
4.1.1配原则
在 PC 端可视化设计中，彩的运用原则上应首先考虑准确性，保证达到信息传递、操作指引、交互反馈，或是强化凸显某一个信息的目的。数据信息到颜的映射是非常重要的一个环节，分为调、饱和度、亮度三个视觉通道。调属于分类的视觉通道，饱和度和亮度用于连续的视觉通道。
4.1.2配规范
图1 给出了常用的颜，及使用场景，以下给出了主要的说明：
a)明确 1 种主调，合理搭配辅助调，总调不宜超过 3 种调，调应满足下述要
求：
1)主调医保蓝颜值为#1B65B9 / 27-101-185，宜用于主按钮、图标、文字
链等主要组件；
2) 辅调颜值为#3CA0F6 / 60-160-246，宜用于辅按钮；
3) 渐变蓝颜值为#3CA0F6 / 60-160-246 - #3B71E8 / 59-113-232，宜用于丰
富品牌调，例如主图标主和大面积块；
b)场景：
——成功颜值：#67C23A / 103-194-58，宜用于成功勾选等正确性暗示；
——警告颜值：#E6A23C / 230-162-60，宜用于内容高亮显示；
—
—危险颜值：#F56C6C / 245-108-108，宜用于通知或者错误提示；
c)文本、边框及背景颜详见图中的说明。
XJ-C01.1-2019
图 1 配方案
4.2文字
4.2.1文字原则
同一类别的栏目和信息应使用同一字体、字号和行间距。如有特殊需要嵌入字体时，需考虑字体的可识别性，设计风格融合度，以及是否可免费商用。
4.2.2文字规范
如图 2 所示，字体、字号应符合下述要求：
a)中文宜使用下述字体：
1)首选使用：Microsoft YaHei；
2)备用：Hiragino Sans GB；
3)次级备用：Pingfang SC；
b)英文宜使用下述字体：
1)首选使用：Arial；
2)备用：Helvetica Neue；
3)次级备用：Helvetica；
c)字号的使用应符合下述要求：
1)大标题：18px；
2)主标题：16px；
3)次标题：14px；
4)小标题：12px；
5) 正文：14px；
6)次辅助文字：13px；
7)辅助文字：12px。
图 2 字体字号
4.3界面布局
4.3.1界面布局规范
排版布局上应遵循如下原则：
a)对比：完全不同的数据类型，选择截然不同信息图示；
b)重复：相同类型或相似数据，选用尽可能相同的展示；
c)对齐：利用对齐方式保证信息图示之间的视觉联系；
d)亲密性：相关的数据项组织在一起，视觉上呈现出一体化。
4.3.1.1公共服务网厅门户布局规范
如图 3 所示，公共服务网厅门户布局应包含 3 个区域，分别是头部信息区域、内容区域、底部区域，界面尺寸应为宽度为 1920px。三个区域的布局应符合下述要求：
a)头部信息区域：高度应为 150px；宽度应为 100%；
b)内容区域：宽度：1100px；
c)底部区域：高度：145px；宽度：100%。
XJ-C01.1-2019
图 3 公共服务网厅门户布局
4.3.1.2统一门户布局规范
如图 4 所示，国家医保局统一门户首页布局应包含四个区域，分别是头部信息区域、左侧弹出菜单区、右侧浮动菜单区以及栏目区。四个区域的布局应符合下述要求：
a)头部信息区域高度：65px；
b)左侧弹出菜单宽度：最小 90 px，最大 120 px；
c)右侧浮动菜单宽度：80px；
d)各栏目区域间距：10px。
图 4 统一门户首页板式布局
4.3.2统一门户个人工作台
如图 5 所示，统一门户个人工作台应包括三个区域，分别是头部信息区域、内容区、右侧浮动菜单区域。界面设计应采用1366px×768px尺寸。三个区域的布局应符合下述要求：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。