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

1、产品标准化设计说明书V1.0目录1 提示规范32 验证规范43 界面规范 54 控件规范75 组件规范85.1 表格85.2 编号和序号135.3 注册表单155.4 联系方式195.5 翻页245.6 日期输入275.7 进度条325.8 保留图标345.9 弹出层355.10 搜索375.11 排序426其它规范 451）常用规范452）开发代码规范461提示规范通用提示:序号提示类型提示信息规范对应按钮1)必须选择数据才能进行操作的提 示请选择xxx!R确定12)必须输入数据才能进行操作的提 示请填写xxx!R确定1可直接删 除确实要删除选择的记 录吗？有层级夫 系（单笔 记录）确实要删

2、除选择的X X及子级XX吗?R取消3)删除校验当前记录已XX,不 允许删除！R确定1个口JH债 删除（单 笔记录）当前X X存在X X数 据，不允许删除！R确定1当前X X已被X X关 联，不允许删除！R确定1批量删除某些记录不允许删 除：XX记录，不允 许删除！R确定1全部允许删除：确实 要删除选择的记录 吗？R确定1R取消、4)字段超长提示输入字符不允许超出N个字节！R确定15)唯一性校验单个字段不允许重 复：XX下的字段名 称不允许重复！R确定1双字段不允许重复： XX下的字段名称 1和字段名称 2不 允许重复！6)非空校验可编辑字段的非空校 验：请输入字段名 称！R确定1不可编辑字段的

3、非空 校验：请选择字段名 称！既可编辑也可选择的情况：请输入字段名称！7)特殊字符的校验不允许输入特殊字符：列出特殊字符，并以， 隔开R确定18)查询无条件的提示请输入查询条件R确定19)业务原因无法操作XXXX不允许按 钮名称!R确定110)数据关联对应的提示当前记录已XX,不 允许XXX !当前记录存在X X X X,是否XX?R确定111)日期字段输入错误校验对于YYYY-MM-D潞 式：请输入有效日期！R确定1对于YYYY-M超式：请输入有效月份！R确定112)日期段输入校验XX截止日期不允许 早于XX起始日期！R确定113)日期有效性校验XX日期必须在SS起 止日期(YYYY-MM-

4、DD YYYY-MM-DDE围内！R确定114)数值字段输入错误校验数值有范围限制：请 输入从X X X到X X X之间的数值！R确定1数值必须大于0的情 况：字段名称 必须 大于零！R确定1数值不允许等于0的 情况：字段名称 不 允许等于零！R确定115)操作失败的提示操作失败，请关闭重 试！R确定116)等待提不处理中，请稍候R确定I117)当数据发生改变时的提示信息。提示信息如卜图所不R确定18)最多支持n级分类提示XXX最多支持n级分 类，不允许新增！R确定119)退出提示是否要退出系统？R确定1R取消、2验证规范范围：主要用于表单数据及其它数据的验证提示，例如：身份证与年龄匹配验证等

5、。需验证的对象用途标准化提示语身份证与年龄不相符检查身份证与年龄是否匹配年龄与身份证不符合，请重新输入！密码验证检查密码是否止确管他不止确，请重新输入！用户名检查用户名是否存在1、用户名存在的情况下，则提示：用户 名小止确，请重新输入！2、用户名不存在的情况下，则提示：用 户不存在！字段为空或全是空格检查输入字符串是否为空或者全部都是空 格1、 空的情况下，则提示：请填写* !2、 全是空格的情况下， 则提示：名称包含空格！手机号码检查输入手机号码是否止确手机万他不止确，请重新输入！电话号码检查输入字符串是否符合国内固话或者传 真格式电话勺他不止确，诂重新输入！日期验证判断是否是日期您输入的日

