主頁(yè) > 知識(shí)庫(kù) > 網(wǎng)易微博Web App用HTML5開(kāi)發(fā)的過(guò)程介紹

網(wǎng)易微博Web App用HTML5開(kāi)發(fā)的過(guò)程介紹

熱門(mén)標(biāo)簽:地圖標(biāo)注自己去過(guò)的地方 電銷(xiāo)機(jī)器人視頻 江蘇高頻外呼系統(tǒng)線路 平頂山電子地圖標(biāo)注怎么修改 高德地圖標(biāo)注錯(cuò)誤怎么修改 會(huì)聲會(huì)影怎樣做地圖標(biāo)注效果 標(biāo)準(zhǔn)智能外呼系統(tǒng) 搜狗星級(jí)酒店地圖標(biāo)注 洛陽(yáng)市伊川縣地圖標(biāo)注中心官網(wǎng)
HTML5在國(guó)內(nèi)外越來(lái)越受到互聯(lián)網(wǎng)開(kāi)發(fā)團(tuán)隊(duì)的青睞。國(guó)外,谷歌興致勃勃地開(kāi)發(fā)Chrome Web Store,微軟發(fā)布了支持使用HTML5技術(shù)開(kāi)發(fā)的“Irish Spring”主題網(wǎng)站,諾基亞斥巨資購(gòu)得并打造的NOKIA MAP業(yè)務(wù)。國(guó)內(nèi)的互聯(lián)網(wǎng)巨頭對(duì)這股大洋彼岸吹來(lái)的新web開(kāi)發(fā)標(biāo)準(zhǔn)也同樣感興趣,開(kāi)始著手HTML5產(chǎn)品的試水。
網(wǎng)易微博iPhone平臺(tái)Web App產(chǎn)品在2012年第一季度已經(jīng)成功上線?,F(xiàn)將此項(xiàng)目開(kāi)發(fā)的經(jīng)驗(yàn)教訓(xùn)分享給大家,希望與大家在HTML5開(kāi)發(fā)環(huán)境中共同成長(zhǎng)。
人員配置
一、開(kāi)發(fā)人員配置
產(chǎn)品經(jīng)理:1名;
交互設(shè)計(jì)師:1名;
視覺(jué)設(shè)計(jì)師:1名;
前端工程師:1名;
后臺(tái)工程師:2名;
測(cè)試人員:1名。
二、開(kāi)發(fā)時(shí)間
交互設(shè)計(jì)師:22個(gè)工作日;
視覺(jué)設(shè)計(jì)師:14個(gè)工作日;
前端工程師:50個(gè)工作日;
后臺(tái)工程師:因使用原有后臺(tái)數(shù)據(jù),只需配合前端工程師調(diào)用數(shù)據(jù)
其中,整個(gè)開(kāi)發(fā)周期中交互和前端用時(shí)最長(zhǎng)。
網(wǎng)易微博Web App開(kāi)發(fā)過(guò)程
一、功能需求策劃:有別于Web端及本地客戶(hù)端
負(fù)責(zé)人:產(chǎn)品經(jīng)理; 參與人:交互設(shè)計(jì)師
網(wǎng)易微博Web App(本文內(nèi)均指手機(jī)端)有別于Web端產(chǎn)品,與本地客戶(hù)端也有所差異。
1. 網(wǎng)易微博Web App相較于Web端,具有較強(qiáng)的移動(dòng)性、富媒體化等優(yōu)勢(shì),同時(shí)具有信息呈現(xiàn)空間狹小、信息架構(gòu)深等劣勢(shì)。二者的使用情境有所不同,微博Web端多在充裕的時(shí)間、優(yōu)越的網(wǎng)絡(luò)條件下進(jìn)行沉浸式的使用;微博Web App多是在瑣碎的時(shí)間、良莠不齊的網(wǎng)絡(luò)條件下打發(fā)時(shí)間。
因此,網(wǎng)易微博Web App應(yīng)避免功能大而全,需要從Web端提煉選擇出移動(dòng)環(huán)境下用戶(hù)最常使用的功能,并增加手機(jī)端特有的需求功能(如迭代階段會(huì)考慮加入本地化服務(wù)功能)。
2. 網(wǎng)易微博Web App相較于本地客戶(hù)端,具有免安裝、升級(jí)簡(jiǎn)單、開(kāi)發(fā)成本低、可自適應(yīng)布局等優(yōu)勢(shì),同時(shí)具有反應(yīng)速度稍慢、調(diào)取手機(jī)原生控件的權(quán)限低、穩(wěn)定性稍弱等劣勢(shì)。
基于二者的優(yōu)劣勢(shì)分析,網(wǎng)易微博Web App需要追趕本地客戶(hù)端的優(yōu)質(zhì)體驗(yàn)、盡量保證輕量化而又快速。
一句話總結(jié),Web App的功能可以比Web端和本地客戶(hù)端的更精煉,滿足移動(dòng)環(huán)境下用戶(hù)最為核心的需求。
網(wǎng)易微博Web App功能策劃,如下圖:

