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