閱讀本文英文版 （英文編輯：SmashingMagazine；翻譯、校對(duì)：Lucas-Li）

近年來，越來越多的桌面應(yīng)用程序移植到互聯(lián)網(wǎng)上面的。沒有了平臺(tái)限制和安裝要求且作為一種服務(wù)模式的軟件看起來很吸引人的。網(wǎng)絡(luò)應(yīng)用程序界面設(shè)計(jì)的核心是網(wǎng)頁設(shè)計(jì)；但是，它的焦點(diǎn)主要集中在功能上面。為了和桌面程序競(jìng)爭(zhēng)，網(wǎng)絡(luò)應(yīng)用程序必須提供簡(jiǎn)單

，直觀的以及響應(yīng)快速的用戶界面，這樣才能減少用戶完成事情 的時(shí)間和精力。

過去我們沒有用應(yīng)有的方法來關(guān)注網(wǎng)絡(luò)應(yīng)用程序，現(xiàn)在該是仔細(xì)地研究一些有用的技術(shù)和設(shè)計(jì)方案，以便使網(wǎng)絡(luò)應(yīng)用程序更加友好和漂亮的。這篇文章闡述了第一部 分我們?cè)诂F(xiàn)代網(wǎng)絡(luò)應(yīng)用程序上面關(guān)于設(shè)計(jì)模式和有用的設(shè)計(jì)方案的廣泛研究。下面你將看到我們收集到的10個(gè)有用的界面設(shè)計(jì)技術(shù)以及成功地將其應(yīng)用到許多網(wǎng)絡(luò) 應(yīng)用程序上。

請(qǐng)隨時(shí)在評(píng)論中發(fā)表你的意見，方法以及代碼解決方案。我們研究的第二部分將隨即奉上：敬請(qǐng)期待。

1.需要的界面元素

在用戶界面設(shè)計(jì)中簡(jiǎn)潔是重要的。任何時(shí)候你在界面上所展示的控件越多，那么你的用戶將要花更多的時(shí)間去了解怎么用你的界面。當(dāng)有更少的選擇時(shí)，可用的功能 將變地更加明顯和更易獲取。然而簡(jiǎn)化一個(gè)界面是不容易，特別是如果你不想限制應(yīng)用程序的功能。

當(dāng)你在Kontain’s搜索輸入框中點(diǎn)擊搜索鏈接時(shí)，一個(gè)類似的下拉框出現(xiàn)了。因此，如果你需要控制搜索控件所占的 界面空間，你可以使用下拉菜單來選擇你所要尋找的內(nèi)容類別。收起這些選擇就可以簡(jiǎn)化搜索框。

使設(shè)計(jì)更加簡(jiǎn)化的方法之一是隱藏高級(jí)的功能控件。把最常使用的功能放置在你的界面上，其余的便可隱藏起來。你可以采取在桌面軟件上非常常見的彈出框菜單和 控件來達(dá)到這種效果。例如，你的搜索輸入框有高級(jí)的過濾控件，那么可以在輸入框尾部以特殊的下拉菜單方式將其隱藏。如果用戶需要這些過濾控件，那么只需要 一些點(diǎn)擊便可使用。雖然決定哪些保留哪些隱藏可不是件簡(jiǎn)單的任務(wù)，但是可以根據(jù)每個(gè)控件的重要性和使用頻率來進(jìn)行判斷。

當(dāng)你在CollabFinder上點(diǎn)擊搜索鏈接時(shí)，頁面不會(huì)切換到新的頁面。相反地，搜索框控件在當(dāng)前頁面下拉展開，直接開始你的搜索。

2.特殊化的控件

對(duì)于在不同的情況下，選擇正確的界面控件是非常重要的。不同的情況應(yīng)該采取不同的方法進(jìn)行處理，在設(shè)計(jì)界面任務(wù)時(shí)，采取特定的控件會(huì)顯得更好。

Backpack為選擇提醒日期提供了一個(gè)簡(jiǎn)潔的日歷控件。
例如，你能通過使用下拉列表來選擇某一天的具體的年月日日期。但是，和上圖所示的特殊日歷控件（Calendar pickers）相比，下拉框顯得不是非常有效的，你不能直接點(diǎn)擊所想要日期。相比于簡(jiǎn)單的下拉列表控件，Calendar pickers 也能幫助你更容易地看到天，周，月（特別是工作日和周末）以及允許你更加快速地做出一個(gè)通知決定。

