财付通应用程序接入设计规范Word格式.docx

财付通应用程序接入设计规范Word格式.docx

《财付通应用程序接入设计规范Word格式.docx》由会员分享，可在线阅读，更多相关《财付通应用程序接入设计规范Word格式.docx（37页珍藏版）》请在冰点文库上搜索。

内容区的版块尺寸宽度需要遵循以下栅格系统，页面内容距离边框10像素，版块之间的横向距离为12像素，纵向距离为10像素，共有四种方案可选：

第一种，每个版块最小宽度为80像素：

第二种，每个版块最小宽度为126像素：

第三种，每个版块最小宽度为172像素：

第四种，每个版块最小宽度为264像素：

版式示例：

第一种栅格系统的版式：

第二种栅格系统的版式：

应用图标

尺寸

大图标的标准尺寸为59×

59像素，用于“我的钱包”首页和版权信息页面显示。

小图标的标准尺寸为18×

18像素。

用于“我的钱包”内部页面显示。

设计模板下载及使用方法

设计模板为PSD文件，点击这里进行下载：

大图标 

小图标。

具体操作方法为：

1.用PhotoshopCS4或以上版本将图标源文件打开；

2.双击图层面板中“背景”图层前面的色块，进行颜色选择；

3.将图标元素放入“空白层”里，“示例”图层需要删掉；

4.图标保存为PNG格式。

色彩

常用的主体色彩为蓝色、橘色、绿色和浅灰色等。

如图所示：

禁止使用纯黑、纯白以及饱和度过高的颜色。

建议与禁忌

建议采用简洁达意的图形符号。

建议大图标里的图形边缘使用圆角。

不可使用与现有应用过于相似的图标。

禁止使用易产生功能误导的图形，譬如：

房子（代表主页）、齿轮（代表设置）、箭头（代表方向）等。

禁止使用涉及版权纠纷的图片元素，譬如他人的商标或产品。

通用图标

css调用地址：

JS调用地址：

图标

结构示例/描述

结构示例：

spanclass="

iconlarge-d"

spanclass=”iconlarge-x”>

spanclass=”iconlarge-g”>

spanclass=”iconlarge-w”>

spanclass=”iconlarge-i”>

在白色背景下：

spanclass=”iconsmall-d”>

在黄色背景下：

spanclass=”iconsmall-dy”>

在蓝色背景下：

spanclass=”iconsmall-db”>

spanclass=”iconsmall-x”>

spanclass=”iconsmall-xy”>

spanclass=”iconsmall-xb”>

spanclass=”iconsmall-g”>

spanclass=”iconsmall-gy”>

spanclass=”iconsmall-gb”>

spanclass=”iconsmall-w”>

spanclass=”iconsmall-wy”>

spanclass=”iconsmall-wb”>

spanclass=”iconsmall-i”>

spanclass=”iconsmall-iy”>

spanclass=”iconsmall-ib”>

默认：

spanclass=”button”>

button>

开始允值<

/button>

/span>

长按钮：

spanclass=”buttonlong-btn”>

我是一个超长的按钮<

spanclass=”new-flag”>

spanclass=”hot-flag”>

跳出钱包标识（新开窗口）

spanclass=”open-icon”>

Loading效果

spanclass=”loading”>

字体（字体、字号、颜色、CSS）

CSS文件引用地址：

默认字体样式

CSS

font:

12px/1.231Tahoma,Helvetica,Arial,Simsun,sans-serif;

标题

标题字体选用系统默认字体，字号为14像素大小，颜色为，CSS代码：

重点（数值、金额等）

重点字体选用，字号为，颜色为，CSS代码：

链接

链接文字分为默认、鼠标悬浮、点击过、失效4种状态。

CSS代码：

a.blue{color:

#1670EB;

padding:

2px2px0px2px;

}

a.blue:

