p2p借贷系统页面设计与制作学士学位论文.docx

p2p借贷系统页面设计与制作学士学位论文.docx

《p2p借贷系统页面设计与制作学士学位论文.docx》由会员分享，可在线阅读，更多相关《p2p借贷系统页面设计与制作学士学位论文.docx（32页珍藏版）》请在冰豆网上搜索。

p2p借贷系统页面设计与制作学士学位论文

ZHEJIANGWATERCONSERVANCYANDHYDROPOWERCOLLEGE

毕业设计（论文）

题　　目：

P2P借贷系统页面设计与制作

系（部）：

计信系

专业班级：

应用10-2

姓名：

刘秋香

学号：

201090185

指导教师：

王慕明（校外）

指导教师：

周志敏（校内）

迄止时间：

2013年3月15日～2013年4月20日

2013年4月15日

P2P借贷系统页面设计与制作

作者：

刘秋香　　指导教师：

周志敏

摘要

p2p网络借贷平台，是p2p借贷与网络借贷相结合的金融服务网站。

p2p借贷是peertopeerlending的缩写，peer是个人的意思，正式的中文翻译为“人人贷”。

网络借贷指的是借贷过程中，资料与资金、合同、手续等全部通过网络实现，它是随着互联网的发展和民间借贷的兴起而发展起来的一种新的金融模式，这也是未来金融服务的发展趋势。

作为一个依靠web为载体的行业，其网站的完善与否、美观程度、是否方便客户使用等等都关系到这个平台的正常运作。

目前已有多家P2P借贷平台在线上运转，所谓是百家齐鸣、万花争艳了，但平台与平台直接进行对比，却发现各家系统质量参差不齐。

集各家之所长，避各家之所短，这是我这次设计的宗旨。

页面制作上主要采用了photoshopCS5和dreamweaverCS6两个软件，方法上运用HTML和CSS以及javascript与jquery来进行编辑。

用photoshopCS5制作借贷平台最终设计稿，再对psd的设计稿进行切片处理，再使用div和CSS进行网页的布局和样式的编写，用浮动或是定位来排版，在页面动态效果的处理上使用javascript脚本语言或是jquery的组件来实现动画效果。

关键词

P2P；借贷平台；切片；CSS；javascript；jquery

Abstract

P2plendingplatform,isthecombinationofp2plendingborrowingandthenetworkfinancialservicewebsite.Peer-to-peerlendingispeertopeerlending,themeaningofpeerisaperson,aformalChinesetranslationfor"borrowed"toeveryone.Networklendingreferstoborrowingprocess,materialsandproceduresofcapital,contracts,etc.Allthroughthenetwork,itiswiththedevelopmentoftheInternetandtheriseofprivatelendinganddevelopedakindofnewfinancialmodel,whichisalsothefuturedevelopmenttrendoffinancialservices.

Asaindustryrelyonthewebasacarrier,whethertheextentofthesiteisperfectornot,beautiful,convenientcustomeruseandsoonareallrelatedtothenormaloperationoftheplatform.ThereareseveralP2Plendingplatformintheonlineoperation,whatisthehundredflowers,flowersbloom,butplatformcomparedwithplatformdirectly,onlytofindthateachsystemqualityisuneven.Seteachofthedirector,fromeachoftheshort,thisisIthisdesignprinciple.

PageproductionismainlyadoptedphotoshopCS5anddreamweaverCS6twosoftware,methodsusingHTMLandCSS,andjavascriptandjquerytoedit.MadeborrowingphotoshopCS5platformfinaldesigndraft,thentoslicethePSDdesigndraft,thenusingdivandCSSpagelayoutandstyleofwriting,withafloatorpositioningtotypography,dynamiceffectsontheprocessingofthepageusingjavascriptscriptinglanguageorjquerycomponentstoachieveanimationeffects.

Keywords

Peer-to-peer（P2P）;Lendingplatform;Slice;CSS;Javascript;jquery

引言

P2P其中P是英文peer的意思。

主要是指个人通过第三方平台在收取一定费用的前提下向其他个人提供小额借贷的金融模式。

P2P小额借贷是一种将非常小额度的资金聚集起来借贷给有资金需求人群的一种商业模型。

它的社会价值主要体现在满足个人资金需求、发展个人信用体系和提高社会闲散资金利用率三个方面，由2006年“诺贝尔和平奖”得主穆罕默德·尤努斯教授（孟加拉国）首创。

客户对象主要有两方面，一是将资金借出的客户即投资者，另一个是需要贷款的客户即借款者。

P2P借贷平台一方面满足需要贷款的客户发布借款标，一方面满足投资的用户赚钱利息，两者缺一不可。

在制作网页的同时要充分考虑到网站的功能，并对其进行美化。

