前端页面规范

目录

What's New?

2012年7月9日起,空间平台的上线应用可申请宽度自适应。详见:前端页面规范#1. 页面宽度规格

1. 页面宽度规格

1. 多区多服应用自动支持从选取页面进入应用时的全屏模式。
2. 非多区多服应用可以自行选择如下2种宽度模式中的1种,二者只能选其一,应用上线前上线后都可以重新选择
front_page_standard_21.png
模式一:开发者可以指定一个应用的固定宽度,该宽度的范围为760px-950px之间的任意整数值。如果不指定则默认为760px。
指定该固定宽度后,应用的宽度即固定为指定的值,应用上线前上线后都可以调整该固定值。
指定宽度的方式为:
登录open.qq.com后进入管理中心,在“应用管理”tab的“平台信息”页面,填写应用宽度。


模式二:开发者可以选择应用宽度为自适应模式,则应用内容将根据用户屏幕宽度进行自适应显示,在760px-950px之间进行自适应调整。
指定自适应模式的方式为:登录open.qq.com后进入管理中心,在“应用管理”tab的“平台信息”页面,选择“自适应”。
注意:
应用如果选择了自适应模式,则必须自己在应用内先实现宽度自适应。详见:流动应用画布说明

2. 页面高度规格

1. 页面高度由开发者根据应用需要自行决定。
指定高度的方式为: 登录open.qq.com后进入管理中心,在“应用管理”tab的“平台信息”页面,填写应用高度。如果不指定在默认为950px。

2. 关于高度自适应:
可调用前台接口(详见fusion2.canvas.setHeight)在Runtime时自适应调整高度。

3. 应用图标以及预览图规格与规范

注:
以下图标仅适用于:空间、朋友、微博平台。如果您的应用通过腾讯开放平台接入3366平台,则需遵守3366平台图标规范

1. 规格
应用申请上线时,需要提供以下规格的图标:
(注:图标规格可能会变动,实际情况请以管理中心的图标素材提交页面中的要求为准,图标素材提交入口详见:应用管理#3.2 提交图标素材

图标类型 图标规格
单位:px
图标大小
单位:KB
图标格式 应用场景
应用小图标 16 X 16 20 png 出现在平台应用中心首页的各类应用排行榜以及应用动态中。以QQ空间平台为例:

应用排行榜示例如下:
front_page_standard_1.png
应用动态示例如下:
front_page_standard_2.png

应用大图标 50 X 50 20 png 出现在平台应用中心的各类推广位,如平台应用中心左侧好友在使用和猜你喜欢,已经用户已安装应用列表。以QQ空间平台为例:

好友在使用示例如下:
front_page_standard_3.png
猜你喜欢示例如下:
front_page_standard_4.png
用户已安装应用列表示例如下:
front_page_standard_10.png

64 X 64 20 png 主要出现在V5版QQ空间应用中心。
75 X 75 20 png 出现在平台应用中心首页的推荐区、专区、最近上线,以及应用详情页的应用介绍部分。以QQ空间平台为例:

推荐区示例如下:
front_page_standard_5.png
应用详情页的应用介绍示例如下:
front_page_standard_6.png

100 X 100 20 png 出现在平台推广类的Feed中。以QQ空间平台为例:

front_page_standard_7.png

应用预览图两张 360 X 270 70 png 出现在平台应用的详情介绍页。以QQ空间平台为例:

front_page_standard_8.png

应用背景图 760 X 580 70 png 用户在进入应用时,平台为用户显示应用背景。以QQ空间平台为例:

front_page_standard_9.png


2. 规范:
(1)图片简洁清晰,重点突出,界面层次清晰。
(2)图片不得圆角,描角。
(3)图片不得添加“new、hot、热、推荐”等标注。
(4)图片不得直接或间接使用腾讯公司或其它公司图案元素。
(5)图片中如需添加文字,文字应与应用名称和应用内容相符。

4. 前台页面设计规范

1. 建议应用进行页面设计时,在考虑美观层面有所考虑,保留5~10px的空白区域,不要占满。
2. 建议考虑UI设计的合理性,避免过于简陋的页面影响用户体验。


5. 关于浏览器兼容

应用必须考虑浏览器兼容问题,需要兼容IE6/7/8、chrome、firefox、TT等主流浏览器,无样式问题。
此外,腾讯也提供了许多前端接口供应用直接调用。这些前端API支持10.1 以上的flashplayer,支持的浏览器内核包括:ie6,ie7,ie8,ie9,firefox,chrome,safari,opera。

6. 关于用户头像的获取和尺寸说明

目前头像只能通过OpenAPI(例如v3/user/get_infov3/user/get_multi_info)的方式来获取到用户头像的URL。
需要注意的是,在应用上线前,接口返回的头像URL有防盗链。上线后,才会开放防盗链的限制。

空间和朋友平台头像有不同的尺寸:
空间头像尺寸有:100px,50px,30px 3种规格。
朋友头像尺寸有:100px,60px,30px 3种规格。

通过OpenAPI(例如v3/user/get_infov3/user/get_multi_info)获取到的头像地址(即返回包中的figureurl)通常是如下格式:
http://头像域名/[campus/qzopenapp]/加密串/尺寸
开发者得到上述地址后,修改后面的尺寸数字即可,如下面例子所示:
获取到的figureurl为:
http://qlogo3.store.qq.com/qzopenapp/d8219673598dbd6f00000d307e46c7bde4cfffca38933abc5a4ecac43bc03e44/100
如果你想的到30px尺寸的头像,只要把尺寸改为30即可:
http://qlogo3.store.qq.com/qzopenapp/d8219673598dbd6f00000d307e46c7bde4cfffca38933abc5a4ecac43bc03e44/30

7. 关于Flash应用中用户头像的加载和操作

1. 只允许flash应用加载显示用户头像图片,不能进行头像内容操作。支持加载显示头像图片的代码示例如下:

var loader:Loader = new Loader();
loader.load(new URLRequest("avata_url"));
//container为显示对象容器
container.addChild(loader);


2. 不支持对头像内容进行操作,否则会报出策略文件没有*pengyou.com/*.qzone.com这些域的安全问题。
不允许的操作包括但不仅限于:使用BitmapData.draw()访问头像图片、Loader.contentLoaderInfo.content访问头像图片,以及对图片二进制数据的操作。

8. 应用内图片域名规范

应用内调用前端接口时,经常要传入图片URL。
1. 有些接口参数中对图片域名限制进行了说明,不符合规范的图片将不能显示。规范如下:
腾讯托管模式应用必须将图片存放在APP域名下或腾讯CDN。
非腾讯托管模式应用要求将图片上传到该应用开发者QQ号对应的QQ空间加密相册中。即非腾讯托管模式应用图片域名必须为: qq.com、pengyou.com、qzoneapp.com、qqopenapp.com、tqapp.cn。

2. 如果接口参数中没有对图片域名限制进行说明,则传入的图片地址的根域名必须要有一个crossdomain.xml 的flash授权文件,以向腾讯的网站授权可以加载到图片。
crossdomain.xml的内容如下:

<?xml version="1.0"?>
<cross-domain-policy>
   <allow-access-from domain="*.qq.com" secure="false" />
   <allow-access-from domain="*.soso.com" secure="false" />
   <allow-access-from domain="*.paipai.com" secure="false" />
   <allow-access-from domain="*.gtimg.cn" secure="false" />
   <allow-access-from domain="*.pengyou.com" secure="false" />
</cross-domain-policy>

以上信息是否解决您的问题?

Copyright © 1998 - 2017 Tencent. All Rights Reserved.

腾讯公司 版权所有

有问必答 返回顶部