二、信息架構(gòu)設(shè)計(jì):盡可能的淺而窄
負(fù)責(zé)人:交互設(shè)計(jì)師; 參與人:產(chǎn)品經(jīng)理
做過(guò)移動(dòng)互聯(lián)網(wǎng)產(chǎn)品的人肯定知道為什么信息架構(gòu)需要盡可能的淺而窄,最大的原因還是手機(jī)狹小金貴的顯示空間。手機(jī)本地客戶(hù)端的信息架構(gòu)需要淺而窄,Web App更需要如此,因?yàn)樵跒g覽器的頁(yè)面中始終存在著瀏覽器的底部工具欄,使原本就局促的顯示空間又被蠶食掉一小塊。如下圖:

手機(jī)屏幕底部的瀏覽器工具欄,對(duì)Web App產(chǎn)品很雞肋:Web App本身就是一個(gè)閉環(huán)的應(yīng)用程序,不需要借助瀏覽器工具欄。即使不會(huì)影響大的信息架構(gòu),也蠶食了寶貴的顯示空間,對(duì)導(dǎo)航系統(tǒng)的設(shè)計(jì)也有重要影響(這部分在之前的文章《iPhone Web App 導(dǎo)航設(shè)計(jì)探討》做過(guò)簡(jiǎn)要分析)。
網(wǎng)頁(yè)制作Webjx文章簡(jiǎn)介:HTML5開(kāi)發(fā)實(shí)戰(zhàn)之網(wǎng)易微博.


三、交互設(shè)計(jì):簡(jiǎn)潔、高效
負(fù)責(zé)人:交互設(shè)計(jì)師;參與人:產(chǎn)品經(jīng)理、視覺(jué)設(shè)計(jì)師、前端工程師、后臺(tái)技術(shù)人員

交互設(shè)計(jì)理念:
該產(chǎn)品具體的交互設(shè)計(jì)理念來(lái)源于:用戶(hù)使用場(chǎng)景的調(diào)查、競(jìng)品分析、Web App研發(fā)現(xiàn)狀、微博Web App的自身要求。最終歸納得出的交互設(shè)計(jì)理念主要有:
1.增強(qiáng)易尋性:
全局導(dǎo)航的加強(qiáng)、快速回到首頁(yè)、常用操作常駐、適時(shí)的動(dòng)畫(huà)演示、簡(jiǎn)約明了的網(wǎng)頁(yè)布局等。
2.提高使用效率
降低信息架構(gòu)層級(jí)、適當(dāng)給出快捷鍵入口、保證安全觸控區(qū)域、考慮用戶(hù)瀏覽習(xí)慣、優(yōu)先保證核心功能、消除不必要的視覺(jué)噪音等。
3.更加智能體貼
支持離線使用、編輯中的信息意外打斷后自動(dòng)填入、警示框的謹(jǐn)慎使用、搜索建議實(shí)施提供幫助、針對(duì)當(dāng)前任務(wù)需求安排工具欄、積極有效的反饋等。
4.提高任務(wù)專(zhuān)注度
單一任務(wù)操作路徑、tab導(dǎo)航適時(shí)隱藏、消除干擾因素、不可用button灰度化顯示、任務(wù)進(jìn)行頁(yè)面最大化、未進(jìn)行功能最小化等。
5.平臺(tái)一致性:
即看即點(diǎn)、iOS平臺(tái)的列表視圖、前進(jìn)及返回操作時(shí)的推屏動(dòng)畫(huà)、iOS平臺(tái)特色的模態(tài)視圖、警示框、調(diào)取原生控件、簡(jiǎn)單明了的跳轉(zhuǎn)邏輯等。
此階段的交互設(shè)計(jì)理念已經(jīng)不單單是理念,更多的是對(duì)該Web App產(chǎn)品的具體設(shè)計(jì)指導(dǎo)。承載著美好設(shè)計(jì)理念的設(shè)計(jì)實(shí)現(xiàn)方式,是設(shè)計(jì)研究階段的重要落地。
設(shè)計(jì)內(nèi)容與細(xì)節(jié)繁多,這里只撿一處細(xì)節(jié)與大家分享一下:
增強(qiáng)易尋性——全局導(dǎo)航的加強(qiáng)