由于我在杭州融都商务科技有限公司从事前端工作，该公司主要从事P2P借贷系统制作，故而我提出了P2P借贷系统网页的设计与制作这一课题。

2013年将会是借贷行业重新洗牌的一年，优胜劣汰是自然界的至上法则，竞争会无情的淘汰经营不善的、管理不佳的、功能落后的公司，留下那些在前进的浪潮中不断完善不断创新不断突破的公司，为2014年新的发展奠定基石。

在这样一个大前提下，我的课题显得格外有意义。

我在分析现有平台的基础上，结合各个平台的优势，组合成一个能进行二次开发的基础版借贷系统网站，利用PS与Dreamweaver，结合自己掌握的知识，通过div+css布局，再加一些js效果进行页面的效果扩充，同时要进行IE6兼容，虽然现在可能很少有人用IE6，但是不能否认的是，用IE6的人中也有可能是我们的客户，要兼顾到我们每个客户的感受。

我在自己本地上配置了apache，使得本机变成了一个测试机，这样方便我测试网站的功能看到整站的效果。

另外，由于本人是前端，后台系统代码部分均是由融都公司提供，他们的系统是比较完善与成熟的。

1设计稿

1.1首页

1.1.1首页功能定位

网站首页担负着网站“形象大使”的责任，从首页就基本能窥探出网站的定位和服务对象。

由于网站功能定位的差异化，决定了不同类型网站首页肩负“职责”和“表现形式”的差异性，即首页功能、表达形式、传递信息内容、设计风格、页面布局。

例如：

电子商务网站（b2b/b2c/c2c）定位基于产品销售，电子商务网站的用户最关心的是产品的相关情况（功能情况、质量情况、购买/销售情况..），有效的组织产品信息、合理呈现的产品分类目录是电子商务脊梁骨，基于电子商务网站的定位，电子商务网站首页功能重点是目录导航功能，即网站首页要尽量向用户展示所销售产品及服务的分类目录；同时还要向用户传递信息，刺激用户产生购买行为，如：

促销打折信息、新品上市、热销商品、最新成交等等；企业网站作为企业进行网络营销的“根据地”，它的作用不仅在于产品的展示和推广，更重要的是要使客户建立起对企业和产品信心，企业网站首页要尽可能的体现专业性和可信度，首页功能就是要让用户对企业和产品建立信任，首页要有企业介绍信息、资质证明、产品详尽信息等的入口，在细节方面，还要注意企业联系地址是否完整、是否有固定电话、网站是否经过备案……句话：

企业网站首页必须肩负起建立用户信任的职责；

网贷平台的首页必须兼具电子商务网站首页与企业型网站首页的功能，网站首页要尽量向用户展示所销售产品同时要有企业介绍信息、资质证明、产品详尽信息等的入口，要用户对企业和产品建立信任。

1.1.2首页布局

在首页布局上，我采取的是传统的网页布局模式：

图1-1首页布局示意图

1.1.3首页模块详细分解

a.

头部：

吊顶登陆快捷键

LOGO服务电话

一级导航

二级导航

图1-2头部布局示意图

b.

中间内容部分：

广告图banner登陆模块

新闻公告模块1

正在招标的借款模块新闻公告模块2

。

。

。

。

。

。

。

图1-3中间内容布局示意图

c.脚部：

合作伙伴

底部链接

公司地址&备案号&联系方式

图1-4脚部布局示意图

1.1.4首页成型

根据以上布局图设计出最终的首页效果图：

图1-5首页最终效果图

1.2我要投资页面

1.2.1我要投资页面功能定位

我要投资页面是网站用户作为投资者进行投资的主要场所。

网贷平台有很多标种类，主要有抵押标、担保标、净值标、流转标、秒标等，在我要投资页面中我设置了包括搜索按钮跟标列表两部分，满足了用户投资的个性化选择和多元化投资需求。

1.2.2我要投资页面布局

由于是模板化制作，整站的头部文件与脚部文件都是共用的，在下面的介绍中我就将不再详细阐述这两部分。

如下图：

头部

搜索栏

全部标列表

底部

图1-6我要投资页面布局示意图

1.2.2我要投资成型

根据以上布局图设计出最终的首页效果图：

图1-7我要投资页面最终效果图

1.3我要贷款页面

1.3.1我要贷款功能定位

同我要投资页面相对的是我要贷款页面，这是网站满足用户发布借款的场所。

用户可以自行选择发布的标种，可以自己设置利率值。

同时应该配有相应的标种介绍，让新手也可以了解清楚平台的标种。

除此之外可以再根据页面效果增加一些宣传图，让页面丰富些。

1.3.2我要贷款页面布局

根据对我要贷款页面的功能定位，我做出如下图所示的我要贷款页面布局：

头部

宣传图

标种介绍&发标按钮模块

底部

图1-8我要贷款页面布局示意图

1.3.2我要贷款页面成型

