1 / 11
文档名称:

UI设计网页规范.docx

格式:docx   大小:1,384KB   页数:11页
下载后只包含 1 个 DOCX 格式的文档,没有任何的图纸或源代码,查看文件列表

如果您已付费下载过本站文档,您可以点这里二次下载

分享

预览

UI设计网页规范.docx

上传人:916581885 2021/11/25 文件大小:1.35 MB

下载得到文件列表

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)下拉选择框中内容有多级时,只显示一级,其他级呈灰色不可用状态,选择一级后才会激活第二级,以

最近更新

海原一小三年级语文教师多媒体课件的应用现状.. 2页

流程工厂协同设计中一致性模型研究的开题报告.. 2页

洛阳市高中历史教学中对乡土历史课程资源的运.. 2页

泰国对中旅游业发展的现状、问题以及对策研究.. 2页

波浪作用下黄河三角洲海床失稳机制与评价方法.. 2页

酸雨的成因与危害研究报告 27页

2024年我的理想三年级作文 21页

2024年我的植物朋友作文45篇 39页

调查书法的研究报告 26页

沧州武术节发展现状与对策研究的开题报告 2页

初中优秀作文锦集(4篇) 5页

初中教师个人教学反思5篇 11页

初中生学生自我评价 16页

家长作文评语 1 5页

家长会的邀请函模板7篇(精选范文) 6页

汽车发动机磁流变悬置动特性及半主动控制研究.. 2页

配气机构的现状与前景分析 19页

合伙经营协议书 49页

江西大岗山不同密度杉木林对降雨再分配的比较.. 2页

江苏海岸滩涂资源分布与动态演变的开题报告 2页

土地承包合同 24页

用流式细胞仪分析脂肪细胞PPT课件 28页

2021年青岛城阳一中自主招生考试 理科素养测试.. 8页

Moira果老星宗七政四余排盘软件 1页

胸腔闭式引流瓶的更换 1页

胸腔闭式引流液更换 6页

水库大坝安全鉴定现场安全检查表格 11页

高考语文(答题卡)(1) 2页

中小学生汉语考试[yct]一级 11页

小学数学课堂教学中培养学生语言表达能力的研.. 1页