# IEC《二选一决策》教程

温馨提示：入门难度模板《二选一决策》就是按照这个教程制作的哦！

## <mark style="color:blue;">一、特征标签</mark> <a href="#nubzy" id="nubzy"></a>

* 【制作难度】：⭐
* 【适用产品】：普遍适用
* 【交互方式】：点击
* 【交互次数】：1步跳转
* 【线程】：双线程
* 【核心资产】：静态图
* 【功能】：动画-缩放缓动、动画-位移缓动、事件-按下跳转应用商店

## <mark style="color:blue;">二、效果预览</mark> <a href="#dlwsv" id="dlwsv"></a>

| 手机试玩效果最佳                                                                                                                                                                                                                                                   | 竖屏                                                                                                                                                                                                                                                         | 横屏                                                                                                                                                                                                                                                         |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| <img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FJzugp3Ua11He4dxL8sLL%2Fimage.png?alt=media&#x26;token=6e2f7a77-dc70-48be-8199-17a1530ffe69" alt="" data-size="original"> | <img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FpS7Tfge7Vm01w53WE47P%2Fimage.png?alt=media&#x26;token=f5f0009a-93a2-4ea8-860d-0a58e1f289ad" alt="" data-size="original"> | <img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2F31MRhY734t2bdUURMoKA%2Fimage.png?alt=media&#x26;token=87e5050b-a76b-4427-9e0c-76f0eee8368b" alt="" data-size="original"> |
| 扫码试玩                                                                                                                                                                                                                                                       | [点击试玩](https://tinyurl.com/4xzhahfy)                                                                                                                                                                                                                       | [点击试玩](https://tinyurl.com/4xzhahfy)                                                                                                                                                                                                                       |

## <mark style="color:blue;">三、玩法梳理</mark> <a href="#nbhek" id="nbhek"></a>

**我们在开始制作之前需要将本案例的玩法逻辑进行简单的梳理：**

* 进入试玩，展示【丑女待改造】画面；
* 出现【二选一选项】和【选择指引】，引导玩家点击任一选项，帮助丑女完成改造；
* 玩家点击任一选项，跳转应用商店

## <mark style="color:blue;">四、制作思路</mark> <a href="#agjmh" id="agjmh"></a>

**核心思想：**&#x8BA9;单个场景里的动画和事件尽可能少，场景拆分逻辑清晰，图层结构简单

**场景拆分：**&#x6839;据第三部分的玩法梳理，我们判断本案例只需设置1个场景即可

<table><thead><tr><th width="178">场景名称</th><th>场景1-诱导选择</th></tr></thead><tbody><tr><td><strong>效果图</strong></td><td><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FpS7Tfge7Vm01w53WE47P%2Fimage.png?alt=media&#x26;token=f5f0009a-93a2-4ea8-860d-0a58e1f289ad" alt="" data-size="original"></td></tr><tr><td><strong>场景描述</strong></td><td>二选一决策，引导玩家点击任一选项帮助丑女完成改造</td></tr><tr><td><strong>动画</strong></td><td><p>【指引手指】：缩放缓动+位移缓动</p><p>【选项按钮】：缩放缓动+透明度缓动</p></td></tr><tr><td><strong>核心事件</strong></td><td><p>触发对象：图层-选项按钮组</p><p>触发操作：按下</p><p>响应事件：跳转应用商店</p></td></tr><tr><td><strong>资产清单</strong></td><td><p>【音频】：背景音乐</p><p>【图片】：背景图片、丑女图片、指引手指、选项按钮（选项图片/选项背景/选项背景发光）、logo、CTA按钮</p><p>【文本】：指引文案、选项按钮文案、下载文案</p></td></tr></tbody></table>

## <mark style="color:blue;">五、制作指南</mark> <a href="#cria2" id="cria2"></a>

### Step1 - 场景搭建 <a href="#wepzn" id="wepzn"></a>

#### **1.全局设置**

在【全局设置】中添加背景音乐、背景图片

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FLE5CrU4XVqn3hug78NgB%2Fimage.png?alt=media&#x26;token=e7e4f988-1a26-4b33-afb5-3313c4e5ee7f" alt=""><figcaption></figcaption></figure>

#### **2.场景1**

1）在【场景1】中添加图片和文本：丑女图片、选项按钮、指引手指、指引文案、logo、CTA按钮

2）调整各资产到合适的位置大小

3）根据资产类型对资产进行编组、排序、命名

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FW5l6yziLlRDO3kMrlim7%2Fimage.png?alt=media&#x26;token=aa81b9bc-26aa-4ae4-a570-269d662adb61" alt=""><figcaption></figcaption></figure>

### Step2 - 动效制作 <a href="#tpuup" id="tpuup"></a>

#### **1.指引手指**

因手指在引导二选一决策时，需要进行位移，同时要根据按钮的缩放同步进行缩放，因此我们为手指设置2个通用动画，分别为：缩放缓动、位移缓动；

1）在左侧图层处选中手指组【hand\_ani】，添加动画-通用-缩放缓动。参数设置如下：

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FA3JgJrrik3vmT10JkUYO%2Fimage.png?alt=media&#x26;token=94f1b74a-a6b6-4dce-b7e6-03d910e0d0f5" alt=""><figcaption></figcaption></figure>

2）继续添加动画-通用-位移缓动。参数设置如下：

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FNPhF6mhJ2BYLCjQanxE5%2Fimage.png?alt=media&#x26;token=29f8f28a-ffb7-42a1-9aeb-6196d62a0382" alt=""><figcaption></figcaption></figure>

#### **2.选项按钮**

1）选项1：选中选项按钮1的组节点【props1\_ani】，添加动画-通用-缩放缓动。参数设置如下：

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FXqR3VUGbYRnGT6lvWF7z%2Fimage.png?alt=media&#x26;token=567d728c-273a-48bc-ab07-fa8fc75f6629" alt=""><figcaption></figcaption></figure>

2）选项2：复制组节点【props1\_ani】的缩放缓动动画，选中选项按钮2的组节点【props2\_ani】，点击【粘贴-仅粘贴图层动画】，然后仅修改曲线即可。参数设置如下：

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2Fr7UywlMRJtYZWlPlZoHW%2Fimage.png?alt=media&#x26;token=fb7a0d90-38e5-4f39-a20a-ea8959d18c4c" alt=""><figcaption></figcaption></figure>

选做：为使效果更为丰富，我们可以视情况为选项按钮添加外发光的效果。

3）选项外发光1：选中选项1的外发光图片，添加动画-通用-透明度缓动。参数设置如下：

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FMU9KewFThhtaaXS5OWT6%2Fimage.png?alt=media&#x26;token=ae4f4200-9f4b-4fe1-977f-dab029109de5" alt=""><figcaption></figcaption></figure>

4）选项外发光2：选中选项2的外发光图片，添加动画-通用-透明度缓动。参数设置如下：

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2F0mOrvDpImvPTnCAtcXfq%2Fimage.png?alt=media&#x26;token=7d5220c3-5cd9-44ff-9dca-8efddf8d7796" alt=""><figcaption></figcaption></figure>

### Step3 - 逻辑设置 <a href="#umduz" id="umduz"></a>

#### **1.**&#x56FE;层事件-选项按钮1&2

1）选中选项按钮1的组节点【props1\_ani】；

2）添加事件-按下；

3）添加响应事件-跳转应用商店；

4）其他响应事件：设置埋点信息/上报试玩结束

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FKlkeLQBNGzpjSGFQloPg%2Fimage.png?alt=media&#x26;token=d4bc9ebf-c8ba-437c-a204-1197ee548e81" alt=""><figcaption></figcaption></figure>

5）点击复制按钮1的事件，选中选项按钮2的组节点【props2\_ani】，点击【粘贴-仅粘贴图层事件】，然后修改埋点信息即可。

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FPF2Ik4SQzIoCO0cplUkM%2Fimage.png?alt=media&#x26;token=91998057-002f-4e73-85c7-2344e79cb59b" alt=""><figcaption></figcaption></figure></div>

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FxPlmXeckM9RELvgIdNuV%2Fimage.png?alt=media&#x26;token=a7b2c50e-95fd-4eb5-ab82-584bbfc30f57" alt=""><figcaption></figcaption></figure>

**2.图层事件-CTA按钮**

选中按钮组，添加事件-按下，添加响应事件-跳转应用商店

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FMv4ZF59Sm4Cy39gLSzXI%2Fimage.png?alt=media&#x26;token=1898bb72-3da9-4931-a255-800ad79b11ea" alt=""><figcaption></figcaption></figure>

### Step4 - 整体预览 <a href="#j1kmp" id="j1kmp"></a>

#### <mark style="color:red;">**1.横屏排版**</mark>

每个场景竖屏制作完成后，均需进行横屏排版（建议多使用“复用竖屏位置尺寸配置”按钮）

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2Fil0h7bs0Nbp9LLH035fC%2Fimage.png?alt=media&#x26;token=8f76ef36-745d-4ed9-b8ff-4cc34f68b17b" alt=""><figcaption></figcaption></figure>

#### <mark style="color:red;">**2.屏幕适配**</mark>

对各机型及其横竖屏进行屏幕适配，并预览适配效果是否合适

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FWstVEPzCiMhqeGgrMeit%2Fimage.png?alt=media&#x26;token=391a0bc4-6f67-4d3e-9968-5a57583227e1" alt=""><figcaption></figcaption></figure>

**3.整体预览**

全部制作完成后，可对不同机型/不同语言/横竖屏进行整体预览

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FcHwhwlZ3YOhiX0JIyPms%2Fimage.png?alt=media&#x26;token=083db0f4-1f28-4727-a422-9d75e6d29bed" alt=""><figcaption></figcaption></figure>

## <mark style="color:blue;">六、资源提供</mark>

在教程最后，我们为您**提供了本案例所使用到的全部资源，**&#x70B9;击压缩包即可下载。您可以用此资源跟着教程尝试制作，以便尽快上手使用自由编辑器

{% file src="<https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FFZB4vLbtx9RLwKwICMLe%2F%E4%BA%8C%E9%80%89%E4%B8%80%E5%86%B3%E7%AD%96_%E8%B5%84%E6%BA%90.zip?alt=media&token=c0e21e43-d237-4fc2-a211-941ae571fbb7>" %}