今日重磅福利
后台回复【字体】即可获得:
点击是最常见的手势之一,可以用在页面转场上。这种交互手势,一般需要设置点击引导。
引导可以作为注释帮助用户理解H5,让用户跟着H5的思路行动,推动剧情发展。
与主题相符的个性化的引导设计,能快速将用户带入情境。
比如红网的《带上“希望的种子”去北京》中,用户可以点击行李传送带上的行李“开箱验货”,查看代表们的建议,聆听他们的故事。
H5用行李箱作为点击按钮,为用户搭建去北京的场景。即使不能亲临现场,也可以“参与”会议,了解到会议内容。
点击手势也常用在测试型H5上,用户点击屏幕选择不同选项,生成专属测试结果。
连击交互主要应用在游戏类H5中。连续点击屏幕的节奏感比较强,关联点击次数与积分排名,则会
带有竞技性,能刺激分享、吸引更多人参与。
这种单一的交互方式操作比较简单,所以会搭配限时、限次等玩法。
《漫威电影十周年》H5设计了一个“揍”灭霸的环节,用户需要猛点屏幕,记录10秒内时间“揍”灭霸的次数。10秒结束后,用户可看到连击的次数和自己全网排名。
《穿越中国70年》是一支“庆祝新中国成立70年周年”的视频型H5。
其中“为祖国点赞”环节需要用户连击屏幕,每点击一次记为一分。连击时产生的爱心特效会变色,画面给用户新鲜感。
点赞创意来自短视频点赞,交互手势是用户熟悉的形式,有利于带动为祖国“打call”的积极情绪,增强体验感和沉浸感。
长按需要用户根据引导,长时间接触H5页面中的某处按钮,保证画面的连续播放和顺利转场。
由于长按需要用户的手指保持静止的停顿状态,用户可能会感到无聊乏味。
在设计时,最好可以提示H5的播放进度,给予用户时长参考。
长按交互常用于一镜到底形式的H5。往往考验故事的衔接和镜头的转换,运用得当可以带给用户很好的体验,让用户精神更加集中,从而提升完播率。
《你我当年》利用长按动作,用户可以用画中画形式畅快观看所有内容。
H5回顾90后的童年暑期档,瞬间唤起童年记忆。
视差动画由于运动速率与主视觉画面不同,空间层次感更加鲜明。
这可以增加画面的新鲜感,缓解高密度内容带来的的视觉疲劳。减少阅读长图文时的乏味,从画面效果上辅助H5流畅转场。
《你想要的每个好,我们都努力做好》用滑动长图+视差动画的形式,带领用户从1988年穿越到2018年,串联起兴业银行的30年发展历史。
《我在童话里遇到你的时光》使用一张长图,滑动时会有一些小元素穿插过场,使得整支H5看起来炫酷又丰富。
拖拽区别于滑动,需要按着屏幕不松手,从一个点拖到另一个点,移动速度由用户控制,适合图片展示类或叙事类的策划专题。
《睡姿大比拼》H5利用了骨骼动画技术,用户可以拖动小人的四肢,DIY自己在床上的睡姿。
除了可以选择场景、人物外貌,H5还提供床上的小物件做搭配,放大或缩小后用来布置卧室。
— 今日福利 —
字体不在多,实用就行
可到底哪些些才最实用?
▼
一盏精选50+最常用字体礼包
▼
扫码
回复关键词
【字体】
即可领取
字体礼包链接将持续更新,请注意收藏
我就知道你“在看”
- 一盏精选50+最常用字体礼包:覆盖全部日常工作场景,包含了中文、英文和日文中会涉及到的各种实用的样式字体。
1单击交互
![5426783849cc649ddc2216e64f4c0d3d.png](https://i-blog.csdnimg.cn/blog_migrate/382dfcd20930d4459a7e56e69dbbcc16.jpeg)
![03d2b03d4e5ce82df3135a56370f9163.gif](https://i-blog.csdnimg.cn/blog_migrate/1e55e5da48af8d4ba0953328861f09c1.gif)
2连击交互
![0550f6ea855fb1e1412e677de7b5f6be.png](https://i-blog.csdnimg.cn/blog_migrate/369a50382249ec83dad2a1a25b7d349b.jpeg)
![e2886d9d8dd3b1e261b1be40a09be564.gif](https://i-blog.csdnimg.cn/blog_migrate/d9515ad445698c55138240d20b8e3525.gif)
![0f0dd62f767364e19c7d7d8070bf5fec.gif](https://i-blog.csdnimg.cn/blog_migrate/05a420ce180dc42660020bf1b5b0bd7d.gif)
3长按交互
![c12c6bcef75a48c9c7e6266970576614.png](https://i-blog.csdnimg.cn/blog_migrate/ced481c7a9c1b1fc49c96f3cb5f895a1.jpeg)
![e92a97663d5aa74f8e52d66bbd0170b6.gif](https://i-blog.csdnimg.cn/blog_migrate/eb584dc5d1dd152153146a14d75ca133.gif)
4长图视差交互
![c61ad6500a50299afc129270a14b7fc1.png](https://i-blog.csdnimg.cn/blog_migrate/72376a0ea07c9d770ab8a5fa6645be91.jpeg)
![d7262bbf26efda6fee8f38528596cc82.gif](https://i-blog.csdnimg.cn/blog_migrate/61a98f9876c2e2a887169f4cb968c64f.gif)
![59708c4fa4561ee20492505e794d984e.gif](https://i-blog.csdnimg.cn/blog_migrate/675e04e8bb799cf9b1af3bf34fbe25f1.gif)
5拖拽交互
![832f3d6d985493ea2a060090046f2666.png](https://i-blog.csdnimg.cn/blog_migrate/3256efdbcff7fbfa76f4b9fbf4522e69.jpeg)
![f3d627ed4853ec3aa98b27324c94808d.gif](https://i-blog.csdnimg.cn/blog_migrate/3d2b529ea71faf193717c6efa26e7c14.gif)
6
重力交互
手机在硬件上给出了很多技术发挥的可能性,活用重力感应、陀螺仪、速度加速器等硬件设备可以创新H5玩法,增加代入感。 摇晃手机时,H5会自动判断手机倾斜的角度。由于技术性比较强,所以重力交互常用在某个特定页面。 网易新闻的《时空恋爱事务所》就是利用手机重力传感器,摇晃手机唤醒主人公,开始剧情。![d665020b95a13780fd82b20855902979.gif](https://i-blog.csdnimg.cn/blog_migrate/1599d4b1ed117a72b251fdc9900052c1.gif)
73D空间交互
3D交互主要利用3D技术,搭建立体化场景,突破画面扁平化的限制,强调层次感。 但这种交互方式在开发设计环节难度较大,考虑到用户的使用习惯,3D交互的玩法也比较单一,常搭配点击、滑动等基础手势操作,3D作为H5亮点出现。 《龙猫线上扭蛋机今日营业!》中将“扭蛋机”“金币”等元素3D化,原本正常比例的动漫人物Q版化。 扭扭蛋是一个动态的过程,如果使用二维平面形象,互动的效果并不明显;3D物体强调了用户的临场感,还原扭扭蛋未知的趣味性,H5玩起来更加真实。![208deb9778c54d30b9c46e98cb7cb954.gif](https://i-blog.csdnimg.cn/blog_migrate/7093585c622367bdcfe4fdef2125d60b.gif)
8全景交互
在360°全景形式中,用户可以上下、左右滑动。 这种H5以类VR的形式承载整个画面交互,更注重H5场景的设计,空间立体感比较强,要求画面360°边界衔接流畅。 不过由于加载内容较多,H5体量较大,很可能会出现播放时画面卡顿等问题。 网易新闻的《一廿间,二十载》呈现全景向的场景,向用户介绍网易20周年的发展历史,用户可以360°旋转手机,查看全景画面,沉浸于H5营造的虚拟场景中。![e989f1dc49769cd48871ee92571afae8.gif](https://i-blog.csdnimg.cn/blog_migrate/bf73896ef7a9fa1c706c0d76c826bbdb.gif)
![171b577fb24bd35db58dacbee9e75d3b.png](https://i-blog.csdnimg.cn/blog_migrate/ec588763d1a1759a6075aa2a028834eb.jpeg)
![b5ff6b8aca6a56c81715db55d6d3ebb8.png](https://i-blog.csdnimg.cn/blog_migrate/58987967b1819222a004d667d8429f9d.jpeg)
不可错过的干货精选
![d4934ee834670fbd686cca0622be9d9e.png](https://i-blog.csdnimg.cn/blog_migrate/71d729557108a1684ab6c2f9191951da.jpeg)
![67dc5d9f9144a392193399eab691880f.png](https://i-blog.csdnimg.cn/blog_migrate/054a4ce626010d7fab8f8c7ecedb5048.jpeg)
![3f8b6f3918b30f8f3d62a89aeb97a126.png](https://i-blog.csdnimg.cn/blog_migrate/74f86339eba3dc026313eaac9d591a22.jpeg)
![571ff91a25279131a4fb7617406e7f3c.png](https://i-blog.csdnimg.cn/blog_migrate/d4ce1e829602c1374f4b2ff6fe204b5c.jpeg)
![48658618e4466e6355fe4bad329dfa66.gif](https://i-blog.csdnimg.cn/blog_migrate/3e00248f3d70ef1f1ca8ba6fa26df804.gif)