當(dāng)今越來越多的應(yīng)用程序遷移到web平臺上。由于沒有平臺的限制和安裝的要求，saas的模式看起來非常有吸引力。web應(yīng)用程序的界面設(shè)計，其核心就是網(wǎng)頁設(shè)計，但它的重點(diǎn)主要是在功能方面。要超越桌面應(yīng)用程序， web應(yīng)用程序必須提供簡單、直觀和即時響應(yīng)的用戶界面，讓他們的用戶花更少的精力和時間去完成事情。

以前，我們并沒有注意到web應(yīng)用程序這個方式，但是現(xiàn)在是時候仔細(xì)看看一些實(shí)用的技術(shù)和設(shè)計解決方案，讓web應(yīng)用更友好更漂亮。本文主要介紹的是在現(xiàn)代web應(yīng)用程序中，我們對設(shè)計模式以及有效設(shè)計解決方案進(jìn)行大量研究并得到結(jié)果的第一部分，您可以在下面找到10個收集到的實(shí)用界面設(shè)計技術(shù)以及在許多成功web應(yīng)用程序中得出的最佳做法。

你可以提出進(jìn)一步的看法，第二部分會盡快出版。你也可以閱讀以下相關(guān)文章：

5 useful coding solutions for designers and developers 10 useful techniques to improve your user interface designs 10 principles of effective design five more principle of effective design getting creative with transparency in web design 1、界面元素的需求

在用戶界面設(shè)計中，簡單這個原則是很重要的。在任何時候，你在屏幕上顯示越多的控制，您的用戶將不得不花費(fèi)更多的時間去搞清楚如何使用界面。當(dāng)選擇變少時，可用的功能變得更加明顯更容易被發(fā)現(xiàn)。簡化的界面雖然是不容易的，尤其是如果你不想限制應(yīng)用程序的功能的時候。

當(dāng)你點(diǎn)擊kontain搜索框的搜索鏈接時，會出現(xiàn)一個類似于下拉菜單的層。所以，如果您需要來縮小搜索范圍，您可以選擇菜單中你所需要的類型。這些選項(xiàng)的聚合簡化了搜索框。

隱藏或者掩蓋高級功能是使事情更加簡單的一種方法。找出最常用的功能，并且把剩下的藏起來。你可以用彈出式菜單和操作來做這件事，這在桌面軟件中很常見。例如，如果您的搜索欄擁有高級過濾器，把它們放在尾部的一個特別的下拉菜單中。如果用戶需要使用這些過濾器，他們只需幾下點(diǎn)擊便可以開啟這些功能。決定該保留什么隱藏什么不是一個簡單的任務(wù)，也會取決于重要性和操作時的頻繁程度。

當(dāng)你點(diǎn)擊collabfinder的搜索鏈接時你不需要打開不同的頁面，相反，搜索框的控制菜單下拉下來，允許你能夠直接開始搜索。 2、專門操作

根據(jù)情況選擇合適的界面控件是很重要的。不同情況下可以用不同的方式處理，而且某些控件會比其他控件能夠更好地完成他們的目標(biāo)工作。

backpack里有一個緊湊的日歷和時間選擇器選擇提醒日期。

例如，你可以通過一個下拉列表來選擇年月日，但是和日歷選擇器相比下拉列表不是非常高效的，在日歷里你可以直接通過點(diǎn)擊選擇你想要的某一天。日歷選擇器也會讓你更容易看到日期、周期和月份（特別是工作日和休息日），因此能夠讓你比用簡單的下拉列表更快地做出更明智的選擇。

mybanktracker的apy計算器功能，通過使用容易控制的滑塊去快速嘗試不同的推測結(jié)果。

另一個很好的例子是滑塊。是的，您可以隨時手動輸入一個數(shù)字，但某些情況下，滑塊控件做了更好的工作。不僅由于他們易于使用 —— 只需單擊并拖動——而且你也可以看清楚如何在最小和最大的范圍之間進(jìn)行合適地選擇。

3、禁用按下按鈕

在web應(yīng)用程序的表單問題中有一個就是提交過程，非常簡單的表單，如果你快速地點(diǎn)擊兩次或者更多次“提交”按鈕，這個表單會被多次提交。這顯示是個問題，因?yàn)樗鼤?b>重復(fù)創(chuàng)建相同的項(xiàng)目。防止重復(fù)提交的不是很難，而且對于大多數(shù)web應(yīng)用程序來說做到這一點(diǎn)是非常必要的。

它有兩層維護(hù)：客戶端和服務(wù)器端。我們不會通過服務(wù)器端維護(hù)是因?yàn)檫@將取決于您使用的編程語言和你的后端架構(gòu)?；旧夏銘?yīng)該做的就是在提交過程中添加一個檢測機(jī)制，去檢查被提交的內(nèi)容是否重復(fù)，并且是否需要阻止提交。