6、期格式有误！时间验证检查输入字符串是否符合时间格式您输入的时间格式有误！字母数字下划线验证检查输入字符串是否只由英文字母和数字 和下划线组成您输入的格式有误！邮箱验证检查输入对象的值是否符合E-Mail格式您输入的邮箱格式有误！数字验证检查输入字符串是否是数字您输入的格式有误！身份证验证检查输入字符串是否符合身份证格式您输入的身份证有误！复选框请选择！单选按钮请选择！特殊字符验证您输入的内容包含非法字符！备注：1、提示语颜色均为红色！2、提示语位置均显示在对应的文本输入框后方。3界面规范序号界面内容规范要求1颜色1、纭-色调，米用标准 Windows的基本色调，做到与操作系统纭读取系统标准色表

7、。2、整个界面色彩尽量少的使用类别不向的颜色。除非特殊场合，杜绝使用对比强烈，让人产 生，憎恶感的颜色。3、同时色调也具有一定的含义，在整个系统中应保持色调含义的一致性，避免同一中颜色在小何的回向中表7K不同的意义。2文字表述提示信息、帮助文档义字表达遵循以下准则：口语化，多用您、请，不要用或少用专业术语，杜绝错别字。断句逗号句号顿号分号的用法，提示信息比较多的话，应该分段。所有的警告、信息、错误和提示的对话框统一采用提示信息格式。使用统一的语言描述，例如一个关闭退出功能按钮，统一描述为退出，避免使用返回、关闭 等描述。3控件选择不要随意使用控件，控件功能要专一，风格统一。如果没有好的控件，则

8、使用标准控件。1、控件的风格统一。2、同一类型的控件操作方式相同，避免出现一个控件双击可以执行某些动作，而同样控件， 双击却没有任何反映。一个控件只做单一功能，尽量不复用。4顺序习惯用法，阅读顺序，从左到右，从上到下。5一B性用词、配色、按钮、字体等前后均要保持一致性。6文字对齐患者、申请医生、会诊专家等姓名字段，按三个字的姓名两端对齐，三个字以上的姓名左对齐即可。例如：张三张三丰张二丰子7内容显示所有列表均按1024X 768的分辨率固定每列的宽度。根据页面内容和字体大小进行设计即可， 字段的长度如果超过列宽的，不能显示的部分已省略号代替，当鼠标在该字段上面停放时， 显示全部内容，例如：全国

9、基层卫生和新农舍工作议新闻稿之六 张茅；各级卫生部门珏*市1rTy一7TF全日上刁目基层卫生和新农合工作金议新闻稿之六张茅 口生部门要结合创先争优活动大力推动基层卫生K平8文字链接可链接的文字均米用蓝色字体，鼠标放置时显示卜划线。9统计报表所有报表支持打印，导出为 Excel。打印时支持打印预览，可以先浏览页面布局，再点击“打印”按钮才进行打印。如报表中的值为0,则显示为“-”。对齐：序号居中显示，表示值的数字使用千分位分隔符并且右对齐，文字左对齐。所有列表均按1024X 768的分辨率固定每列的宽度。根据页面内容和字体大小进行设计 即可，字段的长度如果超过列宽的，不能显示的部分用省略号代替，

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

11、 删除按钮：X备注：后期软件需求基础设计均以此为主作为参考。4控件规范序号控件名称控件说明及样式1附件上传备注：支持进度条及上传百分比显示。例如：p linn 3 战）2图片上传兰伤2*I修改头像显示“修改头像”，点击可打开上传图片。I3分页控件1）提供首页、末页、上一页、下一页、跳转到指定页面的功能；当只有1页时，链接均无效；当处于第1页或最舟-页时，首页/上一页或下一页/末页的链接无效。2）提供设置每页显示指定条数的功能，后台可配置指定条数的选项，如20、50、100。3）列表上方与卜力均需提供分页栏。例如：共工315条 MO 4123456789* 未页转到 lioc1 1更 E：国4时

12、间控件以YYYY-MM-D潞式显示，不足两位的以补齐，譬如：。例如：200T_- 07 日X上一月今天下一月日-二三四五六12345676910111213141516171B19 zo Z1 立 Z3242E26 27 28 293031灯5小L|TO上二月日 一410 1117 1824 2531111*97 5g羽 ggg>000>001>002?003>0041。口 51?OOB?007?008 .1VU2月 入月口4月 05月0E目 。月0日月 09月10月11月12月j月六291&2330文本编辑功能包括：字体选择、字体大小、加粗、斜体、下划线、引号

