企业网上银页面开发规范.docVIP

LianaV3.5企业网上银行UI规范  TOC \o 1-3 \h \z \u HYPERLINK \l _Toc205877451 第一章 引言 PAGEREF _Toc205877451 \h 3 HYPERLINK \l _Toc205877452 1.1 目的 PAGEREF _Toc205877452 \h 3 HYPERLINK \l _Toc205877453 1.2 适用范围 PAGEREF _Toc205877453 \h 3 HYPERLINK \l _Toc205877454 第二章 用户界面设计细则 PAGEREF _Toc205877454 \h 4 HYPERLINK \l _Toc205877455 2.1企业网银主界面框架 PAGEREF _Toc205877455 \h 4 HYPERLINK \l _Toc205877456 2.1.1标准界面框架 PAGEREF _Toc205877456 \h 4 HYPERLINK \l _Toc205877457 2.1.2网页尺寸 PAGEREF _Toc205877457 \h 4 HYPERLINK \l _Toc205877458 2.1.3界面风格 PAGEREF _Toc205877458 \h 5 HYPERLINK \l _Toc205877459 2.1.4界面安全控制说明 PAGEREF _Toc205877459 \h 16 HYPERLINK \l _Toc205877460 2.1.5页面号 PAGEREF _Toc205877460 \h 16 HYPERLINK \l _Toc205877461 2.1.6功能简述说明文字 PAGEREF _Toc205877461 \h 16 HYPERLINK \l _Toc205877462 2.2个人网银登录页 PAGEREF _Toc205877462 \h 17 HYPERLINK \l _Toc205877463 第三章UI-CSS说明 PAGEREF _Toc205877463 \h 18 TOC \o 1-3 \h \z \u 第一章 引言 目的 以用户为中心。使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和菜单对应的选项一致，而不区分是否是提交页面还是确认页面，。 交易页面的所有按钮统一居中对齐排列，功能按钮按照如下图描述进行排列： 确认页面： 错误页面：显示交易失败并且显示交易失败原因 成功结果页面：提示成功并显示成功信息 交易页面跳转流程 第一个页面：下一步 只有一步的时