隨著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)在是時候仔細看看一些實用的技術(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)用來說,，這是非常必要的,。

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

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

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

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

　　4.模擬窗戶的陰影

　　彈出菜單和窗口下的陰影不僅僅是看起來漂亮,。它們幫助菜單或窗口通過強調(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)所有功能毫無意義,。請記住,，用戶通常希望得到一些或多或少提供給他們的具體想法，但他們不想直接跳到詳細說明——他們既沒有時間也沒有興趣,。

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

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

　　許多Web應(yīng)用程序都有自定義的按鈕樣式,。這些都是以自定義圖片為背景的錨點或輸入按鈕。在某些情況下,，默認輸入按鈕可能不適合,，有時文本鏈接太小。目前的挑戰(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中的界面,，其界面中默認的工具條被帶有控件的工具條所取代,。無論是圖形編輯、校對還是簡單的書面形式,，每個標(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)容,，楚,，因為觀眾可以清楚地看到該怎么辦。