《企业网上银行页面开发规范》由会员分享，可在线阅读，更多相关《企业网上银行页面开发规范（25页珍藏版）》请在金锄头文库上搜索。
1、 LianaV3.5 企业网上银行 UI 规范1LianaV3.5 企业网上银行企业网上银行 UI 规范规范LianaV3.5 企业网上银行 UI 规范2第一章 引言.31.1目的.31.2适用范围.3第二章 用户界面设计细则.42.1 企业网银主界面框架.42.1.1 标准界面框架.42.1.2 网页尺寸.42.1.3 界面风格.52.1.4 界面安全控制说明.162.1.5 页面号.162.1.6 功能简述说明文字.162.2 个人网银登录页.17第三章 UI-CSS 说明.18LianaV3.5 企业网上银行 UI 规范3第一章第一章 引言引言1.1 目的目的以用户为中心。使 Liana
2、V3.5 网银企业版的界面保持一致性及相互间的设计连贯性，结合用户研究对 LianaV3.5 网银企业版的界面制作、开发作一个宏观的规范，以体现产品易用性，丰富用户体验。1.2 适用范围适用范围本文档适用于“LianaV3.5 银行企业网上银行”LianaV3.5 企业网上银行 UI 规范4第二章第二章 用户界面设计细则用户界面设计细则2.1 企业网银主界面框架企业网银主界面框架2.1.1标准界面框架标准界面框架logo 二级菜单 二级菜单 二级菜单 二级菜单 二级菜单交易区版权信息2.1.2网页尺寸网页尺寸网页宽度网页宽度以 1024768 的屏幕分辨率为准，为避免显示过于拥挤，页面宽度为
3、960px 居中显示。网页高度网页高度设计、制作时尽量考虑现有页面高度的利用率，按 1024768 的屏幕分辨率，导航、信息操作区的大部分内容尽量在第一屏内显示完成。由于操作界面过长，则严格控制不出现内部滚动条。用户登录信息当前路径功能简述及说明新消息列表银行公告一级菜单一级菜单一级菜单三级菜单LianaV3.5 企业网上银行 UI 规范52.1.3界面风格界面风格2.1.3.1页页面面布布局局页面上端名称统一为“LianaV3.5 企业网上银行”。登入后页面分为三个区域：主导航区、左 侧信息区，交易区，网银中所显示的所有页面也都分为这三个区域。2.1.3.2导导航航区区主导航区分为一级菜单和
4、二级菜单。 一级菜单和二级菜单均有两种状态：初始状态和当前状态。LianaV3.5 企业网上银行 UI 规范6三级菜单在左侧信息区用户登录信息的下面2.1.3.3左左侧侧信信息息区区用户登录信息：显示用户名，用户登录时间及预留信息。 菜单列表：三级菜单，显示所有三级菜单列表。 新消息列表：显示未阅读的新消息条数，最高显示 TOP4， 点击更多可阅读更多新消息。 银行公告：最多显示为 TOP4 条公告，点击更多可阅读更多银行公告。2.1.3.4内内操操作作区区交交易易区区内内容容用于显示交易操作界面。主要包括：表单提交列表、数据信息显示、功能简述和说明文字。LianaV3.5 企业网上银行 UI
5、 规范7操作区在界面的显示区域中最大，属于界面框架的一部分，上下左右边距为 10px。 交易区域显示交易的操作页面和结果页面，有如下一些整体要求：交易区域显示交易的操作页面和结果页面，有如下一些整体要求：该页面的 Title 和菜单对应的选项一致，而不区分是否是提交页面还是确认页面，。 交易页面的所有按钮统一居中对齐排列，功能按钮按照如下图描述进行排列： a)确认页面：b)错误页面：显示交易失败并且显示交易失败原因c)成功结果页面：提示成功并显示成功信息LianaV3.5 企业网上银行 UI 规范82.1.3.6交交易易页页面面跳跳转转流流程程第一个页面：下一步只有一步的时候： 确认 重置确认
6、页面：确认 下一步中间步：上一步 下一步结果页：返回（返回第一个交易页面）2.1.3.7页页面面统统一一显显示示内内容容在系统中所有页面中统一显示如下字眼：“账户”、“昵称”、“电子银行密码”、“联系人列表”“查询利率” “查询网点”等。操作项基本规范界面UI 色彩与 字体标题区、标题行和正文区应使用不同大小的字体。具体见 css 规范1）中文采用标准字体“宋体”，特殊字体效果使用图片取代，保证每个用户使用起来显示都很正常。字体大小为 12px英文字体统一使用 Arial，Microsoft Sans Serif ，Verdana 等字体大小为 12pxLianaV3.5 企业网上银行 UI
7、规范93）不可修改的字段，统一使用灰色文字显示4）金额用红色 12px 字体 金额千位后加逗号窗口风格 1）弹出窗口显示在主窗体的居中放置 布局1）交易区表格和左右的边距为 5px2）交易区文字列表以冒号（粗体）右对齐3）尽量让窗体中显示大部分常用功能让布局合理 按钮1）操作按钮风格相同，大小相似，字体一致2）按钮统一居中对齐3）协议：所有需要签订协议的 三级菜单第一个是使用指南 第二个是服务协议 协议 风格统一4）联系人名册按钮统一叫联系人名册控件1）各复选框和选项框按选择几率的高低而先后排列 2）复选框和选项框要有默认选项，并支持 Tab 选择，默认为第一个3）界面空间较小时使用下拉框而不
8、用选择框4）选项数较少时使用选项框，相反使用下拉列表框输入框1）右对齐。2）被禁用时，输入框和文本域变灰。3）emali 输入框 不超过 15 位4）手机输入框不超过 11 位5）密码输入框不超过 6 位文本框 输入必输项1）必输项中不可为空，不可输入空格2）必输项提示以红色星号（*）标识，比如“* 转账金额”3）密码只有在输入错误的时候提示，提示语言为：交易密码错误，请输入您 的 6 位数字密码LianaV3.5 企业网上银行 UI 规范104) LianaV3.5 银行的账号为 15 位数字，中间无任何字符间隔字段长度 超过数据库规定长度时不允许输入单域校检 提示联系电话 email 和密
9、码 的单域校检后不需要提示日期格式 1）日期显示格式一致为：yyyy-mm-dd2）使用日期控件，不是手工录入，而是通过按钮选择特殊字符和标点符 号-特殊字符的输入需要在后期统一考虑，主要是后台系统的数据输入校验约束未定。账户、账 号描述载体的用账户，描述号码的用账号，账号统一为 15 位数字+账户类型 如： 123456789123456|人民币储蓄帐户单行文本 框/多行文 本框1) 长度合适，可以容纳相应文字，但不能超过数据库该字段长度，最好将可 以输入的最大字符数标在旁边。建议单行文本框中当输入的字符超过一定长 度时再输入无效；对于多行文本框给出最大字符数标识密码输入 1）需在需求中定义
10、密码是否允许为空或空格；密码是否允许特殊字符；是否 区分大小写，密码的可输入长度2）操作项基本规范鼠标1）鼠标为不可点击状态时显示箭头，可点击状态显示手型； 用户界 面行为光标定位 1）打开新增（修改）页面时，光标的初始定位应尽量在第一个待输入的文本 区2）因输入不正确提示用户重新输入时，光标默认 focus 在出错的输入区，并 高亮全选该错误输入3）若必输项未填写完毕就提交，应给出说明信息并能自动获得焦点4）可写控件检测到非法输入后应给出说明并能自动获得焦点LianaV3.5 企业网上银行 UI 规范112.1.3.8页页面面数数据据格格式式1对于货币，任何语言版本都显示为英文缩写，如果在列表中，则表头为货币缩写即 可。 2页面表单中无数据的栏位显示为“-”。 3对于日期，使用日历选择，输入栏位格式统一为“YYYYMMDD”，显示栏位格式 统一为“YYYY-MM-DD”。 4含时间的日期显示格式为：“YYYY-MM-DD hh:mm:ss” ，24 小时。 5页面显示字体不作特别控制，为系统浏
