Web前端應用十種常用技術，随着js與Xhtml的應用普及，越來越多的web界面應用技術出現在網站上，比如我們常見的月曆控件，搜尋下拉框等，這些web界面應用技術大大的豐富了網站的表現形式，本文将為您精心推薦十種最常見的web界面應用技術。
Web應用程式的界面設計，其核心就是網頁設計 ，但它的重點主要是在功能方面。要超越桌面應用程式， Web應用程式必須提供簡單、直覺和即時響應的使用者界面，讓他們的使用者花更少的精力和時間去完成事情。
以前，我們并沒有注意到web應用程式這個方式，但是現在是時候仔細看看一些實用的技術和設計解決方案，讓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 提供一個熟悉的标簽導航菜單，但是它在标簽正下方有二級菜單。這個層級隻顯示目前項目相關活動的部分。
資源搜尋網站大全 https://www.renrenfan.com.cn
9、更加重視主要功能
不是所有控件擁有相同的重要性 。例如，在螢幕上建立一個新項目，你可以有兩個按鈕：“建立”和“取消”。這個“建立”的連結更重要一些，因為是使用者大部分時間會去用的操作。隻有少數才會去取消。是以如果這些控件挨着排放，你可能不會想要給于相同的重視。
這個 Lighhouse 的“建立任務”按鈕。你可以看到“取消”連結在旁邊以純文字格式。這個按鈕不僅具有更重要的操作而且會有較大的點選區域并且容易去點選。
為了讓使用者的重點轉向“建立”連結，我們可以簡單地利用不同的樣式或者控件形式。一些應用程式的表單輸入按鈕用來作為建立動作，并且把取消操作作為一個文字連接配接。這樣不僅給與建立按鈕更多的點選區域 ，而且也幫助那些在搜尋内容的使用者獲得更好的焦點目光 。
10、嵌入式視訊
當圖檔和文字作為一種很大的方式去和你的使用者溝通并且教育你的使用者有關你程式的特點時，如果你有資源去投入，視訊甚至可以成為更好的選擇。視訊在最近幾年的web應用上已被越來越受歡迎。對于Web應用程式，視訊通常作為展示産品特點的示範影片 被用于市場網站中。但是這不是使用視訊的唯一方法。
GoodBarry 特點是在頭版有示範視訊去展示産品，它也通過利用示範影片去教育使用者如何開始使用
一些Web應用程式使用視訊嵌入在程式本身教導使用者如果使用某些特定功能。視訊是一種非常好的方式去快速展示你産品是被怎麼使用的，因為它更容易描述超過一頁文字的内容，也清楚得多，因為觀衆可以清楚地看到該怎麼辦。