HTML5在國內(nèi)外越來越受到互聯(lián)網(wǎng)開發(fā)團(tuán)隊的青睞。國外，谷歌興致勃勃地開發(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)成功上線。現(xiàn)將此項(xiàng)目開發(fā)的經(jīng)驗(yàn)教訓(xùn)分享給大家，希望與大家在HTML5開發(fā)環(huán)境中共同成長。
人員配置
一、開發(fā)人員配置
產(chǎn)品經(jīng)理：1名;
交互設(shè)計師：1名;
視覺設(shè)計師：1名;
前端工程師：1名;
后臺工程師：2名;
測試人員：1名。
二、開發(fā)時間
交互設(shè)計師：22個工作日;
視覺設(shè)計師：14個工作日;
前端工程師：50個工作日;
后臺工程師：因使用原有后臺數(shù)據(jù)，只需配合前端工程師調(diào)用數(shù)據(jù)
其中，整個開發(fā)周期中交互和前端用時最長。
網(wǎng)易微博Web App開發(fā)過程
一、功能需求策劃：有別于Web端及本地客戶端
負(fù)責(zé)人：產(chǎn)品經(jīng)理; 參與人：交互設(shè)計師
網(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è)計：盡可能的淺而窄
負(fù)責(zé)人：交互設(shè)計師; 參與人：產(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è)計也有重要影響(這部分在之前的文章《iPhone Web App 導(dǎo)航設(shè)計探討》做過簡要分析)。
三、交互設(shè)計：簡潔、高效
負(fù)責(zé)人：交互設(shè)計師;參與人：產(chǎn)品經(jīng)理、視覺設(shè)計師、前端工程師、后臺技術(shù)人員
交互設(shè)計理念：
該產(chǎn)品具體的交互設(shè)計理念來源于：用戶使用場景的調(diào)查、競品分析、Web App研發(fā)現(xiàn)狀、微博Web App的自身要求。最終歸納得出的交互設(shè)計理念主要有：
1.增強(qiáng)易尋性：
全局導(dǎo)航的加強(qiáng)、快速回到首頁、常用操作常駐、適時的動畫演示、簡約明了的網(wǎng)頁布局等。
2.提高使用效率
降低信息架構(gòu)層級、適當(dāng)給出快捷鍵入口、保證安全觸控區(qū)域、考慮用戶瀏覽習(xí)慣、優(yōu)先保證核心功能、消除不必要的視覺噪音等。
3.更加智能體貼
支持離線使用、編輯中的信息意外打斷后自動填入、警示框的謹(jǐn)慎使用、搜索建議實(shí)施提供幫助、針對當(dāng)前任務(wù)需求安排工具欄、積極有效的反饋等。
4.提高任務(wù)專注度
單一任務(wù)操作路徑、tab導(dǎo)航適時隱藏、消除干擾因素、不可用button灰度化顯示、任務(wù)進(jìn)行頁面最大化、未進(jìn)行功能最小化等。
5.平臺一致性：
即看即點(diǎn)、iOS平臺的列表視圖、前進(jìn)及返回操作時的推屏動畫、iOS平臺特色的模態(tài)視圖、警示框、調(diào)取原生控件、簡單明了的跳轉(zhuǎn)邏輯等。
此階段的交互設(shè)計理念已經(jīng)不單單是理念，更多的是對該Web App產(chǎn)品的具體設(shè)計指導(dǎo)。承載著美好設(shè)計理念的設(shè)計實(shí)現(xiàn)方式，是設(shè)計研究階段的重要落地。
設(shè)計內(nèi)容與細(xì)節(jié)繁多，這里只撿一處細(xì)節(jié)與大家分享一下：
增強(qiáng)易尋性——全局導(dǎo)航的加強(qiáng)
與原有的wap微博相比，全局導(dǎo)航條的固定存在是一個很大的變化之處。下面我們簡單分析一下這么做的原因：
–用戶的使用環(huán)境是什么樣的?——室外的移動情境(如地鐵上、排隊中)，或者室內(nèi)閑散狀態(tài)(如床上睡前刷微博);
–用戶來到這個頁面的目的是什么?——瀏覽微博;
–用戶在這個頁面中的常用操作有哪些?——下拉閱讀、置頂并載入新信息、點(diǎn)擊其他tab執(zhí)行跳轉(zhuǎn);
推薦閱讀
網(wǎng)站用戶體驗(yàn)：做交互應(yīng)該知道的視覺幾件事
偶爾會聽到產(chǎn)品經(jīng)理和交互設(shè)計抱怨，視覺設(shè)計稿和最初規(guī)劃差別太大，我自己也遇到過類似狀況。究其原因，大多還是溝通中出現(xiàn)了問題。 有效溝通，信息的對等是很重要的。這個對等，既包括讓視覺設(shè)計盡早了解產(chǎn)品需求，>>>詳細(xì)閱讀
本文標(biāo)題：<b>HTML5帶來wap網(wǎng)頁顛覆性變革 開發(fā)實(shí)戰(zhàn)之網(wǎng)易微博</b>
地址：http://www.geekbao.cn/a/22/20120613/67463.html
網(wǎng)友點(diǎn)評
精彩導(dǎo)讀
科技快報
品牌展示