Web app製做細節:web app互動製做技巧

Google 、微軟、蘋果三大巨頭緊鑼密鼓地在web app的研發產品領域圈地設崗，並試圖創建以本身爲中心的」雲「服務平臺，企圖在web app時代到來的時候充當霸主。
本文將圍繞web app的製做，與你們討論幾點製做技巧。

什麼是web app?

Web app是一種經過網絡（如互聯網或內聯網）訪問的應用程序；也能夠指計算機軟件承載在瀏覽器支持環境下或使用瀏覽器支持語言（如JavaScript）並 依賴於web 瀏覽器來渲染的應用程序。Web app的流行歸功於網站瀏覽器的普及，以及使用這一輕薄客戶端方便的用戶體驗。沒必要下載安裝就能夠實現更新和維護，具備支持跨平臺的內在屬性，是web app開始流行的關鍵緣由。典型的web app產品包括web郵箱、web商店、wikis等等。

Web app的優勢

◆經過兼容性瀏覽器實現配置而不須要任何複雜的「轉出」步驟；

◆瀏覽器應用程序幾乎不須要客戶端上的磁盤空間；

◆新功能從服務器自動傳遞給用戶，用戶本身沒必要升級程序；

◆能夠輕鬆整合進入其餘服務類web程序；

◆跨平臺的兼容性

現階段web app還很難有一個製做原則

HTML5 技術仍在發展中且發展尚不完善， web app做爲該技術的產物天然也是在不斷試驗中進步；此外，web app還要依賴兼容性瀏覽器更強大的渲染能力，俗話說「皮之不存毛將焉附」，在你們都期待的強大瀏覽器出現以前誰也難以預言web app須要作成什麼樣纔算是一個合格的產品。在這種行業背景下，web app還難以有一個所謂的製做原則，起碼如今還不構成總結一個合理製做原則的條件。

其實，所謂的製做原則本就是從已有的、典型的製做做品中 倒推得出的。好比，解構主義製做風格的提出不是以前就有的，是理論家在分析總結了建築製做師蓋裏、埃森曼、特斯楚米等大師的典型製做做品，結合這幾位大師 的製做理念後定義的一個流派名稱。所謂的解構主義製做原則也是從權威大師典型做品中概括總結的； 製做原則出現後繼而能夠對以後的製做起必定的指導做用。

所以本文不談所謂的web app製做原則，現從已經上線的優秀產品中選擇典型製做元素與你們討論分享，尋找能夠借鑑的地方，並藉此增進對web app產品製做的認識。

Web app界面製做的8個實用技巧

Web app用戶界面製做，核心是web製做；不過與通常意義上的web製做相比較，web app更加註重功能。爲了在與桌面應用程序的競爭中展示其優點，web app須要提供簡潔、直觀、快速響應的用戶界面，以便於用戶在任務操做中節省精力和時間。

1.界面元素隨需而變

力求簡潔明瞭是用戶界面製做的重要原則。在同一時間給用戶展現的功能越多，用戶須要尋找和思考的時間也就越多。一樣，界面中存在的選項越少，可用功能就越明顯、越容易瀏覽。不過簡化界面並不是垂手可得，尤爲是你不想減小應用程序功能的狀況下。

以Kontain搜索模塊爲例，在搜索框中有一個下拉菜單，幫助用戶細化搜索範圍。用戶能夠經過菜單選擇本身想要尋找的內容。該網站經過這些選項簡化了搜索框。

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

擅長如此處理的還有CollabFinder， 如上圖。用戶點擊搜索連接後並無被立刻帶到其餘頁面；搜索框控件下拉下來，容許用戶在當前頁面內直接進行搜索操做。這樣的製做方式，既保持了用戶視覺焦點的穩定，又使得整個頁面在不使用某個特定功能的狀況下簡潔清爽。

2.爲模態窗口增長邊緣陰影

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

這個技巧根植於傳統桌面程序，幫助用戶將注意力集中在彈出的窗口。因爲不少模態窗口不容易從桌面程序內容頁面中凸顯出來，陰影可使它們看起來具備立體效果、彷彿懸浮於其餘內容之上，因而拉近了模態窗口與用戶的距離。

如上圖，Digg的登陸窗口邊緣擁有厚厚的陰影，對下面內容的視覺噪音起到了有效的屏蔽做用。

爲 實現這樣的效果，製做師每每將透明的PNG背景圖片做爲容器，再把內容填充到容器中，同時等距離填充彈出框各邊緣。或者使用具備透明邊框的背景圖片，並將 內容框絕對定位在其中。另外，也可使用基於JavaScript的lightboxes命令或者CSS3中的 drop shadows命令，但須要注意瀏覽器是否支持。

3.空白狀態時告訴用戶能夠作什麼

當製做web app的時候，不只須要關心通常狀況下的信息展現，還要確保界面在空白狀態時表現良好、具備指引做用。頁面中尚未產生任何信息的時候，能夠在空白區域放 置一條幫助信息告訴用戶怎樣開始。例如，一個項目管理的應用程序主頁會列出用戶的項目，假如尚未什麼項目信息，能夠爲用戶提供一個項目建立頁面的連接。 即便這個頁面上已經存在了這樣一個功能按鈕，一個額外的幫助並不會有什麼妨礙。

如上圖，Campaign Monitor在右邊方向提供了一個創建新信息的快速入口。

Wufoo的表單頁面有醒目的、友好的信息鼓勵用戶去建立新的表單。

