WEB开发在内部操作管理应用系统中的交互规范

信息内容规范
页面兼容性
自适应1366*768px及以上的分辨率
默认窗口设置下，不应出现水平滚动条，避免出现垂直滚动条（当内容过多时允许滚动条）
弹窗、弹页要保证768高度的分辨率显示正常，同时能移动查看弹出框内容。弹出框高度为不超过450px，且显示在内容页面相对水平、垂直相对居中位置。
浏览器兼容Chrome
文字
图片
内容图片未加载出来时显示系统默认图
信息交互规范
数据操作
显示数据（表格）
（1）表头：字体加粗、且比单无格内容字体大一号，且体字体大小参照UI规范。
（2）单元格：文字图片内容左对齐，数字、金额内容右对齐。
（3）操作内容原则上均用文字表达，如“编辑-删除”
（4）鼠标划过表格单行时，颜色高亮。
（5）原则上每页显示15-20条数据，实际显示条数据可按设计排列效果而定。
（6）表格中不定长的字段，固定显示宽度，超出内容用“…”显示光标停留后，在浮动层显示详细内容。
选中数据
（1）勾选全选则选中当页所有记录
（2）去掉当页某个记录的勾选，则全选也去掉勾选。
（3）翻页后，自动去掉已勾选的记录及全选的勾选。
（4）翻页后是否进行选择记录的保留应试具体业务而定。
（5）刷新页面后，自动去掉已勾选的记录及全选的勾选。
新增数据
（1）新增的记录必须排在新增页的首行；
（2）所有列表页面默认按数据新增时间倒序排列。
（3）提交失败后留在当前提交页，且保存用户已经输入的内容以便再次提交。
（4）提交成功后提示信息，自动回到数据列表页且数据列表页刷新。
（5）提交时需对主要标识字段进行重复值、空值（空格）判断。
修改数据
（1）修改完成后提示信息，回到原表格记录所在位置，且刷新显示修改后的值。
（2）提交失败后留在当前提交页，且保存用户已经输入的内容以便再次提交。
（3）在查询条件下修改返回后，保留原有查询条件，且修改后的数据如果不满足查询条件则不显示。
（4）提交时需对主标识字段进行重复值、空值（空格）判断。
查询数据
（1）把常用查询条件显示出来，并放在查询列表上方位置，其他查询条件用户按需展开。
（2）每个查询条件必须有预置文案。
（3）每次查询后保留当前输入的查询条件。
（4）当未查询到任何记录时，需给予未查找到相关记录的提示信息。
（5）除了用户明确要求不需要外，需提供模糊查询功能；查询内容对客户输入文字做前后空格的删除操作。
（6）必须要有条件“重置”功能，重置后恢复到初始状态。
删除数据
（1）必须有确认删除的提示信息。
（2）删除成功后刷新不显示删除的记录。
（3）删除成功后返回到原记录所在页面，而当原记录所在页不存在时，则返回上一页。
（4）当被删除的记录与其他记录存在关联时，请示需求界面给予不允许删除、更明细提示等信息。
提交/上传数据
（1）当提交所费的时间较长时，需给出等待的提示，如：沙漏、进度条等。
（2）提交时需对主标识字段进行重复值、空值（空格）判断。
（3）提交成功后不可重复提交，有列表展示提交内容的直接返回到展示页面。
（4）必须要有“取消或返回”功能。
分页
使用物业云前端标准翻页空间，支持显示总页数，数据总条数，可手工输入跳转页数
取消
取消操作后须返回到原记录所在状态
返回
当从一个页面进入子页面后，子页面必须提供返回按钮，切主页面保留进入子页面前数据状态；
如果不进入子页面，则打开新标签页
链接
（1）链接文字或图片当鼠标划过时会变成点击手形。
（2）本窗口打开：查询结果、上下翻页、新增、修改等操作在本窗口打开。
（3）新窗口打开：各类详情、预览页面等采用新窗口打开。


提示信息
预先信息提示
（1）内容提交类：每个输入项、条件选选项（包括时间选择）均需要给出提示信息。该提示信息可放置在输入框内或者控件尾部（如密码要多少多少位。搜索框提示用户输入什么内容等。）
（2）谨慎类操作：针对不可修改、重要操作选择等操作属于谨慎类操作，均需给出提示信息。如审核是否通过操作、退款申请操作、价格输入等。
操作信息提示
（1）确认提示：修改设置、删除数据等操作时需要弹出提示框，用户需要选择后方可执行。
（2）错误提示：当用户的操作不符合规则、输入数据不符合规则需要给出操作提示。比如输入数值不符系统规定，则进行提示。
（3）错误提示分为：即时提示、提交后提示。本系统这里统一用即时提示。
（4）读取提示：涉及到大量信息读取缓慢的时候应该进行提示。比如进入后台查看商品列表时，由于网络、数据量大等原导致载入缓慢，应该显示读取提示信息，已避免用户过度重复点击操作。
结果信息提示
（1）保存结果提示：当进行添加/修改此类涉及到数据保存的操作，不管是否成功均需给出提示。统一用右上角浮动提示,内容为“保存成功!”原则上保存之后直接显示结果页（也可视具体情况定）。
（2）查询结果提示：任何信息列表、查询结果，当对应信息结果的时候需要给出有无结果状态提示。不得使用空白信息。


表单
（1）表单输入框由 表单字段名称： + 输入框组成，字段名称原则上2-4个汉字。
（2）预置文案：输入框内均需有预置文案，且光标进入输入框获得焦点时文案自动消失，若输入框失去焦点且未输入任何文字时恢复预置文案。
（3）下拉选择框中内容有多级时，只显示一级，其他级呈灰色不可用状态，选择一级后才会激活第二级，以此类推。如：部门作为查询条件时，点击下拉框，默认只有一级部门可用，点击一级部门再激活开显示二级部门。
（4）界面的必填项以红色*号标识出来，且标识在“表单字段名称”前面。存在必填项未填写时，输入框失去焦点即时提示，输入框红色描边，且输入框下方左有相应红色提示文案。输入框未曾获得过焦点直接提交时，同样输入框红色描边+红色提示文案提醒。
单行输入框：在未限制字数情况下，当输入文字比前输入框长时，最先输入的文字隐藏，光标和最后一个输入的文字显示在输入框尾部。
（5）多行输入框：需要有“当前已输入字数/最多可输入字数”（如：50/100）。
（6）与限制条件不符的费法输入应即时提醒。
（7）只允许输入日期、时间的输入框需要通过格式化方式约束输入，而不是输入非法值后给出提示；


按钮
（1）按钮种类：优先操作按钮（蓝色），次要按钮（白色），不可用按钮（灰色）。
（2）按钮状态：默认显示状态，鼠标经过状态，点击状态。
（3）按钮位置：按windows交互习惯先优先后次要（左确定，右取消）。
（4）按钮样式：可直接写文字，或文字+图标（具体方案参照UI设计效果图），原则上按钮上文字为2-4个汉字。