1、Web app界面設(shè)計(jì)的8個(gè)實(shí)用技巧HTML5技術(shù)的強(qiáng)勢(shì)發(fā)展，為互聯(lián)網(wǎng)帶來(lái)的最大改變就是：web從“已死”的預(yù)言中回過(guò)頭來(lái)給Native app 一記沉重的回馬槍，web即p成為舉世矚目的明星開(kāi)始走 在各大公司研發(fā)的時(shí)刻表中。Google 、微軟、蘋(píng)果三大巨頭緊鑼密鼓地在 web app 的研發(fā)產(chǎn)品領(lǐng)域圈地設(shè)崗，并試圖建立以自己為中心的”云“服務(wù)平臺(tái)，企圖在web app 時(shí)代到來(lái)的時(shí)候充當(dāng)霸主。本文將圍繞web app的設(shè)計(jì)，與大家討論幾點(diǎn)設(shè)計(jì)技巧。什么是web app?Web app是一種通過(guò)網(wǎng)絡(luò)（如互聯(lián)網(wǎng)或內(nèi)聯(lián)網(wǎng)）訪問(wèn)的應(yīng)用程序；也可以指計(jì)算機(jī)軟 件承載在瀏覽器支持環(huán)境下或使用瀏覽器支持

2、語(yǔ)言（如JavaScript）并依賴于web瀏覽器來(lái)渲染的應(yīng)用程序。Web app的流行歸功于網(wǎng)頁(yè)瀏覽器的普及，以及使用這一輕薄 客戶端方便的用戶體驗(yàn)。不必下載安裝就可以實(shí)現(xiàn)更新和維護(hù)，具有支持跨平臺(tái)的內(nèi)在 屬性，是web即p開(kāi)始流行的關(guān)鍵原因。典型的 web app產(chǎn)品包括web郵箱、web 商店、wikis 等等。Web即p的優(yōu)點(diǎn)通過(guò)兼容性瀏覽器實(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ù)仍在

3、發(fā)展中且發(fā)展尚不完善，web app作為該技術(shù)的產(chǎn)物自然也是在不斷試驗(yàn)中進(jìn)步；此外，web app還要依賴兼容性瀏覽器更強(qiáng)大的渲染能力，俗話說(shuō)“皮之不存毛將焉附”，在大家都期待的強(qiáng)大瀏覽器出現(xiàn)之前誰(shuí)也難以預(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è)流派 名稱。

4、所謂的解構(gòu)主義設(shè)計(jì)原則也是從權(quán)威大師典型作品中歸納總結(jié)的；設(shè)計(jì)原則出現(xiàn)后繼而可以對(duì)之后的設(shè)計(jì)起一定的指導(dǎo)作用。因此本文不談所謂的web app設(shè)計(jì)原則，現(xiàn)從已經(jīng)上線的優(yōu)秀產(chǎn)品中選擇典型設(shè) 計(jì)元素與大家討論分享，尋找可以借鑒的地方，并借此增進(jìn)對(duì)web app產(chǎn)品設(shè)計(jì)的認(rèn)識(shí)。Web app界面設(shè)計(jì)的8個(gè)實(shí)用技巧Web app用戶界面設(shè)計(jì)，核心是web設(shè)計(jì);不過(guò)與一般意義上的web設(shè)計(jì)相比較， web app更加注重功能。為了在與桌面應(yīng)用程序的競(jìng)爭(zhēng)中展現(xiàn)其優(yōu)勢(shì)，web app需要提供簡(jiǎn)潔、直觀、快速響應(yīng)的用戶界面，以便于用戶在任務(wù)操作中節(jié)省精力和時(shí)間。1. 界面元素隨需而變力求簡(jiǎn)潔明了是用戶界面設(shè)計(jì)

5、的重要原則。在同一時(shí)間給用戶展示的功能越多，用 戶需要尋找和思考的時(shí)間也就越多。同樣，界面中存在的選項(xiàng)越少，可用功能就越明顯、 越容易瀏覽。不過(guò)簡(jiǎn)化界面并非輕而易舉，尤其是你不想減少應(yīng)用程序功能的情況下。以Kontain搜索模塊為例，在搜索框中有一個(gè)下拉菜單，幫助用戶細(xì)化搜索范圍 用戶可以通過(guò)菜單選擇自己想要尋找的內(nèi)容。該網(wǎng)站通過(guò)這些選項(xiàng)簡(jiǎn)化了搜索框。將高級(jí)功能隱藏起來(lái)是一種有效的簡(jiǎn)化方法。搞清楚在界面中用戶最經(jīng)常用的是哪些功能，然后把其他功能隱藏處理。這些可由下拉式菜單和控件完成。例女口，搜索欄中的高級(jí)過(guò)濾器可以做成尾部的特殊下拉菜單樣式。當(dāng)用戶需要這些過(guò)濾器的時(shí)候只需要幾次點(diǎn)擊就可以使用。

