[关闭]
@ghostcdy 2018-04-11T06:25:43.000000Z 字数 1630 阅读 792

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

一、重构使用须知

克隆项目

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

新建活动目录

命名规范:

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

例子:20180105_ydcy_nianzhongshengdian

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

提交代码

参考git的提交操作流程:先pull-再commit-再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-性能原则

通用

移动端文件要求

移动端页面适配原则

移动端兼容

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

测试屏幕比例:16:9,16:10

推荐测试终端:

请自测通过后再提交

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. 文案部分(如规则),需要使用字体写样式,不能使用图片。
添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注