产品说明书设计
-
2023年2月16日发(作者：实际国内生产总值)~
产品标准化设计说明书
，
）
】
目录
1提示规范........................................................错误!未定义书签。
2验证规范........................................................错误!未定义书签。
3界面规范........................................................错误!未定义书签。
4控件规范........................................................错误!未定义书签。
5组件规范........................................................错误!未定义书签。
(
表格...........................................................错误!未定义书签。
编号和序号.....................................................错误!未定义书签。
注册表单.......................................................错误!未定义书签。
联系方式.......................................................错误!未定义书签。
翻页...........................................................错误!未定义书签。
日期输入.......................................................错误!未定义书签。
进度条.........................................................错误!未定义书签。
保留图标.......................................................错误!未定义书签。
]
弹出层.........................................................错误!未定义书签。
搜索...........................................................错误!未定义书签。
排序...........................................................错误!未定义书签。
6其它规范..........................................................错误!未定义书签。
1）常用规范..........................................................错误!未定义书签。
2）开发代码规范......................................................错误!未定义书签。
（
;
1提示规范
通用提示：
序号提示类型提示信息规范!
对应按钮
1）
必须选择数据才能进行操作的
提示
请选择×××！〖确定〗
2）
必须输入数据才能进行操作的
提示
请填写×××！!
〖确定〗
3）删除校验
可直接
删除
确实要删除选择的
记录吗
〖确定〗、
〖取消〗
】
有层级
关系（单
笔记录）
确实要删除选择的
××及子级××吗
不可直
接删除
（单笔
记录）
当前记录已××，不
允许删除！
〖确定〗
当前××存在××
数据，不允许删除！
〖确定〗
！
当前××已被××
关联，不允许删除！
〖确定〗
批量删
除
某些记录不允许删
除：××记录，不允
许删除！
〖确定〗
全部允许删除：确实
要删除选择的记录
吗
〖确定〗、
〖取消〗
5）字段超长提示
输入字符不允许超
出N个字节！
〖确定〗
6）[
7）
唯一性校验
单个字段不允许重
复：××下的<字段
名称>不允许重复!
〖确定〗
双字段不允许重复：
××下的<字段名称
1>和不
允许重复！
8）~
9）
非空校验
可编辑字段的非空
校验：请输入<字段
〖确定〗
名称>！
不可编辑字段的非
空校验：请选择<字
段名称>！
既可编辑也可选择
的情况：请输入<字
段名称>！
11）特殊字符的校验
不允许输入特殊字
符：
列出特殊字符，并
以,隔开
…
〖确定〗
12）查询无条件的提示请输入查询条件〖确定〗
13）业务原因无法操作
××××不允许<按
钮名称>！
*
〖确定〗
14）数据关联对应的提示
当前记录已××，不
允许×××！
当前记录存在××
××，是否××
〖确定〗
15）日期字段输入错误校验
)
对于YYYY-MM-DD格
式：请输入有效日
期！
〖确定〗
对于YYYY-MM格式：
请输入有效月份！
〖确定〗
16）日期段输入校验
*
XX截止日期不允许
早于XX起始日期！
〖确定〗
17）日期有效性校验
XX日期必须在SS起
止日期
（YYYY-MM-DD～
YYYY-MM-DD）范围
内！
〖确定〗
18）~
数值字段输入错误校验
数值有范围限制：请
输入从×××到×
××之间的数值！
〖确定〗
数值必须大于0的情
况：必须
大于零！
〖确定〗
数值不允许等于0的
情况：不
允许等于零！
〖确定〗
19）操作失败的提示
操作失败，请关闭重
试！
〖确定〗
20）(
等待提示
处理中，请稍候…〖确定〗
21）当数据发生改变时的提示信息。
提示信息如下图所
示
〖确定〗
22）)
最多支持n级分类提示
XXX最多支持n级分
类，不允许新增！
〖确定〗
23）退出提示是否要退出系统
〖确定〗、
〖取消〗
【
2验证规范
范围：主要用于表单数据及其它数据的验证提示，例如：身份证与年龄匹配验证等。
需验证的对象用途标准化提示语
身份证与年龄不相符检查身份证与年龄是否匹配
~
年龄与身份证不符合，请重新输入！
密码验证检查密码是否正确密码不正确，请重新输入！
用户名检查用户名是否存在1、用户名存在的情况下，则提示：用户
名不正确，请重新输入！
2、用户名不存在的情况下，则提示：用
户不存在！
…
字段为空或全是空格
检查输入字符串是否为空或者全部都是空
格
1、空的情况下，则提示：请填写***！
2、全是空格的情况下，则提示：名称
包含空格！
手机号码检查输入手机号码是否正确手机号码不正确，请重新输入！
电话号码
；
检查输入字符串是否符合国内固话或者传
真格式
电话号码不正确，请重新输入！
日期验证判断是否是日期您输入的日期格式有误！
时间验证检查输入字符串是否符合时间格式您输入的时间格式有误！
{
字母数字下划线验证
检查输入字符串是否只由英文字母和数字
和下划线组成
您输入的格式有误！
邮箱验证检查输入对象的值是否符合E-Mail格式您输入的邮箱格式有误！
数字验证检查输入字符串是否是数字
—
您输入的格式有误！
身份证验证检查输入字符串是否符合身份证格式您输入的身份证有误！
复选框请选择！
单选按钮
&
请选择！
特殊字符验证您输入的内容包含非法字符！
备注：
1、提示语颜色均为红色！
2、提示语位置均显示在对应的文本输入框后方。
]
3界面规范
序号界面内容规范要求
1
!
颜色
1、统一色调，采用标准Windows的基本色调，做到与操作系统统一，读取系统标准色表。
2、整个界面色彩尽量少的使用类别不同的颜色。除非特殊场合，杜绝使用对比强烈，让人产
生憎恶感的颜色。
3、同时色调也具有一定的含义，在整个系统中应保持色调含义的一致性，避免同一中颜色在
不同的画面中表示不同的意义。
2文字表述
提示信息、帮助文档文字表达遵循以下准则：
口语化，多用您、请，不要用或少用专业术语，杜绝错别字。
》
断句逗号句号顿号分号的用法，提示信息比较多的话，应该分段。
所有的警告、信息、错误和提示的对话框统一采用提示信息格式。
使用统一的语言描述，例如一个关闭退出功能按钮，统一描述为退出，避免使用返回、关闭
等描述。
3控件选择
不要随意使用控件，控件功能要专一，风格统一。如果没有好的控件，则使用标准控件。
1、控件的风格统一。
2、同一类型的控件操作方式相同，避免出现一个控件双击可以执行某些动作，而同样控件，
双击却没有任何反映。
，
一个控件只做单一功能，尽量不复用。
4顺序习惯用法，阅读顺序，从左到右，从上到下。
5一致性
用词、配色、按钮、字体等前后均要保持一致性。
6
}
文字对齐
患者、申请医生、会诊专家等姓名字段，按三个字的姓名两端对齐，三个字以上的姓名左对
齐即可。例如：
张三
张三丰
张三丰子
7内容显示
所有列表均按1024×768的分辨率固定每列的宽度。根据页面内容和字体大小进行设计即可，
字段的长度如果超过列宽的，不能显示的部分已省略号代替，当鼠标在该字段上面停放时，
显示全部内容，例如：
!
8文字链接
可链接的文字均采用蓝色字体，鼠标放置时显示下划线。
9统计报表
所有报表支持打印，导出为Excel。
打印时支持打印预览，可以先浏览页面布局，再点击“打印”按钮才进行打印。
~
如报表中的值为0，则显示为“---”。
对齐：序号居中显示，表示值的数字使用千分位分隔符并且右对齐，文字左对齐。
所有列表均按1024×768的分辨率固定每列的宽度。根据页面内容和字体大小进行设计
即可，字段的长度如果超过列宽的，不能显示的部分用省略号代替，当鼠标在该字段上
面停放时，显示全部内容。
列标题加粗，用有颜色的底纹进行标识，如果可以点击时，添加下划线，字体用蓝色。
提供分页功能
导出的报表中，如有些值是计算出来的结果，则在导出的报表中显示公式。
合计的值用粗体，进行区分显示
10
;
列表滚动条
当页面出现竖向滚动条时，滚动条需控制在列表内，滚动时，列表标题不动，只滚动内容。
11图片资源
1、退出按钮：
2、保存按钮：或
3、新建按钮：或
4、@
5、打开按钮：
6、下个环节：
7、上个环节：
8、打印按钮：或
9、打印预览：或
10、刷新按钮：
11、查询按钮：
12、复制按钮：
13、~
14、粘贴按钮：
15、取消按钮：
16、删除按钮：
备注：
后期软件需求基础设计均以此为主作为参考。
4控件规范
》
序号
控件名称控件说明及样式
1附件上传备注：支持进度条及上传百分比显示。
例如：
】
2
图片上传当鼠标指向图片时显示“修改头像”，点击可打开上传图片。
例如：
3分页控件
1)提供首页、末页、上一页、下一页、跳转到指定页面的功能；当只有1页时，链接均无效；
当处于第1页或最后一页时，首页/上一页或下一页/末页的链接无效。
2);
3)提供设置每页显示指定条数的功能，后台可配置指定条数的选项,如20、50、100。
4)列表上方与下方均需提供分页栏。
例如：
4时间控件以YYYY-MM-DD格式显示，不足两位的以补齐，譬如：。
例如：
-
5文本编辑
框
功能包括：字体选择、字体大小、加粗、斜体、下划线、引号、括号、无序列表、有序列表、插
入图片、插入视频、清除格式。
系统文本编辑框均采用以下样式实现。
6树形控件
*
备注：
后期软件需求基础设计均以此为主作为参考。
5(
6组件规范
6.1表格
主要应用于大批量数据的展示、查看、维护等方面。基础表格是表格本身最原始的一些
属性集合，针对表格在不同场景下的状况，在扩展设计中会一一罗列出来。
【设计意图】
合理有效的组织数据信息；
帮助用户快速、有效的查看表格数据；
帮助用户快速、准确的完成对表格的操作；
【应用条件】
、
适用于批量数据的展示和维护；
【模式描述】
组成：表格标题+表格表头+表格行间隔线+表格行
如下图所示：
图6-1基础表格
应用规范：
…
表格的标题：标题文字要与其它文字有所区别，如：加粗显示；标题文字内容以
“内容+操作”的形式描述，标题文字前需要有相应的标题图标，文字与图标之间
间隔一定的距离，如：一个半角空格。
表格的表头与表格主体在外观上要有区分；
表格行间隔线：表格的主体内容用表格线区分；表格线的粗细要适中，如1px。
【扩展描述】
根据应用场景的不同，可以对基础表格进行扩展；可以为表格增加数据筛选区、命令
按钮区、操作按钮区、表格主体区、翻页区、操作按钮区。整体效果如下图所示：
图6-2表格操作区分布
1）标题列排序：
.
表格列标题可以排序时，表格的列标题要体现出当前排序状态，并要区分于其他
列标题显示，如：背景和图标高亮显示；
如下图所示：
图6-3标题列排序
表格列标题进行切换时，原列标题恢复初始状态，切换到的列标题显示为排序状
态；
2）表格行选中操作：
表格中的第一列，既可表示对行的选择如复选框；同时还可以用图标标示数据状
态；当两者都有时，显示复选框在上，图标被覆盖；
在对表格行进行选中（点选行的任意位置即可选中）时，此行要高亮显示，同时
此行前复选框为选中状态，同时还可以进行多行选择；需要全选时，只需勾选列
标题中的复选框即可选中当前列表的全部行数据。
]
3）数据筛选区：
当数据内容可以明确的按其状态、类别进行划分时，可以应用页签的形式来进行
设计；
页签总宽度在表格宽度的75%之内为佳，超出此范围时，需应用其他设计形式如
下拉框显示的形式等；
如下图所示：
图6-4数据筛选区
；
当前分类状态的的页签要高亮显示，要明显区别于其他页签；
页签内的文字，需要简单明了，相同内容的文字省略；如上图中未处理（订单）、
处理中（订单）、处理完成（订单）；
应用页签设计时，页签类别要划分明确合理；如按照数据状态或分类进行划分。
4）命令按钮区：
针对整体页面进行操作或者对表格整体进行操作的按钮放置在此区域内；如：导
入、导出、新增等；
按钮的其它细则参见《界面视觉规范》。
5）操作按钮区：
对表格主体的数据进行操作的按钮放置在此区域。如：删除、发布、下架、上架、
审核等；
￥
当列表的数据超过一屏显示时，在列表上方也要显现操作按钮区，方便用户对列
表进行操作；如下图所示：
图6-5操作按钮区
按钮的其它细则参见《界面视觉规范》。
6）翻页区：
当列表中的数据量超过默认的数据显示条数时，应用翻页模式来处理多条数据的
显示；
翻页在列表下方居中显示；
翻页的详细功能和模式参见“翻页模式组件规范”。
《
7）单条数据操作区：
对行数据进行操作的按钮要与操作按钮区的按钮视觉上要有所区分；具体参见
《界面视觉规范》；
尽量不要在此处安排太多的操作，太多的操作给使用者过多的判断负担。应考虑
其他的界面布局方式。
8）表格列标题区：
当表格的数据列较多，屏幕显示已经达到最大限度，而这些数据列又必不可少时，
允许通过鼠标拖动的方式来对数据列的宽度进行改变；同时可以使用横向滚动条；
调整列宽度时，要在整体表格边线内进行，以免整体页面变形；
数据项内容显示部分太长时，省略多余部分并加省略号；鼠标指针停靠时，全部
详细内容显示；
9）数据条目设置区：
默认显示当前页面所能显示的最大数据条目数；如：10条/页；
还要提供几个数值选项，供用户选择；如：20、30、50；
6.2编号和序号
1）编号
用来标识某一个对象的唯一号码。一个编号就代表着一个对象。使用编号能够更
好的帮助用户记忆和或管理对象。如下图所示：
图6-6编号示例
【设计意图】
更好的方便用户记忆和管理对象；
合理的使用编号，能方便用户更好的进行沟通；
【应用条件】
需要用唯一号码来标识对象时；
具有真实、合理、有效的意义；
例如：订单列表中订单的编号、酒店客房管理中客房的实际编号等等；
【模式描述】
应用规范：
编号必需代表一个对象，不要让编号无意义的存在；
如果用户更关注编号，也就是说编号对于用户是第一位的，则必须提供
编号。比如，酒店系统中对房号的关注就比人名要重要，所以编号的视
觉层次应该突出。如果用户不常使用编号而通常更关注别的属性；比如
人名、物品名等，可以默认不显示编号，当用户需要时能够查到编号。
2）序号
序号是用来标识一组有序对象的数字，它具有先后顺序的含义。如下图所示：
图6-7序号示例
【设计意图】
使用户更好了解对象的先后顺序或按一定的顺序去了解对象；
更好的展示有先后顺序的数据；
【应用条件】
需要标识一组有序对象时；
例如：如歌曲排行旁、热销商品排行、点击率排行等设计中；
【模式描述】
应用规范：
序号必需代表一个对象在集体中的序列，不要让序号没有意义。
如果用户关注对象的排列顺序，则必须提供序号。如果用户根本不关注
对象的顺序，请不要使用序号，这样会混淆用户的注意。
图6-8错误示例
6.3注册表单
注册表单应用于对用户的输入格式有一定的要求的设计中，帮助用户更好的完成填写表
单的操作。
【设计意图】
快速高效的帮助用户完成注册；
尽量减少用户犯错；
在用户出错后，友好的有效的告知错误，并提供解决方案；
给用户提供及时有效的反馈信息。
【应用条件】
超过5项表单信息填写修改时；
用户出错的频率较高时；
系统对数据的要求比较严格时；
例如：应用于填写注册信息、修改密码等设计中。
【模式描述】
组成：各输入控件+必填项指示+格式要求提示+对错判断反馈+提交按钮
如下图所示：
图6-9注册表单
应用规范：
表单的设计应该遵循简洁的设计原则。在注册填写时，尽可能的只提供必须填写的选
项给用户，其他非必填项，可以通过选填或者在日后需要时再进行完善的方式来完成。
a)信息输入对错判断：
信息输入正确时，要给与填写正确的反馈；信息输入错误的时候，要给出错误的反馈，
并给出具体的错误原因要高亮反馈，同时注释语位置整体给出反馈提示。如下图所示：
图6-10信息输入对错判断
用户在输入错误时，要针对不同的输入内容给出相应明确的错误提示，必要的时候要
提出简要的解决方法提示。
例如：在用户名填写时，可能出现的错误提示；
您输入的用户名过短！
您输入的用户名中不能包含字符“&（等等）”！
你输入的用户名“xxx”已经被占用,请重新输入！
b)输入格式约定（注释文本）：
当用户需要输入某一项时，相应注释文本才显示出来；
对于表单中的某些内容除了需要给予用户正确填写格式的提示外还需要简要说明填
写的必要性，如下图所示：
图6-11
3)验证码：
验证码中的图示字母是随机产生的，但要注意尽可能避免显示一些不易区分的字母和
数字，让用户难以辨别（如：“0和o”），如下图所示：
图6-12验证码
验证码图示，要求相对清晰容易辨别，验证码的位数控制在4位为最佳；
验证码由系统随机产生，在个别情况下字母和数字可能会难以辨别，此时用户可以点
击链接文字（看不清，换一张）来更换验证码，如下图所示：
图6-13验证码示例
用户在输入框内输入验证码后，要及时给出反馈提示（不要到提交时才给出提示），
如下图所示：
图6-14验证码错误判断
4)提交按钮：
存在验证或提交按钮时，只有所验证或提交的部分输入完毕并且正确后，按钮才能由
置灰状态变为可用状态，如下图所示：
图6-15注册按钮
5)成功告知
表单最终填写提交完成后，要给出“提交成功或注册成功”的相关提示，明确告知用
户此操作正确完成；
6)协议
单击“我接受”意味着：您同意并接受服务协议和隐私声明。
【扩展描述】
应用规范：
1)密码强弱提示
当用户账号的保密性相对较高时，可以应用密码的强弱提示来保证密码的复杂度。
如下图所示：
图6-16密码强弱
在输入密码时，旁边显示注释文本：明确注明密码强弱的规则和提示，如下图所示：
图6-17密码强弱提示
当用户输入的内容错误或不完全正确时，要求提示的反馈信息必须提示明确，同时给
出正确的解决方法，如下图所示：
图6-18密码强弱提示对照表
2)注册进度提示
根据产品的特性，要求用户填写的注册表单较长、步数较多时，需要给出注册的进度
条提示，明确的告知当前注册的进度。
3)分组线
注册内容较长时，要用分组线，对要求用户输入的选项进行分类分隔显示（具体使用
参见“分组线规则”）。
【注意事项】
例如婚介交友等场景当对用户信息要求严格时，可以应用注册向导引导注册过程。
如果表单中需要填写的数据项较多，页面较长，必填项又比较分散且数量较少时，必
须使用行的背景颜色来区分必填项与非必填项。
6.4联系方式
联系方式是对表单中提供给用户填写详细联系方式一种组件规定。
【设计意图】
帮助用户有效、快速的填写联系方式；
减少用户输入错误的几率。
【应用条件】
需要用户填写详细联系方式时。
例如：网上注册，网上购物填写发货地址。
【模式描述】
组成：各输入控件，包括：“国家地区”、“省份”、“城市”、“联系电话”、“传真号码”、
“手机号码”、“联系地址”、“邮政编码”等（根据具体需要再增加）。
图6-19联系方式
应用规范：
“国家地区”、“省份”和“城市”要有连动关系；
“国家地区”：下拉列表选框；
“省份”：下拉列表选框，与选择的国家连动（选择“国家地区”，“省份”下
拉框中选项相应变化）；如果在“省份”中已经选择了直辖市，如“北京”，
则后面的“城市”不用再选，自动置灰；
“城市”：下拉列表选框，与选择的城市连动（选择“省份”，“城市”下拉框
中选项相应变化）。城市下拉列表选项的最后一项为“其他地区”，如下图所
示：
图6-20其他地区
“联系电话”、“传真号码”和“手机号码”必须拆分成几个字段；
“联系电话”：四个输入框字段，分别为：国家代码（可选）—区号—电话号
码—分机号；
“传真号码”：三个输入框字段，分别为：国家代码（可选）—区号—传真电
话；
“手机号码”：两个输入框字段，分别为：国家代码（可选）—手机号；
“国家代码”此项可根据具体产品的销售人群不同自行选择是否保留；
如下图所示：
图6-21正确示例图
图6-22错误示例图
各字段分别与上面的“国家地区”、“省份”、“城市”连动：“国家地区”和“省
份”、“城市”选择后，国家代码和区号自动显示，如下图所示：
图6-23联系方式标注
“联系地址”：一个输入框，等待用户输入文本；
“邮政编码”：一个输入框（6个字符），等待用户输入文本；
除“国家地区”、“省份”和“城市”是只能让用户选择外，其他的输入框均可手
动输入和编辑，用户可以根据自己的需要进行修改。
【扩展描述】
组成：邮政编码帮助如下图所示：
图6-24邮政编码
应用规范：
用户手动输入邮政编码时，系统根据“省份”、“城市”给出一些不同地区邮政编
码的关联提示，供用户参考，
用户选择邮政编码输入框后面“查询邮政编码”链接（如下图所示），可点击打
开新窗口查看本市的邮政编码。
图6-25查询邮政编码
【注意事项】
各输入项的先后顺序，根据各字段的逻辑顺序和参照关系排列的同时，要综合考虑用
户的输入操作（尽量将数字输入的放在一起，将汉字输入的放在一起，以避免用户在
键盘上频繁切换输入位置）；
系统自动提供的电话区号和邮政编码等，必须保证是与国家、省、市相对应的最新的
和准确的数据；
用户用tab键切换不同的输入区域时，输入区域中本来用的数据显示为选中状态（不
清空）。
6.5翻页
翻页模式应用于列表数据条目较多，文章篇幅较长的设计中，来对数据和篇幅进行更好的展
示。翻页可以拆分为以下几部分：基础页码、上下页、首末页、跳转、Ajax拖动条、数据统计；
根据不同的应用场景，可以选择某一部分或几部分组合起来使用。如下图所示：
图6-26翻页
【设计意图】
满足用户在不同场景下的不同需要；
增加操作的易用性；
【应用条件】
列表数据条目较多时；
文章篇幅较长时；
【模式描述】
组成：页码如下图所示：
图6-27页码
应用规范：
页码少于或等于10页时，只显示应该出现的页码数；
鼠标指针经过和按下某个页码区域（此区域高亮反馈），鼠标弹起后页面切换完
成；
当前页的页码在外观上要明显的区分于其它页码，且不再提供页面链接；
已访问过的页码和未访问过的页码要有所区分；
显示当前页码的前4页和后4页；前９页和最后９页除外，默认全部显示；
设计时，页码的可点区域要相对较大，方便点击；如下图所示
图6-28状态标注
【扩展描述】
1)上下页
组成：三角符号，“”作为上一页，以“”作为下一页；如下图所示：
图6-29上下页状态
应用规范：
列表的页数在11页以上时，要提供“”和“”的链接，
“上一页”和“下一页”在不可点击时变为不可用状态；具体不可用状态参见《界
面设计规范》
与其他元素保持适当的间隔距离；参见《界面视觉规范》
2)首末页
组成：三角截止符号（“”首页截止图标，以“”末页截止图标）+文字（首页、末
页），如下图所示：
图6-30首末页
应用规范：
列表的页数在50页以上时，要提供“首页”“末页(326)”的链接；
鼠标指针停靠到首页链接上，有明确的反馈提示，点击鼠标主键，页面切换到首
页，首页变为不可用状态；
鼠标指针停靠到末页链接上，有明确的反馈提示，点击鼠标主键，页面切换至最
后一页，末页变为不可用状态；如下图所示：
图6-31首末页状态标注
末页的链接上要注明最后一页的页码数；
与其他元素保持适当的间隔距离；参见《界面视觉规范》
3)跳转
组成：文字（转到…页）+输入框+下拉图标+页码拖动条+确定按钮如下图所示：
图6-32跳转
应用规范：
页码超过50页时，显示跳转框；
鼠标指针移到跳转输入框上，输入框给出反馈，点击鼠标主键，光标被定位到输
入框中，此时进入可输入状态，输入目标页数，鼠标点击“确定”按钮或“回车
键”，页面刷新后显示信息列表；
鼠标指针移到跳转输入框上，输入框给出反馈，点击输入框右侧的“三角”小标，
下拉出现浮动层，显示出系统默认提供的部分页码，移动鼠标指针到某一页码上，
被选定的页码给出高亮反馈，单击后页面刷新显示信息列表；
用户在输入框中输入数字以外的其它字符时，系统要给出错误提示；如：您输入
的字符错误，请输入数字！（具体提示内容参见“提示语规范”）
用户拖拽滑块移动时，输入框中的页码数值同步变化；
页码输入后可以通过“确定”按钮和“回车”键两种方式。
与其他元素保持适当的间隔距离；参见《界面视觉规范》
3)数据统计
组成：统计提示文字+统计数值+数量单位
如：共7315条
6.6日期输入
1）通过日历选择日期
日历选择是使用日历选择控件进行日期输入。
【设计意图】
使用生活中最常见的日历形式，使得日期输入的形式更加直观；
日历选择形式能够使日期输入更加方便、快捷；
能够减少用户错误输入日期的几率；
【应用条件】
需要进行日期输入时；
年份跨度较小，在10年以内时；例如：2006年
日期显示的一种形式；
需要进行日期区间选择时；
例如：应用于表单中时间的输入、统计查询等设计中；
【模式描述】
组成：输入框+日历的图示+日历显示层如下图所示：
图6-33日历输入
应用规范：
1)日历
日历中必须明确标示出当前系统日期；包括：年、月、日。
如下图所示：
图6-34日历标注
年份和月份选择如下图所示；
图6-35年份和月份选择
默认显示近10年的年份，前10后1；
从当年往上，滑动滚动条，查看到100个年份；往下，查看到10个年份；
点击日历中的月份12个月份全部显示在下拉层中；
当前年份、月份均要区分于其他高亮显示；
2)日期输入
通过键盘输入日期；
当鼠标移至输入框内时，输入框中的内容被全部选中并高亮显示，鼠标移开后
恢复；开始键盘输入时，默认内容将被清空；
如下图所示：
默认状态
鼠标在输入框内点击后
输入日期后
通过日历选择输入日期；
点击日历图标后，输入框、图标及文字均高亮显示，给出用户明确的反馈；
选定日期要高亮显示，同时区分于当前系统日期；如下图所示：
图6-36日历选择
3)错误提示
只允许输入0-9这十个数字；只要用户输入数字，无论几位系统自动按照
“yyyy-mm-dd”的格式显示给用户；当月份和日期超出正常值时，系统给出提示；
如“很抱歉！您输入的月份或日期过大，请重新输入！”
4)显示某一时间点
要求显示当前系统默认时间
不要求显示当前系统默认时间
【扩展描述】
组成：时间段的文本提示+两个日期选择如下图所示：
图6-37一段时间选择
应用规范：
时间段的文本提示“从…至…”；
选定起始时间后，起始时间被回显到日期框内，同时截至日期日历框自动被
打开，不需要用户再次点击，即可选择日期；
2）年份跨度较大时的日期选择
应用于日期选择时的年份会出现跨度较大的设计中，方便快速的帮助用户正确完成时间
格式的输入。适用于出生日期等方面。使得信息反馈及时明确，提示明显易懂，减少了误操
作和重复操作的次数。
【设计意图】
方便用户快速定位年份、月份、日期；
减少用户出错的几率；
符合此类场景下用户的心里预期；
【应用条件】
年份的选择跨度较大，在10-90年之间时；
例如：适用于出生日期等设计中；
【模式描述】
组成：输入框+下拉层+年月日的文本提示整体效果如下图：
图6-38年份选择
应用规范：
1）手动输入
年月日的输入均可以通过键盘操作的方式输入，输入内容范围在0-9十个数字之内；
如下图所示：
未输入
鼠标聚焦到输入框
输入后
2）选择输入
年月日的输入均可以通过鼠标点击出现列表选择的方式输入；
年的选择方式；如下图所示：
图6-39选择年份
默认只提供显示90个年份，当前所在年份不足10年时，未来年份默认置灰显示。
月的输入方式；如下图所示：
图6-40选择月份
日的输入方式；如下图所示：
图6-41选择日期
6.7进度条
应用于用户上网浏览页面、执行数据操作时进行等待时的设计中；
【设计意图】
避免因为等待引起用户的厌烦和误解；
让用户了解应用程序正在执行并且实时了解执行情况，并给出用户有效的即时
反馈；
趣味性的进度条，能增加用户的愉悦性；
【应用条件】
系统需要用户长时间等待时；
上传下载的文件较大时；
等待时间超过5秒钟时；
例如：数据上传下载、页面浏览、文件打开关闭、复制、打印文档等。
【模式描述】
组成：进度单位+进度框如下图所示：
图6-42进度条
应用规范：
根据进度情况逐步显示进度单位，直到进度完成；
进度条的形式参见《界面视觉规范》。
【扩展描述】
1)百分比数值
组成：百分比数值如下图所示：
图6-43百分比数值
应用规范：
根据完成的进度，实时的显示出完成部分的百分数。
执行数据的具体操作时，需要显示百分比数值，为用户显示任务完成信息的实时
对比，
2)“取消”按钮
组成：“取消”按钮如下图所示：
图6-44“取消”按钮
应用规范：
针对某一数据的具体操作时，在等待的过程中，用户可以对操作进行终止操作。
此时需要在进度条的基础添加“取消”按钮，并且此按钮要高亮显示，提示用户
进程中途可以取消。
c)内容提示
组成：内容提示如下图所示：
图6-45内容提示
应用规范：
针对不同的内容，可以添加提示文字，来对进度条进行说明。进度条说明文字后
必须添加“...”表示进行中。如下图所示：
【注意事项】
设计有意思的趣味性的进度条，不但不会让用户反感还会增加用户的愉悦性。
6.8保留图标
用户经常使用的图标，作为专用图标，避免理解上的歧义和误解。
【设计意图】
用户经常使用的图标，作为专用图标，避免理解上的歧义和误解；
【应用条件】
具体应用参见表格中各个图标的具体说明；
【模式描述】
名称图示说明
三角
一侧出现浮动层是应用
存在下拉层时应用
箭头
降序排序时应用
升序排序时应用
置顶
置底
手机手机通知
信封邮件通知
软盘保存
打印机打印
方气泡批注
对勾√正确
叉×错误、关闭
叹号！警告提示
问号帮助说明
钳子设置
竖等于号暂停
圆气泡留言回复等
图6-46保留图标
应用规范：
保留图示的应用范围只能确定在以上几方面，要避免在其它设计中使用。
以上提出了部分的保留图示，在以后的设计中可以根据应用的情况不断完
善和添加；
国际通用的图标必须保持原有意义。
6.9弹出层
1）非独占焦点层
应用于弹出层的信息对产品主界面操作流程没有必然影响的一些非持续性的任务中；如
站内消息、模块设置等。如下图所示：
图6-47非独占焦点层
【设计意图】
适时的友好的提醒告知用户；
【应用条件】
不影响用户的操作流程；
提示信息对用户来说只是参考和辅助作用；
例如：站内消息、模块设置等设计中。
【模式描述】
应用规范：
弹出层的位置需要根据具体操作的位置相应调整；
弹出层可以用鼠标随意拖拽它在屏幕中的显示位置；
主界面的操作不受弹出层的影响；
2）独占焦点层
应用于弹出层的信息对产品主界面操作流程有直接影响的设计中；适用于分权限查看操
作、系统超时、信息发送、接收过程等，如下图所示：
图6-48独占焦点层
【设计意图】
紧急有效的提醒用户；
保护并防止影响用户之前的操作；
【应用条件】
提示信息对用户来说紧急而且特殊；
操作对系统整体后果影响巨大；
例如：适用于分权限查看操作、系统超时、信息发送、接收过程等
【模式描述】
应用规范：
点击弹出层后，直接影响主界面操作流程，此时主页面处于不可用状态；
不可用状态的视觉表现参见《界面视觉规范》
主页面处于不可用状态时，不能进行任何操作；
必须对弹出层进行处理操作后，主界面才可以恢复继续进行其它操作；
弹出层要居中显示；
弹出层不可以用鼠标拖拽，无法变换位置。
3）局部独占焦点层
应用于弹出层的信息对产品主界面的局部操作流程有直接影响的设计中；适用于不同会
员分权限查看、操作某部分信息等；如下图所示：
图6-49局部独占焦点层
【设计意图】
提示信息对用户来说紧急而且特殊；
保护并防止影响用户的某些具体操作；
【应用条件】
提示信息对用户来说紧急而且特殊；
操作对系统局部的影响巨大；
例如：适用于不同会员分权限查看、操作某部分信息等；
【模式描述】
应用规范：
弹出层要显示在局部范围之内，且居中（局部之内）显示；
弹出层不可以用鼠标拖拽，无法变换位置；
点击弹出层后，直接影响主界面局部的操作流程，此时只需将页面的
相应局部置为不可用状态即可；
局部处于不可用状态的部分，不能进行任何操作；
页面其他部分，可以进行正常操作；
必须对弹出层进行处理操作后，局部页面才可以继续进行操作；
6.10搜索
1）模糊搜索
模糊搜索是只要用户知道要查找的大概内容和范围时，给用户提供的按照输入的关键字
进行查询的方式。
【设计意图】
帮助用户正确使用模糊搜索；
帮助用户方便快捷地输入关键词信息；
减少无效输入的几率，提高搜索的准确性。
【应用条件】
用户对于要查找的信息没有具体明确的数据限定时；
例如：查找包含某主题的图书、文章等相关资源。
【模式描述】
组成：搜索输入框+搜索按钮如下图所示：
图6-50模糊搜索
应用规范：
搜索输入框中给出默认的提示文本（如：请输入商品名称关键词），以灰色字体
显示；
提示文本的内容要简洁并能够指导用户查询；
当用户鼠标在输入框内定位（单击）时，提示文本自动清除，等待输入；
当用户鼠标移到输入框外单击时，默认的提示文本重新显示；
点击“搜索”，系统根据输入的关键词搜索出相关内容，要求对搜索结果有相应
文本统计或描述，如：“抱歉，没有找到与“xxxx”相关的信息。请检查输入字
词有无错误。请换用另外的查询字词。请改用较常见的字词。”；或“约有123条
信息符合您的搜索条件，以下是1-15条。”；
搜索结果提示页面规范参见《提示规范文档》。
【扩展描述】
组成：类别选择下拉框
图6-51分类模糊搜索
应用规范：
类别选择下拉框
模糊搜索可以配合另外的精确搜索条件（如：单选、多选等）一起使用；
下拉框中默认显示“全部××”选项，提示用户可以进行选择（如：全部类别）。
2）精确搜索
精确搜索是在搜索的内容可以设定多种组合条件时，提供给用户的按照设定的限定条件
进行查询的方式。
【设计意图】
帮助用户快速有效的完成精确搜索；
默认值帮助用户方便快捷地设定各条件信息，减少无效输入。
【应用条件】
信息量较大，用户很难通过其它途径获知时；
可以通过具体属性缩小搜索范围；
对象包含多个属性。
【模式描述】
组成：各种不同的搜索条件选框+搜索按钮：
图6-52精确搜索
应用规范：
搜索条件要合理，容易理解。
各控件的排列顺序，主要依照该条件的关键程度以及用户对该条件的熟知程度，
其次依照控件的视觉布局效果；
精确搜索根据搜索条件，提供输入框、选择下拉框或单选控件；
在输入框中默认显示文本“不限”；
当用户鼠标在输入框内定位（单击）时，提示文本自动清除，等待输入；
当用户鼠标移到输入框外单击时，默认的提示文本重新显示；
在选择下拉列表框中默认显示选项文字“不限”；
在单选组中默认选中第一项；
点击“搜索”，系统根据输入的关键词搜索出相关内容，要求对搜索结果有相应
文字统计或描述，如：“抱歉，没有找到相关的信息。请检查输入字词有无错误。
请换用另外的查询字词。请改用较常见的字词。”或：“约有123条信息符合您的
搜索条件，以下是1-15条。”；
搜索结果提示页面规范参见《提示规范文档》。
【扩展描述】
组成：标签如图所示：
图6-53分类精确搜索
应用规范：
多类别搜索时，可以使用页签表示不同的类别。默认是第一个页签的搜索条件。页签的顺序
遵循该条件的关键程度以及用户对该条件的熟知程度，其次依照控件的视觉布局效果。
页签
图6-54错误与正确示例
当前选中的类别必须足够明显，并能清晰的表明页签与各搜索项是一体的关系；
不同页签里的搜索项，要与当前页签相符。
应用规范：
可提升为标签的项目包含的选项不应该超过3项（三项以上考虑应用其它的控件
表现，比如下拉选框）；
该选项可作为划分类型，一般为用户进行筛选的第一项条件；
【注意事项】
不强制用户填写哪条或者几条选项，故每一项搜索条件前面不添加任何单选或复
选框；
当高级搜索点击“搜索”后，页面应该在适当位置显示搜索结果，且保留用户刚
刚设置的搜索条件，并且提供“重置”按钮，恢复为默认：
6.11排序
主要应用于分类或者多条数据内容的顺序排列的设计中；通过点击排序图标（置
顶、置底、向上、向下）和拖动排序两种方式共存的方法满足不同用户的操作习惯和
需求。
【设计意图】
让用户简单、直观、快速的达到排序目的；
增加用户参与互动的娱乐性；
满足不同用户的操作习惯；
【应用条件】
数据或分类属于同一级别，数据或分类的顺序可以由用户自行设定时；
例如：适用于商品类别、资讯类别、下载等相关业务的类别和内容的排序
操作中；
【模式描述】
组成：类别名称+排序图标+鼠标拖动效果如下图所示：
图6-55排序
应用规范：
默认排序图标不可用(不可用状态，参见《界面视觉规范》)；如
下图所示：
图6-56排序图标
只有当鼠标选中某一个分类或内容时，排序图标才被激活，处于
可操作状态；同时出现提示“鼠标拖动排序”；如下图所示：
图6-57拖动排序
鼠标经过数据行时，鼠标变为可移动的十字箭头形状；
鼠标选中某一分类后，拖动分类进行排序，此时会有一条基准线
出现，它所在的位置，就是分类要拖放到的目标位置；此时所选
分类的背景变为半透明半模糊状，释放鼠标后，此分类的顺序被
成功变更。如下图所示：
图6-58
选取某一分类后，还可以通过连续点击右侧的排序箭头图标进行
排序操作；对于头尾两个分类不存在置顶、置底操作时，相应图
标也要进行置灰操作；
鼠标经过图标时要有提示，置顶、向上、向下、置底；如下图所
示：
图6-59
当分类或者信息条目过多时（超出一屏显示时），排序箭头则需要
跟随所选排序内容进行上下浮动显示；
6其它规范
1）常用规范
列表（包含了顶部操作按钮栏；固定表头的列表；翻页；）
需求要求：
1、列表标题文字均加粗显示；
2、若列表出现竖向滚动条，则滚动滚动条时，只滚动列表内容，列表表头固定；
3、尽量避免列表出现横向滚动条；
4、若列表内容较多，应支持翻页功能。
筛选项（表单、按钮的布局；）
需求要求：
1、需要支持模糊搜索；
2、部分筛选项需要支持快捷搜索操作，比如科室下拉选择框内输入NK，则出现内
科相关科室名称；
3、按钮风格需要统一；
导航条（头部二级下拉导航条；左侧二级折叠导航条；）
需求要求：
1、导航菜单间的层级关系需直观清晰；
2、如果左侧菜单包含子菜单，需要支持折叠功能，并且包含子菜单的二级菜单需
要在名称前有明显的图标标明；
例如：
3、菜单样式均需要统一，例如指向时的背景、选中时的背景等。
常用表单（如人员信息录入）
需求要求：
1、常用表单内的数据字段名称需要统一，例如：姓名，性别，年龄等；
2、数据验证提示内容需统一；
权限管理页面（多级的权限管理页面布局）
需求要求：
1、操作简便、易操作；
2、外观简洁、容易清楚理解；
3、菜单层级显示直观；
数据字典
需求要求：
1、操作简便、易操作；
2、外观简洁、容易清楚理解；
3、菜单层级显示直观；
4、页面布局样式统一；
登录页面
需求要求：
用户名：
密码：
□记住密码
登录
Copyright©YYYY-YYYY******有限公司***
技术支持：*******
系统登录界面提供以下功能：
1）输入用户名/密码进行登录；如果用户名或密码输入错误，登录失败，在页面内提
示“用户名或密码输入错误”。
2）如输入用户名/密码进行登录，如果用户名或密码输入正确，但验证码输入错误，
在页面内提示“验证码输入错误”。
3）如果是其他原因导致系统无法登录，譬如账号未启用、系统升级等，在页面内提示
具体原因。
4）如果用户名和密码输入正确，则登录成功，进入系统首页；系统自动记录登录的用
户名，避免下次重复输入。
5）记住密码：系统自动记录登录密码。
6）支持在登录首页显示技术支持的联系方式。
2）开发代码规范
LOGO
列表模板页------样板
编辑模板页
Model,DAL,BLL模版
数据访问层Data
~