13、、括号、无序列表、有序列表、插框入图片、插入视频、清除格式。系统文本编辑框均采用以下样式实现。.由 口口口口口 m-DHa-. &9-:.8.；9-.:*.;.9-.;$-.一树形控件IP中国g U北京市升口由挂氐, I0县 天津市 河北省 山西省 内一吉白旗区 “省 吉林省 订省卜海市备注：后期软件需求基础设计均以此为主作为参考O5组件规范5.1表格主要应用于大批量数据的展示、查看、维护等方面。基础表格是表格本身最原始的一些属性集合，针对表格在不同场景下的状况，在扩展设计中会一一罗列出来。【设计意图】? 合理有效的组织数据信息；? 帮助用户快速、有效的查看表格数据；? 帮助用户快速、

14、准确的完成对表格的操作；【应用条件】适用于批量数据的展示和维护；【模式描述】组成： 表格标题+表格表头+表格行间隔线 +表格行如下图所示：表格标题一订单列表_L 仃单号订单时间商晶总价订单忘仇货物状态款顶状态2O070422-0U0-Q022D07-05-0510D.001C0.00未处货已付款IO 1J 1T1 ml v-i£口口7口必-皿口 优12007-06435100.001C0.0C未食货m付款表格行如口了口42土口口 UPCI22C07-0&-05100,00100,00未发货已付款包口7 口 424口。ci-Hn2007-0&-05100,00100,0

15、0未发贷已付款2口了 口424-口口口-口 口22007-06-05100.00ICO ,00未竟贷已付款2口口加425-4口口-口口12007-0&-05100.00100.00未发货已付款2口 口了口425-口口口-口口工2D07-0O-C5100.00100.00未发货已付款7眸白-口口口 口口 12007-06-051DO.OOICO ,00未域贷m付款NU了口钙-口口口-W22QD7-0&-05100.00ICQ,00未发货已付款2D07-0S-051DD.OO10C.00未发贷已付款图5-1基础表格应用规范：表格的标题：标题文字要与其它文字有所区别，如：加粗显示；标

16、题文字内容以“内容+操作”的形式描述，标题文字前需要有相应的标题图标，文字与图标之间间隔一定的距离，如：一个半角空格。表格的表头与表格主体在外观上要有区分；表格行间隔线：表格的主体内容用表格线区分；表格线的粗细要适中，如 1px。【扩展描述】根据应用场景的不同，可以对基础表格进行扩展；可以为表格增加数据筛选区、命令按钮区、操作按钮区、表格主体区、翻页区、操作按钮区。整体效果如下图所示：数据麻选区排序命等按留区未处理处理中处理完成无效订单gg未处理订单冽表 a订单号 20070422 -OOD-DOi比仃704靖-口口口-001订单时间商品总价订单总阶黄物状总2D07-05-05100,0013

17、0.00未发货2DD7-0&-05100.00130.00未发货臊作删除朋除2。口70424-口口口-口口22口口口晔4-口口口-口口2空口口7 口4裳4-口口口-0口22007-06-05 100.D011D.00未残货2D07-05-05100.00未发货2007-06-05 100.00laa.oo耒废货删除删除删除2 口口。眸5-口口口 0口12口口7。4252D07-05-05100.001叩,口口未发货20D7-0S-05100,0013D.00未发货删除删除2007-0&-05 ioo.no icin.oo 珪货姗除2 口口7口4裳 6-口口口-口口22口口774

18、%-口口口-口口工2D07-06-05100.001叩,口口未发货2007-06-05100,00110.00未液货隔除删除翻页区12 3 4 6 6 7 610 豺页操作按钮区确定应用取消数据家数般置区图5-2表格操作区分布1）标题列排序：表格列标题可以排序时，表格的列标题要体现出当前排序状态，并要区分于其他 列标题显示，如：背景和图标高亮显示； 如下图所示:订单时值商品总价 订单总价货物状态图5-3标题列排序表格列标题进行切换时，原列标题恢复初始状态，切换到的列标题显示为排序状 态；2）表格行选中操作：表格中的第一列，既可表示对行的选择如复选框；同时还可以用图标标示数据状 态；当两者都有时

