Web前端十種常用的技術

Web前端應用十種常用技術，隨著JS與XHTML的應用普及，越來越多的web介面應用技術出現在網站上，比如我們常見的日曆控制元件，搜尋下拉框等，這些web介面應用技術大大的豐富了網站的表現形式，本文將為您精心推薦十種最常見的web介面應用技術。

Web應用程式的介面設計，其核心就是網頁設計 ，但它的重點主要是在功能方面。要超越桌面應用程式， Web應用程式必須提供簡單、直觀和即時響應的使用者介面，讓他們的使用者花更少的精力和時間去完成事情。

以前，我們並沒有注意到web應用程式這個方式，但是現在是時候仔細看看一些實用的技術和設計解決方案，讓Web應用更友好更漂亮。

1、介面元素的需求

在Web前端開發中，簡單這個原則是很重要的。在任何時候，你在螢幕上顯示越多的控制，您的使用者將不得不花費更多的時間去搞清楚如何使用介面。當選擇變少時，可用的功能變得更加明顯更容易被發現。簡化的介面雖然是不容易的，尤其是如果你不想限制應用程式的功能的時候。

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

隱藏或者掩蓋高階功能 是使事情更加簡單的一種方法。找出最常用的功能，並且把剩下的藏起來。你可以用彈出式選單和操作來做這件事，這在桌面軟體中很常見。例如，如果您的搜尋欄擁有高階過濾器，把它們放在尾部的一個特別的下拉選單中。如果使用者需要使用這些過濾器，他們只需幾下點選便可以開啟這些功能。決定該保留什麼隱藏什麼不是一個簡單的任務，也會取決於重要性和操作時的頻繁程度。

當你點選 CollabFinder 的搜尋連結時你不需要開啟不同的頁面，相反，搜尋框的控制選單下拉下來，允許你能夠直接開始搜尋。

2、專門操作

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

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

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

3、禁用按下按鈕

在web應用程式的表單問題中有一個就是提交過程，非常簡單的表單，如果你快速地點選兩次或者更多次“提交”按鈕，這個表單會被多次提交。這顯示是個問題，因為它會重複建立相同的專案 。防止重複提交的不是很難，而且對於大多數Web應用程式來說做到這一點是非常必要的。

它有兩層維護：客戶端和伺服器端 。我們不會透過伺服器端維護是因為這將取決於您使用的程式語言和你的後端架構。基本上你應該做的就是在提交過程中新增一個檢測機制，去檢查被提交的內容是否重複，並且是否需要阻止提交

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

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

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

4、模擬視窗的陰影

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

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

Digg 的登入視窗有一個厚厚的陰影圍繞它來遮蔽網頁噪音。

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

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

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

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

這種技術實際上鼓勵使用者試用服務，並在註冊之後直接使用這項服務。透過應用程式的單步指導使用者能夠幫助他/她去了解程式提供的優勢以及是否有用。同樣重要的是把最重要的操作呈現給使用者並且只有這些而已——把所有功能都呈現出來並沒有意義。請記住，使用者通常希望得到一些或多或少提供給他們的具體構思，但是他們不想要直接跳到詳細說明去——他們既沒有時間也沒有興趣。

透過空白狀態去激勵使用者和行為，可以大大減少“輟學”，並且幫助您的潛在客戶，更好地瞭解該系統如何工作。

6、按鈕的按下狀態

許多Web應用程式有自定義的按鈕樣式。這些都是用自定義圖片作為他們背景的錨點或輸入按鈕。預設輸入按鈕可能不適合在一些情況下，以及文字連結有時過於渺小。目前的挑戰是，當你把你的連結弄得看上去像按鈕時，它們的操作也應該和按鈕一樣——這包括當使用者點選它們時會有被“按動”的效果 。

這不是一個純粹的視覺調整。提供即時反饋給使用者將使應用程式感覺更有響應性，並且給使用者帶來更接近於桌面軟體的的使用者體驗。