這個技巧能夠有效地鼓勵用戶試用該服務，並在註冊後當即進行使用。經過應用程序的單一操做步驟能夠幫助用戶理解這個應用的優點以及對他們是否有用。

此外，只爲用戶展現最重要的功能選項也很關鍵。一股腦的將衆多功能傾瀉給用戶並無什麼實際意義。須要牢記的是，用戶一般想從應用中得到或多或少的信息，但卻不想跳進細節中，用戶沒有時間也沒有興趣。

在空白狀態中激勵用戶，能夠顯著地下降用戶的流失率，並幫助潛在的用戶更好的理解程序系統是怎樣工做的。

4.Button狀態積極反饋

許 多web app擁有自定義樣式的按鈕。默認的輸入按鈕可能不適合某些情景，文字連接有時候看起來又太含蓄。須要注意的是，把連接作成Button樣式的時候，它們 就應該有button的表現形式。好比，在點擊button的時候它們應該會出現被「壓」過的樣子。這不只僅是純粹的視覺變化。及時反饋給用戶，可使 web app感受起來更靈敏，與桌面應用程序的用戶體驗更接近。

可使用CSS添加按鈕的「pressed」等狀態，實如今不一樣狀態下顯示不一樣背景圖片的功能。

例如Highrise中的按鈕，在鼠標指針點擊的時候會呈現 「pressed」狀態效果，爲用戶提供了靈敏的反饋感覺。

5.使用上下文情境導航

在既定的情境下考慮用戶但願看什麼、須要什麼是很是重要的。不須要在每個地方都放置相同的導航控件，由於用戶不是在任何狀況下都須要它們。

上下文情境導航最好的一個例子就是Office 2007中，原先默認的工具欄集合被換成了帶狀控件形式。每一項tab控制着一組相關聯的功能，如編輯圖形、校對或者簡單書寫。

Web app能夠從這種上下文情境導航中獲益，僅展現用戶須要的、而不是全部可用的功能，從而保持用戶界面的整潔清爽。

例如上圖中，Lighthouse 有很是典型的tab導航菜單；然而，在tab導航欄的下方它還有二級導航，在這個二級導航中只顯示網站活躍部分的相關條目。

6.更加劇視關鍵功能

並 不是全部的控件都擁有相同的重要性。例如建立一個新的條目，頁面中會有「建立」「取消」兩個button. 這裏的「建立」就要更加劇要些，由於這是大多數狀況下用戶即將要作的事情。極少的狀況下用戶纔會去點擊取消。雖然這兩個控件並排放置，可是不要給予相同的 重視程度。

爲了將注意力引導到「建立」上，咱們能夠嘗試使用不用的風格或樣式。一種方式是將「建立」製做成button樣式，「取消」製做成文字連接樣式。另外一種方式是在視覺上使用使用不一樣的顏色，並使button略有凸起的效果。這樣便於抓住用戶的目光。

例如在Google+建立新圈子的彈窗中，建立按鈕在視覺上具有了更加醒目的效果，擁有該頁面中更高的重視等級。

7.嵌入視頻

雖然圖片和文字是向用戶介紹應用程序功能的很好的方式，但若是資源容許的話，視頻將是一個更優方案。近年來視頻在網絡上的使用愈來愈頻繁。Web app的截屏視頻常常被使用在營銷網站中來展現產品的功能；然而這並非視頻使用的惟一方式。

GoodBarry 在其首頁中使用截屏視頻來展現產品。同時它還在應用中嵌入了視頻來指導用戶怎樣去開始。

MailChimp在管理面板中使用教程視頻以幫助新用戶。

一些web app使用內部嵌入的視頻幫助用戶瞭解產品的特定功能。視頻是快速演示產品怎樣使用的絕佳方法，由於與文字相比視頻更容易被用戶所接受，並且視頻可使用戶準確地看到須要作什麼，更加清晰。

8.讓升級或降級的提示簡潔、不擾民

在 不少互聯網產品中都會有不一樣權限的用戶帳戶存在，好比郵箱、空間、網盤存儲、SNS產品等。在用戶擁有了一個帳戶後，他們能夠對帳戶進行升級或降級。怎樣 製做界面來提示用戶他們能夠升級而不去幹擾用戶的工做流程呢？製做師確定不肯意在應用程序以外完成這件事情，這樣的提示應該是和app是無縫鏈接的，並且 最好是讓用戶感受方便。所以升級帳戶的提示最好放在app內完成。

經過幾個例子咱們瞭解一下升級帳戶的處理方式。

FreshBooks 的升級提示是一直存在的，被放置在了web app的底部。如上圖。因爲提示是在界面的工做區之外的位置，並不會對用戶的工做流程形成影響。

在Basecamp的升級提示中，用戶能夠很清晰地得知升級後將會有哪些變化。請看上圖。

在CompVersions中,各類升級後的變化狀況很直觀 ，整個頁面簡潔清晰。請見上圖。

總結

Web app的製做細節遠不止上文中提到的這些，本文只算做抱磚引玉，但願你們能夠在已有的優秀產品中發現更多思考的觸發點。當咱們習慣了蜻蜓點水地瀏覽其餘公 司產品的時候，咱們已經對太多的東西習覺得常；當咱們開始製做用戶界面，開始處理細節的時候，卻時常會有拿捏不許的感受。若是平時多總結一下其餘產品（不 必定拘泥於本身的產品圈子）的細節亮點，相信不少東西在實際工做中能夠爲我所用。