6、決定哪些功能保留展示哪些需要隱藏起來(lái)，并不是一個(gè)簡(jiǎn)單的工作，需要取決于功能控件的重要程度和被使用的頻繁程度。擅長(zhǎng)如此處理的還有CollabFinder ，如上圖。用戶點(diǎn)擊搜索鏈接后并沒(méi)有被馬上 帶到其他頁(yè)面；搜索框控件下拉下來(lái)，允許用戶在當(dāng)前頁(yè)面內(nèi)直接進(jìn)行搜索操作。 這樣的 設(shè)計(jì)方式，既保持了用戶視覺(jué)焦點(diǎn)的穩(wěn)定，又使得整個(gè)頁(yè)面在不使用某個(gè)特定功能的情 況下簡(jiǎn)潔清爽。2. 為模態(tài)窗口增加邊緣陰影彈出式菜單和窗口周邊的陰影不僅僅是為了視覺(jué)美觀。 陰影一方面增大了菜單或窗 口的尺寸，有助于將菜單或窗口從背景中區(qū)別開(kāi)來(lái)；另一方面通過(guò)灰度化的邊緣陰影可以 屏蔽背景內(nèi)容的噪音干擾。這個(gè)技巧根植于傳統(tǒng)桌面程

7、序，幫助用戶將注意力集中在彈出的窗口。由于很多模 態(tài)窗口不容易從桌面程序內(nèi)容頁(yè)面中凸顯出來(lái)，陰影可以使它們看起來(lái)具有立體效果、 仿佛懸浮于其他內(nèi)容之上，于是拉近了模態(tài)窗口與用戶的距離。如上圖，Digg的登錄窗口邊緣擁有厚厚的陰影，對(duì)下面內(nèi)容的視覺(jué)噪音起到了有 效的屏蔽作用。為實(shí)現(xiàn)這樣的效果，設(shè)計(jì)師往往將透明的 PNG背景圖片作為容器，再把內(nèi)容填充 到容器中，同時(shí)等距離填充彈出框各邊緣。或者使用具有透明邊框的背景圖片，并將 內(nèi)容框絕對(duì)定位在其中。另外，也可以使用基于JavaScript的lightboxes命令或者CSS3 中的drop shadows 命令，但需要注意瀏覽器是否支持。3. 空白

8、狀態(tài)時(shí)告訴用戶可以做什么當(dāng)設(shè)計(jì)web app的時(shí)候，不僅需要關(guān)心一般情況下的信息展示，還要確保界面在 空白狀態(tài)時(shí)表現(xiàn)良好、具有指引作用。頁(yè)面中還沒(méi)有產(chǎn)生任何信息的時(shí)候，可以在空白 區(qū)域放 置一條幫助信息告訴用戶如何開(kāi)始。例如，一個(gè)項(xiàng)目管理的應(yīng)用程序主頁(yè)會(huì)列 出用戶的項(xiàng)目，假如還沒(méi)有什么項(xiàng)目信息，可以為用戶提供一個(gè)項(xiàng)目創(chuàng)建頁(yè)面的鏈接。 即使這個(gè)頁(yè)面上已經(jīng)存在了這樣一個(gè)功能按鈕，一個(gè)額外的幫助并不會(huì)有什么妨礙。如上圖，Campaign Monitor在右邊方向提供了一個(gè)建立新信息的快速入口。Wufoo的表單頁(yè)面有醒目的、友好的信息鼓勵(lì)用戶去創(chuàng)建新的表單。這個(gè)技巧可以有效地鼓勵(lì)用戶試用該服務(wù)，并在注

9、冊(cè)后立即進(jìn)行使用。通過(guò)應(yīng)用程 序的單一操作步驟可以幫助用戶理解這個(gè)應(yīng)用的優(yōu)勢(shì)以及對(duì)他們是否有用。此外，只為用戶展示最重要的功能選項(xiàng)也很關(guān)鍵。一股腦的將眾多功能傾瀉給用戶 并沒(méi)有什么實(shí)際意義。需要牢記的是，用戶通常想從應(yīng)用中獲得或多或少的信息，但卻 不想跳進(jìn)細(xì)節(jié)中，用戶沒(méi)有時(shí)間也沒(méi)有興趣。在空白狀態(tài)中激勵(lì)用戶，可以顯著地降低用戶的流失率，并幫助潛在的用戶更好的 理解程序系統(tǒng)是如何工作的。4. Button狀態(tài)積極反饋許多web app擁有自定義樣式的按鈕。默認(rèn)的輸入按鈕可能不適合某些情景，文 字鏈接有時(shí)候看起來(lái)又太含蓄。需要注意的是，把鏈接做成Butt on樣式的時(shí)候，它們 就 應(yīng)該有butt

