一個(gè)Geek范的H5頁(yè)面制作工具

時(shí)間：2022-08-10 16:00:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2022-08-10 16:00:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)

（如果看過(guò)我其他回答的朋友應(yīng)該知道我其實(shí)是很討厭在廣義上使用H5這個(gè)詞的，但是在限定的語(yǔ)境下，作為一個(gè)明確的指代名詞，本文中提到的“H5”均指代“基于移動(dòng)端傳播的可交互（不限于播放影音，頁(yè)面滑動(dòng)，擦除，頁(yè)內(nèi)動(dòng)畫(huà)，表單收集等方式）的輕量網(wǎng)站”）

【申請(qǐng)?jiān)囉玫姆绞揭呀?jīng)在文末更新了】

2016年4月12日 更新

百度H5已經(jīng)開(kāi)放使用，直接登陸百度H5網(wǎng)站打開(kāi)就可以用啦~

前言

大概是兩周前百度的朋友說(shuō)他們發(fā)布了一個(gè)H5開(kāi)發(fā)工具。

我說(shuō)，現(xiàn)在這種平臺(tái)太多了，遍地開(kāi)花，頗有當(dāng)年百團(tuán)大戰(zhàn)的感覺(jué)，你們?cè)趺匆瞾?lái)插了一腳。

ta說(shuō)，我們這個(gè)跟別人的不一樣，你用一用就知道了。

老王賣(mài)瓜這種事情我是見(jiàn)怪不怪， 但是有一說(shuō)一，在過(guò)去一段時(shí)間里面，百度出品的H5頁(yè)面確實(shí)都是業(yè)界比較先進(jìn)的，尤其是在對(duì)技術(shù)的運(yùn)用上，非常的得當(dāng)。追蹤了一些案例源碼，也能感覺(jué)到，遲早會(huì)有一個(gè)平臺(tái)化的開(kāi)發(fā)工具誕生。

工具的誕生的目的不外乎兩點(diǎn)：節(jié)約勞動(dòng)時(shí)間和輔助完成無(wú)法徒手完成的任務(wù)。而節(jié)約時(shí)間又可以從提升勞動(dòng)效率和減少溝通成本入手，對(duì)于IT業(yè)來(lái)說(shuō)，這也是提升工程效率的最重要兩個(gè)方式。所以我們不妨從這兩方面去看一下這款H5工具，是不是一款優(yōu)秀的工具。

新建

打開(kāi)一個(gè)新的頁(yè)面，左側(cè)是頁(yè)面列表，中間是主舞臺(tái)，右側(cè)是元素編輯，下方是圖層和時(shí)間軸。相比于入門(mén)級(jí)的H5平臺(tái)，多了時(shí)間軸，可以對(duì)動(dòng)畫(huà)做更加精細(xì)的調(diào)整。

百度H5有一個(gè)亮點(diǎn)是支持導(dǎo)入psd文件

找了一個(gè)以前的項(xiàng)目設(shè)計(jì)稿，卻發(fā)現(xiàn)超過(guò)了10M的限制，在把智能對(duì)象都柵格化之后，體積終于達(dá)標(biāo)了。

這是上傳之前的樣子


上傳導(dǎo)入之后是這樣子

17個(gè)圖層全部都一鍵導(dǎo)入了進(jìn)來(lái)，每一個(gè)圖層都是在設(shè)計(jì)稿對(duì)應(yīng)的位置，而且圖層的上下順序也是和設(shè)計(jì)稿對(duì)應(yīng)的。這個(gè)功能真的非常方便，可以省去切圖，定位，剩下的事情就是托拖拽拽去處理動(dòng)畫(huà)和交互。但略微失望的是，圖層并沒(méi)有按照PSD圖層命名。

動(dòng)畫(huà)

動(dòng)畫(huà)的設(shè)計(jì)很像PPT，分為出場(chǎng)動(dòng)畫(huà)，離場(chǎng)動(dòng)畫(huà)和強(qiáng)調(diào)動(dòng)畫(huà)。選擇動(dòng)畫(huà)后，在下方時(shí)間軸里可以看到動(dòng)畫(huà)的開(kāi)始時(shí)間和持續(xù)時(shí)間，并且可以在時(shí)間軸上自由拖動(dòng)，同時(shí)在動(dòng)畫(huà)菜單欄也可以直接輸入動(dòng)畫(huà)時(shí)間，無(wú)論是數(shù)值控的程序員還是直覺(jué)派的設(shè)計(jì)師都可以找到適合自己的開(kāi)發(fā)方式。

一個(gè)元件可以設(shè)置多個(gè)動(dòng)畫(huà)，比如進(jìn)場(chǎng)之后過(guò)一段時(shí)間再離場(chǎng)，每個(gè)動(dòng)畫(huà)的開(kāi)始和持續(xù)時(shí)間都可以單獨(dú)設(shè)定，同樣可以設(shè)定為循環(huán)指定次數(shù)或者無(wú)限循環(huán)


當(dāng)然這個(gè)時(shí)間軸的部分還有很多可以改進(jìn)的地方，比如時(shí)間標(biāo)尺固定在欄目頂部，否則修改下面圖片的時(shí)候看不到時(shí)間，另外可以增加時(shí)間輔助線(xiàn)，便于做串行動(dòng)畫(huà)的時(shí)候參考和其他動(dòng)畫(huà)的時(shí)間關(guān)系。

布局

在組件順序欄中可以對(duì)圖片重命名，還可以添加分組。

當(dāng)新增分組之后，除了原有組件動(dòng)畫(huà)以外，分組本身可以設(shè)置動(dòng)畫(huà)，為設(shè)計(jì)師做復(fù)雜動(dòng)畫(huà)設(shè)計(jì)提供了很大的方便。

