设计与前端常用规范摘取(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
网友评论