header_v0.7.32

10个提升H5逼格的设计细节

108天前发布

原创文章 / 多领域 / 观点
意派 原创,如需商业用途或转载请与意派联系,谢谢配合。

瞎搞了这么久,终于知道问题出在哪了...

“细节是魔鬼”,作为追求专业完美的我们,必须注重细节。  


那H5有哪些设计细节呢?



 一、Loading页  


加载页可以说是用户的第一印象,一个有趣的loading,无疑会提升作品的吸引性和用户的耐心。

   

1c40593a439ea8012193a3da4d53.jpg

 

->>大众点评:九步之遥

 ->>中国南方电网:万家灯火,南网情深

->>HUAWEI WATCH


后面两支H5来自Epub360平台,第二支H5的加载页怎么那么个性化?


细心的派友会发现,作者把Epub360默认的加载页“隐藏”了,其实现原理就是加载条的颜色和背景页颜色设为一样,感觉很多派友喜欢用这招。不过那样会造成两次加载的感觉,过渡的视觉体验有些不好,提高了用户等待时间,建议派友们慎重使用。  



二、预加载页  


如果H5作品里素材比较大,囿于网络环境等因素,无法把当前页面的图片素材一次加载到位、就容易碰到卡顿缺图或者图片没有加载完整的情况,体验很不好,这时建议使用“预加载”功能。


同样,也应注重预加载页面样式喔。    


9306593a43c9a8012193a3dbf00a.jpg


->>案例学习:我们之间就一个字

->>鱼刺创意:口袋白鲸

->>夸克金融:赛因斯先生要见你


上面三支H5都用到了我们Epub360预加载功能,大家可以滑快些,来感受下预加载功能。  



三、背景音乐    


4f54593a43efa8012193a354d1fb.jpg


“未见其人,先闻其声”,H5背景音乐的重要性不言而喻。


关于H5背景音乐,之前专门写过,这里只想再提醒一声:建议不要用过于流行或者大家已经有些审美疲劳的音乐,即使这个音乐本身很棒,比如 Faded - Alan Walker 和 Breath and Life - AudioMachine 。  


另外,小派在H5制作过程中,一般是根据作品风格和音效来设计动效,而不是最后才配音效。  




四、背景音乐图标 


我个人认为背景音乐图标可要可不要,如果要的话,建议设计下,弄得美观些,比如像下面这三支H5。    


2baf593a4427a8012193a3096e96.jpg


->>大众点评:我们之间就一个字

->>重庆万科2017新作案名发布会

->>GEAK Watch UI  



五、翻页提示  


翻页是H5里经常用到的,大家先感受下下面三支H5作品的翻页。    


6f04593a444da8012193a3366374.jpg


->>Bihua(笔画) 

->>申活馆开业邀请

->>努比亚:用双眸探究世界,看见更美


感受完后,不知大家有什么心得没?  


小派的一点心得是:翻页提示的样式最好是和整体相搭,比如像第一支那样;可以直接用Epub60的图形组件(SVG格式),比如像第二支那样;翻页提示完后可以隐藏,以免破坏整体视觉,比如像第三支那样。  



六、分享提示  


比起一个简单的箭头和一句冷冰冰的“点这里分享”,用心的细节设计带来的高品质和好感度是显而易见的,附几个案例大家感受下!

    

2b27593a446ca8012193a36ddfea.jpg



七、“再玩一次”提示  


尾页除了有“分享提示”、“立即购买”按钮,建议也不要少“再玩一次”之类的提示。  



八、作品标题   


手机微信打开作品后,显示在页面正上方的文字就是作品标题,作品标题建议不要太长。  


微信朋友圈的分享短语默认是作品标题,造成有些小伙伴容易把分享短语设置为作品标题,其实这两个可以分开设置的,Epub360后台提供了比较人性化的设置界面喔,如下图所示。    


f363593a44dca8012193a32f41a6.jpg



九、分享短语  


如果想分享短语里包含“我是第几个”、“用户昵称”、“游戏得分”等个性化信息,对于Epub360平台,一般要用到微信分享短语触发器并结合一些参数信息。


a4be593a44f6a8012193a33d4e6d.jpg



十、分享缩略图  


分享缩略图和上面的分享短语比较类似,除了预设的,可以是用户头像、用户上传的图片、用户截屏上传等。   


11fd593a4500a8012193a3767c67.jpg

2
    意见反馈
    没有新消息
    密码登录
    短信登录
    微信二维码登录

    提示文案

    提示文案

    提示失败
    提示成功