三招满足h5页面创作灵感丨意派epub360

当我们知道该从哪里寻找灵感之后，下面就是如何将这些收集的灵感，高效的用于自己的设计中。

首先，准备工作必须做好，对收集的灵感素材进行整理，以便随时能够用来借鉴学习。以我们熟悉的H5为例：

背景图片

里面包含了一些常用的背景图片素材，人物、风景、建筑等。

字体

里面包含了一些特殊效果字体、手绘字体等，H5中需要设计标题和正文可以使用。

icon图标

里面包括了一些翻页、背景音乐图标、分享提示等。

动效、动画

常见的一些loading动效、动画交互效果。

然后，就可以尝试去运用这些灵感了。

比如，领导想要做一个企业微官网的展示，然后我们就可以先查找优秀案例，比如《H5研究院大事记》：

感觉这个长页面的导航效果很棒，于是决定以长页面为主题进行微官网H5的设计。

这里就遇到了个问题，大事记中的内容表现形式和微官网肯定是不同的，所以需要重新寻找排版与动画形式。通过收集的灵感，发现了一个比较适合微官网H5的设计风格。

上面的网站虽然不是基于移动端的，但我们可以通过谷歌浏览器的开发者工具来模拟iphone6或其他机型，来查看手机端效果。

我们在做微官网H5时，就可以参考上述网站进行再设计。

最后，来看看戏子同学的成品：

上述，就是简单的再现了如何运用灵感的过程，并不是说直接copy照搬，而是在学习研究他人的案例时，有意识地分析、理解其设计意图，最后重新再设计为自己的作品。

------

关注意派号：epub360，获取更多H5设计、案例、资讯