19、，显示复选框在上，图标被覆盖； 在对表格行进行选中（点选行的任意位置即可选中）时，此行要高亮显示，同时 此行前复选框为选中状态，同时还可以进行多行选择；需要全选时，只需勾选列 标题中的复选框即可选中当前列表的全部行数据。3）数据筛选区：当数据内容可以明确的按其状态、类别进行划分时，可以应用页签的形式来进行 设计；页签总宽度在表格宽度的 75%之内为佳，超出此范围时，需应用其他设计形式如 下拉框显示的形式等；如下图所示：未处理 处理中 处理完成无效订单番未处理订单列表图5-4数据筛选区当前分类状态的的页签要高亮显示，要明显区别于其他页签；页签内的文字，需要简单明了，相同内容的文字省略； 如上图中

20、未处理（订单）、 处理中（订单）、处理完成（订单）；应用页签设计时，页签类别要划分明确合理；如按照数据状态或分类进行划分。4）命令按钮区：针对整体页面进行操作或者对表格整体进行操作的按钮放置在此区域内；如：导入、导出、新增等；按钮的其它细则参见界面视觉规范。5）操作按钮区：对表格主体的数据进行操作的按钮放置在此区域。如：删除、发布、下架、上架、审核等；当列表的数据超过一屏显示时，在列表上方也要显现操作按钮区，方便用户对列表进行操作；如下图所示：未处理处理中处理月成无效订单订单录入未处理订单列表确定取消操作按钮已口 a记单号*订单时间2007-0&-05商品总价100X0订单总价1DD,

21、OD货物状态 未发贷单如数据2口3口422-口口口-口口？20D70423-000-00120D7-05-05100 .C0loo.oa未发货操他S2口口7口423 -口口口-口口22007-06-05100 .COlOD.OO耒版货回2口口了口母-口口口-皿2007-06-05100.00100,OU未发货2口口7口424 <1口。-口口22007-06-05100 ,co100.00未发货2口。7口4252007-06-05100 .CL)lOD.OO亲发货20070425 06-05100 .DO100.03关发货图5-5 操作按钮区按钮的其它细则参见界面

22、视觉规范。6）翻页区：当列表中的数据量超过默认的数据显示条数时，应用翻页模式来处理多条数据的显示；翻页在列表下方居中显示；翻页的详细功能和模式参见“翻页模式组件规范”。7）单条数据操作区：对行数据进行操作的按钮要与操作按钮区的按钮视觉上要有所区分；具体参见界面视觉规范；尽量不要在此处安排太多的操作，太多的操作给使用者过多的判断负担。应考虑其他的界面布局方式。8）表格列标题区：当表格的数据列较多，屏幕显示已经达到最大限度，而这些数据列又必不可少时, 允许通过鼠标拖动的方式来对数据列的宽度进行改变；同时可以使用横向滚动条；调整列宽度时，要在整体表格边线内进行，以免整体页面变形；数据项内容显示部分太

23、长时，省略多余部分并加省略号；鼠标指针停靠时，全部详细内容显示；9）数据条目设置区：默认显示当前页面所能显示的最大数据条目数；如：10条/页；还要提供几个数值选项，供用户选择；如:20、 30、 50;5.2编号和序号1）编号用来标识某一个对象的唯一号码。一个编号就代表着一个对象。使用编号能够更好的帮助用户记忆和或管理对象。如下图所示：订单号订单时同订单来淳071。口62007-04-96前台订购2007-04-36后台录入gey7cm 曰 口 4200T-04-06后合泰入2100707100 ：i2007-04-S6后台录入2007-04-06后告录入1 效阴51蜘12007-04-06后

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

25、。2）序号序号是用来标识一组有序对象的数字，它具有先后顺序的含义。如下图所示:Top Sonu*fii/E UmSarg胃akIk1- 21*94 Bi4«i9lng 耶 S&厘9- 4KU Wfoman 物 Svcnrt Pum0»3l 3- S （An Ton Wlh hl* Nov?Faiaoa<M*Ac4h«r On B4h Th* Chii-. QtrtWi0CUS>W C TWw Q« Lsw * 心耳iQ$191#Mih avWihGiMn Yau UZQ7. IM . .MBkdioiwdeI修 g diwH,：Ql1

