移動Web研發(fā)流程
接觸Mobile WEB前端開發(fā)將近一年時間了，在這不算短的時間里，通過吸取圓心、沉魚等前輩們的經(jīng)驗(yàn)以及不斷的摸索和實(shí)戰(zhàn)，總結(jié)出一套自己的Mobile WEB“研發(fā)流程”。為什么叫“研發(fā)”流程而不是“開發(fā)”流程，在下文中會進(jìn)行解釋。首先我們來看一下“研發(fā)”的流程圖：
1. 為什么要叫“研發(fā)”流程?
我們知道，對于傳統(tǒng)的WEB前端開發(fā)，一般情況下我們需要關(guān)注的操作系統(tǒng)/瀏覽器情況如下：
操作系統(tǒng)：Windows/MacOS
瀏覽器：IE(6、7、8)/Firefox/Safari/Opera/Chrome
這些操作系統(tǒng)和瀏覽器的基本狀況如下：
◆ 市場占有率和使用分布情況相對穩(wěn)定
◆ 比較開放，廠商對開發(fā)人員的支持較好
◆ 不同操作系統(tǒng)下，瀏覽器渲染情況差別不大
經(jīng)過前端開發(fā)者們的長期研究和總結(jié)，它們的渲染特性、標(biāo)準(zhǔn)支持情況基本家喻戶曉
而在Mobile WEB前端開發(fā)領(lǐng)域，狀況則相當(dāng)?shù)幕靵y，我們需要關(guān)注的東西則復(fù)雜多了：
操作系統(tǒng)(平臺)：Symbian(S40/S60/S80/S90)/iPhoneOS/Android/WM(WinCE)/MTK/Linux/BB/PalmOS/Maemo(Meego)…
內(nèi)置瀏覽器：Symbian/Chrome Lite/iPhone Safari/MTK/IE Mobile/BB Browser/Opera(OEM)/…
第三方瀏覽器：Opera Mini/Opera Mobile/Skyfire/NetFront/UCWEB/QQ瀏覽器/Go瀏覽器/…
這些操作系統(tǒng)和瀏覽器的基本狀況則是：
◆ 市場占有率和使用分部情況不穩(wěn)定，新機(jī)型、新瀏覽器會很容易占領(lǐng)市場
◆ 大部分內(nèi)置瀏覽器不夠開放，操作系統(tǒng)和瀏覽器廠商對開發(fā)人員的支持很不到位
◆ 不同的操作系統(tǒng)、不同的瀏覽器下，相同系統(tǒng)下的不同瀏覽器，相同瀏覽器在不同的操作系統(tǒng)下，甚至同一個系統(tǒng)或?yàn)g覽器的不同版本，都可能會導(dǎo)致頁面效果產(chǎn)生很大的差異(很繞口，其實(shí)就是排列組合)
◆ 由于兼容性方面的研究非常稀少(尤其在國內(nèi))，加上操作系統(tǒng)和瀏覽器的封閉和日新月異的變化，我們對它們特性的掌握程度也是基本空白
經(jīng)過比較，我們可以很快發(fā)現(xiàn)，想要讓我們的Mobile WEB在更多的客戶端上表現(xiàn)完美，我們需要大量的時間和精力去了解、去掌握各個操作系統(tǒng)、平臺、移動瀏覽器的特性，只有對它們有了一定程度的了解和掌握，我們才能更深一層的駕馭Mobile WEB兼容性開發(fā)。
因此，“研發(fā)”包含了“操作系統(tǒng)、瀏覽器研究”和“Mobile WEB開發(fā)”兩個部分。
2. 循序漸進(jìn)的周期性研究
如前所述，我們想要對移動設(shè)備的操作系統(tǒng)和瀏覽器們進(jìn)行研究，需要花費(fèi)大量的時間和精力。羅馬不是一天建成的，胖子也不是一口吃出來的。我們需要一個循序漸進(jìn)的過程，一個長期性的研究，經(jīng)過不斷地積累點(diǎn)滴經(jīng)驗(yàn)，才能夠逐步了解這些特性。另外，移動設(shè)備更新頻繁，新機(jī)型和新瀏覽器日新月異，我們也需要階段性地跟進(jìn)最新發(fā)展情況。因此，這就是需要周期性研究的原因：
需要大量的時間和精力
移動設(shè)備更新頻繁
在Mobile WEB前端開發(fā)只有一個的情況下，建議每隔半年進(jìn)行一次系統(tǒng)的研究，為兼容性開發(fā)打下基礎(chǔ)。在此后的半年內(nèi)，Mobile WEB頁面的前端開發(fā)都將基于此次研究結(jié)果，一般不需要再對頁面進(jìn)行兼容性測試。對于兼容性測試，之前很多文章中提到過，下面也會再次提到。
3. 關(guān)于兼容性測試
兼容性測試，是WEB開發(fā)和Mobile WEB開發(fā)都必不可少的步驟。但是在流程上，后者跟前者卻有著很大的區(qū)別。
WEB前端開發(fā)是在頁面開發(fā)后做瀏覽器兼容性測試
而Mobile WEB前端開發(fā)卻是在頁面開發(fā)之前做瀏覽器兼容性測試
移動瀏覽器不像桌面瀏覽器那么輕松地查看做好的頁面效果，試想，如果跟WEB前端開發(fā)流程一樣的話，每做完一張Mobile WEB頁面，就要搞一大堆測試機(jī)進(jìn)行測試查看對比效果，發(fā)現(xiàn)問題修改然后再測試，這會是件很荒唐的事情!
因此，我們就需要用兼容性測試的結(jié)果來主導(dǎo)前端開發(fā)：
◆ 測試XHTML的每一個常用元素
◆ 測試CSS的每一個常用屬性
◆ 測試JavaScript的基本特性支持
◆ 測試其它與移動設(shè)備相關(guān)的點(diǎn)
在測試結(jié)果整理出來后，我們可以通過它，知道什么元素、什么屬性可以使用，什么避免使用，并在開發(fā)時遵守這些使用約定。
PS:關(guān)于兼容性測試，你也可以參考沉魚的這篇文章。
4. 研發(fā)流程
(提示：如果你真的有興趣，建議你對照流程圖來查看這部分內(nèi)容)
Mobile WEB的前端開發(fā)流程，其實(shí)跟傳統(tǒng)前端開發(fā)流程沒有什么區(qū)別，如圖中左側(cè)部分所示：
產(chǎn)品設(shè)計(jì)(PRD) -> 交互/視覺(Prototype/Mockup) -> 前端(Demo) -> 后端
而對于“研發(fā)”流程，則是在常規(guī)前端開發(fā)的基礎(chǔ)上，增加研究的流程，如圖中右側(cè)部分，分為5個步驟：
資料收集 -> 兼容性研究 -> 常規(guī)前端開發(fā)流程 -> DEMO測試 -> 總結(jié)整理
需要注意的是，一般情況下“研發(fā)流程”和常規(guī)流程是并發(fā)同時進(jìn)行的。也就是說，當(dāng)我們在開始研發(fā)流程時，我們可以順帶產(chǎn)出手頭的項(xiàng)目需求，這樣在研究的同時不會對需求的開發(fā)周期產(chǎn)生太大影響，并可以通過項(xiàng)目來實(shí)踐我們的研究成果。
下面我們來看一下在各個研發(fā)階段我們的主要任務(wù)和期望成果：
第1階段：資料收集
這里所指的資料，主要是指操作系統(tǒng)/瀏覽器的訪問統(tǒng)計(jì)數(shù)據(jù)資料。那為什么要獲取這些數(shù)據(jù)資料?
世界上有不計(jì)其數(shù)的移動設(shè)備，我們不可能去研究所有的設(shè)備，因此資料收集的目的就是讓我們清楚設(shè)備占有率的現(xiàn)狀，讓我們明確應(yīng)該去研究哪些設(shè)備、放棄哪些設(shè)備。就像WEB開發(fā)中，我們?nèi)孕枰鱅E6，但并不需要再去理會IE5。至于資料，主要應(yīng)該包括以下幾個領(lǐng)域：
◆ 網(wǎng)站內(nèi)部的訪問統(tǒng)計(jì)數(shù)據(jù)
◆ 國內(nèi)市場的占有率數(shù)據(jù)
◆ 國際市場的占有率數(shù)據(jù)
其中網(wǎng)站內(nèi)部的訪問統(tǒng)計(jì)數(shù)據(jù)可以通過公司的相關(guān)商業(yè)智能部門獲得;國內(nèi)和國際市場屬于外部數(shù)據(jù)，需要花費(fèi)一些心思去搜索。除了善用搜索引擎以外，還要盯準(zhǔn)一些權(quán)威的統(tǒng)計(jì)站。這是我常用幾個相對靠譜/權(quán)威的統(tǒng)計(jì)站：
◆ CNNIC互聯(lián)網(wǎng)研究
◆ 天極網(wǎng)調(diào)研
◆ 易觀國際
◆ StatCounter
◆ 艾瑞咨詢網(wǎng)
……(PS.如果你有更好的統(tǒng)計(jì)站點(diǎn)，歡迎分享)
當(dāng)我們獲得了我們所需要的資料后，真正具有挑戰(zhàn)性的任務(wù)來了：我們需要把這些原始數(shù)據(jù)資料，通過一些科學(xué)的適當(dāng)?shù)氖侄芜M(jìn)行分析、比較、合并、整理，得出一份品牌、平臺、內(nèi)置瀏覽器、第三方瀏覽器的排行文檔，為未來的其他數(shù)據(jù)分析做參考依據(jù)。然后，再通過這份文檔，進(jìn)一步整理出用于兼容性研究的機(jī)型、瀏覽器基礎(chǔ)計(jì)劃方案。在這個任務(wù)中，我們的身份似乎從前端工程師，轉(zhuǎn)到了數(shù)據(jù)分析師：)
OK，我們來看一下這個任務(wù)完成后的交付成果：
用戶設(shè)備統(tǒng)計(jì)分析和總結(jié) – 也就是綜合排行榜文檔
兼容性研究建議方案 – 是做兼容性研究的基礎(chǔ)性方案
第2階段：兼容性研究
在做這個步驟之前，有幾件事情是需要特別注意的：
公司機(jī)型庫是否有我們文檔中所列出的設(shè)備供我們研究
可能需要其它人力來幫助我們進(jìn)行測試，因此需要做一個周全的測試計(jì)劃
OK，這兩個問題應(yīng)該都好克服。一般來講，排行靠前的主流手機(jī)，就算公司手機(jī)庫中沒有，問其他同事應(yīng)該也比較好借到。第二個問題也更不成問題。所以說，群眾的力量是無窮的，我們要學(xué)會善于調(diào)度可用的人力資源：)那么這個步驟的三個任務(wù)流程如下：
設(shè)計(jì)/更新測試點(diǎn)套裝
安排兼容性測試
記錄/整理測試結(jié)果
測試點(diǎn)套裝，通俗的講就是兼容性測試頁面。關(guān)于它的介紹，在文章開始我們也提到過，就不再贅述。值得一提的是，隨著設(shè)備、瀏覽器的不斷更新，測試點(diǎn)套裝的更新也一定是個周期性的工作。在平時，我們應(yīng)該隨時記錄一些待測的新特性、一些遺漏點(diǎn)，在兼容性研究時將它們更新上去。
設(shè)計(jì)測試點(diǎn)套裝時，我們可以參考前輩們提供的資源：
W3C MWI測試套裝工作組
PPK的移動測試套裝
……(PS.如果你有更好的資源，歡迎分享)
兼容性測試的過程，實(shí)際是個很有意思的過程。我們在測試過程中，除了記錄測試點(diǎn)結(jié)果外，還可以同時了解該手機(jī)平臺/操作系統(tǒng)/瀏覽器的其它特性，感受一些設(shè)置、操作、交互反饋等特點(diǎn)，通過一段時間的接觸，你甚至可以在摸到一款手機(jī)就可以知道它是Symbian什么系列的什么型號!很有趣吧。
測試結(jié)果整理好后，我們可以更進(jìn)一步地分析，整理出一份DangerList文檔，這個文檔是專門提供給交互/視覺設(shè)計(jì)師們的。在這個文檔中，我們要把測試中高風(fēng)險級的點(diǎn)，轉(zhuǎn)換成通俗易懂的文字提供給設(shè)計(jì)師們，告訴他們避免使用哪些設(shè)計(jì)元素，建議如何去做。
例如：“設(shè)計(jì)師、工程師要注意避免disable(不可用控件)的出現(xiàn)。如果要實(shí)現(xiàn)某一個控件不可用，建議使用圖片的方式表示，或干脆隱藏它。”
該階段的交付成果：
測試結(jié)果原始表格
測試結(jié)果分析和總結(jié) – 視覺/交互指導(dǎo)方案
第3階段：常規(guī)前端開發(fā)流程
這個階段沒什么好說的。就是基于上一步的研究基礎(chǔ)，進(jìn)行頁面的前端開發(fā)。關(guān)于Mobile WEB的前端開發(fā)規(guī)范和技術(shù)文檔，可以參考OMA、W3C Mobile WEB 最佳實(shí)踐以及Developer’s Home的基礎(chǔ)教程等等。這個步驟的交付物就是傳說中的DEMO。
如果該項(xiàng)目涉及到前端架構(gòu)級別的更改(例如大改版之類的項(xiàng)目)，那么你需要更新網(wǎng)站的前端架構(gòu)體系，并且記得在最后一個階段進(jìn)行規(guī)范DPL的更新。
第4階段：DEMO測試
在這個階段當(dāng)中，我們做的是對頁面以及研究成果，進(jìn)行最終確認(rèn)。需要注意，這里的測試性質(zhì)和之前的兼容性測試性質(zhì)完全不同。這個步驟只需挑選幾臺最重要的機(jī)型、瀏覽器打開我們的DEMO頁面進(jìn)行目測比對，查看是否達(dá)到預(yù)期效果。如果真的發(fā)現(xiàn)了問題，就要先定位問題所在，并返回上一步進(jìn)行BugFix;如果該問題是由于兼容性測試遺漏的問題，那么可以馬上將這一點(diǎn)記錄在案，并在下一次更新測試套裝。
如果沒發(fā)現(xiàn)問題，則轉(zhuǎn)入最后一個階段。
第5階段：總結(jié)整理
這最后一個階段，往往也是最能體現(xiàn)我們研究價值的一個階段。我們務(wù)必靜下心來，把之前所有階段的研究過程、結(jié)果重新梳理和總結(jié)，分門別類地歸類，一般可能會有如下幾方面：
規(guī)范(DPL)更新(如果涉及到規(guī)范變更的話)
交互、視覺規(guī)范
前端規(guī)范
知識沉淀和總結(jié) – 可以嘗試建立一個知識庫或WIKI
分享
當(dāng)然，這些只是個人的一些建議。其實(shí)還有很多有意義的沉淀方式等待著我們?nèi)L試。
5.其它
如果你堅(jiān)持看到這里，佩服你的意志力。
通過以上所有這些流程的描述，我們或許還可以發(fā)現(xiàn)以下幾個需要注意的地方：
資料搜集的流程，看似簡單，但實(shí)際上卻是最繁瑣也是最重要的一個步驟。它是整個研發(fā)流程的最原始基礎(chǔ)。如果這個步驟沒做好或者做偏了，那么就會影響到整個研發(fā)結(jié)果的質(zhì)量和價值。
兼容性研究，它是最主要的一個步驟，是整個流程的核心所在。
整個流程所花費(fèi)的時間?按照我之前的經(jīng)驗(yàn)，保守估計(jì)也至少要1個月以上的時間。
整個流程是基于只有一名Mobile WEB前端工程師的情況來做的。如果有多名工程師，那么研究流程并不需要周期的設(shè)定，也有很多棘手的細(xì)節(jié)問題都可以得到解決。
最后一點(diǎn)題外話，關(guān)于Mobile WEB的前端人力資源，我覺得最佳的組合是兩個人。其中一個人主導(dǎo)兼容性研究方向，另一個人主導(dǎo)日常和項(xiàng)目開發(fā)方向。兩個人也可以周期性地互換崗位。這樣可以做到研究和開發(fā)齊頭并進(jìn)，可以很好的達(dá)到最佳狀態(tài)并發(fā)揮出最大價值。當(dāng)然，這也要首先看公司層面是否有如此高的兼容性需求，并是否愿意投入這個成本。
原文：http://dotoking.com/khfw/2010-06/162.html
【編輯推薦】
