软件产品标准化设计规范说明.docx

《软件产品标准化设计规范说明.docx》由会员分享，可在线阅读，更多相关《软件产品标准化设计规范说明.docx（47页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、产品标准化设计说明书产品标准化设计说明书V1.0目录1提示规范32验证规范53界面规范54控件规范75组件规范95.1表格95.2编号和序号145.3注册表单165.4联系方式215.5翻页255.6日期输入285.7进度条335.8保留图标355.9弹出层365.10搜索385.11排序436其它规范461）常用规范462）开发代码规范471 提示规范通用提示：序号提示类型提示信息规范对应按钮1）必须选择数据才能进行操作的提示请选择！确定2）必须输入数据才能进行操作的提示请填写！确定3）删除校验可直接删除确实要删除选择的记录吗？ 确定、取消有层级关系（单笔记录）确实要删除选择的及子级吗？不可

2、直接删除（单笔记录）当前记录已，不允许删除！确定当前存在数据，不允许删除！确定当前已被关联，不允许删除！确定批量删除某些记录不允许删除：记录，不允许删除！确定全部允许删除：确实要删除选择的记录吗？确定、取消4）字段超长提示输入字符不允许超出N个字节！确定5）唯一性校验单个字段不允许重复：下的不允许重复!确定双字段不允许重复：下的和不允许重复！6）非空校验可编辑字段的非空校验：请输入！确定不可编辑字段的非空校验：请选择！既可编辑也可选择的情况：请输入！7）特殊字符的校验不允许输入特殊字符：列出特殊字符，并以,隔开确定8）查询无条件的提示请输入查询条件确定9）业务原因无法操作不允许！确定10）数据

3、关联对应的提示当前记录已，不允许！当前记录存在，是否？确定11）日期字段输入错误校验对于YYYY-MM-DD格式：请输入有效日期！确定对于YYYY-MM格式：请输入有效月份！确定12）日期段输入校验XX截止日期不允许早于XX起始日期！确定13）日期有效性校验XX日期必须在SS起止日期（YYYY-MM-DDYYYY-MM-DD）范围内！确定14）数值字段输入错误校验数值有范围限制：请输入从到之间的数值！确定数值必须大于0的情况：必须大于零！确定数值不允许等于0的情况：不允许等于零！确定15）操作失败的提示操作失败，请关闭重试！确定16）等待提示处理中，请稍候确定17）当数据发生改变时的提示信息。

4、提示信息如下图所示确定18）最多支持n级分类提示XXX最多支持n级分类，不允许新增！确定19）退出提示是否要退出系统？确定、取消2 验证规范范围：主要用于表单数据及其它数据的验证提示，例如：身份证与年龄匹配验证等。需验证的对象用途标准化提示语身份证与年龄不相符检查身份证与年龄是否匹配年龄与身份证不符合，请重新输入！密码验证检查密码是否正确密码不正确，请重新输入！用户名检查用户名是否存在1、 用户名存在的情况下，则提示：用户名不正确，请重新输入！2、 用户名不存在的情况下，则提示：用户不存在！字段为空或全是空格检查输入字符串是否为空或者全部都是空格1、 空的情况下，则提示：请填写*！2、 全是空

5、格的情况下，则提示：名称包含空格！手机号码检查输入手机号码是否正确手机号码不正确，请重新输入！电话号码检查输入字符串是否符合国内固话或者传真格式电话号码不正确，请重新输入！日期验证判断是否是日期您输入的日期格式有误！时间验证检查输入字符串是否符合时间格式您输入的时间格式有误！字母数字下划线验证检查输入字符串是否只由英文字母和数字和下划线组成您输入的格式有误！邮箱验证检查输入对象的值是否符合E-Mail格式您输入的邮箱格式有误！数字验证检查输入字符串是否是数字您输入的格式有误！身份证验证检查输入字符串是否符合身份证格式您输入的身份证有误！复选框请选择！单选按钮请选择！特殊字符验证您输入的内容包含