26、Song or tba Swm 的 sac旗 Fa&aigei*IM * OunH Atcp Jimn'q jatimay 。10. ?0& # Any W*/H 如_ QI序号.有先后顺序圉含义（歌曲前I 口位排名）图5-7序号示例【设计意图】?使用户更好了解对象的先后顺序或按一定的顺序去了解对象；?更好的展示有先后顺序的数据；【应用条件】?需要标识一组有序对象时；例如：如歌曲排行旁、热销商品排行、点击率排行等设计中；【模式描述】 应用规范：序号必需代表一个对象在集体中的序列，不要让序号没有意义。如果用户关注对象的排列顺序，则必须提供序号。如果用户根本不关注 对象的顺

27、序，请不要使用序号，这样会混淆用户的注意。序号技有意义,应谈恃苴删除接索结内容摘要在企动力数商改版中企劭力数商3. 0改版中企劫力数商3.0改版中企动力数面3 U改版5中企动力数地3一瞰版中企动力数百工 口改版中企动力数商工殴版卬企动力数曲3"改版中企动力数商生唠版中企动力数商3"改醺中企动力数商3.瞰版卬企动力薇商3 口改版中企动力数商34改版中企动力缴商3.殴版中企动力敷商3畋版中企动力数商3. 口改版中企动力数南3.瞰版中企动力数商3 口改版图5-8错误示例5.3注册表单注册表单应用于对用户的输入格式有一定的要求的设计中，帮助用户更好的完成填写表 单的操作。【设计意图

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

29、；信息输入错误的时候，要给出错误的反馈, 并给出具体的错误原因要高亮反馈，同时注释语位置整体给出反馈提示。如下图所示：场表现案给人用户名:个字符C包括小写手理、数字、下寄修 中文3个祖字为两个字符推荐使用中文台员名输入错源用尸名：* 555彳您输入的用尸名过短,3 6-2口个字符包括小写字母，敷字、下戈岷 中文）双字为两个字符推荐使用中文会员名用户名；邛据-| J 6加字符（包括小写字眼 数字、下划嬲”中文入一个励、正睛汉字为两个字将推荐使用中文会同名用户在输入错误时，要针对不同的输入内容给出相应明确的错误提示，必要的时候要 提出简要的解决方法提示。例如：在用户名填写时，可能出现的错误提示；您

30、输入的用户名过短！您输入的用户名中不能包含字符“& （等等）” ！你输入的用户名“ xxx”已经被占用，请重新输入！b）输入格式约定（注释文本）：当用户需要输入某一项时，相应注释文本才显示出来；对于表单中的某些内容除了需要给予用户正确填写格式的提示外还需要简要说明填 写的必要性，如下图所示：只包含字母、数字，句点J连字符1-下划投 具体数据的妁束内容港输入有效邮件,E将成为堤找回雷科的重要催据-内容埴骂的必要性说明图 5-113）验证码：验证码中的图示字母是随机产生的，但要注意尽可能避免显示一些不易区分的字母和数字，让用户难以辨别（如：“0和o”），如下图所示：mas j康无善一避免出

31、现图5-12 验证码验证码图示，要求相对清晰容易辨别，验证码的位数控制在4位为最佳；验证码由系统随机产生，在个别情况下字母和数字可能会难以辨别，此时用户可以点 击链接文字（看不清，换一张）来更换验证码，如下图所示：点击刷新，更换验证吗!射证吗：r 'EI Ob,看不丁.检一张图5-13验证码示例用户在输入框内输入验证码后，要及时给出反馈提示（不要到提交时才给出提示） 如下图所示：图5-14验证码错误判断4）提交按钮：存在验证或提交按钮时，只有所验证或提交的部分输入完毕并且正确后，按钮才能由 置灰状态变为可用状态，如下图所示：图5-15注册按钮5）成功告知表单最终填写提交完成后，要给出“

