一個(gè)H5制作的細(xì)節(jié)決定了你制作H5的質(zhì)量。為了幫助用戶追求最完美的體驗(yàn)，我們必須在細(xì)節(jié)上下功夫。那H5的設(shè)計(jì)細(xì)節(jié)有哪些可以值得借鑒的呢？

一、Loading頁(yè)

加載頁(yè)可以說(shuō)是用戶的第一印象，一個(gè)有趣的loading，無(wú)疑會(huì)提升作品的吸引性和用戶的耐心。

->>大眾點(diǎn)評(píng)：九步之遙

->>中國(guó)南方電網(wǎng)：萬(wàn)家燈火，南網(wǎng)情深

->>HUAWEI WATCH

第二支H5的加載頁(yè)怎么那么個(gè)性化？

細(xì)心的派友會(huì)發(fā)現(xiàn)，作者把默認(rèn)的加載頁(yè)“隱藏”了，其實(shí)現(xiàn)原理就是加載條的顏色和背景頁(yè)顏色設(shè)為一樣，感覺(jué)很多派友喜歡用這招。

不過(guò)那樣會(huì)造成兩次加載的感覺(jué)，過(guò)渡的視覺(jué)體驗(yàn)有些不好，提高了用戶等待時(shí)間，建議大家慎重使用。

二、背景音樂(lè)

“未見(jiàn)其人，先聞其聲”，H5背景音樂(lè)的重要性不言而喻。關(guān)于H5背景音樂(lè)，之前專(zhuān)門(mén)寫(xiě)過(guò)，這里只想再提醒一聲：建議不要用過(guò)于流行或者大家已經(jīng)有些審美疲勞的音樂(lè)，即使這個(gè)音樂(lè)本身很棒，比如 Faded - Alan Walker 和 Breath and Life - AudioMachine 。

另外，在H5制作過(guò)程中，一般是根據(jù)作品風(fēng)格和音效來(lái)設(shè)計(jì)動(dòng)效，而不是最后才配音效。

三、預(yù)加載頁(yè)

如果H5作品里素材比較大，囿于網(wǎng)絡(luò)環(huán)境等因素，無(wú)法把當(dāng)前頁(yè)面的圖片素材一次加載到位、就容易碰到卡頓缺圖或者圖片沒(méi)有加載完整的情況，體驗(yàn)很不好，這時(shí)建議使用“預(yù)加載”功能。

同樣，也應(yīng)注重預(yù)加載頁(yè)面樣式喔。

->>案例學(xué)習(xí)：我們之間就一個(gè)字

->>魚(yú)刺創(chuàng)意：口袋白鯨

->>夸克金融：賽因斯先生要見(jiàn)你

上面三支H5都用到了預(yù)加載功能，大家可以滑快些，來(lái)感受下預(yù)加載功能。

四、翻頁(yè)提示

翻頁(yè)是H5里經(jīng)常用到的，大家先感受下下面三支H5作品的翻頁(yè)。

->>Bihua（筆畫(huà)）

->>申活館開(kāi)業(yè)邀請(qǐng)

->>努比亞：用雙眸探究世界，看見(jiàn)更美

小編的一點(diǎn)心得是：翻頁(yè)提示的樣式最好是和整體相搭，比如像第一支那樣；可以直接用的圖形組件（SVG格式），比如像第二支那樣；翻頁(yè)提示完后可以隱藏，以免破壞整體視覺(jué)，比如像第三支那樣。

五、背景音樂(lè)圖標(biāo)

個(gè)人認(rèn)為背景音樂(lè)圖標(biāo)可要可不要，如果要的話，建議設(shè)計(jì)下，弄得美觀些，比如像下面這三支H5。

->>大眾點(diǎn)評(píng)：我們之間就一個(gè)字

->>重慶萬(wàn)科2017新作案名發(fā)布會(huì)

->>GEAK Watch UI

作為營(yíng)銷(xiāo)方式，H5設(shè)計(jì)必須用心感受用戶的體驗(yàn)過(guò)程時(shí)候舒適度，這是能夠營(yíng)銷(xiāo)用戶瀏覽量和轉(zhuǎn)發(fā)欲望的一個(gè)地方。所以H5設(shè)計(jì)是十分重要的，在創(chuàng)作H5營(yíng)銷(xiāo)活動(dòng)的時(shí)候一定要注重細(xì)節(jié)。