網頁設計教程：Web應用界面的十個實用技術

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

本文主要介紹的是在現代Web應用程序中，對設計模式以及有效設計解決方案進行大量研究並得到結果的第一部分，您可以在下面找到10個收集到的實用界面設計技術以及在許多成功Web應用程序中得出的最佳做法。

　　1、界面元素的需求

在用戶界面設計中，簡單這個原則是很重要的。在任何時候，你在屏幕上顯示越多的控制，您的用戶將不得不花費更多的時間去搞清楚如何使用界面。當選擇變少時，可用的功能變得更加明顯更容易被發現。簡化的界面雖然是不容易的，尤其是如果你不想限制應用程序的功能的時候。
隱藏或者掩蓋高級功能是使事情更加簡單的一種方法。找出最常用的功能，並且把剩下的藏起來。網頁設計你可以用彈出式菜單和操作來做這件事，這在桌面軟件中很常見。例如，如果您的搜索欄擁有高級過濾器，把它們放在尾部的一個特別的下拉菜單中。如果用戶需要使用這些過濾器，他們只需幾下點擊便可以開啟這些功能。決定該保留什麼隱藏什麼不是一個簡單的任務，也會取決於重要性和操作時的頻繁程度。

當你點擊Kontain 搜索框的搜索鏈接時，會出現一個類似於下拉菜單的層。所以，如果您需要來縮小搜索範圍，您可以選擇菜單中你所需要的類型。這些選項的聚合簡化了搜索框。

當你點擊CollabFinder 的搜索鏈接時你不需要打開不同的頁面，相反，搜索框的控制菜單下拉下來，允許你能夠直接開始搜索。

　　2、專門操作

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

Backpack 裡有一個緊湊的日曆和時間選擇器選擇提醒日期。

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

　　3、禁用按下按鈕
它有兩層維護：客戶端和服務器端。我們不會通過服務器端維護是因為這將取決於您使用的編程語言和你的後端架構。基本上你應該做的就是在提交過程中添加一個檢測機制，去檢查被提交的內容是否重複，並且是否需要阻止提交。
在web應用程序的表單問題中有一個就是提交過程，非常簡單的表單，如果你快速地點擊兩次或者更多次“提交”按鈕，這個表單會被多次提交。這顯示是個問題，因為它會重複創建相同的項目。防止重複提交的不是很難，而且對於大多數Web應用程序來說做到這一點是非常必要的。

在Yammer 上，當你的新消息被提交之後，"更新"按鈕將被禁止。

　　客戶端則是簡單得多。所有您需要做的就是在點擊之後禁用"提交"按鈕。最簡單的方法就是為"提交"按鈕添加一段JavaScript，如下所示：

當然，我們會建議您同時還對服務器端進行檢查，以確保重複不會獲得通過。

　　4、模擬窗口的陰影

在彈出菜單和窗口下的陰影不止是看起來很漂亮這麼簡單。它們幫助菜單或者窗口通過強調從背景中脫穎而出。它們還通過周圍暗色調區域來屏蔽掉背景內容的噪音。

這種技術來源於傳統的桌面軟件，幫助用戶把他們的焦點放在出現的窗口上。由於大多數情景窗口是不容易從桌面程序中辨識出來，所以陰影幫助他們更接近於讀者，因為感覺上窗口似乎是三維地浮在其他頁面上。
 

為了實現這一效果，設計師往往建立一個透明的容器與PNG圖像作為背景，網頁設計把內容放進容器中--在盒子各邊加上等距的邊框。另一種選擇是使用一個擁有透明邊框的背景圖像並且通過絕對定位來控制盒子內容的位置。這正是Digg的做法--這是他們正在使用的圖片(dialog.png)。這是他們使用的代碼和CSS樣式：

　5、空白狀態告訴你要做什麼

當你設計一個Web應用程序時，你不僅需要通過樣本數據去測試這個程序，而且最重要的是當什麼內容都沒有的情況下，你要確保它看起來不錯而且是有幫助的。

當在頁面或者查詢結果沒有信息時，告訴你如何才能處理這些空白區域是一條很有幫助的信息。例如，一個項目管理應用程序的網頁可能會列出用戶的項目，但如果沒有項目，你可以提供一個創建項目的鏈接。即使已經有創建項目的按鈕存在在頁面上，但一點額外的幫助並不會有損失。