HTML5技術的強勢發(fā)展，為互聯(lián)網(wǎng)帶來的最大改變就是： web從“已死”的預言中回過頭來給Native app一記沉重的回馬槍，web app成為舉世矚目的明星開始走在各大公司研發(fā)的時刻表中。Google 、微軟、蘋果三大巨頭緊鑼密鼓地在web app的研發(fā)產(chǎn)品領域圈地設崗，并試圖建立以自己為中心的”云“服務平臺，企圖在web app時代到來的時候充當霸主。

本文將圍繞web app的設計，與大家討論幾點設計技巧。

什么是web app？

Web app是一種通過網(wǎng)絡（如互聯(lián)網(wǎng)或內聯(lián)網(wǎng)）訪問的應用程序；也可以指計算機軟件承載在瀏覽器支持環(huán)境下或使用瀏覽器支持語言（如JavaScript）并依賴于web 瀏覽器來渲染的應用程序。Web app的流行歸功于網(wǎng)頁瀏覽器的普及，以及使用這一輕薄客戶端方便的用戶體驗。不必下載安裝就可以實現(xiàn)更新和維護，具有支持跨平臺的內在屬性，是web app開始流行的關鍵原因。典型的web app產(chǎn)品包括web郵箱、web商店、wikis等等。

Web app的優(yōu)點

◆通過兼容性瀏覽器實現(xiàn)配置而不需要任何復雜的“轉出”步驟；

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

◆新功能從服務器自動傳遞給用戶，用戶自己不必升級程序；

◆可以輕松整合進入其他服務類web程序；

◆跨平臺的兼容性

現(xiàn)階段web app還很難有一個設計原則

HTML5技術仍在發(fā)展中且發(fā)展尚不完善， web app作為該技術的產(chǎn)物自然也是在不斷試驗中進步；此外，web app還要依賴兼容性瀏覽器更強大的渲染能力，俗話說“皮之不存毛將焉附”，在大家都期待的強大瀏覽器出現(xiàn)之前誰也難以預言web app需要做成什么樣才算是一個合格的產(chǎn)品。在這種行業(yè)背景下，web app還難以有一個所謂的設計原則，起碼現(xiàn)在還不構成總結一個合理設計原則的條件。

其實，所謂的設計原則本就是從已有的、典型的設計作品中倒推得出的。比如，解構主義設計風格的提出不是之前就有的，是理論家在分析總結了建筑設計師蓋里、埃森曼、特斯楚米等大師的典型設計作品，結合這幾位大師的設計理念后定義的一個流派名稱。所謂的解構主義設計原則也是從權威大師典型作品中歸納總結的； 設計原則出現(xiàn)后繼而可以對之后的設計起一定的指導作用。

因此本文不談所謂的web app設計原則，現(xiàn)從已經(jīng)上線的優(yōu)秀產(chǎn)品中選擇典型設計元素與大家討論分享，尋找可以借鑒的地方，并借此增進對web app產(chǎn)品設計的認識。

Web app界面設計的8個實用技巧

Web app用戶界面設計，核心是web設計；不過與一般意義上的web設計相比較，web app更加注重功能。為了在與桌面應用程序的競爭中展現(xiàn)其優(yōu)勢，web app需要提供簡潔、直觀、快速響應的用戶界面，以便于用戶在任務操作中節(jié)省精力和時間。

1.界面元素隨需而變

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

以Kontain搜索模塊為例，在搜索框中有一個下拉菜單，幫助用戶細化搜索范圍。用戶可以通過菜單選擇自己想要尋找的內容。該網(wǎng)站通過這些選項簡化了搜索框。

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

擅長如此處理的還有CollabFinder， 如上圖。用戶點擊搜索鏈接后并沒有被馬上帶到其他頁面；搜索框控件下拉下來，允許用戶在當前頁面內直接進行搜索操作。這樣的設計方式，既保持了用戶視覺焦點的穩(wěn)定，又使得整個頁面在不使用某個特定功能的情況下簡潔清爽。

2.為模態(tài)窗口增加邊緣陰影

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

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

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

為實現(xiàn)這樣的效果，設計師往往將透明的PNG背景圖片作為容器，再把內容填充到容器中，同時等距離填充彈出框各邊緣。或者使用具有透明邊框的背景圖片，并將內容框絕對定位在其中。另外，也可以使用基于JavaScript的lightboxes命令或者CSS3中的 drop shadows命令，但需要注意瀏覽器是否支持。

標簽： App設計 移動應用設計 交互設計 

版權申明：本站文章部分自網(wǎng)絡，如有侵權，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉載文章言論不代表本站觀點！
本站所提供的圖片等素材，版權歸原作者所有，如需使用，請與原作者聯(lián)系。