網(wǎng)易微博Web App用HTML5開發(fā)的過程介紹_HTML5教程

      編輯Tag賺U幣

      推薦:HTML5 對各個標簽的定義與規(guī)定:body的介紹
      本文主要介紹body標簽

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

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

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


      三、交互設計:簡潔、高效
      負責人:交互設計師;參與人:產(chǎn)品經(jīng)理、視覺設計師、前端工程師、后臺技術人員

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

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

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


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

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

      分享:關于HTML5的安全問題開發(fā)人員需要牢記的
      HTML5中的安全問題也要注意的

      來源:未知//所屬分類:HTML5教程/更新時間:2013-04-22
      相關HTML5教程