翻頁(yè)

當(dāng)在左側(cè)工具欄選擇某頁(yè)的時(shí)候，右側(cè)工具欄可以修改翻頁(yè)設(shè)置。翻頁(yè)特效和翻頁(yè)方向都可以設(shè)置。

以及大家可能比較關(guān)心的自定義分享文案和圖標(biāo)

加載

加載頁(yè)作為一個(gè)獨(dú)立的頁(yè)，編輯頁(yè)面的入口也放在了重要的位置。

系統(tǒng)默認(rèn)置入了一個(gè)加載頁(yè)，可以看到，使用了一個(gè)無(wú)限循環(huán)的loding圖片，這也是官方展示了一下動(dòng)畫(huà)的使用，確實(shí)是非常的方便。

另外一個(gè)小細(xì)節(jié)是，拖動(dòng)修改圖片大小的時(shí)候，如果按住shift再拖動(dòng)，圖片會(huì)保持原本的寬高比，用慣了PS，拖動(dòng)的時(shí)候隨手用了一下，沒(méi)想到居然這個(gè)快捷鍵也被支持了，能感覺(jué)到開(kāi)發(fā)團(tuán)隊(duì)在細(xì)節(jié)上下了很多功夫。

音樂(lè)

好像在很多人心目中，沒(méi)有背景音樂(lè)的話(huà)就不能被稱(chēng)為是H5，雖然我一般打開(kāi)頁(yè)面的時(shí)候都會(huì)早早把手指等在右上角，看到音符圖標(biāo)出現(xiàn)的一瞬間趕緊按下去。

我們注意到在時(shí)間軸上方除了當(dāng)前頁(yè)和加載頁(yè)以外，還有另外兩個(gè)頁(yè)面設(shè)置。全局前景看起來(lái)很適合用來(lái)控制音樂(lè)播放。

當(dāng)我們上傳一段音樂(lè)之后，可以設(shè)置播放，暫停的按鈕圖片，以及設(shè)定是否自動(dòng)播放以及是否循環(huán)播放。平臺(tái)默認(rèn)的設(shè)置是自動(dòng)播放和自動(dòng)循環(huán)，算了，你們開(kāi)心就好，反正我單身二十年的手速不等音樂(lè)響起就可以關(guān)掉它。

表單

H5頁(yè)面另一個(gè)重要作用是收集報(bào)名信息，在百度H5中也提供了表單插件，可以一鍵插入表單，并且設(shè)置是否必填以及提示文字。

但是找了半天也沒(méi)發(fā)現(xiàn)表單數(shù)據(jù)在哪里可以獲取到，這時(shí)候在程序員血液中潛伏的那一點(diǎn)點(diǎn)PM的基因告訴我，在頁(yè)面找小問(wèn)號(hào)，可以解決問(wèn)題，

果然在預(yù)覽按鈕旁邊找到了小問(wèn)號(hào)，原來(lái)幫助文檔寫(xiě)的很詳細(xì)，之前遇到的問(wèn)題在文檔里都寫(xiě)明了使用方法。

統(tǒng)計(jì)

頁(yè)面發(fā)布后，在案例頁(yè)面右側(cè)會(huì)多出來(lái)一個(gè)統(tǒng)計(jì)按鈕

點(diǎn)擊進(jìn)去可以查看頁(yè)面PV/UV，渠道來(lái)源以及表單提交的數(shù)據(jù)。表單數(shù)據(jù)可以一鍵導(dǎo)出EXCEL文件。

其他

在頁(yè)面導(dǎo)航欄的小問(wèn)號(hào)旁邊還有一個(gè)HTML5的小盾牌，出于好奇點(diǎn)擊打開(kāi)了一下，然后就是很哇塞的感覺(jué)，至于是什么感覺(jué)，你們可以自己點(diǎn)開(kāi)試試看。

總結(jié)

標(biāo)題之所以說(shuō)這個(gè)平臺(tái)有Geek范，是因?yàn)榘俣菻5工具是工程師從內(nèi)部工具總結(jié)發(fā)展產(chǎn)出的一款產(chǎn)品。

相信加載頁(yè)的安排和音樂(lè)播放的解決方案，都是來(lái)自平時(shí)開(kāi)發(fā)中做過(guò)非常多的頁(yè)面所積累的經(jīng)驗(yàn)。工程師用這些經(jīng)驗(yàn)去改造和創(chuàng)造，這也符合我心目中理想的工程師：因?yàn)闊o(wú)法忍受重復(fù)和瑣碎的工作，而發(fā)明各種各樣的工具，再用這樣的工具去創(chuàng)造更漂亮的產(chǎn)品。

工程師其實(shí)很難直接展現(xiàn)出自己的價(jià)值，他們用著只有自己能懂得語(yǔ)言，做著外人看不清進(jìn)度快慢的事情。在這個(gè)前端的大時(shí)代里，表面上我們能看到各種移動(dòng)頁(yè)面的游戲，還有每天朋友圈里不停刷的營(yíng)銷(xiāo)頁(yè)面，而在這些表面之下，是游戲引擎，開(kāi)發(fā)平臺(tái)在支持，這是前端生態(tài)的”里子“，是持續(xù)推動(dòng)生態(tài)的動(dòng)力。

有空的話(huà)會(huì)把市面上的H5制作平臺(tái)都寫(xiě)一遍，然后從程序員的角度做一個(gè)橫評(píng)。周末時(shí)間倉(cāng)促，寫(xiě)的比較簡(jiǎn)單，給位看官當(dāng)看個(gè)熱鬧好了。

這個(gè)是demo的傳送門(mén)