6、非法字符！备注：1、提示语颜色均为红色！ 2、提示语位置均显示在对应的文本输入框后方。3 界面规范序号界面内容规范要求1颜色1、统一色调，采用标准Windows的基本色调，做到与操作系统统一，读取系统标准色表。2、整个界面色彩尽量少的使用类别不同的颜色。除非特殊场合，杜绝使用对比强烈，让人产生憎恶感的颜色。3、同时色调也具有一定的含义，在整个系统中应保持色调含义的一致性，避免同一中颜色在不同的画面中表示不同的意义。2文字表述提示信息、帮助文档文字表达遵循以下准则： 口语化，多用您、请，不要用或少用专业术语，杜绝错别字。断句逗号句号顿号分号的用法， 提示信息比较多的话，应该分段。所有的警告、信息

7、、错误和提示的对话框统一采用提示信息格式。使用统一的语言描述，例如一个关闭退出功能按钮，统一描述为退出，避免使用返回、关闭等描述。3控件选择不要随意使用控件，控件功能要专一，风格统一。如果没有好的控件，则使用标准控件。1、控件的风格统一。2、同一类型的控件操作方式相同，避免出现一个控件双击可以执行某些动作，而同样控件，双击却没有任何反映。一个控件只做单一功能，尽量不复用。4顺序习惯用法，阅读顺序，从左到右，从上到下。5一致性用词、配色、按钮、字体等前后均要保持一致性。6文字对齐患者、申请医生、会诊专家等姓名字段，按三个字的姓名两端对齐，三个字以上的姓名左对齐即可。例如：张三张三丰张三丰子7内容

8、显示所有列表均按1024768的分辨率固定每列的宽度。根据页面内容和字体大小进行设计即可，字段的长度如果超过列宽的，不能显示的部分已省略号代替，当鼠标在该字段上面停放时，显示全部内容，例如：8文字链接可链接的文字均采用蓝色字体，鼠标放置时显示下划线。9统计报表 所有报表支持打印，导出为Excel。 打印时支持打印预览，可以先浏览页面布局，再点击“打印”按钮才进行打印。 如报表中的值为0，则显示为“-”。 对齐：序号居中显示，表示值的数字使用千分位分隔符并且右对齐，文字左对齐。 所有列表均按1024768的分辨率固定每列的宽度。根据页面内容和字体大小进行设计即可，字段的长度如果超过列宽的，不能显

9、示的部分用省略号代替，当鼠标在该字段上面停放时，显示全部内容。 列标题加粗，用有颜色的底纹进行标识，如果可以点击时，添加下划线，字体用蓝色。 提供分页功能 导出的报表中，如有些值是计算出来的结果，则在导出的报表中显示公式。 合计的值用粗体，进行区分显示10列表滚动条当页面出现竖向滚动条时，滚动条需控制在列表内，滚动时，列表标题不动，只滚动内容。11图片资源1、 退出按钮：2、 保存按钮：或3、 新建按钮：或4、 打开按钮：5、 下个环节：6、 上个环节：7、 打印按钮：或8、 打印预览：或9、 刷新按钮：10、 查询按钮：11、 复制按钮：12、 粘贴按钮：13、 取消按钮：14、 删除按钮：

10、备注：后期软件需求基础设计均以此为主作为参考。4 控件规范序号控件名称控件说明及样式1附件上传备注：支持进度条及上传百分比显示。例如：2图片上传当鼠标指向图片时显示“修改头像”，点击可打开上传图片。例如：3分页控件1) 提供首页、末页、上一页、下一页、跳转到指定页面的功能；当只有1页时，链接均无效；当处于第1页或最后一页时，首页/上一页或下一页/末页的链接无效。2) 提供设置每页显示指定条数的功能，后台可配置指定条数的选项,如20、50、100。3) 列表上方与下方均需提供分页栏。例如：4时间控件以YYYY-MM-DD格式显示，不足两位的以0补齐，譬如：2011-04-08。例如： 5文本编辑

