Web前端經常使用的十種技術

Web前端應用十種經常使用技術，隨着JS與XHTML的應用普及，愈來愈多的web界面應用技術出如今網站上，好比咱們常見的日曆控件，搜索下拉框等，這些web界面應用技術大大的豐富了網站的表現形式，本文將爲您精心推薦十種最多見的web界面應用技術。

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

之前，咱們並無注意到web應用程序這個方式，可是如今是時候仔細看看一些實用的技術和設計解決方案，讓Web應用更友好更漂亮。

一、界面元素的需求

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

當你點擊 Kontain 搜索框的搜索連接時，會出現一個相似於下拉菜單的層。因此，若是您須要來縮小搜索範圍，您能夠選擇菜單中你所須要的類型。這些選項的聚合簡化了搜索框。

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

當你點擊 CollabFinder 的搜索連接時你不須要打開不一樣的頁面，相反，搜索框的控制菜單下拉下來，容許你可以直接開始搜索。

二、專門操做

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

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

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

三、禁用按下按鈕

在web應用程序的表單問題中有一個就是提交過程，很是簡單的表單，若是你快速地點擊兩次或者更屢次「提交」按鈕，這個表單會被屢次提交。這顯示是個問題，由於它會重複建立相同的項目 。防止重複提交的不是很難，並且對於大多數Web應用程序來講作到這一點是很是必要的。

它有兩層維護：客戶端和服務器端 。咱們不會經過服務器端維護是由於這將取決於您使用的編程語言和你的後端架構。基本上你應該作的就是在提交過程當中添加一個檢測機制，去檢查被提交的內容是否重複，而且是否須要阻止提交

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

客戶端則是簡單得多。全部您須要作的就是在點擊以後禁用「提交」按鈕 。最簡單的方法就是爲「提交」按鈕添加一段JavaScript，以下所示：

固然，咱們會建議您同時還對服務器端進行檢查，以確保重複不會得到經過。

四、模擬窗口的陰影

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

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

Digg 的登陸窗口有一個厚厚的陰影圍繞它來屏蔽網頁噪音。

五、空白狀態告訴你要作什麼

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

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

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

這種技術實際上鼓勵用戶試用服務，並在註冊以後直接使用這項服務。經過應用程序的單步指導用戶可以幫助他/她去了解程序提供的優點以及是否有用。一樣重要的是把最重要的操做呈現給用戶而且只有這些而已——把全部功能都呈現出來並無意義。請記住，用戶一般但願獲得一些或多或少提供給他們的具體構思，可是他們不想要直接跳到詳細說明去——他們既沒有時間也沒有興趣。

經過空白狀態去激勵用戶和行爲，能夠大大減小「輟學」，而且幫助您的潛在客戶，更好地瞭解該系統如何工做。

六、按鈕的按下狀態

許多Web應用程序有自定義的按鈕樣式。這些都是用自定義圖片做爲他們背景的錨點或輸入按鈕。默認輸入按鈕可能不適合在一些狀況下，以及文字連接有時過於眇小。目前的挑戰是，當你把你的連接弄得看上去像按鈕時，它們的操做也應該和按鈕同樣——這包括當用戶點擊它們時會有被「按動」的效果 。

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

你能夠經過CSS爲按鈕增長按下的效果。

Highrise 的按鈕其實是在你點擊的時候顯示一個按下的效果，給用戶一個很是溫馨的反饋感受。

七、在登錄頁面提供註冊的鏈接

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

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

在你的登錄頁面上放上註冊的鏈接 會讓一切容易不少。若是他們沒有帳戶，他們不該該去尋找註冊頁面。咱們研究證明：在註冊頁面，有18%的網站有登陸表單或者連接到登錄頁面的鏈接。

八、上下文關聯導航

思考什麼是用戶指望看到的以及在每一個給與的情景 中他們須要什麼是很重要的。你不須要在每一個地方顯示一樣的導航控件由於在用戶可能不是在每一個環境中都須要它們。

上下文關聯控件的最佳範例之一是最近在微軟office 2007中的界面，在它的界面中默認的工具條被帶裝控件代替。每一個標籤上有不一樣控件相關的特定操做，不管是圖形編輯，校對或者簡單書面形式。web應用程序也能夠受益於這種上下文關聯的控件，由於這些控件經過只顯示用戶須要的內容來幫助整潔界面，並不是顯示全部的內容 。

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

九、更加劇視主要功能

不是全部控件擁有相同的重要性 。例如，在屏幕上建立一個新項目，你能夠有兩個按鈕：「建立」和「取消」。這個「建立」的連接更重要一些，由於是用戶大部分時間會去用的操做。只有少數纔會去取消。因此若是這些控件挨着排放，你可能不會想要給於相同的重視。

這個 Lighhouse 的「建立任務」按鈕。你能夠看到「取消」連接在旁邊以純文本格式。這個按鈕不只具備更重要的操做並且會有較大的點擊區域而且容易去點擊。

爲了讓用戶的重點轉向「建立」連接，咱們能夠簡單地利用不一樣的樣式或者控件形式。一些應用程序的表單輸入按鈕用來做爲建立動做，而且把取消操做做爲一個文字鏈接。這樣不只給與建立按鈕更多的點擊區域 ，並且也幫助那些在搜尋內容的用戶得到更好的焦點目光 。

十、嵌入式視頻

當圖片和文字做爲一種很大的方式去和你的用戶溝通而且教育你的用戶有關你程序的特色時，若是你有資源去投入，視頻甚至能夠成爲更好的選擇。視頻在最近幾年的web應用上已被愈來愈受歡迎。對於Web應用程序，視頻一般做爲展現產品特色的示範影片 被用於市場網站中。可是這不是使用視頻的惟一方法。

GoodBarry 特色是在頭版有示範視頻去展現產品，它也經過利用示範影片去教育用戶如何開始使用

一些Web應用程序使用視頻嵌入在程序自己教導用戶若是使用某些特定功能。視頻是一種很是好的方式去快速展現你產品是被怎麼使用的，由於它更容易描述超過一頁文字的內容，也清楚得多，由於觀衆能夠清楚地看到該怎麼辦。

一位好的Web前端開發工程師在知識體系上既要有廣度，又要有深度，因此不少大公司即便出高薪也很難招聘到理想的前端開發工程師。那麼如何系統的學習企業實用的web前端技術呢，爲此創建了一個web前端的直播上課學習扣扣裙，【web前端前面數字是四八四，】【web前端中間的數字是七五七】，【web前端最後是七六零】，將數字鏈接起來就是了。真正想要學習的能夠進入，打醬油的就不要浪費你們的時間了。如今說的重點不在於講解技術，而是更側重於對技巧的講解。技術非黑即白，只有對和錯，而技巧則見仁見智。