本周是實(shí)習(xí)的第一周，很幸運(yùn)碰到了產(chǎn)品部很有耐心的leaderX老師。 實(shí)習(xí)第二天他讓我做一個(gè)H5的游戲類應(yīng)用， 主要用于微信中分享。之前對(duì)于自己的水平是否能完成完全沒底，但感覺第一次實(shí)操確實(shí)也有點(diǎn)讓人興奮，之前關(guān)于產(chǎn)品開發(fā)的印象只停留在書本上。

　　X老師讓我模仿“過家家gogaga”所開發(fā)的“打電話認(rèn)師姐”微信小游戲?qū)懸粋�(gè)類似的應(yīng)用。 我把原始應(yīng)用找出來便開始摳代碼， 第一步是將套在微信接口中的原始應(yīng)用摳出來(套在微信接口的原始應(yīng)用只能在微信瀏覽器中運(yùn)行，無法在電腦上測(cè)試)，周二開始做， 一開始我的效率非常低， 因?yàn)槲液芏鄿y(cè)試方法并不熟悉， 在參閱了微信JS-SDK后總算把原始代碼摳出來， 厘清該應(yīng)用的基本邏輯后開始重寫， 在x老師的耐心地指導(dǎo)和對(duì)基礎(chǔ)知識(shí)的講解下，我們將原始代碼中120行的CSS代碼優(yōu)化到60行，將五百多行的JS代碼優(yōu)化到只有60行，這事實(shí)上是在原有的邏輯上完全重寫了，這讓我開始有點(diǎn)成就感了。

　　也第一次感受到產(chǎn)品開發(fā)中的大局觀，這種大局觀更多的是體現(xiàn)在細(xì)節(jié)上，比如代碼變量名的設(shè)置需要與文件存放聯(lián)合考慮，以便日后修改和維護(hù)。 x老師在講代碼邏輯的時(shí)候親自寫了一個(gè)例子讓我體會(huì)， 雖然消化這些用了快一天，但感覺真的收獲很大， 有拔云見日之感。

　　實(shí)習(xí)一周后所遇到的種種困難也讓我意識(shí)到自己很多問題，歸納如下：

　　1.盡管之前對(duì)于書本的學(xué)習(xí)有一定積累，但還是暴露出代碼的不熟練，細(xì)節(jié)方面處理能力差，在細(xì)節(jié)上耗費(fèi)時(shí)間太多。

　　2.缺乏基本的軟件開發(fā)測(cè)試思路， 比如之前不知道chrome具有相當(dāng)強(qiáng)大的錯(cuò)誤測(cè)試功能，它對(duì)于沒有觸發(fā)的函數(shù)也有錯(cuò)誤提示。

　　3. 缺乏專注的習(xí)慣，比如x老師讓我先完成功能方面，但我卻習(xí)慣于去找找界面的素材， 這就導(dǎo)致兩邊都沒有做好。雖然認(rèn)識(shí)上知道不該這么做，但是習(xí)慣上卻很難改。

　　4.自己很多時(shí)候雖然有問題但是不能完全闡述清楚，所以跟leader溝通的時(shí)候往往支支吾吾，以后有問題自己首先得想清楚，將問題講明白也是很關(guān)鍵的能力。

　　另外也記錄一些自己的淺薄感受：

　　1.工科出身的x老師對(duì)于代碼的運(yùn)行效率有很多的考慮，但對(duì)于用戶體驗(yàn)和交互效果似乎稍微少點(diǎn)，當(dāng)然也可能是我新來并不了解的原因。

　　2. 公司在做小應(yīng)用的時(shí)候并不會(huì)在用戶測(cè)試和產(chǎn)品結(jié)構(gòu)功能上討論太多，公司要的是迭代效率， 就是要快速出應(yīng)用，然后再快速上線下一個(gè)。

　　本周接到新的任務(wù)，為制作H5的招聘頁面， 之前的“給師姐打電話”的H5應(yīng)用還沒有優(yōu)化好，能做的改進(jìn)的地方還有很多，leaderx老師讓我先把招聘網(wǎng)站做好， H5應(yīng)用先放放， 他給了我大街網(wǎng)做的“中國好Offer”作為參考， 拿到之后確實(shí)感覺這些頁面都做得很好， x老師搜集的資源確實(shí)十分豐富，從實(shí)習(xí)到現(xiàn)在他發(fā)給我的參考很實(shí)用，在看完了五六十個(gè)H5的招聘頁面之后開始構(gòu)思， 在將產(chǎn)品架構(gòu)基本做好后，測(cè)試又發(fā)現(xiàn)很多問題， 有技術(shù)層面的，但更多的設(shè)計(jì)本身的問題。技術(shù)的細(xì)節(jié)的問題：基于jquery mobile的開發(fā)框架國內(nèi)的資料十分有限，不得不查閱原始的英文API，很多問題也只能去JQM的論壇查找，這些都十分考驗(yàn)英文閱讀能力。CSS的布局問題繁雜，在各個(gè)瀏覽器，各個(gè)應(yīng)用的渲染都不一樣， 也是很折磨人的過程，我現(xiàn)在就碰到了css中font-weight屬性在Safari沒有渲染的問題，至今沒有解決。

　　逐漸體會(huì)到前端工作的繁瑣與細(xì)節(jié)， 需要學(xué)的東西很多， 有時(shí)候可以憑自己一些小聰明在當(dāng)前解決，但并沒有摸到問題的根源，揚(yáng)湯止沸不是長久之計(jì)，但又好像沒有足夠的時(shí)間來系統(tǒng)的摸索，我只能先將這些問題一一記下來。這些技術(shù)的體會(huì)是一方面，另一方面便是產(chǎn)品的設(shè)計(jì)層面， 現(xiàn)在就是因?yàn)楫a(chǎn)品快做好后發(fā)現(xiàn)有很多地方犯了低級(jí)錯(cuò)誤， 以往的紙上談兵頭頭是道，等到自己親身實(shí)踐卻感到把握不住很多設(shè)計(jì)原則， 比如界面設(shè)計(jì)給用戶造成的不必要的干擾， 功能可見性的不足，邏輯上的不嚴(yán)謹(jǐn)， 以下我歸納了下崗做好的H5界面存在的交互問題：

　　1.頁面的設(shè)計(jì)初衷是左右滑動(dòng)來切換頁面，但給幾個(gè)朋友測(cè)試后都不能進(jìn)入頁面后就自然而然的知道是左右滑動(dòng)。

　　2.join us的圖標(biāo)給用戶是按鈕的錯(cuò)覺，在測(cè)試中很多用戶以為是按鈕，都會(huì)下意識(shí)的點(diǎn)擊。

　　3.交互效果的乏善可陳，與滑動(dòng)的邏輯似乎也沒有太大關(guān)聯(lián)，只是單純的加入了一些css3的動(dòng)畫。

　　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頁面主要在于設(shè)計(jì)問題， 事先并沒有完全構(gòu)思好原型就急切投入到代碼的編寫中，這種開發(fā)方式本身是十分幼稚的!