html5在國內(nèi)外越來越受到互聯(lián)網(wǎng)開發(fā)團(tuán)隊(duì)的青睞。國外，谷歌興致勃勃地開發(fā)chrome web store，微軟發(fā)布了支持使用html5技術(shù)開發(fā)的“irish spring”主題網(wǎng)站，諾基亞斥巨資購得并打造的nokia map業(yè)務(wù)。國內(nèi)的互聯(lián)網(wǎng)巨頭對這股大洋彼岸吹來的新web開發(fā)標(biāo)準(zhǔn)也同樣感興趣，開始著手html5產(chǎn)品的試水。
網(wǎng)易微博iphone平臺web app產(chǎn)品在2012年第一季度已經(jīng)成功上線?，F(xiàn)將此項(xiàng)目開發(fā)的經(jīng)驗(yàn)教訓(xùn)分享給大家，希望與大家在html5開發(fā)環(huán)境中共同成長。
人員配置
一、開發(fā)人員配置
產(chǎn)品經(jīng)理：1名；
交互設(shè)計(jì)師：1名；
視覺設(shè)計(jì)師：1名；
前端工程師：1名；
后臺工程師：2名；
測試人員：1名。
二、開發(fā)時間
交互設(shè)計(jì)師：22個工作日；
視覺設(shè)計(jì)師：14個工作日；
前端工程師：50個工作日；
后臺工程師：因使用原有后臺數(shù)據(jù)，只需配合前端工程師調(diào)用數(shù)據(jù)
其中，整個開發(fā)周期中交互和前端用時最長。
網(wǎng)易微博web app開發(fā)過程
一、功能需求策劃：有別于web端及本地客戶端
負(fù)責(zé)人：產(chǎn)品經(jīng)理； 參與人：交互設(shè)計(jì)師
網(wǎng)易微博web app（本文內(nèi)均指手機(jī)端）有別于web端產(chǎn)品，與本地客戶端也有所差異。
1. 網(wǎng)易微博web app相較于web端，具有較強(qiáng)的移動性、富媒體化等優(yōu)勢，同時具有信息呈現(xiàn)空間狹小、信息架構(gòu)深等劣勢。二者的使用情境有所不同，微博web端多在充裕的時間、優(yōu)越的網(wǎng)絡(luò)條件下進(jìn)行沉浸式的使用；微博web app多是在瑣碎的時間、良莠不齊的網(wǎng)絡(luò)條件下打發(fā)時間。
因此，網(wǎng)易微博web app應(yīng)避免功能大而全，需要從web端提煉選擇出移動環(huán)境下用戶最常使用的功能，并增加手機(jī)端特有的需求功能（如迭代階段會考慮加入本地化服務(wù)功能）。
2. 網(wǎng)易微博web app相較于本地客戶端，具有免安裝、升級簡單、開發(fā)成本低、可自適應(yīng)布局等優(yōu)勢，同時具有反應(yīng)速度稍慢、調(diào)取手機(jī)原生控件的權(quán)限低、穩(wěn)定性稍弱等劣勢。
基于二者的優(yōu)劣勢分析，網(wǎng)易微博web app需要追趕本地客戶端的優(yōu)質(zhì)體驗(yàn)、盡量保證輕量化而又快速。
一句話總結(jié)，web app的功能可以比web端和本地客戶端的更精煉，滿足移動環(huán)境下用戶最為核心的需求。
網(wǎng)易微博web app功能策劃，如下圖：
二、信息架構(gòu)設(shè)計(jì)：盡可能的淺而窄
負(fù)責(zé)人：交互設(shè)計(jì)師； 參與人：產(chǎn)品經(jīng)理
做過移動互聯(lián)網(wǎng)產(chǎn)品的人肯定知道為什么信息架構(gòu)需要盡可能的淺而窄，最大的原因還是手機(jī)狹小金貴的顯示空間。手機(jī)本地客戶端的信息架構(gòu)需要淺而窄，web app更需要如此，因?yàn)樵跒g覽器的頁面中始終存在著瀏覽器的底部工具欄，使原本就局促的顯示空間又被蠶食掉一小塊。如下圖：
手機(jī)屏幕底部的瀏覽器工具欄，對web app產(chǎn)品很雞肋：web app本身就是一個閉環(huán)的應(yīng)用程序，不需要借助瀏覽器工具欄。即使不會影響大的信息架構(gòu)，也蠶食了寶貴的顯示空間，對導(dǎo)航系統(tǒng)的設(shè)計(jì)也有重要影響（這部分在之前的文章《iphone web app 導(dǎo)航設(shè)計(jì)探討》做過簡要分析）。