11、框功能包括：字体选择、字体大小、加粗、斜体、下划线、引号、括号、无序列表、有序列表、插入图片、插入视频、清除格式。系统文本编辑框均采用以下样式实现。6树形控件 备注：后期软件需求基础设计均以此为主作为参考。5 组件规范5.1 表格主要应用于大批量数据的展示、查看、维护等方面。基础表格是表格本身最原始的一些属性集合，针对表格在不同场景下的状况，在扩展设计中会一一罗列出来。【设计意图】 合理有效的组织数据信息； 帮助用户快速、有效的查看表格数据； 帮助用户快速、准确的完成对表格的操作；【应用条件】 适用于批量数据的展示和维护；【模式描述】组成： 表格标题 + 表格表头+ 表格行间隔线 + 表格行如

12、下图所示：图 51 基础表格应用规范：l 表格的标题：标题文字要与其它文字有所区别，如：加粗显示；标题文字内容以“内容+操作”的形式描述，标题文字前需要有相应的标题图标，文字与图标之间间隔一定的距离，如：一个半角空格。l 表格的表头与表格主体在外观上要有区分；l 表格行间隔线：表格的主体内容用表格线区分；表格线的粗细要适中，如1px。 【扩展描述】 根据应用场景的不同，可以对基础表格进行扩展；可以为表格增加数据筛选区、命令按钮区、操作按钮区、表格主体区、翻页区、操作按钮区。整体效果如下图所示：图 52 表格操作区分布1）标题列排序： l 表格列标题可以排序时，表格的列标题要体现出当前排序状态，

13、并要区分于其他列标题显示，如：背景和图标高亮显示； 如下图所示： 图 53 标题列排序l 表格列标题进行切换时，原列标题恢复初始状态，切换到的列标题显示为排序状态；2）表格行选中操作：l 表格中的第一列，既可表示对行的选择如复选框；同时还可以用图标标示数据状态；当两者都有时，显示复选框在上，图标被覆盖；l 在对表格行进行选中（点选行的任意位置即可选中）时，此行要高亮显示，同时此行前复选框为选中状态，同时还可以进行多行选择；需要全选时，只需勾选列标题中的复选框即可选中当前列表的全部行数据。3）数据筛选区： l 当数据内容可以明确的按其状态、类别进行划分时，可以应用页签的形式来进行设计；l 页签总

14、宽度在表格宽度的75%之内为佳，超出此范围时，需应用其他设计形式如下拉框显示的形式等； 如下图所示： 图 54 数据筛选区l 当前分类状态的的页签要高亮显示，要明显区别于其他页签；l 页签内的文字，需要简单明了，相同内容的文字省略；如上图中未处理（订单）、处理中（订单）、处理完成（订单）；l 应用页签设计时，页签类别要划分明确合理；如按照数据状态或分类进行划分。4）命令按钮区： l 针对整体页面进行操作或者对表格整体进行操作的按钮放置在此区域内；如：导入、导出、新增等；l 按钮的其它细则参见界面视觉规范。5）操作按钮区： l 对表格主体的数据进行操作的按钮放置在此区域。如：删除、发布、下架、上

15、架、审核等；l 当列表的数据超过一屏显示时，在列表上方也要显现操作按钮区，方便用户对列表进行操作；如下图所示：图 55 操作按钮区l 按钮的其它细则参见界面视觉规范。6）翻页区： l 当列表中的数据量超过默认的数据显示条数时，应用翻页模式来处理多条数据的显示；l 翻页在列表下方居中显示；l 翻页的详细功能和模式参见“翻页模式组件规范”。7）单条数据操作区： l 对行数据进行操作的按钮要与操作按钮区的按钮视觉上要有所区分；具体参见界面视觉规范；l 尽量不要在此处安排太多的操作，太多的操作给使用者过多的判断负担。应考虑其他的界面布局方式。8）表格列标题区： l 当表格的数据列较多，屏幕显示已经达到

16、最大限度，而这些数据列又必不可少时，允许通过鼠标拖动的方式来对数据列的宽度进行改变；同时可以使用横向滚动条；l 调整列宽度时，要在整体表格边线内进行，以免整体页面变形；l 数据项内容显示部分太长时，省略多余部分并加省略号；鼠标指针停靠时，全部详细内容显示；9）数据条目设置区： l 默认显示当前页面所能显示的最大数据条目数；如：10条/页；l 还要提供几个数值选项，供用户选择；如：20、30、50； 47 / 475.2 编号和序号1）编号用来标识某一个对象的唯一号码。一个编号就代表着一个对象。 使用编号能够更好的帮助用户记忆和或管理对象。如下图所示： 图 56 编号示例【设计意图】 更好的方便