图1-9我要贷款页面效果图

1.4个人中心页面

1.4.1个人中心页面功能定位

个人中心页面是网站显示用户个人信息的页面，是网站非常重要的一个页面，用户可以在这里看到自己所有在该网站的行为，包括投了什么标、发了什么标、信用程度如何、是否加入了VIP、银行卡信息等。

用户想要提现与充值也必须在此页面下进行。

故而此页面的列表信息需非常详细，没一个功能都需要一个相应的链接接口相对应，操作方面上也必须简单方便化，不必将就复杂花哨的动态效果。

同样的，广告也是不需要出现的。

1.4.2个人中心页面布局

根据个人中心页面的功能定位，个人中心的页面布局趋向于展示型，故而我设计了一个左右中的布局：

左侧做成一个从上到下的导航，包括了所有个人信息的链接；中间为信息的展示区域；右侧为一些网站的公告与新闻，比重较小。

如下图所示：

图1-10个人中心页面布局示意图

1.4.3个人中心页面定型

根据图1-10个人中心布局示意图，我设计了如下图所示的个人中心页面完成图：

图1-11个人中心页面效果图

1.5咨询服务页面

网贷对于很多用户来说还是很陌生的行业，可能来到我的网站的人都不知道我的网站是做什么的，能给他带来什么利益，咨询服务页面的设立一部分是为这些人解疑答惑。

同时咨询服务页面包括了很多子页面，如新闻报道、网站公告、政策法规、下载中心、关于我们等，可以作为一个展示网站形象、服务网站所有新老用户的平台。

考虑到美观效果，可以增加一个广告栏，饱满网站形象。

根据图1-12咨询服务页面布局示意图，我做出下图所示资讯页面完成稿：

图1-12咨询服务页面效果图

1.6社区论坛页面

社区论坛是方面网站用户相互交流和网站与用户沟通的平台，是一个很重要的信息交流场所。

论坛有多种作用，如分享个人观点、发布资料、讨论互动、公布信息、提高会员归属感等，一个好的论坛是网站的精髓所在。

论坛用的是Discuz模板，CrossdayDiscuz!

Board（简称Discuz!

）是北京康盛新创科技有限责任公司推出的一套通用的社区论坛软件系统。

自2001年6月面世以来，Discuz!

已拥有11年以上的应用历史和200多万网站用户案例，是全球成熟度最高、覆盖率最大的论坛软件系统之一。

图1-14论坛定型图

1.7政策法规页面

政策法规页面是为了让投资者了解网贷行业在我国的规范，我国对P2P借贷的法律规定，减少投资者对网贷行业的风险估计值，让用户明白网贷的合法性。

同时也是体现了该网贷平台会严格遵守法律不会损坏投资者利益的态度，让投资者更放心。

在政策法规页面的布局上，我采用了咨询服务的模板即左侧导航右侧内容的布局形式，形成了整站统一的风格，简洁方面。

参见图1-12咨询服务页面布局示意图。

图1-15政策法规定型图

2设计图制作

以首页为例，我将页面的主色调定为蓝色（R:

3G:

60B:

136），浅蓝色（R:

0G：

162B:

233）作为辅色。

首先，我新建了一个1380x2050像素的画布，利用视图里的参考线，在画布中间限定一个980像素的区域，这个就是后续进行首页设计的区域。

图2-1新建参考线示意图

新建一个图层填充为浅灰色到白色渐变作为底色，打开事先准备好的底纹图，点击编辑里的定义图案，取名为图案底纹按确定，然后再打开丰银凯利的设计页面，按编辑中的填充选项，选择我们保存过的自定图案，按确定按钮，整个页面的底就完成了，后续可以通过透明度来调整底图的深浅。

图2-2背景示意图&图2-3背景图片填充示意图

接下来开根据事先用参考线划分好的区域，进行头部和导航的设计。

高度在26像素左右，长度为1380像素，利用矩形工具，拉出一个26x1380像素的长方形至于顶部，双击图层进行图层样式的选择，做出立体效果，选择渐变叠加调出合适的渐变色。

按确定即可。

在设计区域能，打入文字，按照需求拖入新浪微博的图标，加上一些小细节。

图2-4吊顶制作

图2-5吊顶制作过程示意图

导航部分的制作，利用矩形工具，拉一个合适高度在35像素左右的矩形，图层样式选择渐变叠加，再新建一个图层利用羽化工具做出分割的效果，根据导航内容适当的复制分割效果图层，然后将导航文字内容填上，文字大小在18左右，宋体或者微软雅黑，效果选择无。

图2-6导航制作

根据导航的切换效果，利用矩形工具，拉一个大小合适的框，双击图层，图层样式进行选择，内阴影和颜色填充为白色，在导航图层下新建一个矩形工具图层，拉一个矩形作为二级导航，图层样式选择颜色渐变，描边，然后打入文字，字体大小为12，宋体，效果无。

