前端与3D部门规范文档

梅斯前端文档

一、总体SOP流程

二、资源格式约定

在下面的文件的基础上，需要提供原始文件（PSD文件）

1. 目录规范：

── 导升明
    ├─  糖尿病眼病.docx
    ├─ 糖尿病肾病.docx
    ├─ 糖尿病视网膜病变合并糖尿病肾病.docx
    │
    ├─原始文件
    │     ├─  导升明-故事线1.20170303.zip
    │     ├─  导升明-故事线2.20170303.zip
    │     ├─  导升明-故事线3.20170303.zip
    │     └─  导升明-页面设计稿.20170303.zip
    │
    └─素材
        ├─导升明-对话框20170305
        ├─导升明-故事线1.20170303
        │  ├─导生明-故事线1[场景背景]
        │  │    ├─     C1.png
        │  │    └─    C2.png
        │  │
        │  ├─导生明-故事线1[序列帧动画]
        │  │  ├─导生明-故事线1医生说话1
        │  │  │  ├─     1_0001.png
        │  │  │  └─     1_0002.png
        │  │  │
        │  │  ├─导生明-故事线1医生说话2
        │  │  │ ├─     2_0001.png
        │  │  │ └─     2_0002.png
        │  │  │
        │  │  ├─导生明-故事线1患者说话1
        │  │  │  ├─     H_0001.png
        │  │  │  └─     H_0002.png
        │  │  │
        │  │  └─导生明-故事线1患者说话2
        │  │    ├─   H_0001.png
        │  │    └─   H_0002.png
        │  │
        │  ├─导生明-故事线2场景背景
        │  │    ├─    C1.png
        │  │    └─  C2.png
        │  │
        │  └─导生明-故事线3场景背景
        └─导升明-故事线2.20170304

2. 资源规范

• 需要提供场景效果图
  （ 效果图 + 文档 能阐明出各个步骤的效果和操作）

• 需要提供场景元素拆分图

  1. 场景背景图
     A. 将每个动画场景分文件夹保存，名规范为 【场景名称首字母】 + 【序号】，如非透明背景则为 jpg 文件
     B. 背景图默认750 x 1344的大小，如果对多尺寸屏幕适配要求比较高，如横屏模式其他 android 设备其他尺寸、pad 等则需要提供对应的大小

  2. 动画元素图（逐帧动画图）
     A. 每帧一张图片，大小统一且宽高为偶数倍
     B. 帧数为12帧的倍数(默认36帧)
     C. 内容距离边距为 1px (间距太大会导致前端拼接图片时候浪费太多的空间)

3. 前端如何使用

• 每个场景都是一个盒子
• 涉及到场景的切换且是全屏切换，所以需要大盒子宽高 100%
• 使用 Sass Compass 合并逐帧动画片段（用其他软件合并出来可能导致排序错乱同时文件比较大）

4. Sass Compass

Sass本身只是一个编译器，Compass在它的基础上，封装了一系列有用的模块和模板，补充Sass的功能。它们之间的关系，有点像Javascript和jQuery、Ruby和Rails、python和Django的关系。

有必要的请看阮大神的博客 Compass用法指南

//目录
├── config.rb
├── images
│   ├── doctor  //图片目录
│   │   ├── 1.png
│   │   └── 2.png
│   └── doctor-sa774ee26a7.png //自动合成的图片
├── sass
│   ├── doctor.scss //触发合成的 Sass 代码
│   ├── ie.scss
│   ├── print.scss
│   └── screen.scss
└── stylesheets
    ├── doctor.css //生成的 CSS 结果
    ├── ie.css
    ├── print.css
    └── screen.css
//核心代码 
@import "compass/utilities/sprites";
//$<map>-layout:"horizontal";
$doctor-layout:"horizontal";
@import "../images/doctor/*.png";
//@include all-<map>-sprites;
@include all-doctor-sprites;