如何用HTML5開發(fā)WebApp

如何用HTML5開發(fā)WebApp，相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)建站！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、重慶小程序開發(fā)、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了項城免費建站歡迎大家使用！

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)品的試水。
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. 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ì)體驗、盡量保證輕量化而又快速。
一句話總結(jié)，Web App的功能可以比Web端和本地客戶端的更精煉，滿足移動環(huán)境下用戶最為核心的需求。
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更需要如此，因為在瀏覽器的頁面中始終存在著瀏覽器的底部工具欄，使原本就局促的顯示空間又被蠶食掉一小塊。如下圖：

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

undefined

網(wǎng)頁制作Webjx文章簡介：HTML5開發(fā)實戰(zhàn)之網(wǎng)易微博.


三、交互設(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)慎使用、搜索建議實施提供幫助、針對當(dāng)前任務(wù)需求安排工具欄、積極有效的反饋等。
4.提高任務(wù)專注度
單一任務(wù)操作路徑、tab導(dǎo)航適時隱藏、消除干擾因素、不可用button灰度化顯示、任務(wù)進(jìn)行頁面最大化、未進(jìn)行功能最小化等。
5.平臺一致性：
即看即點、iOS平臺的列表視圖、前進(jìn)及返回操作時的推屏動畫、iOS平臺特色的模態(tài)視圖、警示框、調(diào)取原生控件、簡單明了的跳轉(zhuǎn)邏輯等。
此階段的交互設(shè)計理念已經(jīng)不單單是理念，更多的是對該Web App產(chǎn)品的具體設(shè)計指導(dǎo)。承載著美好設(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)（如床上睡前刷微博）；
–用戶來到這個頁面的目的是什么？——瀏覽微博；
–用戶在這個頁面中的常用操作有哪些？——下拉閱讀、置頂并載入新信息、點擊其他tab執(zhí)行跳轉(zhuǎn)；
–如果全局導(dǎo)航條固定在頂端，好處是什么？——方便用戶回到頂部，方便用戶載入新信息，方便用戶切換tabs，具有較強(qiáng)的全局控制感；
–如果全局導(dǎo)航條固定在頂端，壞處是什么？——吞噬了寶貴的信息展示空間
…………
用戶使用過程中，置頂、刷新、切換tabs的行為也是比較頻繁的行為，操作的便捷性需要保證。而固定的全局導(dǎo)航條可以滿足這個需求：點擊HOME鍵可以置頂并刷新，可以方便用戶切換tabs. 同時，固定的全局導(dǎo)航條可以使用戶一直明確地知道身處何處，可以去哪，給與用戶較強(qiáng)的全局控制感。
四、視覺設(shè)計：清新風(fēng)格的試驗
負(fù)責(zé)人：視覺設(shè)計師；參與人：產(chǎn)品經(jīng)理、交互設(shè)計師、前端工程師
網(wǎng)易微博Web app的視覺風(fēng)格的確定是經(jīng)過多角度探討的：
1.要不要和網(wǎng)易微博本地客戶端的色調(diào)保持一致？
產(chǎn)品在不同平臺上需要保持一定的一致性，顏色風(fēng)格也是形成產(chǎn)品氣質(zhì)的重要組成，那我們需要使用與網(wǎng)易微博本地客戶端相近的皮膚嗎？網(wǎng)易微博本地客戶端的主色調(diào)是紅色。
分析如下：
–使用該紅色的好處是：比較強(qiáng)的產(chǎn)品一致性；紅色形成的產(chǎn)品氣質(zhì)比較“精神“。
–使用該紅色的壞處是：紅色區(qū)域與微博內(nèi)容相比略微搶眼，“沉浸式閱讀”比較難以實現(xiàn)；
通過safari瀏覽器使用網(wǎng)易微博Web App，最終的視覺效果與本地客戶端還有一個區(qū)別是，瀏覽器工具欄一直占據(jù)著屏幕的底部一行空間。紅色屬于比較“喧囂”的顏色，瀏覽器的工具欄藍(lán)灰色相對“沉靜”。這兩種顏色巨大的差距造成眼鏡極度不適。

綜合以上分析，沿用本地客戶端的紅色不太適合。

undefined

網(wǎng)頁制作Webjx文章簡介：HTML5開發(fā)實戰(zhàn)之網(wǎng)易微博.


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

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

看完上述內(nèi)容，你們掌握如何用HTML5開發(fā)WebApp的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

網(wǎng)頁標(biāo)題：如何用HTML5開發(fā)WebApp
本文地址：http://bm7419.com/article40/pscseo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供、定制開發(fā)、網(wǎng)站排名、網(wǎng)站收錄、云服務(wù)器、建站公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)