本周是實(shí)習(xí)的第一周,很幸運(yùn)碰到了產(chǎn)品部很有耐心的leader詹老師。 實(shí)習(xí)第二天他讓我做一個(gè)h5的游戲類應(yīng)用, 主要用于微信中分享。之前對(duì)于自己的水平是否能完成完全沒(méi)底,但感覺(jué)第一次實(shí)操確實(shí)也有點(diǎn)讓人興奮,之前關(guān)于產(chǎn)品開(kāi)發(fā)的印象只停留在書(shū)本上。
詹老師讓我模仿“過(guò)家家gogaga”所開(kāi)發(fā)的“打電話認(rèn)師姐”微信小游戲?qū)懸粋(gè)類似的應(yīng)用。 我把原始應(yīng)用找出來(lái)便開(kāi)始摳代碼, 第一步是將套在微信接口中的原始應(yīng)用摳出來(lái)(套在微信接口的原始應(yīng)用只能在微信瀏覽器中運(yùn)行,無(wú)法在電腦上測(cè)試),周二開(kāi)始做, 一開(kāi)始我的效率非常低, 因?yàn)槲液芏鄿y(cè)試方法并不熟悉, 在參閱了微信js-sdk后總算把原始代碼摳出來(lái), 厘清該應(yīng)用的基本邏輯后開(kāi)始重寫(xiě), 在詹老師的耐心地指導(dǎo)和對(duì)基礎(chǔ)知識(shí)的講解下,我們將原始代碼中120行的css代碼優(yōu)化到60行,將五百多行的js代碼優(yōu)化到只有60行,這事實(shí)上是在原有的邏輯上完全重寫(xiě)了,這讓我開(kāi)始有點(diǎn)成就感了。
也第一次感受到產(chǎn)品開(kāi)發(fā)中的大局觀,這種大局觀更多的是體現(xiàn)在細(xì)節(jié)上,比如代碼變量名的設(shè)置需要與文件存放聯(lián)合考慮,以便日后修改和維護(hù)。 詹老師在講代碼邏輯的時(shí)候親自寫(xiě)了一個(gè)例子讓我體會(huì), 雖然消化這些用了快一天,但感覺(jué)真的收獲很大, 有拔云見(jiàn)日之感。
實(shí)習(xí)一周后所遇到的種種困難也讓我意識(shí)到自己很多問(wèn)題,歸納如下:
1.盡管之前對(duì)于書(shū)本的學(xué)習(xí)有一定積累,但還是暴露出代碼的不熟練,細(xì)節(jié)方面處理能力差,在細(xì)節(jié)上耗費(fèi)時(shí)間太多。
2.缺乏基本的軟件開(kāi)發(fā)測(cè)試思路, 比如之前不知道chrome具有相當(dāng)強(qiáng)大的錯(cuò)誤測(cè)試功能,它對(duì)于沒(méi)有觸發(fā)的函數(shù)也有錯(cuò)誤提示。
3. 缺乏專注的習(xí)慣,比如詹老師讓我先完成功能方面,但我卻習(xí)慣于去找找界面的素材, 這就導(dǎo)致兩邊都沒(méi)有做好。雖然認(rèn)識(shí)上知道不該這么做,但是習(xí)慣上卻很難改。
4.自己很多時(shí)候雖然有問(wèn)題但是不能完全闡述清楚,所以跟leader溝通的時(shí)候往往支支吾吾,以后有問(wèn)題自己首先得想清楚,將問(wèn)題講明白也是很關(guān)鍵的能力。
另外也記錄一些自己的淺薄感受:
1.工科出身的詹老師對(duì)于代碼的運(yùn)行效率有很多的考慮,但對(duì)于用戶體驗(yàn)和交互效果似乎稍微少點(diǎn),當(dāng)然也可能是我新來(lái)并不了解的原因。
2. 公司在做小應(yīng)用的時(shí)候并不會(huì)在用戶測(cè)試和產(chǎn)品結(jié)構(gòu)功能上討論太多,公司要的是迭代效率, 就是要快速出應(yīng)用,然后再快速上線下一個(gè)。
本周接到新的任務(wù),為中國(guó)教育在線制作h5的招聘頁(yè)面, 之前的“給師姐打電話”的h5應(yīng)用還沒(méi)有優(yōu)化好,能做的改進(jìn)的地方還有很多,leader詹老師讓我先把招聘網(wǎng)站做好, h5應(yīng)用先放放, 他給了我大街網(wǎng)做的“中國(guó)好offer”作為參考, 拿到之后確實(shí)感覺(jué)這些頁(yè)面都做得很好, 詹老師搜集的資源確實(shí)十分豐富,從實(shí)習(xí)到現(xiàn)在他發(fā)給我的參考很實(shí)用,在看完了五六十個(gè)h5的招聘頁(yè)面之后開(kāi)始構(gòu)思, 在將產(chǎn)品架構(gòu)基本做好后,測(cè)試又發(fā)現(xiàn)很多問(wèn)題, 有技術(shù)層面的,但更多的設(shè)計(jì)本身的問(wèn)題。技術(shù)的細(xì)節(jié)的問(wèn)題:基于jquery mobile的開(kāi)發(fā)框架國(guó)內(nèi)的資料十分有限,不得不查閱原始的英文api,很多問(wèn)題也只能去jqm的論壇查找,這些都十分考驗(yàn)英文閱讀能力。css的布局問(wèn)題繁雜,在各個(gè)瀏覽器,各個(gè)應(yīng)用的渲染都不一樣, 也是很折磨人的過(guò)程,我現(xiàn)在就碰到了css中font-weight屬性在safari沒(méi)有渲染的問(wèn)題,至今沒(méi)有解決。
逐漸體會(huì)到前端工作的繁瑣與細(xì)節(jié), 需要學(xué)的東西很多, 有時(shí)候可以憑自己一些小聰明在當(dāng)前解決,但并沒(méi)有摸到問(wèn)題的根源,揚(yáng)湯止沸不是長(zhǎng)久之計(jì),但又好像沒(méi)有足夠的時(shí)間來(lái)系統(tǒng)的摸索,我只能先將這些問(wèn)題一一記下來(lái)。這些技術(shù)的體會(huì)是一方面,另一方面便是產(chǎn)品的設(shè)計(jì)層面, 現(xiàn)在就是因?yàn)楫a(chǎn)品快做好后發(fā)現(xiàn)有很多地方犯了低級(jí)錯(cuò)誤, 以往的紙上談兵頭頭是道,等到自己親身實(shí)踐卻感到把握不住很多設(shè)計(jì)原則, 比如界面設(shè)計(jì)給用戶造成的不必要的干擾, 功能可見(jiàn)性的不足,邏輯上的不嚴(yán)謹(jǐn), 以下我歸納了下崗做好的h5界面存在的交互問(wèn)題:
1.頁(yè)面的設(shè)計(jì)初衷是左右滑動(dòng)來(lái)切換頁(yè)面,但給幾個(gè)朋友測(cè)試后都不能進(jìn)入頁(yè)面后就自然而然的知道是左右滑動(dòng)。
2.join us的圖標(biāo)給用戶是按鈕的錯(cuò)覺(jué),在測(cè)試中很多用戶以為是按鈕,都會(huì)下意識(shí)的點(diǎn)擊。
3.交互效果的乏善可陳,與滑動(dòng)的邏輯似乎也沒(méi)有太大關(guān)聯(lián),只是單純的加入了一些css3的動(dòng)畫(huà)。
4.用于提示左右滑動(dòng)的動(dòng)態(tài)箭頭會(huì)讓用戶以為是點(diǎn)擊作用
改進(jìn):
1.放棄join us 圖標(biāo)
2.改為上下滑動(dòng),箭頭提示更改
3.重新設(shè)計(jì)圖標(biāo)擺放結(jié)構(gòu)
總結(jié): 這次的h5頁(yè)面主要在于設(shè)計(jì)問(wèn)題, 事先并沒(méi)有完全構(gòu)思好原型就急切投入到代碼的編寫(xiě)中,這種開(kāi)發(fā)方式本身是十分幼稚的!
來(lái)源:網(wǎng)絡(luò)整理 免責(zé)聲明:本文僅限學(xué)習(xí)分享,如產(chǎn)生版權(quán)問(wèn)題,請(qǐng)聯(lián)系我們及時(shí)刪除。