10个提升H5逼格的设计细节
来源：意派科技（微信号：epub360）
作者：小派
“细节是魔鬼”，作为追求专业完美的我们，必须注重细节。
那H5有哪些设计细节呢？
从H5作品的结构角度，小派试着整理了十个。在浅谈每个细节时，会附一些优秀案例，期待给大家带来一些帮助。
一、Loading页
加载页可以说是用户的第一印象，一个有趣的loading，无疑会提升作品的吸引性和用户的耐心。
->>大众点评：九步之遥
->>HUAWEI WATCH
后面两支H5来自Epub360平台，第二支H5的加载页怎么那么个性化？
细心的派友会发现，作者把Epub360默认的加载页“隐藏”了，其实现原理就是加载条的颜色和背景页颜色设为一样，感觉很多派友喜欢用这招。
不过那样会造成两次加载的感觉，过渡的视觉体验有些不好，提高了用户等待时间，建议大家慎重使用。
二、预加载页
如果H5作品里素材比较大，囿于网络环境等因素，无法把当前页面的图片素材一次加载到位、就容易碰到卡顿缺图或者图片没有加载完整的情况，体验很不好，这时建议使用“预加载”功能。
同样，也应注重预加载页面样式喔。
->>鱼刺创意：口袋白鲸
上面三支H5都用到了预加载功能，大家可以滑快些，来感受下预加载功能。
三、背景音乐
“未见其人，先闻其声”，H5背景音乐的重要性不言而喻。关于H5背景音乐，之前专门写过，这里只想再提醒一声：建议不要用过于流行或者大家已经有些审美疲劳的音乐，即使这个音乐本身很棒，比如 Faded - Alan Walker 和 Breath and Life - AudioMachine 。
另外，小派在H5制作过程中，一般是根据作品风格和音效来设计动效，而不是最后才配音效。
四、背景音乐图标
个人认为背景音乐图标可要可不要，如果要的话，建议设计下，弄得美观些，比如像下面这三支H5。
五、翻页提示
翻页是H5里经常用到的，大家先感受下下面三支H5作品的翻页。
->>Bihua（笔画）
->>申活馆开业邀请
感受完后，不知大家有什么心得没？
小派的一点心得是：翻页提示的样式最好是和整体相搭，比如像第一支那样；可以直接用Epub60的图形组件（SVG格式），比如像第二支那样；翻页提示完后可以隐藏，以免破坏整体视觉，比如像第三支那样。
六、分享提示
比起一个简单的箭头和一句冷冰冰的“点这里分享”，用心的细节设计带来的高品质和好感度是显而易见的，附几个案例大家感受下！
注：此节来自 ISUX 鱼小干《那些过目不忘的H5页面》
七、“再玩一次”提示
尾页除了有“分享提示”、“立即购买”按钮，建议也不要少“再玩一次”之类的提示。
八、作品标题
手机微信打开作品后，显示在页面正上方的文字就是作品标题，作品标题建议不要太长。
微信朋友圈的分享短语默认是作品标题，造成有些小伙伴容易把分享短语设置为作品标题，其实这两个可以分开设置的，Epub360后台提供了比较人性化的设置界面喔，如下图所示。
九、分享短语
如果想分享短语里包含“我是第几个”、“用户昵称”、“游戏得分”等个性化信息，对于Epub360平台，一般要用到微信分享短语触发器并结合一些参数信息。
十、分享缩略图
分享缩略图和上面的分享短语比较类似，除了预设的，可以是用户头像、用户上传的图片、用户截屏上传等。
评论
评论
推荐评论
暂无评论哦，快来评论一下吧！
全部评论（0条）