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

1、界面组件级交互设计检查表请根据界而交互设计检査附表进行设计检测，以下表请各项目的检测人填写。项目名称： 项目负责人：自查人： 规范检查人：自査人员意见申辩表:不符合项规范检査人 反馈意见项目负责人 最终反馈意见备注编号申辩理由规范检査人抽査意见反馈表:不符合项项目负责人 最终反馈结果备注编号抽査结果界面组件级交互设计检查附表使用说明本检测表主要根据界面组件级交互设计规范编写，此检测表将帮助您检测网站或者软件系 统中的问题，使用其进行检测时按照以卜三个步骤进行：1. 谙检测每一个问题是否适用于您冃前的网站或者软件系统。如果不适用，诘记录于附表的不 适合项中，并r跳到下一条。2. 对于所评估的系统

2、，如果符合要求，请继续下一条；如果不符合要求，请在附表的不符合要 求项记录该项编号，并继续下i条。3. 将改正后的网站或者软件系统，继续按照上而的步骤进行，总到改完为止。备注：1. 此文档适用于产品前期的设计人员；2. 意见反馈：ue 研究家 李颖颖(58022727-674) lyying。界面组件级规范项目检查表目录1. 数据表格的展示42. 单元格数据43. 信息列表44. 编号和序号55. 注册表单56. 联系方式67. 图片裁切68. 翻页69. 口期输入710. 分隔711. 高级加密812. 进度条813. 图形化面包屑814. 评鉴与评论915. 保留图标916. 弹出层917

3、. 搜索1018. 数据添加错误！未定义书签。19. 排序101.数据表格的展示编号项目内容1. 1表格标题要与其它文字有所区别1. 2表格标题文字内容描述方式必须一致13表格行间隔线的粗细要适中1. 4表格的表头与表格主体在外观上要有区分1. 5表格排序状态要明确体现1. 6表格行选中操作必须清晰明了1. 7合理的为表格增加数据筛选、命令按钮、操作按钮、翻页等区域并符合相关 规定1. 8数据筛选区中，页签内的文字，需要简单明了，相同内容的文字省略1. 9数据筛选区屮，页签总宽度在表格宽度的75%之内为住，超出此范围时，应 用其他设计形式体现；1. 10当表格行中嵌套表格时，选中的某组数据信息

4、行必须成组高亮显示给用户。2.单元格数据编号项目内容2. 1经过或选屮单元格时鼠标反馈必须统一明确2. 2必须支持快捷键间断、连续选定2. 3整行整列选定时必须有图标反馈2. 4没有内容显示时，必须显示表格的一个空行2. 5整行单元格数据被填满时表格必须自动增加一个空行2. 6增加至3行时必须出现滚动条2. 7必须支持手动输入和快捷添加操作2. 8输入地址时自动匹配通讯录中对应的人名2. 9遇到两个人同名时必须采用“姓名（号码）”的方式显示3信息列表编号项目内容3. 1项目符号是图标时，图标含义要与应川场景相符32列表行内容如果折行，行距必须小于两个记录行z间的段距3. 3信息列表的行间距要适

5、中3. 4根据情况增加列表标题、单选按钮、多选按钮、分隔线、翻页等，并遵循相应规 范4. 编号和序号编号项目内容4. 1编号必需代表一个对彖，具有真实、合理、有效的意义4. 2用户关注度高的此类编号需要明确显示4. 3用户关注度低的此类编号默认不显示，但当用户需要时必须能够查看到序号4. 4序号必需代表一个对彖在集体中的序列，不提供无意义的序号4. 5当用户非常关注对象的排列次序时则必须提供序号5. 注册表单编号项目内容5. 1表单的设计应该遵循简洁的设计原则52信息输入的对错判断反馈耍明确有效5. 3注釋文木要包含用户填写正确格式的提示和要求外,还要包含填写的必要性等内 容5. 4验证码中的

6、图示耍尽可能避免显示一些不易区分的字母、数字5. 5验证码的位数控制在4位5. 6捉供链接文字更换验证码5. 7输入验证码后，耍及时给出输入对错的反馈提示5. 8存在验证或提交按钮时，只有所验证或提交的部分输入完毕并且止确后，按钮/ 能山置灰状态变为可用状态5. 9表单填写完成后，要给出相应提示；5. 1()输入的内容错误或不完全正确时，提示的反馈信息必须明确，并同时给出正确的 解决方法5. 11根据产品的特性，要求用户填写的注册表单较长、步数较多时，需要给出注册的 进度条提示，明确的告知当前注册的进度512注册内容较长时，耍用分组线，并遵循相应规范5. 13当用户账号的保密性相对较高时，可以

