HTML5在國內外越來越受到互聯網開發團隊的青睞。國外，谷歌興致勃勃地開發Chrome Web Store，微軟發布了支持使用HTML5技術開發的“Irish Spring”主題網站，諾基亞斥巨資購得并打造的NOKIA MAP業務。國內的互聯網巨頭對這股大洋彼岸吹來的新web開發標準也同樣感興趣，開始著手HTML5產品的試水。
網易微博iPhone平臺Web App產品在2012年第一季度已經成功上線。現將此項目開發的經驗教訓分享給大家，希望與大家在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 導航設計探討》做過簡要分析)。
三、交互設計：簡潔、高效
負責人：交互設計師;參與人：產品經理、視覺設計師、前端工程師、后臺技術人員
交互設計理念：
該產品具體的交互設計理念來源于：用戶使用場景的調查、競品分析、Web App研發現狀、微博Web App的自身要求。最終歸納得出的交互設計理念主要有：
1.增強易尋性：
全局導航的加強、快速回到首頁、常用操作常駐、適時的動畫演示、簡約明了的網頁布局等。
2.提高使用效率
降低信息架構層級、適當給出快捷鍵入口、保證安全觸控區域、考慮用戶瀏覽習慣、優先保證核心功能、消除不必要的視覺噪音等。
3.更加智能體貼
支持離線使用、編輯中的信息意外打斷后自動填入、警示框的謹慎使用、搜索建議實施提供幫助、針對當前任務需求安排工具欄、積極有效的反饋等。
4.提高任務專注度
單一任務操作路徑、tab導航適時隱藏、消除干擾因素、不可用button灰度化顯示、任務進行頁面最大化、未進行功能最小化等。
5.平臺一致性：
即看即點、iOS平臺的列表視圖、前進及返回操作時的推屏動畫、iOS平臺特色的模態視圖、警示框、調取原生控件、簡單明了的跳轉邏輯等。
此階段的交互設計理念已經不單單是理念，更多的是對該Web App產品的具體設計指導。承載著美好設計理念的設計實現方式，是設計研究階段的重要落地。
設計內容與細節繁多，這里只撿一處細節與大家分享一下：
增強易尋性——全局導航的加強
與原有的wap微博相比，全局導航條的固定存在是一個很大的變化之處。下面我們簡單分析一下這么做的原因：
–用戶的使用環境是什么樣的?——室外的移動情境(如地鐵上、排隊中)，或者室內閑散狀態(如床上睡前刷微博);
–用戶來到這個頁面的目的是什么?——瀏覽微博;
–用戶在這個頁面中的常用操作有哪些?——下拉閱讀、置頂并載入新信息、點擊其他tab執行跳轉;
推薦閱讀
偶爾會聽到產品經理和交互設計抱怨，視覺設計稿和最初規劃差別太大，我自己也遇到過類似狀況。究其原因，大多還是溝通中出現了問題。 有效溝通，信息的對等是很重要的。這個對等，既包括讓視覺設計盡早了解產品需求，>>>詳細閱讀
本文標題：<b>HTML5帶來wap網頁顛覆性變革 開發實戰之網易微博</b>
地址：http://www.xglongwei.com/a/22/20120613/67463.html
網友點評
精彩導讀
科技快報
品牌展示