03界面组件级交互设计检查表.docx

界面组件级交互设计检查表请根据《界面交互设计检查附表》进行设计检测，以下表请各项目的检测人填写项目名称： 项目负责人：自查人： 规范检查人：自查人员意见申辩表:不符合项规范检查人 反馈意见项目负责人 最终反馈意见备注编号申辩理由规范检查人抽查意见反馈表:不符合项项目负责人 最终反馈结果备注编号抽查结果界面组件级交互设计检查附表使用说明本检测表主要根据《界面组件级交互设计规范编写》，此检测表将帮助您检测网站或者软件系 统中的问题，使用其进行检测时按照以下三个步骤进行：1. 请检测每一个问题是否适用于您目前的网站或者软件系统如果不适用，请记录于附表的不 适合项中，并且跳到下一条2. 对于所评估的系统，如果符合要求，请继续下一条；如果不符合要求，请在附表的不符合要 求项记录该项编号，并继续下一条3. 将改正后的网站或者软件系统，继续按照上面的步骤进行，直到改完为止备注：1. 此文档适用于产品前期的设计人员；2. 意见反馈：亚研究室 李颖颖(58022727-674).cn 10. 分隔 11. 高级加密...12. 进度条……13. 图形化面包屑14. 评鉴与评论.15. 保留图标...16. 弹出层.....17. 搜索 18. 数据添加...19. 排序 界面组件级规范项目检查表目录1. 数据表格的展示 42. 单元格数据 43. 信息列表 44. 编号和序号 55. 注册表单 56. 联系方式 67. 图片裁切 68. 翻页 69. 日期输入 7 7. 8 8. 8. 9. 9. 9. 1.0. 错误!未定义书签。

