隨著JS和XHTML應用的普及，網(wǎng)站上出現(xiàn)了越來越多的Web界面應用技術，如我們常見的日歷控件、搜索下拉框等，這些Web界面應用技術極大地豐富了網(wǎng)站的表現(xiàn)形式，本文將為您精心推薦十種最常見的Web界面應用技術。

　　Web應用程序界面設計的核心是網(wǎng)頁設計，但它的重點主要是功能。為了超越桌面應用程序，Web應用程序必須提供一個簡單、直觀和即時響應的用戶界面，這樣他們的用戶就可以花更少的精力和時間來完成事情。

　　過去，我們沒有注意到Web應用程序的方法，但現(xiàn)在是時候仔細看看一些實用的技術和設計解決方案，使Web應用程序更加友好和美麗了。

　　一個好的網(wǎng)絡前端開發(fā)工程師不僅要有知識體系的廣度，還要有深度，所以很多大公司即使付出高薪也很難招到理想的前端開發(fā)工程師。那么如何系統(tǒng)地學習企業(yè)實用的網(wǎng)絡前端技術呢?因此，建立了網(wǎng)絡前端的直播課堂學習扣扣裙。網(wǎng)絡前端前面的數(shù)字是484.網(wǎng)絡前端中間的數(shù)字是757.網(wǎng)絡前端最后的數(shù)字是760.所以連接數(shù)字是可以的。如果你真的想學習，你可以盡量的不要浪費大家的時間?，F(xiàn)在的重點不是講解技術，而是講解技巧。技術不是黑就是白，只有對錯，技能不同。

　　1.界面元素的需求

　　在Web前端開發(fā)中，簡單的原則非常重要。任何時候，你在屏幕上顯示的控制越多，你的用戶就必須花更多的時間來了解如何使用界面。當選擇較少時，可用的功能變得更明顯，更容易被發(fā)現(xiàn)。簡化界面并不容易，尤其是當你不想限制應用程序的功能時。

　　點擊Kontain搜索框的搜索鏈接時，會出現(xiàn)類似下拉菜單的層。因此，如果需要縮小搜索范圍，可以選擇菜單中需要的類型。這些選項的聚合簡化了搜索框。

　　隱藏或掩蓋高級功能是使事情更簡單的方法。找出最常用的功能，隱藏剩下的。你可以用彈出菜單和操作來做這件事，這在桌面軟件中很常見。例如，如果你的搜索欄有一個高級過濾器，把它們放在尾部的特殊下拉菜單中。如果用戶需要使用這些過濾器，他們只需點擊幾次就可以打開這些功能。決定隱藏什么不是一項簡單的任務也取決于操作的重要性和頻率。

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

　　2.特殊操作

　　根據(jù)情況選擇合適的界面控件非常重要。不同的情況下可以以不同的方式處理，有些控件可以比其他控件更好地完成目標工作。

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

　　例如，您可以通過下拉列表選擇日期，但與日歷選擇器相比，下拉列表效率不是很高。在日歷中，您可以直接點擊選擇您想要的一天。日歷選擇器也會讓您更容易看到日期、周期和月份(特別是工作日和休息日)，因此您可以比使用簡單的下拉列表更快地做出更明智的選擇。

　　3.禁止按下按鈕

　　在Web應用程序的表單問題之一是提交過程，這是一個非常簡單的表單。如果您快速點擊兩次或兩次以上的提交按鈕，表單將多次提交。這表明這是一個問題，因為它會重復創(chuàng)建相同的項目。防止重復提交并不難，對于大多數(shù)網(wǎng)絡應用來說，這是非常必要的。

　　它有兩層維護：客戶端和服務器端。我們不會通過服務器端進行維護，因為這將取決于您使用的編程語言和后端架構?；旧?，您應該做的是在提交過程中添加一個檢測機制，以檢查提交的內(nèi)容是否重復，是否需要阻止提交。

　　在Yammer上，當您的新消息提交時，更新按鈕將被禁止。

　　客戶端要簡單得多。你所需要做的就是點擊后禁止提交按鈕。最簡單的方法是為提交按鈕添加JavaScript，如下所示:

　　當然，我們建議您同時檢查服務器端，以確保重復失敗。

　　4.模擬窗戶的陰影

　　彈出菜單和窗口下的陰影不僅僅是看起來漂亮。它們幫助菜單或窗口通過強調(diào)從背景中脫穎而出。它們還通過周圍的深色區(qū)域屏蔽背景內(nèi)容的噪音。

　　這種技術來自傳統(tǒng)的桌面軟件，幫助用戶專注于窗口。因為大多數(shù)場景窗口不容易從桌面程序中識別出來，陰影幫助他們更接近讀者，因為他們覺得窗口似乎是在其他頁面上立體浮動的。

　　Digg的登錄窗口周圍有一個厚厚的陰影來屏蔽網(wǎng)頁噪音。

　　5.空白狀態(tài)告訴你該做什么

　　當你設計一個Web應用程序時，你不僅需要通過樣本數(shù)據(jù)來測試程序，最重要的是，當沒有任何內(nèi)容時，你應該確保它看起來很好，很有幫助。

