海报设计比赛评分标准-墨刀公测暨设计大赛“二等奖”——电影海报切换效果教程

参加魔道新动态公测活动，很快就获得了二等奖。 受官方邀请来分享作品制作教程！ 我的叙述能力不强，第一次写教程，请多多包涵~

最终效果图预览

本作品是电影海报预览切换效果。 页面分为：展示页面和详情页面。

丨那么我们正式开始吧

1. 组成

1. 首先，在脑海中或草稿上想象整个项目流程和交互方式。

（为了方便说明，我随机画了一张）

2、由于是高保真图片，所以需要先用PS对海报图片和背景图片进行处理。

3.将所需材料剪切成图片并导出以供以后使用。

2. 创建应用程序

1.创建375*667 iPhone 6尺寸的项目

3. 布局

1. 调整海报图像和背景的位置。 建议将标尺线拉紧并固定，有助于快速布局。

2.输入电影简介和评分图标

3.首先将电影介绍文案动画化

（为什么要先制作文案介绍的动画？因为文案会有整体滑动的效果，每个页面都做一遍太麻烦了！先做，复制粘贴就可以了吉祥物设计，然后修改副本！）

1）星级效果

将所有5颗星设置为：逐渐放大效果，将延迟设置为：100ms、200ms、300ms、500ms、500ms，然后组合。

2）文字效果

选择所有文本并全部设置为：淡入淡出效果，延迟200ms，持续时间：1s。

3）电影文案介绍营造整体效果

结合五颗星的文案，设置为：滑入效果，时长：1s。

4.创建页面切换

1.调整各电影显示页面

（如果要实现切换效果，其实就是不同页面状态的预览。）

首先，调整每部电影的海报、背景图片、文案介绍。 记住海报的两种尺寸，正面大图为：268*377，侧面小图为：227*320。 调整每个海报页面的尺寸时，直接输入尺寸，然后将其移动到预定位置。

（ps：可能有人会问，为什么不直接替换图片呢？因为我们要做连续切换的效果，如果直接替换的话，就没有神器移动的动态效果了！）

2.设置海报外观效果和组件事件

1）将《我和我的祖国》大海报设置为：跳动效果，时长：1s；

2）设置《攀登者》海报：点击事件，跳转到下一页状态，动画：神奇的移动效果，时长400ms；

3）设置全局事件为：向左滑动，跳转到下一页状态，动画：神奇的移动效果，持续时间400ms；

4）设置全局事件为：向右滑动，跳转到上一页状态，动画：神奇的移动效果，持续时间400ms。 （如果首页没有上一页，则不设置。如果最后一页没有下一页，则不设置。）

5) 按照上述步骤1-4 设置所有页面的状态。

3.设置后预览效果

5.详细介绍页面

1. 复制相应页面并修改，保留大海报和背景图，删除其他不必要的组件。

（保留大图海报是为了营造一种神奇的动人效果卡通形象，如果再加一张就没有这种动人效果了）

2.演员设定

下面是一个可以左右滑动的效果，使用的是动态组件。

3.设置页面切换效果

1）在“我和我的祖国”页面大海报上创建点击事件，跳转到“我和我的祖国-点击”页面。 动画效果为：神奇移动效果，持续时间：400ms；

2）设置《我和我的祖国》全局事件为：向上滑动跳转到《我和我的祖国-点击》页面海报设计比赛评分标准，动画：神奇的动作效果，时长400ms；

3）在“我和我的祖国-点击”页面，结合海报和取消按钮，创建点击事件，跳转到“我和我的祖国”页面。 动画效果为：无。 （为什么不设置一个神奇的效果呢海报设计比赛评分标准，哈哈~因为文案消失的效果太难看了，大家可以自己尝试一下）

4.设置文案效果

1）合并所有文案，设置为：滑入效果，时长：750ms

5.按照（步骤5：1-4）介绍相应的电影，就完成了！

Duang duang duang 效果完成啦~来预览一下

亲自体验交互式原型：