web 交互规范

一、  总则

1.   目的

《 Web 系统交互规范》以用户为中心，以用户的使用习惯与心理需求为出发点，结合以往项目经验，对用户习惯和产品交互各个方面做了相关的描述，为公司相关产品与项目的用户界面提供规范与指导。

在 Web 类型系统开发过程中，为不同协作部门的相关人员提供统一的规范与指导，保证产品界面最终实现规范化，标准化；

解决产品的可用性、易用性，使产品在界面外观及操作行为上形成一致化标准，便于用户记忆与理解，使操作更简单快捷，提高工作效率；

使公司产品胜于细节，贴近用户的心理需求，提高整体认知度，改善用户体验，提升产品知名度。

2.   基本原则

基本原则主要用来说明此规范的指导思想和设计依据，为其他派生原则的总纲包括以下几个方面：

3.   定义

通用组件：可在各个页面中重复使用的功能组件；

浮层：在父页面中以 Div 层形式弹出的界面，该界面分两层，第一层会以灰色半透明的方式遮盖父页面，第二层为内容层，内容层以水平居中的方式叠加在第一层上，该界面定义为浮层；

4.   适用对象

本文档适用于广州市昊恒信息科技有限公司所有团队的Web 项目设计活动及开发活动，所有团队人员在执行上述活动是都须遵守本文档中相关的规定。

 

 

二、  具体内容

2.1页面信息规范

2.1.1 页面框架                               

ü   规范 Web 系统的页面布局框架，统一定义菜单区域位置与内容区域位置。

页面框架使用左右框架，点击菜单项，页面不允许整页刷新，只允许局部刷新。

菜单放置于页面左部，则最多只允许三级菜单，不同的菜单允许添加菜单图标。鼠标移动至菜单（顶级及次级菜单），除鼠标图标允许有变化外，不允许页面有任何效果。次级菜单的展开，必须通过点击对应的上级菜单项。

页面布局使用左右或者上左右，至于具体的实现则按照实际需求来实现。

菜单层级关系显示，只需要给最低层的菜单选中状态颜色。该选中的菜单父节点以图标区分。

目前基本可以确定成型的有logo部分、title部分、用户快捷操作部分。

点击logo或者title部分。默认跳转至首页。

用户快捷操作部分包括显示当前登录用户，点击有如下选择：修改密码，以及查看详情。

修改密码以弹出框形式修改。(修改密码所要提供的资料有需求决定。默认只要原密码)

查看详情建议显示如下内容：

1.   登录情况：(如：用户于2017-04-24 9:00:00 由IP为192.168.11.111登录，默认列最近5次，非表格形式列出来，如需查看全部，点击可跳转至具体菜单下查看。)

2.   操作记录：如上一次查询记录。(仅显示菜单及查询条件如：最近查询资产管理—资产列表：IP为192.168.11.111且是否在线为是的结果)

3.   更多具体内容，遵循项目内容而定。

铃铛显示未处理消息，大于99则显示99+

鼠标移上去分别显示各类消息数，点击具体类可跳转至制定页面处理消息。

退出则是注销登录。

设置：

是否有设置选项由需求决定，设置内容也有需求决定。但是切记，这是一个快捷设置系统配置的地方。如皮肤，语言等等。

 

2.1.2 新窗口

ü   规范页面链接或按钮触发页面的打开方式，页面打开方式共有三种，如下：

l   原页面跳转：在当前页面打开；

l   浮层弹窗：在当前页面进行浮层弹窗；

两种都支持。

获取明细则用浮层(弹出框)窗。

目前的新窗口做法都是弹出框的形式。

虽然一直觉得不好看，且多层弹出的形式不可取，但是一直没有更好的显示方式，暂且还是由弹出框来承担。除非哪一天设计出更出色的展现形式再换。

 

 

2.1.3 记录明细页面

ü   规范记录明细页面中需要包含的标题、按钮及页面复用通则，如下：

l   在页面顶部需有标题区域；

l   新增、编辑及查询的单据页面应使用相同页面；

l   如无特殊业务逻辑，记录明细页面中按钮名称只允许为“保存”、“取消”；

这一部分讲的是弹出框的标准。

