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

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

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

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

　　1.界面元素的需求

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

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

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

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

　　2.特殊操作

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

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

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

　　3.禁止按下按鈕

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

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

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

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

　　當(dāng)然，我們建議您同時檢查服務(wù)器端，以確保重復(fù)失敗。

　　4.模擬窗戶的陰影

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

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

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

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

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

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

　　當(dāng)你開始建立郵件廣告時，CampaignMonitor會指導(dǎo)你正確的方向。

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

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

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

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

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

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

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

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

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

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

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

　　8.上下文關(guān)聯(lián)導(dǎo)航

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

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

　　Lighthouse提供熟悉的標(biāo)簽導(dǎo)航菜單，但標(biāo)簽正下方有二級菜單。這個級別只顯示當(dāng)前項目相關(guān)活動的部分。

　　9.更注重主要功能

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

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

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

　　10.嵌入式視頻

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

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

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