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

界面组件级交互设计规范检查表内容摘要：

示；用键盘方式输入时， 文本区内才可有光标指示 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 页 /共 29 页 13． 5 点击分隔符展开下拉菜单，里面包含了当前文件夹下的所有文件夹和文件；其中当前路径文本区别与其他同级路径文本 13． 6 面包屑的最末级，不再提供分隔符 13． 7 每个层次都 是可点选的；当点击它时，就会替换当前打开的文件或文件夹 14. 评鉴与评论 编号 项目内容 14． 1 星级图标前必须给出相应文本提示 14． 2 初始打分区静态显示五颗空白星星图标 14． 3 鼠标经过和选中星星时，星星图标外观要及时变化 14． 4 鼠标指针移开该评论层区域，评论层消失 14． 5 页面上出现文本框“谢谢您参与评论。 ”，片刻后消失 15. 保留图标 编号 项目内容 15． 1 保留图示的应用范围只能确定在以上几方面，要避免在其它设计中使用 15． 2 国际通用的图标必须保持原有意义 界面组件级交互设计检查表（ ） 内部资料 第 14 页 /共 29 页 16. 弹出 层 编号 项目内容 非独占焦点层 16． 1 弹出层可以用鼠标随意拖拽它在屏幕中的显示位置 16． 2 主界面的操作不受弹出层的影响 独占焦点 层 16． 3 弹出层要居中显示 16． 4 主页面处于不可用状态时，不能进行任何操作 16． 5 弹出层不可以用鼠标拖拽，无法变换位置； 16． 6 必须对弹出层进行处理操作后，主界面才可以恢复继续进行其它操作； 局部独占焦点 层 16． 7 弹出层要显示在局部范围之内，且居中（局部之内）显示 16． 8 弹出层不可以用鼠标拖拽，无法变换位置 16． 9 点击 弹出层后主界面局部处于不可用状态，不能进行任何操作，必须对弹出层进行处理操作后，局部页面才可以继续进行操作 17. 搜索 编号 项目内容 模糊搜索 17． 1 搜索输入框中给出默认的提示文本弱化显示 17． 2 提示文本的内容必须简洁并能够指导用户查询 17． 3 当鼠标在输入框内定位（单击）时，提示文本自动清除，等待输入 17． 4 当鼠标移到输入框外单击时，默认的提示文本重新显示 17． 5 根据输入的关键词搜索出相关内容，要求对搜索结果有相应文本统计或描述 17． 6 模糊搜索可以配合另外的精确搜索条 件一起使用； 界面组件级交互设计检查表（ ） 内部资料 第 15 页 /共 29 页 17． 7 下拉框中默认显示“全部”选项，提示用户可以进行选择 精确搜索 17． 8 搜索条件要合理，容易理解 17． 9 各控件的排列顺序，主要依照该条件的关键程度以及用户对该条件的熟知程度，其次依照控件的视觉布局效果； 17． 10 精确搜索根据搜索条件，提供输入框、选择下拉框或单选控件； 17． 11 在输入框中默认显示文本“不限”； 17． 12 当用户鼠标在输入框内定位（单击）时，提示文本自动清除，等待输入 17． 13 当用户鼠标移到输入框外单击时，默认的提示文本重新显示 17． 14 在选择下拉列表框中默认显示选项文字“不限” 17． 15 单选组中第一项默认选中 17． 16 对搜索结果有相应文字统计或描述 17． 17 多类别搜索时，使用页签表示不同的类别。 页签的顺序遵循该条件的关键程度以及用户对该条件的熟知程度，其次依照控件的视觉布局效果 17． 18 当前选中的类别必须足够明显，并能清晰的表明页签与各搜索项是一体的关系 17． 19 不同页签里的搜索项，要与当前页签相符。 17． 20 可提升为标签的项目包含的选项不应该超过 3项（三项以上考虑应用其它的控件表现， 比如下拉选框）； 搜索结果 17． 21 对搜索结果要有相应的数据统计或内容描述 17． 22 根据输入的关键词搜索出相关内容 17． 23 当没有搜索到符合条件的相关结果时，要给出相应的反馈 17． 24 当有符合条件的相关数据时，要给出数据统计 18. 数据添加 编号 项目内容 界面组件级交互设计检查表（ ） 内部资料 第 16 页 /共 29 页 添加单个文件 18． 1 选定图标或按钮释义要清楚 18． 2 对于表格的操作请遵循表格的相关规范 18． 3 弹出层只有点击关闭按钮才能被关闭 18． 4 当选择的文件大小超过约束范围，系统给出提示 添加 多 个文件 18． 5 对于表格的操作请遵循表格的相关规范 18． 6 弹出层只有点击关闭按钮才能被关闭 18． 7 添加按钮要求包含文本标签和代表方向的箭头 18． 8 已经添加过的数据和信息要给出明确的提示，避免用户重复多次添加；当添加的内容重复时，要给出提示 18． 9 当读取回的文件路径过长时，要使用”„”；但要保持路径的前后半段清晰显示，中间部分用“„”代替 18． 10 文件名必须要完整显示 18． 11 所选择的文件数量超过约束范围，系统必须给出提示 添加行 18． 12 每个数据项的约束，要根据输入的数据进 行判断和提示，一般不显示在页面中 18． 13 默认显示一条数据添加行 18． 14 正确添加内容后，点“确定”数据被保存； 18． 15 点击“编辑”，该数据行切换为编辑状态；如果数据添加行中存在没有保存的信息时，系统必须给出提示，如“当前添加的信息是否要保存”，选“是”则保存数据再继续对所选数据行进行编辑修改操作；选“否”则不保存数据再继续对所选数据行进行编辑修改操作； 18． 16 无论添加还是编辑 ，始终保持对一条数据进行操作，其他情况下都要给出相应变更提示，如：“当前的添加的信息是否要保存”。 19. 排序 编号 项目内容 19． 1 没有选中操作对象时，默认时排序图标不可用 界面组件级交互设计检查表（ ） 内部资料 第 17 页 /共 29 页 19． 2 鼠标选中操作对象时，必须出现提示“鼠标拖动排序” 19． 3 鼠标经过数据行时，鼠标变为可移动的十字箭头形状 19． 4 拖动分类进行排序时必须有一条基准线 19． 5 支持连续点击右侧的排序箭头图标进行排序操作 19． 6 对于头尾两个分类不存在置顶、置底操作时，相应图标必须显示为不可用状态 19． 7 当分类或者信息条目过多时（超出一屏显示时），排序箭头则需要跟随所选排序内容进行上下浮动显示； 20. 系统公告信 编号 项目内容 20． 1 应涵盖所有必选要素； 20． 2 标题不能以图片形式出现； 20． 3 公告对象称谓应表述明确； 20． 4 正文 中事件 的持续时间表述要清晰准确，且形式上要明显区别于其他内容； 20． 5 公告发布主体应使用全称； 20． 6 公告发布时间须满足相关格式规范要求。 21. 网站服务器端错误页面反馈 编号 项目内容 21． 1 网站标志应链接到首页，并在当前页面下打开 21． 2 使用对用户表示歉意的提示用语 21． 3 错误描述字体加粗以提高视觉层次 21． 4 不显示 403， 404等错误代码 21． 5 针对性建议应该排在建议的起始位置 21． 6 提供返回上一页的链接 21． 7 提供站内搜索栏 21． 8 提供首页链接 界面组件级交互设计检查表（ ） 内部资料 第 18 页 /共 29 页 21． 9 提供与管理员联系的 Email 链接 21． 10 确保在其他浏览器（ IE6， FireFox 等）的环境下用户也能看到对应的友好错误页 22. 系统自动退信 编号 项目内容 22． 1 发件人 称呼统一为：“ 邮件中心” 22． 2 邮件主题 统一为：“未投递成功” 22． 3 发件人栏格式为：“发件人称呼 +发件人 Email 地址” 22． 4 邮件内容中 Email地址应添加链接 22． 5 退信原因提示，统一用加粗字体，失败原因用红色字体 22． 6 退信原因应为中文显示 22． 7 提供邮件管理员 Email 地址 22． 8 原邮件全文 附加在退信内容后， 应用灰色字体显示，并用虚线与退信内容分隔 22． 9 所有的自动退信应在附件中附带上原邮件所有内容 23. 页签 编号 项目内容 23． 1 当前激活的页签应与其关联的区域在视觉上相连。 如使用相同的颜色，同一个边框，指示箭头等。 23． 2 页签标题文字最好保持在 5个中文字符以内，并且保证完整显示。 23． 3 同一时间只有一个页签处于激活状态。 23． 4 激活的页签应提供视觉反馈。 23． 5 页签应 单行 排列显示。 23． 6 页签应以连续的水平或者垂直方向展示。 23． 7 当鼠标悬停在页签标题上时，触发可点击区域，显示视觉反馈。 23． 8 点击要切换的页签，页签开始切换，点击过后，当前页签在视觉上突出显示，同时页签内容也跳转至该页签所对应内容。 界面组件级交互设计检查表（ ） 内部资料。