英文原文：10 Useful Web Application Interface Techniques

　　英文編輯：SmashingMagazine；翻譯：Lucas Li，校對：Lucas Li

　　近年來，越來越多的桌面應用程序移植到互聯網上面的。沒有了平臺限制和安裝要求且作為一種服務模式的軟件看起來很吸引人的。網絡應用程序界面設計的核心是網頁設計；但是，它的焦點主要集中在功能上面。為了和桌面程序競爭，網絡應用程序必須提供簡單，直觀的以及響應快速的用戶界面，這樣才能減少用戶完成事情的時間和精力。

　　過去我們沒有用應有的方法來關注網絡應用程序，現在該是仔細地研究一些有用的技術和設計方案，以便使網絡應用程序更加友好和漂亮的。這篇文章闡述了第一部分我們在現代網絡應用程序上面關于設計模式和有用的設計方案的廣泛研究。下面你將看到我們收集到的10個有用的界面設計技術以及成功地將其應用到許多網絡應用程序上。

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

　　1. 需要的界面元素

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

　　當你在Kontain's搜索輸入框中點擊搜索鏈接時，一個類似的下拉框出現了。因此，如果你需要控制搜索控件所占的界面空間，你可以使用下拉菜單來選擇你所要尋找的內容類別。收起這些選擇就可以簡化搜索框。

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

　　當你在CollabFinder上點擊搜索鏈接時，頁面不會切換到新的頁面。相反地，搜索框控件在當前頁面下拉展開，直接開始你的搜索。

　　2. 特殊化的控件

　　對于在不同的情況下，選擇正確的界面控件是非常重要的。不同的情況應該采取不同的方法進行處理，在設計界面任務時，采取特定的控件會顯得更好。

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

　　MyBankTracker's的滑動控件APY具有計算器功能，它能快速核算出不同項目的收益情況。

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

　　3. 不可點擊的按鈕

　　網絡應用程序在由表單所引發的問題之一是提交流程。對于非常簡單的表單，如果你非常快速的點擊“提交”按鈕兩次或是更多次，表單將同樣被提交兩次或是多次。這顯然是有問題的，因為這將產生許多重復的提交副本。阻止副本的提交并不是很難的，對于大部分的網絡應用程序來說，這是理所應當的。

　　對于這個安全措施應從兩個端口來進行驗證設置：客戶端和服務器端的。我們在這里將不會利用服務端器的安全措施，因為這個是基于你所使用的程序語言以及后臺架構。你真正應該做地是在客戶端進行一次驗證，這保證了在表單提交階段，任何正在提交的內容都不是副本，如果出現是副本的情況，將會阻止它。

　　在Yammer里，當你的新信息正在提交地時候，“上傳”按鈕將不可用。

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

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

　　當然，我們也會建議你在服務器端進行驗證，以確保副本不會被提交。

　　4. 陰影邊角的模態對話框窗口

　　彈出框菜單和窗口周圍的微量陰影并非華而不實的。它們通過加強周邊尺寸來使菜單和窗口從背景當中凸顯出來。它們利用陰影來暗化窗口周圍的區域以達到降低窗口下面內容所引起的噪音。

　　在傳統的桌面應用程序中，這一技術覆蓋了底部的內容以幫助用戶能集中注意力于出現的窗口。由于大部分的模態窗口不容易從主內容界面凸顯出來，因此，陰影使它們離讀者更為接近，因為窗口看起來像是三維的放置在主界面之上。

　　Digg's的登錄窗口的四邊有比較寬厚的陰影區域來降低頁面底部的信息噪音。
　　為了達到這種效果，設計師經常設計出一個擁有透明度的PNG圖像并作為背景的容器，在這容器里面放置內容-容器四邊擁有等距離的內邊距。另一個選擇是使用一個帶有透明邊框的背景圖像以及把內容放置在運用了絕對定位的盒子模型里面。這就是Digg所做的-這是他們所使用的圖像（dialog.png）。這是他們所使用的標記語言和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知識庫：10個有用的網頁應用程序界面技術，轉載需保留來源！
        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。