现阶段，弹出框的组成部分可以划分为三块。

一、     标题

二、     内容

三、     页脚

弹出框默认打开时，鼠标焦点在第一个输入框。例如新增时的第一个输入框。

弹出框可以被拖拽位置，但是并不能缩放大小。

弹出框置前，背景允许灰与不灰。(可配置，根据需求变动)

点弹出框外部是否允许关闭弹出框。按esc键同理。(可配置，根据需求变动)

弹出框宽度：自由调配，超出内容是否允许出现滚动条由需求决定。

弹出框高度：最高不超过屏幕高度。如内容超出高度则显示内部滚动条。

弹出框页脚出现的按钮数量以及按钮文字：

按钮数量目前仅限两个， 保存和取消。

 

新增

页面标题应有“新增”字眼；

页面关闭只能通过页面的关闭按钮与点击保存按钮进行关闭

 

编辑

页面标题应有“编辑”字眼；

 

查看

页面标题应有“查看”字眼；

页面中如无特殊业务需求，查看页面不允许存在任何按钮，除页面头的关闭按钮以外。

页面中如无特殊业务需求，查看记录中的任何内容均不允许编辑

 

2.1.4 光标定位

ü   规范系统中可输入项或选择内容的数据录入入口的光标定位处理。

页面中，支持键盘 Tab 自动切换光标功能，Tab 键的顺序与控件排列顺序一致，行间由左到右，总体由上到下；

打开新增或编辑页面时，光标初始定位在第一个待输入的输入框或选择框；

   当鼠标离开输入框焦点时验证输入内容，如果验证不通过则需要指出来违反了哪个验证规则。

提交内容时再验证一遍，不通过则不提交，同时指出具体哪个输入违反了规则，并获得焦点。

例如：

 

2.1.5 功能按钮

ü   规范系统按钮的使用规范、命名规范与按钮位置。

按钮分为表格顶部的功能按钮，以及表格内部的操作按钮

统一概念，首先明确功能按钮为何物。

功能按钮：放置于表格顶部，有特定功能事件的按钮。(例如：导入导出，批量xx，新增搜索等等)

功能按钮以小图标(icon)加文字显示为button的按钮。

操作按钮以小图标(icon)显示，icon的选择，修改，删除，详情为固定icon，其余操作选择表述正确的icon或者贴近的icon图标。并放置于表格行尾。

行首是否有复选框则根据具体的需求。

例如：

 

主页面按钮放置位置

编辑、查看、删除等按钮放置于数据列表中的操作列内，每条记录对应一组按钮

新增、导出等通用按钮放置于数据列表上侧

2.2信息交互规范

2.2.1 预信息提示

ü   规范系统需要提供较多的预先信息，让用户了解如何使用系统并了解操作可能的后果。

预信息提示包括：内容提交提示、谨慎操作提示及差异化规则提示。

输入预提示信息，在输入框中提示输入的内容。

谨慎操作提示为重点醒目加粗方式提示用户操作的后果。

 

内容提交

每个输入项、条件选项（如日期选择）均需要给出提示信息，提示信息可放置输入框内部。

如输入框需要输入特定的内容，如邮箱，电话，ip之类的则在框内提示输入内容。

如日期或者下拉选择的，没有提示，而是选择了。

 

谨慎操作

针对不可修改、重要操作选择等需要用户谨慎处理的操作，均需要给出提示信息，如任务是否需要启动，删除是否为永久删除等。

 

差异化规则

当一个功能的规则与用户习惯的规则具有一定的差异或比较复杂时，需要给出提示，如选择资产时，资产没有维护区域导致不能选择等。

 

2.2.2 操作信息提示

ü   规范系统中发生任何操作时无论成功与否，均需要进行信息提示。

操作信息提示包括：确认提示、内容提示。

确认操作

修改设置、删除数据、任务启动等操作时需要弹出提示框，用户需要进行选择后才能执行。

操作可对内容进行修改的功能时，需要提示用户操作后果。待确认以后再提交。

 

错误提示

当用户操作不符合系统规则时，需要进行相应的提示，错误提示分为：即时提示、提交后提示。

错误提示或者警告提示。

