微信H5页面设计总结

运营推广39

一个让人眼前一亮的微信H5一定是有着动人的页面设计,页面设计是H5的门面担当。如何通过排版、动效、音效、交互等方面去打造一个优秀的H5?请看以下总结。

微信H5页面设计总结

1.排版

手机屏幕上有一个视觉中心点,想要快速吸引注意力最好是有一个核心元素在手机屏幕的集中位置。元素不用太多,重要的是要突出重点,做到简洁明了。用户在看到简洁排版就能判断这个内容浏览不需要花费太多时间,便会带着轻松的态度去阅读。

2.动效

动效决定了内容元素的效果呈现,元素的位移,翻转,缩放,淡出等都要提前与前端设计师沟通。背景动效建议选择缓慢的动态效果,避免抢了核心元素的风头。例如“京东招聘”背景中缓缓移动的流星。

3.音效

音效设计一定要考虑到用户浏览时的场景多样性,不能过于粗暴,循序渐进为最佳,留一点在打扰打他人前关闭音效的过渡时间。关闭音效的按钮设计以页面元素去代替是最好的,但是也要足够醒目,以防被用户误以为无法关闭音效而直接退出浏览。

考虑到加载速度,音乐文件建议控制在30秒以内,大小控制在100k以内最佳。如果是无限循环的音乐,要做好头尾相连,不能在结尾处做的过于突兀,否则会影响浏览体验。

4.交互

常见的交互方式有翻页、点击、擦除、滑动等,这些交互方式相对简单,能够满足展示产品的基本需求。网络上有许多H5在线生成器可以制作这些简单交互的H5。

游戏型的交互方式比较受欢迎,传播度也高,例如经典的“围住神经猫”等。还有一些需要使用计算逻辑型得出结论的H5,例如“支付宝年度账单”、“测测你的隐藏属性”等测试类、统计类、总结类H5,得出结果海报也会增加传播率。

“好看的皮囊千篇一律,有趣的灵魂万里挑一。”这句话在H5设计上恰好要反过来说。如今太多内容形式上千篇一律的H5了,但是页面设计却百花齐放。H5页面设计是最直观的,它最直接影响了用户体验。

本站内容来源于网络,并不代表本站立场!版权归原作者所有,侵权请联系删除,转发请注明来源,文章内容仅供参考。
本文链接: http://www.doyin.net/yunyingtuiguang/28259.html