17、用户记忆和管理对象； 合理的使用编号，能方便用户更好的进行沟通；【应用条件】 需要用唯一号码来标识对象时； 具有真实、合理、有效的意义；例如：订单列表中订单的编号、酒店客房管理中客房的实际编号等等；【模式描述】应用规范：l 编号必需代表一个对象，不要让编号无意义的存在；l 如果用户更关注编号，也就是说编号对于用户是第一位的，则必须提供编号。比如，酒店系统中对房号的关注就比人名要重要，所以编号的视觉层次应该突出。如果用户不常使用编号而通常更关注别的属性；比如人名、物品名等，可以默认不显示编号，当用户需要时能够查到编号。2）序号序号是用来标识一组有序对象的数字，它具有先后顺序的含义。如下图所示：

18、图 57 序号示例【设计意图】 使用户更好了解对象的先后顺序或按一定的顺序去了解对象； 更好的展示有先后顺序的数据；【应用条件】 需要标识一组有序对象时；例如：如歌曲排行旁、热销商品排行、点击率排行等设计中；【模式描述】应用规范：l 序号必需代表一个对象在集体中的序列，不要让序号没有意义。l 如果用户关注对象的排列顺序，则必须提供序号。如果用户根本不关注对象的顺序，请不要使用序号，这样会混淆用户的注意。图 58 错误示例5.3 注册表单注册表单应用于对用户的输入格式有一定的要求的设计中，帮助用户更好的完成填写表单的操作。【设计意图】 快速高效的帮助用户完成注册； 尽量减少用户犯错； 在用户出错

19、后，友好的有效的告知错误，并提供解决方案； 给用户提供及时有效的反馈信息。【应用条件】 超过5项表单信息填写修改时； 用户出错的频率较高时； 系统对数据的要求比较严格时；例如：应用于填写注册信息、修改密码等设计中。【模式描述】组成：各输入控件 + 必填项指示 + 格式要求提示 + 对错判断反馈 + 提交按钮 如下图所示：图 59 注册表单应用规范：表单的设计应该遵循简洁的设计原则。在注册填写时，尽可能的只提供必须填写的选项给用户，其他非必填项，可以通过选填或者在日后需要时再进行完善的方式来完成。a) 信息输入对错判断：信息输入正确时，要给与填写正确的反馈；信息输入错误的时候，要给出错误的反馈，

20、并给出具体的错误原因要高亮反馈，同时注释语位置整体给出反馈提示。如下图所示：图 510 信息输入对错判断用户在输入错误时，要针对不同的输入内容给出相应明确的错误提示，必要的时候要提出简要的解决方法提示。例如：在用户名填写时，可能出现的错误提示；您输入的用户名过短！您输入的用户名中不能包含字符“&（等等）”！你输入的用户名“xxx”已经被占用,请重新输入！b) 输入格式约定（注释文本）： 当用户需要输入某一项时，相应注释文本才显示出来； 对于表单中的某些内容除了需要给予用户正确填写格式的提示外还需要简要说明填写的必要性，如下图所示：图 5113) 验证码： 验证码中的图示字母是随机产生的，但要注

21、意尽可能避免显示一些不易区分的字母和数字，让用户难以辨别（如：“0和o”），如下图所示： 图 512 验证码 验证码图示，要求相对清晰容易辨别，验证码的位数控制在4位为最佳； 验证码由系统随机产生，在个别情况下字母和数字可能会难以辨别，此时用户可以点击链接文字（看不清，换一张）来更换验证码，如下图所示： 图 513验证码示例 用户在输入框内输入验证码后，要及时给出反馈提示（不要到提交时才给出提示），如下图所示： 图 514验证码错误判断4) 提交按钮： 存在验证或提交按钮时，只有所验证或提交的部分输入完毕并且正确后，按钮才能由置灰状态变为可用状态，如下图所示：图 515 注册按钮5) 成功告知

