搜索
爱维译后台UI规范（2020.01.19）1.标准色2.标准字体3.按钮4.主框架及组件实现规则1.1.主框架基本规则1)界面主框架不能出现滚动条，合理布局，在组件内实现滚动；2)组件与组件之间上下间隔8px;3)顶部LOGO、个人信息栏和左侧导航栏固定显示，不随内容区域进行滚动。1.2.主页面表格实现规则1)只有一个表格时（如图样例）不论内容多少，表格上下占满空白区域，页码区固定在界面底部；2)信息未占满表框高度时，不产生滑条反之产生滑条；3)信息在当前表框高度以内可显示完的，不出现页码。1.3.表格内列的排列宽度规则1)表格内“选择“宽（36px）、“序号”宽（55px），列宽给予固定宽度值；2)表格中有“操作”项时，根据实际涉及操作功能的宽度设定固定值；3)对内容排列超宽时，根据栏目字段实际可能产生的宽度，合理分配列宽；4)字段超过300px宽度仍显示不全，进行省略显示处理，在鼠标移入时需显示完整内容，如表格剩余长度充足，可忽略此条规则。1.4.二级菜单规则一级菜单下有二级菜单的，使用如下图。1.5.内容区域左侧为树形目录时高宽自动适应屏幕，如效果图占满空间1.6.区域内有多个板块时布局规则1)每个板块的高度固定，尽量考虑不使用滚动条，内容确实太多时出现滚动条；2)板块和板块之间形成对齐关系，上下底边对齐，左右对齐，使版面布局看起来整齐；3)板块和板块之间间隔8px;4)板块太多时一屏不能显示完，内容区域出现滚动条。5.弹窗5.1.标准弹窗5.1.1.基本规则1)标准弹窗最大尺寸为1200px（长度）X900px（高度），根据实际内容多少，调整弹窗长度和高度，不得出现滚动条；2)行与行上下间隔8px；3)上下分栏时栏与栏间隔25px,，左右分栏时间隔25px。4)所有弹窗在弹出时必须定位在显示屏中心区域。5.1.2.使用场景1：确定或提交时需判断输入是否正确。规则：输入框长度，由实际情况中可能的最长输入为依据设定固定值。一个弹窗内，输入框长度应尽量保持统一长度，如个别输入框超长太多，超长输入框可不与其他输入框做统一。5.1.3.使用场景2：上下分栏，有栏目标题5.1.4.使用场景3：左右分栏规则：左右分栏输入框，适用于不对输入内容做正误判断的输入5.1.5.使用场景4：带标签页分类规则：弹窗长、高需固定，以标签页内容最多的决定弹窗长、高。5.1.6.使用场景5：有表格的弹窗规则：表框高度固定，信息未超过表框高度时，不产生滑条，反之产生滑条。横向排列的表格长高比例为2:1，以实际字段长度设置表格每栏宽度，字段最长长度控制在300px以内（超过300px省略字段，鼠标移入显示全部内容），表格最长不得超过1100px，超过时表格底部产生滑条。5.1.7.使用场景6：分类较多或树形目录中有多级分类5.1.8.使用场景7：多个表框并列规则：固定表格列宽，两个表格宽度相同并列排版时长高比例为：1:1.5，3个表格并列时长高比例为：1:2。其它情况，根据实际内容宽度做调整。5.1.9.使用场景8：弹窗内有输入框和表格时规则：弹窗尺寸以表格为参照依据，表格的长高比为：2：1，表格最长不超过1100px，显示不全表格底部产生滑条。5.2.非标准弹窗规则：默认弹出尺寸最大长度控制在1200px以内，最大高度控制在900px以内，超过高度不能显示完全部内容时，出现滚动条，可对弹出进行最大化操作。（建议不轻易采用非标准弹窗，可尝试对内容应进行归类采用标签页或树形目录形式尽量使用标准弹窗展示）。使用场景1：固定栏显示或需要突出显示内容区域。6.几个交互常识1、进行重要操作时，如：修改、删除等操作时需弹窗提示，让用户二次确认。2、无文字的图标需在鼠标移入时显示文字名称3、保存、上传成功、错误、警告需有反馈信息，采用消息提示窗，详见组件规则。