我想做一個自己用的web？

分

撇開各種不同的Web技術不談，弄清楚Web Apps定義最困難的是如何從各種紛繁復雜的Web App中提取出他們的共同特征。當用戶登錄一個網站(如Pixlr)，大家很容易理解這是在訪問一個Web App。但是對那些僅僅提供基礎服務(如電話查詢或是信息查詢)的網站，區分用戶是否在訪問Web App就變得相當困難了。

其實這些服務大多都是Web App。我常常這樣問自己"這個程序是否完成了某個任務?"。即便它只完成了某個非常小的任務，那么它也是一個Web App。Google的搜索引擎就是一個Web App，它本質上和電話查詢服務沒有什么區別。

這樣說來，也并非所有的網站都是Web App。如果這個網站并沒有執行任何任務，那么它就并不是Web App。

界面

元素變化

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

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

增加陰影

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

這個技巧根植于傳統桌面程序，幫助用戶將注意力集中在彈出的窗口。由于很多模態窗口不容易從桌面程序內容頁面中凸顯出來，陰影可以使它們看起來具有立體效果、仿佛懸浮于其他內容之上，于是拉近了模態窗口與用戶的距離。

為實現這樣的效果，設計師往往將透明的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。這無論是從用戶的使用體驗層面還是從應用之間的數據傳輸來看都是非常不錯的選擇。

制作

常用工具

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

其他工具

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

一鍵生成webapp工具

百度SiteApp是致力于為開發者、站長提供從生成WebApp到流量、用戶引入再到變現的綜合服務平臺，亦是國內首家的WebApp在線生成服務平臺。