MyBankTracker’s的滑動(dòng)控件APY具有計(jì)算器功能， 它能快速核算出不同項(xiàng)目的收益情況。

這方面另外一個(gè)好的案例是滑動(dòng)控件。是的，你可以一直手動(dòng)輸入一些數(shù)字， 但是對(duì)于一些特殊情況，滑動(dòng)控件可以做的更好。你不但很容易的使用，只需點(diǎn)擊和拖動(dòng)，而且你可以了解到你的選擇在最小值和最大值的有效范圍內(nèi)是否合適。

3.不可點(diǎn)擊的按鈕

網(wǎng)絡(luò)應(yīng)用程序在由表單所引發(fā)的問題之一是提交流程。對(duì)于非常簡(jiǎn)單的表單，如果你非?？焖俚狞c(diǎn)擊“提交”按鈕兩次或是更多次，表單將同樣被提交兩次或是多 次。這顯然是有問題的，因?yàn)檫@將產(chǎn)生許多重復(fù)的提交副本。阻止副本的提交并不是很難的，對(duì)于大部分的網(wǎng)絡(luò)應(yīng)用程序來說，這是理所應(yīng)當(dāng)?shù)摹?br /> 對(duì)于這個(gè)安全措施應(yīng)從兩個(gè)端口來進(jìn)行驗(yàn)證設(shè)置：客戶端和服務(wù)器端的。我們?cè)谶@里將不會(huì)利用服務(wù)端器的安全措施，因?yàn)檫@個(gè)是基于你所使用的程序語言以及后臺(tái) 架構(gòu)。你真正應(yīng)該做地是在客戶端進(jìn)行一次驗(yàn)證，這保證了在表單提交階段，任何正在提交的內(nèi)容都不是副本，如果出現(xiàn)是副本的情況，將會(huì)阻止它。

在Yammer里，當(dāng)你的新信息正在提交地時(shí)候，“上傳”按鈕將不可用。
客戶端的設(shè)置將更加簡(jiǎn)化。你所需要做地事情是在“提交”按鈕被點(diǎn)擊的瞬間使該按鈕不可用。最容易的方法是對(duì)“提交”按鈕控件所屬的代碼行增加一段 JavaScrip，其代碼如下：

當(dāng)然，我們也會(huì)建議你在服務(wù)器端進(jìn)行驗(yàn)證，以確保副本不會(huì)被提交。

4.陰影邊角的模態(tài)對(duì)話框窗口

彈出框菜單和窗口周圍的微量陰影并非華而不實(shí)的。它們通過加強(qiáng)周邊尺寸來使菜單和窗口從背景當(dāng)中凸顯出來。它們利用陰影來暗化窗口周圍的區(qū)域以達(dá)到降低窗 口下面內(nèi)容所引起的噪音。
在傳統(tǒng)的桌面應(yīng)用程序中，這一技術(shù)覆蓋了底部的內(nèi)容以幫助用戶能集中注意力于出現(xiàn)的窗口。由于大部分的模態(tài)窗口不容易從主內(nèi)容界面凸顯出來，因此，陰影使 它們離讀者更為接近，因?yàn)榇翱诳雌饋硐袷侨S的放置在主界面之上。

Digg’s的登錄窗口的四邊有比較寬厚的陰影 區(qū)域來降低頁面底部的信息噪音。
為了達(dá)到這種效果，設(shè)計(jì)師經(jīng)常設(shè)計(jì)出一個(gè)擁有透明度的PNG圖像并作為背景的容器，在這容器里面放置內(nèi)容-容器四邊擁有等距離的內(nèi)邊距。另一個(gè)選擇是使用 一個(gè)帶有透明邊框的背景圖像以及把內(nèi)容放置在運(yùn)用了絕對(duì)定位的盒子模型里面。這就是Digg所做的-這是他們所使用的圖像（dialog.png）。這是 他們所使用的標(biāo)記語言和CSS樣式：
（X）HTML:

…

CSS:

.dialog {
    position: absolute;
    left: 50%;
    margin-left: -315px;
    width: 630px;
    z-index: 100001;

}
.dialog .body {
    background: url(/img/dialog.png) 0 0; /* semi-transparent .png image */
    padding: 40px 13px 10px 40px;
}

