webapp

webapp

網絡應用程序框架
WebApp是指基于Web的系統和應用,其作用是向廣大的最終用戶發布一組複雜的内容和功能。從一個簡單的幫助消費者計算汽車租借費用的網頁,到為商業人員和度假者提供全套旅遊服務的大型複雜的WEB站點,都是WebApp。它包括一些完整的WEB站點,WEB站點的專門功能以及在Internet、Intranet或ExtraNet上的信息處理應用。webapp框架是一種簡單的與WSGI兼容的網絡應用程序框架,可以與App Engine配合使用。
    中文名:web app 外文名: 所屬學科: 解釋:基于Web的系統和應用 作用:向廣大用戶發布複雜内容和功能 性質:網絡應用程序框架

界面

元素變化

力求簡潔明了是用戶界面設計的重要原則。在同一時間給用戶展示的功能越多,用戶需要尋找和思考的時間也就越多。同樣,界面中存在的選項越少,可用功能就越明顯、越容易浏覽。不過簡化界面并非輕而易舉,尤其是你不想減少應用程序功能的情況下。将高級功能隐藏起來是一種有效的簡化方法。

搞清楚在界面中用戶最經常用的是哪些功能,然後把其他功能隐藏處理。這些可由下拉式菜單和控件完成。例如,搜索欄中的高級過濾器可以做成尾部的特殊下拉菜單樣式。當用戶需要這些過濾器的時候隻需要幾次點擊就可以使用。決定哪些功能保留展示哪些需要隐藏起來,并不是一個簡單的工作,需要取決于功能控件的重要程度和被使用的頻繁程度。

增加陰影

彈出式菜單和窗口周邊的陰影不僅僅是為了視覺美觀。陰影一方面增大了菜單或窗口的尺寸,有助于将菜單或窗口從背景中區别開來;另一方面通過灰度化的邊緣陰影可以屏蔽背景内容的噪音幹擾。

這個技巧根植于傳統桌面程序,幫助用戶将注意力集中在彈出的窗口。由于很多模态窗口不容易從桌面程序内容頁面中凸顯出來,陰影可以使它們看起來具有立體效果、仿佛懸浮于其他内容之上,于是拉近了模态窗口與用戶的距離。為實現這樣的效果,設計師往往将透明的PNG背景圖片作為容器,再把内容填充到容器中,同時等距離填充彈出框各邊緣。

或者使用具有透明邊框的背景圖片,并将内容框絕對定位在其中。另外,也可以使用基于JavaScript的lightboxes命令或者CSS3中的drop shadows命令,但需要注意浏覽器是否支持。

提醒用戶

當設計web app的時候,不僅需要關心一般情況下的信息展示,還要确保界面在空白狀态時表現良好、具有指引作用。頁面中還沒有産生任何信息的時候,可以在空白區域放置一條幫助信息告訴用戶如何開始。例如,一個項目管理的應用程序主頁會列出用戶的項目,假如還沒有什麼項目信息,可以為用戶提供一個項目創建頁面的鍊接。

即使這個頁面上已經存在了這樣一個功能按鈕,一個額外的幫助并不會有什麼妨礙。這個技巧可以有效地鼓勵用戶試用該服務,并在注冊後立即進行使用。通過應用程序的單一操作步驟可以幫助用戶理解這個應用的優勢以及對他們是否有用。

此外,隻為用戶展示最重要的功能選項也很關鍵。一股腦的将衆多功能傾瀉給用戶并沒有什麼實際意義。需要牢記的是,用戶通常想從應用中獲得或多或少的信息,但卻不想跳進細節中,用戶沒有時間也沒有興趣。在空白狀态中激勵用戶,可以顯着地降低用戶的流失率,并幫助潛在的用戶更好的理解程序系統是如何工作的。

Button

許多web app擁有自定義樣式的按鈕。默認的輸入按鈕可能不适合某些情景,文字鍊接有時候看起來又太含蓄。需要注意的是,把鍊接做成Button樣式的時候,它們就應該有button的表現形式。比如,在點擊button的時候它們應該會出現被“壓”過的樣子。這不僅僅是純粹的視覺變化。

及時反饋給用戶,可以使web app感覺起來更靈敏,與桌面應用程序的用戶體驗更接近。可以使用CSS添加按鈕的“pressed”等狀态,實現在不同狀态下顯示不同背景圖片的功能。為提升圖書館個性化服務效率與精度,提出了基于Web技術的圖書館個性化服務模型。

情境導航

