H5设计的细节有哪些？（一）

一个H5制作的细节决定了你制作H5的质量。为了帮助用户追求最完美的体验，我们必须在细节上下功夫。那H5的设计细节有哪些可以值得借鉴的呢？

一、Loading页

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

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

->>中国南方电网：万家灯火，南网情深

->>HUAWEI WATCH

第二支H5的加载页怎么那么个性化？

细心的派友会发现，作者把默认的加载页“隐藏”了，其实现原理就是加载条的颜色和背景页颜色设为一样，感觉很多派友喜欢用这招。

不过那样会造成两次加载的感觉，过渡的视觉体验有些不好，提高了用户等待时间，建议大家慎重使用。

二、背景音乐

“未见其人，先闻其声”，H5背景音乐的重要性不言而喻。关于H5背景音乐，之前专门写过，这里只想再提醒一声：建议不要用过于流行或者大家已经有些审美疲劳的音乐，即使这个音乐本身很棒，比如 Faded - Alan Walker 和 Breath and Life - AudioMachine 。

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

三、预加载页

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

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

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

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

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

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

四、翻页提示

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

->>Bihua（笔画）

->>申活馆开业邀请

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

小编的一点心得是：翻页提示的样式最好是和整体相搭，比如像第一支那样；可以直接用的图形组件（SVG格式），比如像第二支那样；翻页提示完后可以隐藏，以免破坏整体视觉，比如像第三支那样。

五、背景音乐图标

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

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

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

->>GEAK Watch UI

作为营销方式，H5设计必须用心感受用户的体验过程时候舒适度，这是能够营销用户浏览量和转发欲望的一个地方。所以H5设计是十分重要的，在创作H5营销活动的时候一定要注重细节。