界面
元素變化
力求簡潔明了是用戶界面設計的重要原則。在同一時間給用戶展示的功能越多，用戶需要尋找和思考的時間也就越多。同樣，界面中存在的選項越少，可用功能就越明顯、越容易瀏覽。不過簡化界面並非輕而易舉，尤其是你不想減少應用程式功能的情況下。將高級功能隱藏起來是一種有效的簡化方法。搞清楚在界面中用戶最經常用的是哪些功能，然後把其他功能隱藏處理。這些可由下拉式選單和控制項完成。例如，搜尋欄中的高級過濾器可以做成尾部的特殊下拉選單樣式。當用戶需要這些過濾器的時候只需要幾次點擊就可以使用。決定哪些功能保留展示哪些需要隱藏起來，並不是一個簡單的工作，需要取決於功能控制項的重要程度和被使用的頻繁程度。
增加陰影
彈出式選單和視窗周邊的陰影不僅僅是為了視覺美觀。陰影一方面增大了選單或視窗的尺寸，有助於將選單或視窗從背景中區別開來；另一方面通過灰度化的邊緣陰影可以禁止背景內容的噪音干擾。
這個技巧根植於傳統桌面程式，幫助用戶將注意力集中在彈出的視窗。由於很多模態視窗不容易從桌面程式內容頁面中凸顯出來，陰影可以使它們看起來具有立體效果、仿佛懸浮於其他內容之上，於是拉近了模態視窗與用戶的距離。為實現這樣的效果，設計師往往將透明的PNG背景圖片作為容器，再把內容填充到容器中，同時等距離填充彈出框各邊緣。或者使用具有透明框線的背景圖片，並將內容框絕對定位在其中。另外，也可以使用基於JavaScript的lightboxes命令或者CSS3中的drop shadows命令，但需要注意瀏覽器是否支持。
提醒用戶
當設計web app的時候，不僅需要關心一般情況下的信息展示，還要確保界面在空白狀態時表現良好、具有指引作用。頁面中還沒有產生任何信息的時候，可以在空白區域放置一條幫助信息告訴用戶如何開始。例如，一個項目管理的應用程式主頁會列出用戶的項目，假如還沒有什麼項目信息，可以為用戶提供一個項目創建頁面的連結。即使這個頁面上已經存在了這樣一個功能按鈕，一個額外的幫助並不會有什麼妨礙。這個技巧可以有效地鼓勵用戶試用該服務，並在註冊後立即進行使用。通過應用程式的單一操作步驟可以幫助用戶理解這個套用的優勢以及對他們是否有用。
此外，只為用戶展示最重要的功能選項也很關鍵。一股腦的將眾多功能傾瀉給用戶並沒有什麼實際意義。需要牢記的是，用戶通常想從套用中獲得或多或少的信息，但卻不想跳進細節中，用戶沒有時間也沒有興趣。在空白狀態中激勵用戶，可以顯著地降低用戶的流失率，並幫助潛在的用戶更好的理解程式系統是如何工作的。
Button
許多web app擁有自定義樣式的按鈕。默認的輸入按鈕可能不適合某些情景，文字連結有時候看起來又太含蓄。需要注意的是，把連結做成Button樣式的時候，它們就應該有button的表現形式。比如，在點擊button的時候它們應該會出現被“壓”過的樣子。這不僅僅是純粹的視覺變化。及時反饋給用戶，可以使web app感覺起來更靈敏，與桌面應用程式的用戶體驗更接近。可以使用CSS添加按鈕的“pressed”等狀態，實現在不同狀態下顯示不同背景圖片的功能。
情境導航
在既定的情境下考慮用戶希望看什麼、需要什麼是非常重要的。不需要在每一個地方都放置相同的導航控制項，因為用戶不是在任何情況下都需要它們。
上下文情境導航最好的一個例子就是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。這無論是從用戶的使用體驗層面還是從套用之間的數據傳輸來看都是非常不錯的選擇。
簡介
WebAPP基於瀏覽器開發並運行應用程式，是Google在設計Chrome時提出的概念，這是Google推廣雲計算的其中一步。Facebook也正在秘密開發一項名為“斯巴達”（ProjectSpartan)的項目，該項目將基於下一代瀏覽器標準HTML5開發WebApp套用。
所謂HTML5是網際網路行業最新版本的Web標準，可以讓網頁能表現出更豐富的內容，包括一些更便捷的音樂、視頻播放、玩遊戲等。對於移動網際網路行業來說，HTML5則帶來了全新概念WebAPP———一種頁面直接適配於手機螢幕，且免安裝免更新的APP，其實質是通過瀏覽器打開了某網站，而該網站能在手機上為用戶帶來類似於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.
製作webapp的工具
常用工具
製作webapp的工具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的兼容性等等，需要自己布置設備和收集反饋結果，特點是真實有效。
Web App、Hybrid App、Native APP對比
| | Web App（網頁套用） | Hybrid App（混合套用） | Native App（原生套用） |
| 開發成本 | 低 | 中 | 高 |
| 維護更新 | 簡單 | 簡單 | 複雜 |
| 體驗 | 差 | 優 | 優 |
| Store或market認可 | 不認可 | 認可 | 認可 |
| 安裝 | 不需要 | 需要 | 需要 |
| 跨平台 | 優 | 優 | 差 |
開發
在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基本都是可以直接上手的，省去了前期的培訓工作。