另外，你也能用基于JavaScript的輕盒子或是使用CSS3-屬性的微量陰影我們?cè)缜耙呀?jīng)介紹過的，但是你需要注意的是IE瀏覽器不支持這些的。

Basecamp’s 的項(xiàng)目切換窗口四周的弱陰影使菜單區(qū)域凸顯出來。

5.提示語告訴你該做什么

當(dāng)你在設(shè)計(jì)一個(gè)網(wǎng)絡(luò)應(yīng)用程序的時(shí)候，不僅用樣本數(shù)據(jù)進(jìn)行測(cè)試是重要的，而且確保在沒有數(shù)據(jù)地時(shí)候看起來也是好的和有用的顯得同樣重要。你應(yīng)該設(shè)計(jì)提示語。
當(dāng)一個(gè)頁面沒有信息時(shí)或是有疑問時(shí)，在界面上空的地方放置一句有幫助的信息提示來告訴用戶怎么開始將是有益的。例如，一個(gè)項(xiàng)目管理應(yīng)用程序的首頁可能會(huì)列 出用戶的項(xiàng)目，但是如果沒有項(xiàng)目呢!你應(yīng)該提供一個(gè)創(chuàng)建項(xiàng)目頁面的鏈接，額外的幫助是有益的。

當(dāng)你開始構(gòu)建一個(gè)郵件活動(dòng)地時(shí)候，Campaign Monitor為你指引了正確的方向。

這項(xiàng)技術(shù)鼓勵(lì)用戶實(shí)際地使用所提供的服務(wù)以及在注冊(cè)后直接著手使用服務(wù)。通過應(yīng)用程序的簡(jiǎn)單步驟來引導(dǎo)用戶可以幫助他或是她理解應(yīng)用程序所提供的優(yōu)點(diǎn)是什 么以及是否有用的。只為用戶提供最重要的選擇也是很重要的，提供眾多的選擇是不明智的。記住用戶通常想獲得為他們所提供的或多或少的具體想法，但是他們不 想涉及太多的細(xì)節(jié)–他們對(duì)此即沒有時(shí)間也不感興趣的。

使用提示語來刺激用戶和鼓勵(lì)用戶采取行動(dòng)，對(duì)于減少用戶中途退出網(wǎng)站的數(shù)量是非常有意義的，同時(shí)，幫助潛在的客戶更好地理解系統(tǒng)是如何工作的。

如果沒有表單存在的話，那么Wufoo’s的表單頁 面會(huì)有一個(gè)較大的，友好的信息提示邀請(qǐng)你創(chuàng)建一個(gè)新表單。

6.已按按鈕提示

許多網(wǎng)絡(luò)應(yīng)用程序有自定義風(fēng)格的按鈕。這些錨或是輸入按鈕用自定義的圖像作為背景的。默認(rèn)的輸入按鈕可能在一些情況下是不合適地，文本鏈接有時(shí)候不明顯 地。挑戰(zhàn)就在于，當(dāng)鏈接看起來像按鈕時(shí)，它們的行為就應(yīng)該像按鈕-當(dāng)然這包括用戶點(diǎn)擊按鈕后的“已按”狀態(tài)，讓用戶清楚地知道按鈕處于已點(diǎn)擊狀態(tài)。

這并不是純粹地視覺設(shè)計(jì)。給予用戶快速地信息反饋將會(huì)使應(yīng)用程序得到更好地響應(yīng)以及為用戶帶來的體驗(yàn)更加接近桌面應(yīng)用程序。

你可以添加一個(gè)通過定義鏈接的激活偽類的CSS樣式的按鈕狀態(tài) 比方說，如果你的錨點(diǎn)已經(jīng)定義了一個(gè)名字為add_task_button的類名，那你就可以添加add_task_button:active來定義它 的激活狀態(tài)

當(dāng)你點(diǎn)擊時(shí)，Highrise中的按鈕就變成了已按狀態(tài)，給用戶提供了令人滿意的響應(yīng)反饋。

7.從登錄頁面鏈接到注冊(cè)頁面
還未注冊(cè)你的網(wǎng)絡(luò)應(yīng)用程序的用戶將可在登錄頁面直接完成相應(yīng)的注冊(cè)。他們可能想試用你的應(yīng)用程序但是一時(shí)找不到注冊(cè)頁面的?？赡芩麄?cè)囍@得一個(gè)只有注冊(cè) 用戶才有的功能。

