[font='微软雅黑','sans-serif']想必不少小站粉丝都被昨天小站海报给吸引了，想知道这周一究竟有什么惊喜上线？实际，今天要预告新产品上线的，但始料未及是，小站的内容产品遭到了国内三个门户网站的围追堵截，他们个个想首发，个个都要这第一次，无奈协商要明天才能确实，所以内容改下期推送了，千万别错过~[/font] [font='微软雅黑','sans-serif']今天，小呆来带大家看一支最近非常亮眼的H5作品，这支H5出品于微信，而它的内容又非营销！[/font] [align=center][font=微软雅黑, sans-serif][b][size=14pt][color=#9b2c19]WEDESIGE[/color][/size][/b][/font][font=微软雅黑, sans-serif][b][size=14pt][color=#9b2c19]品牌形象[/color][/size][/b][/font][/align][align=center][img]//image.xuehui.com/member_article/1/1/20/4405709f53908efb325a0bb14e246c5a/2017/04/19/1492588871-6288-small.jpg[/img][/align][font='微软雅黑','sans-serif']所谓亮眼，指代的并不是火爆或者说刷屏，而是因为出现的少、新奇、并且有趣，而这又集中在2个点：[/font] [font='微软雅黑','sans-serif']1.[/font][font='微软雅黑','sans-serif']微信作为一个用户量巨大的社交媒体工具，在生活中早就被我们熟知了，然而这么多年过去了，公众们却并不知道微信整套视觉体系的由来。但是，这支H5就用了 [b]互动页面+视频展示 [/b]的方式解析了微信视觉体系的设计规范、产品概念、设计细则，而且表意清晰，内容直观。[/font] [align=center][font='微软雅黑','sans-serif'][img]//image.xuehui.com/member_article/1/1/20/4405709f53908efb325a0bb14e246c5a/2017/04/19/1492589834-3324-small.jpg[/img] [/font][/align][align=center][font=微软雅黑, sans-serif][size=9pt][color=#7f7f7f]微信LOGO的视觉由来[/font][/size][/color][/align][align=center][font=微软雅黑, sans-serif][size=9pt][color=#7f7f7f] [/font][/size][/color][/align][font=微软雅黑, sans-serif]2.[/font][font='微软雅黑','sans-serif']这支H5是小站目前见到过，体验最好的 [b]H5+VIS[/b] 的实例，在纸张上的VI视觉体系被这么搬运到H5之后，你会发现，不管是什么品牌和内容，其表现力和内容感染力都被大大提升了。以前我们做VI最后的成品是一本VI画册。那么，从这支H5来看，我们为设计完成的VI做一支H5网站是不是更加实用呐？可以随时看，可以随时分享转发，可以做出有交互的动态和演示。[/font] [align=center][img]//image.xuehui.com/member_article/1/1/20/4405709f53908efb325a0bb14e246c5a/2017/04/19/1492589898-5898-small.jpg[/img][/align][align=left][/align][align=left][font='微软雅黑','sans-serif']这种基于传统内容的H5网站给人更多的思考空间，它一方面强调了H5的工具性，一方面又给我们展示了H5非营销的诸多优势。而通过这支产品来发散，你会发现，H5的面实际非常广，只是我们把精力都盯在了一件事情上，没有考虑太多其他领域，而微信此次的网站事件，确实让我们看到了一些不用的内容。[/font] [/align][align=left][/align][align=center][font=微软雅黑, sans-serif][img]//image.xuehui.com/member_article/1/1/20/4405709f53908efb325a0bb14e246c5a/2017/04/19/1492590024-6925-small.jpg[/img] [/font][/align][align=center][font=微软雅黑, sans-serif][font=微软雅黑, sans-serif][size=12px]微信色彩体系的由来[/size][/font][/font][/align][align=left][/align][align=left][font='微软雅黑','sans-serif']除了LOGO的展示外，此次的 H5-VI 系统还展示了，微信的配色系统、字体系统和辅助图形系统，并配有详细的VI文档可以下载。有需求的同学，可直接下载。[/font] [/align][align=center][img]//image.xuehui.com/member_article/1/1/20/4405709f53908efb325a0bb14e246c5a/2017/04/19/1492590147-2310-small.jpg[/img][/align][align=center][font=微软雅黑, sans-serif][size=12px][color=#7f7f7f]微信辅助图形的由来[/color][/size][/font][/align][align=center][font=微软雅黑, sans-serif][size=12px][/size][/font][/align][align=center][color=#7f7f7f][size=12px][img]//image.xuehui.com/member_article/1/1/20/4405709f53908efb325a0bb14e246c5a/2017/04/19/1492590169-4554-small.jpg[/img] [/size][/color][font=微软雅黑, sans-serif][size=12px][color=#7f7f7f]微信字体的由来[/color][/size][/font] [align=left][font=微软雅黑, sans-serif]在展示方面的内容中，小呆还发现了一个细节值得我们注意，就是此次H5网站内置的4段小视频，格式非MP4,而是webm,这个webm究竟是什么？[/font][/align] [img]//image.xuehui.com/member_article/1/1/20/4405709f53908efb325a0bb14e246c5a/2017/04/19/1492590220-8472-small.jpg[/img][/align][align=left][font=微软雅黑, sans-serif]原来webm是web端的一种视频格式，是专门为web网页而生的视频格式，这种格式压缩比高、体系小、清晰度好，整支H5的四段小视频加起来不过2.8兆。[/font][/align][align=left]但最头疼的问题是，因为浏览器的兼容问题，webm的应用受到了不小限制，而此次微信团队启用webm视频格式，也算是一个小信号，起码微信端的视频支持应该已经比较好了，各位开发者如果看到了内容，就可以赶紧去尝试了！[/align][align=left]除了VI与H5的结合，我相信未来还会出现更多非营销H5与传统内容的链接，而我们的产品也同样如此。好了，咱们今天的分享就到这里，一起期待下篇内容吧！[/align]