这一段时间以来做web端的产品较多，渐渐地觉得如果能积累一份规范的交互设计规范，能有效保证产品操作的一致性和连贯性，并能降低产品开发中的沟通成本，所以趁着周末时间，在各种社区搜罗了一些前辈总结的经验并加以自己的总结，形成本文。
本文是对边跑边学走的一篇《交互设计规范分享》的补充，已获得原文作者的授权补充，再此非常感谢原作者对于我的启发，在此表示敬佩的感谢之情。同时，本文也融入了个人项目工作中的复盘总结，总体来看还不够完善，希望读者多多指正和补充。
目录
1. 页面信息展示规范
1.1. 页面命名
1.2. 页面兼容性
1.3. 图片文字展示
1.4. 链接
2. 数据操作交互规范
2.1. 展示数据
2.2. 选中数据
2.3. 新增数据
2.4. 删除数据
2.5. 导入/导出
2.6. 修改数据
2.7. 提交/上传数据
2.8. 查询数据
3. 数据校验规范
4. 通用组件规范
4.1. 导航
4.2. 表单
4.3. 按钮
4.4. 分页
4.5. 加载
4.6. 鼠标
4.7. 键盘
5. 提示信息规范
5.1. 服务器错误提示
5.2. 预先信息提示
5.3. 操作信息提示
5.4. 结果信息提示
6. 系统通用功能性规范
以下为正文
1. 页面信息展示规范
1.1 页面命名
每个页面都要有与之模块对应的名称，且不易混淆。
1.2 页面兼容性
（1）自适应1366*768px及以上的分辨率。默认窗口设置下，不应出现水平滚动条，避免出现垂直滚动条（当内容过多时允许滚动条）
（2）要保证768高度的分辨率显示正常，同时能移动查看弹出框内容。弹出框高度为不超过450px，且显示在内容页面相对水平、垂直相对居中位置。
（3）兼容Chrome、Firefox、Safari、IE8及以上主流浏览器。
1.3 图片文字展示
（1）文字
文字用系统自带的常规字体，且分一级标题、二级标题、主内容文字、次内容文字、辅助文字（说明或引导性文字，提醒性文字），分别用不同的字号、颜色。具体字号大小和颜色参考UI设计效果图。
（2）内容图片
内容图片均带1px描边（带描边主要是为了区分图片边界）；内容图片未加载出来时显示系统默认图片。
1.4 链接
（1）链接文字或图片当鼠标划过时会变成点击手形。
（2）本窗口打开：查询结果、上下翻页、新增、修改等操作在本窗口或弹窗打开。
（3）新窗口打开：各类详情、预览页面等采用新窗口打开。
2. 数据操作交互规范
2.1 展示数据
（1）表头：字体加粗、且比单元格内容字体大一号，且字体大小参照UI效果图；
（2）单元格：文字图片内容左对齐，数字、金额内容右对齐；
（3）操作内容原则上用图标表达，如“ ”“”；
（4）鼠标在页面列表移动，所落脚的行应高亮显示；
（5）原则上每页显示15-20条数据，实际显示条数据可按设计排列效果而定；
（6）表格中不定长的字段，固定显示宽度，超出内容用“…”显示光标停留后，在浮动层显示详细内容；
（7）某一条数据禁止点击某按钮操作，这个时候有3种解决办法：1隐藏按钮；2按钮置灰，鼠标移入显示为禁止样式；3按钮不变，点击之后弹出提示。本系统规定选择第1种方式；
（8）数据加密展示规则：对于公司、公司联系人的基本信息，一般不加密，仅对于c端个人的身份证、手机号等敏感信息加密处理，数据中间用****展示。
2.2 选中数据
（1）勾选全选则选中当页所有记录；
（2）去掉当页某个记录的勾选，则全选也去掉勾选；
（3）翻页后是否进行选择记录的保留应试具体业务而定；
（4）刷新页面后，自动去掉已勾选的记录及全选的勾选；
（5）如列表有复选框，则点击除某一行的按钮之外其他区域，应支持选中，而不必点击复选框才选中。
2.3 新增数据
（1）下拉框：默认为“请选择”
如果为下拉联动，用同一颜色标识本组下拉联动，下拉框内容变动时，下级内容跟随变动，下级的所有下级默认为请选择，以此类推；
（2）输入框默认为空，按照业务需要可提示输入内容；
（3）复选框、复选框默认为不选中；
（4）新增时按照业务需要记录操作人员和时间；
（5）新增的记录必须排在新增页的首行；
（6）除特殊标记或规定，所有列表页面默认按数据新增时间倒序排列。
（7）点击返回或者取消，直接回到查询列表界面。
2.4 删除数据
（1）本系统无物理删除，所有删除均为逻辑删除；
（2）必须有确认删除的提示信息。如果确定删除，则进行删除，否则，取消操作；
（3）删除成功后需要更新查询结果列表中对应的状态。
（4）删除成功后返回到原记录所在页面，而当原记录所在页不存在时，则返回上一页。
（5）当被删除的记录与其他记录存在关联时，请示需求界面给予不允许删除、更明细提示等信息。
（6）点击返回或者取消，直接回到查询列表界面。
2.5 导入/导出
（1）导入需要提供导入模板，模板上的字段需要与新增页面字段保持一致；
（2）导入的数据校验规则要与新增页面的校验规则保持一致；
（3）导出的数据范围可分为2种：1.按照搜索条件查询出来的全部数据项；2.选中的数据项；。根据业务需要，本系统选择第1种，导出的内容为搜索条件的全部内容，与勾选无关。
（4）点击返回或者取消，直接回到查询列表界面。
2.6 修改数据
（1）修改时按照业务需要记录操作人员和时间；
（2）修改完成后必须回到原记录所在位置，且刷新显示修改后的值。
（3）在查询条件下修改返回后，保留原有查询条件，且修改后的数据如果不满足查询条件则不显示。
（4）进入到修改界面时，所有的输入项要和新增（也有可能是修改后）的输入值保持一致；
（5）点击返回或者取消，直接回到查询列表界面。
2.7 提交/上传数据
（1）提交时需对主标识字段进行重复值、空值（空格）判断；
（2）提交成功后不可重复提交，有列表展示提交内容的直接返回到展示页面；
（3）必须要有“取消或返回”功能；
（4）取消必须给予提示，取消操作后须返到原记录所在状态；
（5）当从一个页面点击按钮或链接进入子页面时，子页面必须提供返回按钮；
（6）保存成功应给出保存成功提示，一般提示格式为“XXX信息保存成功！”，点击提示框中确定或者提示框消失后，需要跳转到数据列表界面；
（7）提交失败后留在当前提交页，并且给出明确的提交失败原因，改正做法，点击确定后留在当前界面且保存用户已经输入的内容以便再次提交；
（8）点击返回或者取消，直接回到查询列表界面；
2.8 查询数据
查询条件区域
（1）每个查询条件必须有预置文案；
（2）点击查询按钮后，显示查询结果列表；
（3）要有“重置”功能，重置后恢复到初始状态；
（4）除了用户明确要求不需要外，需提供模糊查询功能；
（5）输入框：如果内容为中文，一般为模糊查询，如果为数字、编码、手机号或者用户名，则为精确查询；
（6）下拉框：常规排序如是-否，上架-下架，有效-无效等，非常规按照数据库中顺序；
（7）日期控件：一般为起止两个控件，精确到年月日，默认起止日期为当前日期往前一个月或7天；sql语句中查询条件为闭区间（>=或者<=）；
查询结果区域
（1）查询后保留当前输入的查询条件；
（2）当未查询到任何记录时，需给予未查找到相关记录的提示信息；
（3）排序：按日期倒序排序，查询结果中的时间一般精确到年月日时分秒；
3. 数据校验规范
（1）非空校验：提示内容—“XX不能为空，请输入！”；
（2）超长限制：提示内容—“XX最大不能超过XX个字，请检查！”；
（3）“*”标识：*标识字段为必填项，需要进行非空校验；
（4）下拉框：一般为必选项，默认为“请选择”；
（5）备注项：一般为选填项，字段长度一般不超过400个字；
（6）用户输入完成时校验：需对主要标识字段进行重复值、空值（空格）判断
（7）输入项内容应该满足一般性校验要求，如手机号规则（以1开头，11位数字），身份证号规则（15或者18位数字，末尾可以为X），邮箱规则（XX@XX），价格（允许两位小数），数量（0或者正整数），日期（一般精确到年月日，有时需要精确到时分秒，具体功能具体说明），名称规则（中文为2-8位，不允许有空格；英文2-24位，允许有空格）输入长度限制等；
（8）输入项默认为空；
（9）数据回显：如无特殊说明，在执行修改类或删除类操作后均需要执行数据回显；
4. 通用组件规范
4.1 导航
菜单导航栏
（1）导航路径：原则上不超过三级就能到达用户想要的主要页面，且随时能返回。
（2）导航菜单：各级别的菜单宽高一致，样式一致。鼠标划过或点击选中菜单模块时会有突出（比如高亮）状态显示。
（3）有子菜单的模块默认不显示子菜单，点击后显示子菜单，再次点击时可收起。
当前位置导航
（1）原则上每个页均有“当前位置导航”，但弹出页、预览页等特殊页面无需当前导航；
（2）若当前位置导航有多个层级，则当前层级的前面层级均可链接到相应页面；
（3）当前位置导航位置固定，具体位置参考UI设计效果图。
页签
页签即工作台菜单栏，出现的名称除首页外，其他都应是菜单名称；
页签与当前位置导航保留一个即可，当前页面所在页签应高亮标记，支持刷新；
从菜单进入后，某页面下的子页面，都应该在本菜单下，不应该再跳转打开一个新的页面；
子页面回到主页面时，一般是点击子页面的返回按钮，回到主页面；
切换页签不刷新新进的页面，若前台操作时校验到后台数据已发生变动，提示“当前数据已发生变化”，并刷新页面；
点击浏览器的刷新按钮，刷新当前页签所在的页面。
4.2 表单
（1）表单输入框由表单字段名称： + 输入框组成，字段名称原则上2-4个汉字。
（2）预置文案：输入框内均需有预置文案，且光标进入输入框获得焦点时文案自动消失，若输入框失去焦点且未输入任何文字时恢复预置文案。
（3）下拉选择框中内容有多级时，只显示一级，其他级呈灰色不可用状态，选择一级后才会激活第二级，以此类推。如：部门作为查询条件时，点击下拉框，默认只有一级部门可用，点击一级部门再激活开显示二级部门。
（4）界面的必填项以红色*号标识出来，且标识在“表单字段名称”前面。存在必填项未填写时，输入框失去焦点即时提示，输入框红色描边，且输入框下方左有相应红色提示文案。输入框未曾获得过焦点直接提交时，同样输入框红色描边+红色提示文案提醒。
（5）单行输入框：在未限制字数情况下，当输入文字比前输入框长时，最先输入的文字隐藏，光标和最后一个输入的文字显示在输入框尾部。
（6）多行输入框：需要有“当前已输入字数/最多可输入字数”（如：50/100）。
（7）与限制条件不符的非法输入应即时提醒；
（8）只允许输入日期、时间的输入框需要通过格式化方式约束输入，而不是输入非法值后给出提示；
4.3 按钮
（1）按钮种类：优先操作按钮，次要按钮，不可用按钮。
（2）按钮状态：默认显示状态，鼠标经过状态，点击状态。
（3）按钮位置：按windows交互习惯先优先后次要（左确定，右取消）。
（4）按钮样式：可直接写文字，或文字+图标（具体方案参照UI设计效果图），原则上按钮上文字为2-4个汉字。
4.4 分页
（1）分页控件：置于数据列表下方，无结果时不显示；在某一查询条件下翻页，改变单页展示数据条数，应不改变查询条件。
（2）当对查询结果进行分页时，分页的同时需要能够执行查询功能；
（3）当页数较多时，允许输入具体页数进行查询；
4.5 加载
当数据获取较慢，或网络状况不佳时，要有统一的加载方案图示告诉用户“数据正在加载中……”如：漏斗、菊花、进度条等，具体图文可参考UI设计效果。
4.6 鼠标
默认状态鼠标为“箭头形状”，经过可点击元素时变为“手指状”，在可输入框中为“竖线光标状”
4.7 键盘
（1）支持回车键提交
（2）支持回车键查询
（3）支持tab键移动光标焦点，移动遵循从左至右，从上至下的原则
5. 提示信息规范
5.1 服务器错误提示
（1）403：您没有访问权限哦；
（2）404：您访问的页面不存在或暂时无法访问；
（3）500：Sorry，内部服务器错误；
（4）如果为界面跳转，出现错误时，请跳转到错误界面；
5.2 预先信息提示
（1）内容提交类：每个输入项、条件选选项（包括时间选择）均需要给出提示信息。该提示信息可放置在输入框内或者控件尾部（如密码要多少位，搜索框提示用户输入什么内容等）
（2）谨慎类操作：针对不可修改、重要操作选择等操作属于谨慎类操作，均需给出提示信息。如审核是否通过操作、退款申请操作、价格输入等。
5.3 操作信息提示
（1）确认提示：修改设置、删除数据等操作时需要弹出提示框，用户需要选择后方可执行；
（2）错误提示：当用户的操作不符合规则、输入数据不符合规则需要给出操作提示。比如输入数值不符系统规定，则进行提示；
（3）错误提示分为：即时提示、提交后提示。本系统这里统一用即时提示；
（4）读取提示：涉及到大量信息读取缓慢的时候应该进行提示。比如进入后台查看商品列表时，由于网络、数据量大等原导致载入缓慢，应该显示读取提示信息，已避免用户过度重复点击操作。
5.4 结果信息提示
（1）当页面没有数据、加载失败或出错时，要有统一的提示文案图标告诉用户“页面加载失败/暂无数据/页面出错”，具体图文可参考UI设计效果。
（2）保存结果提示：当进行商品添加/修改此类涉及到数据保存的操作，不管是否成功均需给出提示。统一用Toast提示，内容为“保存成功！”原则上保存之后直接显示结果页（也可视具体情况定）。
（3）查询结果提示：任何信息列表、查询结果，当对应信息结果的时候需要给出有无结果状态提示，不得使用空白信息。
6. 系统通用功能性规范
（1）所有信息保存时均需记录操作人员代码、操作日期、修改人员代码和修改日期，日期格式精确到年月日时分秒；
（2）对于外部系统通过接口修改的信息需要在操作人员代码或者修改人员代码字段记录外部系统的系统id，记录操作日期或者修改日期，日期格式精确到年月日时分秒，且根据插入数据或者修改数据的情况进行字段的选择；
（3）对于业务流程中的删除流程，需要进行有痕迹的删除，即增加删除标志位而不是物理删除条目，并且需要记录删除人员代码，删除日期，日期格式精确到年月日时分秒；
（4）用户每次登录系统（内网）均需要记录登录日期、登陆人代码（操作人员代码）、是否登录成功、退出日期、登录机器ip和mac地址，其中日期格式精确到年月日时分秒；
（5）可设置用户登录无前后台交互时间，延时自动断开该操作人员登录链接，默认交互时间间隔为30分钟；
（6）操作人员权限控制，会在具体需求描述中予以表述。
以上。欢迎各位一起探讨交互、用户体验和产品等内容，个人微信：ZYQ616418389
