app引导页交互动效-设计记录
引导页插画动效设计笔记📒
App引导页交互动效-设计记录
💗写在前面
1.简单的介绍需求背景：
这次设计的app引导页是公司下期上线的设计需求。我们公司是面向保险代理人(营销员)的2B企业，是保险中介平台，售各品牌保险产品。
2.设计初衷：
有听过“前线”保险代理人这样的故事—保险代理人培训完后会进行“陌拜”(陌生拜访)，经常会碰壁，被拒绝，被冷眼，甚至会被说是“骗子”；这些往往都是对内心极大的挑战，冷漠感极强。而引导页是用户下载app之后，与用户的初次页面交流，介于前者基础，我想用人一生5个重要年龄阶段为故事线，结合公司产品，向用户展示“一路有我们守护你陪伴你”这种暖心的方式寻求用户的同理心，留下“我们懂你”的第一印象。
💗初步设计思考
1. 场景切换有在以下两种方式中纠结，最后选择了后者。
a方式:当前场景中，各个元素渐入渐出，依此类推到下个场景。
b方式：场景移动更换，人的一生似一幅时间轴长画，以人物为中心移动至每个场景的动画方式。
a方式场景之间联系较少，各场景独立性太强，脱离了想要用故事线的情感方式表达的初衷。相比于a，b方式使得场景之间的联系就更加紧密，场景移动即为时间流逝，以小人不停的前进经历着人生中几个重要时刻，我们始终与你们同在，懂你护你，所以我们提供的即是你所需要的，暖心的方式取得用户的信任感。所以我选择了后面的设计想法。
2.设计风格基调的确定。
想要采用噪点插画风格，和抽象与写实相结合的方式。
app主色调为红色，辅色为：黄色；主色调采用偏橙的红色(珊瑚红：Pantone 2019年流行色)，这种次生色结合了红色的热情和黄色的暖意，带来温暖活力的色彩情感，符合5个场景的情感基调。
【以上为使用到的色卡】
💗UI设计稿实现
1. 使用软件。
PS、sketch、AE、数位板、
注：AE中使用了各种脚本插件后文会说明。
【引导页01心有所向】 【引导页02爱有所依】
【引导页01心有所向】 【引导页02爱有所依】 【引导页05老有所养】
1. 设计思路说明：
5个人生重要阶段，每个场景均有一段文案，个人感觉文案无论是从公司产品还是用户情感的角度，都很窝心，创新部文案策划小哥哥棒棒哒～
《引导页01心有所向》叙说的是18岁徜徉书海懵懂好奇的我们，所以我想要用小人在书签上坐着书签插在放大版的书里，用夸张抽象的设计方式表现这种徜徉书海的方式和懵懂的状态。易懂又能增加趣味性。
《引导页02爱有所依》选取的是28岁旅行结婚的场景，是最能触动甜蜜又幸福的时刻。场景用的是有山有水有你有我，体现蜜月旅行的悠闲轻松感。结合旅游险、意外险(公司产品)。
《引导页03产有所保》30岁是刚成家不久，正在精心打造自己小窝的年轻人，一方便辛苦打造自己的家另一方便也要为这份来之不易来份保障，此场景定位的是家庭责任险(公司产品)。周末小两口窝在沙发里，简简单单的看部剧就是最自在的时刻了，所以我绘制了比较贴合自然生活的场景，期望引起用户的共鸣。
《引导页04幼有所护》38岁拥有了两个小孩，成为了全家人关注的焦点。产品定位：重疾险、意外险(少儿重疾、少儿意外)。由于引导页03和04都是在室内，既然它们是有联系的场景，所以在场景设计上给他们做了延伸，和公共元素的拼接(黄金櫆)，为防止人多显得拥挤，我绘制了大大的落地窗，半透明的窗纱和阳台，视觉上更宽广些，格局更大些。
《引导页05老有所养》“当我也为人父母，才明白，再爱你也不及你爱我”这句文案比较打动我，当我成为了你，才明白你对我的爱无可替代。父母始终不愿成为子女的负担，养老险(养老年金、重疾险、老年意外等公司产品)可以替你分摊负担。绘制了长椅上你我相互依靠看夕阳西下，枫叶飘落，秋衣浓浓，但是人物姿势设计，以及整体色调些许偏红来平衡秋意萧条感和年长的无奈感。
还有最最想说的，是大胆设计了轮播点样式，我觉得既然是以时间为轴向的故事线，那么是不是可以用进度条的方式呢，故而设计了下左图下中图样式，但红色的进度条感觉像温度计🌡️给人感觉不太舒服；进度条是当前进程程度指示，继而想到电子产品在充电时，电池也是一种能量进度的显示，而且“充电”是人一生都持续坚持的事情，它具有正面积极的意义，所以最终设计为下右图能量轮播点样式。
【轮播点样式】
1. 设计风格需统一。
a. 配色：不同的色彩带来不同的情感体验。此引导页以红色系配色为主，搭配黄色系色彩，以及用很少的蓝色来综合眼球视觉的需要，前进色与后退色相搭配比较符合色彩的延时效应(长时间盯着一种色彩，比如橙色，再将视觉移向灰色背景一段时间隐约能看见蓝色（互补色）)。
b. 投影方式：由于有板绘，所以会考虑图层样式、手绘投影这两种投影方式。图层样式是数值化投影，‘距离、大小’等参数是否一致，决定投影的虚实程度。而手绘投影的随机性会更强些，适用于塑造不规则的物体形状的投影。
c. 物体体形塑造方式：这次风格是手绘和写实风格相结合，分别采用软件形状绘制和板绘来塑造物体结构，这二者决定画面风格是否写实、抽象、具象程度。人物不必描绘的过于细致，因为本来场景绘制是比较丰富的，人物绘制过程中只要把该有的阴影关系表现即可，否则画面会太满。
d. 板会用的是噪点插画方式：
笔刷：48号干边深描油彩笔
48号笔刷用来线条打形，(实)投影，填充等。
✨✨当画笔的不透明度为100%时，覆盖涂抹不会有叠加效果。当画笔的不透明度小于100%时，覆盖涂抹会有叠加效果，《引导页02爱有所依》中水波纹就是用的这个方法。
笔刷：喷枪柔边低密度粒状
该笔刷用于噪点颗粒感的塑造，添加肌理感原则：其一局部采用比环境色一深一浅加原色，或邻近色的色彩搭配；
其二在受光处加浅色肌理，背光处加深色肌理。
笔刷：标配版柔边圆
(虚)投影的绘制。
💗AE交互动效绘制
按照之前的初步设计思考的第二个想法，有如下初稿的交互实现。
【文件太大，预览不了😫】
链接:https://pan.baidu.com/s/1z7__avSReJvfZGJn0lY8Rw 密码:jth3 (可查看交互原稿)
1. 在AE制作中有一些想要记录📝的地方。
🎈插件1:Precomp Anchor Repo.jsxbin 预合成中心点锚点重新定位
【下载链接:https://pan.baidu.com/s/1WIpcr0ZSW9-5bZ1p9VPoww 密码:4yn5】
在绘制过程中，发现对于预合成图层无法调整中心点，用这款插件脚本可以快速给预合成图层中心点定位，会生成单独的调整层便于编辑，也可在插件面板上直接快速编辑。
🎈插件2:Duik.jsx 骨骼绑定脚本
这款就是小人骨骼四肢绑定，然后达到很自然的走路，运动效果的插件。
操作步骤：在绘制时，需要将四肢骨骼作为单独图层，比如左手、左小臂、左大臂，同理，右脚，右小腿，右大腿；➡AE中分别将骨骼四肢的中心点调整(如下图)➡子父级绑定(由外向内，比如：左手父级左小臂，左小臂父级左大臂，左大臂父级身体)➡建立控制器(各肢体仅建立在最外层部位，比如：左手)➡IK控制柄绑定(顺序不能乱，由外向内：左手-左小臂-左大臂-左手控制器)。
【骨骼绑定解析图】
🎈万能表达式
AE万能弹性表达式：【amp:振幅，freq:频率，decay:衰减度】
amp = .1;
freq = 2.0;
decay = 2.0;
n = 0;
if (numKeys > 0){
n = nearestKey(time).index;
if (key(n).time > time){n--;}
}
if (n == 0){ t = 0;}
else{t = time - key(n).time;}
if (n > 0){
v = velocityAtTime(key(n).time - thisComp.frameDuration/10);
value + v*amp*Math.sin(freq*t*2*Math.PI)/Math.exp(decay*t);
}
else{value}
AE万能回弹表达式：
n = 0;
if (numKeys > 0){
n = nearestKey(time).index;
if (key(n).time > time){
n--;
}
}
if (n == 0){
t = 0;
}else{
t = time - key(n).time;
}
if (n > 0){
v = velocityAtTime(key(n).time - thisComp.frameDuration/10);
amp = .03;
freq = 2.5;
decay = 4.0;
value + v*amp*Math.sin(freq*t*2*Math.PI)/Math.exp(decay*t);
}else{
value;
}
注: 这两个弹性表达式效果差不多，后者在动画结束时回弹效果稍明显些。
🎈进度条动效交互效果
5个场景中年龄分割点为“18、28、30、38、68”，AE中建立文字图层输入数字“0”，【窗口】-【效果与预设】-【文本：编号】拖拽至文本层，在【效果控件】中调整小数位数、颜色、大小等属性值；根据在不同的时间建立不同的【数值／位移／随机最大】关键帧。
🎈其他操作
还有蒙版，增加缓动等操作，另外在制作人物走路运动动效的时候注意记录运动时常，尽量运动的保持统一；以及场景移动
时长，每个场景停留时长等。
💗总结与思考
遇到的问题：
在AE制作过程中遇到一些小问题，
1. 做“数字”编号时，有【效果控件】，误开了其他图层菜单栏“fx”属性，导致该图层制作的效果作用在“效果与预设”的图层(数字编号)上，失去原图层效果。
2. 由于在ps制作时，为了保持风格的一致，5个场景在同一个画布中(3750*1334)，最后需要AE输出的尺寸为750*1334；3750*1334的mov制作好后，AE中建立750*1334的合成，导入3750*1334的mov，左对齐即可。
优化：
初稿出炉后，发现在场景合并图层时，应该将人物投影分离开，需要单独做动效的元素单独建立图层；
动效的细节可以再精致些；
另外，就是效果图出来后，与开发小哥哥关于如何实现效果的讨论了，其实也是在开发实现成本与UI效果用户体验之间权衡。
