中信银行电子银行系统设计

中信银行电子银行系统设计

本行成立于1987年，是中国改革开放中最早成立的新兴商业银行之一，是中国最早参与国内外金融市场融资的商业银行，并以屡创中国现代金融史上多个第一而蜚声海内外，为中国经济建设做出了积极贡献。2007年4月，本行实现在上海证券交易所和香港联合交易所A+H股同步上市。本行坚持服务实体经济，稳健经营，与时俱进。经过30余年的发展，本行已成为一家总资产规模超6万亿元、员工人数近6万名，具有强大综合实力和品牌竞争力的金融集团。随着互联网技术的发展，银行在发展的过程中不可避免地要与多种场景平台和机构合作，以形成产品与服务、资源与能力等方面的优势互补，这也是市场资源优化配置的结果，具有一定金融科技实力的商业银行开始搭建自己的开放平台，以达到节约成本、统一接口标准、服务更多场景、融合更多场景等目的。人们在移动端办理银行业务已经成为一种常态，本项目开发一款银行的小程序，满足用户在移动端存取款以及办理业务的需求。

一、项目概述 3

（一）背景概述 3

（二）开发工具 4

（三）需求分析 4

（四）业务分析 4

（五）系统功能模块设计 5

二、项目实施 5

（一）项目实施总体介绍 5

（二）首页设计 8

1. 搭建基本框架 8

2. 导航设计 9

3. 轮播设计 11

4. 服务设计 12

5. 新闻设计 14

（三）理财界面设计 16

1.搭建基本框架 16

2.导航设计 16

3.文字设计 17

（四）新闻界面设计 19

1.搭建基本框架 19

2. 轮播设计 19

课程小结 22

参考文献 23

课程小结

网站这个东西包容万象，里面包含的知识我想我一生都不可能学尽。正因如此，这次课程主要是打打基础。

我从中了解了Bootstrap的许多基础，比如说，响应式网站以及Hbuilder这个软件。HBuilder方便书写html代码，在开发中需要自己设计页面时，可以先在Hbuilder中设计好页面，再copy到项目中去，因为HBuilder提供了很多方便的功能供使用者方便开发(专业前端有更高级的开发IDE,对于一个java开发人员来说，HBuilder已经足够了)。

现总结如下:

ctrl+P:便敲代码边看html效果,可以敲一行，看一行的效果,方便了及时调整不合适的样式。HBuilder不用输入<,直接输入关键词，就可以出想要的标签，如输入t出现table,in出现input等等。

而想用好这个软件，一些知识就是必不可少的了。

Boomstrap栅格系统的实现原理非常简单，将网页的总宽度平均分为12份，再调整内外边距，最后结合媒体查询，从而实现强大的响应式栅格系统。栅格系统通过一系列的行(row)与列的组合来创建页面布局，但行必须包含在.container (固定宽度)或.container-fluid ( 100%宽度)类中，以便为其赋予合适的对齐方式和内边距(padding)。通过行在水平方向创建一组列。页面内容应当放置于列内，并且，只有列可以作为行的直接子元素。行使用样式.row,列使用样式.col-*-*，内容应当放置于列内，这种预定义的类可以用来快速创建栅格布局。例如.col-md-4 就表示占4列宽度。借此，我就可以轻松调整页面布局。

此外，导航栏是一个很好的组件，是Bootstrap 网站的一个突出特点。导航栏在网站中作为导航页头的响应式基础组件，导航栏在移动设备的视图中是折叠的，随着可用视口宽度的增加，导航栏也会水平展开。Bootstrap导航栏中包括站点名称和基本的导航样式。创建一个基本导航栏的步骤如下。向<nav>或<div>标签添加.navbar、.navbar-default 类，也可以同时添加role="navigation",以增加可访问性。向<div>标签添加一个标题类.navbar-header,内部包含了带有.navbar-brand 类的<a>标签，用于定义品牌图标。如果是文字，视觉上看起来会更大一号。再添加带有nav，navhar-nav 类的无序列表。通过对导航的学习，我就可以简化页面。

与此同时，轮播也是一个不错的模块。通过它，我们可以展示许多内容且不会占用太多页面。当然，基本的登入界面也是必不可少的，不过没有经过精心的设计，界面不会太美观就是了。对于这一点我们可以去加一些背景与一些花边。

不过，除了这些技术上的问题，我认为对我们目前来说还是积累元素与样式还有其他东西更重要一些。

参考文献

[1] 章早立,翁业林,刘万辉. Bootstrap响应式网站开发实例教程. 机械工业出版社,2020

[2] 刘瑞新. 网页设计与制作教程——Web前端开发(第6版). 机械工业出版社,2020