HTML5技術(shù)的強(qiáng)勢發(fā)展，為互聯(lián)網(wǎng)帶來的改變就是： web從“已死”的預(yù)言中回過頭來給Native app一記沉重的回馬槍，web app成為舉世矚目的明星開始走在各大公司研發(fā)的時(shí)刻表中。Google 、微軟、蘋果三大巨頭緊鑼密鼓地在web app的研發(fā)產(chǎn)品領(lǐng)域圈地設(shè)崗，并試圖建立以自己為中心的”云“服務(wù)平臺(tái)，企圖在web app時(shí)代到來的時(shí)候充當(dāng)霸主。
本文將圍繞web app的設(shè)計(jì)，與大家討論幾點(diǎn)設(shè)計(jì)技巧。
什么是web app？
Web app是一種通過網(wǎng)絡(luò)（如互聯(lián)網(wǎng)或內(nèi)聯(lián)網(wǎng)）訪問的應(yīng)用程序；也可以指計(jì)算機(jī)軟件承載在瀏覽器支持環(huán)境下或使用瀏覽器支持語言（如JavaScript）并依賴于web 瀏覽器來渲染的應(yīng)用程序。Web app的流行歸功于網(wǎng)頁瀏覽器的普及，以及使用這一輕薄客戶端方便的用戶體驗(yàn)。不必下載安裝就可以實(shí)現(xiàn)更新和維護(hù)，具有支持跨平臺(tái)的內(nèi)在屬性，是web app開始流行的關(guān)鍵原因。典型的web app產(chǎn)品包括web郵箱、web商店、wikis等等。
Web app的優(yōu)點(diǎn)
◆通過兼容性瀏覽器實(shí)現(xiàn)配置而不需要任何復(fù)雜的“轉(zhuǎn)出”步驟；
◆瀏覽器應(yīng)用程序幾乎不需要客戶端上的磁盤空間；
◆新功能從服務(wù)器自動(dòng)傳遞給用戶，用戶自己不必升級(jí)程序；
◆可以輕松整合進(jìn)入其他服務(wù)類web程序；
◆跨平臺(tái)的兼容性
現(xiàn)階段web app還很難有一個(gè)設(shè)計(jì)原則
HTML5技術(shù)仍在發(fā)展中且發(fā)展尚不完善， web app作為該技術(shù)的產(chǎn)物自然也是在不斷試驗(yàn)中進(jìn)步；此外，web app還要依賴兼容性瀏覽器更強(qiáng)大的渲染能力，俗話說“皮之不存毛將焉附”，在大家都期待的強(qiáng)大瀏覽器出現(xiàn)之前誰也難以預(yù)言web app需要做成什么樣才算是一個(gè)合格的產(chǎn)品。在這種行業(yè)背景下，web app還難以有一個(gè)所謂的設(shè)計(jì)原則，起碼現(xiàn)在還不構(gòu)成總結(jié)一個(gè)合理設(shè)計(jì)原則的條件。
其實(shí)，所謂的設(shè)計(jì)原則本就是從已有的、典型的設(shè)計(jì)作品中倒推得出的。比如，解構(gòu)主義設(shè)計(jì)風(fēng)格的提出不是之前就有的，是理論家在分析總結(jié)了建筑設(shè)計(jì)師蓋里、埃森曼、特斯楚米等大師的典型設(shè)計(jì)作品，結(jié)合這幾位大師的設(shè)計(jì)理念后定義的一個(gè)流派名稱。所謂的解構(gòu)主義設(shè)計(jì)原則也是從權(quán)威大師典型作品中歸納總結(jié)的； 設(shè)計(jì)原則出現(xiàn)后繼而可以對之后的設(shè)計(jì)起一定的指導(dǎo)作用。
因此本文不談所謂的web app設(shè)計(jì)原則，現(xiàn)從已經(jīng)上線的優(yōu)秀產(chǎn)品中選擇典型設(shè)計(jì)元素與大家討論分享，尋找可以借鑒的地方，并借此增進(jìn)對web app產(chǎn)品設(shè)計(jì)的認(rèn)識(shí)。
Web app界面設(shè)計(jì)的8個(gè)實(shí)用技巧
Web app用戶界面設(shè)計(jì)，核心是web設(shè)計(jì)；不過與一般意義上的web設(shè)計(jì)相比較，web app更加注重功能。為了在與桌面應(yīng)用程序的競爭中展現(xiàn)其優(yōu)勢，web app需要提供簡潔、直觀、快速響應(yīng)的用戶界面，以便于用戶在任務(wù)操作中節(jié)省精力和時(shí)間。
1.界面元素隨需而變
力求簡潔明了是用戶界面設(shè)計(jì)的重要原則。在同一時(shí)間給用戶展示的功能越多，用戶需要尋找和思考的時(shí)間也就越多。同樣，界面中存在的選項(xiàng)越少，可用功能就越明顯、越容易瀏覽。不過簡化界面并非輕而易舉，尤其是你不想減少應(yīng)用程序功能的情況下。
以Kontain搜索模塊為例，在搜索框中有一個(gè)下拉菜單，幫助用戶細(xì)化搜索范圍。用戶可以通過菜單選擇自己想要尋找的內(nèi)容。該網(wǎng)站通過這些選項(xiàng)簡化了搜索框。
將高級(jí)功能隱藏起來是一種有效的簡化方法。搞清楚在界面中用戶最經(jīng)常用的是哪些功能，然后把其他功能隱藏處理。這些可由下拉式菜單和控件完成。例如，搜索欄中的高級(jí)過濾器可以做成尾部的特殊下拉菜單樣式。當(dāng)用戶需要這些過濾器的時(shí)候只需要幾次點(diǎn)擊就可以使用。決定哪些功能保留展示哪些需要隱藏起來，并不是一個(gè)簡單的工作，需要取決于功能控件的重要程度和被使用的頻繁程度。
擅長如此處理的還有CollabFinder， 如上圖。用戶點(diǎn)擊搜索鏈接后并沒有被馬上帶到其他頁面；搜索框控件下拉下來，允許用戶在當(dāng)前頁面內(nèi)直接進(jìn)行搜索操作。這樣的設(shè)計(jì)方式，既保持了用戶視覺焦點(diǎn)的穩(wěn)定，又使得整個(gè)頁面在不使用某個(gè)特定功能的情況下簡潔清爽。
2.為模態(tài)窗口增加邊緣陰影
彈出式菜單和窗口周邊的陰影不僅僅是為了視覺美觀。陰影一方面增大了菜單或窗口的尺寸，有助于將菜單或窗口從背景中區(qū)別開來；另一方面通過灰度化的邊緣陰影可以屏蔽背景內(nèi)容的噪音干擾。
這個(gè)技巧根植于傳統(tǒng)桌面程序，幫助用戶將注意力集中在彈出的窗口。由于很多模態(tài)窗口不容易從桌面程序內(nèi)容頁面中凸顯出來，陰影可以使它們看起來具有立體效果、仿佛懸浮于其他內(nèi)容之上，于是拉近了模態(tài)窗口與用戶的距離。
如上圖，Digg的登錄窗口邊緣擁有厚厚的陰影，對下面內(nèi)容的視覺噪音起到了有效的屏蔽作用。
為實(shí)現(xiàn)這樣的效果，設(shè)計(jì)師往往將透明的PNG背景圖片作為容器，再把內(nèi)容填充到容器中，同時(shí)等距離填充彈出框各邊緣?；蛘呤褂镁哂型该鬟吙虻谋尘皥D片，并將內(nèi)容框絕對定位在其中。另外，也可以使用基于JavaScript的lightboxes命令或者CSS3中的 drop shadows命令，但需要注意瀏覽器是否支持。
重慶分公司
重慶分公司
