财付通应用程序接入设计规范.docVIP

设计规范 布局与排版 布局： 整体结构主要由全局导航区、应用标题区和内客区3部分组成，尺寸分别如下: 其屮绿色区域为应用网页的敲大面枳?趙出该尺寸.页面将会显示不先整（不会出现滚动条）。 蓝色区域町以通过开倣平台后台編轲。 页面基本结枸代码如下^ !DOCTYPE html PUBLIC 〃-//W3C//DTD XHTML 1.0 Transitional//ENZ， http://www. w3. org/TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns二http://www. w3. org/1999/xhtml〃 head meta http-equiv二〃Content-Type content二text/html; charset=gb2312，z / meta name二〃version content二〃4?0〃 / title财付通-我的钱包v4. 0〈/title /head body div id=，zwallet_freinic〉 div id二” wallet nav 〈！头部/div div id二wallet body” 〈!主体/div /div /body /html 栅格系统 内容区的版块尺寸宽度需要遵爲以下冊恪系统.页面内容曲离边枢10像素，版块之间的横向距离为12像緊，纵向拒离为10像素，共冇四种方案可选: 第一种?毎个版块风小宽度为80像素： 二 10 px 二 10 px 12 px 第二种，毎个版块址小宽度为126像衮: 12 px 10 px 第三冲，好个版块过小宽度为172像倉: 12 px 12 px 二 10 px 11 10 px 第四冲，好个版块过小宽度为264像倉: 二 10 px 版式示例: 第?种栅恪系统的版式: 12 px A我的钱包 価向渔首页▼ /手机话费充值 手机话费充值 充值记录客服支持地区及忧惠 第二种栅格系统的版式: 10 px 二 10 二 10 172 px 356 px II 10 px 乜手机话费充值 充值记录 客服支持地区及忧惠 10 px 二 10 px 二 10 px 126 px 414 px 11 10 px 应用图标 尺寸 九图标的标准尺寸为59x59像索?，用于“我的钱包”首页和版权信息页而显示。 小图标的标准尺寸为18x18像瓠 用于“我的钱包”内部页面显示。 设计模板下裁及便用方法 设计模板为PSD文件，点击这里进行下载:大图标小图标. 具体操作方法为： 1 ?用Photoshop CS4或以上版本将图标源文件打开: 2M图层面板屮s背坎图层的面的色块.进行颇色选择: 3?将图标元素放入?空白层理.?示例嘀层需要删徵 4?图标保存为PNG格式。 色彩 常用的主体色彩为盔色?橘色.绿色和浅灰色等。如图所示: 图标 图标 禁止使用纯能、纯白以及饱和度过岛的颜色- 建议与禁忌 建议采用简沽达惫的图形符号。 建议大图标里的图形边缘使用ia/fh 不可使用与现仃应用过于相似的图标. 禁止使用易产生功能谋导的图形，舛如：房子（代农主页）、齿轮（代表设阳、筋头（代农方向）等- 禁止使用涉及版权纠纷的图片元素，警如他人的商标或产品。 通用图标 css 调用地址：https7//wallet/v4.0/css/,wallet v4.css JS 调用地址：httpsy/img.tenpay.conVwallet/v4.0/js/wallet v4 min.js 结构示例/描述 结构示例: span class二〃icon large-d〃〉 结构示例: span class二” icon largc~xn  结构示例: span class二” icon largc-gv 结构示例: span class二” icon large-w 结构示例: span class二” icon span class二” icon large-iv 在白色背景下： span class二” icon small-d 在黄色背景下： span cl ass二” icon small-dy” 在蓝色背景下： span class二” icon small-clbv 结构示例： 在白色背景下： span class二” icon small~xn 在黄色背景下： span class二” icon small-xyv 在蓝色背景下： span cl ass二” icon small-xb” 结构示例： 在白色背景下： span class二” icon small-g” 在黄色背景下： span class二” icon small-gy” 在蓝色背景下： span class二” ico