32、提交成功或注册成功”的相关提示，明确告知用 户此操作正确完成；6）协议单击 我接受”意味着：您同意并接受服务协议和隐私声明。【扩展描述】应用规范：1）密码强弱提示当用户账号的保密性相对较高时，可以应用密码的强弱提示来保证密码的复杂度。 如下图所示：图5-16密码强弱在输入密码时，旁边显示注释文本：明确注明密码强弱的规则和提示，如下图所示:密码：*密码硬度：才弱W强度高的密叫包含7-16个字符,不包含密码强常见词语或名称，并且包含三种类型的字符弱观则.大写字希、小写字符.颜字或符号.和提示图5-17密码强弱提示当用户输入的内容错误或不完全正确时，要求提示的反馈信息必须提示明确，同时给 出正确的解

33、决方法，如下图所示：场景表现要求样人密四在度：*未的时无任何反馈，置灰显示密码强度：* 弱,。您输入的密码强度较弱,存在安全隐患E整体宽度的前U调强度高的航码承包含常见词语或定林表示更均强度为弱密码强度；“中整体宽度的1/3至2/3区域表平示密蚂强度为中.密相强度；审E强整体宽度的后I片区畴强示密明强度为强.图5-18 密码强弱提示对照表2）注册进度提示根据产品的特性，要求用户填写的注册表单较长、步数较多时，需要给出注册的进度 条提示，明确的告知当前注册的进度。3）分组线注册内容较长时，要用分组线，对要求用户输入的选项进行分类分隔显示（具体使用 参见“分组线规则”）。【注意事项】? 例如婚介交

34、友等场景当对用户信息要求严格时，可以应用注册向导引导注册过程。? 如果表单中需要填写的数据项较多，页面较长，必填项又比较分散且数量较少时，必 须使用行的背景颜色来区分必填项与非必填项。5.4联系方式联系方式是对表单中提供给用户填写详细联系方式一种组件规定。【设计意图】? 帮助用户有效、快速的填写联系方式；? 减少用户输入错误的几率。【应用条件】? 需要用户填写详细联系方式时。例如：网上注册，网上购物填写发货地址。【模式描述】组成：各输入控件，包括：“国家地区”、“省份”、“城市”、“联系电话”、“传真号码”、“手机号码”、“联系地址”、“邮政编码”等（根据具体需要再增加）。器屐系方式图5-19

35、联系方式应用规范:国家地区”、“省份”和“城市”要有连动关系;“国家地区”：下拉列表选框;“省份”：下拉列表选框，与选择的国家连动（选择“国家地区” ，“省份”下 拉框中选项相应变化）；如果在“省份”中已经选择了直辖市，如“北京” ， 则后面的“城市”不用再选，自动置灰；“城市”：下拉列表选框，与选择的城市连动（选择“省份” ，“城市”下拉框 中选项相应变化）。城市下拉列表选项的最后一项为“其他地区” ，如下图所 示：黠联系方式区 阳安鸡中木南阳林砚 西宝汉神渭咸渝其要有其他地 区的选项图5-20其他地区“联系电话”、“传真号码”和“手机号码”必须拆分成几个字段;“联系电话”：四个输入框字段，

36、分别为：国家代码（可选）一区号一电话号 码一分机号；“传真号码”：三个输入框字段，分别为：国家代码（可选）一区号一传真电 话；“手机号码”：两个输入框字段，分别为：国家代码（可选）一手机号；“国家代码”此项可根据具体产品的销售人群不同自行选择是否保留；如下图所示：图5-21正确示例图图5-22错误示例图各字段分别与上面的“国家地区”、“省份”、“城市”连动：“国家地区”和“省 份”、“城市”选择后，国家代码和区号自动显示，如下图所示：国寥选定后相应的国寥代码既图5-23联系方式标注“联系地址”：一个输入框，等待用户输入文本；“邮政编码”：一个输入框（6个字符），等待用户输入文本;除“国家地区”

