[企业网上银行页面开发规范.doc

LianaV3.5企业网上银行UI规范  第一章 引言 3 1.1 目的 3 1.2 适用范围 3 第二章 用户界面设计细则 4 2.1企业网银主界面框架 4 2.1.1标准界面框架 4 2.1.2网页尺寸 4 2.1.3界面风格 5 2.1.4界面安全控制说明 16 2.1.5页面号 16 2.1.6功能简述说明文字 16 2.2个人网银登录页 17 第三章UI-CSS说明 18 第一章 引言 目的 以用户为中心。使LianaV3.5网银企业版的界面保持一致性及相互间的设计连贯性，结合用户研究对LianaV3.5网银企业版的界面制作、开发作一个宏观的规范，以体现产品易用性，丰富用户体验。 适用范围 本文档适用于“LianaV3.5银行企业网上银行” 第二章 用户界面设计细则 2.1企业网银主界面框架 2.1.1标准界面框架 logo 二级菜单 二级菜单 二级菜单 二级菜单 二级菜单 交易区 版权信息 2.1.2网页尺寸 网页宽度 以1024×768的屏幕分辨率为准，为避免显示过于拥挤，页面宽度为960px居中显示。 网页高度 设计、制作时尽量考虑现有页面高度的利用率，按1024×768的屏幕分辨率，导航、信息操作区的大部分内容尽量在第一屏内显示完成。由于操作界面过长，则严格控制不出现内部滚动条。 2.1.3界面风格 页面布局 页面上端名称统一为“LianaV3.5企业网上银行”。登入后页面分为三个区域：主导航区、左侧信息区，交易区，网银中所显示的所有页面也都分为这三个区域。 导航区 主导航区分为一级菜单和二级菜单。 一级菜单和二级菜单均有两种状态：初始状态和当前状态。 三级菜单在左侧信息区用户登录信息的下面 左侧信息区 用户登录信息：显示用户名，用户登录时间及预留信息。 菜单列表：三级菜单，显示所有三级菜单列表。 新消息列表：显示未阅读的新消息条数，最高显示TOP4， 点击更多可阅读更多新消息。 银行公告：最多显示为TOP4条公告，点击更多可阅读更多银行公告。 内操作区交易区内容 用于显示交易操作界面。主要包括：表单提交列表、数据信息显示、功能简述和说明文字。 操作区在界面的显示区域中最大，属于界面框架的一部分，上下左右边距为10px。 交易区域显示交易的操作页面和结果页面，有如下一些整体要求： 该页面的Title和菜单对应的选项一致，而不区分是否是提交页面还是确认页面，。 交易页面的所有按钮统一居中对齐排列，功能按钮按照如下图描述进行排列： 确认页面： 错误页面：显示交易失败并且显示交易失败原因 成功结果页面：提示成功并显示成功信息 交易页面跳转流程 第一个页面：下一步 只有一步的时候： 确认 重置 确认页面：确认 下一步 中间步：上一步 下一步 结果页：返回（返回第一个交易页面） 页面统一显示内容 在系统中所有页面中统一显示如下字眼：“账户”、“昵称”、“电子银行密码”、“联系人列表” “查询利率” “查询网点”等。 界面 操作项 基本规范 UI色彩与字体 标题区、标题行和正文区应使用不同大小的字体。具体见css规范 1）中文采用标准字体“宋体”，特殊字体效果使用图片取代，保证每个用户使用起来显示都很正常。字体大小为12px 英文字体统一使用Arial，Microsoft Sans Serif ，Verdana等 字体大小为12px 3）不可修改的字段，统一使用灰色文字显示 4）金额用红色12px字体 金额千位后加逗号 窗口风格 1）弹出窗口显示在主窗体的居中放置 布局 1）交易区表格和左右的边距为5px 2）交易区文字列表以冒号（粗体）右对齐 3）尽量让窗体中显示大部分常用功能让布局合理? 按钮 1）操作按钮风格相同，大小相似，字体一致 2）按钮统一居中对齐 3）协议： 所有需要签订协议的 三级菜单第一个是使用指南 第二个是服务协议 协议风格统一 4）联系人名册按钮统一叫联系人名册 控件 1）各复选框和选项框按选择几率的高低而先后排列 2）复选框和选项框要有默认选项，并支持Tab选择，默认为第一个 3）界面空间较小时使用下拉框而不用选择框 4）选项数较少时使用选项框，相反使用下拉列表框 文本框输入 输入框 1）右对齐。 2）被禁用时，输入框和文本域变灰。 3）emali输入框 不超过15位 4）手机输入框不超过11位 5）密码输入框不超过6位 必输项 1）必输项中不可为空，不可输入空格 2）必输项提示以红色星号（*）标识，比如“* 转账金额” 3）密码只有在输入错