模拟 Skeleton Loader

https://www.youtube.com/watch?v=8LZ4lNjJ9UE

今天来做一个有趣的，发现这影片有教怎麽做一个「正在载入」的画面。
（看到一些中文翻译 Skeleton Loader 叫做骨架屏？）

我其实比较好奇的是这种需求常出现吗？

想一想，的确是一个使用者可能在网路速度、硬体限制或是软件本身问题可能遇到的情境。

不过要模拟到这麽细致，感觉是要很逼真的原型要做测试的时候？

先来跟跟看，短短的，也刚好是很喜欢的那个微软设计师。

这是 ProtoPie 的 Ask ProtoPie 系列，使用者问问题，ProtoPie 做给你看。

今天用的 ProtoPie 档案在这边：

https://cloud.protopie.io/p/e4f32b8c63?utm_source=youtube&utm_medium=video&utm_campaign=tutorial

开始动手

这次会有三个 Scenes ，第一个是使用者会点开 app 的画面，第二个是 UI 框架正在载入内容，第三个就是进入 app 的画面。

我们选择第一个画面 Scene 1 里面的太阳花 icon 。

因为使用者会「点」app 然後会转场到app 去。
所以直接用 Tap 这个 Trigger ，接上一个 Jump 的 Response 。

而我们要 Jump 到第二个 Scene 去。

接着去第二个 Scene 。

因为不需要使用者做什麽动作，画面出现就是 Trigger ，并且要到第三个 Scene 去。
因此我们用 Start ，并接上一个 Jump 的 Response 到 Scene 3。

但我们这次 Transition 改用 Fade ，讲者说明是因为我们希望第二个画面到第三个画面是渐进的。
（就是你可能开 Youtube 发现影片还在跑那种感觉，但已经看得到 Youtube 的画面。）

用 Preview 一看，好像转场太快（网路太好或是换新手机的概念。），所以讲者建议 Jump 的 Start Delay 改 2.5 秒。

（讲者这时候还特别强调 easy as PIE）
（话说说在台湾不容易吃到美式的派...对，就是老电影美国派那种派）

到这边这三个画面算串好了，讲者带我们看看有哪些可以模拟更逼真的地方。

让模拟更为逼真

Preview 的时候会发现，点开 App 已经立刻就看到灰框出现，这里可以调整的比较自然一点的出现。
（这是点开瞬间的截图，那时候已经看到灰色框了。）

另外一个地方是，通常 Skeleton Loader 会有一个闪烁的动态（让使用者觉得有事情要发生了减少等待不适感）。
这个部分等等一并来处理。

先来到 Scene 2 选择两个灰框。

接着把 Opacity 调成 0 。

然後在这个 scene 的 Start Trigger 最後面加上一个 Opacity 的 Response 。
这样就能让画面完整出现的时候才把灰框透明度从0改到100。

两个元素 Frame 9 和 Frame 10 都需要一个 Opacity 。

Preview 看一下，点开 app 先变成全画面占满之後才出现灰框，这就是我们要的。

接下来要做闪烁的 Loading 状态。

我们回到 Scene 2 。

我们原本 Opacity 只有在 Start 後面让 Frame 9 和 Frame 10 变成 100% 的透明度。
於是我们就复制这两个 Opacity 的 Response 贴上。

但我们希望透明度从画面启动的 0 到 100 再到一个比较低的透明度。（闪烁动画的分镜）

因此要把後面两个 Opacity 调一个比较低的 Opacity ，讲者是用 25% ，并且 Start Delay 设定个 0.5 秒慢点出现。
（注意 Response 的时间轴也会改变）

接着，选 Repeat 以及 Infinite Repeat 。这样就能让闪烁一直发生直到上面的 Jump 2.5 秒後跳到下一个 Scene 3 。

Preview 看一下，发现好像闪烁频率太高，使用者看起来会很不舒服。

这时候把四个 Opacity 的 Duration 都拉长一点，讲者建议 0.5 秒。

从头 Scene 1 来 Preview 一下，点一下 app ，等待载入动画，成功！

（请脑中自行想像，或是自己下载来玩玩看，还满有趣的，也可以自己继续微调）

顺道一提，刚刚发现在调整 Duration 如果是按上下钮，这边的时间轴也会显示时间。
ProtoPie 真的很贴心很多提示呢。

Ikea 真是一个很温馨的地方。

如果未来养老院也能跟这个结合，每天活在舒服的环境里面，白天会有年轻人翘课翘班来吃饭逛街来可以跟长者互动。

好像不错呢。