7、应用密码的强弱提示来保证密码的复杂 度；6. 联系方式编号项目内容6. 1“国家地区”、“省份”和“城市”要有连动关系；6. 2“省份”屮己选择直辖市，则“城市”白动置灰不需要再进行选择；6. 3城市下拉列表选项的最后一项为“其他地区”6. 4“联系电话”、“传真号码”和“手机号码”必须拆分成几个字段6. 5“联系电话”：四个输入框字段，分别为：国家代码一区号一电话号码一分机号6. 6“传真号码”：三个输入框字段，分别为：国家代码一区号一传真电话；6. 7“手机号码”：两个输入框字段，分别为：国家代码一手机号；6. 8相应字段填写后，国家代码和区号必须自动显示69手动输入邮政编码时，系统根据“

8、省份”、“城市”给出一些不同地区邮政编码的 关联提示，供用户参考6. 10提供相应的“查询邮政编码”链接7. 图片裁切编号项目内容固定尺寸71数据约束要明确有效7. 2图片裁切区的尺寸必须与上传后的尺寸完全一致7. 3图片必须填充整个裁切区，不能全部或部分为空7. 4针对不同的区域鼠标指针要有明确的形状切换反馈7. 5上传的图片格式或大小不符合要求时，系统必须给出明确有效的提示自定义尺寸7. 6数据约束要明确有效7. 7裁切框最大化显示在预览区内；鼠标经过裁切框冇明确的指针反馈7. 8裁切框的上下左右均可以随意拖拽裁切7. 9上传的图片格式或大小不符合要求时，系统必须给出明确有效的提示&

9、;翻页编号项目内容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”的格式94年份月份的选择耍快捷方便9. 5错误捉示要明确有效9. 6需

10、要一个时间段时要冇文本提示“从至”9. 7选定一个吋间段时，起始吋间选择完成后，截至时间日历框要自动打开年份跨度较大的日期输入9. 8日期输入支持手动输入和选择输入两种方式9. 9年、月、fi各口选择或输入9. 10当而年份、月份、fi期均髙亮显示9. 11相应输入年份、刀份、口期时输入框均高亮反馈10 分隔编号项目内容10. 1视觉上不能过于解目，不能干扰用户的视觉重心10. 2每2()条记录出现一条分隔线10. 3分隔线屮间标注该分隔线分隔截至的条目数或其他指不10. 4条目数指示同样不易过于醒目10. 5分隔线的分隔效果必须有合适的留口10. 6分割线的宽度不能贯穿整个列表区域，两边必须

11、留一些余地10. 7适时捉供上/f条目跳转、返回顶部等，并遵循相应规范11.高级加密编号项目内容11. 1在密码输入框附近，必须有一个可以指示打开和关闭高级加密输入软键盘的图示 或按钮：图示在打开和收起两种外观上切换；11. 2软键盘各按键及按键与按键之间的边界必须非常清晰11. 3如果有人小写指不或者shift切换，-泄要明确地表明当前的状态11. 4鼠标在软键盘上移动、点击和释放某个键时，必须提供清晰的视觉反馈ii. 5键盘顺序的变化必须要有规律11. 6软键盘输入方式与键盘输入方式随时可以切换11. 7用软键盘输入时，文本区无光标指示；用键盘方式输入时，文本区内才对有光标 指示11. 8

12、切换按钮要明确，在位置上要与软键盘区域离开一点距离11. 9町变区域的数字应该与允许川户输入的数字范围相匹配11. 10用户点击切换按钮或图标只提供有限的区域让用户选择变换顺序11. 11可变换的区域在视觉上必须有明确的标识12.进度条编号项目内容12. 1根据需要显示完成进度的百分比数值12. 2用户可以对操作进行终止时，提供“取消”按钮，按钮必须高亮显示12. 3针对不同的内容添加相应提示文字12. 4进度条说明文字后必须添加“”表示进行屮13.图形化面包屑编号项目内容13. 1路径关系要正确，路径文本必须与上下文相一致13. 2路径文本与分隔符保持一定的间距（具体参见界面视觉规范）13.

13、 3在层级之间必须使用一个含义简单明确的分隔符13. 4分隔符必须使用“ ”表示，即体现路径间的层级关系乂表示可以点击展开下 拉菜单；13. 5点击分隔符展开下拉菜单，里面包含了当前文件夹下的所有文件夹和文件；其中 当前路径文本区别与其他同级路径文本13. 6面包屑的最末级，不再提供分隔符13. 7每个层次都是可点选的：当点击它时，就会替换当前打开的文件或文件夹14.评鉴与评论15 保图标编号项目内容14. 1星级图标前必须给出相应文木提示14. 2初始打分区静态显示五颗空白星星图标14. 3鼠标经过和选屮星星时，星星图标外观要及时变化14. 4鼠标指针移开该评论层区域，评论层消失14. 5页