在既定的情境下考慮用戶希望看什麼、需要什麼是非常重要的。不需要在每一個地方都放置相同的導航控件,因為用戶不是在任何情況下都需要它們。

上下文情境導航最好的一個例子就是Office 2007中,原先默認的工具欄集合被換成了帶狀控件形式。每一項tab控制着一組相關聯的功能,如編輯圖形、校對或者簡單書寫。Web app可以從這種上下文情境導航中獲益,僅展示用戶需要的、而不是所有可用的功能,從而保持用戶界面的整潔清爽。

關鍵功能

并不是所有的控件都擁有相同的重要性。例如創建一個新的條目,頁面中會有“創建”“取消”兩個button.這裡的“創建”就要更加重要些,因為這是大多數情況下用戶即将要做的事情。極少的情況下用戶才會去點擊取消。雖然這兩個控件并排放置,但是不要給予相同的重視程度。

為了将注意力引導到“創建”上,我們可以嘗試使用不用的風格或樣式。一種方式是将“創建”設計成button樣式,“取消”設計成文字鍊接樣式。另一種方式是在視覺上使用使用不同的顔色,并使button略有凸起的效果。這樣便于抓住用戶的目光。

優點

第一、使用W3C标準的HTML(标準通用标記語言下的一個應用)語言開發,能夠輕松實現跨平台,移動應用開發者不再需要考慮複雜的底層适配和跨平台開發語言的問題。與此同時,使用HTML來開發的Web App在投入上會大大的低于傳統的Native App。

第二、基于當下開始普及流行的HTML5,Web App可以實現很多原本Native App才可以實現的功能,比如LBS的功能、本地數據存儲、音視頻播放的功能,甚至還有調用照相機和結合GPU的硬件加速功能。

第三、移動應用的叠代周期平均不到1個月,用戶需要頻繁的重新下載與升級。而Web App則無需用戶下載,并且和傳統網站一樣可以動态升級。

第四、Web App有App的特性,更有Web的特性。每一個Native App在當前的用戶使用場景下是相對孤立的,而Web App則可以像傳統互聯網網頁那樣相互鍊接,從一個Web App直接跳轉到另外一個Web App。這無論是從用戶的使用體驗層面還是從應用之間的數據傳輸來看都是非常不錯的選擇。

簡介

基于浏覽器開發并運行應用程序,是Google在設計Chrome時提出的概念,這是Google推廣雲計算的其中一步。Facebook也正在秘密開發一項名為“斯巴達”(ProjectSpartan)的項目,該項目将基于下一代浏覽器标準HTML5開發WebApp應用。

所謂HTML5是互聯網行業最新版本的Web标準,可以讓網頁能表現出更豐富的内容,包括一些更便捷的音樂、視頻播放、玩遊戲等。對于移動互聯網行業來說,HTML5則帶來了全新概念WebAPP———一種頁面直接适配于手機屏幕,且免安裝免更新的APP,其實質是通過浏覽器打開了某網站,而該網站能在手機上為用戶帶來類似于APP客戶端的體驗。

傳統

對用戶來說,傳統App體驗有明顯缺陷。每個用戶都會安裝數十個App,但最常用的通常不超過5個。而且傳統App的安裝與更新必須需要通過應用程序商店,很多用戶對此不勝其擾,而且非常耗費流量,而互聯網軟件是以更新頻繁為特點的。

對開發者來說,App客戶端跨平台成本高,暫且不論現在的終端平台五花八門,未來移動互聯網很可能出現Google、Apple、Microsoft三足鼎立。開發者不得不需要針對上述所有的系統開發不同的版本。而開發不同平台和機型上的應用,占據的資金與精力投入,與開發一款新應用幾乎相同。

AppStore新版本提交蘋果進行審核至少需要兩個星期,而用戶下載使用之後的回饋,則至少需要一個月才能到開發者手裡,這對于崇尚快速叠代的互聯網産品來說,無疑是一個巨大打擊。

優勢

WebApp不僅彌補了傳統App的缺陷,并且自身優勢明顯:随着移動設備在硬件性能上的提升和浏覽器效率的提高,基于浏覽器開發的應用,其運行效率和展現效果,将很快追上基于操作系統的客戶端App。更重要的是,建立在HTML5基礎上的WebApp彌補傳統App幾乎所有的缺點,有望讓移動設備的應用回到浏覽器的平台之上。

如基于浏覽器的應用能夠實現自動更新;HTML5的通用性使得WebApp可以在所有支持HTML5的浏覽器上運行,形成巨大的平台優勢。一旦蘋果的APPStore中的應用不再具有數量和品質上的優勢,蘋果在移動設備上目前壓倒性的優勢也将逐漸失去。