與原有的wap微博相比,全局導(dǎo)航條的固定存在是一個(gè)很大的變化之處。下面我們簡(jiǎn)單分析一下這么做的原因:
–用戶(hù)的使用環(huán)境是什么樣的?——室外的移動(dòng)情境(如地鐵上、排隊(duì)中),或者室內(nèi)閑散狀態(tài)(如床上睡前刷微博);
–用戶(hù)來(lái)到這個(gè)頁(yè)面的目的是什么?——瀏覽微博;
–用戶(hù)在這個(gè)頁(yè)面中的常用操作有哪些?——下拉閱讀、置頂并載入新信息、點(diǎn)擊其他tab執(zhí)行跳轉(zhuǎn);
–如果全局導(dǎo)航條固定在頂端,好處是什么?——方便用戶(hù)回到頂部,方便用戶(hù)載入新信息,方便用戶(hù)切換tabs,具有較強(qiáng)的全局控制感;
–如果全局導(dǎo)航條固定在頂端,壞處是什么?——吞噬了寶貴的信息展示空間
…………
用戶(hù)使用過(guò)程中,置頂、刷新、切換tabs的行為也是比較頻繁的行為,操作的便捷性需要保證。而固定的全局導(dǎo)航條可以滿足這個(gè)需求:點(diǎn)擊HOME鍵可以置頂并刷新,可以方便用戶(hù)切換tabs. 同時(shí),固定的全局導(dǎo)航條可以使用戶(hù)一直明確地知道身處何處,可以去哪,給與用戶(hù)較強(qiáng)的全局控制感。
四、視覺(jué)設(shè)計(jì):清新風(fēng)格的試驗(yàn)
負(fù)責(zé)人:視覺(jué)設(shè)計(jì)師;參與人:產(chǎn)品經(jīng)理、交互設(shè)計(jì)師、前端工程師
網(wǎng)易微博Web app的視覺(jué)風(fēng)格的確定是經(jīng)過(guò)多角度探討的:
1.要不要和網(wǎng)易微博本地客戶(hù)端的色調(diào)保持一致?
產(chǎn)品在不同平臺(tái)上需要保持一定的一致性,顏色風(fēng)格也是形成產(chǎn)品氣質(zhì)的重要組成,那我們需要使用與網(wǎng)易微博本地客戶(hù)端相近的皮膚嗎?網(wǎng)易微博本地客戶(hù)端的主色調(diào)是紅色。
分析如下:
–使用該紅色的好處是:比較強(qiáng)的產(chǎn)品一致性;紅色形成的產(chǎn)品氣質(zhì)比較“精神“。
–使用該紅色的壞處是:紅色區(qū)域與微博內(nèi)容相比略微搶眼,“沉浸式閱讀”比較難以實(shí)現(xiàn);
通過(guò)safari瀏覽器使用網(wǎng)易微博Web App,最終的視覺(jué)效果與本地客戶(hù)端還有一個(gè)區(qū)別是,瀏覽器工具欄一直占據(jù)著屏幕的底部一行空間。紅色屬于比較“喧囂”的顏色,瀏覽器的工具欄藍(lán)灰色相對(duì)“沉靜”。這兩種顏色巨大的差距造成眼鏡極度不適。

綜合以上分析,沿用本地客戶(hù)端的紅色不太適合。
網(wǎng)頁(yè)制作Webjx文章簡(jiǎn)介:HTML5開(kāi)發(fā)實(shí)戰(zhàn)之網(wǎng)易微博.