14、而上出现文本框“谢谢您参与评论！ ”，片刻后消失编号项目内容15. 1保留图示的应用范围只能确定在以上儿方面，要避免在其它设计中使用15. 2国际通用的图标必须保持原有意义16 弹出层编号项目内容非独占焦点层16. 1弹出层可以用鼠标随意拖拽它在屏幕中的显示位置16. 2主界面的操作不受弹出层的影响独占焦点层16. 3弹出层耍居中显示16. 4主页而处于不可用状态吋，不能进行任何操作16. 5弹出层不可以用鼠标拖拽，无法变换位置；16. 6必须对弹出层进行处理操作后，主界面才可以恢复继续进行其它操作；局部独占焦点层16. 7弹出层要显示在局部范围之内，且居中（局部之内）显示16. 8弹出层不可

15、以用鼠标拖拽，无法变换位置16. 9点击弹出层后主界面局部处于不町用状态，不能进行任何操作，必须对弹出层进 行处理操作后，局部页面才可以继续进行操作17.搜索编号项目内容模糊搜索17. 1搜索输入框屮给出默认的提示文木弱化显示17. 2提示文本的内容必须简洁并能够指导用户査询17. 3当鼠标在输入框内定位（单击）时，提示文木自动清除，等待输入17. 4当鼠标移到输入框外单击时，默认的提示文本重新显示17. 5根据输入的关键词搜索出相关内容，要求对搜索结果有相应文本统计或描述17. 6模糊搜索可以配合另外的梢确搜索条件一起使用；17. 7下拉框屮默认显示“全部xx”选项，提示用户可以进行选择精确

16、搜索17. 8搜索条件要合理，容易理解17. 9各控件的排列顺序，主要依照该条件的关键程度以及用户对该条件的熟知程度， 其次依照控件的视觉布局效果；17. 10精确搜索根据搜索条件，提供输入框、选择下拉框或单选控件；17. 11在输入框中默认显示文本“不限”；17. 12当用户鼠标在输入框内定位（单击）时，提示文本自动清除，等待输入17. 13当用户鼠标移到输入框外单击时，默认的提示文木重新显示17. 14在选择下拉列表框中裁认显示选项文字“不限”17. 15单选组中第一项默认选小17. 16对搜索结果有相应文字统计或描述17. 17多类别搜索时，使用页签表示不同的类別。页签的顺序遵循该条件的

17、关键程度以 及用户对该条件的熟知程度，其次依照控件的视觉布局效果17. 18当前选中的类别必须足够明显，并能清晰的表明页签与各搜索项是一体的关系17. 19不同页签里的搜索项，要m当前页签相符。17. 20可提升为标签的项目包含的选项不应该超过3项（三项以上考虑应用其它的控件 表现,比如卜拉选框）；搜索结果17. 21对搜索结果要有相应的数据统计或内容描述17. 22根据输入的关键词搜索出相关内容17. 23当没有搜索到符合条件的相关结果时，要给出相应的反馈17. 24当冇符合条件的相关数据时，要给出数据统计18.数据添加编号项目内容添加单个文件18. 1选定图标或按钮释义要清楚18. 2对于

18、表格的操作请遵循表格的相关规范18. 3弹出层只有点击关闭按钮才能被关闭18. 4当选择的文件人小超过约束范围，系统给出提示添加多个文件18. 5对于表格的操作请遵循表格的相关规范18. 6弹出层只有点击关闭按钮才能被关闭18. 7添加按钮要求包含文本标签和代表方向的箭头18. 8已经添加过的数据和信息要给出明确的提示，避免用八重复多次添加；当添加的 内容垂复时，要给出提示18. 9当读取冋的文件路径过长吋，要使用”；但耍保持路径的前后半段清晰显示， 中间部分用“”代替18. 10文件名必须要完整显示18. 11所选择的文件数量超过约束范围，系统必须给出提示添加行18. 12每个数据项的约束，

19、要根据输入的数据进行判断和提不，一般不显乔在页面中18. 13默认显示一条数据添加行18. 14正确添加内容后，点“确定”数据被保存；18. 15点击“编辑”，该数据行切换为编辑状态：如果数据添加行中存在没有保存的信 息时，系统必须给出提示，如“当前添加的信息是否要保存”，选“是”则保存 数据再继续对所选数据行进行编辑修改操作；选“否”则不保存数据再继续对所 选数据行进行编辑修改操作；18. 16无论添加还是编辑，始终保持对一条数据进行操作，其他情况下都要给出相应 变更提示，女口：“当前的添加的信息是否要保存”。19.排序20.系统公告信编号项目内容编号项目内容编号项目内容19. 1没有选中操作对象时，默认时排序图标不可用19. 2鼠标选中操作对彖时，必须出现提示“鼠标拖动排序”19. 3鼠标经过数据行时，鼠标变为可移动的十字箭头形状19. 4拖动分类进行排序时必须有一条基准线19. 5支持连续点击右侧的排序箭头图标进行排序操作19. 6对于头尾两个分类不存在置顶、置底操作时，相应图标必须显示为不可用状态19.