武林網(www.49028c.com)文章簡介：HTML5開發實戰之網易微博.

HTML5在國內外越來越受到互聯網開發團隊的青睞。國外，谷歌興致勃勃地開發Chrome Web Store，微軟發布了支持使用HTML5技術開發的“Irish Spring”主題網站，諾基亞斥巨資購得并打造的NOKIA MAP業務。國內的互聯網巨頭對這股大洋彼岸吹來的新web開發標準也同樣感興趣，開始著手HTML5產品的試水。

網易微博iPhone平臺Web App產品在2012年第一季度已經成功上線?，F將此項目開發的經驗教訓分享給大家，希望與大家在HTML5開發環境中共同成長。

人員配置

一、開發人員配置

產品經理：1名；

交互設計師：1名；

視覺設計師：1名；

前端工程師：1名；

后臺工程師：2名；

測試人員：1名。

二、開發時間

交互設計師：22個工作日；

視覺設計師：14個工作日；

前端工程師：50個工作日；

后臺工程師：因使用原有后臺數據，只需配合前端工程師調用數據

其中，整個開發周期中交互和前端用時最長。

網易微博Web App開發過程

一、功能需求策劃：有別于Web端及本地客戶端

負責人：產品經理； 參與人：交互設計師

網易微博Web App（本文內均指手機端）有別于Web端產品，與本地客戶端也有所差異。

1. 網易微博Web App相較于Web端，具有較強的移動性、富媒體化等優勢，同時具有信息呈現空間狹小、信息架構深等劣勢。二者的使用情境有所不同，微博Web端多在充裕的時間、優越的網絡條件下進行沉浸式的使用；微博Web App多是在瑣碎的時間、良莠不齊的網絡條件下打發時間。

因此，網易微博Web App應避免功能大而全，需要從Web端提煉選擇出移動環境下用戶最常使用的功能，并增加手機端特有的需求功能（如迭代階段會考慮加入本地化服務功能）。

2. 網易微博Web App相較于本地客戶端，具有免安裝、升級簡單、開發成本低、可自適應布局等優勢，同時具有反應速度稍慢、調取手機原生控件的權限低、穩定性稍弱等劣勢。

基于二者的優劣勢分析，網易微博Web App需要追趕本地客戶端的優質體驗、盡量保證輕量化而又快速。

一句話總結，Web App的功能可以比Web端和本地客戶端的更精煉，滿足移動環境下用戶最為核心的需求。

網易微博Web App功能策劃，如下圖：

二、信息架構設計：盡可能的淺而窄

負責人：交互設計師； 參與人：產品經理

做過移動互聯網產品的人肯定知道為什么信息架構需要盡可能的淺而窄，最大的原因還是手機狹小金貴的顯示空間。手機本地客戶端的信息架構需要淺而窄，Web App更需要如此，因為在瀏覽器的頁面中始終存在著瀏覽器的底部工具欄，使原本就局促的顯示空間又被蠶食掉一小塊。如下圖：

手機屏幕底部的瀏覽器工具欄，對Web App產品很雞肋：Web App本身就是一個閉環的應用程序，不需要借助瀏覽器工具欄。即使不會影響大的信息架構，也蠶食了寶貴的顯示空間，對導航系統的設計也有重要影響（這部分在之前的文章《iPhone Web App 導航設計探討》做過簡要分析）。