网页ui设计规范，页面信息规范及交互规范

随着科技的不断进步，设计行业也在不断的发展，从平面设计再到网页ui设计，网页ui设计是有一定的规范的，下面就跟随小编来了解网页ui设计规范中的页面信息规范及交互规范吧。

网页ui设计规范一、 页面信息规范

1、页面命名

每个页面都要有与之模块对应的名称。

2、页面兼容性

(1)页面大小兼容。自适应1366*768px及以上的分辨率，默认窗口设置下，不应出现水平滚动条，避免出现垂直滚动条(当内容过多 时允许滚动条)

(2)弹窗、弹页要保证768高度的分辨率显示正常，同时能移动查看弹出框内容。弹出框高度为不超过450px，且显示在内容页面相对水平、 垂直相对居中位置。

(3)浏览器兼容。兼容Chrome、Firefox 、Safari、IE8及以上主流浏览器。

3、文字

文字用系统自带的常规字体，且分一级标题、二级标题、主内容文字、次内容文字、辅助文字(说明或引导性文字，提醒性文字)，分别用不同的字号、颜色。具体字号大小和颜色参考UI设计效果图。

4、内容图片

内容图片均带1px描边;内容图片未加载出来时显示系统默认图片。

 （图片来自网络）

网页ui设计规范二、 信息交互规范

1、数据操作-显示数据(表格)

(1)表头：字体加粗、且比单无格内容字体大一号，且体字体大小参照UI效果图。

(2)单无格：文字图片内容左对齐，数字、金额内容右对齐。

(3)操作内容原则上均用文字表达，如“编辑-删除”

(4)鼠标划过表格单行时，颜色高亮。

(5)原则上每页显示15-20条数据，实际显示条数据可按设计排列效果而定。

(6)表格中不定长的字段，固定显示宽度，超出内容用“…”显示光标停留后，在浮动层显示详细内容。

2、选中数据

(1)勾选全选则选中当页所有记录

(2)去掉当页某个记录的勾选，则全选也去掉勾选。

(3)翻页后，自动去掉已勾选的记录及全选的勾选。

(4)翻页后是否进行选择记录的保留应试具体业务而定。

(5)刷新页面后，自动去掉已勾选的记录及全选的勾选。

3、新增数据

(1)新增的记录必须排在新增页的首行;

(2)所有列表页面默认按数据新增时间倒序排列。

(3)提交失败后留在当前提交页，且保存用户已经输入的内容以便再次提交。

(4)提交成功后自动回到数据列表页。

(5)提交时需对主要标识字段进行重复值、空值(空格)判断。

 （图片来自网络）

4、修改数据

(1)修改完成后必须回到原记录所在位置，且刷新显示修改后的值。

(2)提交失败后留在当前提交页，且保存用户已经输入的内容以便再次提交。

(3)在查询条件下修改返回后，保留原有查询条件，且修改后的数据如果不满足查询条件则不显示。

(4)提交时需对主标识字段进行重复值、空值(空格)判断。

5、查询数据

(1)把所有查询条件全部显示出来，并放在查询列表上方位置。

(2)每个查询条件必须有预置文案。

(3)每次查询后保留当前输入的查询条件

       以上就是小编给大家整理的网页ui设计规范中的页面信息规范及交互规范了。这些都是ui设计需要知道的规范，如果你刚入行就需要注意了