如批量操作时，未勾选内容直接点击删除按钮提示警告框。

如果修改内容时，某项内容不符合规则时，提示错误框。

此提示为验证时及时提示，以及提交后返回消息提示。

n   即时提示

需要手动输入/选择的项目可以进行即时提示，当输入控件焦点移除后针对内容进行判断，如有错误立即进行提示，如 IP 格式判断，结束时间早于开始时间等。

 

n   提交后提示

对于部分内容无法立即判断是否符合规则，则在表单提交后由后台进行判断，如有错误则进行提示，如需要检查 IP 段内的 IP 数量是否小于255 个。

 

读取提示

任何界面切换或数据加载，均需要加载等待效果。背景不变色。

2.2.3 结果信息提示

ü   规范系统中发生任何操作时无，均需要进行反馈结果信息提示。

结果信息提示分为保存结果提示。

保存结果提示

当进行单据的新增/编辑此类涉及到数据保存的操作，不管成功与否均需要进行提示。

 

2.3通用组件规范

2.3.1 导航条

面包屑，放置于目标页面的顶部，格式参考如下： 暴露面任务 > 识别任务 > 识别任务详情；

面包屑内容为各菜单层的菜单项名称，及具体的目标页面名称；

激活标签与未激活标签显示不同颜色；

未激活标签可通过鼠标点击触发为激活；

支持鼠标点击跳转。

2.3.2 按钮

各页面的功能操作按钮需统一样式，通用操作的名称统一

按钮需要定义可用、不可用、选中、点击时的样式；

2.3.3 高级搜索

高级搜索的条件全部展示于表格上部，没有普通搜索；

高级搜索区域内，一行最多显示 3-4 个搜索条件；

触发高级搜索功能的按钮名称为“查询”，不允许为“搜索”；

“查询”按钮可通过回车键触发；

 

 

2.3.4 数据列表

采用 Table 方式布局，表头样式与表格内容样式有明显区别；

表头允许升降序排序；

如有操作栏，则操作栏位于最右侧；

表记录需有隔行背景色，鼠标移动高亮显示；

数据列表中的内容，需要 100% 显示，如信息显示不全则需加“…”加以标识，鼠标移动可显示全部内容；

 

2.3.5 分页

每页条目设置框位于数据列表上部或分页信息面板旁边，默认是列表上部。；

分页信息面板（当前页码，显示几条到几条数据，共有多少数据等信息）与分页按钮处于同一行位置，位于数据列表下部；

分页信息面板位于左侧，分页按钮位于右侧；

分页按钮

当页码为首页时，上一页不可用

当页面未尾页时，下一页不可用

当页面只有一页时，上一页与下一页不可用

分页页码只显示 5 项

同时支持跳转至指定页

2.3.6 表单

2.3.7 输入框

输入框组成部分为：标题区域 + 输入框 + 必填提示 + 格式要求提示 + 对错判断反馈；

标题区域长宽尺寸及字符样式必须保持一致，标题区域内的文字位置必须水平右对齐，垂直居中显示；

单行文本输入框长宽尺寸必须统一；

多行文本输入框长宽尺寸原则上需要保持统一，长度必须统一，高度可根据允许最大输入字符数进行调整；

所有页面内单行与多行输入框须有边框；

所有页面内输入框中所输入的字符样式必须保持一致；

2.3.8 消息框

二次确认框

针对任何敏感操作需要使用二次确认框进行二次确认，包括：删除记录、确认记录、任务启动暂停停止等。

二次确认框只允许有两个按钮：确定、取消。按钮处于确认框右下角，确定按钮位于取消按钮左边

用于提示用户进行二次确认操作时弹出的框。

 

浮动消息框

只允许成功消息使用消息框，错误消息禁止使用浮动消息框。浮动消息框位于页面右上角，停留3 秒。

用于显示消息的提示框。

通常用于操作完成以后的消息提示。

 

2.3.9菜单栏可伸缩

菜单都提供收缩展开按钮。

 

总结：

该文档只记录通用部分与默认部分。产品与项目最终成型来自于需求。

如需求未提及的地方，则按文档默认标准来执行。

注意：此文档会持续更新。