2.Safari瀏覽器內(nèi)運(yùn)行的影響?
網(wǎng)易微博Web App是從safari瀏覽器中運(yùn)行和展示的,這是該產(chǎn)品的環(huán)境之一。網(wǎng)頁(yè)給人“輕盈精簡(jiǎn)”的感覺(jué),本地客戶(hù)端給人“厚重恒穩(wěn)”的感覺(jué)。
因此,視覺(jué)風(fēng)格“輕量化”是個(gè)不錯(cuò)的選擇。
3.當(dāng)前的視覺(jué)風(fēng)格趨勢(shì)
由Metro UI和Google+引領(lǐng)的“小清新”風(fēng)格,成為一股不小的視覺(jué)風(fēng)格發(fā)展趨勢(shì)。精致繁復(fù)的視覺(jué)經(jīng)歷一段時(shí)間后,返璞歸真,開(kāi)始流行簡(jiǎn)潔清新的視覺(jué)風(fēng)格。
于是,視覺(jué)設(shè)計(jì)師經(jīng)過(guò)幾次視覺(jué)嘗試,包括紅色、酷黑色、清新淺灰色。多方比較后,大家一致認(rèn)同清新淺灰色。清新淺灰色是主色調(diào),icon點(diǎn)擊后的狀態(tài)是網(wǎng)易慣常使用的紅色,一定程度上保持了視覺(jué)風(fēng)格一致性。
五、前端開(kāi)發(fā):見(jiàn)招拆招
負(fù)責(zé)人:前端工程師;參與人:產(chǎn)品經(jīng)理、交互設(shè)計(jì)師、視覺(jué)設(shè)計(jì)師、后臺(tái)技術(shù)人員
到達(dá)這一部分的時(shí)候,可能大家更關(guān)心的是具體代碼是怎么樣的,實(shí)現(xiàn)框架是什么樣的?非常抱歉的是,涉及到公司的產(chǎn)品機(jī)密,具體實(shí)現(xiàn)代碼不能展示給大家。見(jiàn)諒!
此處選擇2個(gè)網(wǎng)友的問(wèn)題進(jìn)行簡(jiǎn)要回答:
問(wèn)題1:能不能講講前端架構(gòu)呢,為什么沒(méi)有采用sencha?
答:sencha touch 1.x/2.x,jQuery mobile等因?yàn)榭啥ㄖ菩院托阅芗百Y源消耗還不理想,所以網(wǎng)易前端自己開(kāi)發(fā)了框架,正如你所說(shuō)使用了seajs處理腳本加載,iscroll模擬滾動(dòng),目前看來(lái)還是效果不錯(cuò)的,網(wǎng)易前端將不斷完善這個(gè)框架。
問(wèn)題2:能拍照、上傳圖片么?
iPhone Safari沒(méi)有給與調(diào)取照相機(jī)、圖庫(kù)的權(quán)限,所以這個(gè)需求尚沒(méi)有滿足。話說(shuō),Android給權(quán)限,到時(shí)候肯定滿足這一“剛需”。
六、后續(xù)工作
之后的工作主要是交互走查、視覺(jué)走查、QA測(cè)試、上線后總結(jié)反饋修復(fù)問(wèn)題、計(jì)劃下一期迭代。項(xiàng)目流程大家都懂,不多說(shuō)了。
從中汲取的經(jīng)驗(yàn)教訓(xùn)
一、工作流程方面的感觸
1、以?xún)?yōu)秀的體驗(yàn)設(shè)計(jì)為先導(dǎo)。
這個(gè)項(xiàng)目是典型的以設(shè)計(jì)為先導(dǎo)的例子,首先給予設(shè)計(jì)師充分的時(shí)間和發(fā)揮空間,技術(shù)則見(jiàn)招拆招。這條工作思路是整個(gè)產(chǎn)品獲得良好用戶(hù)體驗(yàn)的基石。HTML5技術(shù)很強(qiáng)大,有太多的可能性;而設(shè)計(jì)是將這些技術(shù)可能性塑造成型的模具。
2、產(chǎn)品經(jīng)理、交互、視覺(jué)、前端及時(shí)頻繁的溝通
整個(gè)項(xiàng)目中,產(chǎn)品經(jīng)理、交互設(shè)計(jì)師、視覺(jué)設(shè)計(jì)師、前端工程師每周開(kāi)一個(gè)碰頭會(huì)。后期證明,這種頻繁的溝通大大減少了返工率,提高了開(kāi)發(fā)效率。
3、小步快跑,注重迭代。
網(wǎng)易微博產(chǎn)品比較復(fù)雜,加之HTML5開(kāi)發(fā)進(jìn)度比較慢,人力有限,不可能全部功能細(xì)節(jié)同時(shí)做完上線。否則后期調(diào)試就要一個(gè)月的時(shí)間,為產(chǎn)品的快速發(fā)展增加沉重的負(fù)擔(dān)。因此,第一期只做最核心功能成為必然選擇。
二、用戶(hù)體驗(yàn)方面的經(jīng)驗(yàn)
1、導(dǎo)航系統(tǒng)更適合在屏幕頂部。
瀏覽器的工具欄一直存在,致使tab導(dǎo)航欄已經(jīng)不適合固定在屏幕底部,頂部更加適合。
2、便捷性更加重要,將最常用的功能巧妙的設(shè)置。
產(chǎn)品性能和瀏覽器性能的原因,目前的Web App流暢度和跳轉(zhuǎn)速度還是不能與Native App相媲美,跳轉(zhuǎn)成本稍微大一點(diǎn)。所以需要將最常用功能與用戶(hù)靠的更近一些,減少跳轉(zhuǎn)帶來(lái)的等待成本。
3、視覺(jué)稿在美觀與簡(jiǎn)潔之間權(quán)衡,絕大部分的視覺(jué)稿需要使用代碼實(shí)現(xiàn)。
幾乎所有的視覺(jué)都是通過(guò)代碼實(shí)現(xiàn),視覺(jué)設(shè)計(jì)最好不要過(guò)于繁復(fù)。前端工程師對(duì)視覺(jué)稿的消化也是需要時(shí)間的。