　　當頁面或查詢結果沒有信息時，告訴你如何處理這些空白區(qū)域是一個非常有用的信息。例如，項目管理應用程序的網(wǎng)頁可能會列出用戶的項目，但如果沒有項目，您可以提供創(chuàng)建項目的鏈接。即使頁面上已經(jīng)有創(chuàng)建項目的按鈕，一點額外的幫助也不會丟失。

　　當你開始建立郵件廣告時，CampaignMonitor會指導你正確的方向。

　　這項技術實際上鼓勵用戶嘗試服務，并在注冊后直接使用。通過應用程序的單步指導，用戶可以幫助他/她了解程序提供的優(yōu)勢以及它是否有用。同樣重要的是向用戶呈現(xiàn)最重要的操作，只有這些—呈現(xiàn)所有功能毫無意義。請記住，用戶通常希望得到一些或多或少提供給他們的具體想法，但他們不想直接跳到詳細說明——他們既沒有時間也沒有興趣。

　　通過空白狀態(tài)激勵用戶和行為，可以大大減少輟學，幫助潛在客戶更好地了解系統(tǒng)如何工作。

　　6.按下按鈕的狀態(tài)

　　許多Web應用程序都有自定義的按鈕樣式。這些都是以自定義圖片為背景的錨點或輸入按鈕。在某些情況下，默認輸入按鈕可能不適合，有時文本鏈接太小。目前的挑戰(zhàn)是，當你讓你的鏈接看起來像按鈕時，它們的操作應該和按鈕一樣——這包括用戶點擊時按的效果。

　　這不是一個純粹的視覺調(diào)整。提供即時反饋給用戶會讓應用感覺更有響應性，給用戶帶來更接近桌面軟件的用戶體驗。

　　您可以通過CSS為按鈕增加按下效果。

　　Highrise的按鈕實際上顯示了點擊時按下的效果，給用戶一種非常舒適的反饋感。

　　7.在登錄頁面提供注冊鏈接

　　一些沒有注冊你的應用程序的用戶將不可避免地停止在你的登錄頁面上。他們想使用你的應用程序，但他們不能立即找到注冊頁面。也許他們已經(jīng)嘗試訪問一個只提供給注冊用戶的特定頁面。

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

　　在您的登錄頁面上放置注冊鏈接將使一切更容易。如果他們沒有賬戶，他們就不應該找到注冊頁面。我們的研究證實，在注冊頁面上，18%的網(wǎng)站有登錄表或鏈接到登錄頁面。

　　8.上下文關聯(lián)導航

　　思考用戶期望看到什么，以及他們在每個給予場景中需要什么是非常重要的。不需要在每個地方顯示相同的導航控件，因為用戶可能不需要它們在每個環(huán)境中。

　　上下文關聯(lián)控件的最佳例子之一是最近微軟office2007中的界面，其界面中默認的工具條被帶有控件的工具條所取代。無論是圖形編輯、校對還是簡單的書面形式，每個標簽編輯、校對還是簡單的書面形式。Web應用程序也可以從上下文相關的控件中受益，因為它們只顯示用戶需要的內(nèi)容，而不是顯示所有內(nèi)容。

　　Lighthouse提供熟悉的標簽導航菜單，但標簽正下方有二級菜單。這個級別只顯示當前項目相關活動的部分。

　　9.更注重主要功能

　　并不是所有的控制器都有同樣的重要性。例如，在屏幕上創(chuàng)建一個新項目時，您可以有兩個按鈕：創(chuàng)建和取消。這個創(chuàng)建鏈接更重要，因為它是用戶大部分時間都會使用的操作。只有少數(shù)人會取消它。所以如果這些控制器被排放在旁邊，你可能不想給予同樣的關注。

　　這個Lighouse的創(chuàng)建任務按鈕。您可以看到取消鏈接以純文本格式附近。該按鈕不僅操作更重要，而且點擊面積大，點擊方便。

　　為了讓用戶的焦點轉(zhuǎn)向創(chuàng)建鏈接，我們可以簡單地使用不同的風格或控制形式。一些應用程序的表單輸入按鈕用于創(chuàng)建動作，并將取消操作連接到文本中。這不僅給了創(chuàng)建按鈕更多的點擊區(qū)域，也幫助那些在搜索內(nèi)容時獲得更好的焦點。

　　10.嵌入式視頻

　　當圖片和文本以一種很大的方式與您的用戶溝通，并教育您的用戶關于您程序的特征時，如果您有資源投資，視頻甚至可以成為更好的選擇。近年來，視頻在網(wǎng)絡應用程序中越來越受歡迎。對于網(wǎng)絡應用程序，視頻通常被用作市場網(wǎng)站上展示產(chǎn)品特征的示范電影。但這并不是使用視頻的唯一方法。

　　GoodBarry的特點是在頭版有示范視頻來展示產(chǎn)品，它還通過使用示范電影來教育用戶如何開始使用。

　　一些Web應用程序使用視頻嵌入程序本身，教用戶如果使用某些特定的功能。視頻是快速顯示你的產(chǎn)品是如何使用的一個非常好的方法，因為它更容易描述超過一頁的內(nèi)容，楚，因為觀眾可以清楚地看到該怎么辦。