37、、“省份”和“城市”是只能让用户选择外，其他的输入框均可手 动输入和编辑，用户可以根据自己的需要进行修改。【扩展描述】邮政编码；组成：邮政编码帮助如下图所示:系统根据省尚人" 城市”给出一些不同地 区由瞰编码的关联提示，供用户参考通州区101100平谷县101200胤义区10130。怀柔县101400密云县101500盟庆思102100昌平区102加0图5-24 邮政编码应用规范：用户手动输入邮政编码时，系统根据“省份”、“城市”给出一些不同地区邮政编码的关联提示，供用户参考， 用户选择邮政编码输入框后面“查询邮政编码”链接（如下图所示） 开新窗口查看本市的邮政编码。提供登询的功 能

38、I方便查找 淮丽的邮政编 码器联系方式国家地区二中国V笆分：陕西7 域市：咸阳V联系电话二066 -1010-530ZE£6&-佶理号门: 066 - 010 - 58022266手机号码: OSt - 136ZS2S2ML联系地址；邮政编蚂：100110查询邮政编码图5-25查询邮政编码【注意事项】? 各输入项的先后顺序，根据各字段的逻辑顺序和参照关系排列的同时，要综合考虑用 户的输入操作（尽量将数字输入的放在一起，将汉字输入的放在一起，以避免用户在 键盘上频繁切换输入位置）；系统自动提供的电话区号和邮政编码等，必须保证是与国家、省、市相对应的最新的 和准确的数据；用户用t

39、ab键切换不同的输入区域时，输入区域中本来用的数据显示为选中状态（不 清空）。5.5翻页翻页模式应用于列表数据条目较多，文章篇幅较长的设计中，来对数据和篇幅进行更好的展示。翻页可以拆分为以下几部分：基础页码、上下页、首末页、跳转、 Ajax拖动条、数据统计；根据不同的应用场景，可以选择某一部分或几部分组合起来使用。如下图所示：共工31s条 片直典412345678 9»邀耍臭N转到叫“灾图5-26翻页【设计意图】? 满足用户在不同场景下的不同需要；? 增加操作的易用性；【应用条件】? 列表数据条目较多时；? 文章篇幅较长时；【模式描述】组成：页码 如下图所示：1 2 3 4 5 6

40、7 6 9图5-27页码应用规范：页码少于或等于10页时，只显示应该出现的页码数；鼠标指针经过和按下某个页码区域（此区域高亮反馈），鼠标弹起后页面切换完成；当前页的页码在外观上要明显的区分于其它页码，且不再提供页面链接；已访问过的页码和未访问过的页码要有所区分；显示当前页码的前 4页和后4页；前9页和最后9页除外，默认全部显示；设计时，页码的可点区域要相对较大，方便点击；如下图所示鼠标停靠、按下时已访问过的更科当前页留图5-28状态标注【扩展描述】1）上下页组成：三角符号，作为上一页，以“ ”作为下一页；如下图所示:RI上5I下f图5-29 上下页状态应用规范：列表的页数在11页以上时，要提供

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

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

43、列表；用户在输入框中输入数字以外的其它字符时，系统要给出错误提示；如： 您输入的字符错误，请输入数字！（具体提示内容参见“提示语规范”）用户拖拽滑块移动时，输入框中的页码数值同步变化；页码输入后可以通过“确定”按钮和“回车”键两种方式。与其他元素保持适当的间隔距离；参见界面视觉规范3）数据统计组成：统计提示文字 +统计数值+数量单位如：共7315条图5-32 跳转5.6日期输入1）通过日历选择日期日历选择是使用日历选择控件进行日期输入。【设计意图】? 使用生活中最常见的日历形式，使得日期输入的形式更加直观;日历选择形式能够使日期输入更加方便、快捷;能够减少用户错误输入日期的几率;【应用条件】?

44、 需要进行日期输入时;年份跨度较小，在 10年以内时；例如：2006年 日期显示的一种形式;需要进行日期区间选择时;例如：应用于表单中时间的输入、统计查询等设计中；【模式描述】组成：输入框+日历的图示 +日历显示层如下图所示:I-U今天下1月日-二三四五六12345 s 7 8g101112 13 H IS L6171S19 20 21 Z2 232425E6 27 2B 29 3031图5-33日历输入应用规范:1）日历日历中必须明确标示出当前系统日期；包括：年、月、日。如下图所示:帮助年份匙择月1分选择1用前转换上一月今天日一二三四下一月一五六一向后转铁123 H!1 Q0” diCir0

