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菜单栏可伸缩

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

 

总结:

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

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

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

  • 0
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前后端交互是指前端和后端之间进行数据传输与交互的过程。在Web大作业中,前后端交互是非常重要的一环。 前端负责处理用户的界面展示和交互,通过HTML、CSS和JavaScript等技术实现网页的布局、样式和功能。前端通过与后端进行交互,从后端获取数据,并将数据展示在用户界面上。用户在前端界面上进行操作,前端将操作数据发送给后端进行处理。 后端负责处理前端发送过来的请求,进行业务逻辑的处理和数据的存储。后端通过与数据库进行交互,查询、更新或删除数据。处理完成后,将结果返回给前端。 前后端交互的实现方式有多种,常见的有AJAX、RESTful API等。其中,AJAX可以实现局部刷新,通过异步发送请求,实现网页的动态更新,提升用户体验。RESTful API则是一种标准的接口设计规范,通过URL和HTTP方法对资源进行操作,实现前后端的数据交互。 在Web大作业中,前后端交互的实现需要考虑网络的稳定性和安全性。为了提高用户体验,需要减少前后端的数据传输量,减轻服务器的负载。同时,为了保护用户的数据安全,需要对数据进行加密传输和输入验证。 总而言之,前后端交互对于Web大作业的成功实现至关重要。通过合理的前后端交互设计,可以提升用户体验,优化系统性能,保护用户数据安全。因此,在进行Web大作业时,前后端交互的设计和实现需要充分重视。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值