當(dāng)今越來(lái)越多的應(yīng)用程序遷移到web平臺(tái)上。由于沒(méi)有平臺(tái)的限制和安裝的要求，SAAS的模式看起來(lái)非常有吸引力。Web應(yīng)用程序的界面設(shè)計(jì)，其核 心就是網(wǎng)頁(yè)設(shè)計(jì)，但它的重點(diǎn)主要是在功能方面。要超越桌面應(yīng)用程序， Web應(yīng)用程序必須提供簡(jiǎn)單、直觀和即時(shí)響應(yīng)的用戶界面，讓他們的用戶花更少的精力和時(shí)間去完成事情。
以前，我們并沒(méi)有注意到web應(yīng)用程序這個(gè)方式，但是現(xiàn)在是時(shí)候仔細(xì)看看一些實(shí)用的技術(shù)和設(shè)計(jì)解決方案，讓W(xué)eb應(yīng)用更友好更漂亮。本文主要介紹的 是在現(xiàn) 代Web應(yīng)用程序中，我們對(duì)設(shè)計(jì)模式以及有效設(shè)計(jì)解決方案進(jìn)行大量研究并得到結(jié)果的第一部分，您可以在下面找到10個(gè)收集到的實(shí)用界面設(shè)計(jì)技術(shù)以及在許多 成功Web應(yīng)用程序中得出的最佳做法。
你可以提出進(jìn)一步的看法，第二部分會(huì)盡快出版。你也可以閱讀以下相關(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è)計(jì)中，簡(jiǎn)單這個(gè)原則是很重要的。在任何時(shí)候，你在屏幕上顯示越多的控制，您的用戶將不得不花費(fèi)更多的時(shí)間去搞清楚如何使用界面。當(dāng)選擇變少時(shí)，可用的功能變得更加明顯更容易被發(fā)現(xiàn)。簡(jiǎn)化的界面雖然是不容易的，尤其是如果你不想限制應(yīng)用程序的功能的時(shí)候。
當(dāng)你點(diǎn)擊Kontain搜索框的搜索鏈接時(shí)，會(huì)出現(xiàn)一個(gè)類似于下拉菜單的層。所以，如果您需要來(lái)縮小搜索范圍，您可以選擇菜單中你所需要的類型。這些選項(xiàng)的聚合簡(jiǎn)化了搜索框。
隱藏或者掩蓋高級(jí)功能是 使事情更加簡(jiǎn)單的一種方法。找出最常用的功能，并且把剩下的藏起來(lái)。你可以用彈出式菜單和操作來(lái)做這件事，這在桌面軟件中很常見(jiàn)。例如，如果您的搜索欄擁 有高級(jí)過(guò)濾器，把它們放在尾部的一個(gè)特別的下拉菜單中。如果用戶需要使用這些過(guò)濾器，他們只需幾下點(diǎn)擊便可以開(kāi)啟這些功能。決定該保留什么隱藏什么不是一 個(gè)簡(jiǎn)單的任務(wù)，也會(huì)取決于重要性和操作時(shí)的頻繁程度。
當(dāng)你點(diǎn)擊CollabFinder的搜索鏈接時(shí)你不需要打開(kāi)不同的頁(yè)面，相反，搜索框的控制菜單下拉下來(lái)，允許你能夠直接開(kāi)始搜索。
2、專門操作
根據(jù)情況選擇合適的界面控件是很重要的。不同情況下可以用不同的方式處理，而且某些控件會(huì)比其他控件能夠更好地完成他們的目標(biāo)工作。
Backpack里有一個(gè)緊湊的日歷和時(shí)間選擇器選擇提醒日期。
例如，你可以通過(guò)一個(gè)下拉列表來(lái)選擇年月日，但是和日歷選擇器相比下拉列表不是非常高效的，在日歷里你可以直接通過(guò)點(diǎn)擊選擇你想要的某一天。日歷選擇器也會(huì)讓你更容易看到日期、周期和月份（特別是工作日和休息日），因此能夠讓你比用簡(jiǎn)單的下拉列表更快地做出更明智的選擇。
MyBankTracker的APY計(jì)算器功能，通過(guò)使用容易控制的滑塊去快速嘗試不同的推測(cè)結(jié)果。
另一個(gè)很好的例子是滑塊。是的，您可以隨時(shí)手動(dòng)輸入一個(gè)數(shù)字，但某些情況下，滑塊控件做了更好的工作。不僅由于他們易于使用 —— 只需單擊并拖動(dòng)——而且你也可以看清楚如何在最小和最大的范圍之間進(jìn)行合適地選擇。
3、禁用按下按鈕
在web應(yīng)用程序的表單問(wèn)題中有一個(gè)就是提交過(guò)程，非常簡(jiǎn)單的表單，如果你快速地點(diǎn)擊兩次或者更多次“提交”按鈕，這個(gè)表單會(huì)被多次提交。這顯示是個(gè)問(wèn)題，因?yàn)樗鼤?huì)重復(fù)創(chuàng)建相同的項(xiàng)目。防止重復(fù)提交的不是很難，而且對(duì)于大多數(shù)Web應(yīng)用程序來(lái)說(shuō)做到這一點(diǎn)是非常必要的。
它有兩層維護(hù)：客戶端和服務(wù)器端。我們不會(huì)通過(guò)服務(wù)器端維護(hù)是因?yàn)檫@將取決于您使用的編程語(yǔ)言和你的后端架構(gòu)?；旧夏銘?yīng)該做的就是在提交過(guò)程中添加一個(gè)檢測(cè)機(jī)制，去檢查被提交的內(nèi)容是否重復(fù)，并且是否需要阻止提交。
在Yammer上，當(dāng)你的新消息被提交之后，“更新”按鈕將被禁止。
客戶端則是簡(jiǎn)單得多。所有您需要做的就是在點(diǎn)擊之后禁用“提交”按鈕。最簡(jiǎn)單的方法就是為“提交”按鈕添加一段JavaScript，如下所示：
<input type=”submit” value=”Submit” onclick=”this.disabled=true” />
當(dāng)然，我們會(huì)建議您同時(shí)還對(duì)服務(wù)器端進(jìn)行檢查，以確保重復(fù)不會(huì)獲得通過(guò)。
4、模擬窗口的陰影
在彈出菜單和窗口下的陰影不止是看起來(lái)很漂亮這么簡(jiǎn)單。它們幫助菜單或者窗口通過(guò)強(qiáng)調(diào)從背景中脫穎而出。它們還通過(guò)周圍暗色調(diào)區(qū)域來(lái)屏蔽掉背景內(nèi)容的噪音。
這種技術(shù)來(lái)源于傳統(tǒng)的桌面軟件，幫助用戶把他們的焦點(diǎn)放在出現(xiàn)的窗口上。由于大多數(shù)情景窗口是不容易從桌面程序中辨識(shí)出來(lái)，所以陰影幫助他們更接近于讀者，因?yàn)楦杏X(jué)上窗口似乎是三維地浮在其他頁(yè)面上。
Digg的登錄窗口有一個(gè)厚厚的陰影圍繞它來(lái)屏蔽網(wǎng)頁(yè)噪音。
為了實(shí)現(xiàn)這一效果，設(shè)計(jì)師往往建立一個(gè)透明的容器與PNG圖像作為背景，把內(nèi)容放進(jìn)容器中——在盒子各邊加上等距的邊框。另一種選擇是使用一個(gè)擁有透明邊框的背景圖像并且通過(guò)絕對(duì)定位來(lái)控制盒子內(nèi)容的位置。這正是Digg的做法——這是他們正在使用的圖片（dialog.png） 。這是他們使用的代碼和CSS樣式：
(X)HTML:
<div id=”container”>
<div style=”display: block; top: 236px; opacity: 1;”>
<div>
<div >
…
</div>
</div>
</div>
</div>
CSS:
.dialog {
position: absolute;
left: 50%;
margin-left: -315px;
width: 630px;
z-index: 100001;
}http://www./blog/blogedit.asp?id=151
.dialog .body {
background: url(/img/dialog.png) 0 0; /* semi-transparent .png image */
padding: 40px 13px 10px 40px;
}
或者，你也可以使用基于javascript的lightbox特效庫(kù)，或者通過(guò)使用之間我們介紹過(guò)的CSS3屬性去模擬陰影，但是你必須意識(shí)到現(xiàn)在的IE瀏覽器將不會(huì)支持它。
Basecamp的項(xiàng)目切換窗口有一個(gè)大的輕陰影，幫助菜單區(qū)域脫穎而出。
5、空白狀態(tài)告訴你要做什么
當(dāng)你設(shè)計(jì)一個(gè)Web應(yīng)用程序時(shí)，你不僅需要通過(guò)樣本數(shù)據(jù)去測(cè)試這個(gè)程序，而且最重要的是當(dāng)什么內(nèi)容都沒(méi)有的情況下，你要確保它看起來(lái)不錯(cuò)而且是有幫助的。
當(dāng)在頁(yè)面或者查詢結(jié)果沒(méi)有信息時(shí)，告訴你如何才能處理這些空白區(qū)域是一條很有幫助的信息。例如，一個(gè)項(xiàng)目管理應(yīng)用程序的網(wǎng)頁(yè)可能會(huì)列出用戶的項(xiàng)目，但如果沒(méi)有項(xiàng)目，你可以提供一個(gè)創(chuàng)建項(xiàng)目的鏈接。即使已經(jīng)有創(chuàng)建項(xiàng)目的按鈕存在在頁(yè)面上，但一點(diǎn)額外的幫助并不會(huì)有損失。
Campaign Monitor 會(huì)在你開(kāi)始建立一個(gè)郵件廣告時(shí)指導(dǎo)你正確的方向。
這種技術(shù)實(shí)際上鼓勵(lì)用戶試用服務(wù)，并在注冊(cè)之后直接使用這項(xiàng)服務(wù)。通過(guò)應(yīng)用程序的單步指導(dǎo)用戶能夠幫助他/她去了解程序提供的優(yōu)勢(shì)以及是否有用。同 樣重要 的是把最重要的操作呈現(xiàn)給用戶并且只有這些而已——把所有功能都呈現(xiàn)出來(lái)并沒(méi)有意義。請(qǐng)記住，用戶通常希望得到一些或多或少提供給他們的具體構(gòu)思，但是他 們不想要直接跳到詳細(xì)說(shuō)明去——他們既沒(méi)有時(shí)間也沒(méi)有興趣。
通過(guò)空白狀態(tài)去激勵(lì)用戶和行為，可以大大減少“輟學(xué)”，并且?guī)椭臐撛诳蛻簦玫亓私庠撓到y(tǒng)如何工作。
Wufoo的表單頁(yè)面有很多，當(dāng)什么都不存在時(shí)它會(huì)以友好的訊息邀請(qǐng)您創(chuàng)建一個(gè)新的表單。
-
6、按鈕的按下?tīng)顟B(tài)
許多Web應(yīng)用程序有自定義的按鈕樣式。這些都是用自定義圖片作為他們背景的錨點(diǎn)或輸入按鈕。默認(rèn)輸入按鈕可能不適合在一些情況下，以及文字鏈接有時(shí)過(guò)于渺小。目前的挑戰(zhàn)是，當(dāng)你把你的鏈接弄得看上去像按鈕時(shí)，它們的操作也應(yīng)該和按鈕一樣——這包括當(dāng)用戶點(diǎn)擊它們時(shí)會(huì)有被“按動(dòng)”的效果。
這不是一個(gè)純粹的視覺(jué)調(diào)整。提供即時(shí)反饋給用戶將使應(yīng)用程序感覺(jué)更有響應(yīng)性，并且給用戶帶來(lái)更接近于桌面軟件的的用戶體驗(yàn)。
你可以通過(guò)CSS為按鈕增加按下的效果。
Highrise的按鈕實(shí)際上是在你點(diǎn)擊的時(shí)候顯示一個(gè)按下的效果，給用戶一個(gè)非常舒適的反饋感覺(jué)。
7、在登陸頁(yè)面提供注冊(cè)的連接
一些沒(méi)有注冊(cè)你的應(yīng)用程序的用戶將不可避免地停在你的登錄頁(yè)面上。他們想要使用你的應(yīng)用程序，但是卻不能立刻找到注冊(cè)頁(yè)面?？赡芩麄円呀?jīng)試過(guò)訪問(wèn)一個(gè)只提供給注冊(cè)用戶的特定頁(yè)面。
沒(méi)有Delicious的賬戶？沒(méi)問(wèn)題，在Delicious的登錄頁(yè)面上提供了一個(gè)注冊(cè)的連接。
Goplan的登陸頁(yè)面上有個(gè)漂亮的彩色按鈕指向注冊(cè)頁(yè)面。
在你的登陸頁(yè)面上放上注冊(cè)的連接會(huì)讓一切容易很多。如果他們沒(méi)有賬戶，他們不應(yīng)該去尋找注冊(cè)頁(yè)面。我們研究證實(shí)：在注冊(cè)頁(yè)面，有18%的網(wǎng)站有登錄表單或者鏈接到登陸頁(yè)面的連接。(例如：YouTube, Reddit, Digg, Lulu, Metacafe)
8、上下文關(guān)聯(lián)導(dǎo)航
思考什么是用戶期望看到的以及在每個(gè)給與的情景中他們需要什么是很重要的。你不需要在每個(gè)地方顯示同樣的導(dǎo)航控件因?yàn)樵谟脩艨赡懿皇窃诿總€(gè)環(huán)境中都需要它們。
上下文關(guān)聯(lián)控件的最佳范例之一是最近在微軟office 2007中的界面，在它的界面中默認(rèn)的工具條被帶裝控件代替。每個(gè)標(biāo)簽上有不同控件相關(guān)的特定操作，無(wú)論是圖形編輯，校對(duì)或者簡(jiǎn)單書面形式。web應(yīng)用程序也可以受益于這種上下文關(guān)聯(lián)的控件，因?yàn)檫@些控件通過(guò)只顯示用戶需要的內(nèi)容來(lái)幫助整潔界面，并非顯示所有的內(nèi)容。
Lighthouse提供一個(gè)熟悉的標(biāo)簽導(dǎo)航菜單，但是它在標(biāo)簽正下方有二級(jí)菜單。這個(gè)層級(jí)只顯示當(dāng)前項(xiàng)目相關(guān)活動(dòng)的部分。
9、更加重視主要功能
不是所有控件擁有相同的重要性。例如，在屏幕上創(chuàng)建一個(gè)新項(xiàng)目，你可以有兩個(gè)按鈕：“創(chuàng)建”和“取消”。這個(gè)“創(chuàng)建”的鏈接更重要一些，因?yàn)槭怯脩舸蟛糠謺r(shí)間會(huì)去用的操作。只有少數(shù)才會(huì)去取消。所以如果這些控件挨著排放，你可能不會(huì)想要給于相同的重視。
這個(gè)Lighhouse的“創(chuàng)建任務(wù)”按鈕。你可以看到“取消”鏈接在旁邊以純文本格式。這個(gè)按鈕不僅具有更重要的操作而且會(huì)有較大的點(diǎn)擊區(qū)域并且容易去點(diǎn)擊。
為了讓用戶的重點(diǎn)轉(zhuǎn)向“創(chuàng)建”鏈接，我們可以簡(jiǎn)單地利用不同的樣式或者控件形式。一些應(yīng)用程序的表單輸入按鈕用來(lái)作為創(chuàng)建動(dòng)作，并且把取消操作作為一個(gè)文字連接。這樣不僅給與創(chuàng)建按鈕更多的點(diǎn)擊區(qū)域，而且也幫助那些在搜尋內(nèi)容的用戶獲得更好的焦點(diǎn)目光。
10、嵌入式視頻
當(dāng)圖片和文字作為一種很大的方式去和你的用戶溝通并且教育你的用戶有關(guān)你程序的特點(diǎn)時(shí)，如果你有資源去投入，視頻甚至可以成為更好的選擇。視頻在最近幾年的web應(yīng)用上已被越來(lái)越受歡迎。對(duì)于Web應(yīng)用程序，視頻通常作為展示產(chǎn)品特點(diǎn)的示范影片被用于市場(chǎng)網(wǎng)站中。但是這不是使用視頻的唯一方法。
GoodBarry特點(diǎn)是在頭版有示范視頻去展示產(chǎn)品，它也通過(guò)利用示范影片去教育用戶如何開(kāi)始使用。
Mailchimp在管理員面板上嵌入了教程視頻指導(dǎo)新用戶操作。
一些Web應(yīng)用程序使用視頻嵌入在程序本身教導(dǎo)用戶如果使用某些特定功能。視頻是一種非常好的方式去快速展示你產(chǎn)品是被怎么使用的，因?yàn)樗菀酌枋龀^(guò)一頁(yè)文字的內(nèi)容，也清楚得多，因?yàn)橛^眾可以清楚地看到該怎么辦。
（以上譯文結(jié)束，查看原文）
歡迎訪問(wèn)我的BLOG：http://www./（享受生活）