另外,HTML5自身大大加強了對圖像顯示、視頻播放的支撐能力,同時還提供了基于Javascript的2D繪圖功能和基于WebGL的3D繪圖功能,這意味着HTML5可以實現良好的網頁遊戲功能,而不需要任何插件或者擴展的幫助。

随着下一代協議标準HTML5的推出與普及,基于浏覽器的WebApp有望在未來取代客戶端App,成為移動互聯網主流的應用模式。

當然組建WebApp模式的門檻也不低,由于HTML5還沒有一個統一的标準,擁有浏覽器内核才能為浏覽器所支撐的應用提供最強的表現力和體驗,目前擁有浏覽器内核技術的廠商不多,國外的Chrome、Safari、Firefox、IE和國内的UC浏覽器。

WebAPP的優勢在于不需要去匹配各種操作系統和終端。因為UC優視的拳頭産品手機浏覽器,将成為這場WebAPP市場争奪戰的主戰場———用戶用哪種浏覽器打開WebAPP,就等于為這種浏覽器增加用戶和流量。

打開最新Android版本的UC浏覽器8.3,你會發現許多熟悉的APP圖标出現在其中,包括網易郵箱、QQ空間、淘寶網、豆瓣電台等等。實際上,這些圖标相當于浏覽器内的“書簽”,點擊後會進入相關網站,但其中的内容看上去和客戶端沒什麼兩樣。通過浏覽器,你還能将這些圖标移到手機桌面上,變成“真正”的App.

制作工具

常用工具

ASP,PHP,HTML,JAVA等。使用這些常見的網絡開發工具,可以制作絕大部分的webapp程序,使其在網站頁面上實現傳統的C/S架構軟件的功能,也就是我們常說的SaaS模式。

其他工具

CBX,AthTekWebAPPKit等。CBX和AthTekWebAPPKit都是國産軟件,它們的主要功能就是以将使用傳統編程語言如C,C++,Delphi等開發的C/S架構客戶端軟件工程,以所見即所得的方式,快速部署到網絡服務器上,讓傳統的編程語言也能夠實現基于web的互聯網應用程序開發。

進入towebapp.com,可以免費快速創建webapp。有精美的模闆和豐富的功能可以選擇,有一個免費的二級域名,同時可以綁定自己的獨立域名。

監測性能

測試工具:qtestin,Keynote,YouMonitor等。通過這些在線監測可以對webapp的性能指标如:不同地區不同設備的響應時間、可用性、用戶體驗等進行監測。當然,有些服務是需要付費的。其中qtestin(又名雲測寶)是國産,其他兩家是國外的。

本地測試:如在不同設備上測試webapp的兼容性等等,需要自己布置設備和收集反饋結果,特點是真實有效。

開發

在iOS上開發APP,需要通過Objective-C那樣精細複雜的語言去開發,這對廣大的開發者而言是個不小的難題。值得慶幸的是,開發者們也可以通過開發Web APP來達到曲線救國的目的。也就是說,可以通過HTML、CSS或者JavaScript來進行Web APP的開發。

其實Web APP說白了就是一個針對Iphone、Android優化後的web站點,它使用的技術無非就是HTML或HTML5、CSS3、JavaScript,服務端技術JAVA、PHP、ASP。

需要注意的是web app開發還是比較有限的。因為Web APP開發不能整合設備的核心功能,比如發文本信息,也不能充分使用APP Store進行銷售和更新。但是Web APP開發也有其優勢所在。

首先它解決了iphone APP的可擴展性問題,因為它是可以跨平台使用的。比如你開發了一款Web App,那麼它既可以在手機iphone上使用,也可以再平闆ipad上使用,而不像iphone APP那樣隻針對某個平台。

其次web APP也繞開了APP store嚴格的提交和更新審查規則。衆所周知,随着APP store中的APP逐漸增多,APP store也推出了一系列的提交和審查規則,可謂相當之嚴格。而web APP則繞開了這些提交和更新審查規則,從而使得web APP的升級和維護變得更容易。因為它是一個獨立的站點,而不是依附于app store上的,不管是升級還是維護在客戶端進行即可,無需提交審核。

最後則是開發語言了。相比較Objective-C而言,HTML、CSS以及JavaScript學起來要容易多了。且對于傳統開發者來說,HTML、CSS以及JavaScript基本都是可以直接上手的,省去了前期的培訓工作。

相關詞條

相關搜索

其它詞條