你可以透過CSS為按鈕增加按下的效果。

Highrise 的按鈕實際上是在你點選的時候顯示一個按下的效果，給使用者一個非常舒適的反饋感覺。

7、在登陸頁面提供註冊的連線

一些沒有註冊你的應用程式的使用者將不可避免地停在你的登入頁面上。他們想要使用你的應用程式，但是卻不能立刻找到註冊頁面。可能他們已經試過訪問一個只提供給註冊使用者的特定頁面。

Goplan 的登陸頁面上有個漂亮的彩色按鈕指向註冊頁面。

在你的登陸頁面上放上註冊的連線 會讓一切容易很多。如果他們沒有賬戶，他們不應該去尋找註冊頁面。我們研究證實：在註冊頁面，有18%的網站有登入表單或者連結到登陸頁面的連線。

8、上下文關聯導航

思考什麼是使用者期望看到的以及在每個給與的情景 中他們需要什麼是很重要的。你不需要在每個地方顯示同樣的導航控制元件因為在使用者可能不是在每個環境中都需要它們。

上下文關聯控制元件的最佳範例之一是最近在微軟office 2007中的介面，在它的介面中預設的工具條被帶裝控制元件代替。每個標籤上有不同控制元件相關的特定操作，無論是圖形編輯，校對或者簡單書面形式。web應用程式也可以受益於這種上下文關聯的控制元件，因為這些控制元件透過只顯示使用者需要的內容來幫助整潔介面，並非顯示所有的內容 。

Lighthouse 提供一個熟悉的標籤導航選單，但是它在標籤正下方有二級選單。這個層級只顯示當前專案相關活動的部分。

9、更加重視主要功能

不是所有控制元件擁有相同的重要性 。例如，在螢幕上建立一個新專案，你可以有兩個按鈕：“建立”和“取消”。這個“建立”的連結更重要一些，因為是使用者大部分時間會去用的操作。只有少數才會去取消。所以如果這些控制元件挨著排放，你可能不會想要給於相同的重視。

這個 Lighhouse 的“建立任務”按鈕。你可以看到“取消”連結在旁邊以純文字格式。這個按鈕不僅具有更重要的操作而且會有較大的點選區域並且容易去點選。

為了讓使用者的重點轉向“建立”連結，我們可以簡單地利用不同的樣式或者控制元件形式。一些應用程式的表單輸入按鈕用來作為建立動作，並且把取消操作作為一個文字連線。這樣不僅給與建立按鈕更多的點選區域 ，而且也幫助那些在搜尋內容的使用者獲得更好的焦點目光 。

10、嵌入式影片

當圖片和文字作為一種很大的方式去和你的使用者溝通並且教育你的使用者有關你程式的特點時，如果你有資源去投入，影片甚至可以成為更好的選擇。影片在最近幾年的web應用上已被越來越受歡迎。對於Web應用程式，影片通常作為展示產品特點的示範影片 被用於市場網站中。但是這不是使用影片的唯一方法。

GoodBarry 特點是在頭版有示範影片去展示產品，它也透過利用示範影片去教育使用者如何開始使用

一些Web應用程式使用影片嵌入在程式本身教導使用者如果使用某些特定功能。影片是一種非常好的方式去快速展示你產品是被怎麼使用的，因為它更容易描述超過一頁文字的內容，也清楚得多，因為觀眾可以清楚地看到該怎麼辦。

一位好的Web前端開發工程師在知識體系上既要有廣度，又要有深度，所以很多大公司即使出高薪也很難招聘到理想的前端開發工程師。那麼如何系統的學習企業實用的web前端技術呢，為此建立了一個web前端的直播上課學習扣扣裙，web前端前面數字是四九一，web前端中間的數字是四零四，web前端最後是三八九，將數字連線起來就是了。真正想要學習的可以進入，打醬油的就不要浪費大家的時間了。現在說的重點不在於講解技術，而是更側重於對技巧的講解。技術非黑即白，只有對和錯，而技巧則見仁見智