用来统计官网的模块的曝光量和模块点击:
PC端和H5端用法一样;在官网模块dom结构上添加 exposure-tag=”英文名,中文解释” 属性及值,如:
<div class="news" exposure-tag="英文名,中文解释"></div> <!-- 例如: --> <div class="news" exposure-tag="news,新闻"></div>
WeGame 设计中心官方站点
用来统计官网的模块的曝光量和模块点击:
PC端和H5端用法一样;在官网模块dom结构上添加 exposure-tag=”英文名,中文解释” 属性及值,如:
<div class="news" exposure-tag="英文名,中文解释"></div> <!-- 例如: --> <div class="news" exposure-tag="news,新闻"></div>
PC端:
<!-- 开始游戏 --> <a href="#" onclick="PTTSendClick('btn','start','开始游戏');">开始游戏</a> <!-- 分享给朋友 --> <a href="#" onclick="PTTSendClick('btn','share','分享');">分享给朋友</a> <!-- 预约--> <a href="#" onclick="PTTSendClick('btn','order','预约');">预约</a> <!-- 下载游戏 --> <a href="#" onclick="PTTSendClick('btn','download','下载游戏');">下载游戏</a> <!-- 视频播放 --> <a href="#" onclick="PTTSendClick('btn','playvideo','播放视频');">播放视频</a>
H5端:
<a href="javascript:;" id="btnStart">开始游戏</a> <script src="//ossweb-img.qq.com/images/js/mobile_build/util/zepto.js"></script> <script> $("#btnStart").tap(function(){ PTTSendClick('btn','start','开始游戏'); }); </script>
必须合并精灵图,以减少页面请求
专题命名:专题文件夹的命名为:a+年月日+专题英文或拼音小写简写,如:a20200320lol
文件命名:html首页文件必须命名为”index”,文件名禁止特殊字符。统一使用英文小写
通用头尾部:公共头部组件JS,
<script src=”//cdn.tgp.qq.com/wegame/header/js/init.js”>
公共尾部组件JS,
<script src=”//game.gtimg.cn/images/js/2018foot/foot.js”>
Meta使用:统一使用运营活动Meta,注意区分PC和H5端,如:
<meta charset="gbk" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="robots" content="all"> <meta name="author" content="Tencent-CP" /> <meta name="Copyright" content="Tencent" /> <meta name="Description" content="页面的描述内容" /> <meta name="Keywords" content="页面关键字" />
http协议:引用http或https地址时,需要补全http协议信息,如:
<style> //CSS背景图片 .bg{background: url(//game.gtimg.cn/images/cf/cp/a20161021sqjs/hd.jpg) no-repeat;} </style> //链接URL <a href="//cf.qq.com/main.shtml">进入官网</a> //图片SRC <img src="//game.gtimg.cn/images/cf/web201610/logo.png"> //JS链接 <script src="//ossweb-img.qq.com/images/js/title.js"></script>
页面标题:页面名称-产品中文全称-WeGame,如:
<title>WeGame游戏商店 - 发现更大的游戏世界</title>
页面关键字:为产品名、专题名、专题相关名,之间用英文半角逗号隔开,如:
<meta name="keywords" content="WeGame,游戏商店,WeGame平台,游戏发行,游戏平台,游戏评测,单机游戏,游戏购买,游戏下载,腾讯游戏平台,游戏助手,游戏加速,LOL助手,LOL官方盒子,CF助手,DNF助手,免费网络加速">
页面描述:不超过120字,描述内容要和页面内容相关,如:
<meta name="description" content="WeGame游戏商店,致力于发现全球好游戏,提供游戏资讯、购买、下载、助手、直播和社区等一站式游戏服务,满足优质汉化、社交互动、稳定国服等更贴心的本地化需求,同时连接全球开发者与游戏玩家,构筑玩家与开发者的沟通桥梁。">
样式命名:使用标准、通用的英文单词进行命名,全部使用小写,遵循BEM规则,如:
.wrap{} //外层容器 .mod-box{} //模块容器 .btn-start{} //开始按钮 .btn-download-ios //IOS下载按钮 .btn-download-andriod //安卓下载按钮 .btn-head-nav1 //头部导航链接按钮 .btn-news-more //更多新闻按钮 .btn-play //播放视频按钮 .side-nav{} //侧栏导航
选择器层级:禁止使用层级过深的选择器,最多3级,如:
正确示范:
.hot-game .hot-game-user-name{}
错误示范:
.page-lol .hot-game .hot-game-hd .hot-game-user-box .hot-game-user-name{}
使用Class进行定义:除非有特定的功能、组件要求等,禁止使用id来定义元素样式
禁止对纯元素选择器设置特定样式:错误示范:
a{background: url("xxx");}
给页面body上添加一个与设计稿底色接近的纯色值
防止用户在大屏幕下,超出页面宽度部分色差过大
PSD文件大小不超过1.5GB
PC端:正常态、hover态、按压态、当前态、不可用态
H5端:正常态、按压态、不可用态
隐藏页面需要提供完整的设计稿
可进行跳转的地方,所有弹窗及所有状态的设计稿要齐全
给用户及时的反馈信息
图层需分组:按照从左到右,从上至下的规则进行整理。
图层需命名:规范图层命名,方便查找。
使用下滑自动刷新加载,提高用户体验
在长于三屏的页面中,使用回到顶部按钮,以提高用户体验
手指在屏幕上热区最小感应尺寸是44PX*44PX
一、 避免在非合并切图的图层或投影/外发光等图层样式中使用穿透/叠加/正片叠底等混合效果。
二、 同一图层的【不透明度】和【填充】请勿同时使用。
使用1920PX*任意高度
使用微软雅黑
默认使用苹方字体进行设计,实际效果跟随手机系统默认字体
使用750PX*1206PX
只使用常规和粗体
禁止使用PS中的文本加粗,必须使用字体本身字重来加粗
安全区宽度范围1000PX-1200PX之间
一、 微信头部会占用部分区域,此时安全区尺寸为750PX*1206PX
二、 页面若存在登录跳转等逻辑会引起微信底部出现导航栏,此时安全区尺寸为750PX*1112PX
三、 保证重要内容在640*908PX内
尺寸646*1206px
微信头部会占用部分区域,导致内容区高度减少
游戏号头像
尺 寸:不低于 200 x 200 像素
格 式:JPG
数 量:至少 1 张
其他商标
尺 寸:不低于 500 x 500 像素
格 式:PSD(分层)/ PNG(透明背景)
数 量:至少 1 个
获奖信息
尺 寸:宽度固定 240 像素,高度不限
格 式:PNG
数 量:非必须
游戏截图
尺 寸:不低于 1920 x 1080 像素
格 式:JPG / PNG(透明背景)
数 量:至少 5 张
游戏场景
尺 寸:不低于 1920 x 1080 像素
格 式:PSD(分层)/ JPG
数 量:至少 5 张