22、 表单最终填写提交完成后，要给出“提交成功或注册成功”的相关提示，明确告知用户此操作正确完成；6) 协议 单击“我接受”意味着：您同意并接受服务协议和隐私声明。 【扩展描述】应用规范：1) 密码强弱提示 当用户账号的保密性相对较高时，可以应用密码的强弱提示来保证密码的复杂度。如下图所示：图 516密码强弱 在输入密码时，旁边显示注释文本：明确注明密码强弱的规则和提示，如下图所示：图 517 密码强弱提示 当用户输入的内容错误或不完全正确时，要求提示的反馈信息必须提示明确，同时给出正确的解决方法，如下图所示： 图 518 密码强弱提示对照表2) 注册进度提示 根据产品的特性，要求用户填写的注册表

23、单较长、步数较多时，需要给出注册的进度条提示，明确的告知当前注册的进度。3) 分组线注册内容较长时，要用分组线，对要求用户输入的选项进行分类分隔显示（具体使用参见“分组线规则”）。【注意事项】 例如婚介交友等场景当对用户信息要求严格时，可以应用注册向导引导注册过程。 如果表单中需要填写的数据项较多，页面较长，必填项又比较分散且数量较少时，必须使用行的背景颜色来区分必填项与非必填项。5.4 联系方式联系方式是对表单中提供给用户填写详细联系方式一种组件规定。【设计意图】 帮助用户有效、快速的填写联系方式； 减少用户输入错误的几率。【应用条件】 需要用户填写详细联系方式时。例如：网上注册，网上购物填

24、写发货地址。【模式描述】组成：各输入控件，包括：“国家地区”、“省份”、“城市”、“联系电话”、“传真号码”、“手机号码”、“联系地址”、“邮政编码”等（根据具体需要再增加）。 图 519 联系方式应用规范：l “国家地区”、“省份”和“城市”要有连动关系； “国家地区”：下拉列表选框； “省份”：下拉列表选框，与选择的国家连动（选择“国家地区”，“省份”下拉框中选项相应变化）；如果在“省份”中已经选择了直辖市，如“北京”，则后面的“城市”不用再选，自动置灰； “城市”：下拉列表选框，与选择的城市连动（选择“省份”，“城市”下拉框中选项相应变化）。城市下拉列表选项的最后一项为“其他地区”，如下

25、图所示：图 520 其他地区l “联系电话”、“传真号码”和“手机号码”必须拆分成几个字段； “联系电话”：四个输入框字段，分别为：国家代码（可选）区号电话号码分机号； “传真号码”：三个输入框字段，分别为：国家代码（可选）区号传真电话； “手机号码”：两个输入框字段，分别为：国家代码（可选）手机号； “国家代码”此项可根据具体产品的销售人群不同自行选择是否保留；如下图所示：图 521正确示例图图 522错误示例图l 各字段分别与上面的“国家地区”、“省份”、“城市”连动：“国家地区”和“省份”、“城市”选择后，国家代码和区号自动显示，如下图所示：图 523 联系方式标注l “联系地址”：一个

26、输入框，等待用户输入文本；l “邮政编码”：一个输入框（6个字符），等待用户输入文本；l 除“国家地区”、“省份”和“城市”是只能让用户选择外，其他的输入框均可手动输入和编辑，用户可以根据自己的需要进行修改。【扩展描述】组成：邮政编码帮助 如下图所示：图 524 邮政编码应用规范： l 用户手动输入邮政编码时，系统根据“省份”、“城市”给出一些不同地区邮政编码的关联提示，供用户参考，l 用户选择邮政编码输入框后面“查询邮政编码”链接（如下图所示），可点击打开新窗口查看本市的邮政编码。图 525 查询邮政编码【注意事项】 各输入项的先后顺序，根据各字段的逻辑顺序和参照关系排列的同时，要综合考虑用