10、on的表現(xiàn)形式。比如，在點(diǎn)擊 butt on的時(shí)候它們應(yīng)該會(huì)出現(xiàn)被“壓”過(guò) 的樣子。這不僅僅是純粹的視覺(jué)變化。及時(shí)反饋給用戶，可以使web app感覺(jué)起來(lái)更靈敏，與桌面應(yīng)用程序的用戶體驗(yàn)更接近可以使用CSS添加按鈕的“ pressed ”等狀態(tài)，實(shí)現(xiàn)在不同狀態(tài)下顯示不同背景圖 片的功能。例如Highrise中的按鈕，在鼠標(biāo)指針點(diǎn)擊的時(shí)候會(huì)呈現(xiàn)“pressed ”狀態(tài)效果，為用戶提供了靈敏的反饋感受。5. 使用上下文情境導(dǎo)航在既定的情境下考慮用戶希望看什么、需要什么是非常重要的。不需要在每一個(gè)地 方都放置相同的導(dǎo)航控件，因?yàn)橛脩舨皇窃谌魏吻闆r下都需要它們。上下文情境導(dǎo)航最好的一個(gè)例子就是 Off

11、ice 2007中，原先默認(rèn)的工具欄集合被換 成了帶狀控件形式。每一項(xiàng)tab控制著一組相關(guān)聯(lián)的功能，如編輯圖形、校對(duì)或者簡(jiǎn)單 書(shū)寫(xiě)。Web app可以從這種上下文情境導(dǎo)航中獲益，僅展示用戶需要的、而不是所有可 用的功能，從而保持用戶界面的整潔清爽。例如上圖中，Lighthouse 有非常典型的tab導(dǎo)航菜單 然而，在tab導(dǎo)航欄的下方 它還有二級(jí)導(dǎo)航，在這個(gè)二級(jí)導(dǎo)航中只顯示網(wǎng)站活躍部分的相關(guān)條目。6. 更加重視關(guān)鍵功能并不是所有的控件都擁有相同的重要性。例如創(chuàng)建一個(gè)新的條目，頁(yè)面中會(huì)有“創(chuàng) 建” “取消”兩個(gè)butt on.這里的“創(chuàng)建”就要更加重要些，因?yàn)檫@是大多數(shù)情況下用 戶即將要做的事情

12、。極少的情況下用戶才會(huì)去點(diǎn)擊取消。雖然這兩個(gè)控件并排放置，但 是不要給予相同的 重視程度。為了將注意力引導(dǎo)到“創(chuàng)建”上，我們可以嘗試使用不用的風(fēng)格或樣式。一種方式 是將“創(chuàng)建”設(shè)計(jì)成butt on樣式，“取消”設(shè)計(jì)成文字鏈接樣式。另一種方式是在視覺(jué)上使用使用不同的顏色，并使 button略有凸起的效果。這樣便于抓住用戶的目光例如在Google+創(chuàng)建新圈子的彈窗中，創(chuàng)建按鈕在視覺(jué)上具備了更加醒目的效果， 擁有該頁(yè)面中更高的重視等級(jí)。7. 嵌入視頻雖然圖片和文字是向用戶介紹應(yīng)用程序功能的很好的方式，但如果資源允許的話，視頻將是一個(gè)更優(yōu)方案。近年來(lái)視頻在網(wǎng)絡(luò)上的使用越來(lái)越頻繁。Web app的截屏視

13、頻經(jīng)常被使用在營(yíng)銷網(wǎng)站中來(lái)展示產(chǎn)品的功能；然而這并不是視頻使用的唯一方式。GoodBarry 在其首頁(yè)中使用截屏視頻來(lái)展示產(chǎn)品。同時(shí)它還在應(yīng)用中嵌入了視頻 來(lái)指導(dǎo)用戶如何去開(kāi)始。MailChimp在管理面板中使用教程視頻以幫助新用戶。一些web app使用內(nèi)部嵌入的視頻幫助用戶了解產(chǎn)品的特定功能。視頻是快速演 示產(chǎn)品如何使用的絕佳方法，因?yàn)榕c文字相比視頻更容易被用戶所接受，而且視頻可以 使用戶準(zhǔn)確地看到需要做什么，更加清晰。8. 讓升級(jí)或降級(jí)的提示簡(jiǎn)潔、不擾民在很多互聯(lián)網(wǎng)產(chǎn)品中都會(huì)有不同權(quán)限的用戶賬戶存在，比如郵箱、空間、網(wǎng)盤存儲(chǔ)、SNS產(chǎn)品等。在用戶擁有了一個(gè)賬戶后，他們可以對(duì)賬戶進(jìn)行升級(jí)或降級(jí)。如何設(shè)計(jì)界面來(lái)提示用戶他們可以升級(jí)而不去干擾用戶的工作流程呢 ？設(shè)計(jì)師肯定不愿意在應(yīng)用 程序之外完成這件事情，這樣的提示應(yīng)該是和 app是無(wú)縫連接 的，而且最好是讓用戶 感覺(jué)方便。因此升級(jí)賬戶的提示最好放在 app內(nèi)完成。通過(guò)幾個(gè)例子我們了解一下升級(jí)賬戶的處理方式。FreshBooks的升級(jí)提示是一直存在的，被放置在了 web app的底部。如上圖。由于提示是在界面的工作區(qū)以外的位置，并不會(huì)對(duì)用戶的工作流程造成影響。在Basecamp的升級(jí)提示中，用戶可以很清晰地得知升級(jí)后將會(huì)有哪些變化。請(qǐng)看上圖。在CompVersions中，