在yammer上，當(dāng)你的新消息被提交之后，“更新”按鈕將被禁止。

客戶端則是簡單得多。所有您需要做的就是在點(diǎn)擊之后禁用“提交”按鈕。最簡單的方法就是為“提交”按鈕添加一段javascript，如下所示：

當(dāng)然，我們會建議您同時還對服務(wù)器端進(jìn)行檢查，以確保重復(fù)不會獲得通過。

4、模擬窗口的陰影

在彈出菜單和窗口下的陰影不止是看起來很漂亮這么簡單。它們幫助菜單或者窗口通過強(qiáng)調(diào)從背景中脫穎而出。它們還通過周圍暗色調(diào)區(qū)域來屏蔽掉背景內(nèi)容的噪音。

這種技術(shù)來源于傳統(tǒng)的桌面軟件，幫助用戶把他們的焦點(diǎn)放在出現(xiàn)的窗口上。由于大多數(shù)情景窗口是不容易從桌面程序中辨識出來，所以陰影幫助他們更接近于讀者，因?yàn)楦杏X上窗口似乎是三維地浮在其他頁面上。

digg的登錄窗口有一個厚厚的陰影圍繞它來屏蔽網(wǎng)頁噪音。 為了實(shí)現(xiàn)這一效果，設(shè)計師往往建立一個透明的容器與png圖像作為背景，把內(nèi)容放進(jìn)容器中——在盒子各邊加上等距的邊框。另一種選擇是使用一個擁有透明邊框的背景圖像并且通過絕對定位來控制盒子內(nèi)容的位置。這正是digg的做法——這是他們正在使用的圖片（dialog.png） 。這是他們使用的代碼和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的lightbox特效庫，或者通過使用之間我們介紹過的css3屬性去模擬陰影，但是你必須意識到現(xiàn)在的ie瀏覽器將不會支持它。 basecamp的項(xiàng)目切換窗口有一個大的輕陰影，幫助菜單區(qū)域脫穎而出。 5、空白狀態(tài)告訴你要做什么

當(dāng)你設(shè)計一個web應(yīng)用程序時，你不僅需要通過樣本數(shù)據(jù)去測試這個程序，而且最重要的是當(dāng)什么內(nèi)容都沒有的情況下，你要確保它看起來不錯而且是有幫助的。

當(dāng)在頁面或者查詢結(jié)果沒有信息時，告訴你如何才能處理這些空白區(qū)域是一條很有幫助的信息。例如，一個項(xiàng)目管理應(yīng)用程序的網(wǎng)頁可能會列出用戶的項(xiàng)目，但如果沒有項(xiàng)目，你可以提供一個創(chuàng)建項(xiàng)目的鏈接。即使已經(jīng)有創(chuàng)建項(xiàng)目的按鈕存在在頁面上，但一點(diǎn)額外的幫助并不會有損失。

campaign monitor 會在你開始建立一個郵件廣告時指導(dǎo)你正確的方向。

這種技術(shù)實(shí)際上鼓勵用戶試用服務(wù)，并在注冊之后直接使用這項(xiàng)服務(wù)。通過應(yīng)用程序的單步指導(dǎo)用戶能夠幫助他/她去了解程序提供的優(yōu)勢以及是否有用。同樣重要的是把最重要的操作呈現(xiàn)給用戶并且只有這些而已——把所有功能都呈現(xiàn)出來并沒有意義。請記住，用戶通常希望得到一些或多或少提供給他們的具體構(gòu)思，但是他們不想要直接跳到詳細(xì)說明去——他們既沒有時間也沒有興趣。

通過空白狀態(tài)去激勵用戶和行為，可以大大減少“輟學(xué)”，并且?guī)椭臐撛诳蛻?，更好地了解該系統(tǒng)如何工作。

wufoo的表單頁面有很多，當(dāng)什么都不存在時它會以友好的訊息邀請您創(chuàng)建一個新的表單。 6、按鈕的按下狀態(tài)

許多web應(yīng)用程序有自定義的按鈕樣式。這些都是用自定義圖片作為他們背景的錨點(diǎn)或輸入按鈕。默認(rèn)輸入按鈕可能不適合在一些情況下，以及文字鏈接有時過于渺小。目前的挑戰(zhàn)是，當(dāng)你把你的鏈接弄得看上去像按鈕時，它們的操作也應(yīng)該和按鈕一樣——這包括當(dāng)用戶點(diǎn)擊它們時會有被“按動”的效果。

這不是一個純粹的視覺調(diào)整。提供即時反饋給用戶將使應(yīng)用程序感覺更有響應(yīng)性，并且給用戶帶來更接近于桌面軟件的的用戶體驗(yàn)。

你可以通過css為按鈕增加按下的效果。

