LianaV3.5企业网上银行UI规范.doc
LianaV3.5企业网上银行UI规范 LianaV3.5企业网上银行UI规范第一章 引言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说明18第一章 引言1.1 目的以用户为中心。使LianaV3.5网银企业版的界面保持一致性及相互间的设计连贯性，结合用户研究对LianaV3.5网银企业版的界面制作、开发作一个宏观的规范，以体现产品易用性，丰富用户体验。1.2 适用范围本文档适用于“LianaV3.5银行企业网上银行”第二章 用户界面设计细则2.1企业网银主界面框架2.1.1标准界面框架一级菜单一级菜单一级菜单logo 二级菜单 二级菜单 二级菜单 二级菜单 二级菜单用户登录信息三级菜单新消息列表银行公告当前路径功能简述及说明交易区版权信息2.1.2网页尺寸网页宽度以1024×768的屏幕分辨率为准，为避免显示过于拥挤，页面宽度为960px居中显示。网页高度设计、制作时尽量考虑现有页面高度的利用率，按1024×768的屏幕分辨率，导航、信息操作区的大部分内容尽量在第一屏内显示完成。由于操作界面过长，则严格控制不出现内部滚动条。2.1.3界面风格2.1.3.1页面布局页面上端名称统一为“LianaV3.5企业网上银行”。登入后页面分为三个区域：主导航区、左侧信息区，交易区，网银中所显示的所有页面也都分为这三个区域。2.1.3.2导航区Ø 主导航区分为一级菜单和二级菜单。Ø 一级菜单和二级菜单均有两种状态：初始状态和当前状态。Ø 三级菜单在左侧信息区用户登录信息的下面2.1.3.3左侧信息区Ø 用户登录信息：显示用户名，用户登录时间及预留信息。Ø 菜单列表：三级菜单，显示所有三级菜单列表。Ø 新消息列表：显示未阅读的新消息条数，最高显示TOP4， 点击更多可阅读更多新消息。Ø 银行公告：最多显示为TOP4条公告，点击更多可阅读更多银行公告。2.1.3.4内操作区交易区内容用于显示交易操作界面。主要包括：表单提交列表、数据信息显示、功能简述和说明文字。操作区在界面的显示区域中最大，属于界面框架的一部分，上下左右边距为10px。 交易区域显示交易的操作页面和结果页面，有如下一些整体要求：Ø 该页面的Title和菜单对应的选项一致，而不区分是否是提交页面还是确认页面，。Ø 交易页面的所有按钮统一居中对齐排列，功能按钮按照如下图描述进行排列：a) 确认页面：b) 错误页面：显示交易失败并且显示交易失败原因c) 成功结果页面：提示成功并显示成功信息2.1.3.6交易页面跳转流程第一个页面：下一步只有一步的时候： 确认 重置确认页面：确认 下一步中间步：上一步 下一步结果页：返回（返回第一个交易页面）2.1.3.7页面统一显示内容在系统中所有页面中统一显示如下字眼：“账户”、“昵称”、“电子银行密码”、“联系人列表” “查询利率” “查询网点”等。界面操作项基本规范UI色彩与字体标题区、标题行和正文区应使用不同大小的字体。具体见css规范1）中文采用标准字体“宋体”，特殊字体效果使用图片取代，保证每个用户使用起来显示都很正常。字体大小为12px英文字体统一使用Arial，Microsoft Sans Serif ，Verdana等字体大小为12px3）不可修改的字段，统一使用灰色文字显示4）金额用红色12px字体 金额千位后加逗号窗口风格1）弹出窗口显示在主窗体的居中放置 布局1）交易区表格和左右的边距为5px2）交易区文字列表以冒号（粗体）右对齐3）尽量让窗体中显示大部分常用功能让布局合理 按钮1）操作按钮风格相同，大小相似，字体一致2）按钮统一居中对齐3）协议：所有需要签订协议的 三级菜单第一个是使用指南 第二个是服务协议 协议风格统一4）联系人名册按钮统一叫联系人名册控件1）各复选框和选项框按选择几率的高低而先后排列 2）复选框和选项框要有默认选项，并支持Tab选择，默认为第一个3）界面空间较小时使用下拉框而不用选择框4）选项数较少时使用选项框，相反使用下拉列表框文本框输入输入框1）右对齐。2）被禁用时，输入框和文本域变灰。3）emali输入框 不超过15位4）手机输入框不超过11位5）密码输入框不超过6位必输项1）必输项中不可为空，不可输入空格2）必输项提示以红色星号（*）标识，比如“* 转账金额”3）密码只有在输入错误的时候提示，提示语言为：交易密码错误，请输入您的6位数字密码4) LianaV3.5银行的账号为15位数字，中间无任何字符间隔字段长度超过数据库规定长度时不允许输入单域校检提示联系电话 email 和密码 的单域校检后不需要提示日期格式1）日期显示格式一致为：yyyy-mm-dd2）使用日期控件，不是手工录入，而是通过按钮选择特殊字符和标点符号-特殊字符的输入需要在后期统一考虑，主要是后台系统的数据输入校验约束未定。账户、账号描述载体的用账户，描述号码的用账号，账号统一为15位数字+账户类型 如：123456789123456|人民币储蓄帐户单行文本框/多行文本框1) 长度合适，可以容纳相应文字，但不能超过数据库该字段长度，最好将可以输入的最大字符数标在旁边。建议单行文本框中当输入的字符超过一定长度时再输入无效；对于多行文本框给出最大字符数标识密码输入1）需在需求中定义密码是否允许为空或空格；密码是否允许特殊字符；是否区分大小写，密码的可输入长度2）用户界面行为操作项基本规范鼠标1）鼠标为不可点击状态时显示箭头，可点击状态显示手型； 光标定位1）打开新增（修改）页面时，光标的初始定位应尽量在第一个待输入的文本区2）因输入不正确提示用户重新输入时，光标默认focus在出错的输入区，并高亮全选该错误输入3）若必输项未填写完毕就提交，应给出说明信息并能自动获得焦点4）可写控件检测到非法输入后应给出说明并能自动获得焦点2.1.3.8页面数据格式1 对于货币，任何语言版本都显示为英文缩写，如果在列表中，则表头为货币缩写即可。2 页面表单中无数据的栏位显示为“-”。3 对于日期，使用日历选择，输入栏位格式统一为“YYYYMMDD”，显示栏位格式统一为“YYYY-MM-DD”。4 含时间的日期显示格式为：“YYYY-MM-DD hh:mm:ss” ，24小时。5 页面显示字体不作特别控制，为系统浏览器支持的默认字体。6 页面数据默认靠左显示，金额域靠右显示，货币置中显示。7 金额域的显示/输入方式i. 显示时，使用千分位“，”分割，形如：5,888.88, 并有两个小数位, 低币值货币除外；ii. 输入时，用户输入数字，自动format为千分位形式，并包括小数点后两位。比如用户希望输入50000元，则用户需要输入“5”、“0”、“0”、“0”、“0”，然后页面自动格式化回显为“50,000.00”;用户希望输入50000.94元，则用户需要依次输入“5”、“0”、“0”、“0”、“0”、“.”、“9”、“4”，然后页面自动格式化回显为“50,000.94”。页面自动格式化回显的方式为在离开该输入域后自动格式化。8 百分数的“”放到数字后边。2.1.3.9打印和下载打印和下载右在列表下方右对齐2.1.3.10查询版面查询条件：查询条件 和重置功能，重置恢复系统默认的日期查询结果：查询结果在查询下面显示如果没有符合查询条件的记录，则显示“抱歉，未找到和您查询相关的结果”。2.1.3.11下拉选择框Ø 对于在录入页面存在下拉列表栏位的交易，下拉列表供用户选择的栏位的默认值统一为"请选择"。如交易有特别控制, 按该交易特别控制办理。Ø 如果两个下拉列表栏位存在联动关系，则选择了联动的数据项后（即非默认值时）才能选择被联动的数据项。如果不选择具体的账户名称，则账户栏位也保持默认值"请选择"。不论是否有选择项（一个、多个、没有），都默认显示“请选择”。2.1.3.12交易过渡页面负载过大的交易一般需要显示过渡页面，提示用户“正在查询中，请您稍候。”字样。2.1.3.13翻页页面翻页导航在列表的上下方都有，避免列表很长的时候提供易用性操作2.1.3.14单选与复选单选框单选按钮是一组相互排斥的选项，只能选中一个，选项标记为圆形按钮。默认第一个是选择状态复选框复选框按钮不相互排斥，可以选择一个或多个一般竖向对齐比横向对齐更易于浏览。2.1.3.15单域校检无输入状态：提示文字放在输入框后面左对齐，尽量控制在两行内键入状态：密码输入错误的时候请统一提示：交易密码错误，请输入您的6位数字密码2.1.3.16交易页面校验通用处理对于浏览器端完成的输入数据合法性校验（即使用浏览器脚本语言进行的校验，比如：输入金额格式合法性检查），除非特别要求，则在用户点击“提交”或者“确认”按钮后，一并校验用户的输入数据是否合法，若校验不通过，则提示用户具体的错误讯息，并保留原有的输入讯息（即不做已输入数据的清除）。对于栏位是否输入中文、特殊字符以及字母大小写的的检查，通常都在填写完当前栏位跳至下一栏位时进行检查及弹出错误讯息。对于必须在服务器端进行的校验运算，则在交易数据提交服务器后进行验证处理，如果错误，直接返回错误页面，提示错误讯息。2.1.4界面安全控制说明Ø 用户通过网站上链接登入网上银行后，系统将弹出固定大小的窗口（占据整个视窗）显示登入页面，不显示浏览器地址栏、菜单栏、工具栏。Ø 登入后所有的网银页面中都禁止鼠标右键操作。Ø Browser和服务器之间的连接使用SSL安全链接。Ø 同一个人网银的用户在同一时间只允许有一个登入。Ø 内部管理中同一柜员在同一时间只允许有一个登入。Ø 对于所有非查询类的交易，系统有控制不允许用户在同一笔交易的确认页面连续点击“确认”按钮重复提交。2.1.5页面号页面号位于最下方，居右显示，字体颜色为黑色，字号12号，与交易区上边距为5px。2.1.6功能简述说明文字功能简述和说明文字在操作区下部，风格统一功能简述在上面统一称：备注。 说明文字在下面，统一称：对具体操作进行说明，与交易区的上边距为20px，左侧缩进离操作区左侧边距为30px。2.2企业网银登录页登录页为系统入口，元素统一为：账户/昵称 登录密码 验证码 语言类型， 页面内容以登录信息为主，附加一些快捷链接、重要提醒、帮助等，在满足功能需要的同时，在视觉表现上能够体现企业形象或产品理念。以1024x768分辨率为准，页面宽度为1000px居中显示。第三章UI-CSS说明企业网银有四种颜色风格（蓝色风格，绿色风格，红色风格，灰色风格）可供换肤，样式文件分别在根目录下css/default，css/green，css/red，css/gray文件夹下。其中css/default文件夹下样式文件为默认皮肤风格，交易区的样式表文件应调用根目录下css/default文件夹下的liana.css文件主框架页面的样式表文件应调用根目录下css/default文件夹下的frame_default.css文件1. 在所有页面最开始，应加入W3C声明，声明如下：<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" "http:/www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2. 一级菜单on(当前)状态应使用：" menu1_on"样式；off(初始)状态使用：" menu1_off "样式；图13. 二级菜单on(当前)状态应使用：" menu2_on"样式；off(初始)状态使用：" menu2_off "样式；图24. 三级菜单on(当前)状态应使用：" menu3_on"样式；off(初始)状态使用：" menu3_off "样式； 图35 列表表格使用" list_table "样式，table上面有一个翻页功能，其样式为"turnpage "，示范代码如下：<div id="turnPageDiv" class="turnpage"></div><table width="90%" align="center" class="list_table" cellspacing="1" cellpadding="0" border="0"><thead><tr><td width="20"></td><td >别名</td><td >账号</td><td >币种</td></tr></thead><tbody><tr class="bg1"><td > </td><td >我的准贷记卡</td><td >4532424*2015</td><td >人民币</td></tr><tr class="bg2"><td> </td><td>广州储蓄卡</td><td>4367423324*3574</td><td>人民币</td></tr><tr class="bg1"><td > </td><td >我的准贷记卡</td><td >4532424*2015</td><td >人民币</td></tr><tr class="bg2"><td> </td><td>广州储蓄卡</td><td>4367423324*3574</td><td>人民币</td></tr><tbody></table>图46 历史表格使用" history_table"样式，示范代码如下：<table id="historyTable" width="90%" align="center" class="history_table" border="0" cellpadding="0" cellspacing="0" ><thead id="historyTableHead" style="cursor:pointer" ><tr><td align="center" colspan="3">指令处理历史</td></tr></thead><tbody id="historyTableBody"><tr class="title"><td width="150" >处理时间</td><td width="200" >处理人</td><td >处理意见</td></tr><tr><td >20080912</td><td >张三</td><td >通过</td></tr><tr><td >20080912</td><td >张三</td><td >通过</td></tr></tbody></table>图57 明细表格使用" detail_table"样式，示范代码如下：<table width="90%" align="center" class="detail_table" cellspacing="0" cellpadding="0" border="0"><td align="center" colspan="4">指令明细</td><tr><td class="title" width="80">序号</td><td width="200">1145214123</td><td class="title" width="80">指令状态</td><td>交易成功</td></tr><tr><td class="title">付款账号</td><td>6413092132323232323</td><td class="title">付款户名</td><td>王老五</td></tr></table>图68 输入表格使用" input_table"样式，示范代码如下： <table width="90%" align="center" class="input_table" cellspacing="0" cellpadding="0" border="1"><tr><td colspan="2">申请担保贷款金额（万元）：<input type="text" size="30"></td> </tr> <tr><td colspan="2">担保贷款资金用途：<br><textarea cols="50" rows="3"></textarea></td></tr><tr><td colspan="2">提交文件：<br><input type="file" class="uploadFile"/></td></tr></table>图79 所有按钮使用" button_light"样式，如：<input type="button" class=" button_light " value=" 返 回" />，按钮在交易页面的中间位置。图810 页面底部的说明使用" clew"样式，根据说明内容的多少增减<li>*</li>。示范代码如下：<div class="clew"><ul>说明：<li>可自定义帐户的分组类型。</li><li>设置完分组后立刻生效。</li><li>设.</li><li>. </li></ul></div>图911 当光标定位在输入项时，与其相对应的操作提示成高亮状态（如图12）应使用：" tip_on "样式代码为：<div class="tip_on">提示区域:选中状态</div> 图1012 交易成功页面使用：" success"样式，示范代码如下：<div class="success"><div class="success_body"><ul><span style="font-size:14px;font-weight:bold">恭喜您，您的交易成功，以下是交易信息功</span><li>这里是交易明细1</li><li>这里是交易明细2</li><li>这里是交易明细3</li></ul></div></div>图1113 交易失败页面使用：" error"样式。示范代码如下： <div class="error"> <div class="success_till"><img src="images/icon_error.gif" align="absmiddle"> 对不起，系统出错，交易失败！</div> <div class="space" style="margin-bottom:30px"></div>图1225