三、技術(shù)實(shí)現(xiàn)方面的理解
1、Safari瀏覽器的權(quán)限限制,Web App尚不能調(diào)用照相機(jī)工具、不支持圖片上傳功能。
這是一件很頭疼的事,也是很無(wú)奈的事。iOS系統(tǒng)給與Web App的權(quán)限太低了。相比之下,Android 系統(tǒng)的Web App就可以調(diào)取照相機(jī)控件,也支持微博圖片上傳功能(不過(guò)現(xiàn)在還沒(méi)有開(kāi)發(fā)Android版本)。
2、過(guò)場(chǎng)動(dòng)畫(huà)還實(shí)現(xiàn)不了如本地客戶(hù)端的流暢效果。
原因有:好的過(guò)場(chǎng)動(dòng)畫(huà)會(huì)蠶食產(chǎn)品的性能;HTML5技術(shù)還不是那么完善和成熟;現(xiàn)在還缺乏一款強(qiáng)有力的瀏覽器。
小結(jié)
除了iOS系統(tǒng)的權(quán)限問(wèn)題,Web App的優(yōu)秀表現(xiàn)已經(jīng)接近Native App了。HTML5技術(shù)給與了wap網(wǎng)頁(yè)新的生命,為wap帶來(lái)了顛覆性的變革。在HTML5項(xiàng)目中,功能策劃以精煉為佳;信息架構(gòu)需要盡可能的淺而窄;交互設(shè)計(jì)需要力求簡(jiǎn)潔高效;視覺(jué)設(shè)計(jì)還要考慮瀏覽器這一特殊的運(yùn)行環(huán)境;前端不僅需要逐步消化交互設(shè)計(jì)和視覺(jué)設(shè)計(jì),還要在新技術(shù)新問(wèn)題中大膽嘗試見(jiàn)招拆招。整個(gè)團(tuán)隊(duì)的頻繁溝通非常有必要,開(kāi)發(fā)步驟最好采取小步快跑的方式。
人力和精力有限,難免有偏頗之處,歡迎大家拍磚!期待和您一起討論這一有意思的話題。

標(biāo)簽:松原 鄂爾多斯 常德 廣西 蚌埠 阿克蘇 廣東 果洛

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《網(wǎng)易微博Web App用HTML5開(kāi)發(fā)的過(guò)程介紹》,本文關(guān)鍵詞  網(wǎng)易,微博,Web,App,用,HTML5,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無(wú)關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《網(wǎng)易微博Web App用HTML5開(kāi)發(fā)的過(guò)程介紹》相關(guān)的同類(lèi)信息!
  • 本頁(yè)收集關(guān)于網(wǎng)易微博Web App用HTML5開(kāi)發(fā)的過(guò)程介紹的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章