企鹅电竞活动供应商移动端设计开发规范

• 前端对接人：civerzhu donaldcen*

• 该规范适用于企鹅电竞活动供应商WEB开发。旨在提高效率，降低沟通成本。规范中的规定由历来活动踩坑总结。不按规范实施出现适配问题将影响供应商评级。

一、重构使用须知

克隆项目

1. 使用git：https://git-scm.com/
2. 可以使用命令行，或者使用git客户端TortoiseGit或SourceTree
3. 执行clone项目到本地，git地址： https://git.qcloud.com/egame/topic-style.git
4. 需要的git账号和密码，请通过需求方的产品经理找到上述对接人提供

新建活动目录

命名规范：

[日期]_[CP公司缩写]_[活动名称拼音]

例子：20180105_ydcy_nianzhongshengdian

其中日期格式必须是8个数字，包含年月日

提交代码

参考git的提交操作流程：先pull-再commit-再push

提交规范

• 目录内必须包含readme文件
• 只能修改和提交自己的活动项目
• 每次提交请在注释上详细说明修改点
• 控制代码提交质量，尽量本地检查完善之后再push，避免提交记录太多
• 请自测通过后再提交

同步给前端

不需要发重构文件包，使用 git push 最新文件后，直接把项目文件夹名称告知给前端。

如果有改动需要周知前端同学，请截图说明是哪几次提交记录。

二、设计稿规范

移动端设计稿规范

1. 半屏下弹窗高度的设计，弹窗高度不得大于iphone高度的一半，或者把弹窗处理成上下滚动
2. 当页面横向展示内容较多，需加入横向滚动时，应该在页面两侧加入左右箭头，以便于用户左右翻页操作
3. 使用渐变，纯色等设计页面，避免大量使用图片
4. 待补充...

三、重构稿规范

1-交付物标准

建议使用vue标准目录
交付物应该包含：按规定目录结构打包zip + 外网预览 URL;

// 文件夹命名：日期_活动名称字母缩写
// 完整目录结构：
141218_ttkp
  ├─readme.md        # 说明文当
  ├─src              # 源文件
  │  ├─ img          # 未压缩的切图
  │  ├─ css          # js源码
  │  ├─ js
  │  ├─
  └─dist             # 输出文件
     ├─ img          # 压缩后的切图
     ├─ css          
     ├─ js           
     └─ html

2-性能原则

通用

• 合理选择图片格式

  根据图片色彩数、场景选择合适的图片格式。

  比如： 色彩较多（jpg）, 色彩少（png8）, 色彩少+半透明（png8 alpha）, 色彩多+半透明（png24）

• png在线压缩工具

  https://tinypng.com/

移动端文件要求

• 单张图片 < 70KB
• 单个CSS < 20K
• 单个页面 < 120KB (css+img+js)
• 禁止使用单张大于2kb的base64;

移动端页面适配原则

• 1.移动端页面适配用 js scale方案; 2使用rem布局;

  scale布局方案:

  rem布局方案 :

• 按钮、链接应该包含完整状态；actived; hover; disabled(按需提供);

移动端兼容

测试终端：Android 3.0 以上 、 IOS10+

测试屏幕比例：16:9，16:10

推荐测试终端：

• iOS: iphone、iphone plus、iphone X
• Android:小米、红米 、三星、华为等主流机型

请自测通过后再提交

Scale适配方案：

1.初始宽度设置为：320px；

Rem适配方案

1.换算规则

设计稿以640px宽度为基准;

px换算成rem单位：640px/2/100=rem单位

移动端重构稿规范

1. 适配方案。选择rem来控制大小，通过js在html节点上设定基本的font-size
2. 移动端只能用zepto，不允许使用jquery
3. 不要使用中文变量
4. 统一使用 UTF-8 编码
5. 不需要分离地址
6. 不需要添加数据上报和分享的js代码，前端自己会添加
7. 小图片过多请使用雪碧图
8. 所有 dom 元素z-index 小于20
9. 能用CSS3体现的图片，尽量使用CSS3，如圆角按钮，渐变背景等。
10. 禁止修改viewport，由于页面有其它组件修改viewport会导致组件异常。
11. 文案部分(如规则)，需要使用字体写样式，不能使用图片。