visited{color:

hover{background-color:

#4AB7E0;

color:

#fff;

text-decoration:

none;

active{background-color:

跳转至浏览器的链接需要在链接尾部添加“

”图标，为避免影响视觉感受，可以在鼠标悬浮时再出现。

颜色

底色

默认底色为浅蓝色，色值为#f5f8fd。

可以根据应用的属性不同采用其它色值，建议如下：

生活类：

纯白色，色值#ffffff；

淡蓝色，色值cee3f8；

淡绿色，色值#dff7d7；

商旅类：

浅灰色，色值#f4f4f4；

浅绿色（适用于度假类应用），色值#eefef4；

购物类：

浅橘色，色值#fbf1e5；

淡粉色（适用于礼物或女性商品），色值f9e9e9；

游戏类：

浅蓝灰色，色值#e6ebf0；

禁止使用黑色或其它饱和度过高的颜色。

边框

默认的边框色值为#b0c4d8，可依据底色不同采用同色系的颜色。

建议颜色饱和度不要过高。

控件

普通按钮

按钮的常用规格有3种：

小按钮的高度为20像素，最小宽度为56像素，圆角大小为2像素，按钮上的文字为12号字体。

中按钮的高度为28像素，最小宽度为86像素，圆角大小为2像素，按钮上的文字为12号加粗字体。

大按钮的高度为33像素，最小宽度为118像素，圆角大小为3像素，按钮上的文字为14号加粗字体。

建议按钮上的文字不超过6个汉字，都为简单易懂的动词。

按钮颜色可以根据网页配色作调整，但要尽量保证质感一致。

返回按钮：

带下拉箭头的按钮：

常用于余额查询等功能，点击后，向下弹出查询结果。

支付按钮：

用于提交支付页面的按钮，分为两种尺寸和样式：

小按钮，文字大小为12像素

大按钮，文字大小为14像素

输入框

普通：

输入框的最小高度为20像素。

默认边框颜色为#6699cc，可根据页面底色略作调整。

建议用深蓝或深灰色，除非特殊情况，禁止使用红色。

数值输入（卡号、手机号、金额等）：

高度为32像素，输入的文字大小为22像素，css代码：

bold22px/26pxArial;

下拉框

标签（Label）

用于在同一页面内切换不同的功能，如果点击后跳转到浏览器，需要在文字后面添加“

”图标并始终出现，例如下图第三个标签。

css引用：

tagclass="

tab-nav"

html结构：

tab_nav_panel"

ulclass="

liclass="

tab-selected"

ahref="

"

onclick="

returnfalse;

hidefocus="

hidefocus"

财付通/银行卡开通<

/a>

/li>

li>

Wallet.QQ.swap

（1）;

Q币Q点开通<

tab-newwin"

aid="

other_pay"

href="

about:

blank"

target="

_blank"

其它方式开通<

sup>

/sup>

;

/ul>

翻页

日期选择器

外观样式如下：

点击输入框内，即可打开日期选择界面，效果图如下：

调用JS地址：

注意：

因弹出的日历部分如果超出“我的钱包”界面，会被外框遮住，所以需要根据日期选择器的位置调整JS文件中的offsetx和offsety的数值，保证界面显示完整。

提示框

视觉效果如下：

1.提示的通用窗口宽度统一为340px。

文字三行以内的的窗口高度全部定为150px。

文字超过三行的每超过一行高度增加16px。

（空行算作一行的文字高度）

2.8行为文字最多的界面高度。

文字超过8行的情况、出现滚动条，不建议使用出现滚动条的界面，尽量控制文字信息

翻页

用于分页查看列表内容或搜索结果等信息，由“当前页数/总页数”、“页码按钮”和“翻页按钮”3部分组成。

结构与视觉效果如下图，颜色可根据页面配色作调整：

注意事项：

1.翻页控件放置在内容区的右下角；

2.当处于第一页时，不显示“上一页”，处于最末页时，不显示“下一页”。

钱包基本资源文件引用

CSS文件

JavaScript文件

外部应用嵌入

Frame嵌入

crumb=’+encodeURIComponent（应用名称）&

url=’+encodeURIComponent（应用URL）

外部应用跳转

+encodeURIComponent（支付中心跳转URL）

支付中心跳转

注：

应用标识和跳转位置标识需要配置。

如果不匹配，直接跳转到钱包首页。

页面Javascript接口

原生对象扩散接口

接口名称

说明

其它

String.prototype.cut（size）

截取字符串

“aaa”.cut

（2）

String.prototype.cut（size）

截取字符串

“aaa”.cut

（2）

String.prototype.startsWith（prefix,offset）

匹配字符串是否以prefix开头

String.prototype.endsWith（suffix）

匹配字符串是否以suffix结尾

String.prototype.replaceAll（regexp,replacement）

替换所有匹配的字符/字符串

String.prototype.replaceFirst（regexp,replacement）

替换第一次匹配的字符/字符串

String.prototype.trim（）

去空字符

String.prototype.leftTrim（）

去左空字符

String.prototype.rightTrim（）

去右空字符

String.prototype.bothTrim（）

去两侧空字符

String.prototype.size（）

字符串长度，将中文看成两个字符计算

String.prototype.replaceHTML（）

替换HTML标签

String.prototype.fillBefore（chr,bit）

前导填充

“123”.fillBefore（“05）//00123

String.prototype.fillAfter（chr,bit）

向后填充

String.prototype.toCurrency（bit）

转换成货币格式

“123456”.toCurrency（）//123,456.00

String.prototype.toNumber（bit,splitChar）

转换成数字

“123,456.00”.toNumber（0,“,”）

String.prototype.format（param）

格式化，用于模板替换

varo={text:

”world”};

varstr=“hello$text”;

str=str.format（o）//helloworld

Date.prototype.format（fmt,isFill）

格式化日期对象fmt格式%y%M%d%h%m%s%i[%w%W%a%A]isFill是否补0

vard=newDate（）;

d.format（“%y-%M-%d”,true）//2010-04-18d.forma（“%y-%-%d”,false）//2010-4-18

Date.prototype.parseDate（str,fmt）

将字符串解析成日期对象

Date.prototype.validDate（str,fmt）

校验字符串是否为日期格式

Date.prototype.leapYear（）

判断是否是闰年

@return集合（是否是闰年，各月份的天数集，当前月的天数）

{

isLeapYear,

days,

yearDays,

monthDays

}

Date.prototype.dateDiff（interval,date）

日期比较

*@paraminterval间隔参数

*y年

*q季度

*n月

*d日

*w周

*h小时

*m分钟

*s秒

*i毫秒

*@paramdate比较日期

Date.prototype.dateAdd（interval,num）

日期相加

*@paramnum差值

Browser

浏览器检测接口

类型：

Browser.type

版本号：

Browser.version

Wallet.JUMP_PAGE

中转页面

Wallet.HOME_PAGE

钱包首页

Wallet.SECURE_PAGE

安全页面

Wallet.IE6

是否为ie6

Wallet.IE7

是否为ie7

Wallet.IE8

是否为ie8

Wallet.WALLET

钱包目录地址

Wallet.MAIN

财付通主站跨域地址

Wallet.LIFE

life跨域地址

Wallet.CHONG

chong跨域地址

Wallet.PORTAL

portal跨域地址

Wallet.$（id）

根据ID获取DOM元素

Wallet.getDocumentSize（）

获取文档大小返回{width,height}

Wallet.getViewportSize（）

获取视窗大小返回{width,height}

Wallet.getScrollPosition（）

获取滚动条位置返回{left,top}

Wallet.isSameWindow（）

父级窗口和自身窗口是否相同

Wallet.getParameter（key）

获取URL参数

Wallet.appendParameter（url,params）

给URL添加参数

Wallet.encode（str）

URI编码

Wallet.decode（str）

URI解码

Wallet.filterChar（str）

过滤特殊字符

Wallet.getTimeStamp（）

获取时间戳

Wallet.closeWallet（）

关闭钱包

Wallet.setCookie（key,value,expires）

设置cookie

Wallet.getCookie（key）

获取cookie

Wallet.getPosition（obj）

获取对象的绝对位置返回{x,y}

Wallet.getWalletCookie（）

获取小钱包cookie{uin,key,qluin,qlskey}

Wallet.is_cft_user（）

是否是财付通用户

Wallet.getNodeValue（xml,xmlDoc,xpath）

获取XML节点的值

Wallet.doForm（url,target,method,params,isAutoSubmit）

动态表单

Wallet.redirect（url）

重定向，钱包带登录态跳转到pay.qq

Wallet.redirectTo（url,inWallet,isFlush）

重定向，钱包带登录态跳转到财付通主站@paramStringurl目标地址@paramBooleaninWallet是否钱包内跳转@paramBooleanisFlush是否刷新cookie

Wallet.redirectShareLogin（url,inWallet,isFlush）

重定向，portal共享登录跳转@paramStringurl目标地址@paramBooleaninWallet是否钱包内跳转@paramBooleanisFlush是否刷新cookie

Wallet.redirectAIR（line,url）

重定向，机票订购跳转@paramStringline航空公司@paramStringurl目标地址

Wallet.redirectPay（crumb,link,url）

重定向，支付中心@paramStringcrumb面包屑导航文字@paramStringlink面包屑导航链接@paramStringurl跳转URL

Wallet.redirectFrame（crumb,url）

重定向，其它框架@paramStringcrumb面包屑导航文字@paramStringurl跳转URL

Wallet.redirectMoney（）

重定向，赚取零花钱

Wallet.redirectMCH（action,attach）

重定向，商户站点@paramStringaction配置文件中的ACTION，表示哪个商户@paramStringattach参数

Wallet.virtualRequest（strParam）

虚拟请求@paramStringstrParam请求参数

Wallet.setCrumbNav（msg）

设置面包屑导航@paramStringmsg文字信息

Wallet.createIframe（_id,_src,css）

创建IFRAME@paramString_idiframe的id@paramString_src需要加载的地址@paramStringcss附加样式@returnObjectifriframe对象

Wallet.getTipsInfo（id）

从HTML节点获取提示信息@paramStringid节点ID@returnString提示信息，否则为null

Wallet.getFormElement（formName,name）

获取表单元素@paramStringformName表单名@paramStringname元素名@paramO