查看原文
其他

原来一支H5就能揭秘微信的所有设计!

小呆 H5广告资讯站 2019-04-26

想必不少小站粉丝都被昨天小站海报给吸引了,想知道这周一究竟有什么惊喜上线?实际,今天要预告新产品上线的,但始料未及是,小站的内容产品遭到了国内三个门户网站的围追堵截,他们个个想首发,个个都要这第一次,无奈协商要明天才能确实,所以内容改下期推送了,千万别错过~

今天,小呆来带大家看一支最近非常亮眼的H5作品,这支H5出品于微信,而它的内容又非营销!



WEDESIGE品牌形象

所谓亮眼,指代的并不是火爆或者说刷屏,而是因为出现的少、新奇、并且有趣,而这又集中在2个点:

1.微信作为一个用户量巨大的社交媒体工具,在生活中早就被我们熟知了,然而这么多年过去了,公众们却并不知道微信整套视觉体系的由来。但是,这支H5就用了互动页面+视频展示的方式解析了微信视觉体系的设计规范、产品概念、设计细则,而且表意清晰,内容直观。

微信LOGO的视觉由来

2.这支H5是小站目前见到过,体验最好的H5+VIS的实例,在纸张上的VI视觉体系被这么搬运到H5之后,你会发现,不管是什么品牌和内容,其表现力和内容感染力都被大大提升了。以前我们做VI最后的成品是一本VI画册。那么,从这支H5来看,我们为设计完成的VI做一支H5网站是不是更加实用呐?可以随时看,可以随时分享转发,可以做出有交互的动态和演示。

这种基于传统内容的H5网站给人更多的思考空间,它一方面强调了H5的工具性,一方面又给我们展示了H5非营销的诸多优势。而通过这支产品来发散,你会发现,H5的面实际非常广,只是我们把精力都盯在了一件事情上,没有考虑太多其他领域,而微信此次的网站事件,确实让我们看到了一些不用的内容。

微信色彩体系的由来

除了LOGO的展示外,此次的 H5-VI 系统还展示了,微信的配色系统、字体系统和辅助图形系统,并配有详细的VI文档可以下载。有需求的同学,可直接下载。

微信辅助图形的由来


微信字体的由来

在展示方面的内容中,小呆还发现了一个细节值得我们注意,就是此次H5网站内置的4段小视频,格式非MP4,而是webm,这个webm究竟是什么?

原来webm是web端的一种视频格式,是专门为web网页而生的视频格式,这种格式压缩比高、体系小、清晰度好,整支H5的四段小视频加起来不过2.8兆。

但最头疼的问题是,因为浏览器的兼容问题,webm的应用受到了不小限制,而此次微信团队启用webm视频格式,也算是一个小信号,起码微信端的视频支持应该已经比较好了,各位开发者如果看到了内容,就可以赶紧去尝试了!

除了VI与H5的结合,我相信未来还会出现更多非营销H5与传统内容的链接,而我们的产品也同样如此。好了,咱们今天的分享就到这里,一起期待下篇内容吧!


进入资讯站社群,看H5分享

- 加微信:zixunzhanxiaomi -

微博: @H5资讯站  QQ群: 465521360   微信: zixunzhanxiaomi

    您可能也对以下帖子感兴趣

    文章有问题?点此查看未经处理的缓存