highrise的按鈕實(shí)際上是在你點(diǎn)擊的時候顯示一個按下的效果，給用戶一個非常舒適的反饋感覺。 7、在登陸頁面提供注冊的連接

一些沒有注冊你的應(yīng)用程序的用戶將不可避免地停在你的登錄頁面上。他們想要使用你的應(yīng)用程序，但是卻不能立刻找到注冊頁面。可能他們已經(jīng)試過訪問一個只提供給注冊用戶的特定頁面。

沒有delicious的賬戶？沒問題，在delicious的登錄頁面上提供了一個注冊的連接。 goplan的登陸頁面上有個漂亮的彩色按鈕指向注冊頁面。 在你的登陸頁面上放上注冊的連接會讓一切容易很多。如果他們沒有賬戶，他們不應(yīng)該去尋找注冊頁面。我們研究證實(shí)：在注冊頁面，有18%的網(wǎng)站有登錄表單或者鏈接到登陸頁面的連接。(例如：youtube, reddit, digg, lulu, metacafe) 8、上下文關(guān)聯(lián)導(dǎo)航

思考什么是用戶期望看到的以及在每個給與的情景中他們需要什么是很重要的。你不需要在每個地方顯示同樣的導(dǎo)航控件因?yàn)樵谟脩艨赡懿皇窃诿總€環(huán)境中都需要它們。

上下文關(guān)聯(lián)控件的最佳范例之一是最近在微軟office 2007中的界面，在它的界面中默認(rèn)的工具條被帶裝控件代替。每個標(biāo)簽上有不同控件相關(guān)的特定操作，無論是圖形編輯，校對或者簡單書面形式。web應(yīng)用程序也可以受益于這種上下文關(guān)聯(lián)的控件，因?yàn)檫@些控件通過只顯示用戶需要的內(nèi)容來幫助整潔界面，并非顯示所有的內(nèi)容。

lighthouse提供一個熟悉的標(biāo)簽導(dǎo)航菜單，但是它在標(biāo)簽正下方有二級菜單。這個層級只顯示當(dāng)前項(xiàng)目相關(guān)活動的部分。 9、更加重視主要功能

不是所有控件擁有相同的重要性。例如，在屏幕上創(chuàng)建一個新項(xiàng)目，你可以有兩個按鈕：“創(chuàng)建”和“取消”。這個“創(chuàng)建”的鏈接更重要一些，因?yàn)槭怯脩舸蟛糠謺r間會去用的操作。只有少數(shù)才會去取消。所以如果這些控件挨著排放，你可能不會想要給于相同的重視。

這個lighhouse的“創(chuàng)建任務(wù)”按鈕。你可以看到“取消”鏈接在旁邊以純文本格式。這個按鈕不僅具有更重要的操作而且會有較大的點(diǎn)擊區(qū)域并且容易去點(diǎn)擊。

為了讓用戶的重點(diǎn)轉(zhuǎn)向“創(chuàng)建”鏈接，我們可以簡單地利用不同的樣式或者控件形式。一些應(yīng)用程序的表單輸入按鈕用來作為創(chuàng)建動作，并且把取消操作作為一個文字連接。這樣不僅給與創(chuàng)建按鈕更多的點(diǎn)擊區(qū)域，而且也幫助那些在搜尋內(nèi)容的用戶獲得更好的焦點(diǎn)目光。

10、嵌入式視頻

當(dāng)圖片和文字作為一種很大的方式去和你的用戶溝通并且教育你的用戶有關(guān)你程序的特點(diǎn)時，如果你有資源去投入，視頻甚至可以成為更好的選擇。視頻在最近幾年的web應(yīng)用上已被越來越受歡迎。對于web應(yīng)用程序，視頻通常作為展示產(chǎn)品特點(diǎn)的示范影片被用于市場網(wǎng)站中。但是這不是使用視頻的唯一方法。

goodbarry特點(diǎn)是在頭版有示范視頻去展示產(chǎn)品，它也通過利用示范影片去教育用戶如何開始使用。 mailchimp在管理員面板上嵌入了教程視頻指導(dǎo)新用戶操作。

一些web應(yīng)用程序使用視頻嵌入在程序本身教導(dǎo)用戶如果使用某些特定功能。視頻是一種非常好的方式去快速展示你產(chǎn)品是被怎么使用的，因?yàn)樗菀酌枋龀^一頁文字的內(nèi)容，也清楚得多，因?yàn)橛^眾可以清楚地看到該怎么辦。

原文出自：http://ww.smashingmagazine.com/2009/01/12/10-useful-web-application-interface-techniques/ 中文翻譯：折折熊 http://jojobox.cn/blog/article.asp?id=151

http://bbon.cn/2009/03/10%e5%a4%a7-web-%e5%ba%94%e7%94%a8%e7%95%8c%e9%9d%a2%e6%8a%80%e6%9c%af%e5%ba%94%e7%94%a8.html