27、户的输入操作（尽量将数字输入的放在一起，将汉字输入的放在一起，以避免用户在键盘上频繁切换输入位置）； 系统自动提供的电话区号和邮政编码等，必须保证是与国家、省、市相对应的最新的和准确的数据； 用户用tab键切换不同的输入区域时，输入区域中本来用的数据显示为选中状态（不清空）。5.5 翻页翻页模式应用于列表数据条目较多，文章篇幅较长的设计中，来对数据和篇幅进行更好的展示。翻页可以拆分为以下几部分：基础页码、上下页、首末页、跳转、Ajax 拖动条、数据统计；根据不同的应用场景，可以选择某一部分或几部分组合起来使用。如下图所示： 图 526 翻页【设计意图】 满足用户在不同场景下的不同需要； 增加操

28、作的易用性；【应用条件】 列表数据条目较多时； 文章篇幅较长时；【模式描述】组成：页码 如下图所示：图 527页码 应用规范：l 页码少于或等于10页时，只显示应该出现的页码数； l 鼠标指针经过和按下某个页码区域（此区域高亮反馈），鼠标弹起后页面切换完成；l 当前页的页码在外观上要明显的区分于其它页码，且不再提供页面链接；l 已访问过的页码和未访问过的页码要有所区分；l 显示当前页码的前4页和后4页；前页和最后页除外，默认全部显示；l 设计时，页码的可点区域要相对较大，方便点击；如下图所示 图 528状态标注【扩展描述】1) 上下页 组成：三角符号，“”作为上一页，以“”作为下一页；如下图所

29、示：图 529 上下页状态应用规范：l 列表的页数在11页以上时，要提供“”和“”的链接，l “上一页”和“下一页”在不可点击时变为不可用状态；具体不可用状态参见界面设计规范l 与其他元素保持适当的间隔距离；参见界面视觉规范2) 首末页组成：三角截止符号（“”首页截止图标，以“”末页截止图标）+ 文字（首页、末页），如下图所示： 图 530 首末页 应用规范：l 列表的页数在50页以上时，要提供“首页”“末页(326)”的链接；l 鼠标指针停靠到首页链接上，有明确的反馈提示，点击鼠标主键，页面切换到首页，首页变为不可用状态； l 鼠标指针停靠到末页链接上，有明确的反馈提示，点击鼠标主键，页面切

30、换至最后一页，末页变为不可用状态；如下图所示：图 531 首末页状态标注l 末页的链接上要注明最后一页的页码数； l 与其他元素保持适当的间隔距离；参见界面视觉规范3) 跳转组成：文字（转到页）+输入框+下拉图标+页码拖动条+确定按钮 如下图所示：图 532 跳转应用规范：l 页码超过50页时，显示跳转框； l 鼠标指针移到跳转输入框上，输入框给出反馈，点击鼠标主键，光标被定位到输入框中，此时进入可输入状态，输入目标页数，鼠标点击“确定”按钮或“回车键”，页面刷新后显示信息列表；l 鼠标指针移到跳转输入框上，输入框给出反馈，点击输入框右侧的“三角”小标，下拉出现浮动层，显示出系统默认提供的部分

31、页码，移动鼠标指针到某一页码上，被选定的页码给出高亮反馈，单击后页面刷新显示信息列表；l 用户在输入框中输入数字以外的其它字符时，系统要给出错误提示；如：您输入的字符错误，请输入数字！（具体提示内容参见“提示语规范”）l 用户拖拽滑块移动时，输入框中的页码数值同步变化；l 页码输入后可以通过“确定”按钮和“回车”键两种方式。l 与其他元素保持适当的间隔距离；参见界面视觉规范3) 数据统计 组成：统计提示文字 + 统计数值 + 数量单位 如：共7315条5.6 日期输入1）通过日历选择日期日历选择是使用日历选择控件进行日期输入。【设计意图】 使用生活中最常见的日历形式，使得日期输入的形式更加直观

32、； 日历选择形式能够使日期输入更加方便、快捷； 能够减少用户错误输入日期的几率；【应用条件】 需要进行日期输入时； 年份跨度较小，在10年以内时；例如：2006年 日期显示的一种形式； 需要进行日期区间选择时；例如：应用于表单中时间的输入、统计查询等设计中；【模式描述】组成：输入框 + 日历的图示 + 日历显示层 如下图所示：图 533 日历输入应用规范：1) 日历l 日历中必须明确标示出当前系统日期；包括：年、月、日。如下图所示：图 534 日历标注l 年份和月份选择 如下图所示；图 535 年份和月份选择l 默认显示近10年的年份，前10后1；l 从当年往上，滑动滚动条，查看到100个年份

