隨著Javascript與XHTML的應用普及，越來越多前台網頁設計時能用到的應用技術出現在網站上，

譬如我們常見的下拉式選單，或與瀏覽者互動的功能等等，

這些網頁設計時用到的應用技術大大的豐富了網站的呈現方式，

本篇文章將為您精心推薦十種常見的網頁設計時前台的應用技術。

 

這些網頁前台程式的介面設計，其核心觀念都是基於網頁設計的觀念上。但它的重點主要聚焦在功能方面。

要超越像桌面上的應用程式，網頁設計的前台介面必須要提供簡單、直觀和即時反應的使用者介面，

讓瀏覽者花更少的經歷和時間去完成事情。

 

早在前幾年，我們並不太會注意到網頁設計時有關前台部分的應用程式，

但是年代不同了，現在是時候要仔細看看一些實用的技術和更好的設計解決方案，

讓網頁設計的前台介面更友好，也更加漂亮。

 

1、介面元素的需求

在網頁設計的前台開發中，"簡單"這個原則是很重要的。

在任何時候，你在螢幕上顯示越多的控制項目，網站的瀏覽者將不得不花費更多的時間去搞清楚如何瀏覽你的網站。

因此當選擇變少時，可以點選的功能將變得很明顯容易被發現。

不過其實簡約的網頁前台介面其實不太容易設計，尤其是如果你不想限制應用程式的某些功能時。

 

 

當你點選kontain搜尋列的搜尋按鈕時，會出現一個類似下拉式選單的列表。

所以如果你需要縮小搜尋範圍，就可以透過這個下拉式選單選擇其中你需要的項目，這些項目的集合簡化了搜尋列上的項目。

能夠讓你的搜尋列在網頁設計的前台介面看起來更簡潔。

 

隱藏或者是掩蓋進階功能是使網頁設計的前台介面變得更簡單的一種方法。

找出最常用的功能，然後把剩下的隱藏起來。

你也可以用彈出式的選單和操作來完成這件事情，這種做法通常在桌面上的軟體中很常見到。

例如，如果你的搜尋列擁有進階功能的選擇，可以針對特定條件縮小搜尋範圍，那你可以把它放在尾部做成一個下拉式選單。

如果使用者需要使用到進階的功能，他們只需要點擊幾下就可以開啟這些功能了。

決定該保留什麼或者隱藏什麼並不是一個簡單的任務，因為這個也會取決於該功能的重要性以及操作時的頻繁程度。

 

 

當你點擊CollabFinder的搜尋連結時，你不需要打開另一個網頁，

相反的，搜尋功能的控制選單就會直接下拉出來，允許你能夠直接輸入內容開始搜尋。

 

2、專門功能要有專門的操作介面

根據情況選擇適合的控制介面是很重要的。不同的情況下可以用不同的方法處理，

而且某些操作元件會比其它的操作元件更好的完成他們的目標供做。

 

Backpack裡面有一個行事曆的功能和時間選擇器，能夠選擇提醒日期。

 

例如你可以通過一個下拉列表來選擇年月日，但是一和日曆選擇器相比，下拉式的列表就不是非常的有效率，也不直觀。

在日曆的介面中你可以直接通過點擊選擇你想要的某一天，

日曆選擇器也會讓你更容易看到日期、周期和月份(特別是工作日和休息日的區別)，

因此能夠讓你比用簡單的下拉列表更快的做出明智的選擇與完成需求。

 

3、限制送出按鈕

在網頁設計的前台介面中，表單程式有一個就是送出過程。

非常簡單的表單，如果你快速的點擊兩次或者更多次，這樣這個表單的資訊就會被多次送出。

這顯然會是個問題，因為它會重覆創立相同的項目。

要防止重複提交的問題並不是很困難，而且對於大多數的網頁前台應用成是來說，這一點是非常必要去防止的。

 

通常表單程式就是在會讀取前台輸入的資料透過後台程式做些處理，所以它架構上就有客戶端與伺服器端。

大多我們不會透過伺服器端來做限制，因為這將取決於你使用的程式語言和你後台的架構。

基本的概念就是要在送出過程中添加一個檢測機制，去檢查被送出的內容是否有重複過，並且是否要阻止送出。

 

在Yammer上，你可以發現，當你的新消息被送出之後，「更新」按鈕將被禁止。

 

我們透過客戶端處理則是簡單得多。

所有您需要做的就是在點擊之後禁用「提交」按鈕。

最簡單的方法就是為「提交」按鈕添加一段JavaScript，如下：
< input type=”submit” value=”Submit” onclick=”this.disabled=true” / >

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

 

4、模擬視窗出現的陰影

在彈出選單和視窗下的陰影不只是看起來很漂亮這麼簡單而已，

它還能幫助選單或者視窗有強調的感覺，彷彿從背景中脫穎而出這樣。

它還能透過周圍暗色調的區域來遮蔽背景內容的雜亂部分。

 

這種技術來自於傳統的桌面系統軟體，幫助使用者把他的簡點放在出現的視窗上。

由於大多數的情景視窗是不容易從桌面程式中辨認出來，所以陰影幫助他們更接近於讀者。

因此感覺上視窗似乎是立體的服於其他頁面上。

現在我們常用的WINDOWS 7系統就能很容易的看到這個應用。

 

Digg的登錄窗口有一個厚厚的陰影圍繞它來遮蔽網頁背景的混亂。

 

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

當你在設計一個網頁的應用程式時，你不僅是需要透過樣本數據去測試這個程式，

而且最重要的是當什麼內容都沒有的情況下，你要確保它看起來不錯而且是有幫助的。

 

當在網頁頁面或者查詢結果沒有訊息時，告訴你如何才能處理這些空白區域是一條很有幫助的訊息。

譬如，一個會員管理的網頁應用程式可能會列出會員的項目，

但如果沒有項目，你可以提供一個建立項目的連結。

即使已經有建立項目的按鈕存在在頁面上，但是一點額外的協助並不會讓你有任何的損失。

 

Campaign Monitor會在你開始建立一個郵件廣告時指導你正確的步驟。

 

這種技術實際上鼓勵用戶試用服務，並在註冊之後直接使用這項服務。

透過應用程式的一步步指導使用者，能夠幫助他/她去瞭解程式提供的優勢以及是否有用。

同樣重要的是，把最重要的操作呈現給用戶，並且只有呈現這些而已。

把所有功能都呈現出來並沒有很大的意義。

請記住，使用者通常希望得到一些或多或少提供給他們的具體構思，

但是他們並不會想要直接跳到詳細說明去，因為他們既沒有時間也沒有興趣。

 

通過空白狀態去激勵用戶和行為，可以大大減少「中途離開」，

並且幫助您的潛在客戶，更好地瞭解該系統如何工作。

 

談到這邊就先讓各位消化一下這些與網頁設計相關的訊息，下一次我們將繼續談論剩下來的五點。

主要會是導覽列、按鈕的互動，以及視訊及其他網頁上主要功能的說明。請讓我們拭目以待。