UI设计网页规范.docx

UI设计网页规范
LT
一、 页面信息规范
1、页面命名
每个页面都要有与之模块对应的名称。
2、页面兼容性
（1）页面大小兼容
自适应1366*768px及以上的分辨率
默认窗口设置下，不应出现水平滚动条，避免出现垂直滚动条（当内容过多时允许滚动条）
（2）弹窗、弹页要保证768高度的分辨率显示正常，同时能移动查看弹出框内容。弹出框高度为不超过450px，且显示在内容页面相对水平、垂直相对居中位置。
（3）浏览器兼容
兼容Chrome、Firefox、Safari、IE8及以上主流浏览器。
文字
文字用系统自带的常规字体，且分一级标题、二级标题、主内容文字、次内容文字、辅助文字（说明或引导性文字，提醒性文字），分别用不同的字号、颜色。具体字号大小和颜色参考UI设计效果图。
内容图片
内容图片均带1px描边；内容图片未加载出来时显示系统默认图片。
二、 信息交互规范
1、数据操作
显示数据（表格）
（1）表头：字体加粗、且比单无格内容字体大一号，且体字体大小参照UI效果图。
（2）单无格：文字图片内容左对齐，数字、金额内容右对齐。
（3）操作内容原则上均用文字表达，如“编辑-删除”
（4）鼠标划过表格单行时，颜色高亮。
（5）原则上每页显示15-20条数据，实际显示条数据可按设计排列效果而定。
（6）表格中不定长的字段，固定显示宽度，超出内容用“…”显示光标停留后，在浮动层显示详细内容。
选中数据
（1）勾选全选则选中当页所有记录
（2）去掉当页某个记录的勾选，则全选也去掉勾选。
（3）翻页后，自动去掉已勾选的记录及全选的勾选。
（4）翻页后是否进行选择记录的保留应试具体业务而定。
（5）刷新页面后，自动去掉已勾选的记录及全选的勾选。
（2）当页数较多时，允许输入具体页数进行查询；
取消
（1）取消必须给予提示。
（2）取消操作后须返到原记录所在状态。
返回
（1）当从一个页面点击按钮或链接进入子页面时，子页面必须提供返回按钮
2、链接
（1）链接文字或图片当鼠标划过时会变成点击手形。
（2）本窗口打开：查询结果、上下翻页、新增、修改等操作在本窗口打开。
（3）新窗口打开：各类详情、预览页面等采用新窗口打开。
3、提示信息
预先信息提示
（1）内容提交类：每个输入项、条件选选项（包括时间选择）均需要给出提示信息。该提示信息可放置在输入框内或者控件尾部（如密码要多少多少位。搜索框提示用户输入什么内容等。）
（2）谨慎类操作：针对不可修改、重要操作选择等操作属于谨慎类操作，均需给出提示信息。如审核是否通过操作、退款申请操作、价格输入等。
操作信息提示
（1）确认提示：修改设置、删除数据等操作时需要弹出提示框，用户需要选择后方可执行。
（2）错误提示：当用户的操作不符合规则、输入数据不符合规则需要给出操作提示。比如输入数值不符系统规定，则进行提示。
（3）错误提示分为：即时提示、提交后提示。本系统这里统一用即时提示。
（4）读取提示：涉及到大量信息读取缓慢的时候应该进行提示。比如进入后台查看商品列表时，由于网络、数据量大等原导致载入缓慢，应该显示读取提示信息，已避免用户过度重复点击操作。
结果信息提示
（1）保存结果提示：当进行商品添加/修改此类涉及到数据保存的操作，不管是否成功均需给出提示。统一用Toast提示，内容为“保存成功！”原则上保存之后直接显示结果页（也可视具体情况定）。
（2）查询结果提示：任何信息列表、查询结果，当对应信息结果的时候需要给出有无结果状态提示。不得使用空白信息。
三、 通用组件规范
1、导航
菜单导航栏
（1）导航路径：原则上不超过三级就能到达用户想要的主要页面，且随时能返回。
（2）导航菜单：各级别的菜单宽高一致，样式一致。鼠标划过或点击选中菜单模块时会有突出（比如高亮）状态显示。
（3）有子菜单的模块默认不显示子菜单，点击后显示子菜单，再次点击时可收起。
当前位置导航
（1）原则上每个页均有“当前位置导航”，但弹出页、预览页等特殊页面无需当前导航。
（2）若当前位置导航有多个层级，则当前层级的前面层级均可链接到相应页面。
（3）当前位置导航位置固定，具体位置参考UI设计效果图。
2、表单
（1）表单输入框由 表单字段名称： + 输入框组成，字段名称原则上2-4个汉字。
（2）预置文案：输入框内均需有预置文案，且光标进入输入框获得焦点时文案自动消失，若输入框失去焦点且未输入任何文字时恢复预置文案。
（3）下拉选择框中内容有多级时，只显示一级，其他级呈灰色不可用状态，选择一级后才会激活第二级，以