仍然沒有一個(gè)Delicious的帳戶嗎？沒有問題的；在Delocious登錄頁面提供了一個(gè)注冊(cè)鏈接。

Goplan在登錄頁面有一個(gè)彩色的按鈕指向注 冊(cè)頁面的。
對(duì)這些用戶來說，在登錄頁面放置一個(gè)注冊(cè)鏈接將使事情更加簡(jiǎn)單。如果你仍然沒有一個(gè)帳戶，你也沒有必要尋找一個(gè)注冊(cè)頁面。我們的研究表明：18%有登錄表單或是登錄表單的鏈接的旁邊放置了注冊(cè)鏈接（例如, YouTube, Reddit, Digg, Lulu, Metacafe）。
8.上下文相關(guān)的導(dǎo)航
考量用戶在所給的上下文環(huán)境中期望看到的東西和所需要的東西是重要的。你不需要在每個(gè)地方展示相同的導(dǎo)航控件，因?yàn)橛脩舸_實(shí)不需要在每個(gè)上下文環(huán)境中看到 它。
最好的上下文相關(guān)的控件案例之一是微軟在Office 2007界面上的最新變化，默認(rèn)的工具條設(shè)置變成了緞帶狀的控件。在其上的每個(gè)標(biāo)簽里都有不同的但是行為類似的控件，有編輯圖像，校對(duì)，寫作。網(wǎng)絡(luò)應(yīng)用程 序同樣能從上下文相關(guān)的控件中獲益，因?yàn)檫@些控件可以通過只顯示用戶所需要來使界面簡(jiǎn)潔干凈，而不是顯示所有可用的。

Lighthouse有個(gè)相似的標(biāo)簽導(dǎo)航菜單；但是， 系列標(biāo)簽下面有二級(jí)菜單。這個(gè)級(jí)別只是展示了和網(wǎng)頁相關(guān)的動(dòng)作行為。

9.更多的強(qiáng)調(diào)關(guān)鍵功能

并不是所有的控件都一樣重要的。例如，在頁面上創(chuàng)建一個(gè)新的項(xiàng)目，可能會(huì)有兩個(gè)按鈕：“創(chuàng)建”和“取消”。由于“創(chuàng)建”功能是用戶在大部分時(shí)間都要用到 的，因此“創(chuàng)建”顯得更為重要的。只有很少的情況下，用戶會(huì)取消頁面。因此，如果這些控件被放在一起，你可能不想給它們相同的強(qiáng)調(diào)。

上圖是Lighthouse的“創(chuàng)建標(biāo)簽”按鈕。你可以看到 “取消”鏈接以純文本方式放在它的旁邊。這不僅給了創(chuàng)建按鈕更多地可點(diǎn)擊區(qū)域，而且?guī)椭脩粼谒褜ぴ摪粹o的過程中獲得更好地視線焦點(diǎn)。

10.嵌入視頻

雖然圖片和文字是一個(gè)傳達(dá)和教你的應(yīng)用程序功能給用戶的好方法，但是如果你有資源制作成視頻，那么視頻資料將是一個(gè)更好的選擇。最近幾年，視頻在網(wǎng)上已經(jīng) 廣受歡迎。視頻一般應(yīng)用在市場(chǎng)性的網(wǎng)站上，是用于炫耀產(chǎn)品的視頻秀。但是這不是使用視頻的唯一方法。

GoodBarry在首頁上放置了一個(gè)視頻用于炫耀它 的產(chǎn)品功能。在視頻秀里面告訴了用戶怎么樣開始使用該產(chǎn)品。

MailChimp在管理面板里面包含了視頻教程用 于幫助新用戶。

一些網(wǎng)絡(luò)應(yīng)用程序在程序內(nèi)使用視頻本身來教導(dǎo)用戶如何使用特定的功能。視頻是一個(gè)快速告訴用戶如何使用你的產(chǎn)品的極好方法，因?yàn)樗尀g覽者完全地了解到如 何使用產(chǎn)品，所以它比起整頁的純文本更易消化，更清晰。

源地址：http://ucdchina.com/post/6225