101. 数据表格的展示编号项目内容1. 1表格标题要与其它文字有所区别1. 2表格标题文字内容描述方式必须一致1. 3表格行间隔线的粗细要适中1. 4表格的表头与表格主体在外观上要有区分1. 5表格排序状态要明确体现1. 6表格行选中操作必须清晰明了1. 7合理的为表格增加数据筛选、命令按钮、操作按钮、翻页等区域并符合相关 规定1. 8数据筛选区中，页签内的文字，需要简单明了，相同内容的文字省略1. 9数据筛选区中，页签总宽度在表格宽度的75%之内为佳，超出此范围时，应 用其他设计形式体现；1. 10当表格行中嵌套表格时，选中的某组数据信息行必须成组高亮显示给用户2. 单元格数据编号项目内容2. 1经过或选中单兀格时鼠标反馈必须统一明确2. 2必须支持快捷键间断、连续选定2. 3整行整列选定时必须有图标反馈2. 4没有内容显示时，必须显示表格的一个空行2. 5整行单兀格数据被填满时表格必须自动增加一个空行2. 6增加至3行时必须出现滚动条2. 7必须支持手动输入和快捷添加操作2. 8输入地址时自动匹配通讯录中对应的人名2. 9遇到两个人同名时必须米用“姓名（号码）”的方式显示3. 信息列表编号项目内容3. 1项目符号是图标时，图标含义要与应用场景相符3. 2列表行内容如果折行，行距必须小于两个记录行之间的段距3. 3信息列表的行间距要适中3. 4根据情况增加列表标题、单选按钮、多选按钮、分隔线、翻页等，并遵循相应规 范4. 编号和序号编号项目内容4. 1编号必需代表一个对象，具有真实、合理、有效的意义4. 2用户关注度高的此类编号需要明确显示4. 3用户关注度低的此类编号默认不显示，但当用户需要时必须能够查看至1」序号4. 4序号必需代表一个对象在集体中的序列，不提供无意义的序号4. 5当用户非常关注对象的排列次序时则必须提供序号5. 注册表单编号项目内容5. 1表单的设计应该遵循简洁的设计原则5. 2信息输入的对错判断反馈要明确有效5. 3注释文本要包含用户填写正确格式的提示和要求外，还要包含填写的必要性等内 容5. 4验证码中的图示要尽可能避免显示一些不易区分的字母、数字5. 5验证码的位数控制在4位5. 6提供链接文字更换验证码5. 7输入验证码后，要及时给出输入对错的反馈提示5. 8存在验证或提交按钮时，只有所验证或提交的部分输入完毕并且正确后，按钮才 能由置灰状态变为可用状态5. 9表单填写完成后，要给出相应提示；5. 10输入的内容错误或不完全正确时，提示的反馈信息必须明确，并同时给出正确的 解决方法5. 11根据产品的特性，要求用户填写的注册表单较长、步数较多时，需要给出注册的 进度条提示，明确的告知当前注册的进度5. 12注册内容较长时，要用分组线，并遵循相应规范5. 13当用户账号的保密性相对较高时，可以应用密码的强弱提示来保证密码的复杂 度；6. 联系方式编号项目内容6. 1“国家地区”、“省份”和“城市”要有连动关系；6. 2“省份”中已选择直辖市，则“城市”自动置灰不需要再进行选择；6. 3城市下拉列表选项的最后一项为“其他地区”6. 4“联系”、“号码”和“号码”必须拆分成几个字段6. 5“联系”：四个输入框字段，分别为：国家代码一区号一号码一分机号6. 6“号码”：三个输入框字段，分别为：国家代码一区号一；6. 7“号码”：两个输入框字段，分别为：国家代码一号；6. 8相应字段填写后，国家代码和区号必须自动显示6. 9手动输入邮政编码时，系统根据“省份”、“城市”给出一些不同地区邮政编码的 关联提示，供用户参考6. 10提供相应的“查询邮政编码”链接7. 图片裁切编号项目内容固定尺寸7. 1数据约束要明确有效7. 2图片裁切区的尺寸必须与上传后的尺寸完全一致7. 3图片必须填充整个裁切区，不能全部或部分为空7. 4针对不同的区域鼠标指针要有明确的形状切换反馈7. 5上传的图片格式或大小不符合要求时，系统必须给出明确有效的提示自定义尺寸7. 6数据约束要明确有效7. 7裁切框最大化显示在预览区内；鼠标经过裁切框有明确的指针反馈7. 8裁切框的上下左右均可以随意拖拽裁切7. 9上传的图片格式或大小不符合要求时，系统必须给出明确有效的提示8. 翻页编号项目内容8. 1页码少于或等于10页时，只显示应该出现的页码数8. 2当前页的页码在外观上要明显的区分于其它页码，且不再提供页面链接8. 3已访问过的页码、未访问过的页码要有所区分8. 4显示当前页码的前4页和后4页；前9页和最后9页除外，默认全部显示8. 5页码的可点区域要相对较大8. 6根据情况提供上下页、首末页、跳转、数据统计等内容并遵循相应规范9. 日期输入编号项目内容通过日历选择日期9. 1日历中必须明确标示出当前系统日期9. 2日期输入支持手动输入和日历选择两种方式9. 3默认显示“ yyyy-mm-dd ”的格式9. 4年份月份的选择要快捷方便9. 5错误提示要明确有效9. 6需要一个时间段时要有文本提示“从...至...”9. 7选定一个时间段时，起始时间选择完成后，截至时间日历框要自动打开年份跨度较大的日期输入9. 8日期输入支持手动输入和选择输入两种方式9. 9年、月、日各自选择或输入9. 10当前年份、月份、日期均高亮显示9. 11相应输入年份、月份、日期时输入框均高亮反馈10. 分隔编号项目内容10. 1视觉上不能过于醒目，不能干扰用户的视觉重心10. 2每20条记录出现一条分隔线10. 3分隔线中间标注该分隔线分隔截至的条目数或其他指示10. 4条目数指示同样不易过于醒目10. 5分隔线的分隔效果必须有合适的留白10. 6分割线的宽度不能贯穿整个列表区域，两边必须留一些余地10. 7适时提供上/下条目跳转、返回顶部等，并遵循相应规范11.高级加密编号项目内容11. 1在密码输入框附近，必须有一个可以指示打开和关闭高级加密输入软键盘的图示 或按钮：图示在打开和收起两种外观上切换；11. 2软键盘各按键及按键与按键之间的边界必须非常清晰11. 3如果有大小写指示或者shift切换，一定要明确地表明当前的状态11. 4鼠标在软键盘上移动、点击和释放某个键时，必须提供清晰的视觉反馈11. 5键盘顺序的变化必须要有规律11. 6软键盘输入方式与键盘输入方式随时可以切换11. 7用软键盘输入时，文本区无光标指示；用键盘方式输入时，文本区内才可有光标 指示11. 8切换按钮要明确，在位置上要与软键盘区域离开一点距离11. 9可变区域的数字应该与允许用户输入的数字范围相匹配11. 10用户点击切换按钮或图标只提供有限的区域让用户选择变换顺序11. 11可变换的区域在视觉上必须有明确的标识12.进度条编号项目内容12. 1根据需要显示完成进度的百分比数值12. 2用户可以对操作进行终止时，提供“取消”按钮，按钮必须高亮显示12. 3针对不同的内容添加相应提示文字12. 4进度条说明文字后必须添加“...”表示进行中13.图形化面包屑编号项目内容13. 1路径关系要正确，路径文本必须与上下文相一致13. 2路径文本与分隔符保持一定的间距（具体参见《界面视觉规范》）13. 3在层级之间必须使用一个含义简单明确的分隔符13. 4分隔符必须使用“ ”表示，即体现路径间的层级关系又表示可以点击展开下 拉菜单；13. 5点击分隔符展开下拉菜单，里面包含了当前文件夹下的所有文件夹和文件；其中 当前路径文本区别与其他同级路径文本13. 6面包屑的最末级，不再提供分隔符13. 7每个层次都是可点选的；当点击它时，就会替换当前打开的文件或文件夹14.评鉴与评论编号项目内容14. 1星级图标前必须给出相应文本提示14. 2初始打分区静态显示五颗空白星星图标14. 3鼠标经过和选中星星时，星星图标外观要及时变化14. 4鼠标指针移开该评论层区域，评论层消失14. 5页面上出现文本框“谢谢您参与评论!”，片刻后消失15.保留图标编号项目内容15. 1保留图示的应用范围只能确定在以上几方面，要避免在其它设计中使用15. 2国际通用的图标必须保持原有意义16.弹出层编号项目内容非独占焦点层16. 1弹出层可以用鼠标随意拖拽它在屏幕中的显示位置16. 2主界面的操作不受弹出层的影响独占焦点层16. 3弹出层要居中显示16. 4主页面处于不可用状态时，不能进行任何操作。