1.3.36

搜狗输入法手机皮肤设计进阶篇-音效动效篇

Recommand
北京/设计爱好者/6年前/887浏览
搜狗输入法手机皮肤设计进阶篇-音效动效篇Recommand

如何让手机键盘的皮肤锦上添花,有更好的视觉效果?本文将一一道出!

怎么让你的输入法皮肤动起来?

大多数输入法皮肤,都是安静地美好着,然而一些特定主题的皮肤加上动效后,更能锦上添花、烘托气氛。

1、开屏动效

了解了设计规范,选好了皮肤主题,那么来看看你的皮肤可以加哪些动效呢?

在调起键盘时可以添加开屏动效,开屏动效以GIF格式文件进行展示。你可以做任何关于你皮肤的动效,并生成GIF格式。

动效播放时间最好是保证在2秒以内呢~

如下图“星球大战”皮肤:


2、预览视频是在皮肤启用页的状态下进行播放为AVC(h264)编码的MP4格式,可以配合音效,视频保证在10s以内。

如下图“彩虹键盘”皮肤:


3、下图“功夫熊猫”皮肤实现的原理则是:

当点击中间按键后,剩下的熊猫都会看向中间的方向。当按下其中一个按键后,会带动其他按键背景换图片。


4、挂件动效

按下挂件动效:字母键、功能键可添加挂件动效,可以通过按下的动作引起一种或多种元素按照设定的轨迹出现。

如“彩蛋”皮肤,空格键按下会蹦出小兔子,字母键按下会蹦出糖果。


5、背景挂件动效

可以按照设定的时间和移动的轨迹让一种元素在大背景循环运动出现。

如“樱花春雨”皮肤大背景上的花瓣不时飘落,“蝙蝠侠大战超人”皮肤大背景上的云朵水平有右移。

讲了这么多现有技术支持的动效形式,期待有想法的你在可实现基础上能挖掘出更多创意动效玩法!

14
Report
|
6
Share
评论
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
Log in