英文原文：10 Useful Web Application Interface Techniques

　　英文編輯：SmashingMagazine；翻譯：Lucas Li，校對(duì)：Lucas Li

　　近年來(lái)，越來(lái)越多的桌面應(yīng)用程序移植到互聯(lián)網(wǎng)上面的。沒(méi)有了平臺(tái)限制和安裝要求且作為一種服務(wù)模式的軟件看起來(lái)很吸引人的。網(wǎng)絡(luò)應(yīng)用程序界面設(shè)計(jì)的核心是網(wǎng)頁(yè)設(shè)計(jì)；但是，它的焦點(diǎn)主要集中在功能上面。為了和桌面程序競(jìng)爭(zhēng)，網(wǎng)絡(luò)應(yīng)用程序必須提供簡(jiǎn)單，直觀的以及響應(yīng)快速的用戶(hù)界面，這樣才能減少用戶(hù)完成事情的時(shí)間和精力。

　　過(guò)去我們沒(méi)有用應(yīng)有的方法來(lái)關(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ā)表你的意見(jiàn)，方法以及代碼解決方案。我們研究的第二部分將隨即奉上：敬請(qǐng)期待。

　　1. 需要的界面元素

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

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

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

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

　　2. 特殊化的控件

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

　　Backpack為選擇提醒日期提供了一個(gè)簡(jiǎn)潔的日歷控件。
　　例如，你能通過(guò)使用下拉列表來(lái)選擇某一天的具體的年月日日期。但是，和上圖所示的特殊日歷控件（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ā)的問(wèn)題之一是提交流程。對(duì)于非常簡(jiǎn)單的表單，如果你非?？焖俚狞c(diǎn)擊“提交”按鈕兩次或是更多次，表單將同樣被提交兩次或是多次。這顯然是有問(wèn)題的，因?yàn)檫@將產(chǎn)生許多重復(fù)的提交副本。阻止副本的提交并不是很難的，對(duì)于大部分的網(wǎng)絡(luò)應(yīng)用程序來(lái)說(shuō)，這是理所應(yīng)當(dāng)?shù)摹?/p>

　　對(duì)于這個(gè)安全措施應(yīng)從兩個(gè)端口來(lái)進(jìn)行驗(yàn)證設(shè)置：客戶(hù)端和服務(wù)器端的。我們?cè)谶@里將不會(huì)利用服務(wù)端器的安全措施，因?yàn)檫@個(gè)是基于你所使用的程序語(yǔ)言以及后臺(tái)架構(gòu)。你真正應(yīng)該做地是在客戶(hù)端進(jìn)行一次驗(yàn)證，這保證了在表單提交階段，任何正在提交的內(nèi)容都不是副本，如果出現(xiàn)是副本的情況，將會(huì)阻止它。

　　在Yammer里，當(dāng)你的新信息正在提交地時(shí)候，“上傳”按鈕將不可用。

　　客戶(hù)端的設(shè)置將更加簡(jiǎn)化。你所需要做的事情是在“提交”按鈕被點(diǎn)擊的瞬間使該按鈕不可用。最容易的方法是對(duì)“提交”按鈕控件所屬的代碼行增加一段JavaScrip，其代碼如下：

<input type="submit" value="Submit" onclick="this.disabled=true" />

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

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

　　彈出框菜單和窗口周?chē)奈⒘筷幱安⒎侨A而不實(shí)的。它們通過(guò)加強(qiáng)周邊尺寸來(lái)使菜單和窗口從背景當(dāng)中凸顯出來(lái)。它們利用陰影來(lái)暗化窗口周?chē)膮^(qū)域以達(dá)到降低窗口下面內(nèi)容所引起的噪音。

　　在傳統(tǒng)的桌面應(yīng)用程序中，這一技術(shù)覆蓋了底部的內(nèi)容以幫助用戶(hù)能集中注意力于出現(xiàn)的窗口。由于大部分的模態(tài)窗口不容易從主內(nèi)容界面凸顯出來(lái)，因此，陰影使它們離讀者更為接近，因?yàn)榇翱诳雌饋?lái)像是三維的放置在主界面之上。

　　Digg's的登錄窗口的四邊有比較寬厚的陰影區(qū)域來(lái)降低頁(yè)面底部的信息噪音。
　　為了達(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)記語(yǔ)言和CSS樣式：

　　(X)HTML:

    <div id="container">
        <div style="display: block; top: 236px; opacity: 1;" class="dialog">
            <div class="body">
                <div class="content">
                    ...
                </div>
            </div>
        </div>
      </div>        

        

        
        
      
        
it知識(shí)庫(kù)：10個(gè)有用的網(wǎng)頁(yè)應(yīng)用程序界面技術(shù)，轉(zhuǎn)載需保留來(lái)源！
        
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。