45、j?10131213H1516171319202122232425262726292031图 5-34日历标注年份和月份选择如下图所示;上一月igg7 日 一w 二1C 3117 1S24 2S31101112六 Z 916233013931999200020012002200320042005200520072008图5-35年份和月份选择默认显示近10年的年份，前10后1；从当年往上，滑动滚动条，查看到100个年份；往下，查看到 10个年份;点击日历中的月份 12个月份全部显示在下拉层中；当前年份、月份均要区分于其他高亮显示；2）日期输入通过键盘输入日期;当鼠标移至输入框内时，输入框中的内

46、容被全部选中并高亮显示，鼠标移开后恢复；开始键盘输入时，默认内容将被清空；如下图所示：默认状态Wmm-dd九鼠标在输入框内点击后行输入日期后aOQT-OT-15行通过日历选择输入日期;点击日历图标后，输入框、图标及文字均高亮显示， 给出用户明确的反馈; 选定日期要高亮显示，同时区分于当前系统日期；如下图所示：图5-36日历选择3）错误提示只允许输入 0-9这十个数字；只要用户输入数字，无论几位系统自动按照“yyyy-mm-dd ”的格式显示给用户；当月份和日期超出正常值时，系统给出提示;如“很抱歉！您输入的月份或日期过大，请重新输入！”4）显示某一时间点2007-05-16 国yyyy-mm-

47、Jd 囱要求显示当前系统默认时间不要求显示当前系统默认时间【扩展描述】组成：时间段的文本提示 +两个日期选择 如下图所示:至恻？-mm-dd图5-37 一段时间选择应用规范：时间段的文本提示“从 至”；选定起始时间后，起始时间被回显到日期框内，同时截至日期日历框自动被打开，不需要用户再次点击，即可选择日期；2）年份跨度较大时的日期选择应用于日期选择时的年份会出现跨度较大的设计中，方便快速的帮助用户正确完成时间格式的输入。适用于出生日期等方面。使得信息反馈及时明确，提示明显易懂，减少了误操 作和重复操作的次数。【设计意图】? 方便用户快速定位年份、月份、日期；? 减少用户出错的几率；? 符合此类

48、场景下用户的心里预期；【应用条件】? 年份的选择跨度较大，在 10-90年之间时；例如：适用于出生日期等设计中；【模式描述】组成：输入框+下拉层+年月日的文本提示整体效果如下图：用通过鼠标点,击 选择年愉出生日期：年| 三月| 二日1920 1921 1922 123 19Z4 1925 1226 19Z7 L92Q 192911930 1931 1932 1际 1934 1935 1936 1 叼 1933 19391940 1941 1942 1043 19441646 147 1348 1949可逋过建盘 直接输入1950 1951 1952 1953 1954 1 溺 1956 195

49、7 1950 1959 1960 1喇 1962 1953 19B4 19&5 19t6 I 95T 1 洸下 1969198019T0 19T1 1972 LOTS 19T4 1算5 6 19T7 1973 197919 S2 1903 1984 1985 19的 1 9S7 1969 1969 1990 1啊 L9Q2 1 物 1994 IMS 196 1097 19gB 199920D0 20Q1 2002 2003 2004 2005 2006 20OT图5-38年份选择应用规范：1）手动输入年月日的输入均可以通过键盘操作的方式输入，输入内容范围在0-9十个数字之内;2）选择输入年月日的输入均可以通过鼠标点击出现列表选择的方式输入;年的选择方式；如下图所示：1920 1921 1922 1923 1924 1925 1920 1QZT 1928 19291950 131 132 1933 1934 1 935 18 击 1S3T 1933 1 圜3194。154.1 141343 1S44 1945 国始 1Q47 194S 1 配电1950 1951 152 1953 1954 1955 1956 19S7 1