1.界面元素隨需而變
力求簡(jiǎn)潔明了是用戶界面設(shè)計(jì)的重要原則。在同一時(shí)間給用戶展示的功能越多，用戶需要尋找和思考的時(shí)間也就越多。同樣，界面中存在的選項(xiàng)越少，可用功能就越明顯、越容易瀏覽。不過簡(jiǎn)化界面并非輕而易舉，尤其是你不想減少應(yīng)用程序功能的情況下。
2.為模態(tài)窗口增加邊緣陰影
彈出式菜單和窗口周邊的陰影不僅僅是為了視覺美觀。陰影一方面增大了菜單或窗口的尺寸，有助于將菜單或窗口從背景中區(qū)別開來(lái);另一方面通過灰度化的邊緣陰影可以屏蔽背景內(nèi)容的噪音干擾。
這個(gè)技巧根植于傳統(tǒng)桌面程序，幫助用戶將注意力集中在彈出的窗口。由于很多模態(tài)窗口不容易從桌面程序內(nèi)容頁(yè)面中凸顯出來(lái)，陰影可以使它們看起來(lái)具有立體效果、仿佛懸浮于其他內(nèi)容之上，于是拉近了模態(tài)窗口與用戶的距離。
3.空白狀態(tài)時(shí)告訴用戶可以做什么
當(dāng)設(shè)計(jì)web app的時(shí)候，不僅需要關(guān)心一般情況下的信息展示，還要確保界面在空白狀態(tài)時(shí)表現(xiàn)良好、具有指引作用。頁(yè)面中還沒有產(chǎn)生任何信息的時(shí)候，可以在空白區(qū)域放置一條幫助信息告訴用戶如何開始。例如，一個(gè)項(xiàng)目管理的應(yīng)用程序主頁(yè)會(huì)列出用戶的項(xiàng)目，假如還沒有什么項(xiàng)目信息，可以為用戶提供一個(gè)項(xiàng)目創(chuàng)建頁(yè)面的鏈接。即使這個(gè)頁(yè)面上已經(jīng)存在了這樣一個(gè)功能按鈕，一個(gè)額外的幫助并不會(huì)有什么妨礙。
Wufoo的表單頁(yè)面有醒目的、友好的信息鼓勵(lì)用戶去創(chuàng)建新的表單。這個(gè)技巧可以有效地鼓勵(lì)用戶試用該服務(wù)，并在注冊(cè)后立即進(jìn)行使用。通過應(yīng)用程序的單一操作步驟可以幫助用戶理解這個(gè)應(yīng)用的優(yōu)勢(shì)以及對(duì)他們是否有用。
此外，只為用戶展示最重要的功能選項(xiàng)也很關(guān)鍵。一股腦的將眾多功能傾瀉給用戶并沒有什么實(shí)際意義。需要牢記的是，用戶通常想從應(yīng)用中獲得或多或少的信息，但卻不想跳進(jìn)細(xì)節(jié)中，用戶沒有時(shí)間也沒有興趣。在空白狀態(tài)中激勵(lì)用戶，可以顯著地降低用戶的流失率，并幫助潛在的用戶更好的理解程序系統(tǒng)是如何工作的。
4.Button狀態(tài)積極反饋
許多web app擁有自定義樣式的按鈕。默認(rèn)的輸入按鈕可能不適合某些情景，文字鏈接有時(shí)候看起來(lái)又太含蓄。需要注意的是，把鏈接做成Button樣式的時(shí)候，它們就應(yīng)該有button的表現(xiàn)形式。比如，在點(diǎn)擊button的時(shí)候它們應(yīng)該會(huì)出現(xiàn)被“壓”過的樣子。這不僅僅是純粹的視覺變化。及時(shí)反饋給用戶，可以使web app感覺起來(lái)更靈敏，與桌面應(yīng)用程序的用戶體驗(yàn)更接近。
可以使用CSS添加按鈕的“pressed”等狀態(tài)，實(shí)現(xiàn)在不同狀態(tài)下顯示不同背景圖片的功能。
5.使用上下文情境導(dǎo)航
在既定的情境下考慮用戶希望看什么、需要什么是非常重要的。不需要在每一個(gè)地方都放置相同的導(dǎo)航控件，因?yàn)橛脩舨皇窃谌魏吻闆r下都需要它們。
上下文情境導(dǎo)航最好的一個(gè)例子就是Office 2007中，原先默認(rèn)的工具欄集合被換成了帶狀控件形式。每一項(xiàng)tab控制著一組相關(guān)聯(lián)的功能，如編輯圖形、校對(duì)或者簡(jiǎn)單書寫。
6.更加重視關(guān)鍵功能
并不是所有的控件都擁有相同的重要性。例如創(chuàng)建一個(gè)新的條目，頁(yè)面中會(huì)有“創(chuàng)建”“取消”兩個(gè)button. 這里的“創(chuàng)建”就要更加重要些，因?yàn)檫@是大多數(shù)情況下用戶即將要做的事情。極少的情況下用戶才會(huì)去點(diǎn)擊取消。雖然這兩個(gè)控件并排放置，但是不要給予相同的重視程度。
為了將注意力引導(dǎo)到“創(chuàng)建”上，我們可以嘗試使用不用的風(fēng)格或樣式。一種方式是將“創(chuàng)建”設(shè)計(jì)成button樣式，“取消”設(shè)計(jì)成文字鏈接樣式。另一種方式是在視覺上使用使用不同的顏色，并使button略有凸起的效果。這樣便于抓住用戶的目光。
7.嵌入視頻
雖然圖片和文字是向用戶介紹應(yīng)用程序功能的很好的方式，但如果資源允許的話，視頻將是一個(gè)更優(yōu)方案。近年來(lái)視頻在網(wǎng)絡(luò)上的使用越來(lái)越頻繁。Web app的截屏視頻經(jīng)常被使用在營(yíng)銷網(wǎng)站中來(lái)展示產(chǎ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ú)縫連接的，而且最好是讓用戶感覺方便。因此升級(jí)賬戶的提示最好放在app內(nèi)完成。
總結(jié)
Web app的設(shè)計(jì)細(xì)節(jié)遠(yuǎn)不止上文中提到的這些，本文只算作抱磚引玉，希望大家可以在已有的優(yōu)秀產(chǎn)品中發(fā)現(xiàn)更多思考的觸發(fā)點(diǎn)。當(dāng)我們習(xí)慣了走馬觀花地瀏覽其他公司產(chǎn)品的時(shí)候，我們已經(jīng)對(duì)太多的東西習(xí)以為常;當(dāng)我們開始設(shè)計(jì)用戶界面，開始處理細(xì)節(jié)的時(shí)候，卻時(shí)常會(huì)有拿捏不準(zhǔn)的感覺。如果平時(shí)多總結(jié)一下其他產(chǎn)品(不一定拘泥于自己的產(chǎn)品圈子)的細(xì)節(jié)亮點(diǎn)，相信很多東西在實(shí)際工作中可以為我所用。