图2-7导航文字制作

下面进行数据统计模块的设计，拉一个739x32像素的矩形，双击图层，选择图层样式。

打入文字，拉一个小矩形，图层样式设置，做出凹进的效果，再打入数据。

图2-8数据统计模块设计图层示意图

我按照模块与模块间距不小于10像素的原则，在数据统计条下方，发出一个740x256像素的矩形，然后拖入一张图片，右击图片图层创建剪贴蒙版。

再在广告图，上做出一个小长方形，作为切换效果展示，广告图模块这部分完成了。

图2-9广告图示意图&图2-10广告图图层示意图

在广告图下方拉出一个矩形，效果描边，颜色填充为白色，置入准备好的按钮和图标，填上文字，告示部分完成。

图2-11公告模块示意图

正在招标模块，先拉一个大小合适的矩形作为整个底板，然后填充为白色，按照参考线的分区，利用矩形工具拉出一个矩形，图层样式选择，渐变和描边，然后再用钢笔工具，做出一个不规则图形，填充颜色，渐变效果，再复制一层，填充灰色，颜色透明度调低，置于蓝色图层后面，作为阴影。

图2-12正在招标标题栏制作

再新建一个矩形，图层效果选择渐变和描边，将文字排版排好，利用矩形工具做出头像。

拖入事先准备好的图标。

将这部分图层放在一个组里，复制，移动重复几次，一个列表就完成了。

图2-13标详情模块

接下来右侧部分，根据现有的图标和素材，拷贝移动图层，更换里面的内容即可。

注意模块与模块之间的间距不小于10像素。

图2-14右侧新闻排行榜模块效果图

底部，我们可以建立几个不同灰色的图层，进行编排，拖入小图标，打入文字，将客户的logo去色置入，加入可信网站等图标和客户信息即可。

图2-15脚部模块效果图

后续可以再进行小细节的调整，基本上一个首页就完成了。

做一个首页一定要事先规划好，兼顾功能与美感之间的平衡，做到整体和局部的统一和呼应。

3切片处理

3.1切片

静态页面的切片过程是利用PhotoShop软件中的切片工具进行切片处理的。

打开PhotoShopcs5，将需要切图处理的静态页面拖入PhotoShopcs5中，按C快速选择切片工具。

拉出选择框选出需要的图片，若是选择的图片上面有文字图层，而且改文字只是普通的文字，则应该隐藏该图层，此时我们选中的是纯图片。

如果静态页面图层过多，你不知道该文字图层是哪一个，你可以按V选中移动键，再在状态栏中选中自动选择（图层）选项，此时你再点图片上的文字，右侧就会自动选中当前选择的图层，点击图层边上的小眼睛就能隐藏当前图层。

需要注意的是，有些文字需要隐藏，但有些文字是不需要的，比如LOGO图片上的文字、广告图上的文字等，这些都是美工设计好的文字，不需要隐藏。

以首页为例如下图所示：

图3-1切片示意图

3.2切片保存

切好需要的图片之后，需要按Shift+Ctrl+Alt+S来输出图片，或者从文件>存储为Web和设备所用格式，在弹出的框中选中切出的图片即可，同时需要注意的是切换各个图片的格式，有.png、.gif、.jpg三种格式。

如下图所示：

图3-2切片保存示意图

存储时选择静态页面所在的位置。

打开该文件夹，会发现所有图片都保存在一个名为images的文件夹里。

切静态页面时可以引用此文件夹中的图片，但是我们还需要放到服务器上，以动态形式呈现。

在服务器端前台页面基本放在soonmes文件夹里，而图片则可以放在soonmes下的images或者media下的bg文件夹，由于个人习惯，我会讲新增加的图片放到soonmes下的media下的bg文件夹里，这样与css和JS都在同一根目录下，方面管理。

如下图所示：

图3-3服务器端目录示意图

（1）

图3-4服务器端目录示意图

（2）

4代码编写

4.1静态HTML编写

HTML即超文本标记语言是用于描述网页文档的一种标记语言，超文本标记语言文件的开头与结尾标志和超文本标记语言的头部与实体两大部分。

有三个双标记符用于页面整体结构的确认，即。

中间的部分是属于头部的代码，是主题内容部分。

HTML的编写主要是以div+css的方式编写代码，再用JS添加动态效果。

以首页为例，按照图1-1首页布局示意图，以div为布局元素，我为每个模块添加了一个div块并各自命名好，如果有左右布局的，就用float_left或者float_right来左右浮动，float_left和float_right均已在sytle.css文件中命名为左浮或右浮。

若是块与块之间需要间隙，则以margin值来控制。

照这样的规则，我做了如下所示的布局控制：

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

//www.w3.org/1999/xhtml">