33、；往下，查看到10个年份；l 点击日历中的月份12个月份全部显示在下拉层中；l 当前年份、月份均要区分于其他高亮显示；2) 日期输入l 通过键盘输入日期；当鼠标移至输入框内时，输入框中的内容被全部选中并高亮显示，鼠标移开后恢复；开始键盘输入时，默认内容将被清空；如下图所示：默认状态鼠标在输入框内点击后输入日期后l 通过日历选择输入日期；点击日历图标后，输入框、图标及文字均高亮显示，给出用户明确的反馈；选定日期要高亮显示，同时区分于当前系统日期；如下图所示： 图 536 日历选择3) 错误提示只允许输入0-9这十个数字；只要用户输入数字，无论几位系统自动按照“yyyy-mm-dd”的格式显示给用

34、户；当月份和日期超出正常值时，系统给出提示；如“很抱歉！您输入的月份或日期过大，请重新输入！”4) 显示某一时间点要求显示当前系统默认时间不要求显示当前系统默认时间【扩展描述】组成：时间段的文本提示 + 两个日期选择 如下图所示：图 537 一段时间选择应用规范：l 时间段的文本提示“从至”；l 选定起始时间后，起始时间被回显到日期框内 ，同时截至日期日历框自动被打开，不需要用户再次点击，即可选择日期； 2）年份跨度较大时的日期选择应用于日期选择时的年份会出现跨度较大的设计中，方便快速的帮助用户正确完成时间格式的输入。适用于出生日期等方面。使得信息反馈及时明确，提示明显易懂，减少了误操作和重复

35、操作的次数。【设计意图】 方便用户快速定位年份、月份、日期； 减少用户出错的几率； 符合此类场景下用户的心里预期；【应用条件】 年份的选择跨度较大，在10-90年之间时；例如：适用于出生日期等设计中；【模式描述】组成：输入框 +下拉层 + 年月日的文本提示 整体效果如下图：图 538 年份选择应用规范：1）手动输入年月日的输入均可以通过键盘操作的方式输入，输入内容范围在0-9十个数字之内；如下图所示：未输入鼠标聚焦到输入框输入后2）选择输入年月日的输入均可以通过鼠标点击出现列表选择的方式输入；年的选择方式；如下图所示：图 539 选择年份默认只提供显示90个年份，当前所在年份不足10年时，未来

36、年份默认置灰显示。月的输入方式；如下图所示：图 540 选择月份日的输入方式；如下图所示：图 541 选择日期5.7 进度条应用于用户上网浏览页面、执行数据操作时进行等待时的设计中； 【设计意图】 避免因为等待引起用户的厌烦和误解； 让用户了解应用程序正在执行并且实时了解执行情况，并给出用户有效的即时反馈； 趣味性的进度条，能增加用户的愉悦性；【应用条件】 系统需要用户长时间等待时； 上传下载的文件较大时； 等待时间超过5秒钟时；例如：数据上传下载、页面浏览、文件打开关闭、复制、打印文档等。【模式描述】组成：进度单位+进度框 如下图所示：图 542 进度条应用规范：l 根据进度情况逐步显示进度

37、单位，直到进度完成；l 进度条的形式参见界面视觉规范。【扩展描述】1) 百分比数值组成：百分比数值 如下图所示：图 543 百分比数值应用规范：l 根据完成的进度，实时的显示出完成部分的百分数。l 执行数据的具体操作时，需要显示百分比数值，为用户显示任务完成信息的实时对比，2)“取消”按钮组成：“取消”按钮 如下图所示：图 544 “取消”按钮应用规范：l 针对某一数据的具体操作时，在等待的过程中，用户可以对操作进行终止操作。此时需要在进度条的基础添加“取消”按钮，并且此按钮要高亮显示，提示用户进程中途可以取消。c)内容提示组成：内容提示 如下图所示： 图 545 内容提示应用规范：l 针对不

