网站部门规范

设计与前端常用规范摘取(bate 1.0.0)

1.现状

设计与前端杂乱无章，没有固定规范。不能快速模版化，在一定程度上会给项目速度造成一定时间浪费。

2.目标

在常用模块上公共化，项目化。根据项目属性官网、专题、H5等，可以在极短时间内建立项目骨架。公共部分植入相关规定元素即可，重心放在主题部分进行制作。

3.涉及项目（不包含传统网站等）

在常用模块上公共化，项目化。根据项目属性官网、专题、H5等，可以在极短时间内建立项目骨架。公共部分植入相关规定元素即可，重心放在主题部分进行制作。

• 游戏官网 PC部分 & wap部分
• 游戏专题 PC部分 & wap部分
• 游戏H5部分
  本规范并不适合所有项目，针对特殊专题，高度定制官网等仅供参考。

4.正文

所有头部和底部不包含已经形成规范的公共头部和底部,如下图：

全局常规头部

全局常规底部

A 游戏官网部分

--------------------Pc部分--------------------

1.大局主体

• 主体：一般情况官网主题body在1200px，并且需要设定最小宽度 1200px。
• 字体：常规字体 微软雅黑 或者 苹方 等系统默认字体；理论上目前最小字号为14px
• 颜色：根据设计来
• 播放按钮需要突出展示

2.导航

• icon：120 X 120
• 游戏名： 24px bold #fff
• 定位：18px #999
• 背景：rgba(0,0,0,.9) 包含但不限于含有渐变、材质、投影等其他情况
• 背景高度：100px 包含但不限于其他特殊形状造成的高度变化
• 分享图标：48 x 48 颜色变化
• 导航字体： 包含但不限于 @font:22px #999

主要元素实例

头部分享

3.轮播图或者图片

• 宽高：一般情况不会固定，不过PC和WAP应该保持统一比例 16：9 或者 5：3

1.一般情况下设计界面的图需要限定宽高 在规范界面内
2.而在详情页面内图片需要保持比例
3.任何地方严禁任何图片比例变形

4.链接以及交互

任何可点击元素需要有交互（鼠标或者手指）包含以下几种：

• 表单、链接、按钮反馈
• 页面或者元素的加载、过度、切换、悬停、提示等状态
• 自执行动画、反馈性动画（比如播放按钮就属于自执行类型）
• 菊花(complete、progress、error)、弹窗（in & out）、提示等

--------------------Wap部分--------------------

1.头部

• icon：120 X 120
• 游戏名： 36px bold #fff
• 定位：20px #999
• 背景：rgba(0,0,0,.9) 包含但不限于含有渐变、材质、投影等其他情况
• 背景高度：100px 包含但不限于其他特殊形状造成的高度变化
• 下载按钮：160 X 60 font : 32px bold 颜色不定
• 导航图标： size : 60 X 60
• 播放按钮需要突出展示
  
  

  头部截图示例

3.轮播图或者图片

• 宽高：一般情况不会固定，不过PC和WAP应该保持统一比例 16：9 或者 5：3

1.一般情况下设计界面的图需要限定宽高 在规范界面内
2.而在详情页面内图片需要保持比例
3.任何地方严禁任何图片比例变形

3.字体

• 一般字体26-30px 偏小24px
• 最小字体20px

4.其他

• 左右边距为保持通透性 设置为40px（640的retina屏幕）
• 字体可以使用固定PX单位，图片可以为保持比例使用 百分比或者rem

B 游戏专题部分（包含cover）

--------------------Pc部分--------------------

1.大局主体

• 主体：一般情况官网主题body在1200px，并且需要设定最小宽度 1200px。
• 字体：常规字体 微软雅黑 或者 苹方 等系统默认字体；理论上目前最小字号为14px
• 颜色：根据设计来
• 播放按钮需要突出展示

2.头部

• 头部根据专题需求可能有 存在或者不存在 顶部的可能性
• logo与按钮大小无法确定

1.如果存在顶部需要直接继承官网的格式规范与大小
2.如果不存在顶部则根据设计稿实际安排

专题LOGO以及进入官网按钮分为2种情况
1.LOGO以及进入官网按钮 置于 1200px内
2.LOGO 以及进入官网按钮 相对于屏幕边缘定位

--------------------Wap部分--------------------

1.头部

• icon：120 X 120
• 游戏名： 30px #fff （根据文字长度可能有变化）
• 定位：20px #999 （根据文字长度可能有变化）
• 背景：rgba(0,0,0,.9) 包含但不限于含有渐变、材质、投影等其他情况
• 背景高度：126px 包含但不限于其他特殊形状造成的高度变化
• 进入官网按钮：210 X 80 font : 32px bold 颜色不定 （根据文字长度可能有变化）
• 播放按钮需要突出展示

专题头部截图示例

2.首屏部分

主题slogan 专题、活动按钮、专题视频 必须在第一屏展示。

3.轮播图或者图片

• 宽高：一般情况不会固定，不过PC和WAP应该保持统一比例 16：9 或者 5：3

1.一般情况下设计界面的图需要限定宽高 在规范界面内
2.而在详情页面内图片需要保持比例
3.任何地方严禁任何图片比例变形

4.字体

• 一般字体26-30px 偏小24px
• 最小字体20px

5.其他

• 左右边距为保持通透性 设置为40px（640的retina屏幕）
• 字体可以使用固定PX单位，图片可以为保持比例使用 百分比或者rem

C 游戏H5 (微信&小程序等) 部分

H5具有及时性和专题性，所有通用部分并不多，规范则主要参照设计为主。

1.顶部

• 没有顶部下载栏
• 拥有顶部栏，标准一般继承官网样式或者专题样式

H5头部展示

2.交互

• 整屏滚动H5
• 普通H5