38、同的内容，可以添加提示文字，来对进度条进行说明。进度条说明文字后必须添加“.”表示进行中。如下图所示：【注意事项】 设计有意思的趣味性的进度条，不但不会让用户反感还会增加用户的愉悦性。5.8 保留图标 用户经常使用的图标，作为专用图标，避免理解上的歧义和误解。【设计意图】 用户经常使用的图标，作为专用图标，避免理解上的歧义和误解；【应用条件】 具体应用参见表格中各个图标的具体说明；【模式描述】名称图示说明三角一侧出现浮动层是应用存在下拉层时应用箭头降序排序时应用升序排序时应用置顶置底手机手机通知信封邮件通知软盘保存打印机打印方气泡批注对勾正确叉错误、关闭叹号！警告提示问号？帮助说明钳子设置竖等

39、于号暂停圆气泡留言回复等图 546 保留图标应用规范：l 保留图示的应用范围只能确定在以上几方面，要避免在其它设计中使用。l 以上提出了部分的保留图示，在以后的设计中可以根据应用的情况不断完善和添加；l 国际通用的图标必须保持原有意义。5.9 弹出层1）非独占焦点层应用于弹出层的信息对产品主界面操作流程没有必然影响的一些非持续性的任务中；如站内消息、模块设置等。如下图所示：图 547 非独占焦点层【设计意图】 适时的友好的提醒告知用户；【应用条件】 不影响用户的操作流程； 提示信息对用户来说只是参考和辅助作用；例如：站内消息、模块设置等设计中。【模式描述】应用规范：l 弹出层的位置需要根据具体

40、操作的位置相应调整；l 弹出层可以用鼠标随意拖拽它在屏幕中的显示位置；l 主界面的操作不受弹出层的影响；2）独占焦点层应用于弹出层的信息对产品主界面操作流程有直接影响的设计中；适用于分权限查看操作、系统超时、信息发送、接收过程等，如下图所示：图 548 独占焦点层 【设计意图】 紧急有效的提醒用户； 保护并防止影响用户之前的操作；【应用条件】 提示信息对用户来说紧急而且特殊； 操作对系统整体后果影响巨大；例如：适用于分权限查看操作、系统超时、信息发送、接收过程等【模式描述】应用规范：l 点击弹出层后，直接影响主界面操作流程，此时主页面处于不可用状态；l 不可用状态的视觉表现参见界面视觉规范l

41、主页面处于不可用状态时，不能进行任何操作；l 必须对弹出层进行处理操作后，主界面才可以恢复继续进行其它操作；l 弹出层要居中显示；l 弹出层不可以用鼠标拖拽，无法变换位置。3）局部独占焦点层应用于弹出层的信息对产品主界面的局部操作流程有直接影响的设计中；适用于不同会员分权限查看、操作某部分信息等；如下图所示：图 549 局部独占焦点层【设计意图】 提示信息对用户来说紧急而且特殊； 保护并防止影响用户的某些具体操作；【应用条件】 提示信息对用户来说紧急而且特殊； 操作对系统局部的影响巨大；例如：适用于不同会员分权限查看、操作某部分信息等；【模式描述】应用规范：l 弹出层要显示在局部范围之内，且居

42、中（局部之内）显示；l 弹出层不可以用鼠标拖拽，无法变换位置；l 点击弹出层后，直接影响主界面局部的操作流程，此时只需将页面的相应局部置为不可用状态即可；l 局部处于不可用状态的部分，不能进行任何操作；l 页面其他部分，可以进行正常操作；l 必须对弹出层进行处理操作后，局部页面才可以继续进行操作；5.10 搜索1）模糊搜索模糊搜索是只要用户知道要查找的大概内容和范围时，给用户提供的按照输入的关键字进行查询的方式。【设计意图】 帮助用户正确使用模糊搜索； 帮助用户方便快捷地输入关键词信息； 减少无效输入的几率，提高搜索的准确性。【应用条件】 用户对于要查找的信息没有具体明确的数据限定时；例如：查找包含某主题的图书、文章等相